Bourbon and Friends

A lightweight alternative to Bootstrap

Megan Bowra-Dean


Useful framework for putting together a modern responsive website quickly


  • Heavy - 776KB minified
  • Inflexible
    • Requires specific DOM element structure for many of its components
    • Hard to customize (only recently got an official SASS port with customizable variables)

Enter Bourbon

Bourbon at its core is a library of useful SASS mixins

Includes things like helpers that allow you to ignore vendor prefixes in CSS

@include box-sizing(border-box);


-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


  • Neat is a separate library built on top of Bourbon
  • Introduces mixins for building a grid framework
  • Doesn't require a specific DOM structure like Bootstrap
  • Responsive out of the box
.wrapper {
  @include outer-container;

  .sidebar {
    @include span-columns(4);

  .content {
    @include span-columns(8);
    @include omega();

  .footer {
    @include span-columns(12);
I'm the content
I'm the content


  • The next layer on top of Neat+Bourbon
  • Provides basic scaffolding, typography, form styling, flashes etc.
  • All controlled by SASS variables, designed to be overridden.
h1, h2, h3, h4, h5, h6 {
  font-family: $header-font-family;
  line-height: $header-line-height;
  margin: 0;
  text-rendering: optimizeLegibility;

h1 {
  font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px

h2 {
  font-size: $base-font-size * 2; // 16 * 2 = 32px


  • The final layer of the Bourbon family
  • Not so much a library as a set of CSS+JS patterns to copy and paste.
  • Provides hero units, navigation, tabs etc.



  • A lot lighter than Bootstrap. Only the mixins you use will end up in your production site.
  • A lot more flexible by virtue of nearly everything being defined as SASS variables.
  • Doesn't suffer from YABS (Yet Another Bootstrap Site) syndrome.

Caveats and Drawbacks

  • Requires SASS.
  • Requires more technical knowledge to use than Bootstrap.
  • Officially packaged as a Ruby Gem, requiring you to have Ruby installed.
    • However there are up-to-date Bower and Node.js packages available.