Bourbon is a top-notch Sass mixin library for designers. It has a minimalistic approach and is serious about creating quality code that cares about semantics. The Bourbon library also encourages best practices for developing scalable code.
A Short Introduction
In actual fact, far from being just a mixin library, Bourbon has grown into a small suite of projects which are maintained by the designers at thoughtbot. In the coming tutorials, I’ll cover all of the follwing in detail:
For now, here’s the gist:
Bourbon mainly provides a small but juicy set of mixins and functions that have been extracted from various designers’ Sass code. The idea was to centralize useful mixins and to avoid reinventing the wheel all the time.
Neat is a lightweight grid framework for Sass. It is built on top of Bourbon and was motivated by the need for a semantic approach to layout sites.
Refills is a collection of design patterns, nicely styled or unstyled. They are also designed with Bourbon and Neat. Super useful code examples are at your disposal.
Bitters are a few scaffold styles, variables and a bit of structure for new Bourbon projects. They get you up and running in no time.
Bourbon: A Mixin Library For Sass
The original Bourbon was released in early 2011 by Philip LaPier, at the time digital product designer at thoughtbot. The project started out by centralizing various mixins from different designers in the company.
Today, Bourbon is a top-notch Sass library for designers. It has a minimalistic approach and is serious about creating quality code that cares about semantics. I like it especially because it encourages best practices for developing great code that scales.
This gem helps designers to write their code faster and manages a lot of the nitty-gritty details (like annoying vendor prefixes). Its mixins often act as wrappers for outputting quality CSS, but stay as vanilla as possible by staying true to the original CSS syntax.
Worth Pointing Out
- Bourbon is pure Sass, platform agnostic and it works with any Sass project.
- It’s very close to vanilla CSS syntax.
- It isn’t tied to Ruby (unlike Compass).
- Bourbon includes awesome functions.
- It outsources vendor prefixes.
- It’s super lightweight.
- It’s semantic.
Setup
Right then, let’s get this moving! Fire up your terminal, change to your project’s directory, and install Bourbon via RubyGems:
$ gem install bourbon
Note: If you’re not entirely comfortable using the command line, check out our beginners’ series The Command Line for Web Design
Change into your project’s stylesheets directory and generate your bourbon folder.
$ bourbon install
This command generates a bourbon folder which contains the functions, mixins, helpers, and settings that you need. I’d recommend that you don’t touch this folder; it will give you a much smoother experience updating Bourbon in the future.
Finish the setup by importing the generated Sass files in your stylesheets. Import Bourbon on top of your application.sass file and make sure you import other Sass files below that:
In application.sass:
@import 'bourbon/bourbon' @import 'other-sass-partials-below'
Bourbon Mixins Overview
Bourbon has a wide range of super useful mixins to speed up your work. In terms of design, its safe to say that its creators want to support your own design decisions without forcing a particular style on you. You are encouraged to mix your own awesome sauce, using these mixins as a stable and relatively neutral basis.
Here are a couple of mixins I recommend you check out first:
background-imagelinear-gradientborder-radiusretina-imageinline-blocktransitionsbox-sizinganimationsfont-facetriangleclearfixpositionbuttonsize
We’ll learn more about individual Bourbon mixins in future tutorials.
Bourbon Functions Overview
Sass already has a ton of built-in functions. They range from manipulating strings, to messing with opacity and colors. Bourbon adds a couple of selected enhancements and provides very handy Sass functions for a variety of use cases. Begin by looking into this selection:
linear-gradient()modular-scale()golden-ratio()shade()tint()em()
Again, we’ll be looking in detail at Bourbon functions later in the series.
Bourbon Add-ons
Bourbon defines some small, but useful sets of default variables, for example:
Font Stack Variables
$lucida-grande$monospace$helvetica$verdana$georgia
Instead of the traditional way of defining font stacks:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
with Bourbon you use one of the font-family variables:
font-family: $helvetica
Timing Variables
Bourbon provides a ton of timing variables, straight out of the box. A mixin like transition has the following syntax:
.some-element
+transition(all 5s $ease-in-circ)
// SCSS syntax
// .some-element {
@include transition(all 5s $ease-in-circ);
// }
The last parameter defines its timing through a variable. You can fine-tune the transitional behaviour by providing one of 24 variables to control the timing. The following GIF illustrates the options:
Conclusion
Do your future self and your colleagues a favor and give Bourbon a shot. This gem puts a high value on semantic markup, while being lightweight and simple. It will serve you well with your design and CSS architecture, plus it aids cultivating best practices for creating superb code.
Join me in the next part of this series, when I take a deeper look at Bourbon’s functions.
