Matthew Mar10

Grid based design for developers

Unless you’re building a super artistic new media piece, chances are you’re designing with a grid. Or, if you’re like me you’ll let your design guru take the reigns and wait for a design comp to hit your desk. Time to slice and dice and build some CSS right? Only if your a masochist or have a fettish for name value pairs.

enter the CSS grid
Plenty of clever web types have been working hard on the design-to-web work flow. Through the beauty of open-source, you’ve got a full CSS grid layout at your fingertips before every striking a key. Here’s one I’m fond of:

From the website:

Blueprint is a CSS fr”amework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

If you’re thinking “ok, that’s neat but my designer used a different grid layout”, then you’re in luck! If you’re a Ruby person, use the encluded gems. For the rest of us, there’s a slick generator: http://kematzy.com/blueprint-generator/

blueprint css generator

If that’s not your style, you’ll find a litany of alternatives. 960 grid system is another popular one.

the ivory tower
Taking things a step further, you can overlay the design grid as a transparent image atop your website for testing. In a perfect world, functional tests automatically validate screen capture mages against design comp images… oh what a wonderful life that would be.

If you’re new to grid-based design, check out http://www.designbygrid.com/ and this list of resources resources for grid-based design you might find helpful.