The 960 Grid System Toolbox & Resources

By WebdesignerDepot Staff Posted May. 27, 2009 Reading time: 4 minutes

The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

The 960.gs (or any CSS framework) was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project.

It will give your site a structured and solid foundation for you to build and style your design upon.

In this article, you’ll find tutorials, a showcase of sites designed using the 960.gs, spin offs, basic WP themes built on the 960.gs and possible alternative frameworks, if for some reason you don’t like the 960 grid system.

Within the download package there are printable sketch sheets, design layouts and a CSS file that have identical measurements.

You have two templates, a 12 column grid divided into portions of 60px and a 16 column grid divided into 40px. Each column has 10 pixels of margins on the left and right, which create 20 pixel wide gutters between columns.

Homepage : 960.gs Homepage.

Download : Download the 960.gs.

Demo : View the 960.gs Demo Page.


960.gs Tutorials

960 CSS Framework – Learn the Basics
This is a great basic tutorial to get you started, written by Stefan Vervoort from divitodesign. You are taken through the basics of loading the framework, so you can start developing with 960.gs fast.

Working with 960.gs
Another tutorial that takes you through the basics of installing the 960.gs, especially useful for the CSS challenged.

A Detailed Look at the 960 CSS Framework
Once you take the opportunity to spend some time with 960.gs, you will be amazed at how much time can potentially be saved when developing your web projects.

Prototyping With The Grid 960 CSS Framework
This article covers the entire prototyping process, it explains the basics of Grid 960, planning the grid for a design and coding the prototype. As quick as that.

Build a Newspaper Theme With WP_Query and the 960 CSS Framework
This tutorial will teach you how to use WP_Query to make a 3 column newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts from a selected category. Using the 960 CSS framework for the layout and rest of the theme, you are shown how this will greatly speed up your productivity.

Design A Fresh Blog Theme On The 960 Grid
This tutorial teaches you to mock up a blog theme in Photoshop that is designed to be used within the 960 framework. This tutorial was designed more for web design theory than Photoshop technique, but spends considerably more time on design theory and application.


960 Spin Offs

Typogridphy — A Typographical and Grid Layout CSS Framework

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typographically pleasing grid layouts. It allows you to create grid layouts which are versatile and attractive, it validates strict xHTML and CSS. It also uses a typographical method known as ‘creating vertical rhythm’, whereby all adjacent lines of text line up horizontally, regardless of line breaks and new paragraphs.
Demo : Typogridphy Demo

Overture – Fluid 960 Grid System 1.0

Developed by Stephen Bau from Design7, he has built a library of commonly used HTML elements, combining these with CSS for typography and layout, and adding some basic effects from popular JavaScript libraries (mainly MooTools). Upon download you can choose from three templates: 960 px fixed width, 12-column fluid width or 16-column fluid width. These templates are amazing, you have to see the detail to believe it.
Demo :
Overture Demo.



All of the beautiful sites below have been built using the 960 grid system:


WordPress Themes

Just like the actual 960.gs, these WP themes are virtually unstyled and with very basic functionality, but they were built using the 960.gs. Very useful for any WP developer.

5 Years WordPress Theme
A basic WP theme built using the 960.gs.

960bc WordPress Theme
The 960bc theme is essentially a blank canvas with minimal styling and no images based on the 960 grid system (12 columns only) for WordPress developers who want to work within a traditional grid based layout.


Possible Alternatives

Choosing a CSS Framework can be difficult, if the 960.gs isn’t right for you, perhaps you could try some of the frameworks below.

Blueprint: A CSS Framework
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing. It is far less bloated than the YUI framework, and is possibly on a par with the 960.gs in terms of ease of use.

From one of the authors of Blueprint. He has created a stripped down framework which provides the bare essentials to begin any project. This framework is light and strives not to suggest non-semantic naming conventions.

Elements – A Down to Earth CSS Framework
It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it is its own project workflow. It has everything you need to complete your project.

WYMstyle – CSS framework – Overview
The aim of this project is to provide a set of well-tested modular CSS files, that can be used for fast design of web sites.

Yet Another Multicolumn Layout | YAML
“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it is cleaner and more powerful than CSS2.

sparkl CSS Framework
Sparkl combines POSH markup, Bulletproof CSS and Unobtrusive JavaScript into one easy to use web development framework that makes it simple to create bulletproof websites that conform to web standards. It uses a modular framework, allowing you to use what you need and leave out what you don’t.

The jQuery UI CSS Framework
Query UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

Written exclusively for WDD by Paul Andrew from Speckyboy.com

Do you use the 960gs for your websites? What are the main advantages? We’d love to hear from you…