Drupal theming using the 960.gs grid system

Drupal theming using the 960.gs grid systemOriginally presented at DrupalCamps Copenhagen, Helsinki, and Stockholm 2009May, 2009 | Todd Ross NienkerkPersonal introductionTodd Ross Nienkerk‣ Co-founder of Four Kitchens, a Drupal design and development firm in Austin, Texas‣ One of the implementers of the new Drupal.org redesign‣ Member of the Drupal documentation teamPhoto: Kristin HilleryWhat is a grid system?History of the grid‣ The practice of using a grid to guide design and page layout is nearly a century old‣ In the 1910s and 1920s, ornamental design gave way to Rationalism and New Objectivity‣ This shift in design was part of a much larger movement towards function over form‣ Helvetica typeface and Bauhaus architectureSource: Grids are Good by Khoi Vinh and Mark BoultonTypographic grids‣ After World War II, a number of graphic designers, influenced by the modernist ideas of Die neue Typographie (The New Typography), questioned the relevance of the conventional page layout of the time‣ They devised a flexible system to help designers achieve coherency in organizing the pageSource: Grid (page layout) on Wikipedia‣ The result was the modern typographic grid associated with the International Typographic Style‣ Grid Systems in Graphic Design, the seminal work on the subject, helped propagate the use of the grid in Europe and, later, in North AmericaSource: Grid (page layout) on WikipediaNearly a century ago‣ Modernists looked to build a new aesthetic by...‣ deriving beauty from the innate qualities of the machine ‣ championing standardization‣ Sound familiar?Source: Grids are Good by Khoi Vinh and Mark BoultonToday‣ Web designers have turned to grid-based design in order to...‣ derive beauty from the innate qualities of the browser‣ champion standardization‣ 16 years after the invention of the web, we are finally embracing a century-old design philosophySource: Grids are Good by Khoi Vinh and Mark BoultonGrid systems on the web‣ On the web, grid systems usually take the form of CSS frameworks‣ A framework is a “reuseable abstraction of code wrapped in a well-defined API”1‣ A collection of tools and shortcuts designed to minimize code and make your life easier1 Source: Software framework on Wikipedia