I’m a big fan of grid-based layouts, particularly using CSS frameworks like YUI. For all their apparent conflict with the ideals of semantic markup, these frameworks save a ton of time.
My current favourite is Blueprint CSS, which I used for the recent redesign of our celebrity charity news site, and I found a neat way to toggle the positioning grid on and off with a bookmarklet instead of by changing the site’s HTML templates.
Blueprint conventions have the developer put the page body inside an element with the class “container”; adding the additional class “showgrid” to that element shows a background grid, which is handy at design-time when working on aligning everything nicely to the grid.
Here’s the trivial bookmarklet for if you’re already using jQuery on your site (and you should be): Toggle BP Grid.
With the grid off, here’s what you might see:
And with a quick click of the bookmarklet, you would see this:
And if you’re not using jQuery, here’s the same bookmarklet with a hook to load jQuery into your page first: Toggle BP Grid.
Comments