Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 342ef2cd16
Fetching contributors…

Cannot retrieve contributors at this time

346 lines (334 sloc) 7.811 kB
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<title>The Responsive Heads-Up Grid Example</title>
<link href="headsupgrid/hugrid.css" type="text/css" rel="stylesheet" />
<script src="headsupgrid/jquery-1.6.2.min.js"></script>
<script src="headsupgrid/hugrid.js"></script>
<script type="text/javascript">
var definegrid = function() {
var browserWidth = $(window).width();
if (browserWidth >= 1001)
{
var hugrid = new $.headsUpGrid({
pageUnits: 'px',
colUnits: 'px',
pageWidth: 960,
columns: 6,
columnWidth: 140,
gutterWidth: 24,
pageTopMargin: 35,
rowHeight: 20,
showGridOnload: false
});
}
if (browserWidth <= 1000)
{
var hugrid = new $.headsUpGrid({
pageUnits: '%',
colUnits: '%',
pageWidth: 94,
columns: 3,
columnWidth: 32,
gutterWidth: 2,
pageTopMargin: 35,
rowHeight: 20,
showGridOnload: false
});
}
if (browserWidth <= 768)
{
var hugrid = new $.headsUpGrid({
pageUnits: '%',
colUnits: '%',
pageWidth: 96,
columns: 2,
columnWidth: 49,
gutterWidth: 2,
pageTopMargin: 35,
rowHeight: 20,
showGridOnload: false
});
}
}
$(document).ready(function() {
definegrid();
});
$(window).resize(function() {
// TODO need to know whether grid is currently visible or not
definegrid();
});
</script>
</head>
<body>
<div class="page">
<h1>The Responsive Heads-Up Grid</h1>
<p id="subhead"><a href="http://bohemianalps.com/tools/grid/">The Heads-Up Grid</a> is an overlay grid for use during in-browser website development, built with HTML + CSS + JavaScript.</p>
<div class="cols cols3">
<div class="col">
<h2>I’m Droppin’ Science</h2>
<p>This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
</div>
<div class="col">
<h2>Like Galileo</h2>
<p>This is just some silly filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
</div>
<div class="col">
<h2>Dropped the Orange!</h2>
<p>This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
</div>
</div>
</div>
<p id="footer">This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:#666;
font-family: 'Inconsolata', sans-serif;
text-align:left;
color:#444;
}
h1 {
margin:0 0 .1em 0;
padding:0;
font-family:Arial,sans-serif;
font-weight:bold;
font-size:80px;
line-height:100%;
text-align:center;
text-transform:uppercase;
}
h2 {
margin:1em 0 .3em 0;
padding:0;
font-family:Arial,sans-serif;
font-weight:bold;
font-size:27px;
line-height:100%;
text-align:center;
}
p {
font-size:.9em;
line-height:1.3em;
margin:0 0 1.5em 0;
padding:0;
}
p#subhead {
margin-bottom:0;
text-align:center;
}
p#footer {
position:relative;
z-index:200000;
clear:both;
margin:1em 0;
font-size:.8em;
text-align:center;
color:#FFF;
}
pre {
overflow:auto;
margin:0 0 1em 0;
padding:20px;
background-color:#ECE9D0;
border-radius:8px;
font-family:'Andale Mono',monospace;
font-size:.7em;
line-height:1.2em;
color:#666;
}
pre i {
font-style:normal;
color:#514CD6;
}
pre b {
font-weight:normal;
color:#BE0009;
}
a:link,
a:visited {
border-width:0 0 1px 0;
border-style:dashed;
border-color:#3773B7;
text-decoration:none;
color:#3773B7;
}
a:hover {
border-style:solid;
}
a.button {
position:relative;
z-index:200000;
overflow:hidden;
display:block;
margin:4px;
padding:10px;
border-radius:8px;
border-width:0;
}
a.button:hover {
background-color:#ECE9D0;
box-shadow:1px 2px 8px #999;
}
a.button span {
display:block;
float:right;
width:175px;
padding-top:20px;
font-size:.9em;
}
a.button span strong {
font-size:1.4em;
}
#footer a:link,
#footer a:visited {
border-color:#FFF;
color:#FFF;
}
/* Page Structure */
div.page {
overflow:hidden;
width:960px;
margin:35px auto .5em auto;
padding:2em 2em 3em 2em;
background-color:#F7F4DB;
box-shadow:1px 2px 8px #222;
}
div.cols3 {
overflow:hidden;
}
div.col {
float:left;
margin:0;
}
div.cols3 div.col {
width:304px;
padding:0 0 0 24px;
}
div.cols2 div.col {
width:468px;
padding:0 0 0 24px;
}
div.cols div.col:first-child {
padding-left:0;
}
/* Media Query Adjustments */
@media screen and (min-width:1001px) {
div.page {
width:960px;
margin:35px auto .5em auto;
padding:2em 2em 3em 2em;
}
div.col {
float:left;
margin:0;
}
div.cols3 div.col {
width:304px;
padding:0 0 0 24px;
}
div.cols3 div.colspan2 {
width:632px;
}
div.cols3 div.colspanBox {
width:584px;
margin-left:24px;
padding-right:24px;
padding-bottom:20px;
border-radius:20px;
}
div.cols2 div.col {
width:468px;
padding:0 0 0 24px;
}
div.cols div.col:first-child {
padding-left:0;
}
}
@media screen and (max-width:1000px) {
div.page {
width:94%;
margin:35px auto .5em auto;
padding:2%;
}
div.col {
float:left;
margin:0;
}
div.cols3 div.col {
width:32%;
padding:0 0 0 2%;
}
div.cols3 div.colspan2 {
width:65.33333%;
}
div.cols3 div.colspanBox {
width:63.33333%;
margin-left:1%;
padding-right:1%;
padding-bottom:20px;
border-radius:20px;
}
div.cols2 div.col {
width:49%;
padding:0 0 0 2%;
}
div.cols div.col:first-child {
padding-left:0;
}
a.button span {
width:100%;
padding-top:0;
text-align:center;
}
a.button img {
display:block;
float:none;
margin:0 auto;
}
}
@media screen and (max-width:768px) {
h1 {
font-size:60px;
}
div.page {
width:96%;
margin:0 auto;
padding:2%;
}
div.col {
float:none;
margin:0;
}
div.cols3 div.col,
div.cols3 div.colspan2,
div.cols2 div.col {
width:100%;
padding:0;
}
div.cols3 div.colspanBox {
width:94%;
padding:2%;
margin:0 1%;
}
a.button {
width:200px;
margin:20px auto 0 auto;
}
a.button span {
width:100%;
padding-top:0;
text-align:center;
}
a.button img {
display:block;
float:none;
margin:0 auto;
}
}
</style>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.