Knowledge for the World

Install bourbon in your rails project

Bourbon is a library of Sass mixins. It provides a lot of functionality while keeping your css slim. Assuming you're using a standard rails installation, Sass will already be installed and working. This guide will show you how to install bourbon (and the entire bourbon family) in your rails project.


In your Gemfile, add:

gem 'bourbon'                                                                                                  
gem 'neat'                                                                                                     
gem 'bitters'                                                                                                  
gem 'refills'

And now install them.

bundle install


Now we'll want to install bourbon in our stylesheets directory.

bourbon install --path app/assets/stylesheets/

And the rest of the family.

cd app/assets/stylesheets
neat install
bitters install


If you're still in your stylesheets directory from the previous step you can run:

mv application.css application.scss

And if you're back in your project root you can use:

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss


The bourbon documentation says to "delete all Sprockets directives in application.scss (require, require_tree and require_self) and use Sass’s native @import instead" so that's what we'll do.

Edit your application.scss file and look for references to require, require_tree, and require_self and delete them.


At the top of application.scss and before any other imports, you'll want to import bourbon. You can also import the other members here.

@import "bourbon/bourbon"                                                                                      
@import "base/base"                                                                                            
@import "neat/neat" 


You now have the bourbon family installed in your rails application. Check out each of the github repositories for more information about each library.

And the page for each library:

Also, if you're just getting started check out this article for some great examples: