Skip to content

Instantly share code, notes, and snippets.

@brentkirby
Last active December 15, 2015 14:09
Show Gist options
  • Save brentkirby/5272522 to your computer and use it in GitHub Desktop.
Save brentkirby/5272522 to your computer and use it in GitHub Desktop.
Susy Grid Helper
<div id='grid'><div id='baseline_grid'></div></div>
(function(){
var grid = $('#grid'),
bgrid = $('#baseline_grid');
$(document).on('keydown', showgrid);
$(function(){
if( readCookie('showgrid') != null ){
grid.show();
if( readCookie('baselinegrid') != null )
bgrid.show();
}
});
function showgrid(event){
if( event.target.tagName.toLowerCase() != 'body' ) return true;
if( event.which != 71 && event.which != 66 ) return true;
switch(event.which){
case 71:
if( grid.is(":hidden") ){
grid.show();
createCookie('showgrid', true, 1);
}else{
grid.hide();
eraseCookie("showgrid");
}
break;
case 66:
if( bgrid.is(":hidden") ){
bgrid.show();
createCookie('baselinegrid', true, 1);
}else{
bgrid.hide();
eraseCookie("baselinegrid");
}
break;
}
}
function createCookie(name, value, days) {
var date,
expires = "";
if (days) {
date = new Date();
date.setTime( date.getTime() + (days*24*60*60*1000) );
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var c, ca = document.cookie.split(';'),
i = 0, len = ca.length,
nameEQ = name + "=";
for (; i < len; i++) {
c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
})();
@import 'susy';
@import './shared/config';
$grid-background-column-color:rgba(black, 0.075);
$grid-background-baseline-color: rgba(black, 0.2);
@import 'compass/layout/grid-background';
$grid-background-baseline-color: #efefef !default;
$grid-align: ($line-height / $font-size) * 1em;
@mixin debug-baseline{
@include baseline-grid-background($grid-align);
}
@import 'mixins';
@include debug-susy-grid($breakpoints);
#baseline_grid{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; @include debug-baseline; }
$grid-background-column-color:rgba(black, 0.075) !default;
@mixin debug-susy-grid($points){
#grid{ position:absolute; top:0px; right:$grid-padding; left:$grid-padding; bottom:0px; display:none;
@include susy-grid-background; z-index:10000;
@for $i from 1 to length($points){
@include at-breakpoint(nth($points, $i)){
@include susy-grid-background;
}
}
}
#grid:after{ position:fixed; top:0px; left:0px; z-index:10000; background:rgba(white, 0.5); display:block; padding:.25em 1em; font-size:11px;
@for $i from 1 to length($points){
@include at-breakpoint(nth($points, $i)){
content:"#{$total-columns} | #{container-outer-width()} | #{columns-width()}";
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment