Boilerplates & Other Tools

Sass-based Grid Systems: How to Split Columns, not Hairs

October 13th, 2014

When it comes to website development there is not a lot better than a semantic, flexible, professionally crafted grid system, forming a “safe and sound” structure. It is the most viable and reliable solution that skillfully and effectively deals with all the dirty issues of today’s designs. For the past decade, the diversity of this kind of instruments has been considerably increased and constantly improved. There are pure CSS grids and mixed ones, simple style sheet files and complex pre-made frameworks, responsive and fixed, well-formatted and poorly formatted, some includes gutters others not – you are confronted with a plethora of choices. However, as you delve more deeply into this concept, it becomes obvious that each project requires its own solution and not every underlying system meets every project’s requirements and personal preferences. As always, the choice will depend on what you want to achieve in the end.

If you opt for using pre-processing instruments in order to perfect your style sheets by getting the most out of such advanced features as variables, mixins, nesting (in other words, derive benefits from possibilities hidden in Sass) then you should take a quick glance at our article that focuses on sass-based grid systems: from powerful multifunctional frameworks to specific unidirectional solutions and DIY tutorials, we have covered different ready-to-use means.

Resources

Gridle

gridl

Features:
 responsive, 12, 8 or 33 columns.

Susy

susy

Features: fully adaptive.

Bourbon Neat

bourbon

Features:
lightweight, mobile-friendly.

Sassaparilla

sassaparilla

Features: flexible, better typography.

Unit Grid

unit-grid

Features:
10 columns, gutters.

Lemonade

lemonade

Features:
quick setup.

Zen Grids

zen-grids

Features: responsive, limitless layouts.

Flint

flint

Features:
flexible.

Base

base

Features:
 responsive, support across various devices.

Singularity

singularity

Features: basic grid, responsive grid.

CSS Smart Grid

smart-grid

Features:
Mobile-friendly.

Unsemantic

unsemantic

Features:
fluid grid based on 960gs.

Gumby

gumby

Features: customization options.

Foundation

foundation

Features: customization, responsive.

Mueller Grid System

mueller-grid

Features: various layouts.

Profound Grid

profound-grid

Features: fixed, responsive fixed and other layouts.

SSGS

ssgs

Features:
 fluid six-column grid.

Jeet Grid System

jeet-grid

Features:
integration with other platforms.

Salsa

salsa

Features:
 cross-browser compatibility.

Frameless

frameless

Features:
Photoshop template.

Tutorials and Howtos

Sass Grid Using Inline-block Instead of Float

sass-grid

Creator: David Conner.

Responsive SASS Grid System

responsive-grid

Creator:
 Tom Barber.

Sass Grid

sass-grid-2

Creator: Brett Jankord.

Simple Fixed Grid

simple-fixed-grid

Creator: Adam Krone.

More Grid Than You Bargained for

intense-sass-grid

Creator: Dan Eden.

Dynamic Sass Grid

dynamic-sass-grid

Creator:
 Chris Johnson.

A Creative Grid System With Sass and calc()

creative-grid-system

Creator:
 Hugo Giraudel.

Building a Nested Responsive Grid with Sass & Compass

nested-grid

Creator:
 Trevor Davis.

Create a SASS grid system

sass-grid-diy

Creator:
 Luke Harrison.

A Simple Responsive Grid, Made Even Better With Sass

simple-responsive-grid

Creator:
 Ian Yates.

(dpe)

Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball. Visit her blog or follow her on twitter

Sort by:   newest | oldest | most voted
Allan
Guest
1 year 9 months ago

These grid systems have been sprouting all over the place. But only few are well maintained.

sunil vashist
Guest
1 year 9 months ago

Thanks for sharing . Really helpful .

Victoria
Guest
1 year 9 months ago

Gereat review! After not so long ago I myself found about grid systems and started to use columns system for my websites, the front-end became so much easier!

Chicago Web Designer
Guest
Chicago Web Designer
1 year 9 months ago

Thanks for the post, Nataly. Grid systems are getting really nifty!

Jay Freestone
Guest
1 year 9 months ago

Thanks for the article! I’m a big, big fan of Susy grids. I much prefer keeping everything semantic. Unfortunately Ruby SASS compiles painfully slowly on medium-sized projects, so I switched to libsass (a SASS compiler in C) which isn’t yet compatible with Susy.

As a result I pieced together some SASS mixins and stuck them on Github to act as a replacement: http://jayfreestone.github.io/basic-brockmann/

SASS makes it so easy to piece together a grid system, as some of your links indicate, that it’s hard to recommend the older opinionated ones.

Aleksej Dix
Guest
1 year 3 months ago
Chris Johnson
Guest
1 year 2 months ago

Wow! I just stumbled across this article on twitter, and low and behold my Dynamic SASS Grid is listed here! I am honored! I posted that code a long time ago, so I am sure it could use some tweaking now, but it worked great back then :) – Loving all these other grids, such greatness to them, right now I am hooked on Flexbox grids built with SASS!

Ryan
Guest
10 months 28 days ago
We’ve used Susy for quite some time and have found it invaluable. Susy 1 was fast enough, but Susy 2 becomes painfully slow to compile as projects grow. But due to the slowness we recently swapped over to Bourbon Neat and it’s much much faster to compile, achieving the same results – it really didn’t take very long to swap projects over to it, the way you use the grids is pretty much the same, you can mostly do a find and replace on your code. There are a few things in Susy 2 that I miss, like the gallery… Read more »
wpDiscuz