Written by Harry Roberts on CSS Wizardry.
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 div
s 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:
.one-half
. These need applying directly in your markup, e.g.:
<div class="grid__item one-whole desk-one-half">
.$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.
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.
You can now find me on Mastodon.
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, scalability, and maintainability are paramount.