Bourbon and Friends

A lightweight alternative to Bootstrap

Megan Bowra-Dean
@megahbite

Bootstrap

Useful framework for putting together a modern responsive website quickly

BUT

  • 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

http://bourbon.io

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);

Outputs

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

Neat

http://neat.bourbon.io

  • 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 sidebar
  

  

    I'm the content
  

  

    And I'm the footer
I'm the sidebar
I'm the content
And I'm the footer

Bitters

http://bitters.bourbon.io

  • 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
}

Refills

http://refills.bourbon.io

  • 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.

Summary

Benefits

  • 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.

APPLAUD NOW