960 Grid System

Streamline web design with a precise 960px grid framework.

Free

Description

The 960 Grid System is a CSS framework designed to streamline web development by providing a fixed 960 pixel width layout, adaptable into 12, 16, and 24 column variants. It offers easily applicable class-based grids and includes resources such as printable sketch sheets, templates for popular design applications, and plugins to aid both prototyping and production workflows.

This open-source system includes features for flexible source order, comprehensive code samples, and support for a variety of column arrangements, making it suitable for both designers and developers seeking a dependable and efficient grid foundation for building websites.

Key Features

Fixed-width 960px grid: Supports 12, 16, and 24 column layouts for uniform web design.
CSS framework: Simplifies and accelerates frontend development workflows.
Printable sketch sheets and design templates: Available for Acorn, Photoshop, Illustrator, and more.
Push and pull classes: Allows elements to be reordered independently of HTML structure.
Comprehensive code samples: Includes ready-to-use HTML and CSS examples.
Open-source licensing: Distributed under GPL and MIT.
Plugins for design tools: Extensions provided for Photoshop, Fireworks, and Dreamweaver.
Alternate column options: Includes 24-column variant for advanced layouts.

Use Cases

Rapid website prototyping
Production web layout design
Designing responsive column-based grids
Preparing print-ready sketch sheets
Developing CMS themes and web applications

Frequently Asked Questions

What is the 960 Grid System?

It is a free CSS grid framework that standardizes web layouts into 12, 16, or 24 columns on a 960 pixel width, designed to speed up web development and prototyping.

What file formats and templates are included?

Resources include CSS files, printable sketch sheets, and templates for applications such as Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, and Expression Design.

How can source order be rearranged?

By using push_XX and pull_XX classes, elements can be repositioned independently of their appearance order in the HTML markup.

Can the 960 Grid System be used for production environments?

Yes, although it is ideal for rapid prototyping, it is equally effective when integrated into a production environment.

What licenses does the 960 Grid System use?

The system is licensed under both GPL and MIT, allowing for flexible and open usage.