960.gs Open in urlscan Pro
173.236.187.40  Public Scan

Form analysis
0 forms found in the DOM

Text Content

If you want a responsive grid framework, check out Unsemantic.com


960 GRID SYSTEM

Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash,
InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress,
Visio, Exp Design. Repository at GitHub.

Shortcut provides speedy task management, reporting, and collaboration for
developers. Try it free today.ads via Carbon

--------------------------------------------------------------------------------



--------------------------------------------------------------------------------











--------------------------------------------------------------------------------


ESSENCE

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. Read
more.


DIMENSIONS

The 12-column grid is divided into portions that are 60 pixels wide. The
16-column grid consists of 40 pixel increments. Each column has 10 pixels of
margin on the left and right, which create 20 pixel wide gutters between
columns. View demo.


PURPOSE

The premise of the system is ideally suited to rapid prototyping, but it would
work equally well when integrated into a production environment. There are
printable sketch sheets, design layouts, and a CSS file that have identical
measurements.

--------------------------------------------------------------------------------


MORE COLUMNS

For those more comfortable designing on a 24-column grid, an alternative version
is also included. It consists of columns 30 pixels wide, with 10 pixel gutters,
and a 5 pixel buffer on each side of the container. This keeps text from
touching browser chrome — helpful for devices like the iPhone, where a
lower-case "i" or "l" might be easily missed. View demo.


SOURCE ORDER

By utilizing the push_XX and pull_XX classes, elements can be rearranged,
independent of the order in which they appear in the markup. This allows you to
keep more pertinent info higher in the HTML, without sacrificing precision in
your page layout. For instance, view the source code of this page to see how the
H1 tag has been re-positioned.

--------------------------------------------------------------------------------

Sony Music — 16 col Show Grid

Drupal — 12 col Show Grid

--------------------------------------------------------------------------------

Fedora Project — 16 col Show Grid

5by5 Studios — 12 col Show Grid

--------------------------------------------------------------------------------

Hugh Griffith — 12 col Show Grid

Nick Finck — 16 col Show Grid

--------------------------------------------------------------------------------

Gantry Framework — 12 col Show Grid

Trakt — 12 col Show Grid

--------------------------------------------------------------------------------

51bits — 12 col Show Grid

Onehub — 16 col Show Grid

--------------------------------------------------------------------------------

Four Kitchens — 12 col Show Grid

Sacramento International Airport — 16 col Show Grid

--------------------------------------------------------------------------------

Tapbots — 12 col Show Grid

VCU Qatar — 12 col Show Grid

--------------------------------------------------------------------------------

American Institute of Architects — 12 col Show Grid

Pulse App — 16 col Show Grid

--------------------------------------------------------------------------------

Refresh Boston — 16 col Show Grid

Right From the Heart — 16 col Show Grid

--------------------------------------------------------------------------------

Black Estate Vineyard — 12 col Show Grid

Simplified Safety — 16 col Show Grid

--------------------------------------------------------------------------------

A Better Office — 12 col Show Grid

Brand Rich Media — 12 col Show Grid

--------------------------------------------------------------------------------

Pixel Dreams — 16 col Show Grid

Formalize CSS — 12 col Show Grid

--------------------------------------------------------------------------------


CODE

View comprehensive code on the demo page.

To the right is an example of how the code works. The container specifies how
many total columns exist, either 12 or 16. For the most part, you will only ever
need to specify a class name of grid_XX, where XX represents the column width.

If a grid unit contains grid children, the first child in a row will need a
class of alpha and the last child in a row requires the class name omega.
Likewise, if you want to insert empty space before or after a grid unit, use
class prefix_XX or suffix_XX.

<div class="container_12">
  <div class="grid_7 prefix_1">
      <div class="grid_2 alpha">
          ...
      </div>
      <div class="grid_3">
          ...
      </div>
      <div class="grid_2 omega">
          ...
      </div>
  </div>
  <div class="grid_3 suffix_1">
      ...
  </div>
</div>


NINE-SIXTY

All modern monitors support at least 1024 × 768 pixel resolution. 960 is
divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64,
80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base
number to work with.


CREDITS

I drew inspiration from these individuals: Khoi Vinh, Cameron Moll, Olav
Bjørkøy, Brandon Schauer, Jeff Croft, Mark Boulton, and Eric Meyer. Their work
spurred me to create my own. I “stand on the shoulders of giants,” so to speak.

--------------------------------------------------------------------------------


PLUGINS

In addition to design template files, there are app plugins for Photoshop and
Fireworks included in the official download. Additionally, DMXzone has created a
Dreamweaver extension, which is available free to members of their site.


TUTORIALS

Web Designer Depot featured an article on writing less code by styling tags
directly. Nettuts has both a tutorial and video. WooThemes wrote a post entitled
“Why we love 960.gs.” There are also articles in Spanish and Swedish [1] [2].


DERIVATIVES

The 960 Grid System is free to use, and may be repurposed to meet your specific
needs. Several projects have already spun off, including versions built to be
fluid and responsive. Additionally, it is has been adapted as a theme for
Drupal.

--------------------------------------------------------------------------------

HTML - CSS - 508 — 960 Grid System by Nathan Smith.
Hosted by DreamHost
Licensed under GPL and MIT. Overlay effects via jQuery.