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

data/templates/unit-tests/test-results/zen-grid-container.css

@@ -40,7 +40,7 @@
 }
 
 #test-zen-grid-container-4 {
-  /* Test zen-grid-container() with $context = 'grid-item' */
+  /* Test zen-grid-container() with $context: grid-item */
   padding-left: 0;
   padding-right: 0;
 }
@@ -53,7 +53,7 @@
 }
 
 #test-zen-grid-container-5 {
-  /* Test zen-grid-container() with $context = 'flow' */
+  /* Test zen-grid-container() with $context: flow */
   margin-left: -10px;
   margin-right: -10px;
   padding-left: 0;
@@ -66,3 +66,14 @@
 #test-zen-grid-container-5:after {
   clear: both;
 }
+
+#test-zen-grid-container-6 {
+  /* Test zen-grid-container() with $zen-gutter-method: margin */
+}
+#test-zen-grid-container-6:before, #test-zen-grid-container-6:after {
+  content: "";
+  display: table;
+}
+#test-zen-grid-container-6:after {
+  clear: both;
+}

data/templates/unit-tests/test-results/zen-grid-flow-item.css

@@ -3,7 +3,7 @@
  * Test zen-grid-flow-item()
  */
 #test-zen-grid-flow-item {
-  /* Test zen-grid-flow-item(1) without setting $column-count */
+  /* Test zen-grid-flow-item(1) without setting $parent-column-span */
   padding-left: 10px;
   padding-right: 10px;
   -moz-box-sizing: border-box;
@@ -72,7 +72,7 @@
   width: 180px;
   padding-left: 0;
   padding-right: 0;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-direction: right */
   padding-left: 8px;
   padding-right: 7px;
   -moz-box-sizing: border-box;
@@ -134,7 +134,7 @@
   padding-left: 0;
   padding-right: 5px;
   margin-right: -5px;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-direction: right and $alpha-gutter: true */
   padding-left: 8px;
   padding-right: 7px;
   -moz-box-sizing: border-box;
@@ -148,15 +148,15 @@
   padding-left: 11.25px;
   margin-left: 3.75px;
   /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
-  padding-left: 5%;
-  padding-right: 5%;
+  padding-left: 7.14286%;
+  padding-right: 7.14286%;
   border-left: 0 !important;
   border-right: 0 !important;
   word-wrap: break-word;
-  width: 15%;
+  width: 10.71429%;
   padding-left: 0;
-  padding-right: 7.5%;
-  margin-right: 2.5%;
+  padding-right: 10.71429%;
+  margin-right: 3.57143%;
   /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */
   width: 25%;
   padding-left: 0;

data/templates/unit-tests/test-results/zen-grid-item-base.css

@@ -46,7 +46,7 @@
   _display: inline;
   _overflow: hidden;
   _overflow-y: visible;
-  /* Test zen-grid-item-base() with $zen-gutter-width: 15px */
+  /* Test zen-grid-item-base() with $zen-gutters: 15px */
   padding-left: 7px;
   padding-right: 8px;
   -moz-box-sizing: border-box;
@@ -54,7 +54,7 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
-  /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-float-direction: right */
+  /* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-direction: right */
   padding-left: 8px;
   padding-right: 7px;
   -moz-box-sizing: border-box;
@@ -62,7 +62,7 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
-  /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-reverse-all-floats: true */
+  /* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-switch-direction: true */
   padding-left: 8px;
   padding-right: 7px;
   -moz-box-sizing: border-box;
@@ -70,4 +70,10 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  /* Test zen-grid-item-base() with $zen-gutter-method: margin */
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  word-wrap: break-word;
 }

data/templates/unit-tests/test-results/zen-grid-item.css

@@ -25,7 +25,7 @@
   border-left: 0 !important;
   border-right: 0 !important;
   word-wrap: break-word;
-  /* Turn off $zen-auto-include-item-base */
+  /* Turn off $zen-auto-include-grid-item-base */
   /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
   float: left;
   width: 60%;
@@ -36,12 +36,12 @@
   width: 60%;
   margin-right: 40%;
   margin-left: -100%;
-  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-switch-direction */
   float: right;
   width: 60%;
   margin-right: 40%;
   margin-left: -100%;
