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 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 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

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

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.