DUG: Grid Systems

anthony@puresign.be Grids & Panels @mylittletony Drupal User Group Gent 15/06/2011

Overview ‣ What is a grid? ‣ Why should I use it? ‣ Silver Bullet? ‣ 960.gs ‣ Questions

What is a grid?

Not this grid.

What? ‣ Visual ordering system - Columnar grid - most important for web - Baseline grid - type, vertical rhytm

Examples Subtraction.com

Examples Mark Boulton Design

Examples De Standaard

Examples Drupal.org

Components ‣ Columns - 960.gs has 12/16/24 columns ‣ Regions - ≈ Drupal regions ‣ Gutters - margin between columns - remove when combining columns

ComponentsColumnRegionGutter

Components ‣ Baseline grid - invisible line letterforms ‣ Fields - horizontal division - visual placement helper on y-axis - based on baseline grid (!) - calculation - print: divide by number - web: use golden ratio

ComponentsBaseline gridFields

Why should I use it?

Order.

Disorder.

Why? ‣ Order and Structure - If a user feels the grid, he will use it. ‣ Consistence - Predictable content placement - Make collaboration easier ‣ Problem solving - Framework for designers - Print ≠ web ‣ Creativity

Silver Bullet?

Photo by Jason Rhode CC license Toolbox Silver Bullet?

Photo by Jason Rhode CC license “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” - Josef Müller-Brockmann Toolbox Silver Bullet?

960.gs

DIY ‣ Making your own grid - grids.heroku.com - problem.se/labs/gridcalc/ - gridulator - LESS Css template - ...

960.gs ‣ Widely used ‣ Rapid prototyping / production ‣ Fixed width - 960px full, 940px usable - 12 / 16 / 24 columns ‣ in Drupal - ninesixty + subtheme - starter theme that implements 960 - add 960 css to your own theme

12 columns ‣ column = 60px ‣ gutter = 20px - 960px full, 940px usable

Container ‣ wrap grids in div - centers content - deﬁnes grid (12 / 16 / 24 columns) .container_12{ width:960px; margin:0 auto; }

Grids ‣ sit in container - take up horizontal space - ﬂoated next to eachother .container_12 .grid_3{ width:220px; } 3 x 60px = 180 px columns 2 x (2x10px) = 4O px gutters -------- 22O px

Grids <div class=”container_12 clearfix”> <div class=”grid_3”> <p>grid_3 - 220px</p> </div> </div>

Whitespace ‣ give elements padding with grid units - preﬁx (left) / sufﬁx (right) classes .container_12 .prefix_3{ padding-left:240px; } .container_12 .suffix_3{ padding-right:240px; }

Whitespace <div class=”container_12 clearfix”> <div class=”grid_3 suffix_3”> <p>grid_3 - 220px</p> </div> </div>

Multiple rows ‣ no new container needed - gridlayout already deﬁned <div class=”container_12”> <div class=”grid_12”>  </div> <div class=”grid_4”>  </div> </div>

Nesting grids ‣ outer gutters collapse when nesting - alpha / omega classes - removes margins left / right .alpha{ margin-left:0px; } .omega{ margin-right:0px; }

Nesting grids <div class=”container_12”> <div class=”grid_12”> <div class=”grid_6 alpha”> ... </div> <div class=”grid_6 omega”> ... </div> </div> </div>

anthony@puresign.be @mylittletony Questions?

DUG: Grid Systems

by Anthony Ringoet on Jun 16, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

DUG: Grid Systems — Presentation Transcript