The 960 Grid System Toolbox & Resources

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.

 

Showcase

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.

CSS-Boilerplate
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
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…


  • http://wpcult.com The Frosty @WPCult

    I use a spin off of the 960gs on my site. Just coded my way.

  • http://www.341design.com.au Chris Howard

    Ah, 960gs, how I love and loathe thee!

    I gave 960gs a go on my last website design and found it a major chore to get right. I also needed to create a 24 column version because the 12 & 16 didn’t work with my design.

    Despite the pain, I love what 960gs brings. It’s almost like building with Lego as it makes moving a changing things blocks around really easy.

    However, I did find I needed more divs and nesting than I would have otherwise.

    I also found I needed to use alpha and omega a fair bit. And, for Firefox and Safari, you can get away without the clear after rows, but Internet Explorer is much more finicky. So when 960 say put a clear after, they really mean it.

    Overall, I am a fan, and would recommend it.

  • Ben

    You have forget YUI Grinds
    http://developer.yahoo.com/yui/grids/

  • http://design-notes.info Design-notes

    Nice article I use 960 too. gonna try blueprint next

  • http://www.csswebsites.nl/ CSS Websites

    Looks awesome :)

  • http://www.bimaltailor.co.uk/blog/ Bim

    I vaguely used the 960 grid on a client’s website: http://www.dolphin-coms.co.uk

  • http://rsstudioat.blogspot.com/ rsstudio

    Great template. Though I might say that the web design really depends on the display and video card technology. Years ago we were limited to 800×600 and then LCD came to distort our notion. Probably we’ll have 1024.gs soon, who knows. :)

    Thanks for info!

  • http://www.bitlimakina.com bitlimakina

    thanks for really great sharind.

  • http://www.myinkblog.com Andrew Houle

    Really nice roundup! The 960 grid is so awesomely easy and helpful. Thanks for including a MyInkBlog tut in the list :)

  • Artem

    I wonder why you didn’t give the credit to the creator of 960gsby at least publishing his name in the introduction?

    • http://www.webdesignerdepot.com Walter

      Good point, we’ve added his name. Thanks for the input.

  • http://www.siiimple.com Justin Young

    Very nice list. But one of the best grid frameworks I’ve found is the Golden Grid http://code.google.com/p/the-golden-grid/

  • http://www.sametomorrow.com Adam

    Nice post some interesting stuff.

  • http://www.ecommerce-blog.org/ Jestep

    I actually just redesigned one of my blogs using the 960 – http://www.ecommerce-blog.org/.

    It provides on of the easiest ways to make a fast and very clean template. Everything in the design is modular, and once you understand the 12 or 16 column layout, making huge modifications only takes a few seconds.

  • http://960.gs/ Nathan Smith

    Thanks for the write-up! I’m continually amazed at how well-received the 960 Grid System has been. I had no idea when I made it that people would find it so useful.

    I just wanted to throw out another good 960.gs resource…

    NineSixty theme, for Drupal
    http://drupal.org/project/ninesixty

  • mokin

    Thx.

  • http://www.golpesdepincel.com evertt de sousa

    Very nice post, thanks

  • http://eveltdesign.com joel k.

    a great add-on for firefox
    check it out

    “GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.”

    http://www.puidokas.com/portfolio/gridfox/

  • http://www.tkinnovation.com Thad

    Thank you for the info. I find that the grid system increases workflow and cuts time. I am still wrestling with the customization vs speed.

  • http://www.seansteezy.com Sean Steezy

    awesome, i have been slowly learning how to use this thing and it makes it so easy to mock up a cleanly laid-out site that I feel I’m cheating my cilents…

  • http://www.visible.sk/ Internetová agentúra

    I use and like 960gs for its simplicity. Thanks for it and also for this useful post!

  • http://blog.spoolz.com Karl

    You you like 960gs and/or Blueprint, you should take a look at Compass CSS Meta-Framework. http://wiki.github.com/chriseppstein/compass

    I’ve used SASS before, so it was quite easy to pickup. Compass really takes up where 960gs and CSS just starts.

  • http://www.armeda.com Dre

    Using grid design enables you to organize a layout from start to finish. Thanks for the post.

  • http://www.looogo-web.com/ Designer-Kamrul

    Cool!

  • http://www.spry-soft.com David White

    The 960gs is an excellent CSS framework, I’ve used it on a few client sites already. I also built a nifty grid generator to generate a 960gs style css template for your site as some of the designers I work with found the 12 and 16 col restrictive.

    http:///www.spry-soft.com/grids/

    You can also get to it directly from http://960.gs

  • http://www.panixmedia.com Panix

    I’ve been using the 960gs framework to create a couple new sites including my own home page. I was introduced to it through Woothemes and it has really helped speed up the process of creating layouts.

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    960 really has caught the designers and developers eye :)

  • http://graphicleftovers.com/recent/ Daniel Errante

    I love the clean style and look of websites that use this template. It’s great someone took the time to standardize a CSS layout style to make web designer and developers’ lives easier!

  • http://www.daxhansen.com Dax Hansen

    Thanks for all the resources. I learn something new everyday. Thanks Web Designer Depot for filling my toolbelt!

  • dave

    I recently started using the 960 grid system but wasn’t happy with the limitations in size. I found a generator online http://www.gridsystemgenerator.com/ that creates a complete package for you, worked like a charm.

    Great article – thanks!

  • http://www.centresource.com Jason O’Brien

    Really good mashup of all that is 960. I’ve been a convert after a lot of research into different CSS frameworks because I found 960 to be the most designer-friendly.

    I recently blogged about designing with the 960, which is a topic I haven’t found much info on: http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/

    Keep up the great posts!

  • http://www.gamesnooper.com JustChris

    rsstudio: 960gs IS made for 1024-pixel wide resolutions. What you mean is probably seeing a future web page grid for when 1280 pixels wide and up become more commonplace. Maybe for that it would be the 1200 grid system.

    The only bad thing about 960gs is that it seemingly forces all websites to be that same width. But you can get clever and remove a few columns from it, ending up with something like a smaller, 10-column variation of the 12-column grid.

  • http://www.guardianwebdesign.com.au Teerock

    Thanks for the reference to my 960bc WordPress theme.

    I can’t begin to tell you how the 960 grid system has increased my productivity. Porting it into a WordPress theme has ramped up my output ten fold. With a little bit of care and creative flair, this system is flexible enough to handle any kind of design and using classes to set widths and id’s to identify divs doesn’t add to your markup unnecessarily.

    And using a traditional grid system has major aesthetic advantages too.

    Useful is the new clever.

  • http://www.dunkof.com dunkof

    wowww thank you

  • http://www.webdevtuts.net Marcell Purham

    Great round up of tutorials. I love the 960 grid and ever since I started using it I have not design a websiteover 960px haha

  • http://www.ariston-beyazesya-servisi.com/ ariston servisi

    that s good i like this tutorials.

  • http://www.echoes4ever.com.br Jonathas Scott

    Thanks a lot for the mention, It’s really an honor. :)

  • http://www.w3wallc.com lokendra

    960 is really really nice and good concept to work i am working with that 960 thanks a lot

    regards

  • http://www.tcsbasys.com Energy Manager

    We have recently redesigned our website using 960. It’s a wonderful frame work.