Sass-based Grid Systems: How to Split Columns, not Hairs
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
Features: responsive, 12, 8 or 33 columns.
Susy
Features: fully adaptive.
Bourbon Neat
Features: lightweight, mobile-friendly.
Sassaparilla
Features: flexible, better typography.
Unit Grid
Features: 10 columns, gutters.
Lemonade
Features: quick setup.
Zen Grids
Features: responsive, limitless layouts.
Flint
Features: flexible.
Base
Features: responsive, support across various devices.
Singularity
Features: basic grid, responsive grid.
CSS Smart Grid
Features: Mobile-friendly.
Unsemantic
Features: fluid grid based on 960gs.
Gumby
Features: customization options.
Foundation
Features: customization, responsive.
Mueller Grid System
Features: various layouts.
Profound Grid
Features: fixed, responsive fixed and other layouts.
SSGS
Features: fluid six-column grid.
Jeet Grid System
Features: integration with other platforms.
Salsa
Features: cross-browser compatibility.
Frameless
Features: Photoshop template.
Tutorials and Howtos
Sass Grid Using Inline-block Instead of Float
Creator: David Conner.
Responsive SASS Grid System
Creator: Tom Barber.
Sass Grid
Creator: Brett Jankord.
Simple Fixed Grid
Creator: Adam Krone.
More Grid Than You Bargained for
Creator: Dan Eden.
Dynamic Sass Grid
Creator: Chris Johnson.
A Creative Grid System With Sass and calc()
Creator: Hugo Giraudel.
Building a Nested Responsive Grid with Sass & Compass
Creator: Trevor Davis.
Create a SASS grid system
Creator: Luke Harrison.
A Simple Responsive Grid, Made Even Better With Sass
Creator: Ian Yates.
These grid systems have been sprouting all over the place. But only few are well maintained.
Thanks for sharing . Really helpful .
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!
Thanks for the post, Nataly. Grid systems are getting really nifty!
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.
you frogot this one https://github.com/corysimmons/lost
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!
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 function, but the tradeoff to speed things up has been worth it.
It also means we’ve removed our dependency on Compass, as Bourbon is a pure Sass framework.
Not knocking Suzy, I think it’s the most powerful one around, and beautifully coded – I believe the slow compiling issue is actually a Sass issue.