5.
History of the grid
‣ The practice of using a grid to guide design and
page layout is nearly a century old
‣ In the 1910s and 1920s, ornamental design gave
way to Rationalism and New Objectivity
‣ This shift in design was part of a much larger
movement towards function over form
‣ Helvetica typeface and Bauhaus architecture
Source: Grids are Good by Khoi Vinh and Mark Boulton

6.
Typographic grids
‣ After World War II, a number of graphic designers,
inﬂuenced by the modernist ideas of Die neue
Typographie (The New Typography), questioned
the relevance of the conventional page layout of
the time
‣ They devised a ﬂexible system to help designers
achieve coherency in organizing the page
Source: Grid (page layout) on Wikipedia

8.
Nearly a century ago
‣ Modernists looked to build a new aesthetic by...
‣ deriving beauty from the innate qualities of the
machine
‣ championing standardization
‣ Sound familiar?
Source: Grids are Good by Khoi Vinh and Mark Boulton

9.
Today
‣ Web designers have turned to grid-based design
in order to...
‣ derive beauty from the innate qualities of the
browser
‣ champion standardization
‣ 17 years after the invention of the web, we are
ﬁnally embracing a century-old design philosophy
Source: Grids are Good by Khoi Vinh and Mark Boulton

10.
Grid systems on the web
‣ On the web, grid systems usually take the form of
CSS frameworks
‣ A framework is a “reuseable abstraction of code
wrapped in a well-deﬁned API”1
‣ A collection of tools and shortcuts designed to
minimize code and make your life easier
1 Source: Software framework on Wikipedia

11.
Examples of frameworks
‣ Ruby on Rails is a well-known Ruby framework
‣ jQuery is a JavaScript framework
‣ Drupal itself can be considered a web application
framework
‣ Includes many APIs for working with databases,
ﬁelds, and web forms

13.
Layout
‣ When applied to web design, grid systems are CSS
frameworks that provides standardized rules and
shortcuts for building a website’s layout

14.
“I’m convinced that the people railing
against CSS frameworks are just trying to
drum up some false job security.”
—Je Croft, designer and author
Je Croft.com | What’s not to love about CSS frameworks?

22.
“Our craft is becoming a commodity, and the
people in charge don’t care about the quality of
the markup, CSS, or how short our JavaScript is.
What matters is how fast you can get it to
market, how many people it reaches, and how
cheaply it can be built.”
—Christian Heilmann, Standards evangelist at Yahoo
Think Vitamin | Web development is moving on — Are you?

26.
Gutters (margins)
‣ Margins or padding are
used to create gutters
between columns
‣ These gutters provide
margins between page
regions
Example based on 960.gs (12-column)

27.
Lean and versatile CSS
‣ A grid system’s CSS should:
‣ Be lean and e cient
‣ Be versatile and reusable
‣ Ensure consistent behavior across all common
browsers — even IE6

28.
Wrapping <div> elements
‣ In ﬁxed-width grid systems, the entire layout is
wrapped inside a single <div> element
‣ <div> elements wrap the page regions and deﬁne
their widths according to the number of columns
they span
‣ These <div> elements may be nested to create
regions within regions

29.
Floating <div> elements
‣ The wrapping <div> class: grid-12
elements are assigned
a column width using a class: class:
CSS class grid-4 grid-4
class:
grid-4
‣ Because these classes class: grid-8
also ﬂoat the elements,
they simply fall into
class: grid-6 class: grid-6
place on the page
Example based on 960.gs (12-column)

37.
What is 960.gs?
‣ 960.gs — also known as the 960 Grid System —
was created by Nathan Smith in order to
“streamline web development workﬂow”
‣ It’s both a prototyping and development
framework
Source: 960.gs

39.
Technical specs
‣ 960px wide with a 940px usable area
‣ Two versions: 12- and 16-column
‣ These can be implemented separately or
simultaneously
‣ Each column has a 10px margin on the left and
right, which creates a 20px gutter between
columns
Source: 960.gs

40.
12-column version
Columns are 60px wide Gutters are 20px wide
10px margin on the left and Available
right prevents collision with working area
browser chrome is 940px wide
Source: 960.gs

44.
CSS and markup
Note: 960.gs uses underscores in its CSS class names. To avoid confusion, the
examples that follow will use hyphens instead, as this is The Drupal Way.

45.
Containers
‣ Grids must be wrapped
in a container <div>
.container-12,
‣ Containers center the .container-16 {
margin-left: auto;
content and deﬁne margin-right: auto;
which version of the width: 960px;
grid will be }
implemented

