Introducing csswizardry-grids

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

Yesterday I wrote Responsive grid systems; a solution?, all about the principles behind creating the fluid grid system in inuit.css. That post deals with the thoughts, reasonings and theory behind how such a grid system works. This post is csswizardry-grids’ elevator pitch:

csswizardry-grids is a simple, fluid, nestable, flexible, Sass-based, responsive grid system. It allows you to rapidly construct fully responsive websites whilst abstracting all the layout information away from your components, as all good grid systems should.

• csswizardry-grids source on GitHub
• Basic demo

N.B. I am a huge proponent of the extra divs style grid systems which keep your page’s layout and content totally separated. To find out more as to why, I recommend watching my Breaking Good Habits talk from Front-Trends, 2012.

csswizardry-grids allows you to configure your gutters and your own breakpoints to cater to layouts for palm-based, lap-based, portable and stationary devices. It works on the principle of percentages, rather than absolute columns, meaning that there are no confusing .span-6 classes that behave like .span-12 ones at smaller sizes.

The grids are also fully (infinitely) nestable, meaning you can apply sizing to your sub-components as well as to your page-level layout. Furthermore, csswizardry-grids’ implementation is left entirely up to you, with two options:

1. To use ‘solid’ classes which are basically just traditional CSS classes like .one-half. These need applying directly in your markup, e.g.: <div class="grid__item one-whole desk-one-half">.
2. To use Sass’ silent classes which means that the classes sit ‘invisibly’ in your Sass and never get compiled to CSS until they are actually, explicitly used. You can turn this on via the $use-silent-classes variable.

Implementing silent classes means that your markup would now be something like:

<div class="content">

And your CSS:

.content{
    @extend %grid__item;
    @extend %one-whole;
    @extend %desk-one-half;
}

Each method has its merits, and it is left entirely to you to decide which you’d prefer to use.

So there you have csswizardry-grids, a micro-library for creating fully responsive layouts from breakpoints of your choosing.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.