Install bourbon in your rails project

Install bourbon in your rails project

Tyler Tyler (258)
0

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.

Posted in these interests:

code
PRIMARY
86 subscribers
webdev
83 subscribers
rails
6 subscribers

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.

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/