Skip to content

Instantly share code, notes, and snippets.

@dieppon
Last active August 29, 2015 13:56
Show Gist options
  • Save dieppon/9256562 to your computer and use it in GitHub Desktop.
Save dieppon/9256562 to your computer and use it in GitHub Desktop.
Debug the vertical rhythm in your site by adding a grid overlay. It's been design to be use with compass and it uses Basehold.it(http://basehold.it/), the quick, painless, javascript-free baseline overlay.
@mixin vertical-grid($color:null, $alpha:null, $base-line-height:$base-line-height){
// Remove unit
$base-line-height: $base-line-height / ($base-line-height * 0 + 1);
//Extract chanels
$get-red: red($color);
$get-green: green($color);
$get-blue: blue($color);
@if $color == null {
@import url("http://basehold.it/#{$base-line-height}");
}
@if $alpha == null {
@import url("http://basehold.it/#{$base-line-height}/#{$get-red}/#{$get-green}/#{$get-blue}");
}
@else {
@import url("http://basehold.it/#{$base-line-height}/#{$get-red}/#{$get-green}/#{$get-blue}/#{$alpha}");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment