The 960 Grid System is a framework for streamlining web development workflow that is based around a 960 pixel width. It provides commonly used column dimensions of 12 or 16 columns that can be used separately or together. Some benefits include rapid development, clean grid structure, and easy creation of complex layouts. However, it also has limitations such as being restricted to the 960 pixel width. The document discusses the history and features of the 960 Grid System framework.

1. 960 Grid System
An introduction
by Mario Hernandez

2. About
• Web developer for the federal government
• Freelancer with over 10 years experience in
web design
• Front-end designer
• Main platform: Drupal
• Founder of DesignsDrive.com

3. How far has css come?
• CSS is more powerful than ever
• CSS3 & HTML5
• JQuery and Javascript

4. What is 960 Grid System?
• The 960 Grid System is an effort to streamline web
development workflow by providing commonly used
dimensions, based on a width of 960 pixels.
• Created by Nathan Smith (http://sonspring.com/about)
• There are two variants: 12 and 16 columns, which can
be used separately or in tandem.
• Get it at http://960.gs

5. Three things:
• You should have a good understanding of css
• This framework will not solve all your
problems
• The grid is not for all websites (newspaper/
magazine style)

6. Pros
• Rapid development
• Clean grid structure
• Cross browser compatibility - web standards
• Light weight code (~20kb)
• Build complicated layouts easily

7. Cons
• You are limited to a 960 width
• As with any framework, you lose some
flexibility
• It’s not your own code

8. The true power of 960 is demonstrated when building
complex newspaper-like layouts.

11. css classes: grid_x
12
1 11
2 10
3 9
4 8
5 7
6 6
7 5

12. css classes now in session
• alpha (first child grid within a grid)
• omega (last child grid within a grid)
• prefix_x (to apply empty space before)
• suffix_x (to apply empty space after)
• pull_x (to horizontally reposition content)
• push_x (to horizontally reposition content)

15. Let’s get started
Download & demo

17. Other options
• http://www.blueprintcss.org/
• http://www.thegridsystem.org/

18. Questions?
• web: http://designsdrive.com
• email: designsdrive@gmail.com
• twitter: @designsdrive