-
-
Save mirisuzanne/783336 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import compass | |
| @import base | |
| =susygrid | |
| $gutter-color: rgba(0,0,0,0) | |
| $column-color: rgba(0,0,0,.25) | |
| $start: side-gutter() | |
| $grid: compact() | |
| $grid: append($grid, $gutter-color $start, comma) | |
| $c: $total-cols | |
| $i: 0 | |
| @while $i < $c | |
| $a: side-gutter() | |
| @if $i > 0 | |
| $a: $a + columns($i) + gutter() | |
| $g: $a + columns(1) | |
| $z: $g + gutter() | |
| $grid: join($grid, ($column-color $a, $gutter-color $g, $gutter-color $z)) | |
| $i: $i + 1 | |
| $grid: append($grid, $gutter-color 100%) | |
| +background-image(linear-gradient(top, rgba(0,0,0,.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%), linear-gradient(left, $grid)) | |
| +background-size("100% #{$base-rhythm-unit}, auto") | |
| background-position: left top, left top | |
| // test it | |
| body > div | |
| +susygrid |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <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> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
linear-gradient() will not parse a string as multiple color-stops, so this doesn't work yet. Is it possible to build a dynamic gradient with an arbitrary number of color stops? Still looking...