Introduction to the 960 Grid System
•Download as KEY, PDF•
1 like•1,809 views
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.
Recommended
More Related Content
Similar to Introduction to the 960 Grid System
Similar to Introduction to the 960 Grid System (20)
More from Mario Hernandez
More from Mario Hernandez (11)
Recently uploaded
Recently uploaded (20)
Introduction to the 960 Grid System
- 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