Bourbon and Neat

Install the Bourbon and Neat files into your project

Note: you must be in your project directory when you use these commands

$ bower install --save bourbon
$ bower install --save neat

Then, in your main sass stylesheet:

@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
@import '../bower_components/neat/app/assets/stylesheets/neat';

Bourbon

Bourbon is a collection of SASS mixins. It is especially useful when using CSS properties that require vendor prefixes (i.e. -webkit-...).

A selection of bourbon functions and mixins

The complete list of functions and mixins is available at http://bourbon.io.

• em(), rem()
• modular-scale()
• tint(), shade()
• clearfix
• font families
• HTML5 input types
• position shorthand
• animation timing functions
• CSS triangle

Neat

Neat is a grid framework built on top of Bourbon.

The examples page shows the common usages of the library.

A selection of neat functions and mixing

• outer-container: Used to set up the container for your grid.
• span-columns: Used to make an element take up a certain number of grid columns
• omega: Used to remove the gutter from an element or set of elements so they can fit neatly in the grid.
• new-breakpoint
• media