2009-12-10 Check me out on Twitter
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).
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.
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.
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.
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.
Version 1.3.1 released April 26th, 2009.
960.gridder.js
logo-sprite.png
Changelog (parsed from source code)
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.
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>
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.
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.
Authored by Andrée Hansson, this project is licensed under a MIT License, some rights reserved.
Read more at http://www.opensource.org/licenses/mit-license.php
Page last modified Fri, 12 Mar 2010 11:13:02 +0100
Comments (6)
This is incredibly useful, thanks for all the hard work.
Comment area has been cleaned up from all the release announcements, I'll keep that in the top right part of the website instead.
Mike: Thanks! That exact functionality is on its way. In the development version that whole procedure is rewritten and you can override just the variables you want to override, and keeping your website cleaner from bloat stuff like that. :-)
There's quite a few improvements in the development version so I recommend you to check it out!
Neat! I just tried it out at a few websites and it seems solid.
Although, I'd like to see a functionality where you just override a few of the settings instead of including all variables even if you just want to override one of them.
Keep up the good work though, website is definitely worth the bookmark!
A friend of mine was kind enough to give me some web hosting, so the site should now be available 24/7!
Welcome to the comment area of jQuery 960 Gridder! Feel free to post any comments, ideas, questions etc. here!
Post Comments
Have something on your mind? Drop me a line!