Introducing csswizardry-grids

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.

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:

  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.


Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q1–2 2017

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Events

  • Talk

    DEVit, Thessaloniki, (Greece) May 2017

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.