960 Grid System

4,442 views
4,293 views

Published on

Download the files at www.960.gs

Published in: Technology, Self Improvement
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,442
On SlideShare
0
From Embeds
0
Number of Embeds
2,149
Actions
Shares
0
Downloads
101
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

960 Grid System

  1. 1. the 960 gridsystemEasy codes, complex layouts
  2. 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. 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. 4. choose a container grid<div  class=“container_12”><div  class=“container_16”>
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. ADD a CLEAR DIV after each row<div  class=“clear”><div  class=“clear”>
  27. 27. move divs by pulling and pushing<div  class=“grid_3  push_1”> <div  class=“grid_3  pull_1”>
  28. 28. Add white spaces by using prefix/suffix 3-column space<div  class=“grid_6  suffix_3”> OR <div  class=“grid_3  prefix_3”>
  29. 29. Avoid double-margins using alpha/omega
  30. 30. Avoid double-margins using alpha/omega<div  class="grid_4"> <div  class="grid_5"> <div  class="grid_3">    <div  class="grid_4">    <div  class="grid_3">    <h1>3-­‐col</h1>        <h1>4-­‐col</h1>       <h1>3-­‐col</h1> </div>    </div>    </div>    <div  class="grid_4">    <div  class="grid_2">       <h1>4-­‐col</h1>       <h1>2-­‐col</h1>    </div>    </div></div>    <div  class="grid_1">       <h1>1-­‐col</h1>    </div>    <div  class="grid_4">       <h1>4-­‐col</h1>    </div> </div>
  31. 31. Avoid double-margins using alpha/omega<div  class="grid_4"> <div  class="grid_5"> <div  class="grid_3">    <div  class="grid_4">    <div  class="grid_3">    <h1>3-­‐col</h1>        <h1>4-­‐col</h1>       <h1>3-­‐col</h1> </div>    </div>    </div>    <div  class="grid_4">    <div  class="grid_2">       <h1>4-­‐col</h1>       <h1>2-­‐col</h1>    </div>    </div></div>    <div  class="grid_1">       <h1>1-­‐col</h1>    </div>    <div  class="grid_4">       <h1>4-­‐col</h1>    </div> </div>
  32. 32. Avoid double-margins using alpha/omega<div  class="grid_4"> <div  class="grid_5"> <div  class="grid_3">    <div  class="grid_4">    <div  class="grid_3">    <h1>3-­‐col</h1>        <h1>4-­‐col</h1>       <h1>3-­‐col</h1> </div>    </div>    </div>    <div  class="grid_4">    <div  class="grid_2">       <h1>4-­‐col</h1>       <h1>2-­‐col</h1>    </div>    </div></div>    <div  class="grid_1">       <h1>1-­‐col</h1>    </div>    <div  class="grid_4">       <h1>4-­‐col</h1>    </div> </div>
  33. 33. Avoid double-margins using alpha/omega<div  class="grid_4"> <div  class="grid_5"> <div  class="grid_3">    <div  class="grid_4">    <div  class="grid_3">    <h1>3-­‐col</h1>        <h1>4-­‐col</h1>       <h1>3-­‐col</h1> </div>    </div>    </div>    <div  class="grid_4">    <div  class="grid_2">       <h1>4-­‐col</h1>       <h1>2-­‐col</h1>    </div>    </div></div>    <div  class="grid_1">       <h1>1-­‐col</h1>    </div>    <div  class="grid_4">       <h1>4-­‐col</h1>double margins!!    </div> </div>
  34. 34. Avoid double-margins using alpha/omega <div  class="grid_4">    <div  class="grid_4  alpha  omega">        <h1>4-­‐col</h1>    </div>    <div  class="grid_4  alpha  omega">       <h1>4-­‐col</h1>    </div> </div>
  35. 35. Avoid double-margins using alpha/omega <div  class="grid_4">    <div  class="grid_4  alpha  omega">        <h1>4-­‐col</h1>    </div>    <div  class="grid_4  alpha  omega">       <h1>4-­‐col</h1>    </div> </div>
  36. 36. Avoid double-margins using alpha/omega <div  class="grid_4">    <div  class="grid_4  alpha  omega">        <h1>4-­‐col</h1>alpha:    </div>no left margin    <div  class="grid_4  alpha  omega">omega:         <h1>4-­‐col</h1>no right margin    </div> </div>
  37. 37. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  38. 38. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  39. 39. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  40. 40. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  41. 41. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  42. 42. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  43. 43. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  44. 44. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  45. 45. Avoid double-margins using alpha/omega<div  class="grid_5">    <div  class="grid_1  alpha">    <div  class="grid_3  alpha">      <h1>1-­‐col</h1>      <h1>3-­‐col</h1>    </div>    </div>    <div  class="grid_4  omega">    <div  class="grid_2  omega">      <h1>4-­‐col</h1>      <h1>2-­‐col</h1>    </div>    </div> </div>
  46. 46. everything adds up
  47. 47. everything adds up• All row widths should always add up to its container div
  48. 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. 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. 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. 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. 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. 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”>
  54. 54. Speedtest 01<!-­‐-­‐  CONTAINER  -­‐-­‐><div  class="container_16">
  55. 55. Speedtest 02<!-­‐-­‐  SIDEBAR  -­‐-­‐><div  class="grid_4"><!-­‐-­‐  ALL  CONTENT  -­‐-­‐><div  class="grid_12">
  56. 56. Speedtest 03div.container_16{background:#CCCCCC;}
  57. 57. Speedtest 04<!-­‐-­‐  PHOTO  -­‐-­‐><div  class="grid_4  prefix_8  alpha  omega">
  58. 58. Speedtest 05<!-­‐-­‐  SUB1  -­‐-­‐><div  class="grid_4  alpha"><!-­‐-­‐  SUB2  -­‐-­‐><div  class="grid_4"><!-­‐-­‐  SUB3  -­‐-­‐><div  class="grid_4  omega">

×