10 Sass libraries to help speed up website development

code

SASS is one of the popular CSS preprocessors nowadays. It allows the developer to use tools such as variables, functions, myxins, inheritance, and branching when working with stylesheets. There are hundreds of plugins, libraries, and frameworks for SASS that help reduce the time it takes to develop a website.

GRIDLEX
Gridlex – a grid for developing templates and modules

Gridlex is a simple css grid for designing templates and modules. It’s easy to use. It’s enough to wrap your column (.col) with a grid container (.grid). The library allows you to create adaptive design based on media queries and supports grid branching directly in the column.

BUTTONS
Buttons – creating stylish buttons

Free open source SASS library for creating customizable buttons. Allows you to quickly and easily make great buttons in rich colors for your site. The library includes a large number of button styles, including flat design options, rounded corners, 3D and more.

BOURBON
Bourbon – cross-browser layout

Bourbon is a simple, lightweight SASS library for creating cross-browser style sheets. It includes almost everything you need to design great websites – mixins, functions, add-ons. The library is completely independent and doesn’t require any configuration.

SASSY INPUTS
Build forms with SASS

A library of Sass mixins for building CSS3 styles for input forms with minimal size and cross-browser compatibility. Includes mixins for creating text input fields, search, buttons, checkboxes, select items, and radio buttons. Sassy Inputs is customizable. Shortcuts are designed to work.

SAFFRON
Saffron – animations and transitions on your site

Saffron is a simple Sass muxin library for quickly incorporating animations and transitions for your site into your code. The library is easy to use. You just need to add a myxin to the declaration and use a variable to include the desired effect. The library includes a large number of animation effects and state transitions – dimming, sliding, twitching and others.

MINI.CSS
Minimal code – maximum functionality

Lightweight framework for responsive websites. In compact form it occupies only 10 Kb. Adaptive grid and component set allows quick and easy implementation of any design for all screen sizes.

ANGLED EDGES.
Special block design

Sass mixin to create beveled edges on a section using dynamic SVG. A vector triangle is created as the background image. You can set its background color, position, fill, height, width and hypotenuse. Supported by all modern browsers – Chrome, Firefox, Safari, Edge and including IE 9+.

TYPESETTINGS
How easy it is to work with fonts

With Typesettings, you can set the font size for modular scale in ems, vertical rhythm, and baseline-based adaptivity factor. By default. Baseline size is set to 6 px and supports vertical rhythm with borders expressed in pixels. Typesettings contains all the math for working with ems and uses modular scale values to set the font size.

MATERIALIZECSS
Material design implementations by code

A framework for material style design implementation. It is easy to customize and adapts to different screen sizes. The framework includes a large set of components – buttons, cards, forms, navigation bars, page switches, and more. Compatible with Chrome, Firefox, Safari, Edge and IE 11+ browsers.

INCLUDE MEDIA.
Media queries with SASS make it fast

Sass library for quickly creating media queries. Contains a list of tipping points for smrtphones, tablets and desktops. They are easy to customize, You can write media queries using em and rem units, create aliases for frequently used expressions.