Introducing csswizardry-grids – CSS Wizardry

7 February, 2013

Table of Contents

Featured case study: NHS

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.

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.

Table of Contents

Featured case study: NHS

How I helped the NHS rapidly build a brand new product.

Read case study…

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:

To use ‘solid’ classes which are basically just traditional CSS classes
like .one-half. These need applying directly in your markup, e.g.:
.
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:

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.






  

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.





  Get started…


  

Hi there, I’m Harry Roberts. I am an award-winning

  Consultant Web Performance Engineer, designer, developer,

writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and

improving site-speed. You should hire me.

Connect

Projects
Next Appearance