Getting Started With Bourbon Neat (without Rails)

What is Bourbon Neat?

Bourbon Neat is a Sass (CSS extension language) framework that provides mixins used to make responsive grid layouts for sites. It's built on-top of Bourbon, a helper mixin library also for Sass.

Bootstrap and similar front-end frameworks are great, but sometimes, you want something that's lighter weight. It's very difficult to use Bootstrap with an existing site while keeping the original look of the site, and besides, all I need is a responsive grid. That's where Bourbon Neat comes in.

This post will show you the basics: it covers setup and basic use of Neat in a non-Rails Ruby project.

Initial Setup for Bourbon Neat

I will go ahead and assume that you:

• Have at least one existing sass/scss file, preferably in its own directory
• Are using Bundler for your project

Step 1: Add gem "neat" to your Gemfile
Step 2: Run bundle install
Step 3: Go to your Sass directory and run bundle exec bourbon install && bundle exec neat install

This will add files for Bourbon and Neat to your Sass folder. Should you add these files to version control? I'm not sure what the best practice is, but I went ahead and added them to version control on my project.

Using Bourbon Neat in Your Sass File

Drop the following two lines at the top of each main Sass/SCSS file:

@import "bourbon/bourbon";
@import "neat/neat";

By themselves, these two lines don't change output CSS much. Including Neat adds some CSS that sets box-sizing for all elements to 'border-box.'

The official Bourbon Neat site has a sample that shows you how to build a semantic grid. The basic principle is that you need something that includes the 'outer-container' mixin and at least one element nested within it that includes the 'span-columns' mixin.

Using Bourbon Neat for Responsive Styles

One of the many nice things about Bootstrap, Foundation, and other heavyweight style frameworks is that their grid systems are very responsive to changes in browser/device width. They'll do things like change a row with two 6-column divs to look like two rows of full-width divs. Bourbon Neat allows you to do this too, but you manually have to specify settings like width breakpoints and what columns do at those breakpoints.

Here's an example SCSS file using Bourbon Neat:

@import "bourbon/bourbon";
@import "neat/neat";
$desktop: new-breakpoint(min-width 768px 12);
$tablet: new-breakpoint(max-width 768px 1);

.header {
  @include media($desktop) {
    @include outer-container;
  }

  .page-title {
    @include media($desktop) {
      @include span-columns(7);
    }

    @include media($tablet) {
      display: block;
    }
  }

  .site-nav {
    @include media($desktop) {
      @include span-columns(7);
    }
    @include media($tablet) {
      display: block;
    }
  }
}

Neat includes a 'media' mixin that allows you to specify styling for a specific breakpoint. As far as I know, Neat has no built-in breakpoints, so you must use the 'new-breakpoint' function to make them.

February 17, 2014 Update: Simplified example file and removed incorrect information about an error that can occur within new-breakpoint.