dug: grids & panels
DESCRIPTION
Presentation by Anthony Ringoet for the Drupal User Group held on June 16th 2011 at Pure Sign, Ghent, BelgiumTRANSCRIPT
Grids & PanelsDrupal User Group Gent 15/06/2011
[email protected] @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