960 Grid System Resources

960 Grid System Main Site

When yo go to the site there is literally a “Big ol’ Download Button :)” Click on that and you will get a zip file. In that file there are a bunch of folders.
If you don’t want to go through the folders then here is the minimum that you need. Put these two files in your css folder:
Here’s an explanation of what is in the folders of the big download:
  • 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.

Tutorials

  1. 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:
    http://youtu.be/ynkcejrTb20

    1. The video uses this Prezi presentation: http://prezi.com/lbp3xzme03nk/960gs-introduction/
    2. 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).
  2. Understanding Columns [10:11]: This video gets into how the columns work in the systemVideo on how it works:
    http://youtu.be/QbShYaK4sf8
  3. 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
    http://youtu.be/r2QFh87lShg

    1. Here is the zip file mentioned in the video: start.zip
  4. 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:
    http://youtu.be/3Cif6eCxAi8

Tools

960 grid overlay

http://peol.github.com/960gridder/

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

http://www.gridsystemgenerator.com/gs01.php
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

http://grid.mindplay.dk/

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.

4 responses to 960 Grid System Resources

  1. [...] updated the 960 GS resources on this site so they are much more [...]

  2. [...] 960 Grid System Resources [...]

  3. Yahir says:

    I am confused what way can i just use the grid on my website to know where things go?

    • If you want a step-by-step then watch the videos in the tutorials part. Especially videos 2 and 3 walk through how the system works. 1 helps you understand what the system is about and why.

      The basics you need are
      1. add a link to the reset.css file
      2. add a link to the grid.css file
      3. Figure out if you are going to use the 12 or 16 column grid
      4. add a div with a class on container_xx that will go around the content you want to be in the grid. replace xx with 12 or 16
      5. inside of that if you want content that is four columns wide then you put a div around it and add a class of grid_4 like

      . Repeat for other column widths.
      6. As you add content think of it in rows that go all of the way across the page.
      7. when you’re done with a row and want to start a new one ( you want content that starts on the left of the page, add a

Leave a Reply to Christopher Stein Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © MMP240 Fall 2012
Just another BMCC Multimedia Blogs site

Built on Notes Blog by TDH
Powered by WordPress

That's it - back to the top of page!