An introduction to the 960 grid system
Download as KEY, PDF
1 like1,811 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.
An 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 work鍖ow 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 鍖exibility Its 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 (鍖rst child grid within a grid) omega (last child grid within a grid) pre鍖x_x (to apply empty space before) suf鍖x_x (to apply empty space after) pull_x (to horizontally reposition content) push_x (to horizontally reposition content)
- 15. Lets 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