Grid Frameworks for Sass

This article is not about whether you should or shouldn’t use a Sass grid. It’s about showcasing a few options that are worth investigating if you do decide to go down that path.

The amount of grid systems out in the wild is quite outstanding. Some are super light weight and some are bloated nightmares. With so much choice it’s really hard to decided which one is right and is something that shouldn’t be taken lightly.

A grid is the underlying structure of your site. Once it’s embedded in your project, it can prove to be a challenging and time consuming task to modify. Choose wisely.

During the last few weeks I’ve been investigating a few options for an upcoming project. Here are a few which stood out.


Bourbon Neat

neat-grid

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

Pros:

  • Lightweight
  • Highly configurable
  • Documentation and examples are clean, concise and easy to follow

Cons:

  • Installation requires a few dependencies

Singularity

singularity

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints.

Pros:

  • Detailed documentation
  • Highly configurable
  • Active community

Cons:

  • Requires Compass
  • Does’t have a dedicated site showcasing clear examples

Susy

susy

Rapid prototypes are only the start to a long process of development, changes, handoffs, and maintanance. Susy is built to evolve with your project for the long haul.

Pros:

  • Super flexible
  • Great examples, documentation and dedicated tutorials
  • Powers some very high profile sites

The Don’t Overthink It Grid

don't-overthink-grid

Here’s how I build grids. It’s not hard or complicated. Even making them flexible is no big deal

This idea proposed by Chris Coyier is by no means a framework. It’s just a base grid. Sometimes a simple grid is all that is needed.

Pros:

  • Extremely simple
  • No bloat

Cons:

  • Not a framework
  • Requires customisation for small screens

Deciding which grid framework to use can be a hard task. It’s easy to get excited and rush the decision when development is kicking off. But I urge you to take your time and choose the one that suits you.

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

5 Comments

  1. Singularity is super flexible as well. Definitely a winner for me.

  2. Thanks for this,

    I am about to start using Neat after ditching a homemade grid system for scss. I will look at Susy as well.

  3. What about using Zurb Foundation’s grid?

  4. I’m quite partial to Susy and Gridle myself. I may try Neat in the future as I like Bourbon’s library already.

This post currently has 5 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *