Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tag: v4
Fetching contributors…

Cannot retrieve contributors at this time

376 lines (319 sloc) 10.614 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#grid</title>
<style type="text/css">
/* Putting inline rules here so the document can be downloaded with style */
body{
font-size: 1em;
line-height: 1.25;
font-family: Arial, sans-serif;
background: White;
color: DimGray;
margin: 0;
padding: 0 20px;
}
#content{
font-size: 16px;
line-height: 20px;
position: relative;
}
#content{
width: 620px;
margin: 0 auto;
}
#footer{
border-top: 1px dotted DarkGray;
padding-top: 19px;
}
h1, h2{
color: Black;
font-weight: normal;
}
h1{
font-size: 36px;
line-height: 40px;
margin: 40px 0 20px;
padding-bottom: 19px;
border-bottom: 1px dotted DarkGray;
}
h1 em{
font-style: normal;
color: DarkGray;
font-size: 16px;
line-height: 20px;
margin: 0 0 20px;
}
h2, h3{
font-size: 16px;
font-weight: 700;
line-height: 20px;
margin: 0 0 20px;
}
h3{
font-weight: 300;
}
a:link,
a:visited{
color: Black;
text-decoration: none;
padding: 0 2px;
background-color: WhiteSmoke;
border-bottom: 1px solid Gold;
}
a:focus{
outline: none;
}
a:focus,
a:hover,
a:active{
background-color: Khaki;
border-bottom: 1px solid GoldenRod;
}
p, ul{
padding: 0;
margin: 0 0 20px;
}
dl, ol{
padding: 0;
margin: 0;
}
ul{
list-style: circle;
}
ol li{
margin-bottom: 20px;
}
dd{
margin: 0 0 20px 0;
}
del{
text-decoration: line-through;
opacity: 0.75;
}
ins{
text-decoration: none;
}
code{
font-size: 14px;
line-height: 1;
}
textarea{
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 20px;
display: block;
width: 600px;
margin: 0 0 20px;
padding: 0 0 0 15px;
border: 0;
color: Black;
background: Gainsboro;
border-left: 5px solid DarkGray;
}
#javascript-code{
height: 180px;
}
#css-code{
height: 1300px;
}
.summary em{
font-style: normal;
position: absolute;
color: DarkGray;
right: 0;
top: 18px;
width: 140px;
}
.summary em span{
position: absolute;
left: -9999px;
}
#download{
line-height: 60px;
padding: 0 40px 0 15px;
border-left: 5px solid DarkGray;
background: Gainsboro;
color: DimGray;
}
span.key{
color: Black;
text-transform: uppercase;
}
</style>
<!-- Set styles -->
<style type="text/css">
/**
* Grid
*/
#grid{
/* Vertical grid lines */
background: url(bg-grid-980.gif) repeat-y 0 0;
/* Dimensions - same width as your grid with gutters */
width: 980px;
/* Grid (left-aligned)
position: absolute;
top: 0;
left: 0;
*/
/* Grid (centered) */
position: absolute;
top: 0;
left: 50%;
margin-left: -490px;
}
/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids
* option in the hashgrid.js file.
*/
#grid.grid-1{
/* Vertical grid lines for grid 1 */
background: url(bg-grid-980.gif) repeat-y 0 0;
}
#grid.grid-2{
/* Vertical grid lines for grid 2 */
background: url(bg-grid-660.gif) repeat-y 160px 0;
/* Adjustments */
padding: 0 160px;
width: 660px;
}
/**
* Horizontal grid lines, defined by your base line height
*
* Remember, the CSS properties that define the box model:
* visible height = height + borders + margins + padding
*/
#grid div.horiz{
/* 20px line height */
height: 19px;
border-bottom: 1px dotted #aaa;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="content" role="main">
<h1>#grid <em>v4</em></h1>
<p class="summary"><em>Mon, 29 Mar 2010<span>:</span></em> This is a little tool we created for our <a href="http://analog.coop/">Analog&#160;holding&#160;page</a>. It inserts a <a href="http://en.wikipedia.org/wiki/Grid_(page_layout)">layout grid</a> in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background. To see it in action, hit <span class="key">G</span> on your keyboard.</p>
<h2>Download</h2>
<p id="download"><a href="http://github.com/dotjay/hashgrid/downloads">Download #grid</a> from <a href="http://github.com/dotjay/hashgrid">GitHub</a></p>
<h2 id="features">Features</h2>
<ul>
<li>Adaptable for all layout widths and alignments</li>
<li>Adaptable for any vertical rhythm value</li>
<li>Set keyboard shortcuts to show and hide the grid, hold it in place, toggle it to the foreground and background, and jump between multiple grids</li>
<li>Uses a single JavaScript file, a little CSS, and an image (for the vertical lines)</li>
</ul>
<p>#grid comes set up with a 980px-wide container that includes 20px gutters, and assumes one lead of 20px. A second 660px-wide container is included to show you how to set up multiple grids.</p>
<h2 id="installation">Installation</h2>
<ol>
<li><h3>Copy the <a href="http://github.com/dotjay/hashgrid/blob/master/hashgrid.js">hashgrid.js</a> script to your project</h3></li>
<li><h3>Add the script to your page(s) just inside the <code>&#60;/body&#62;</code> tag</h3>
<textarea id="javascript-code" cols="68" rows="8" readonly="readonly">
&#60;!-- Grab latest version of jQuery --&#62;
&#60;script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&#62;
&#60;/script&#62;
&#60;!-- Include the hashgrid script --&#62;
&#60;script type="text/javascript" src="hashgrid.js"&#62;&#60;/script&#62;</textarea></li>
<li><h3>Add the CSS to your page(s)</h3>
<textarea id="css-code" cols="68" rows="64" readonly="readonly">
/**
* Grid
*/
#grid{
/* Vertical grid lines */
background: url(bg-grid-980.gif) repeat-y 0 0;
/* Dimensions - same width as your grid with gutters */
width: 980px;
/* Grid (left-aligned)
position: absolute;
top: 0;
left: 0;
*/
/* Grid (centered) */
position: absolute;
top: 0;
left: 50%;
margin-left: -490px;
}
/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids
* option in the hashgrid.js file.
*/
#grid.grid-1{
/* Vertical grid lines for grid 1 */
background: url(bg-grid-980.gif) repeat-y 0 0;
}
#grid.grid-2{
/* Vertical grid lines for grid 2 */
background: url(bg-grid-660.gif) repeat-y 160px 0;
/* Adjustments */
padding: 0 160px;
width: 660px;
}
/**
* Horizontal grid lines, defined by your base line height
*
* Remember, the CSS properties that define the box model:
* visible height = height + borders + margins + padding
*/
#grid div.horiz{
/* 20px line height */
height: 19px;
border-bottom: 1px dotted #aaa;
margin: 0;
padding: 0;
}
</textarea></li>
<li><h3>Modify #grid to suit your needs</h3>
<p>The CSS and JavaScript is annotated to help you. We&#8217;ve included a <a href="bg-grid-980.gif">980px-wide background image</a> to provide the vertical grid lines (a 940-pixel-wide content area with 20px gutters). If you&#8217;re working to a <a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1">different grid</a>, you will need to create a new image for your guides. Don&#8217;t forget to make the background transparent!</p></li>
</ol>
<h2 id="usage">Usage</h2>
<p>The document must have keyboard focus for #grid to work. You may need to click on the document background or <span class="key">TAB</span> into the page first.</p>
<dl>
<dt><span class="key">G</span></dt>
<dd>Show the grid until you release.</dd>
<dt><span class="key">G</span> + <span class="key">H</span></dt>
<dd>Show and hold the grid (<span class="key">G</span> will remove it again).</dd>
<dt><span class="key">G</span> + <span class="key">F</span></dt>
<dd>Toggle the grid to the foreground and back. Pressing <span class="key">F</span> while the grid is held also works.</dd>
<dt><span class="key">G</span> + <span class="key">J</span></dt>
<dd>Jump to the next grid. Pressing <span class="key">J</span> while the grid is held also works.</dd>
</dl>
<p><em>N.B. A cookie conveniently remembers the state of the grid when you refresh the page. While the grid is in front, you will not be able to interact with the page.</em></p>
<h2 id="release-notes">Release Notes</h2>
<dl>
<dt>v4&#8201;&#8212;&#8201;29 Mar 2010</dt>
<dd>Fixes for multiple grid support under WebKit (Safari and Chrome).</dd>
<dt>v3&#8201;&#8212;&#8201;22 Feb 2010</dt>
<dd>Multiple grids can be set up and cycled through at a key press. To avoid keyboard shortcut conflicts, the default keys have been changed (see <a href="#usage">Usage</a>). Using <span class="key">CTRL</span>, <span class="key">ALT</span> or <span class="key">SHIFT</span> as a modifier key is now optional. Keys no longer show or affect the grid while typing in forms.</dd>
<dt>v2&#8201;&#8212;&#8201;2 Feb 2010</dt>
<dd>Keys are now more easily configured (see top of hashgrid.js). Renamed the GridOverlay object to hashgrid. Fixed crash when using with disabled CSS.</dd>
<dt>v1&#8201;&#8212;&#8201;21 Dec 2009</dt>
<dd>First release.</dd>
</dl>
<h2 id="known-issues">Known Issues</h2>
<ul>
<li><del>IE 8: Fully functional, but the default <span class="key">ALT</span> + <span class="key">G</span> + <span class="key">ENTER</span> shortcut puts IE into full screen mode. Hit <span class="key">ALT</span> + <span class="key">ENTER</span> to toggle full screen mode off again.</del><ins datetime="2010-02-22"> The default keyboard shortcuts have been changed.</ins></li>
<li>IE 6: The grid is always in the foreground.</li>
<li>Opera 9/10: Using <span class="key">CTRL</span> or <span class="key">ALT</span> as a modifier key will not work due to different key handling by the browser.</li>
</ul>
<h2 id="license">License</h2>
<p>Released under a <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike License</a>, which essentially means that you&#8217;re free to copy it and adapt it. <a href="http://analog.coop/#talk-to-us">Contact us at Analog</a> if you need a different license.</p>
<div id="footer" role="contentinfo">
<p>#grid is an <a href="http://analog.coop/">Analog</a> gig. It was conceived by <a href="http://jontangerine.com/">Jon Tan</a>, and built by <a href="http://accessibility.co.uk/">Jon Gibbins</a>, in cahoots with our <a href="http://analog.coop#is">fine friends</a>. Oh, and the CSS for this page playfully uses <a href="http://www.w3.org/TR/css3-color/#svg-color">SVG colour keywords</a> only.</p>
</div>
</div>
<!-- Grab latest version of jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- Include the hashgrid script -->
<script type="text/javascript" src="hashgrid.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.