Tutorials and Inspiration to Unleash the 960 Grid System

Do you have problems in coding your own design? Does it have to do with styling and CSS? Do you want to speed things up and not make a mess of it? If you too have the previous questions and problems, Nathan Smith has created a system known as the 960 Grid System to answer your questions.

The 960 Grid System is a CSS grid system for rapid prototyping and development of websites.  In easy and brief terms, the 960 Grid System helps ease up the coding process, minimizing errors and maximizing efficiency. The grid system is a mechanism that breaks up the work into shorter pieces so accuracy is achieved.

In this hybrid article, we’ll dive into the 960 grid system with a quick overview, then we’ll give you some great tutorials and finally some inspiration to get you started.

What is 960gs?

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

This system works for almost any browser and any OS. If any problems do come they are easy to fix out. It is free to use and these days with its increasing popularity one can easily find tutorials on using this incredible framework.

One drawback could be that it can only work for layouts with a 960px width.  So if one has a different layout choosing this framework could be tedious.

If you are on the hunt for resources regarding on how to design your site according to this framework, this .zip file file will help you. Also, if you are concerned if developers using this framework have not so good looking sites that the 960 grid system website has a few mind blowing examples one could refer to before using this framework, and we’ve included a few of the inspirational sites below.

If you are having any problems or confusions on what framework to choose, Raj Dash has written a good and detailed article at Net.tutsplus to remove such confusions, titled “Which CSS Grid Framework Should You Use for Web Design?

Tutorials and Resources for using 960gs

960 CSS Framework: Learn the Basics:

960 CSS Framework: Learn the Basics

Prototyping with the 960gs:

Prototyping with the 960 Grid CSS Framework

Build a Newspaper Website with a Grid (NETTUTS Plus Tutorial)

Build a Newspaper Website with a Grid (NETTUTS Plus Tutorial)

Design a Fresh Blog Website Based on the 960 Grid System:

Design a Fresh Blog Website Based on the 960 Grid System

Introduction Design Tutorial for 960 GS:

Introduction Design Tutorial for the 960 GS

Build a WordPress Theme with the 960 GS:

Build a WordPress Theme with the 960 GS

Inspirational Websites using 960gs

Nuvo Graphics
Phil Coffman
Pulse App
Black Estate Vineyard
Right From The Heart
Travis Isaacs

Comments 4 Responses

  1. Pingback: uberVU - social comments April 6, 2010
  2. n April 7, 2010
  3. Schrumpfschläuche April 7, 2010
    • Eric Shafer April 7, 2010
    • Sam April 8, 2010
  4. Pingback: Twitted by webEchoLess April 7, 2010

Leave a Comment!