add a custom grid overlay button to your site unless it's in production

Grid Overlay.textile

grid.html.haml

%section.grid
  .site
    .gutter 25
    .column 166
    .gutter 25
    .column 166      
    .gutter 25
    .column 166
    .gutter 25
    .column 166      
    .gutter 25
    .column 166
    .gutter 25

  .modal
    .gutter 25
    .column 166      
    .gutter 25
    .column 166
    .gutter 25
    .column 166      
    .gutter 25
    .column 166
    .gutter 25  
 
%a.grid_toggle

/patterns/grid.js

$('a.grid_toggle').click(function(e){
  var site = $('section.grid .site');
  var modal = $('section.grid .modal');  
 
  if (site.css('display') == 'block') {
    site.hide();
    modal.show();
  } else if (modal.css('display') == 'block') {
    modal.hide()
  } else {
    site.show()
  }
  e.preventDefault();
})

base/_grid.sass

$gutter = 25px
$column = 166px
 
=column($num:1)
  width: (($column * $num) + ($gutter * ($num - 1)))
  margin-right: $gutter
  box-sizing: border-box
  box
=layout_width
  width: (($column * 5) + ($gutter * 6))
  box-sizing: border-

base/patterns/_utility.sass

// grid overlay --------------------------------------------------------------
// note: displays the grid, not for layout construction purposes
  
section.grid
  > div
    +hide
    position: fixed    
    width: 980px
    height: 100%
    left: 50%
    margin-left: -490px
    cursor: default
    z-index: 10000
    > div
      float: left
      height: 100%
      text-align: center
      font-size: 18px
      padding-top: 77px
      +opacity(.3)
      &.gutter
        width: 25px
        color: black
        background: yellow      
      &.column
        width: 166px
        color: white
        background: red            
    &.modal
      width: 789px
      margin-left: -395px

a.grid_toggle
  +block
  +absolute
  top: 10px
  left: 10px
  width: 60px
  height: 60px
  +border-radius(30px)    
  cursor: pointer
  background: none
  &:hover
    background: black

note: this displays two separate grids