41
Grids & Panels Drupal User Group Gent 15/06/2011 [email protected] @mylittletony

DUG: Grids & Panels

Embed Size (px)

DESCRIPTION

Presentation by Anthony Ringoet for the Drupal User Group held on June 16th 2011 at Pure Sign, Ghent, Belgium

Citation preview

Page 2: DUG: Grids & Panels

Overview‣ What is a grid?

‣ Why should I use it?

‣ Silver Bullet?

‣ 960.gs

‣ Questions

Page 3: DUG: Grids & Panels

What is a grid?

Page 4: DUG: Grids & Panels

Not this grid.

Page 5: DUG: Grids & Panels

What?‣ Visual ordering system

- Columnar grid

- most important for web

- Baseline grid

- type, vertical rhytm

Page 6: DUG: Grids & Panels

Examples Subtraction.com

Page 7: DUG: Grids & Panels

Examples Mark Boulton Design

Page 8: DUG: Grids & Panels

Examples De Standaard

Page 9: DUG: Grids & Panels

Examples Drupal.org

Page 10: DUG: Grids & Panels

Examples Drupal.org

Page 11: DUG: Grids & Panels

Components‣ Columns

- 960.gs has 12/16/24 columns

‣ Regions

- ≈ Drupal regions

‣ Gutters

- margin between columns

- remove when combining columns

Page 12: DUG: Grids & Panels

Components

Column

Region

Gutter

Page 13: DUG: Grids & Panels

Components

Column

Region

Gutter

Page 14: DUG: Grids & Panels

Components

Column

Region

Gutter

Page 15: DUG: Grids & Panels

Components

Column

Region

Gutter

Page 16: DUG: Grids & Panels

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

Page 17: DUG: Grids & Panels

Components

Baseline grid

Fields

Page 18: DUG: Grids & Panels

Components

Baseline grid

Fields

Page 19: DUG: Grids & Panels

Components

Baseline grid

Fields

Page 20: DUG: Grids & Panels

Why should I use it?

Page 21: DUG: Grids & Panels

Order.

Page 22: DUG: Grids & Panels

Disorder.

Page 23: DUG: Grids & Panels

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

Page 24: DUG: Grids & Panels

Silver Bullet?

Page 25: DUG: Grids & Panels

Silver Bullet?Toolbox

Photo by Jason Rhode CC license

Page 26: DUG: Grids & Panels

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

Page 27: DUG: Grids & Panels

960.gs

Page 28: DUG: Grids & Panels

960.gs

Page 29: DUG: Grids & Panels

DIY‣ Making your own grid

- grids.heroku.com

- problem.se/labs/gridcalc/

- gridulator

- LESS Css template

- ...

Page 30: DUG: Grids & Panels

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

Page 31: DUG: Grids & Panels

12 columns‣ column = 60px

‣ gutter = 20px

- 960px full, 940px usable

Page 32: DUG: Grids & Panels

Container‣ wrap grids in div

- centers content

- defines grid (12 / 16 / 24 columns)

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

Page 33: DUG: Grids & Panels

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

Page 34: DUG: Grids & Panels

Grids

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

Page 35: DUG: Grids & Panels

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;}

Page 36: DUG: Grids & Panels

Whitespace

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

Page 37: DUG: Grids & Panels

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 -->

Page 38: DUG: Grids & Panels

Nesting grids‣ outer gutters collapse when nesting

- alpha / omega classes

- removes margins left / right

.alpha{ margin-left:0px;}

.omega{ margin-right:0px;}

Page 39: DUG: Grids & Panels

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 -->

Page 40: DUG: Grids & Panels

Jobs