2. What is it?
• Ready-made CSS file
• Make grid-based layouts within 960px
• Cross-browser compatible
• Three versions: 12-col, 16-col, 24-col
• No need to compute widths
3. How to get started
• Create mock-up wireframes for your site,
using either 12, 16, or 24 columns
• Link the reset CSS file
<link
rel="stylesheet"
href="css/reset.css"
/>
• Link the CSS file of the 960 grid
<link
rel="stylesheet"
href="css/960.css"
/>
4. choose a
container grid
<div
class=“container_12”>
<div
class=“container_16”>
5. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
6. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
7. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
8. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
9. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
10. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
11. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
12. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
13. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
14. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
15. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
16. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
17. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
18. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
19. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
20. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
21. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
22. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
23. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
24. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
25. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>
26. ADD a CLEAR DIV
after each row
<div
class=“clear”>
<div
class=“clear”>
27. move divs by pulling and pushing
<div
class=“grid_3
push_1”> <div
class=“grid_3
pull_1”>
28. Add white spaces by using prefix/suffix
3-column space
<div
class=“grid_6
suffix_3”> OR <div
class=“grid_3
prefix_3”>
48. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
<div
class=“grid_7”>
<div
class=“grid_1”>
49. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
3+1+7+1=12
<div
class=“grid_7”>
<div
class=“grid_1”>
50. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
3+1+7+1=12
<div
class=“grid_7”>
<div
class=“grid_1”>
• For a 16-col grid:
<div
class=“grid_5”>
<div
class=“grid_2
prefix_1”>
<div
class=“grid_2
prefix_1”>
<div
class=“grid_2”>
<div
class=“grid_3”>
51. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
3+1+7+1=12
<div
class=“grid_7”>
<div
class=“grid_1”>
• For a 16-col grid:
5+2+1+
<div
class=“grid_5”>
<div
class=“grid_2
prefix_1”> 2+1+2+3
<div
class=“grid_2
prefix_1”> =16
<div
class=“grid_2”>
<div
class=“grid_3”>
52. REVIEW 960
• Link your HTML to the 960 CSS files
• Choose your container grid type
<div
class=“container_12”>
• Add widths to your divs using grid
<div
class=“grid_5”>
<div
class=“grid_12”>
• Use clear divs after each row
<div
class=“clear”>
53. REVIEW 960
• Move divs using push and pull
<div
class=“grid_5
push_2”>
<div
class=“grid_7
pull_1”>
• Add white space using prefix and suffix
<div
class=“grid_11
prefix_1”>
<div
class=“grid_9
suffix_3”>
• Remove margins using alpha and omega
<div
class=“grid_6
alpha”>
<div
class=“grid_3
omega”>