Skip to content

Instantly share code, notes, and snippets.

@javasteve99

javasteve99/grid.css

Created June 28, 2012 18:45
Show Gist options
  • Save javasteve99/3013151 to your computer and use it in GitHub Desktop.
Save javasteve99/3013151 to your computer and use it in GitHub Desktop.
Download ZIP
A method for creating a grid overlay on your site. Allows you to easily align design elements to your grid.
Raw
grid.css
/* ==========================================================================
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%;
}
Raw
grid.scss
/* ==========================================================================
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%;
}
Raw
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="grid.css" />
</head>
<body>
<div id="gridOverlay"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment