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

1. anthony@puresign.be
Grids & Panels
@mylittletony Drupal User Group Gent 15/06/2011

2. Overview
‣ What is a grid?
‣ Why should I use it?
‣ Silver Bullet?
‣ 960.gs
‣ Questions

3. What is a grid?

4. Not this grid.

5. What?
‣ Visual ordering system
- Columnar grid
- most important for web
- Baseline grid
- type, vertical rhytm

6. Examples Subtraction.com

7. Examples Mark Boulton Design

8. Examples De Standaard

9. Examples Drupal.org

10. Examples Drupal.org

11. Components
‣ Columns
- 960.gs has 12/16/24 columns
‣ Regions
- ≈ Drupal regions
‣ Gutters
- margin between columns
- remove when combining columns

12. Components
Column
Region
Gutter

13. Components
Column
Region
Gutter

14. Components
Column
Region
Gutter

15. Components
Column
Region
Gutter

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. Components
Baseline grid
Fields

18. Components
Baseline grid
Fields

19. Components
Baseline grid
Fields

20. Why should I use it?

21. Order.

22. Disorder.

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. Silver Bullet?

25. Photo by Jason Rhode CC license
Toolbox Silver Bullet?

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. 960.gs

28. 960.gs

29. DIY
‣ Making your own grid
- grids.heroku.com
- problem.se/labs/gridcalc/
- gridulator
- LESS Css template
- ...

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. 12 columns
‣ column = 60px
‣ gutter = 20px
- 960px full, 940px usable

32. Container
‣ wrap grids in div
- centers content
- defines grid (12 / 16 / 24 columns)
.container_12{
width:960px;
margin:0 auto;
}

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. Grids
<div class=”container_12 clearfix”>
<div class=”grid_3”>
<p>grid_3 - 220px</p>
</div>
</div> <!-- end container -->

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. Whitespace
<div class=”container_12 clearfix”>
<div class=”grid_3 suffix_3”>
<p>grid_3 - 220px</p>
</div>
</div> <!-- end container -->

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. Nesting grids
‣ outer gutters collapse when nesting
- alpha / omega classes
- removes margins left / right
.alpha{
margin-left:0px;
}
.omega{
margin-right:0px;
}

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

41. anthony@puresign.be
@mylittletony Questions?