Susy Grid Helper

divs.html

<div id='grid'><div id='baseline_grid'></div></div>

grid.js

(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);
  }
  
  
})();

grid.scss

@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; }

mixins.scss

$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()}"; 
      }
    }
  }
}