Contenu connexe Similaire à The 960 Grid System (20) Plus de UC Berkeley Graduate School of Journalism (10) The 960 Grid System3. 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.
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>