-  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-switch-direction */
   float: left;
   width: 60%;
   margin-left: 40%;
@@ -56,4 +56,14 @@
   width: 600px;
   margin-left: 400px;
   margin-right: -100%;
+  /* Test zen-grid-item(3, 3) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
+  float: left;
+  width: 58%;
+  margin-left: 42%;
+  margin-right: -100%;
+  /* Test zen-grid-item(3, 2.5) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
+  float: left;
+  width: 58%;
+  margin-left: 29%;
+  margin-right: -100%;
 }

data/templates/unit-tests/test-results/zen-new-row.css

@@ -0,0 +1,16 @@
+/**
+ * @file
+ * Test zen-new-row()
+ */
+#test-zen-new-row {
+  /* Test zen-new-row() */
+  clear: left;
+  /* Test zen-new-row() with $zen-direction: right */
+  clear: right;
+  /* Test zen-new-row(left) */
+  clear: left;
+  /* Test zen-new-row(left, $switch-direction: TRUE) */
+  clear: right;
+  /* Test zen-new-row(left) with: $zen-switch-direction: TRUE; */
+  clear: right;
+}

data/zen-grids.gemspec

@@ -9,8 +9,9 @@ Gem::Specification.new do |s|
   s.homepage    = 'http://zengrids.com'
   s.rubyforge_project =
 
