Nataly Birch October 13th, 2014

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

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 Birch

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

8 comments

  1. 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!

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

  3. 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!

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

Leave a Reply

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