960 Gridder - Lay out websites with ease.

2011-08-25 960 Gridder has been moved to github: github.com/peol/960gridder
Check me out on Twitter for web-tech related tweets and other fun stuff.

What is this?

960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites.

The idea came when designing a website for a student organization where I worked with several designers that handed their lay outs and designs in Photoshop format with a similar grid built-in to me. After a while I noticed how hard it became to make sure everything looked exactly how they intended it, especially in the different browsers.

960 Gridder is cross-browser compliant and works well in Internet Explorer 6/7/8, Firefox 2/3 and Chrome. Safari 4 Beta and Opera 9 is also working as expected and it should work in Safari 2.x-3.x also.

According to browsershots, all A-grade browsers now display the grid perfectly (version 1.3.1).

How does it work?

960 Gridder is built upon the very famous JavaScript framework jQuery. 960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it. However, 960 Gridder isn't affiliated with the jQuery authors at all.

It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.

By default, it is set to work with 12 columns, 60 pixel wide columns with a 10 pixel spacer left and right of the column, making it a 20 pixel wide gutter (which actually is the ones this gridder renders).

Since version 1.3, you can now use shortcut commands to manipulate the grid. Use CTRL + ALT and Z for toggling gutters, X for toggling paragraphs and C for toggling both. Use A to toggle invertion of the grid.

You can see and read about the "960 standard" at http://960.gs.

Where do I use it?

960 Gridder is mainly developed with focus on initial lay out or fine tuning of a website. Therefore, to be really effective it should be integrated into your lay out. If you however are curious about how different websites did their layout, you can use the bookmarklet.

You can try the bookmarklet for example at Facebook, flickr or why don't you just check out one of my favorite websites, elementiks awesome list of web tools and resources? (Almost) all good things are 960 pixels in width! :-) For the swedish visitors, why not try it out on the feber.se sites? For a quick example, just click on this link: 960 Gridder!

To "remove" the grid, once activated, use CTRL + ALT + C or just refresh the page.

Development

The development version is heavily worked on from time to time, which makes it pretty unstable. If you are thinking about implementing 960 Gridder, you are better of with the stable releases. This is however the version you would want to try if you want to see new functionality that is being implemented.

The 960 Gridder (dev) version is also available as a bookmarklet, just drag the link to your bookmark field in your browser.

Source code, development version and older versions can be found here.

Known Problems

If you find anything that annoy you or something you want or need, just drop me a line on the e-mail address in the footer (click on my name) or drop me a line in the comments area below.

There's an issue on some websites with the column dropbox not working. It'll be fixed for next release. Thanks to Guiseppe for pointing that out.
An issue with the paragraph (horizontal lines) not spacing right was pointed out by Phil from London. For now, you can replace the line at approx. 405 with this, and it should work: top: ((me.settings.pHeight * i) + me.settings.pOffset) (thanks again Phil for reporting in!)

Latest Release

Version 1.3.1 released April 26th, 2009.
960.gridder.js
logo-sprite.png

Changelog (parsed from source code)

New GUI! The new GUI should be less obtrusive and has been repositioned. It is also featuring a slight delay on inputs so that you'll have a chance to change the settings before it is re-rendering the grid
Due to a lot of inquries regarding affiliation with jQuery the filenames has been changed, I'm very sorry for the inconvenience!
CSS issues with the GUI should also be fixed in more websites, please report in any issue you stumble upon
A small bug in IE that made the paragraph lines not position correctly has been fixed
A dropdown box has replaced the columns input box, 960 Gridder calculates the proper number of columns that can be used with the specified grid width
The 960 Gridder is now displaying perfectly (into the very pixels) in all A-grade browsers (according to browsershots.org)
An option to invert the gutters has been added, set this to 'true' if you want to use it, OR use the shortcut CTRL+ALT+A
Some other minor changes...

Bookmarklet

To easily use 960 Gridder on various websites, you can use the bookmarklet below. Click and drag this link: 960 Gridder to your bookmark field in your browser.

Overriding

Below is an example on how to override the default values. You insert this snippet into your HEAD tag and you are good to go.

Note! You can leave out any variables you wish to have default values.



<script type="text/javascript">

var gOverride = {

  urlBase: 'http://gridder.andreehansson.se/releases/latest/',

  gColor: '#EEEEEE',

  gColumns: 12,

  gOpacity: 0.35,

  gWidth: 10,

  pColor: '#C0C0C0',

  pHeight: 15,

  pOffset: 0,

  pOpacity: 0.55,

  center: true,

  gEnabled: true,

  pEnabled: true,

  setupEnabled: true,

  fixFlash: true,

  size: 960

};

</script>

Implementation

When you are heavily developing a site, you probably don't want to activate 960 Gridder by clicking on the bookmarklet every time, in that case, use the code below to automatically enable the grid on your website.



<head>

<script type="text/javascript">

// Insert optional override object before the function


createGridder = function() {

  document.body.appendChild(

    document.createElement('script'))

    .src='http://path-to/960.gridder.js';

}

</script>

</head>

<body onload="createGridder()">

A live example of this can be viewed here, it is always running the latest version.

Other Stuff

If you want to see other stuff I have been working on, check out my GitHub, http://github.com/peol , which includes a jQuery Text Selection special event plugin and a computed style (CSS) plugin.