Bourbon and Neat

Install the Bourbon and Neat files into your project

If you don't have bower installed, you will need to run the following (it won't hurt to run it either way).

$ npm install -g bower

Now you can use bower to install bourbon and neat:

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