Two lightweight CSS grid frameworks: the 1KB and the 1-liner
In the left corner: Tyler Tate’s 1KB CSS Grid, a lean framework sporting 14 classes and the familiar conventions for enforcing a visual grid via CSS.
In the right corner: Vladimir Carrer’s 1-line CSS Grid, an experimental framework sporting a single class to cut nested column widths in half. The solution is mindblowingly brilliant, but does it work? Design tends to work in thirds, not halves. You decide.
Whether or not it’s a coincidence I chanced upon these two extremely simple CSS grid frameworks just days apart, news of these two solutions makes the CSS framework “scene” a lot more interesting. And accessible. I can imagine many front-end developers shying away from heavyweight frameworks because there are too many features, most of which won’t be utilized, and there are too many conventions, most of which aren’t easy to remember.
I’m not even going to get into how using these frameworks leads to unsemantic, presentational class names and lots of <div> soup reminiscent of <table>-based layouts. Let’s just be glad people are streamlining the application of design principles for the Web, namely grid layouts. When a better way comes out—maybe it’ll be display:table, maybe it won’t—we’ll adjust then.
In the meantime, we need to let our arsenal evolve. Balance out the spectrum with lightweight frameworks like these. Then add diversity as well. Look at the Javascript libraries—the tiny moo.fx, the venerable Prototype and Scriptaculous, and the designer darling jQuery—each one caters to a specific need. What other kind of grid frameworks do we need? Fluid? Do-it-yourself? Highly reputable? Unobtrusive? Oh, what will they think of next?
Thank you for mentioning 1-line CSS Grid.
But I just to add something, be careful to implement 1 line CSS Grid in production. I think is much better Malo – Css Framework (just 0,25kb) or if you need something more fixed (px based) The Golden Grid – CSS Library always under 1kb.
My tip is you want to build css grid system concentrate first on the grid itself than on the CSS technique ;)
By Vladimir on June 11, 2009 6:56 am
[...] still have to break out Photoshop to create graphical details, but prototyping kits and frameworks should speed things up too. Also, the overall idea is to manage your client’s expectations [...]
By Design debates: it’s time to throw curveballs | Wisdump on December 30, 2009 5:31 pm