Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tag: v1
Fetching contributors…

Cannot retrieve contributors at this time

294 lines (252 sloc) 8.027 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: 20px;
}
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;
}
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;
}
pre{
margin: 0;
padding: 0;
}
code{
font-size: 14px;
line-height: 20px;
}
pre code{
font-family: 'Courier New', monospace;
display: block;
margin: 0 0 20px;
padding: 20px 20px 20px 15px;
border: 0;
color: Black;
background: Gainsboro;
border-left: 5px solid DarkGray;
}
.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;
}
/**
* 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 .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</h1>
<p class="summary"><em>Mon, 21 Dec 2009<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 fix it in place, and toggle between displaying it in the foreground or background. To see it in action, hit <span class="key">ALT</span> + <span class="key">G</span>.</p>
<h2>Download</h2>
<p id="download"><a href="http://github.com/dotjay/hashgrid/archives/master">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 (this version assumes a 980px wide container including 20px gutters)</li>
<li>Adaptable for any vertical rhythm value (this version assumes one lead of 20px)</li>
<li>Show and hide, fix in place, or toggle foreground and background display using keyboard shortcuts</li>
<li>Uses: A single JavaScript file, a few lines of CSS, and one image (for the vertical lines)</li>
</ul>
<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>
<pre><code>&#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;
</code></pre></li>
<li><h3>Add the CSS to your page(s)</h3>
<pre><code>
/**
* 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;
}
/**
* 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 .horiz{
/* 20px line height */
height: 19px;
border-bottom: 1px dotted #aaa;
margin: 0;
padding: 0;
}
</code></pre></li>
<li><h3>Modify the CSS to suit your needs</h3>
<p>It&#8217;s annotated to help you. We&#8217;ve included a <a href="bg-grid-980.gif">980-pixel-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>Note: The document must have keyboard focus for #grid to work, so click on the document background or <span class="key">tab</span> into the page.</p>
<dl>
<dt><span class="key">ALT</span> + <span class="key">G</span></dt>
<dd>Overlay the grid until you release.</dd>
<dt><span class="key">ALT</span> + <span class="key">G</span> + <span class="key">ENTER</span></dt>
<dd>Make the grid sticky (<span class="key">ALT</span> + <span class="key">G</span> will remove it again).</dd>
<dt><span class="key">ALT</span> + <span class="key">B</span></dt>
<dd>Toggle the grid to the front/back.</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="known-issues">Known Issues</h2>
<ul>
<li>IE 8: Fully functional, but <span class="key">ALT</span> + <span class="key">G</span> + <span class="key">ENTER</span> will put IE into full screen mode. Hit <span class="key">ALT</span> + <span class="key">ENTER</span> to toggle full screen mode off again.</li>
<li>IE 6: The grid is always in the foreground.</li>
<li>Opera 9/10: Currently not working due to different key handling.</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.