CSS Grid Generation with Sass

Thursday, 01.10.13 at 4:58 pm
Written by , Posted Under: Code,Tips & Tricks

When it comes to writing the CSS for a big, complicated page, CSS Grid Systems are an invaluable tool. You get consistency across your code and speed in writing the CSS. There are plenty of options out there already, such as 960.gs, Blue Print, and Susy.

However, using a third-party grid system isn’t always the right choice. If the situation requires you to be concerned about file size, a third-party system might add more CSS than is warranted. And sometimes other grid systems may not match your exact requirements for number of columns or gutter size (especially if the design you are building isn’t based on a consistent grid).

Building your own grid system can be a pain as much of the code is repetitive, just minor changes to class names and percentages. However, with a simple loop in SASS, you can avoid the grunt work and quickly have a grid system that matches your requirements and adds little weight to your final stylesheet.

This first code example is based heavily on Bootstrap’s grid. It has some small changes to increase the flexibiliy of it. (I’m using Gists for the code embed, if it doesn’t load, try refreshing the page).

To use this code, you simply include the mixin with the number of columns you want:

Bootstrap relies on you adding classes to elements in order to align them in the grid. If you would rather match the Susy interface, where the grid properties of an element are defined in the CSS selectors, you can do that too:

Example usage:

The Susy way of doing grids is nice because you only include the CSS that you need in the compiled stylesheet. The downside is that you will have redundant CSS that might increase the total size and complexity of your stylesheet.

With these code examples, I’ve started to use grid system almost everywhere, as it is quick and easy to add them to even small sites, without worrying about extra dependencies or extraneous code.

Tags: , , , , ,
Sing Out, Sista: