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.

Advertisements

2 thoughts on “CSS Framework 960.gs

  1. Just want to say what a great blog you got here!
    I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

    Thumbs up, and keep it going!

    Cheers
    Christian, iwspo.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s