46.
Grids
‣ Grids are held inside .grid-1,
.grid-2,
containers and are .grid-3,
ﬂoated left so they fall ...
into place .grid-16 {
display: inline;
automatically float: left;
position: relative;
‣ They also provide 10px margin-left: 10px;
margins on the left and margin-right: 10px;
}
right

47.
Grid widths
‣ The width of each grid
is determined by the .container-12 .grid-1 {
container that wraps it width: 60px;
}
‣ For example, a one-
.container-16 .grid-1 {
column grid is either width: 40px;
60px or 40px }
depending on whether
it’s a 12- or 16-column
layout

55.
‣ Here’s the catch: Because each grid includes a
10px left and right margin, nesting grids can break
your layout
.grid-6
.container-12
.grid-6
.grid-3
.grid-6
.grid-3

56.
Alpha and omega ﬁx
broken nesting
‣ When nesting grids, use the alpha and omega
classes to remove the margins
‣ alpha removes the left margin. It’s the ﬁrst nested
grid.
‣ omegaremoves the right margin. It’s the last
nested grid.

72.
Content-ﬁrst layout
‣ A design convention in which the content is output
as close to the top of the markup as possible
‣ Content should be output before all sidebars
‣ This can be very di cult to achieve on a site with
one or more left columns

73.
Push and pull classes
‣ Content-ﬁrst layout can be achieved in NineSixty
by “pushing” the content grid to the right while
“pulling” a sidebar to the left
‣ These classes use the same naming convention
as .grid-X, .prefix-X, and .suffix-X, where X is the
grid’s width:
‣ .push-X and .pull-X

77.
Dynamic grid widths
‣ In some cases, you may want grids to resize
themselves when a region isn’t populated
‣ For example, a 3-6-3 layout should become 3-9 if
the right column is empty
‣ Dynamic width assignment is handled using the
ns() function
‣ Deﬁned in template.php

78.
Structure of ns()
These “pairs”
Default subtract from the
value default value
ns('class-X', $region, Y, $region, Z, ...)
‣ class can be grid, prefix, suffix, push, or pull
‣ X, Y, and Z are all width values
‣ $region can be any theme region
‣ Use as many pairs as you like

82.
NineSixty in action
‣ Visit http://ninesixty.fkdemos.com to see how
NineSixty...
‣ uses push and pull classes to generate content-
ﬁrst layout
‣ dynamically assigns grid widths based on
context
‣ can be used to create di erent layouts

83.
Implementing a grid-
based layout
Using NineSixty to build your site

84.
When not to use a grid
‣ Implementing a grid will probably be impossible if
your site’s layout...
‣ uses irregular column sizes
‣ has irregular margins or gutters
‣ has a width that isn’t divisible by a sane number

85.
‣ Implementing a grid will be di cult — but not
impossible — if your site’s layout...
‣ has gutter widths of odd numbers
‣ is ﬂuid
‣ wasn’t designed on a grid

86.
Getting started
‣ Do not change the NineSixty theme on your site!
‣ Hacking NineSixty is like hacking core: It will
make upgrading your site very di cult
‣ Instead, subtheme NineSixty or create a totally
new theme based on NineSixty

87.
Subtheme
‣ This method is best if your site is (or can be)
960px wide and can utilize 12 or 16 columns
‣ Subtheming instructions and resources on
Drupal.org:
‣ Subtheming quick and dirty
‣ Sub-themes, their structure and inheritance

88.
Build a new theme
‣ You should build a new theme when your site’s
layout...
‣ isn’t 960px wide
‣ doesn’t use 12 or 16 columns
‣ It’s more e cient to use a new theme than to
override virtually all of NineSixty’s CSS

89.
Do the math
‣ Be prepared to crunch numbers
‣ Building a new grid can be very confusing
‣ Spreadsheets can help you visualize columns,
margins, and gutters
Image source: Client project

110.
Credits
‣ “History of the grid” slides were ‣ This presentation was created by
borrowed heavily from Khoi Vinh Nathan Smith of Fellowship Tech
and Mark Boulton’s presentation and Todd Ross Nienkerk, co-
Grids are Good and from founder of Four Kitchens, and
Wikipedia delivered by Todd Ross Nienkerk
‣ Piet Mondriaan painting was found
somewhere online. Copyright
holder is unknown
‣ The items listed above are exempt
from this presentation’s Creative
Commons license