dug: grids & panels

Grids & PanelsDrupal User Group Gent 15/06/2011

anthony@puresign.be @mylittletony

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

Examples Drupal.org

Components‣ Columns

- 960.gs has 12/16/24 columns

‣ Regions

- ≈ Drupal regions

‣ Gutters

- margin between columns

- remove when combining columns

Components

Column

Region

Gutter

Components

Column

Region

Gutter

Components

Column

Region

Gutter

Components

Column

Region

Gutter

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

Components

Baseline grid

Fields

Components

Baseline grid

Fields

Components

Baseline grid

Fields

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?

Silver Bullet?Toolbox

Photo by Jason Rhode CC license

Silver Bullet?Toolbox

Photo by Jason Rhode CC license

“The grid system is an aid, not a guarantee.It permits a number of possible uses and eachdesigner can look for a solution appropriate to hispersonal style. But one must learn how to use thegrid; it is an art that requires practice.”- Josef Müller-Brockmann

960.gs

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

- defines grid (12 / 16 / 24 columns)

.container_12{ width:960px; margin:0 auto;}

Grids‣ sit in container

- take up horizontal space

- floated next to eachother

.container_12 .grid_3{ width:220px;}

3 x 60px = 180 px columns2 x (2x10px) = 4O px gutters -------- 22O px

Grids

<div class=”container_12 clearfix”> <div class=”grid_3”> <p>grid_3 - 220px</p> </div></div> <!-- end container -->

Whitespace‣ give elements padding with grid units

- prefix (left) / suffix (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> <!-- end container -->

Multiple rows‣ no new container needed

- gridlayout already defined

<div class=”container_12”> <div class=”grid_12”> <!-- row 1 --> </div> <div class=”grid_4”> <!-- row 2 --> </div></div> <!-- end container -->

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> <!-- end container -->

Jobs

Questions?anthony@puresign.be @mylittletony