Minimal responsive grid frameworks

When picking a UI framework, the popular names like Bootstrap and Foundation spring to mind for most people. They're great if you want a fully-fledged CSS framework that's designed to make a site look acceptable out of the box, but I generally find myself looking for a more lightweight solution.

I'd rather not include a bulky framework, only to spend time overriding a lot of styles to implement a custom design, when what I really want is for it to take care of the basic grid structure of my page, and then stay out of the way. Here are a few minimal alternatives that I like.

Bourbon Neat

Neat is probably my favourite grid framework. It's built on top of Bourbon, so although that does mean it has a dependency, Bourbon is so useful in its own right that I've never found that to be a problem.

It's completely semantic, relying entirely on Sass mixins, so it works really well for HTML5 layouts, as in the example on their site:

<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>
// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}

It doesn't come with any predefined styles, but if you want them, you can add Bitters on top of Neat, and then Refills is a component library on top of that. I generally don't find myself needing more than Bourbon and Neat, but it's good to know the option is there.

Pure

Pure is a set of small, responsive CSS modules. This modularity means you can easily just include the grid if you don't want any of the other components, and at less than 2.0KB for the base styles plus the grid, it really is tiny.

It can be either a regular or responsive grid, and you define your layout by adding a pure-g grid class to a container element, and pure-u-* unit classes to child elements, like so:

<div class="pure-g">
  <div class="pure-u-1-3">
    <p>Thirds</p>
  </div>
  <div class="pure-u-1-3">
    <p>Thirds</p>
  </div>
  <div class="pure-u-1-3">
    <p>Thirds</p>
  </div>
</div>

The widths of the units are fractions, so pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%. It's customisable if you need different column widths or breakpoints.

One thing I don't like is that if you try to add padding directly to a grid unit element, it'll break the layout as box-sizing: border-box; isn't set by the framework. So you either have to set this yourself (which can generally be a good thing anyway), or create another element inside each grid unit for the content, and apply padding to that instead.

Skeleton

Skeleton is a mobile-first, responsive boilerplate written in ~400 lines of CSS. It comes with some basic typography and UI component styles, but these are only intended to be a starting point.

The default grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS.

You need a container and then a row, and then the class names for defining your columns are slightly more readable than with some other frameworks:

<!-- .container is the main centered wrapper -->
<div class="container">
  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>
</div>

Skeleton has a number of small utility classes that act as easy-to-use helpers for things like floating elements or adding a clearfix. I generally prefer to include these things with Sass mixins, or to apply them to certain elements with @extend, rather than cluttering markup with presentational classes.

Lemonade

Lemonade is a customizable grid made with Sass. It's very quick and easy to get started with, and a good choice if you want fine control over your column widths, but hardly any learning curve.

Using its pre-made columns, you can do:

<div class="frame">
  <div class="bit-3">Thirds</div>
  <div class="bit-3">Thirds</div>
  <div class="bit-3">Thirds</div>
</div>

You need a frame class on the containing element (which applies a clearfix for you), and then it's percentage-based so bit-3 means width of 33.33%. For custom column widths, you can define them in percentage values. You just need to make sure the total of the column widths combined equals 100%:

.bit-75 {
  width: 75%;
}

.bit-25 {
  width: 25%;
}

Jeet

Jeet is a grid system that works slightly differently to the others I've covered. It's built for use with preprocessors (SCSS and Stylus currently), and claims to be 'a grid system for humans' due to its flexibility and intuitive syntax. It's obviously semantic too.

Because it's built using functions, you can pass pretty much any fraction or decimal (e.g. col(1/3)) to create your layout. This makes it probably the most customisable option so far.

It also comes with some useful helper functions for common tasks, like center() which centers an element in the viewport, and align(both) which takes care of horizontal and vertical alignment in browsers from IE9+.

The obvious downside is that you are restricted to using SCSS or Stylus.

All of these frameworks have pros and cons. Which one you should pick will differ depending on a lot of factors, like the size of your project, how you want to include it in your project, what style of grid you're used to working with versus how much you want to learn something new, and whether you're using a preprocessor (and if so, which one).