This month, I performed a major overhaul to this blog’s presentation layer, ripping out Twitter Bootstrap and replacing it with Bourbon, Neat, Bitters and Refills, aka the “Bourbon Family”. They are a collection of SASS libraries produced by the folks at thoughtbot, and together they can give your site a slick, responsive design without cluttering up your HTML. Unfortunately, figuring out how to use them properly is easier said than done. The Internet is surprisingly lacking in Bourbon related articles and tutorials, and thoughtbot’s official documentation is written by and for seasoned web developers (which I am certainly not one of).
In other words, getting as far as I have (which is isn’t very far at all) took me more time than I’d care to admit. But maybe, just maybe, I can prevent others from wasting some of their own time. Thus I present my best effort at a beginner’s guide on how to use the Bourbon family. We’ll start with Bourbon itself, as it is both the family’s namesake and its foundation.
What It Is
Bourbon is a collection of SASS mixins and functions. Their purposes vary, but the majority of them are meant to automatically generate vendor prefixes for new and experimental CSS3 styles. This allows you to write a style once and have it work in any browser that supports it.
Other functions aid in performing complex CSS behaviors, such as animations, gradients and grid layouts (the last of which is made even better by the next member of the family). Still others perform numerical computations like ratios.
What I Like
I like that everything in Bourbon exists as a SASS mixin. When your code is generated into CSS, it will only contain the features you used, rather than the entirety of the Bourbon library. This keeps your CSS as lean as possible.
I also like that it helps prevent the all too common issue of websites only using Webkit-specific prefixes, leaving the rest of the browser world for dead.
What I Don’t Like
The official documentation doesn’t do a great job at specifying which mixins spit out vendor prefixes. It turns out that they all contain a link labeled “view spec”, which the Rubyist in me assumed would lead to some kind of RSpec test. In reality, these links point to the corresponding style definition on MDN.
I also wish the documentation would provide better example code. For example, it would be nice if the animation or gradient functions contained a bit of HTML (and more fleshed out SASS) to make it obvious how to apply them. Thoughtbot already does this when documenting other parts of the Bourbon family, so I don’t understand why they couldn’t do it here.
The Verdict
When used on its own, Bourbon is likely to be handy, but I wouldn’t call it necessary. Its real purpose is to serve as the basis for the other libraries in the family.
How To Use It
I created a demo Ruby project on Github which you can use to experiment with Bourbon. It contains a barebones Middleman configuration containing everything you need to begin. Here are instructions on how to install it:
- Check out the repository:
git clone https://github.com/taidan19/bourbon_family_demo_project - Make sure bundler is installed:
gem install bundler - Change directories into the project’s root folder and run
bundle installto setup Middleman and its dependencies. - Run
bundle exec middlemanto start the Middleman test server.
You can use the file source/stylesheets/demo.css.scss to experiment with Bourbon mixins, and source/index.html.erb to create HTML on which to apply your styles.
For example, if you had this in demo.css.scss:
li {
@include background-image(linear-gradient(to left, #FFF, #F4F5F7) );
}and this in index.html.erb:
<div>
<ol>
<li>
test
</li>
</ol>
</div>then you should see something like this when you navigate to localhost:4567
Hopefully this gives you a better environment in which to play around with Bourbon’s features.
In the next post in this series, we will look into the next member of the Bourbon family - Neat.