Grid System Presentation Resources

Submitted by bmadore on July 21, 2009 - 09:37. | | | |

In preparation for my July 2009 TC Webpros meeting presentation on CSS grid system designing, I've put together an initial list of resources to give you some background, tutorials and tools for exploring grid designing for yourself.  I'll follow up the presentation by doing a fuller blog-type post annotating these links to serve as a summary of the presentation and the system.

In the meantime:

Background/History

Wikipedia definition, history
http://en.wikipedia.org/wiki/Grid_%28page_layout%29

New York Times article (adapting print typography/layout to web)
http://www.subtraction.com/2007/03/18/oh-yeeaahh

Transcending CSS, by Andy Clarke
Starting with ch. 3

Cameron Moll's graphic defining grid for web resolutions
http://www.cameronmoll.com/archives/2006/12/gridding_the_960/

Web Standards Creativity, (group authored including Andy Clarke and Mark Boulton)
Googlebooks excerpt on CSS grid system
http://books.google.com/books?id=J-q_mgTRNuwC&lpg=PA132&ots=x1leG-8W0H&dq=andy%20clarke%20grid&pg=PA147

Grid Resources (mostly 960 grid)

General grid system resource hub
http://www.thegridsystem.org/

BBC web styleguide pdf (Global Visual Language-- first link)
Grid explanation and examples start on p.3
http://www.bbc.co.uk/guidelines/futuremedia/desed/visual_language.shtml

Mark Boulton's 5 simple steps tutorial
http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Live site grid js overlay bookmark tool
http://gridder.andreehansson.se/

Nathan Smith's 960 grid framework
http://960.gs/

4-Kitchens (with Nathan Smith) presentation PDF on applying 960 grid to CMS (Drupal); good background info
http://fourkitchens.com/presentations

Other grid frameworks

Fluid 960 grid system
http://www.designinfluences.com/fluid960gs/

Blueprint grid CSS system resources
http://www.blueprintcss.org/

Blueprint grid CSS generator
http://kematzy.com/blueprint-generator/