Skip to main content
Let’s get started!
View all Services
Development
Design
Product
Team and Processes
View all Services
View all Resources
Development
The business of great software
View all Resources

Introducing Bourbon Neat, a Sass-based responsive grid framework

Reda Lemeden

Bourbon Neat Logo

Bourbon Neat—or Neat for short—is a lightweight, open source fluid grid framework built on top of Sass and Bourbon with an emphasis on flexibility and ease of use. The framework comes with sensible defaults and useful mixins to help get both developers and designers up and running in minutes.

For instance, applying a grid-based layout to this markup…

<body>
 <section class="blog">
  <aside></aside>
  <article></article>
 </section>
</body>

…is only two mixins away:

section.blog {
  @include outer-container;

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

  article {
    @include span-columns(8);
  }
}

And the result would be:

Example Layout

Here are some live examples of what you can build with Neat.

Why another grid framework

We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute the HTML with presentation classes and extra wrapping divs. It is less explicit—as in requires fewer mixins—than most other Sass-based frameworks and comes with built-in table-cell layout support.

The main motivation behind Neat is allowing anyone to build fluid, entirely semantic grid layouts without having to wade through hundreds of lines of documentation. We also believe that giving designers the ability to override the default behavior without hassle is key.

Getting Started

To start using Neat in one of your existing projects, place the /neat directory in your main stylesheets folder and make sure you have Bourbon installed. Import both mixin libraries in this order:

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

Although not required, you are welcome to override the default settings, namely $grid-columns and $max-width, by redefining them in your site-wide _variables.scss and importing it before Neat:

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

Ruby Gem

For Rails apps, use the gem instead. In your Gemfile :

gem 'neat'

After running bundle install you will be able to use Bourbon and Neat together.

If you get this error:

Bundler could not find compatible versions for gem "sass"

Run:

bundle update sass

Within your application.css.scss file place the following:

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

Neat is fully responsive

Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. The breakpoint() mixin allows you to change the total number of columns in the grid for each media query. You can store these values in project-wide variables to DRY up your code:

$mobile: max-width 480px 4;

When used as a breakpoint() argument, $mobile instructs Neat to use a 4 column grid in mobile-size viewports:

.my-class {
  @include breakpoint($mobile) {
    @include span-columns(2);
  }
}

Would compile to:

@media screen and (max-width: 480px) {
  .my-class {
    display: block;
    float: left;
    margin-right: 7.42297%;
    width: 46.28851%; // 2 columns of the total 4
  }

  .my-class:last-child {
    margin-right: 0;
  }
}

Feel free to refer to the documentation for more on how to use breakpoint() and all the other mixins. Don’t forget to check out the examples for some inspiration.

Now go get Neat and build something awesome.