A lightweight semantic grid framework built with Sass.

<!-- HTML markup for the section right below this code block -->
  <header>What is it about?</header>
  <section>Neat is an open source semantic grid framework built with Sass…</section>

// Enter Neat
section {
  @include outer-container;
  header { @include span-columns(3); }
  section { @include span-columns(9); }
// And the result is...

What is it about?

Neat is a semantic grid framework built with Sass. It is simple enough to get you up and running in minutes, and powerful enough to handle any responsive layout you can dream of.

Why another grid framework?

Because we are not happy with other frameworks. We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's.

It also aims to stay as lightweight as possible; just enough to handle the most common grid uses in modern Web design.

Is it responsive?

Yes. You can even change the grid settings in a specific breakpoint.

Alright. How do I get started?

Install Neat and its dependencies, read the documentation and check the examples page if you get lost. If you want to use Neat on your Rails app, there is a gem for that.


If you think something is broken or can be improved, fork the repo, and submit a pull request. You can also tweet your questions or suggestions to @bourbonsass.

Neat is maintained and funded by thoughtbot, inc.