Presentation from Drupalcon Paris 2009.

1. Designing Grid Systems
Mark Boulton

2. Who am I?

3. Who are you?

5. http://www.flickr.com/photos/9979792@N04/2984873350/sizes/l/

6. CONNECTEDNESS

9. http://www.flickr.com/photos/liberato/583821538/sizes/l/

10. W H AT A R E G R I D S Y S T E M S ?

11. A typographic grid is a two-dimensional
structure made up of a series of intersecting
vertical and horizontal axes used to structure
content. The grid serves as an armature on
which a designer can organize text and images
in a rational, easy to absorb manner.
Wikipedia

19. TYPES OF GRID SYSTEM

20. TERMINOLOGY

21. The Unit

22. Pixels
Pixels

23. Ems
Ems

24. 3
2

26. T 1 em

27. 3 em
T T T 2 em
TTT

28. Units are the basic building blocks
of a grid. They’re all uniform.
Units proportions can be rational
(eg. 3:2) or irrational (eg. 1:1.618).
Units height defines ‘hanging-lines’
in the grid.

29. Columns are the groupings of units
that create the visual structure of the
page. They are not necessarily
uniform.
Gutters are the spaces in between the
units

30. Hanging Lines are created by the
horizontal alignment of units.

31. Modules, sometimes
called Fields, are
combinations of units
or columns.
They can vary in width
and height.

32. COLUMNAR

33. Columnar grids are primarily
made up of columns

35. Defining the Unit

36. Constraints

50. H I E R A RC H I C A L

51. Hierarchical grids place
hierarchy before columns.

52. C O M B I N AT I O N

53. C O M B I N AT I O N

54. C O M B I N AT I O N

55. C O M B I N AT I O N

58. MODULAR

59. Modular grids are made of
columns and rows.

61. Modular grids are difficult to use
on the web because content is
vertically dynamic.

62. BASELINE

63. Type matters

64. http://sushiandrobots.com/

65. http://sushiandrobots.com/

66. http://stopdesign.com/

67. In CSS, there’s no way of setting type
to a baseline grid. We can only use
the line-height.

68. Type matters

69. Vertical Rhythm

70. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

71. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

72. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

73. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

74. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
† The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

75. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

76. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

77. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

78. body { font-size: 12px; }
p { font-size: 1em; /* 12px */
line-height: 1.5em; /* 18px */
margin: 0 0 1.5em 0; }
line height: 18px ÷ 12px = 1.5em

79. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

80. h1 { font-size: 1.5em; /* 18px */
line-height: 1em; /* 18px */
margin: 0 0 1em 0; }
font size: 18px ÷ 12px = 1.5em
line height: 18px ÷ 18px = 1em

81. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

82. .sidenote { font-size: 0.8333em; /* 10px */
line-height: 1.8em; /* 18px */ }
font size: 10px ÷ 12px = 0.8333em
lineaheight: 18px ÷ 10px = 1.8em

83. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

84. h2 { font-size: 1.1667em;
line-height: 1.286em;
margin-top: 1.929em;
margin-bottom: 0.643em; }
font size: 14px ÷ 12px = 1.1667em
line height: 18px ÷ 14px = 1.286em
top margin: 27px ÷ 14px = 1.929em
bot margin: 9px ÷ 14px = 0.643em

85. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

86. Richard Rutter
http://24ways.org/2006/compose-to-a-vertical-
rhythm
Wilson Miner
http://www.alistapart.com/articles/
settingtypeontheweb

87. Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain † The forecastledeck is the
it’s not just imagining that light in the eastern sky. Unfortunately the short deck that, towards
eastern sky is off to port this morning. Yesterday it was starboard. the ship’s bow, is built
Minerva has been sailing up and down the New England coast for the above the upperdeck.
better part of a fortnight, trying to catch a wind that will decisively take
her out into deep water, or “off soundings,” as they say. They are probably
not more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot so
that he can look straight down and see Minerva’s wake being born in a
foamy collision around the rudder. He opens a small hatch below a
window and drops out a Fahrenheit thermometer on a string. It is the very
latest in temperature measurement from Europe – Enoch presented it to
him as a sort of party favour. He lets it bounce through the surf for a few
minutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objective
being to see if there’s any rumour that the North Atlantic is striped with
currents of warm water. He can present the data to the Royal Society if
God-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.

88. Incremental leading

92. Four lines of the main content.
18px x 4 = 72px
Then we find the value for 5 lines of the sidenote.
72px ÷ 5 = 14.4px
To calculate what 14.4px is in ems (in relation to
the body, and the type size for the sidenote)
14.4px ÷ 10px = 1.44em

94. C O M B I N AT I O N

100. Cascading Grid Systems

101. Hiearchical
+
Columnar
+
Baseline
+
Modular

106. TOOLS AND FRAMEWORKS

107. CSS frameworks
Blueprint: http://code.google.com/p/blueprintcss
Yahoo UI: http://developer.yahoo.com/yui/grids/
YAML: http://www.yaml.de/en/
960.gs: http://960.gs

108. P RO S
• It just works.
• Great browser CSS resets
• Don’t have to worry too much about IE
• There’s a Drupal module or theme for YUI,
Blueprint, YAML and 960
• So, why wouldn’t you use them?

109. CONS
• Extra markup.
• Presentational class names - eg. ‘grid-4’
• Only support columnar grids (although some
make efforts at Baseline & Hierarchical).
• Promotes laziness. There, I said it.

110. Build your own

111. Fluid width?
http://www.alistapart.com/articles/fluidgrids

112. W H A T Y O U C A N D O . T O D AY .

113. 10. Let the content dictate
inform the grid

114. 9. Compose to a vertical rhythm

115. 8. Three, Five, Seven, Nine

116. 7. Constraints

117. 6. Think outside the grid

118. 5. Cascade grid systems

119. 4. Embrace legacy

120. 3. Give legacy fixed elements
backgrounds to fit the grid

121. 2. Break the grid. On purpose.

122. 1. Remember...
A Grid System is an aid.
Not a guarantee.

123. Thanks!
Mark Boulton
markboultondesign.com
markboulton.co.uk