Skip to content

@javasteve99 /grid.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A method for creating a grid overlay on your site. Allows you to easily align design elements to your grid.
/* ==========================================================================
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 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%;
}
<!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
Something went wrong with that request. Please try again.