CSS Framework 960.gs

960.gs is strong CSS framework. When I first used this tool I found it quite complicated to understand, but gradually I got know the uses of this nice framework. Here I’ll be sharing my experience on this amazing tool for the beginners.

Download the file nathansmith-960-Grid-System-0d61cf1.zip from 960.gs and extract it. Then go to the copy folder and open the demo.html is your favorite IDE(notepad, textwrangler, netbeans etc) and start editing 😀

If you open the demo.html in your browser you’ll find lots of dummy layouts to choose your own. Find the layout you need, and remove the others. The css code is written in such a great organized way, so that will understand it very soon. I’ll suggest you to start with the uncompressed folder, where you will find the .css file more understandable.

Layouts are organized into 3 different ways, container_24(which can be found in a separate .css file), container_12 and container_16. The number after the container stands for the number of usable grids using that certain container. Then, there are grids, grid_1, grid_2, … , grid_16. These are the selectors of the specific fields with specific positions and sizes. alpha and omega are the tools to choose margin positions respectively left and right. prefix and suffix are used for left and right padding. push and pull are used to specify the exact position specifying the pixels into positive and negative.

See sample code comes with demo.html, start editing and make your own constant CSS layouts.