The grid-based design behind much of today’s web was revealed to me a few years back as I was serving as in-house Technical Lead for a major corporate redesign. My team worked with designers from an external agency, and as their comps started coming across the wire it was quickly clear that visual components were being aligned to a four-column grid. Everyone liked the order and organization afforded by the grid. When it came time to turn comps into code we went with the 960.gs css framework and to this day, design and development of new solutions takes place within the context of the grid.
But with our approach we had, in effect, only treated one of the axes of a traditional grid system. Early conceptualization and prototyping often elicit the columns, or horizontal rhythm in our designs. We should realize, however, that the content that will occupy those columns will be subject to an intersecting rhythm. This is the vertical rhythm derived from typographic font sizes and line spacings.
Because of its dependence on document structure and multiple css rules, nailing vertical rhythm with an off-the-shelf solution is pretty hard to do. While there are frameworks that incorporate the notion of vertical rhythm, extra-framework css deviations by developers will often break the math, and therefore the grid. I think a more realistic (and less bloat-susceptible) approach is to simply keep an eye on the rhythm through development iterations. To that end, here’s a simple development tool that draws gridlines on a canvas overlaid on the page. Use it, get rhythm, gain control, and shed the bloat.
https://github.com/aaitken/Baseline