The 960 Grid System
- 2. 960 Grid System Ford Local Sites at UC Berkeley
- 3. What is the grid system • A CSS library that makes it easy to design. • Automatically sets margins, widths, spacing, position, and everything else. • Encourages clean design with good alignment. • Aims to standardize webpage design.
- 5. We are a 12 column grid
- 9. class= “grid_8” class= “grid_4” class= “grid_4” class= “grid_4” class= “grid_4” You create boxes
- 10. class= class= “grid_2” “grid_2” class= “grid_4” class= “grid_4” =12 class= class= “grid_4” class= “grid_6” “grid_2” =12 What are the classes?
- 11. class= “grid_8” class= “grid_4” class= “grid_4” class= “grid_4” class= “grid_4” Watch your heights
- 12. class= “grid_8” class= “grid_4” class= “grid_4” class= “grid_4” class= “grid_4” class=“clear” Add a “clear” fix
- 13. <div class=“container_12”> <div class=“grid_6”> <img src=“wp-‐content/uploads/2011/02/some.jpg” /> </div> <div class=“grid_6”> <p>About this project: This is us</p> </div> <div class=“grid_12”> <object id=“Flash embed”><param name=“AllowScriptAccess”></ object> </div> <div class=“clear”></div> <div class= “grid_8”> <p>Text story</p> </div> <div class= “grid_4”> <p>sidebar</p> </div> </div>
- 14. What the code looks like <div class=“grid_6”> <img src=“wp-‐content/uploads/2011/02/some.jpg” /> </div> <div class=“grid_6”> <p>About this project: This is us</p> </div> <div class=“clear”></div> <div class=“grid_12”> <object id=“Flash embed”><param name=“AllowScriptAccess”></object> </div> <div class= “grid_8”> <p>Text story</p> </div> <div class= “grid_4”> <p>sidebar</p> </div> <div class=“clear”></div>
- 15. What the code looks like <div class=“grid_6”> <img src=“wp-‐content/uploads/2011/02/some.jpg” /> </div> <div class=“grid_6”> <p>About this project: This is us</p> </div> <div class=“clear”></div> <div class=“grid_12”> <object id=“Flash embed”><param name=“AllowScriptAccess”></object> </div> <div class= “grid_8”> <p>Text story</p> </div> <div class= “grid_4”> <p>sidebar</p> </div> <div class=“clear”></div>
- 16. Nested Grids grid_8 grid_4
- 17. Nested Grids grid_3 alpha grid_2 grid_3 omega grid_8 alpha omega grid_4 grid_8
- 18. Nested Grids grid_4 alpha grid_4 omega grid_8 alpha omega grid_4 grid_8
- 19. Nested Grids <div class=“grid_8”> <div class=“grid_4 alpha”> </div> <div class= “grid_4 omega”> </div> <div class= “grid_8 alpha omega”> </div> </div>