Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DUG: Grids & Panels

1,744 views

Published on

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

Published in: Technology
  • Be the first to comment

DUG: Grids & Panels

  1. 1. anthony@puresign.be Grids & Panels @mylittletony Drupal User Group Gent 15/06/2011
  2. 2. Overview ‣ What is a grid? ‣ Why should I use it? ‣ Silver Bullet? ‣ 960.gs ‣ Questions
  3. 3. What is a grid?
  4. 4. Not this grid.
  5. 5. What? ‣ Visual ordering system - Columnar grid - most important for web - Baseline grid - type, vertical rhytm
  6. 6. Examples Subtraction.com
  7. 7. Examples Mark Boulton Design
  8. 8. Examples De Standaard
  9. 9. Examples Drupal.org
  10. 10. Examples Drupal.org
  11. 11. Components ‣ Columns - 960.gs has 12/16/24 columns ‣ Regions - ≈ Drupal regions ‣ Gutters - margin between columns - remove when combining columns
  12. 12. ComponentsColumnRegionGutter
  13. 13. ComponentsColumnRegionGutter
  14. 14. ComponentsColumnRegionGutter
  15. 15. ComponentsColumnRegionGutter
  16. 16. 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
  17. 17. ComponentsBaseline gridFields
  18. 18. ComponentsBaseline gridFields
  19. 19. ComponentsBaseline gridFields
  20. 20. Why should I use it?
  21. 21. Order.
  22. 22. Disorder.
  23. 23. 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
  24. 24. Silver Bullet?
  25. 25. Photo by Jason Rhode CC license Toolbox Silver Bullet?
  26. 26. 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?
  27. 27. 960.gs
  28. 28. 960.gs
  29. 29. DIY ‣ Making your own grid - grids.heroku.com - problem.se/labs/gridcalc/ - gridulator - LESS Css template - ...
  30. 30. 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
  31. 31. 12 columns ‣ column = 60px ‣ gutter = 20px - 960px full, 940px usable
  32. 32. Container ‣ wrap grids in div - centers content - defines grid (12 / 16 / 24 columns) .container_12{ width:960px; margin:0 auto; }
  33. 33. 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
  34. 34. Grids <div class=”container_12 clearfix”> <div class=”grid_3”> <p>grid_3 - 220px</p> </div> </div> <!-- end container -->
  35. 35. 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; }
  36. 36. Whitespace <div class=”container_12 clearfix”> <div class=”grid_3 suffix_3”> <p>grid_3 - 220px</p> </div> </div> <!-- end container -->
  37. 37. 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 -->
  38. 38. Nesting grids ‣ outer gutters collapse when nesting - alpha / omega classes - removes margins left / right .alpha{ margin-left:0px; } .omega{ margin-right:0px; }
  39. 39. 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 -->
  40. 40. Jobs
  41. 41. anthony@puresign.be @mylittletony Questions?

×