zen-grids 2.0.0.beta.1 → 2.0.0.beta.2

data/zen-grids/_flow.scss

@@ -3,29 +3,26 @@
 //
 
 
-@import "grids";
-
-// @see http://zengrids.com/help/#zen-auto-include-grid-item-base
-$zen-auto-include-flow-item-base  : true        !default;
+@import "zen-grids/grids";
 
 
 //
 // Apply this to an HTML item that is in the normal flow of a document to help
-// align it to the grid. @see http://zengrids.com/help/#zen-float
+// align it to the grid. @see http://next.zengrids.com/reference/flow/#zen-float
 //
-@mixin zen-grid-flow-item(
+@mixin zen-flow-item-width(
   $column-span,
-  $parent-column-span           : false,
-  $alpha-gutter                 : false,
-  $omega-gutter                 : true,
-  $direction                    : $zen-direction,
-  $columns                      : $zen-columns,
-  $gutters                      : $zen-gutters,
-  $gutter-method                : $zen-gutter-method,
-  $grid-width                   : $zen-grid-width,
-  $box-sizing                   : $zen-box-sizing,
-  $switch-direction             : $zen-switch-direction,
-  $auto-include-flow-item-base  : $zen-auto-include-flow-item-base
+  $parent-column-span   : false,
+  $alpha-gutter         : false,
+  $omega-gutter         : true,
+  $direction            : $zen-direction,
+  $columns              : $zen-columns,
+  $gutters              : $zen-gutters,
+  $gutter-method        : $zen-gutter-method,
+  $grid-width           : $zen-grid-width,
+  $box-sizing           : $zen-box-sizing,
+  $switch-direction     : $zen-switch-direction,
+  $include-base         : $zen-auto-include-flow-item-base
 ) {
 
   // Save the columns and gutters from the parent context.
@@ -64,14 +61,14 @@ $zen-auto-include-flow-item-base  : true        !default;
     $gutters: $main-gutters * ($grid-width / $parent-width);
   }
 
-  // Auto-apply the unit base mixin.
-  @if $auto-include-flow-item-base {
-    @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
+  // Include the flow item base mixin.
+  @if $include-base {
+    @include zen-flow-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
   }
 
   // Calculate the item's width.
   $width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
-  @if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and $box-sizing == border-box {
+  @if $gutter-method == padding and unit($grid-width) != "%" and not $alpha-gutter and not $omega-gutter and ($box-sizing == border-box or $box-sizing == universal-border-box) {
     $width: $width - $gutters;
   }
   width: $width;
@@ -130,9 +127,29 @@ $zen-auto-include-flow-item-base  : true        !default;
   }
 }
 
+//
+// Applies a standard set of properites to all flow items.
+// @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
+//
+@mixin zen-flow-item-base(
+  $gutters                  : $zen-gutters,
+  $gutter-method            : $zen-gutter-method,
+  $box-sizing               : $zen-box-sizing,
+  $direction                : $zen-direction,
+  $switch-direction         : $zen-switch-direction
+) {
+
+  // Since we have to set padding in zen-flow-item-width(), supress extraneous
+  // padding declarations in the base by setting $gutter-method to none.
+  @if $gutter-method == padding {
+    $gutter-method: none;
+  }
+  @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
+}
+
 //
 // Apply this to flow items that need to be floated.
-// @see http://zengrids.com/help/#zen-float
+// @see http://next.zengrids.com/reference/flow/#zen-float
 //
 @mixin zen-float(
   $direction          : $zen-direction,

data/zen-grids/_functions.scss

@@ -0,0 +1,119 @@
+//
+// Helper functions for the Zen Grids system.
+//
+
+
+@import "zen-grids/variables";
+
+
+//
+// Returns a half gutter width. @see http://next.zengrids.com/reference/functions/#zen-half-gutter
+//
+@function zen-half-gutter(
+  $gutters          : $zen-gutters,
+  $gutter-side      : $zen-direction,
+  $direction        : $zen-direction
+) {
+  $half-gutter: $gutters / 2;
+  // Special handling in case gutter has an odd number of pixels.
+  @if unit($gutters) == "px" {
+    @if $gutter-side == $direction {
+      @return floor($half-gutter);
+    }
+    @else {
+      @return ceil($half-gutter);
+    }
+  }
+  @return $half-gutter;
+}
+
+//
+// Warns if the gutter and grid width units are not comparable.
+//
+@function zen-compare-units(
+  $feature,
+  $gutters        : $zen-gutters,
+  $grid-width     : $zen-grid-width
+) {
+  @if not comparable($gutters, $grid-width) {
+    $units-gutter: unit($gutters);
+    $units-grid: unit($grid-width);
+    @warn "The layout cannot be calculated correctly; when using #{$feature}, the units of the gutter (#{$units-gutter} must match the units of the grid width (#{$units-grid}).";
+    @return false;
+  }
+  @return true;
+}
+
+//
+// Calculates the unit width of a column. @see http://next.zengrids.com/reference/functions/#zen-unit-width
+//
+@function zen-unit-width(
+  $columns        : $zen-columns,
+  $gutters        : $zen-gutters,
+  $gutter-method  : $zen-gutter-method,
+  $grid-width     : $zen-grid-width
+) {
+  $unit-width: 0;
+  @if $gutter-method == margin {
+    $test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
+    $unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
+  }
+  @else {
+    $unit-width: $grid-width / $columns;
+  }
+  @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
+    @if $gutter-method == margin {
+      $num_gutters: $columns - 1;
+      @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns with #{$num_gutters} of #{$gutters} gutters.";
+    }
+    @else {
+      @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
+    }
+  }
+  @return $unit-width;
+}
+
+//
+// Calculates the width of a grid item that spans the specified number of columns.
+// @see http://next.zengrids.com/reference/functions/#zen-grid-item-width
+//
+@function zen-grid-item-width(
+  $column-span,
+  $columns        : $zen-columns,
+  $gutters        : $zen-gutters,
+  $gutter-method  : $zen-gutter-method,
+  $grid-width     : $zen-grid-width,
+  $box-sizing     : $zen-box-sizing
+) {
+  $width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
+
+  // Add the margin gutters internal to the spanning grid item.
+  @if $gutter-method == margin {
+    $width: $width + (floor($column-span) - 1) * $gutters;
+  }
+  // For the original box model, remove the padding from the width.
+  @elseif $box-sizing == content-box {
+    $test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
+    $width: $width - $gutters;
+  }
+  @return $width;
+}
+
+//
+// Returns the opposite direction, given "left" or "right".
+// @see http://next.zengrids.com/reference/functions/#zen-direction-switch
+//
+@function zen-direction-switch(
+  $dir
+) {
+  @if $dir == left {
+    @return right;
+  }
+  @else if $dir == right {
+    @return left;
+  }
+  @else if $dir != none and $dir != both {
+    @warn "Invalid direction passed to zen-direction-switch().";
+  }
+  @return $dir;
+}

data/zen-grids/_grids.scss

@@ -3,51 +3,39 @@
 //
 
 
-// Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-columns
-$zen-columns                      : 1           !default;
-
-// Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutters
-$zen-gutters                      : 20px        !default;
-
-// Specify the gutter method. Can be padding or margin.
-$zen-gutter-method                : padding     !default;
-
-// @see http://zengrids.com/help/#zen-auto-include-grid-item-base
-$zen-auto-include-grid-item-base  : true        !default;
-
-// Specify the width of the entire grid. @see http://zengrids.com/help/#zen-grid-width
-$zen-grid-width                   : 100%        !default;
-
-// The box-sizing polyfill for IE6/7 requires an absolute path. @see http://zengrids.com/help/#box-sizing-polyfill-path
-$box-sizing-polyfill-path         : ""          !default;
-
-// Specify the CSS3 box-sizing method. @see http://zengrids.com/help/#zen-box-sizing
-$zen-box-sizing                   : border-box  !default;
-
-// @see http://zengrids.com/help/#legacy-support-for-ie7
-$legacy-support-for-ie7           : false       !default;
-$legacy-support-for-ie6           : false       !default;
-
-// Specify the default floating direction for zen's mixins. @see http://zengrids.com/help/#zen-direction
-$zen-direction                    : left        !default;
-
-// Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-switch-direction
-$zen-switch-direction             : false       !default;
+@import "zen-grids/variables"; // Import the global variables needed by all of Zen Grids.
+@import "zen-grids/functions"; // Import the helper functions.
+@import "zen-grids/internal/functions-compass-polyfill";
 
 
 //
 // Apply this to create a grid container element.
-// @see http://zengrids.com/help/#zen-grid-container
+// @see http://next.zengrids.com/reference/grids/#zen-grid-container
 //
 @mixin zen-grid-container(
-  $context          : none,
-  $gutters          : $zen-gutters,
-  $gutter-method    : $zen-gutter-method,
-  $direction        : $zen-direction
+  $context            : none,
+  $gutters            : $zen-gutters,
+  $gutter-method      : $zen-gutter-method,
+  $direction          : $zen-direction,
+  $switch-direction   : $zen-switch-direction
 ) {
 
+  $dir: $direction;
+  @if $switch-direction {
+    $dir: zen-direction-switch($dir);
+  }
+
+  @if $context == flow-item {
+    @warn "zen-grid-container()'s $context cannot be set to: flow-item. It has been set to: flow.";
+    $context: flow;
+  }
+  @else if $context == grid {
+    @warn "zen-grid-container()'s $context cannot be set to: grid. It has been set to: grid-item.";
+    $context: grid-item;
+  }
+
   // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
-  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+  @if zen-support-for(ie, "7") {
     *position: relative;
   }
 
@@ -60,15 +48,15 @@ $zen-switch-direction             : false       !default;
   &:after {
     clear: both;
   }
-  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+  @if zen-support-for(ie, "7") {
     *zoom: 1;
   }
 
   // Un-do the gutter padding of the parent grid item.
   @if $context == flow and $gutter-method == padding {
     margin: {
-      left: -(zen-half-gutter($gutters, left, $direction));
-      right: -(zen-half-gutter($gutters, right, $direction));
+      left: -(zen-half-gutter($gutters, left, $dir));
+      right: -(zen-half-gutter($gutters, right, $dir));
     }
   }
 
@@ -82,19 +70,19 @@ $zen-switch-direction             : false       !default;
 }
 
 //
-// Apply this to each grid item. @see http://zengrids.com/help/#zen-grid-item
+// Apply this to each grid item. @see http://next.zengrids.com/reference/grids/#zen-grid-item
 //
 @mixin zen-grid-item(
   $column-span,
   $column-position,
-  $direction                    : $zen-direction,
-  $columns                      : $zen-columns,
-  $gutters                      : $zen-gutters,
-  $gutter-method                : $zen-gutter-method,
-  $grid-width                   : $zen-grid-width,
-  $box-sizing                   : $zen-box-sizing,
-  $switch-direction             : $zen-switch-direction,
-  $auto-include-grid-item-base  : $zen-auto-include-grid-item-base
+  $direction          : $zen-direction,
+  $columns            : $zen-columns,
+  $gutters            : $zen-gutters,
+  $gutter-method      : $zen-gutter-method,
+  $grid-width         : $zen-grid-width,
+  $box-sizing         : $zen-box-sizing,
+  $switch-direction   : $zen-switch-direction,
+  $include-base       : $zen-auto-include-grid-item-base
 ) {
 
   // Calculate the unit width.
@@ -122,39 +110,38 @@ $zen-switch-direction             : false       !default;
     #{$dir}: $margin;
     #{$rev}: -100%;
   }
-  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+  @if zen-support-for(ie, "7") {
     *margin-#{$rev}: -99.9%;
   }
 
-  // Auto-apply the unit base mixin.
-  @if $auto-include-grid-item-base {
+  // Include the grid item base mixin.
+  @if $include-base {
     @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
   }
+  // If the $gutters parameter has been used, set the gutters even if
+  // $include-base is false.
+  @else if $gutters != $zen-gutters and $gutter-method == padding {
+    @include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
+  }
 }
 
 //
 // Applies a standard set of properites to all grid items in the layout.
-// @see http://zengrids.com/help/#zen-grid-item-base
+// @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
 //
 @mixin zen-grid-item-base(
-  $gutters            : $zen-gutters,
-  $gutter-method      : $zen-gutter-method,
-  $box-sizing         : $zen-box-sizing,
-  $direction          : $zen-direction,
-  $switch-direction   : $zen-switch-direction
+  $gutters                  : $zen-gutters,
+  $gutter-method            : $zen-gutter-method,
+  $box-sizing               : $zen-box-sizing,
+  $direction                : $zen-direction,
+  $switch-direction         : $zen-switch-direction
 ) {
 
-  $dir: $direction;
-  @if $switch-direction {
-    $dir: zen-direction-switch($dir);
-  }
-
+  // Specify the padding if the gutter method uses padding.
   @if $gutter-method == padding {
-    padding: {
-      left: zen-half-gutter($gutters, left, $dir);
-      right: zen-half-gutter($gutters, right, $dir);
-    }
+    @include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
   }
+
   // Specify the border-box properties.
   @if $box-sizing == border-box {
     -moz-box-sizing: border-box;
@@ -163,7 +150,7 @@ $zen-switch-direction             : false       !default;
     box-sizing: border-box;
   }
   // Prevent left/right borders since they'll break the layout with content-box.
-  @if $box-sizing == content-box {
+  @elseif $box-sizing == content-box {
     border: {
       left: 0 !important;
       right: 0 !important;
@@ -175,17 +162,15 @@ $zen-switch-direction             : false       !default;
       }
     }
   }
-  // Prevent overflowing content from being hidden beneath other grid items.
-  word-wrap: break-word;
 
-  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+  @if zen-support-for(ie, "7") {
     @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
       @warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.";
     }
     @if $box-sizing-polyfill-path != "" {
       *behavior: url($box-sizing-polyfill-path);
     }
-    @if $legacy-support-for-ie6 {
+    @if zen-support-for(ie, "6") {
       // Display inline or double your floated margin!
       // @see http://www.positioniseverything.net/explorer/doubled-margin.html
       _display: inline;
@@ -195,12 +180,14 @@ $zen-switch-direction             : false       !default;
       // @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
       _overflow-y: visible;
     }
+    // Prevent overflowing content from being hidden beneath other grid items.
+    *word-wrap: break-word;
   }
 }
 
 //
 // Apply this to a grid item so that it starts a new row.
-// @see http://zengrids.com/help/#zen-new-row
+// @see http://next.zengrids.com/reference/grids/#zen-new-row
 //
 @mixin zen-new-row(
   $clear              : $zen-direction,
@@ -213,110 +200,23 @@ $zen-switch-direction             : false       !default;
   clear: $clear;
 }
 
-
 //
-// Helper functions for the Zen mixins.
+// Applies the gutter to a grid item when using the padding gutter method.
+// @see http://next.zengrids.com/reference/grids/#zen-apply-gutter-padding
 //
-
-// Returns a half gutter width. @see http://zengrids.com/help/#zen-half-gutter
-@function zen-half-gutter(
-  $gutters          : $zen-gutters,
-  $gutter-side      : $zen-direction,
-  $direction        : $zen-direction
-) {
-  $half-gutter: $gutters / 2;
-  // Special handling in case gutter has an odd number of pixels.
-  @if unit($gutters) == "px" {
-    @if $gutter-side == $direction {
-      @return floor($half-gutter);
-    }
-    @else {
-      @return ceil($half-gutter);
-    }
-  }
-  @return $half-gutter;
-}
-
-// Warns if the gutter and grid width units are not comparable.
-@function zen-compare-units(
-  $feature,
-  $gutters        : $zen-gutters,
-  $grid-width     : $zen-grid-width
-) {
-  @if not comparable($gutters, $grid-width) {
-    $units-gutter: unit($gutters);
-    $units-grid: unit($grid-width);
-    @warn "The layout cannot be calculated correctly; when using #{$feature}, the units of the gutter (#{$units-gutter} must match the units of the grid width (#{$units-grid}).";
-    @return false;
-  }
-  @return true;
-}
-
-// Calculates the unit width of a column. @see http://zengrids.com/help/#zen-unit-width
-@function zen-unit-width(
-  $columns        : $zen-columns,
-  $gutters        : $zen-gutters,
-  $gutter-method  : $zen-gutter-method,
-  $grid-width     : $zen-grid-width
-) {
-  $unit-width: 0;
-  @if $gutter-method == margin {
-    $test: zen-compare-units('gutter-method: margin', $gutters, $grid-width);
-    $unit-width: ($grid-width - ($columns - 1) * $gutters) / $columns;
-  }
-  @else {
-    $unit-width: $grid-width / $columns;
-  }
-  @if unit($unit-width) == "px" and floor($unit-width) != ceil($unit-width) {
-    @if $gutter-method == margin {
-      $num_gutters: $columns - 1;
-      @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns with #{$num_gutters} of #{$gutters} gutters.";
-    }
-    @else {
-      @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$columns} columns.";
-    }
-  }
-  @return $unit-width;
-}
-
-// Calculates the width of a grid item that spans the specified number of columns.
-// @see http://zengrids.com/help/#zen-grid-item-width
-@function zen-grid-item-width(
-  $column-span,
-  $columns        : $zen-columns,
-  $gutters        : $zen-gutters,
-  $gutter-method  : $zen-gutter-method,
-  $grid-width     : $zen-grid-width,
-  $box-sizing     : $zen-box-sizing
+@mixin zen-apply-gutter-padding(
+  $gutters            : $zen-gutters,
+  $direction          : $zen-direction,
+  $switch-direction   : $zen-switch-direction
 ) {
-  $width: $column-span * zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
 
-  // Add the margin gutters internal to the spanning grid item.
-  @if $gutter-method == margin {
-    $width: $width + (floor($column-span) - 1) * $gutters;
-  }
-  // For the original box model, remove the padding from the width.
-  @elseif $box-sizing == content-box {
-    $test: zen-compare-units('box-sizing: content-box', $gutters, $grid-width);
-    $width: $width - $gutters;
+  $dir: $direction;
+  @if $switch-direction {
+    $dir: zen-direction-switch($dir);
   }
-  @return $width;
-}
 
-// Returns the opposite direction, given "left" or "right".
-// @see http://zengrids.com/help/#zen-direction-switch
-@function zen-direction-switch(
-  $dir
-) {
-  @if $dir == left {
-    @return right;
-  }
-  @else if $dir == right {
-    @return left;
-  }
-  @else if $dir == none or $dir == both {
-    @return $dir;
+  padding: {
+    left: zen-half-gutter($gutters, left, $dir);
+    right: zen-half-gutter($gutters, right, $dir);
   }
-  @warn "Invalid direction passed to zen-direction-switch().";
-  @return both;
 }