A whole lotta framework hoo-hah
19·Nov·07
Been interesting to follow some of the discussions that have been raging (and even baking) over the last week about CSS frameworks: are they useful? are they to be trusted? will using them corrupt the moral fabric of society?
Much of the debate has centered around Blueprint, a stock CSS framework dealing with browser-styles resetting, fonts, typography and (most controversially) an off-the-shelf ready-made grid system, though other frameworks exist, including Yahoo’s UI Library, plus the less ambitious Tripoli CSS, and many others.
One step backwards for Web Standards…
As amusing, irritating and downright annoying some of the commentary has been, it’s certainly forced me to have a think about my position on the subject. My basic thinking on this is that while some of the browser resetting and typography styles are useful (albeit if cherry-picked and adapted – I much prefer the way the Yahoo UI CSS deals with this as a whole), using the ‘easy grid’ aspects of a framework such as Blueprint, even for rapid prototyping, is pretty bad news.
One of the huge benefits of HTML prototyping is that you’re all the time actually building the website, iteratively, and writing the code as you go. You don’t want to end up with a steaming stew of messy unsemantic code (or else Jeffrey’s book will have been in vain…) that you either have to scratch and start again once production proper begins, or at best work through to remove all that nasty presentational code.
What’s the point? Especially for prototypes it’s just so easy to create columns manually in CSS, and the advantage of having complete control of the semantic situation just sits much easier with me.
Although I don’t much care how anyone else does it to be honest, each to his or her own : )
Rediscovering the grid
Ironically, peeking at the grid CSS in Blueprint has brought me back to having another look at layout grids for design in general. As a non-trained designer, grids were pretty much news to me when Mark Boulton wrote his excellent primer on the subject a couple of years ago, and when Khoi Vhin revealed his grid to all back in late 2004.
Rapid HTML Prototyping R’ Us
I now have a far greater awareness of the grid when I’m designing, but still had a bit of a hit-and-miss mentality. That was until in the last year, at Definition we started using HTML prototypes almost completely in the place of writing spec documents or preparing wireframes. Doing this has really made me aware of just how handy it can be to have a really solid awareness (and methodology) for working with grids to aid speedy prototype development.
Grid layouts made easy
So I was reminded today of 2 awesome online tools which today have just ‘clicked’ for me: Grid Calculator and Grid Layout.
- Play with the sliders of the Grid Calculator to get your basic layout framework (oops, that word again…)
- Input the values into the Grid Layout tool
- Save out the generated code to your HTML page-in-development
- Hit CTRL-SHIFT-G
Et volia! An instant overlay/background grid (with subdivisions, no less!) to make quick creation of columns in CSS nice and easy – even easier than it already is in fact.
Ironic that it took a disagreement with Blueprint’s approach to development of grids in CSS to rekindle my own interest in them, and discover an excellent workflow for rapid web page grids in future. At least it’s been of some use to me.
Grab the journal RSS feed