CSSISAWESOME
960 Grid System Ford Local Sites at UC Berkeley
What is the grid system•   A CSS library that makes it easy to design.•   Automatically sets margins, widths, spacing, pos...
We are a 12 column grid
How grids work
container_12A container
You create boxes
class= “grid_8”               class= “grid_4”class= “grid_4”        class= “grid_4”   class= “grid_4”         You create b...
class=     class=“grid_2”   “grid_2”   class= “grid_4”         class= “grid_4”                                            ...
class= “grid_8”                                         class= “grid_4”class= “grid_4”        class= “grid_4”   class= “gr...
class= “grid_8”                                         class= “grid_4”class= “grid_4”        class= “grid_4”   class= “gr...
<div	  class=“container_12”>     <div	  class=“grid_6”>          <img	  src=“wp-­‐content/uploads/2011/02/some.jpg”	  />  ...
What the code looks like<div	  class=“grid_6”>     <img	  src=“wp-­‐content/uploads/2011/02/some.jpg”	  /></div><div	  cla...
What the code looks like<div	  class=“grid_6”>     <img	  src=“wp-­‐content/uploads/2011/02/some.jpg”	  /></div><div	  cla...
Nested Gridsgrid_8     grid_4
Nested Gridsgrid_3 alpha grid_2 grid_3 omega      grid_8 alpha omega           grid_4         grid_8
Nested Gridsgrid_4 alpha    grid_4 omega     grid_8 alpha omega        grid_4         grid_8
Nested Grids<div	  class=“grid_8”>     <div	  class=“grid_4	  alpha”>     </div>     <div	  class=	  “grid_4	  omega”>    ...
The 960 Grid System
Upcoming SlideShare
Loading in …5
×

The 960 Grid System

6,733 views

Published on

An overview of the 960 Grid system as it pertains to a class taught at the UC Berkeley journalism school.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,733
On SlideShare
0
From Embeds
0
Number of Embeds
405
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The 960 Grid System

  1. 1. CSSISAWESOME
  2. 2. 960 Grid System Ford Local Sites at UC Berkeley
  3. 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.
  4. 4. We are a 12 column grid
  5. 5. How grids work
  6. 6. container_12A container
  7. 7. You create boxes
  8. 8. class= “grid_8” class= “grid_4”class= “grid_4” class= “grid_4” class= “grid_4” You create boxes
  9. 9. 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?
  10. 10. class= “grid_8” class= “grid_4”class= “grid_4” class= “grid_4” class= “grid_4” Watch your heights
  11. 11. class= “grid_8” class= “grid_4”class= “grid_4” class= “grid_4” class= “grid_4” class=“clear” Add a “clear” fix
  12. 12. <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>
  13. 13. 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>
  14. 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. 15. Nested Gridsgrid_8 grid_4
  16. 16. Nested Gridsgrid_3 alpha grid_2 grid_3 omega grid_8 alpha omega grid_4 grid_8
  17. 17. Nested Gridsgrid_4 alpha grid_4 omega grid_8 alpha omega grid_4 grid_8
  18. 18. 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>

×