public
Last active

A method for creating a grid overlay on your site. Allows you to easily align design elements to your grid.

  • Download Gist
grid.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
/* ==========================================================================
Grid Overlay Styles
Author: Steve Hickey | http://stevehickeydesign.com
Company: Fresh Tilled Soil | http://freshtilledsoil.com
========================================================================== */
div#gridOverlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 940px;
margin: 0 auto;
background-size: 80px 24px;
background-image:
-webkit-linear-gradient(left, rgba(255, 0, 0, 0.25) 0, rgba(255, 0, 0, 0.25) 60px, transparent 60px),
-webkit-linear-gradient(top, transparent 23px, rgba(255, 0, 0, 0.5) 24px);
background-image:
-moz-linear-gradient(left, rgba(255, 0, 0, 0.25) 0, rgba(255, 0, 0, 0.25) 60px, transparent 60px),
-moz-linear-gradient(top, transparent 23px, rgba(255, 0, 0, 0.5) 24px);
background-image:
-ms-linear-gradient(left, rgba(255, 0, 0, 0.25) 0, rgba(255, 0, 0, 0.25) 60px, transparent 60px),
-ms-linear-gradient(top, transparent 23px, rgba(255, 0, 0, 0.5) 24px);
background-image:
-o-linear-gradient(left, rgba(255, 0, 0, 0.25) 0, rgba(255, 0, 0, 0.25) 60px, transparent 60px),
-o-linear-gradient(top, transparent 23px, rgba(255, 0, 0, 0.5) 24px);
background-image:
linear, left, rgba(255, 0, 0, 0.25) 0, rgba(255, 0, 0, 0.25) 60px, transparent 60px,
linear, top, transparent 23px, rgba(255, 0, 0, 0.5) 24px;
}
 
body {
position: relative;
height: auto;
min-height: 100%;
}
grid.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
/* ==========================================================================
Grid Overlay Styles
Author: Steve Hickey | http://stevehickeydesign.com
Company: Fresh Tilled Soil | http://freshtilledsoil.com
========================================================================== */
 
@mixin gridOverlay ($page: 940px, $column: 60px, $gutter: 20px, $baseline: 24px) {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: $page;
margin: 0 auto;
background-size: ($column + $gutter) $baseline;
background-image:
-webkit-linear-gradient(left, rgba(#f00, 0.25) 0, rgba(#f00, 0.25) $column, transparent $column),
-webkit-linear-gradient(top, transparent ($baseline - 1), rgba(#f00, 0.5) $baseline);
background-image:
-moz-linear-gradient(left, rgba(#f00, 0.25) 0, rgba(#f00, 0.25) $column, transparent $column),
-moz-linear-gradient(top, transparent ($baseline - 1), rgba(#f00, 0.5) $baseline);
background-image:
-ms-linear-gradient(left, rgba(#f00, 0.25) 0, rgba(#f00, 0.25) $column, transparent $column),
-ms-linear-gradient(top, transparent ($baseline - 1), rgba(#f00, 0.5) $baseline);
background-image:
-o-linear-gradient(left, rgba(#f00, 0.25) 0, rgba(#f00, 0.25) $column, transparent $column),
-o-linear-gradient(top, transparent ($baseline - 1), rgba(#f00, 0.5) $baseline);
background-image:
linear-gradient(left, rgba(#f00, 0.25) 0, rgba(#f00, 0.25) $column, transparent $column),
linear-gradient(top, transparent ($baseline - 1), rgba(#f00, 0.5) $baseline);
}
 
div#gridOverlay {
@include gridOverlay();
}
 
body { // necessary to fix scrolling problem
position: relative;
height: auto;
min-height:100%;
}
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="grid.css" />
</head>
<body>
 
<div id="gridOverlay"></div>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.