Getting started with Bourbon

Compass is the most famous Sass mixin library. It provides lots of cross-browser CSS implementations alongside powerful helper features like easy data URI and image sprite creation and more. However, some argue it's a layer of complexity they can live without, especially if they're just beginning with Sass. This is where Bourbon comes in.

Bourbon describes itself as "A simple and lightweight mixin library for Sass". The project's creator, Phil LaPier expands upon this, saying, "I wanted a unified mixin library to make it easier to update vendor prefixes, and to have a simple starting place for all our new projects, so I created Bourbon.”

Try the Bourbon

In case you're not familiar with the term 'mixin', it's a feature when using Sass to produce repetitive CSS code with ease. An obvious use case is vendor prefixes for experimental CSS properties. A mixin saves all the usual laborious repetition. Here is an example from the Bourbon docs:

.linear-gradient { @include linear-gradient(#1e5799, #2989d8); }

That produces this CSS:

.linear-gradient { background-color: #1e5799; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #2989d8)); background-image: -webkit-linear-gradient(#1e5799, #2989d8); background-image: linear-gradient(#1e5799, #2989d8); }

Bourbon has generated a full ‘vendor stack' of CSS properties that will afford the widest possible browser support. In addition, for bonus points, it automatically creates a solid hex-based background colour from the first colour value passed (that value can be changed if needed) for browsers that have no idea what a linear gradient even is.

Such functionality is very much the domain of Compass. So what prompted the creation of Bourbon? "I tried Compass before writing Bourbon, but I had a poor experience with it," explains LaPier. "Compass required a configuration file, the documentation was hard to navigate, and frankly I struggled to get it working on any of my projects - it was a huge pain. I wanted something easier to use and less bloated - something that just worked."

Bourbon has mixins for everything from experimental CSS properties to modular scale and golden ratio helpers. Hopefully your appetite has been whetted enough to take a closer look. Let's get it installed and take a few features for a spin.

Installing Bourbon

We're assuming here you'll be setting up a standalone project although, if you're a Rails user, you can bring it into your project using a gem file (gem 'bourbon') and running bundle install. For everyone else, there are two options: install from the command line or use a GUI tool like LiveReload, Hammer or CodeKit that support Bourbon 'out of the box'. However, be aware that some of the GUI tools may lag behind the latest releases of Bourbon. For brevity, we're unable to cover how to use the command line here. If the thought of using the command line gives you goose bumps, you'd best pay for a GUI tool instead.

To install Bourbon from the command line. Open up your command line interface and type the following (Windows users may need to install Ruby first):

gem install bourbon

And press enter. If you're on OS X (or Linux), there's a chance you'll need super user rights to install it. In which case, type the following and press enter:

sudo gem install bourbon

Including Bourbon in a project

If you're a Compass user, including Bourbon in a project may seem a little odd. Without the Compass config.rb file there is no easy way to require additional plugins in the Sass project.

Therefore, it's necessary to include all the Bourbon files in a project manually. Thankfully, there's a single Bourbon command to do this (be aware that if using a GUI tool you can ignore this next step). In the root of your project folder, type the following on the command line and press enter:

bourbon install

This will create a folder called bourbon containing all the Bourbon mixins and files necessary to get working with Bourbon. With that done, add the following line at the top of your main style sheet @import 'bourbon/bourbon';. Now we're ready to play with all that Bourbon has to offer. If you don't have something lined up to compile the Sass (for example, Grunt or a GUI tool) then run the following command: sass --watch sass:css where css is the resultant folder for the generated CSS.

Defining features

Rather than look at the usual suspects (gradients, border-radius, multi-columns and the like) let's look at some of the more unusual things that Bourbon includes.

Easy buttons

Need to create smart looking buttons with minimal effort? Bourbon has you covered. Here's how you can make a rounded button:

.pill-button { @include button(pill, #ff9900);}

The mixin takes two arguments. A style (simple, shiny or pill) and then a colour. The result in this example saves writing 37 lines of 'vanilla' CSS code!

Easy CSS triangles

Bourbon uses the CSS border technique to create triangles in pure CSS. The triangle mixin makes it easy. Here's how the mixin works:

.triangle { @include triangle(2em, #ff9900, up);}

The first argument is the triangle size (we've used em here but it could be any valid unit of measure such as px or rem), then the colour and finally the orientation. If you need to produce a bordered triangle for browsers that support pseudo classes, you can build on this mixin. For example:

.triangle { position: relative; &:before { position: absolute; @include triangle(34px, #000, up); left: 50%; top: -18px; margin-left: -17px; display: block; content: " "; } &:after { position: absolute; @include triangle(32px, #ff9900, up); left: 50%; top: -16px; margin-left: -16px; display: block; content: " "; }}

That will produce an orange triangle with a black border (one sat behind the other using absolute positioning).

Easy golden ratios

The Bourbon golden ratio function makes it easy to create elements that relate to one another on the golden scale. Let's look at a basic example. We will use it to make header styles that are all related to one another by the golden ratio.

h1 { font-size: 4rem;}h2 { font-size: golden-ratio(4rem, -1);}h3 { font-size: golden-ratio(4rem, -2);}

That compiles to the following CSS:

h1 { font-size: 4rem; }h2 { font-size: 2.47219rem; }h3 { font-size: 1.52793rem; }

Be aware that the integer must be a whole number, so it's not possible to do font-size: golden-ratio(4rem, -1.5);.

Conclusion

We're just scratching the surface of Bourbon with this whistlestop tour. Besides the raft of easy CSS3 mixins, there are custom timing functions for transitions, vendor prefixed keyframes for animations and a grid system. Be sure to take a look at the documentation at the project's website.