-  s.version     = '2.0.0.alpha.2'
-  s.date        = '2013-02-25'
+  s.version     = '2.0.0.beta.1'
+  s.date        = '2013-07-22'
+  s.licenses    = ['GPL-2']
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'
@@ -18,7 +19,7 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency('sass', ">= 3.2")
 
   s.files       = %w[
-    component.json
+    bower.json
     LICENSE.txt
     README.txt
     lib/zen-grids.rb
@@ -35,22 +36,22 @@ Gem::Specification.new do |s|
     templates/project/styles.scss
     templates/unit-tests/manifest.rb
     templates/unit-tests/README.txt
-    templates/unit-tests/sass/function-zen-direction-flip.scss
+    templates/unit-tests/sass/function-zen-direction-switch.scss
     templates/unit-tests/sass/function-zen-grid-item-width.scss
     templates/unit-tests/sass/function-zen-half-gutter.scss
     templates/unit-tests/sass/function-zen-unit-width.scss
-    templates/unit-tests/sass/zen-clear.scss
+    templates/unit-tests/sass/zen-new-row.scss
     templates/unit-tests/sass/zen-float.scss
     templates/unit-tests/sass/zen-grid-background.scss
     templates/unit-tests/sass/zen-grid-container.scss
     templates/unit-tests/sass/zen-grid-flow-item.scss
     templates/unit-tests/sass/zen-grid-item-base.scss
     templates/unit-tests/sass/zen-grid-item.scss
-    templates/unit-tests/test-results/function-zen-direction-flip.css
+    templates/unit-tests/test-results/function-zen-direction-switch.css
     templates/unit-tests/test-results/function-zen-grid-item-width.css
     templates/unit-tests/test-results/function-zen-half-gutter.css
     templates/unit-tests/test-results/function-zen-unit-width.css
-    templates/unit-tests/test-results/zen-clear.css
+    templates/unit-tests/test-results/zen-new-row.css
     templates/unit-tests/test-results/zen-float.css
     templates/unit-tests/test-results/zen-grid-background.css
     templates/unit-tests/test-results/zen-grid-container.css

data/zen-grids/_background.scss

@@ -1,7 +1,11 @@
+//
+// "Background grid image" module for the Zen Grids system.
+//
+
+
 @import "grids";
 @import "compass/css3/images";
 
-
 // Specify the color of the background grid.
 $zen-grid-color           : #ffdede             !default;
 
@@ -69,54 +73,53 @@ $zen-grid-number-images   : ()                  !default;
 
 
 //
-// Add a grid to an element's background.
+// Add a background grid image to an element's background.
 // @see http://zengrids.com/help/#zen-grid-background
 //
 @mixin zen-grid-background(
-  $column-count         : $zen-column-count,
-  $gutter-width         : $zen-gutter-width,
+  $columns              : $zen-columns,
+  $gutters              : $zen-gutters,
+  $gutter-method        : $zen-gutter-method,
   $grid-width           : $zen-grid-width,
   $grid-color           : $zen-grid-color,
   $grid-numbers         : $zen-grid-numbers,
-  $reverse-all-floats   : $zen-reverse-all-floats
+  $direction            : $zen-direction,
+  $switch-direction     : $zen-switch-direction
 ) {
 
-  // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
-  // stops, so we can't express the columns as 20% + 10px. Instead we are going
-  // to divide all our columns in half and into 2 groups: one group for the left
-  // halves of the columns and one group for the right halves. Then we'll use
-  // background position to shift the left halves over to the right by a half
-  // gutter width and shift the right halves over to the left by a half gutter
-  // width and just let the two sets of gradients overlap in the middle. Easy.
-
   $bg-images            : ();
+  $gradient             : ();
   $left-half-gradient   : ();
   $right-half-gradient  : ();
 
   // Calculate half of the unit width.
-  $half-unit-width      : zen-unit-width(2 * $column-count, $grid-width);
+  $unit-width           : zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
+  $half-unit-width      : $unit-width / 2;
 
   // Determine the float direction.
-  $dir                  : left;
-  @if $reverse-all-floats {
-    $dir                : zen-direction-flip($dir);
+  $dir                  : $direction;
+  @if $switch-direction {
+    $dir                : zen-direction-switch($dir);
   }
 
-  @for $count from 1 through $column-count {
+  @for $count from 1 through $columns {
     // First add the grid numbers to the background images list.
     $position: (2 * $count - 1) * $half-unit-width;
-    $reverse-count: $column-count + 1 - $count;
+    @if $gutter-method == margin {
+      $position: $position + ($count - 1) * $gutters;
+    }
+    $reverse-count: $columns + 1 - $count;
 
     @if $dir == left {
       @if $grid-numbers == both or $grid-numbers == top {
         $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
       }
-      @if $grid-numbers == both {
+      @if $grid-numbers == both or $grid-numbers == bottom {
         $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
       }
     }
     @else {
-      @if $grid-numbers == both {
+      @if $grid-numbers == both or $grid-numbers == bottom {
         $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
       }
       @if $grid-numbers == both or $grid-numbers == top {
@@ -124,31 +127,72 @@ $zen-grid-number-images   : ()                  !default;
       }
     }
 
-    // Next, build the color stops for the left halves of the column gradients.
-    @if $count > 1 {
-      $stop: (2 * $count - 2) * $half-unit-width;
-      $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
-      $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
+    // Next, build the color stops for the column gradients.
+    @if $gutter-method == margin {
+      // If the gutter method is "margin", calculating the color stops is easy.
+      @if $count < $columns {
+        $stop: $count * $unit-width + ($count - 1) * $gutters;
+        $gradient: append($gradient, $grid-color $stop, comma);
+        $gradient: append($gradient, transparent $stop, comma);
+
+        $stop: $stop + $gutters;
+        $gradient: append($gradient, transparent $stop, comma);
+        $gradient: append($gradient, $grid-color $stop, comma);
+      }
     }
+    @else if comparable($gutters, $grid-width) {
+      // If the gutter and grid width have the same units, calculating the color
+      // stops is easy.
+      $stop: ($count - 1) * $unit-width + zen-half-gutter($gutters);
+      $gradient: append($gradient, transparent $stop, comma);
+      $gradient: append($gradient, $grid-color $stop, comma);
+
+      $stop: $count * $unit-width - zen-half-gutter($gutters);
+      $gradient: append($gradient, $grid-color $stop, comma);
+      $gradient: append($gradient, transparent $stop, comma);
+    }
+    @else {
+      // If the gutter and grid width have different units, things are tricky.
+      // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
+      // stops, so we can't express the columns as 20% + 10px. Instead we are
+      // going to divide all our columns in half and into 2 groups: one group
+      // for the left halves of the columns and one group for the right halves.
+      // Then we'll use background position to shift the left halves over to the
+      // right by a half gutter width and shift the right halves over to the
+      // left by a half gutter width and just let the two sets of gradients
+      // overlap in the middle. Easy.
+
+      // Build the color stops for the left halves of the column gradients.
+      @if $count > 1 {
+        $stop: (2 * $count - 2) * $half-unit-width;
+        $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
+        $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
+      }
 
-    $stop: (2 * $count - 1) * $half-unit-width;
-    $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
-    $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
-
-    // Next, build the color stops for the right halves of the column gradients.
-    $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
-    $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+      $stop: (2 * $count - 1) * $half-unit-width;
+      $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
+      $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
 
-    @if $count < $column-count {
-      $stop: (2 * $count) * $half-unit-width;
-      $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+      // Build the color stops for the right halves of the column gradients.
       $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
+      $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+
+      @if $count < $columns {
+        $stop: (2 * $count) * $half-unit-width;
+        $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
+        $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
+      }
     }
   }
 
-  // Last, add the gradient halves to the background images list.
-  $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutter-width) top no-repeat, comma);
-  $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutter-width))) top no-repeat, comma);
+  // Last, add the gradient (or gradient halves) to the background images list.
+  @if $gutter-method == margin or comparable($gutters, $grid-width) {
+    $bg-images  : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
+  }
+  @else {
+    $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
+    $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
+  }
 
   // Apply the full list of background images.
   @include background($bg-images);

data/zen-grids/_flow.scss

@@ -1,10 +1,11 @@
-@import "grids";
-
 //
-// Mixins for the Zen Grids system.
+// "Flow" module for the Zen Grids system.
 //
 
-// @see http://zengrids.com/help/#zen-auto-include-item-base
+
+@import "grids";
+
+// @see http://zengrids.com/help/#zen-auto-include-grid-item-base
 $zen-auto-include-flow-item-base  : true        !default;
 
 
@@ -14,57 +15,88 @@ $zen-auto-include-flow-item-base  : true        !default;
 //
 @mixin zen-grid-flow-item(
   $column-span,
-  $parent-column-count          : false,
+  $parent-column-span           : false,
   $alpha-gutter                 : false,
   $omega-gutter                 : true,
-  $flow-direction               : $zen-float-direction,
-  $column-count                 : $zen-column-count,
-  $gutter-width                 : $zen-gutter-width,
+  $direction                    : $zen-direction,
+  $columns                      : $zen-columns,
+  $gutters                      : $zen-gutters,
+  $gutter-method                : $zen-gutter-method,
   $grid-width                   : $zen-grid-width,
   $box-sizing                   : $zen-box-sizing,
-  $reverse-all-flows            : $zen-reverse-all-floats,
+  $switch-direction             : $zen-switch-direction,
   $auto-include-flow-item-base  : $zen-auto-include-flow-item-base
 ) {
 
-  $columns: $column-count;
+  // Save the columns and gutters from the parent context.
+  $main-columns: $columns;
+  $main-gutters: $gutters;
+  $main-grid-width: $grid-width;
+
+  // Find the parent context for fluid layouts.
   @if unit($grid-width) == "%" {
-    @if $parent-column-count == false {
-      @warn "For responsive layouts with a percentage-based grid width, you must set the $parent-column-count to the number of columns that the parent element spans.";
+    // The number of columns the parent element spans is our new column count.
+    @if $parent-column-span != false {
+      $columns: $parent-column-span;
     }
     @else {
-      $columns: $parent-column-count;
+      // If we don't know the number of columns the parent element spans, then
+      // warn the user and force the flow item to span 100% of the parent.
+      @warn "For responsive layouts with a percentage-based grid width, you must set the $parent-column-span to the number of columns that the parent element spans.";
+      $column-span: $columns;
     }
+    // We want our inner grid to span the entire width of the parent.
+    $grid-width: 100%;
+  }
+
+  // Determine the flow direction and its reverse.
+  $dir: $direction;
+  @if $switch-direction {
+    $dir: zen-direction-switch($dir);
   }
+  $rev: zen-direction-switch($dir);
 
-  $dir: $flow-direction;
-  @if $reverse-all-flows {
-    $dir: zen-direction-flip($dir);
+  // Calculate the new gutters when the layout and gutters are both fluid.
+  @if unit($grid-width) == "%" and unit($gutters) == "%" {
+    // Calculate the parent's width.
+    $parent-width: zen-grid-item-width($parent-column-span, $main-columns, $main-gutters, $gutter-method, $main-grid-width, $box-sizing);
+    // Calculate the new gutters.
+    $gutters: $main-gutters * ($grid-width / $parent-width);
   }
-  $rev: zen-direction-flip($dir);
 
   // Auto-apply the unit base mixin.
   @if $auto-include-flow-item-base {
-    @include zen-grid-item-base($gutter-width, $box-sizing);
+    @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
   }
 
   // Calculate the item's width.
-  $width: zen-grid-item-width($column-span, $columns, $gutter-width, $grid-width, $box-sizing);
+  $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 {
+    $width: $width - $gutters;
+  }
+  width: $width;
 
-  @if unit($grid-width) == "%" {
-    // Our percentage $width is off if the parent has $gutter-width padding.
+  @if $gutter-method == margin {
+    @if $alpha-gutter {
+      margin-#{$dir}: $gutters;
+    }
+    @if $omega-gutter {
+      margin-#{$rev}: $gutters;
+    }
+  }
+  @else if unit($grid-width) == "%" {
+    // Our percentage $width is off since the parent has $main-gutters padding.
     // Calculate an adjusted gutter to fix the width.
-    $adjusted-gutter: ($columns - $column-span) * $gutter-width / $columns;
-
-    width: $width;
+    $adjusted-gutter: ($columns - $column-span) * $gutters / $columns;
 
     // Ensure the HTML item either has a full gutter or no gutter on each side.
     padding-#{$dir}: 0;
     @if $alpha-gutter {
-      margin-#{$dir}: $gutter-width;
+      margin-#{$dir}: $gutters;
     }
     padding-#{$rev}: $adjusted-gutter;
     @if $omega-gutter {
-      margin-#{$rev}: $gutter-width - $adjusted-gutter;
+      margin-#{$rev}: $gutters - $adjusted-gutter;
     }
     @else {
       margin-#{$rev}: -($adjusted-gutter);
@@ -72,33 +104,28 @@ $zen-auto-include-flow-item-base  : true        !default;
   }
   @else {
     @if $alpha-gutter and $omega-gutter {
-      width: $width;
-      @if $gutter-width != 0 {
+      @if $gutters != 0 {
         margin: {
-          #{$dir}: zen-half-gutter($gutter-width, left, $dir);
-          #{$rev}: zen-half-gutter($gutter-width, right, $dir);
+          #{$dir}: zen-half-gutter($gutters, left, $dir);
+          #{$rev}: zen-half-gutter($gutters, right, $dir);
         }
       }
     }
     @else if not $alpha-gutter and not $omega-gutter {
-      width: if($box-sizing == border-box, ($width - $gutter-width), $width);
-      @if $gutter-width != 0 {
+      @if $gutters != 0 {
         padding: {
           left: 0;
           right: 0;
         }
       }
     }
+    @else if $omega-gutter {
+      padding-#{$dir}: 0;
+      padding-#{$rev}: $gutters;
+    }
     @else {
-      width: $width;
-      @if $omega-gutter {
-        padding-#{$dir}: 0;
-        padding-#{$rev}: $gutter-width;
-      }
-      @else {
-        padding-#{$dir}: $gutter-width;
-        padding-#{$rev}: 0;
-      }
+      padding-#{$dir}: $gutters;
+      padding-#{$rev}: 0;
     }
   }
 }
@@ -108,13 +135,13 @@ $zen-auto-include-flow-item-base  : true        !default;
 // @see http://zengrids.com/help/#zen-float
 //
 @mixin zen-float(
-  $float-direction      : $zen-float-direction,
-  $reverse-all-floats   : $zen-reverse-all-floats
+  $direction          : $zen-direction,
+  $switch-direction   : $zen-switch-direction
 ) {
   // Determine the float direction.
-  $dir: $float-direction;
-  @if $reverse-all-floats {
-    $dir: zen-direction-flip($dir);
+  $dir: $direction;
+  @if $switch-direction {
+    $dir: zen-direction-switch($dir);
   }
   float: $dir;
 }