Bourbon is a library, and also a Ruby Gem, of sass mixins that are designed to be written as vanilla as possible—meaning, whenever possible, they should not stray from the original CSS syntax. The mixins contain vendor specific prefixes on all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
Examples
# Bourbon syntax
@include box-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.3));
# Output
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
-ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
# Bourbon syntax
@include box(horizontal, start, stretch);
# Output
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
# Bourbon syntax
@include animation-basic( (fadein, slideup), (2.0s, 1.0s), ease-in );
# Output
-webkit-animation-name: fadein, slideup;
-moz-animation-name: fadein, slideup;
animation-name: fadein, slideup;
-webkit-animation-duration: 2s, 1s;
-moz-animation-duration: 2s, 1s;
animation-duration: 2s, 1s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
The tools
Bourbon contains a number of commonly used CSS3 properties, such as linear-gradient and border-radius. We’ve also built in support for the latest CSS3 animation and transition properties. Bourbon has flex-box and a number of other CSS3 properties covered.
Our functions are pretty useful too. Like the golden-ratio function which can be used for calculating heading font-sizes based on the golden ratio. Modularscale.com is an excellent web-based tool for calculating font-sizes.
How Bourbon was born
The designers at thoughtbot are huge fans of Sass. We’ve been using sass on all our projects for over a year now. Previously we had two or three sass mixins that we used across all our projects (primarily linear-gradient and border-radius). As we began writing more CSS3 which included vendor specific prefixes, our mixin library eventually grew larger. With multiple designers working on various apps and client projects, it became increasingly difficult to distribute and update our small set of mixins across all these environments. Before the library was formalized on git, versioning was difficult too—if I made improvements to a mixin, there was no efficient way to inform the other designers about the changes. Eventually the library grew large enough that it became clear that the best way to manage the mixins was through git, and distribute them with a gem. And thus Bourbon was born.
Why vanilla syntax
Part of our core philosophy when creating Bourbon was to keep the mixins as close to normal CSS as possible. There is already learning required with all the new CSS3 properties, and let us not forget Sass syntax. We thought the best way to learn proper CSS3 was to keep the mixins as syntactically similar to CSS3 as possible.
Why not compass
Compass is a great toolset for anyone using sass. We initially solved our own problems using the toolset we created—Bourbon. Building our own tools allows us to have finer control of our mixins, functions and addons, which we are particularly keen on. We didn’t set out to build a public library of sass mixins, but over time it became increasingly difficult to not share these tools for other to use. Bourbon has been, and continues to be, a toolset for which we have been learning from. By creating our own set of mixins, we are pushed to continuously think of innovative ways to improve our front-end development knowledge and resources.
What’s with the name
Bourbon Vanilla is the most commonly used variety of vanilla extract—I also have a nose for the sweet vanilla notes in a fine bourbon whiskey ;).
We look forward to building out Bourbon to support even more CSS3 properties, as well as building useful addons and functions for providing designers and developers with an even greater set of development tools. Keep an eye out for more blog posts covering Bourbon.
If your palate can handle the sophisticated flavors, try a glass of our fine Bourbon.
