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.
Hi, Your bookmarklet is very nice.
Both of your toggle buttons appear to be broken, with inline javascript and jquery errors.
Heya Scott, I found the bookmarklets were broken in Firefox 3 because "void();" is invalid there, whereas it was fine in earlier versions. I've updated the article accordingly.
Erm, don't expect them to work on this site -- it doesn't use blueprint at the time of writing. The idea of the bookmarklets is that you drag them to your toolbar and use them on your own site. For example, try going to looktothestars.org and then clicking on the bookmarklet.