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

1. CSS
IS
AWESOME

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

6. How grids work

7. container_12
A container

8. You create boxes

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>