2. THE IDEA CSS Framework Enables developers to rapidly prototype designs Do all the heavy lifting allowing you to get faster results Examples: http://960.gs/ Examples: http://960.gs/ Examples: http://960.gs/ Examples: http://960.gs/

3. GET A COPY FROM 960.GS CLICK BIG OL’ DOWNLOAD BUTTON

4. EXTRACT THE ZIPPED FOLDER Find the 960-Grid-System-master Find the 960-Grid-System-master Right-Click on it and Choose Extract Here Right-Click on it and Choose Extract Here

5. INSIDE THAT EXTRACTED FOLDER Printable sheets with grids for wire-framing in pencil Template files to open in Fireworks, Illustrator, Photoshop, etc. for design mockups that already have the grids in them Contains css folder with styles to use grid system. Also demo html’s of use for each grid system.

6. FOR YOUR USE Pull the CSS folder and place into your own project Pull the CSS folder and place into your own project Easiest way to start is pull one of their demo files, rename, and erase body contents Easiest way to start is pull one of their demo files, rename, and erase body contents Already has their stylesheet links in it – you may want to remove and/or edit the ones called text.css and demo.css Already has their stylesheet links in it – you may want to remove and/or edit the ones called text.css and demo.css Just make sure the.html is sitting directly outside the css folder Just make sure the.html is sitting directly outside the css folder

7. GRID OPTIONS possible grids: 12,16, or 24 columns main container is always 960px wide Every grid cell has a margin: 0 10px - creates a gutter of 20px When creating a row, the total width of all elements add up to 960 Each grid cell has a class that specifies what width it will be Demo: http://960.gs/demo.htmlhttp://960.gs/demo.html

8. BASICS container_y Y = 12, 16 or 24  total # of columns in your grid grid_x x = # columns this piece (div) consumes Empty div after you are finished with a row Total of Each Row Adds to y (12 in this example)

9. APPLY A CONTINUOUS BACKGROUND ACROSS MULTIPLE, SEPARATELY GROUPED COLUMNS Example: Apply a continuous blue background underneath both of these.

10. APPLY A CONTINUOUS BACKGROUND ACROSS MULTIPLE, SEPARATELY GROUPED COLUMNS Create a style rule to apply a blue background in stylesheet Create wrapper class and apply grid_total for those div’s you are wrapping. Then also apply color class. 1 st wrapped div needs class alpha added to it Last wrapped div needs class omega added to it If there were div’s in between 1 st and last they wouldn’t get any special new classes

11. WANT A GAP BEFORE A DIV – USE PREFIX Gap with no div prefix_xx xx= 5 Amount of columns to leave blank before the div defined here

12. WANT A GAP AFTER A DIV – USE SUFFIX Gap with no div suffix_xx xx= 5 Amount of columns to leave blank after the div defined here

13. (1) WRITE THE HTML REQUIRED TO CREATE THE GRID USE SHOWN

14. (2) WRITE THE HTML REQUIRED TO CREATE THE GRID USE SHOWN

15. (3) WRITE THE HTML REQUIRED TO CREATE THE GRID USE SHOWN

16. (4) WRITE THE HTML REQUIRED TO CREATE THE GRID USE SHOWN Note – Continuous background behind these 3 separate div’s