• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DUG: Grids & Panels
 

DUG: Grids & Panels

on

  • 1,618 views

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

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

Statistics

Views

Total Views
1,618
Views on SlideShare
1,617
Embed Views
1

Actions

Likes
1
Downloads
25
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DUG: Grids & Panels DUG: Grids & Panels Presentation Transcript

    • 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
    • Examples Drupal.org
    • Components ‣ Columns - 960.gs has 12/16/24 columns ‣ Regions - ≈ Drupal regions ‣ Gutters - margin between columns - remove when combining columns
    • ComponentsColumnRegionGutter
    • ComponentsColumnRegionGutter
    • ComponentsColumnRegionGutter
    • 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
    • ComponentsBaseline gridFields
    • 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
    • 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 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> <!-- 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
    • anthony@puresign.be @mylittletony Questions?