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.

1

In your Gemfile, add:

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

And now install them.

bundle install

2

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

3

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

4

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.

5

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" 

6

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

https://github.com/thoughtbot/bourbon

https://github.com/thoughtbot/neat

https://github.com/thoughtbot/bitters

https://github.com/thoughtbot/refills

And the page for each library:

http://bourbon.io/

http://neat.bourbon.io/

http://bitters.bourbon.io/

http://refills.bourbon.io/

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

http://neat.bourbon.io/examples/