Skip to content

Instantly share code, notes, and snippets.

@nimbupani

nimbupani/generategrid.scss

Created January 3, 2011 03:34
Show Gist options
  • Save nimbupani/763090 to your computer and use it in GitHub Desktop.
Save nimbupani/763090 to your computer and use it in GitHub Desktop.
Download ZIP
Generate a grid with CSS gradients
Raw
generategrid.scss
@import "compass";
@mixin generategrid(
$vertical: 18px,
$verticalcolor: rgb(0, 0, 0),
$horizontal: 30px,
$horizontalmargin: 10px,
$horizontalcolor: rgb(0, 43, 255)) {
@include linear-gradient(color-stops($verticalcolor 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%));
background-size: 100% $vertical;
background-position: fixed;
height: 100%;
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 100%;
background-position: fixed;
$totalwidth: $horizontal + $horizontalmargin;
background-size: ($totalwidth) 100%;
@include linear-gradient(color-stops(rgba(lighten($verticalcolor, 50%), 0.7) round(percentage($horizontal/$totalwidth)),
rgba(0, 0, 0, 0) round(percentage($horizontal/$totalwidth)),
rgba(0, 0, 0, 0) 100%), left);
}
}
/* Include Grid Mixin */
body {
@include generategrid(18px, rgb(0, 0, 0));
}
/* Test vertical rhythm */
html, body { margin: 0; padding: 0; }
body {font: 12px/18px sans-serif; margin: 0 auto; width: 60%; }
h1 { font-size: 2em; line-height: 1.5; margin-top: 1.5em; }
h2 { font-size: 1.5em; line-height: 2; margin-top: 1em; }
Raw
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test Generation of CSS Gradient Grid</title>
<meta name="description" content="">
<meta name="author" content="Divya Manian">
<link rel="stylesheet" href="stylesheets/styles.css?v=2">
</head>
<body>
<div id="container" class="container">
<h1>Vertical Rhythms with gradients!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci lacus, pellentesque at accumsan ut, convallis nec velit. Aenean elit felis, convallis sit amet iaculis in, porttitor id justo. Aenean ornare quam eget nisi facilisis fringilla congue velit euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque aliquet lacinia elit et vulputate. Sed velit augue, ultrices nec sodales sit amet, sodales eu lectus. Nunc ornare mollis pretium.</p>
<h2>Second Title</h2>
<p> Phasellus tempor tortor vel mauris elementum faucibus sollicitudin augue tempor. Cras quam leo, scelerisque vitae dictum eget, dictum in ipsum. Aliquam ut neque est, sit amet ultricies ante. Morbi eleifend ullamcorper lorem, eget euismod tellus cursus in. Proin tristique facilisis urna, nec ultricies est lacinia ut. Morbi eu diam et urna semper consequat. Cras consequat commodo nunc in tempus. Mauris urna arcu, cursus nec eleifend at, lacinia sed sem. Sed consequat tortor sed neque semper et suscipit sapien interdum. In hac habitasse platea dictumst.</p>
</div> <!-- end of #container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment