960 pixel width of layout
940 pixel "live" area. I've set that paragraphs have a line height of 16 pixels, and a margin of 16 pixels under it. You can see that in this window the paragraphs nicely align, making them a good tool to measure different boxes and their paragraphs and other text so that they are matching up.
Turn off the grid by pressing CTRL + ALT + C
Click here to toggle invertion of the grid, or press CTRL + ALT + A
<!doctype html>
<html lang="en">
<head>
<title>960 Gridder - Lay out websites with ease.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="960 gridder, pixels, jquery, layout, design, javascript, web design, web development" />
<meta name="robots" content="index,follow" />
<meta name="description" content="960 Gridder is an excellent tool for any web developer/designer that wants to easily align, match and lay out websites." />
<link rel="stylesheet" type="text/css" href="code/style.css" />
<!--[if lte IE 7]> <style type="text/css"> #head { padding-bottom: 18px; } </style> <![endif]-->
<script type="text/javascript">
var gOverride = {
pHeight: 18,
gColor: '#FF0000',
invert: true,
pOffset: -2
};
</script>
</head>
<body>
<div id="head">
<h1 class="sprite-logo">960 Gridder</h1>
<div id="magic" class="sprite-magic">
Drag it to your bookmark bar:<br />
<a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://gridder.andreehansson.se/releases/latest/960.gridder.js';})();">960 Gridder</a><br />
<span>or click <a href="/implemented" style="font-size: 12px; font-weight: bold; border: 0;">HERE</a> to see it in action</span>
</div>
</div>
<div id="container">
<div id="info-box" class="clearfix">
<strong>2011-08-25</strong> 960 Gridder has been moved to github: <a href="http://github.com/peol/960gridder">github.com/peol/960gridder</a><br/>
Check me out on <a href="http://twitter.com/peolanha">Twitter</a> for web-tech related tweets and other fun stuff.
</div>
<div class="left">
<!-- WHAT -->
<h2 id="what" class="sprite-h2">What is this?</h2>
<p>960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites.</p>
<p>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.</p>
<p>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.</p>
<p>According to <a href="http://browsershots.org/" title="Website: browsershorts.org">browsershots</a>, all A-grade browsers now display the grid perfectly (version 1.3.1).</p>
<!-- HOW -->
<h2 id="how" class="sprite-h2">How does it work?</h2>
<p>960 Gridder is built upon the very famous JavaScript framework <a title="Website: jQuery" href="http://jquery.com/">jQuery</a>. 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.</p>
<p>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.</p>
<p>By default, it is set to work with 12 columns, <em>60 pixel wide columns</em> 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).</p>
<p>Since version 1.3, you can now use shortcut commands to manipulate the grid. Use <strong>CTRL + ALT</strong> and <em>Z</em> for toggling gutters, <em>X</em> for toggling paragraphs and <em>C</em> for toggling both. Use <em>A</em> to toggle invertion of the grid.</p>
<p>You can see and read about the "960 standard" at <a title="Website: 960.gs" href="http://960.gs">http://960.gs</a>.</p>
<!-- WHERE -->
<h2 id="where" class="sprite-h2">Where do I use it?</h2>
<p>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.</p>
<p>You can try the bookmarklet for example at <a title="Website: Facebook" href="http://facebook.com/">Facebook</a>, <a title="Website: Flickr" href="http://flickr.com/">flickr</a> or why don't you just check out one of my favorite websites, <a title="Website: elementiks" href="http://elementiks.com/web_resources.php">elementiks</a> 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 <a title="Website: Feber.se" href="http://feber.se/">feber.se</a> sites? For a quick example, just click on this link: <a title="Activate jQuery 960 Gridder" href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://gridder.andreehansson.se/releases/latest/960.gridder.js';})();">960 Gridder</a>!</p>
<p><em>To "remove" the grid, once activated, use CTRL + ALT + C or just refresh the page.</em></p>
<!-- DEVELOPMENT -->
<h2 id="development" class="sprite-h2">Development</h2>
<p>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.</p>
<p>The <a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://gridder.andreehansson.se/releases/dev/960.gridder.src.js?'+(new Date()).getTime();})();">960 Gridder (dev)</a> version is also available as a bookmarklet, just drag the link to your bookmark field in your browser.</p>
<p>Source code, development version and older versions can be found <a href="releases/?C=M;O=D">here</a>.</p>
<!-- PROBLEMS -->
<h2 id="problems" class="sprite-h2">Known Problems</h2>
<p>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 <a href="#comments">comments area</a> below.</p>
<ul>
<li>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.</li>
<li>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: <span style="background-color: #DDD;font-family: Courier new, monospace;">top: ((me.settings.pHeight * i) + me.settings.pOffset)</span> (thanks again Phil for reporting in!)</li>
</ul>
</div>
<div class="right">
<!-- LATEST -->
<h2 id="news" class="sprite-h2">Latest Release</h2>
<p><strong>Version 1.3.1 released April 26th, 2009.</strong><br />
<a href="releases/1.3.1/960.gridder.js">960.gridder.js</a><br />
<a href="releases/1.3.1/logo-sprite.png">logo-sprite.png</a></p>
<p>Changelog (parsed from source code)</p>
<ul><li>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</li><li>Due to a lot of inquries regarding affiliation with jQuery the filenames has been changed, I'm very sorry for the inconvenience!</li><li>CSS issues with the GUI should also be fixed in more websites, please report in any issue you stumble upon</li><li>A small bug in IE that made the paragraph lines not position correctly has been fixed</li><li>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</li><li>The 960 Gridder is now displaying perfectly (into the very pixels) in all A-grade browsers (according to browsershots.org)</li><li>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</li><li>Some other minor changes... </li></ul>
<!-- BOOKMARKLET -->
<h2 id="bookmarklet" class="sprite-h2">Bookmarklet</h2>
<p>To easily use 960 Gridder on various websites, you can use the bookmarklet below. Click and drag this link: <a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://gridder.andreehansson.se/releases/latest/960.gridder.js';})();">960 Gridder</a> to your bookmark field in your browser.</p>
<!-- OVERRIDE -->
<h2 id="overriding" class="sprite-h2">Overriding</h2>
<p>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.</p>
<p><strong>Note!</strong> You can leave out any variables you wish to have default values.</p>
<code>
<span class="top sprite-code-top"></span>
<script type="text/javascript"><br />
var gOverride = {<br />
urlBase: 'http://gridder.andreehansson.se/releases/latest/',<br />
gColor: '#EEEEEE',<br />
gColumns: 12,<br />
gOpacity: 0.35,<br />
gWidth: 10,<br />
pColor: '#C0C0C0',<br />
pHeight: 15,<br />
pOffset: 0,<br />
pOpacity: 0.55,<br />
center: true,<br />
gEnabled: true,<br />
pEnabled: true,<br />
setupEnabled: true,<br />
fixFlash: true,<br />
size: 960<br />
};<br />
</script><br />
<span class="bottom sprite-code-bottom"></span>
</code>
<!-- IMPLEMENTATION -->
<h2 id="implementation" class="sprite-h2">Implementation</h2>
<p>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.</p>
<code>
<span class="top sprite-code-top"></span>
<head><br />
<script type="text/javascript"><br />
// Insert optional override object before the function<br /><br />
createGridder = function() {<br />
document.body.appendChild(<br />
document.createElement('script'))<br />
.src='http://path-to/960.gridder.js';<br />
}<br />
</script><br />
</head><br />
<body onload="createGridder()"><br />
<span class="bottom sprite-code-bottom"></span>
</code>
<p>A live example of this can be viewed <a title="Page: Example of implemented 960 Gridder" href="/implemented">here</a>, it is always running the latest version.</p>
<h2 id="other-stuff" class="sprite-h2">Other Stuff</h2>
<p>If you want to see other stuff I have been working on, check out my GitHub, <a href="http://github.com/peol">http://github.com/peol</a> , which includes a jQuery Text Selection special event plugin and a computed style (CSS) plugin.</p>
</div>
</div>
<div id="info" class="clearfix">
<!-- AUTHOR -->
<p>Authored by <a href="mailto:peolanha_at_gmail">Andrée Hansson</a>, this project is licensed under a MIT License, some rights reserved.<br />
Read more at <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a><br />
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-7798601-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>