When I say "The Bourbon Family", I am referring to Bourbon, Neat, Bitters, and Refills. What are they? Well, Bourbon is a mixin library for Sass. The others are built on top of Bourbon. Neat is a Sass grid system. Bitters is a kind of scaffold project with some sensible default styles. Refills is a collection of common components (think Bootstrap with less fail :P). Together they form the Bourbon Family!

Installation #

To begin, install Bourbon, Neat, and Bitters using Ruby Gems.

gem install bourbon neat bitters

This will install the CLI gems that are used to install The Bourbon Family to your project. Next we need to install them in our project. I prefer to install them to a lib directory inside my Sass directory. This can be done for Bourbon by passing a --path argument to the install command. For some reason, Neat and Bitters do not take a path argument. No worries! We can work around that.

bourbon install --path ./sass/lib/
neat install && mv neat ./sass/lib/
bitters install && mv bitters ./sass/lib/

This will install a bunch of scss files into sass/lib. I check these into Git. I'm not sure if that is a bad thing but it works for me.

Getting Started #

Now you can import them into your base Sass file.

// Variables
$black: #000;

@import 'lib/bourbon/bourbon';

@import 'lib/neat/neat-helpers';
@import 'lib/bitters/grid-settings';

@import 'lib/bitters/variables';

// Bitters Variable Overrides
$base-font-family: 'Open Sans', $sans-serif;
$header-font-family: 'Noto Sans', $base-font-family;

@import 'lib/bitters/extends/base';
@import 'lib/bitters/mixins/base';
@import 'lib/bitters/typography';
//@import "lib/bitters/forms";
@import 'lib/bitters/tables';
@import 'lib/bitters/lists';
@import 'lib/bitters/flashes';

@import 'lib/neat/neat';

Woah! That's a lot of imports. Well... not really. Ideally your base sass file should be entirely imports. This is accomplished by structuring your Sass in a modular way. </preach> If you are wondering why I have forms commented out, it's because my blog (the project I took this code example from) didn't have any forms. I probably should have commented out flashes and maaaayyybeee tables but it's not a big deal. This is where Sass is beneficial. Take what you need and only what you need.

You will probably want to use some kind of CSS reset because Bitters does not bundle one. I (and Bitters) recommend Normalize.css. Normalize is different than most CSS resets. Normalize, as the name suggests, normalizes element styles across browsers instead of just zeroing out all styles.

Bourbon #

Bourbon is awesome! While a good chunk of it's functionality can be negated by autoprefixer but that doesn't make Bourbon any less awesome. Let's check out a few Bourbon methods.

$mobile-width: em(480);

@include hidpi(1.5) {
  .logo {
    width: 100%;
  }
}

• em() takes a pixel value as a parameter and returns an em value.
• hidpi() takes an optional device pixel ratio, and generates a media query based on it.

These are just two methods Bourbon contains to make your life easier. You can read in the Bourbon docs about the dozens of others!

Neat #

Neat is a grid system built on top of Bourbon. OMG not another grid system! No. Bad you. Neat is different. Neat is a semantic grid system, meaning it doesn't pollute your HTML with grid attributes and div-itis. If you want to see an example of the exact opposite of Neat, check out the docs for the Bootstrap grid system. When you pull in Neat like we did earlier with the @import "lib/neat/neat"; line, what do you think is compiled? If you said not much you are correct. All Neat will output is:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

What you do get does not compile directly. You get mixins and functions to build you own grid system. Let's give it a shot.

header {
  @include outer-container;

  .logo {
    @include span-columns(3);
  }

  nav {
    @include span-columns(9);
  }
}

We just coded the layout of the header for a website. By default, Neat is a 12 column grid, using percentage widths. You can change this by changing the $grid-columns variable. You can also override it inside a media block. Let's spice this up and make it responsive and some other cool stuff.

Protip: Neat has a grid overlay that you can toggle by setting the $visual-grid boolean to true. This can be very useful.

$mobile: new-breakpoint(max-width 480px, 4);

section {
  @include media($mobile) {
    .logo {
      @include span-columns(2);
      @include shift(1);
    }

    nav {
      @include span-columns(4);
    }
  }
}

Here we are defining a breakpoint for mobile devices that will use a 4 column grid. This works for me because I feel that 12 columns is way too granular for that small of a width. We are also making the logo 50% width (2 out of 4 columns) and shifting it to the right one column, centering it, and making the navigation full width. Wait just a minute, sir... Did you just nest a media query? Yep. Welcome to Neat. I recommend you check out the Neat docs.

Bitters #

Bitters is a collection of base styles, typography, form styles, variables, and even includes an error message module. The error message module is designed with Rails in mind, though it is by no means specific to Rails. Bitters is not a library. It is structured in a way that is designed to be your starting point. Though the breakpoints it provides aren't as comprehensive as most of us need, it is still definitely worth using and easy enough to edit to your liking. If you are interested in the breakpoints I added for this site here they are. Honestly, I'm not using most of them but it doesn't hurt to over do them.

// Widths
$mobile-width: em(480);
$small-tablet-width: em(720);
$large-tablet-width: em(960);
$desktop-width: em(1050);

// Bourbon Neat Breakpoints
$mobile: new-breakpoint(max-width $mobile-width, 4);
$small-tablet: new-breakpoint(min-width $small-tablet-width max-width $large-tablet-width - 1, 8);
$large-tablet: new-breakpoint(min-width $large-tablet-width max-width $desktop-width - 1, 12);
$tablet: new-breakpoint(min-width $small-tablet-width max-width $desktop-width - 1, 12);
$desktop: new-breakpoint(min-width $desktop-width, 16);

$small-tablet-down: new-breakpoint(max-width $large-tablet-width, 8);
$tablet-down: new-breakpoint(max-width $desktop, 8);

Refills #

Refills is a collection of pretty UI components built using The Bourbon Family. It is a nice thing to have in your toolbelt because even if it isn't exactly what you want, it gets you pretty close.

Conclusion #

If you made it this far, I salute you and you are probably in love with The Bourbon Family. I hope you enjoyed the ride. Do you have any questions? Leave a comment and I will try to help. I've also been know to hang out in the #techlahoma IRC channel on Freenode with the rest of the Techlahomies (my username there is dddev).

Full Example #

Here is a compiled version of the examples above in case you wanted to play around with it (or use it as a starting point).

// Variables
$black: #000;

@import 'lib/bourbon/bourbon';

@import 'lib/neat/neat-helpers';
@import 'lib/bitters/grid-settings';

@import 'lib/bitters/variables';

// Bitters Variable Overrides
$base-font-family: 'Open Sans', $sans-serif;
$header-font-family: 'Noto Sans', $base-font-family;

@import 'lib/bitters/extends/base';
@import 'lib/bitters/mixins/base';
@import 'lib/bitters/typography';
//@import "lib/bitters/forms";
@import 'lib/bitters/tables';
@import 'lib/bitters/lists';
@import 'lib/bitters/flashes';

@import 'lib/neat/neat';

header {
  @include outer-container;

  .logo {
    @include span-columns(3);

    @include hidpi(1.5) {
      .logo {
        background-size: 100% auto;
      }
    }
  }

  nav {
    @include span-columns(9);

    a {
      color: $black;
    }
  }

  @include media($mobile) {
    .logo {
      @include span-columns(2);
      @include shift(1);
    }

    nav {
      @include span-columns(4);
    }
  }
}