---
title: Introducing Bourbon Neat, a Sass-based responsive grid framework
teaser:
tags: neat,bourbon,sass,open source,news,design
author: Reda Lemeden
published_on: 2012-09-05
---
Bourbon [Neat](http://thoughtbot.com/neat)—or Neat for short—is a lightweight,
open source fluid grid framework built on top of Sass and
[Bourbon](http://thoughtbot.com/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…
…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:
Here are some live [examples](http://thoughtbot.com/neat/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 `div`s.
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](https://github.com/thoughtbot/bourbon#requirements). 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](https://rubygems.org/gems/neat) 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](https://github.com/thoughtbot/neat#using-the-grid) for more on
how to use `breakpoint()` and all the other mixins. Don't forget to check out
the [examples](http://thoughtbot.com/neat/examples/) for some inspiration.
Now go get [Neat](http://thoughtbot.com/neat) and build something awesome.