sass/ezy/_grid.scss in ezy-0.3.2 vs sass/ezy/_grid.scss in ezy-0.3.3

@@ -11,10 +11,11 @@
 $gutter-width     : 20px      !default;
 $gutter-property  : "margin"  !default;
 $total-columns    : 12        !default;
 $is-fluid         : true      !default;
 $grid-padding     : 0         !default;
+$debug-selector   : "body"    !default;
 
 // ---------------------------------------------------------------------------
 // Variables used in grid context
 
 $grid-init        : false;
@@ -45,14 +46,14 @@
   }
 }
 
 // ---------------------------------------------------------------------------
 // @mixin master
-// 
+//
 // Sets width on page. If the grid is fluid, it's set as a max-width
 // Extends the grid master placeholder selector
-// $context : Number of columns in the current context. 
+// $context : Number of columns in the current context.
 
 @mixin master(
   $context        : $total-columns,
   $at-breakpoint  : $at-breakpoint
   ) {
@@ -75,11 +76,11 @@
     $grid-padding-right : nth( $grid-padding, 2 );
   }
 
   @if $grid-padding-left {  padding-left: $grid-padding-left; }
   @if $grid-padding-right { padding-right: $grid-padding-right; }
-  
+
   @if ( not $at-breakpoint ) {
     @extend %ezy-master;
   }
 }
 
@@ -91,11 +92,11 @@
   @extend %clearfix;
 }
 
 // ---------------------------------------------------------------------------
 // @mixin container
-// 
+//
 // Sets width on page. If the grid is fluid, it's set as a max-width
 // Extends the grid master placeholder selector
 // $context           :   Number of columns in the current context
 //                    :   Only mandatory if grid is fluid
 // $at-breakpoint     :   Set to true if mixin is called within a media query
@@ -117,10 +118,19 @@
     right: $pullout;
   }
   @if (not $at-breakpoint) {
     @extend %ezy-container;
   }
+  // Debug info about layouts
+  @if $debug {
+    @include debug-layout-styles;
+    @include debug-layout-info("CONTEXT :: columns: #{$total-columns} | column-width: #{$column-width} | gutter-width: #{$gutter-width} | at-breakpoint: #{$at-breakpoint}");
+    &:before {
+      @include span-columns( $total-columns );
+      width: auto;
+    }
+  }
 }
 
 // ---------------------------------------------------------------------------
 // @mixin column-base
 // Common styles for grid columns
@@ -137,13 +147,13 @@
   }
 }
 
 // ---------------------------------------------------------------------------
 // @mixin grid-init
-// 
+//
 // Prints out placeholder selectors used with columns. Helps reduce the CSS output.
-// 
+//
 // Should be called after setting grid variables:
 // ----------------
 // $column-width
 // $gutter-width
 // $gutter-property
@@ -176,11 +186,11 @@
 
 }
 
 // ---------------------------------------------------------------------------
 // @mixin span-columns
-// 
+//
 // Sets width and gutter on columns
 // Uses @extend for gutters outside media queries if grid-init() has been called
 // $columns           :   Number of columns to span
 // $context           :   Number of columns in the current context
 //                    :   Only mandatory if grid is fluid
@@ -209,17 +219,17 @@
   // Inserting debug text
   @if $debug {
     @include debug-info( $columns, $context );
   }
 
-  // Setting base column styles when a column can't 
+  // Setting base column styles when a column can't
   // have extended the base columns placeholder selector
   @if ( not $grid-init ) {
     @include column-base;
   }
 
-  // Some crazy logic to set gutter or 
+  // Some crazy logic to set gutter or
   // extend column placeholder selectors
 
   @if $grid-init and ( not $at-breakpoint )  {
     // Those are the conditions for using @extend
     @if $context {
@@ -228,27 +238,27 @@
         @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
 
       } @else {
         @extend %ezy-column-#{ $grid-init-index }-#{ $context };
       }
-      
+
     } @else {
       @extend %ezy-column-#{ $grid-init-index };
     }
 
   }
   @if ( $gutter-property and $gutter-property != $init-gutter-property )
-      or ( not $grid-init ) 
+      or ( not $grid-init )
       or $at-breakpoint {
 
     @if $is-fluid and $context {
       @include gutters( $context, $gutter-property );
 
     } @else if $is-fluid and ( not $context ) {
       @warn $context-warn;
     } @else {
       @include gutters( $gutter-property: $gutter-property );
-    } 
+    }
 
   }
 }