960 Gridder Implemented Demo

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>960 Gridder Implemented Demo</title>

<style type="text/css">
  * { line-height: 16px; margin: 0; padding: 0; }

  code {
    background-color: #EEE;
    color: #777;
    display: block;
    margin: 0 auto;
    padding: 16px;
    width: 748px;
  }
  
  html { color: #777; }
   
  p { margin: 0 0 16px 0; }

  a { color: #0000FF; }

  #container { margin: 33px auto; width: 960px; }

  #live {
    background-color: #C0C0C0;
    color: #000;
    margin: 0 auto;
    padding: 16px;
    width: 908px;
  }
</style>

<script type="text/javascript">
  window.gOverride = {
    gColor: '#FF0000',
    pColor: '#0000FF',
    gOpacity: 0.30,
    pOpacity: 0.40,
    pHeight: 16,
    pOffset: 2
  }
  
  createGridder = function() {
    document.body.appendChild(
      document.createElement('script'))
        .src='/releases/latest/960.gridder.js';
  }
</script>

</head>

<body onload="createGridder()">

<div id="container">

<p>960 pixel width of layout</p>

<div id="live">

<p>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.</p>
<p>Turn off the grid by pressing <strong>CTRL + ALT + C</strong></p>
<p style="text-align: center;"><a href="javascript:window.grid.setVariable('invert', !window.grid.settings.invert);">Click here to toggle invertion of the grid</a>, or press <strong>CTRL + ALT + A</strong></p>

</div>

</div>

</body>
</html>