designing grid systems doesn't begin and end with 960
DESCRIPTION
Presentation from Drupalcon Paris 2009.TRANSCRIPT
![Page 1: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/1.jpg)
Designing Grid SystemsMark Boulton
![Page 2: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/2.jpg)
Who am I?
![Page 3: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/3.jpg)
Who are you?
![Page 4: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/4.jpg)
![Page 5: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/9979792@N04/2984873350/sizes/l/
![Page 6: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/6.jpg)
C O N N E C T E D N E S S
![Page 7: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/7.jpg)
![Page 8: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/8.jpg)
![Page 9: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/liberato/583821538/sizes/l/
![Page 10: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/10.jpg)
W H A T A R E G R I D S Y S T E M S ?
![Page 11: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/11.jpg)
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
![Page 12: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/12.jpg)
![Page 13: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/13.jpg)
![Page 14: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/14.jpg)
![Page 15: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/15.jpg)
![Page 16: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/16.jpg)
![Page 17: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/17.jpg)
![Page 18: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/18.jpg)
![Page 19: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/19.jpg)
T Y P E S O F G R I D S Y S T E M
![Page 20: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/20.jpg)
T E R M I N O L O G Y
![Page 21: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/21.jpg)
The Unit
![Page 22: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/22.jpg)
Pixels
Pixels
![Page 23: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/23.jpg)
Ems
Ems
![Page 24: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/24.jpg)
3
2
![Page 25: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/25.jpg)
![Page 26: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/26.jpg)
T 1 em
![Page 27: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/27.jpg)
T2 em
TTT
TT
3 em
![Page 28: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/28.jpg)
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.
![Page 29: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/29.jpg)
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
![Page 30: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/30.jpg)
Hanging Lines are created by the horizontal alignment of units.
![Page 31: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/31.jpg)
Modules, sometimes called Fields, are combinations of units or columns.
They can vary in width and height.
![Page 32: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/32.jpg)
C O L U M N A R
![Page 33: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/33.jpg)
Columnar grids are primarily made up of columns
![Page 34: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/34.jpg)
![Page 35: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/35.jpg)
Defining the Unit
![Page 36: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/36.jpg)
Constraints
![Page 37: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/37.jpg)
![Page 38: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/38.jpg)
![Page 39: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/39.jpg)
![Page 40: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/40.jpg)
![Page 41: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/41.jpg)
![Page 42: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/42.jpg)
![Page 43: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/43.jpg)
![Page 44: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/44.jpg)
![Page 45: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/45.jpg)
![Page 46: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/46.jpg)
![Page 47: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/47.jpg)
![Page 48: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/48.jpg)
![Page 49: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/49.jpg)
![Page 50: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/50.jpg)
H I E R A R C H I C A L
![Page 51: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/51.jpg)
Hierarchical grids place hierarchy before columns.
![Page 52: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/52.jpg)
C O M B I N A T I O N
![Page 53: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/53.jpg)
C O M B I N A T I O N
![Page 54: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/54.jpg)
C O M B I N A T I O N
![Page 55: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/55.jpg)
C O M B I N A T I O N
![Page 56: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/56.jpg)
![Page 57: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/57.jpg)
![Page 58: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/58.jpg)
M O D U L A R
![Page 59: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/59.jpg)
Modular grids are made of columns and rows.
![Page 60: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/60.jpg)
![Page 61: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/61.jpg)
Modular grids are difficult to use on the web because content is
vertically dynamic.
![Page 62: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/62.jpg)
B A S E L I N E
![Page 63: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/63.jpg)
Type matters
![Page 64: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/64.jpg)
http://sushiandrobots.com/
![Page 65: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/65.jpg)
http://sushiandrobots.com/
![Page 66: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/66.jpg)
http://stopdesign.com/
![Page 67: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/67.jpg)
In CSS, there’s no way of setting type to a baseline grid. We can only use the line-height.
![Page 68: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/68.jpg)
Type matters
![Page 69: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/69.jpg)
Vertical Rhythm
![Page 70: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/70.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certainit’s not just imagining that light in the eastern sky. Unfortunately theeastern sky is off to port this morning. Yesterday it was starboard.Minerva has been sailing up and down the New England coast for thebetter part of a fortnight, trying to catch a wind that will decisively takeher out into deep water, or “off soundings,” as they say. They are probablynot more than fifty miles away from Boston.
Contrary Winds
Daniel goes back and sits by one of the windows – these are undershot sothat he can look straight down and see Minerva’s wake being born in afoamy collision around the rudder. He opens a small hatch below awindow and drops out a Fahrenheit thermometer on a string. It is the verylatest in temperature measurement from Europe – Enoch presented it tohim as a sort of party favour. He lets it bounce through the surf for a fewminutes, then hauls it in a takes a reading.
He’s been trying to perform this ritual every four hours – the objectivebeing to see if there’s any rumour that the North Atlantic is striped withcurrents of warm water. He can present the data to the Royal Society ifGod-willing he reaches London.
Text taken from Quicksilver by Neal Stephenson.
† The forecastledeck is theshort deck that, towardsthe ship’s bow, is builtabove the upperdeck.
![Page 71: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/71.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 72: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/72.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 73: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/73.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 74: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/74.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 75: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/75.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 76: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/76.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 77: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/77.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 78: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/78.jpg)
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
![Page 79: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/79.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 80: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/80.jpg)
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
![Page 81: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/81.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 82: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/82.jpg)
.sidenote{ font-size: 0.8333em; /* 10px */ line-height: 1.8em; /* 18px */ }
font size: 10px ÷ 12px = 0.8333emlineaheight:18px ÷ 10px = 1.8em
![Page 83: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/83.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 84: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/84.jpg)
h2{ font-size: 1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; }
font size: 14px ÷ 12px = 1.1667emline height: 18px ÷ 14px = 1.286em
top margin: 27px ÷ 14px = 1.929embot margin: 9px ÷ 14px = 0.643em
![Page 85: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/85.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 86: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/86.jpg)
Richard Rutterhttp://24ways.org/2006/compose-to-a-vertical-rhythm
Wilson Minerhttp://www.alistapart.com/articles/settingtypeontheweb
![Page 87: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/87.jpg)
Aboard Minerva off the Coast of New England
Daniel is roused by a rooster on the forecastledeck† that is growing certain
it’s not just imagining that light in the eastern sky. Unfortunately the
eastern sky is off to port this morning. Yesterday it was starboard.
Minerva has been sailing up and down the New England coast for the
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.
† The forecastledeck is the
short deck that, towards
the ship’s bow, is built
above the upperdeck.
![Page 88: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/88.jpg)
Incremental leading
![Page 89: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/89.jpg)
![Page 90: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/90.jpg)
![Page 91: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/91.jpg)
![Page 92: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/92.jpg)
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
![Page 93: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/93.jpg)
![Page 94: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/94.jpg)
C O M B I N A T I O N
![Page 95: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/95.jpg)
![Page 96: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/96.jpg)
![Page 97: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/97.jpg)
![Page 98: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/98.jpg)
![Page 99: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/99.jpg)
![Page 100: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/100.jpg)
Cascading Grid Systems
![Page 101: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/101.jpg)
Hiearchical+
Columnar+
Baseline+
Modular
![Page 102: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/102.jpg)
![Page 103: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/103.jpg)
![Page 104: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/104.jpg)
![Page 105: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/105.jpg)
![Page 106: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/106.jpg)
T O O L S A N D F R A M E W O R K S
![Page 107: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/107.jpg)
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
![Page 108: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/108.jpg)
P R O 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?
![Page 109: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/109.jpg)
C O N S
• 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.
![Page 110: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/110.jpg)
Build your own
![Page 111: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/111.jpg)
Fluid width?
http://www.alistapart.com/articles/fluidgrids
![Page 112: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/112.jpg)
W H A T Y O U C A N D O . T O D A Y .
![Page 113: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/113.jpg)
10. Let the content dictate inform the grid
![Page 114: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/114.jpg)
9. Compose to a vertical rhythm
![Page 115: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/115.jpg)
8. Three, Five, Seven, Nine
![Page 116: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/116.jpg)
7. Constraints
![Page 117: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/117.jpg)
6. Think outside the grid
![Page 118: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/118.jpg)
5. Cascade grid systems
![Page 119: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/119.jpg)
4. Embrace legacy
![Page 120: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/120.jpg)
3. Give legacy fixed elements backgrounds to fit the grid
![Page 121: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/121.jpg)
2. Break the grid. On purpose.
![Page 122: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/122.jpg)
1. Remember... A Grid System is an aid.
Not a guarantee.
![Page 123: Designing Grid Systems Doesn't Begin And End with 960](https://reader033.vdocuments.net/reader033/viewer/2022051515/54c82cbb4a795921468b4594/html5/thumbnails/123.jpg)
Mark Boultonmarkboultondesign.com
markboulton.co.uk
Thanks!