This hands-on introduction to the 960 grid system was prepared by Mario Hernandez in an effort to educate fellow designers and developers of the Federal Court system in the use of grids and frameworks. August 2011

1. 960 Grid System
A hands-on introduction
By Mario Hernandez - District Court - California Central
Collaborative Applications Development Forum - August 2011
Sunday, August 28, 11

2. What is a grid system?
A series of columns working as guides to
streamline web development workflow by
providing commonly used dimensions,
based on a fixed width of 960 pixels.
Source: Wikipedia
Sunday, August 28, 11

3. Not exclusive to web design
Sunday, August 28, 11

4. Grid Systems on
Graphic Design
Sunday, August 28, 11

5. Source: Grid (page layout), wikipedia
Sunday, August 28, 11

6. Painting by Piet Mondriaan (later Mondrian)
Sunday, August 28, 11

7. Grid systems on the web
• Grid systems on the web usually take the form of a
CSS framework
• A framework is a “reuseable abstraction of
code wrapped in a well-defined API” *
• A collection of tools and shortcuts designed to
minimize code and make your life easier
* Source: Software framework, Wikipedia
Sunday, August 28, 11

8. Examples of Frameworks
Sunday, August 28, 11

9. CSS Frameworks
• Apply the principles of software frameworks to web
design
• They provide standardized rules and shortcuts for:
• Browser resets
(http://meyerweb.com/eric/tools/css/reset/)
• Typography
• Navigation
• Print style
Sunday, August 28, 11

10. Why use a grid system?
• Saves time
• Saves money
• Reduces frustration
Sunday, August 28, 11

11. Adopting a grid system can accelerate design while maintaining order
Photo by dysturb, Grid. Flickr
Sunday, August 28, 11

12. How do grid systems work?
• Grid systems are built
using columns
• Columns are grid
system’s smallest
unit of measurement
• The two most popular
version of a grid system
are 12 and 16 columns
Example based on 960.gs (12 columns)
Sunday, August 28, 11

13. Column width
• Page regions (header,
sidebar, content, etc.,)
are defined by column
width
• As in: “The header is
eight columns wide”
Example based on 960.gs (12 columns)
Sunday, August 28, 11

14. Gutters (margins)
• Margins are used to
create gutters between
columns
• These margins provide
gutters between page
regions
Example based on 960.gs (12 columns)
Sunday, August 28, 11

15. Floating <div> elements
• The wrapping <div> class: grid_12
elements are assigned a
column width using a class: grid_4 class: grid_4
class:
CSS class grid_4
• Because these classes class: grid_8
also float the elements,
they simply fall into
class: grid_6 class: grid_6
place on the page
Sunday, August 28, 11

16. Example of floating elements
.box1
.box2
.box3
Sunday, August 28, 11

17. Example of floating elements
.box1 .box2
.box3
Sunday, August 28, 11

18. Example of floating elements
.box1 .box2 .box3
Sunday, August 28, 11

19. Example of floating elements
.box1 .box2 .box3
.box1, .box2, .box3 {
display:block;
float:left;
margin: 0 10px;
}
Sunday, August 28, 11

20. What is 960.gs?
• 960.gs — also known as the 960 Grid System — was
created by Nathan Smith in order to “streamline web
development workflow”
• It’s both a prototyping and development framework
Source: 960.gs
Sunday, August 28, 11

21. What’s in it?
• You can download it from http://960.gs
• GPL and MIT licensed
• The 960.gs download includes:
• Printable sketch sheets for
doodling
• Design templates for all most
applications: Photoshop, Illustrator,
Inkscape, OmniGraffle, etc.
Source: 960.gs
Sunday, August 28, 11

22. 12 column version
Source: 960.gs
Sunday, August 28, 11

23. Grid system CSS classes
• grid_x (where X indicates
the number of columns an
element is given)
• alpha & omega: Fix floats
on nested regions
• prefix & suffix: Allow empty
spaces before or after a
region
grid_4 grid_4
• pull & push: Rearrange push_6 pull_6
regions independently of
the order they appear on
the markup
Source: 960.gs
Sunday, August 28, 11

24. Grid system CSS classes
• grid_x (where X indicates
the number of columns an
element is given)
• alpha & omega: Fix floats
on nested regions
• prefix & suffix: Allow empty
spaces before or after a
region
grid_4
• pull & push: Rearrange push_6
pull_6
regions independently of
the order they appear on
the markup
Source: 960.gs
Sunday, August 28, 11

25. Grid system CSS classes
• grid_x (where X indicates
the number of columns an
element is given)
• alpha & omega: Fix floats
on nested regions
• prefix & suffix: Allow empty
spaces before or after a
region
grid_4 grid_4
• pull & push: Rearrange pull_6 push_6
regions independently of
the order they appear on
the markup
Source: 960.gs
Sunday, August 28, 11

26. Let’s see it in action
The rest of the presentation is a hands-on demo of the grid system.
Sunday, August 28, 11

27. Sunday, August 28, 11

28. When not to use a grid system
• 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
Sunday, August 28, 11

29. Questions?
phone: 818-275-4927
email: designsdrive@gmail.com
twitter: @designsdrive
Sunday, August 28, 11

30. Acknowledgements
• Nathan Smith: Creator of the 960 grid system. Without his influence
and vision this presentation would not be possible. Learn more about the
grid system at http://960.gs
• Todd Nienkerk: Co-founder, designer four kitchens (twitter:
@toddross). I saw his 960 grid system presentation at the 2011 LA
DrupalCamp conference and he blew me away. He kindly allowed me to use
some of his material for this presentation. You can catch his presentations at
http://fourkitchens.com/presentations.
• Jonathan D’andries: Developer for District Court, WIWD. His hard
work on promoting standards and best practices for design and
development within the Court’s system is influential. I personally thank him
for the opportunities he has given me.
This presentation was created by Mario Hernandez in an effort to educate fellow designers and developers of the Federal Courts System
in the use grids and frameworks. August 2011.
Sunday, August 28, 11