Fix bug "Flow items are mis-aligned to grid". Fixes #18

stylesheets/zen/_grids.scss

@@ -263,20 +263,6 @@ $zen-reverse-all-floats: false !default;
   }
   $rev: zen-direction-flip($dir);
 
-  // Ensure the HTML item either has a full gutter or no gutter on each side.
-  @if $alpha-gutter {
-    margin-#{$dir}: zen-half-gutter($gutter-width, $rev);
-  }
-  @else {
-    margin-#{$dir}: -(zen-half-gutter($gutter-width, $dir));
-  }
-  @if $omega-gutter {
-    margin-#{$rev}: zen-half-gutter($gutter-width, $dir);
-  }
-  @else {
-    margin-#{$rev}: -(zen-half-gutter($gutter-width, $rev));
-  }
-
   // Calculate the item's width.
   $width: zen-grid-item-width($column-span, $columns, $grid-width);
   @if $box-sizing == content-box {
@@ -293,6 +279,20 @@ $zen-reverse-all-floats: false !default;
   @if $auto-include-flow-item-base {
     @include zen-grid-item-base($gutter-width, $box-sizing);
   }
+
+  // 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;
+  }
+  $offset: ($columns - $column-span) * $gutter-width / $columns;
+  padding-#{$rev}: $offset;
+  @if $omega-gutter {
+    margin-#{$rev}: $gutter-width - $offset;
+  }
+  @else {
+    margin-#{$rev}: -($offset);
+  }
 }
 
 

templates/unit-tests/sass/zen-grid-flow-item.scss

@@ -34,6 +34,12 @@
   @include zen-grid-flow-item(1, 4, $omega-gutter: false);
   $zen-gutter-width: 20px;
 
+  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */
+  @include zen-grid-flow-item(3, 4, $alpha-gutter: true);
+
+  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */
+  @include zen-grid-flow-item(3, 4, $omega-gutter: false);
+
   /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */
   $zen-gutter-width: 15px;
   $zen-float-direction: right;
@@ -52,67 +58,3 @@
   $zen-auto-include-flow-item-base: false;
   @include zen-grid-flow-item(1, 4);
 }
-
-
-@mixin zen-grid-flow-item (
-  $column-span,
-  $parent-column-count: false,
-  $alpha-gutter: false,
-  $omega-gutter: true,
-  $flow-direction: $zen-float-direction,
-  $column-count: $zen-column-count,
-  $gutter-width: $zen-gutter-width,
-  $grid-width: $zen-grid-width,
-  $box-sizing: $zen-box-sizing,
-  $reverse-all-flows: $zen-reverse-all-floats,
-  $auto-include-flow-item-base: $zen-auto-include-flow-item-base
-) {
-
-  $columns: $column-count;
-  @if unit($grid-width) == "%" {
-    @if $parent-column-count == false {
-      @warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
-    }
-    @else {
-      $columns: $parent-column-count;
-    }
-  }
-
-  $dir: $flow-direction;
-  @if $reverse-all-flows {
-    $dir: zen-direction-flip($dir);
-  }
-  $rev: zen-direction-flip($dir);
-
-  // Ensure the HTML item either has a full gutter or no gutter on each side.
-  @if $alpha-gutter {
-    margin-#{$dir}: zen-half-gutter($gutter-width, $rev);
-  }
-  @else {
-    margin-#{$dir}: -(zen-half-gutter($gutter-width, $dir));
-  }
-  @if $omega-gutter {
-    margin-#{$rev}: zen-half-gutter($gutter-width, $dir);
-  }
-  @else {
-    margin-#{$rev}: -(zen-half-gutter($gutter-width, $rev));
-  }
-
-  // Calculate the unit width.
-  $unit-width: $grid-width / $columns;
-  $width: $column-span * $unit-width;
-  @if $box-sizing == content-box {
-    @if not comparable($width, $gutter-width) {
-      $units-gutter: unit($gutter-width);
-      $units-grid: unit($grid-width);
-      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
-    }
-    $width: $width - $gutter-width;
-  }
-  width: $width;
-
-  // Auto-apply the unit base mixin.
-  @if $auto-include-flow-item-base {
-    @include zen-grid-item-base($gutter-width, $box-sizing);
-  }
-}

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

@@ -5,8 +5,6 @@
 /* line 8, ../sass/zen-grid-flow-item.scss */
 #test-zen-grid-flow-item {
   /* Test zen-grid-flow-item(1) without setting $column-count */
-  margin-left: -10px;
-  margin-right: 10px;
   width: 100%;
   padding-left: 10px;
   padding-right: 10px;
@@ -15,9 +13,10 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-left: 0;
+  padding-right: 0px;
+  margin-right: 20px;
   /* Test zen-grid-flow-item(1, 4) with 12 column grid and 20px gutter */
-  margin-left: -10px;
-  margin-right: 10px;
   width: 25%;
   padding-left: 10px;
   padding-right: 10px;
@@ -26,9 +25,10 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-left: 0;
+  padding-right: 15px;
+  margin-right: 5px;
   /* Test zen-grid-flow-item(1, 4) with 15px gutter */
-  margin-left: -7px;
-  margin-right: 7px;
   width: 25%;
   padding-left: 7px;
   padding-right: 8px;
@@ -37,9 +37,10 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-left: 0;
+  padding-right: 11.25px;
+  margin-right: 3.75px;
   /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */
-  margin-right: -7px;
-  margin-left: 7px;
   width: 25%;
   padding-left: 8px;
   padding-right: 7px;
@@ -48,9 +49,10 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-right: 0;
+  padding-left: 11.25px;
+  margin-left: 3.75px;
   /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */
-  margin-left: 8px;
-  margin-right: 7px;
   width: 25%;
   padding-left: 7px;
   padding-right: 8px;
@@ -59,9 +61,11 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-left: 0;
+  margin-left: 15px;
+  padding-right: 11.25px;
+  margin-right: 3.75px;
   /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */
-  margin-left: -7px;
-  margin-right: -8px;
   width: 25%;
   padding-left: 7px;
   padding-right: 8px;
@@ -70,9 +74,35 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-left: 0;
+  padding-right: 11.25px;
+  margin-right: -11.25px;
+  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */
+  width: 75%;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  padding-left: 0;
+  margin-left: 20px;
+  padding-right: 5px;
+  margin-right: 15px;
+  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */
+  width: 75%;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  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 */
-  margin-right: 8px;
-  margin-left: 7px;
   width: 25%;
   padding-left: 8px;
   padding-right: 7px;
@@ -81,16 +111,22 @@
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
+  padding-right: 0;
+  margin-right: 15px;
+  padding-left: 11.25px;
+  margin-left: 3.75px;
   /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
-  margin-left: -5%;
-  margin-right: 5%;
   width: 15%;
   padding-left: 5%;
   padding-right: 5%;
   border: 0 !important;
   word-wrap: break-word;
+  padding-left: 0;
+  padding-right: 7.5%;
+  margin-right: 2.5%;
   /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */
-  margin-left: -10px;
-  margin-right: 10px;
   width: 25%;
+  padding-left: 0;
+  padding-right: 15px;
+  margin-right: 5px;
 }