added grid overlay option

readme.md

@@ -29,6 +29,7 @@ $gutter:	 20px;	// gutter-width of your grid in pixels
 $columns:	 16;	// maximum number of columns needed for layout
 $fixed-grid: 8;		// number of columns to trigger fixed grid
 $ie-support: false; // number of columns for vintage ie
+$show-grid:  false; // shows a visual grid overlay
 ```
 
 Setting `$column` `$gutter` and `$columns` define your grid. Breakpoint uses
@@ -38,10 +39,18 @@ to trigger those element sizes.
 `$fixed-grid` sets the number of columns necessary to transform the grid from a fluid to
 a fixed layout.
 
+#### IE Support
+
 `$ie-support` set the number of columns that vintage IE should use as a layout. Since
 breakpoint generates most of your structure inside media queries vintage IE won't see
 it and thus serve the single column fluid layout. `$ie-support` will make sure that a
-single, fixed grid layout gets served to vintage IE without media queries.
+single, fixed grid layout gets served to vintage IE without media queries. You need to
+make sure that the column count you set for `$ie-support` matches another layout in your
+code.
+
+#### Grid Overlay
+
+Setting `$show-grid` to true will generate a visual overlay of your grid for testing.
 
 ## The Breakpoint Mixin
 

sass/_config.scss

@@ -2,8 +2,9 @@
 // normalize config (uncomment variables to activate reset sections)
 // ========================================
 
-// $normalize-html5: true;
-// $normalize-base: true;
+$normalize-html5: true;
+$normalize-base: true;
+
 // $normalize-links: true;
 // $normalize-typography: true;
 // $normalize-lists: true;

sass/_structure.scss

@@ -7,6 +7,7 @@ $gutter:	 20px;	// gutter-width of your grid in pixels
 $columns:	 16;	// maximum number of columns needed for layout
 $fixed-grid: 8;		// number of columns to trigger fixed grid
 $ie-support: false; // number of columns for vintage ie (must match a layout)
+$show-grid:  true; // shows a visual grid overlay
 
 @import 'framework/grid'; // import grid mixins after variables for overrides
 

sass/framework/_grid.scss

@@ -7,6 +7,7 @@ $gutter:     20px  !default; // gutter-width of your grid in pixels
 $columns:    16    !default; // maximum number of columns needed for layout
 $fixed-grid: 4     !default; // number of columns to trigger fixed grid
 $ie-support: false !default; // number of columns for vintage ie
+$show-grid:  false !default; // shows a visual grid overlay
 
 // =========================================================
 // utility functions
@@ -40,6 +41,16 @@ $ie-support: false !default; // number of columns for vintage ie
 			@media (min-width: (col($i) + (em($gutter) * 2))) {
 				@if ($width) { width: col($width); }
 				@if ($content) { @content }
+
+				// generate a visual grid overlay
+				@if ($show-grid) {
+					body::after {
+						content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
+						width: col($bp)+(em($gutter)*2); margin-left: (col($bp)+(em($gutter)*2))/2*-1;
+						@include background(linear-gradient(left, transparentize(red, .9) em($gutter),  transparentize(red, .8) em($gutter),  transparentize(red, .8) (em($gutter) + em($column))));
+						@include background-size((em($gutter) + em($column)));
+					}
+				}
 			}
 
 			// ie fallback