960 Grid System Main Site
- app_plugins: these are for Adobe Fireworks and Adobe Photoshop and allow you to generate the column guides for the 960.gs. If you’re just using the standard 12,16 or 24 column grid then you don’t have to use these and can use the prebuilt files in the templates folder.
- code: this contains the files you need to actually use the 960 GS on your site. There are really only two files you need and both of them are located in the css folder inside of the code folder.
- reset.css / : the reset is a must as it removes the default margin and padding from the browser, without it the main 960.css file won’t work. (you can use your own reset if you like as long as it resets margins and paddings to 0).
- 960.css: this contains the actual css that makes the system work for the 12 and 16 column grids.
- min folder: this has the same files as you see in the main css folder but they have been ‘minified’ which is a process like zipping where the file size is brought down, mainly by removing all unecessary white space.Removing the white space makes it hard to read the files, which is why they offer normal ones too, but… THESE ARE THE FILES YOU WANT TO USE IN YOUR FINAL VERSION OF YOUR FINAL PROJECT. Most sites use these now because the smaller file size means shorter download times. Because they are named the same you can just swap these out for the other files whenever you want.
- Above are the essentials, some quick comments on the rest of the files. If you want to use a 24 column grid you have to use the 960_24_col.css file. The files with the numbers in them, like 960_12_col.css, just have the css for the number of columns listed. The files with _rtl at the end are for Right To Left written languages. The html files beginning with demo inside the code folder are to show you how the system works. None of the layouts are complex but they give you an idea of the basics. They all use the demo.css file. There is also a file named text.css (and text_rtl.css). This is just their version of a default text styling. You SHOULD NOT use this for our class. I want you to create your own Typographic hierarchy and font stacks. Feel free to use it on projects outside of class.
- licenses: The 960 GS has a GNU GPL license and an MIT license which basically means that you can use this and modify this for any project you’re working on, and gives me the right to make it available to you for download.
- logo_files: logos of the system in case you want to promote it or link to it
- README.txt: text file with brief explanation of 960 GS
- sketch_sheets: PDF files of the different columns (12|16|24) that you can print out and use to make hand drawn wireframes or whatever.
- templates: files for many programs (Photoshop, Illustrator, Gimp and more), that have the 12|16|24 column templates to help you in making mock-ups for your site.
- Overview [19:30] of grids in general and the 960 GS. This also includes the rules you need to follow when using 960GS. Watch this first:
- The video uses this Prezi presentation: http://prezi.com/lbp3xzme03nk/960gs-introduction/
- One small thing that’s changed is in the css folder they used to have them minified by default and then a folder named uncompressed. Now the uncompressed files are in the css folder and the minified ones are in a min folder (see below for more info).
- Understanding Columns [10:11]: This video gets into how the columns work in the systemVideo on how it works:
- 960 GS Hands On [12:57]: for those of you who need to see it to believe it, this tutorial walks you through using the 960 gs
- Here is the zip file mentioned in the video: start.zip
- Full Width Backgrounds [8:26]: this video is optional and shows how to have different sections on a page, each with full width backgrounds, while still using the 960 GS:
960 grid overlay
This tool gives you a bookmark that when you click on it puts a semitransparent column overlay on a web page. It is really helpful when trying to get your 960 grid layouts working. Go to the link and then follow the instructions to drag the bookmarklet to your bookmarks toolbar
960 Grid System Generator
If you want to create your own column and width settings this lets you type in your desired column, gutter and overall widths and then creates a file that is equivalent to the 960.css file listed above, but it has your custom settings in it. If you want to use this you would use it instead of the 960.css file given with the system.
Visual Grid Generator
When you’re creating your own grid it can be hard to fiddle with what dimensions you want for columns, gutters etc. This site helps you figure that out in a visual way. You can use these number to plug into the 960 Grid System Generator above.