zen-grids 1.1 → 1.2

data/stylesheets/zen/_grids.scss

@@ -66,7 +66,6 @@ $zen-reverse-all-floats: false !default;
 // nested grid. It must be applied after the zen-grid-item() mixin.
 //
 @mixin zen-nested-container () {
-  @include zen-grid-container;
   padding: {
     left: 0;
     right: 0;
@@ -126,8 +125,10 @@ $zen-reverse-all-floats: false !default;
 }
 
 //
-// Apply this mixin to each content box in the layout to prevent overflowing
-// content from breaking the layout.
+// Applies a standard set of properites to all grid items in the layout.
+//
+// See the note about the $zen-auto-include-item-base and
+// $zen-auto-include-flow-item-base variables for when to use this mixin.
 //
 // The mixin has the following optional parameters, but its better to use the
 // $zen-gutter-width and $zen-box-sizing variables instead:
@@ -198,6 +199,21 @@ $zen-reverse-all-floats: false !default;
   clear: $dir;
 }
 
+//
+// Apply this to flow items that need to be floated.
+//
+@mixin zen-float (
+  $float-direction: $zen-float-direction,
+  $reverse-all-floats: $zen-reverse-all-floats
+) {
+  // Determine the float direction.
+  $dir: $float-direction;
+  @if $reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  float: $dir;
+}
+
 //
 // Apply this to an HTML item that is in the normal flow of a document to help
 // align it to the grid. Set the $column-span to the number of columns that the
@@ -246,20 +262,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 {
@@ -276,6 +278,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);
+  }
 }
 
 

data/templates/unit-tests/manifest.rb

@@ -5,6 +5,7 @@ stylesheet 'sass/function-zen-grid-item-width.scss', :media => 'all', :to => 'fu
 stylesheet 'sass/function-zen-half-gutter.scss',     :media => 'all', :to => 'function-zen-half-gutter.scss'
 stylesheet 'sass/function-zen-unit-width.scss',      :media => 'all', :to => 'function-zen-unit-width.scss'
 stylesheet 'sass/zen-clear.scss',                    :media => 'all', :to => 'zen-clear.scss'
+stylesheet 'sass/zen-float.scss',                    :media => 'all', :to => 'zen-float.scss'
 stylesheet 'sass/zen-grid-container.scss',           :media => 'all', :to => 'zen-grid-container.scss'
 stylesheet 'sass/zen-grid-flow-item.scss',           :media => 'all', :to => 'zen-grid-flow-item.scss'
 stylesheet 'sass/zen-grid-item-base.scss',           :media => 'all', :to => 'zen-grid-item-base.scss'
@@ -16,6 +17,7 @@ file 'test-results/function-zen-grid-item-width.css'
 file 'test-results/function-zen-half-gutter.css'
 file 'test-results/function-zen-unit-width.css'
 file 'test-results/zen-clear.css'
+file 'test-results/zen-float.css'
 file 'test-results/zen-grid-container.css'
 file 'test-results/zen-grid-flow-item.css'
 file 'test-results/zen-grid-item-base.css'

data/templates/unit-tests/sass/zen-float.scss

@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Test zen-float()
+ */
+
+@import "zen";
+
+#test-zen-float {
+  /* Test zen-float() */
+  @include zen-float();
+
+  /* Test zen-float() with $zen-float-direction: right */
+  $zen-float-direction: right;
+  @include zen-float();
+  $zen-float-direction: left;
+
+  /* Test zen-float(left) */
+  @include zen-float(left);
+
+  /* Test zen-float(left, $reverse-all-floats: TRUE) */
+  @include zen-float(left, $reverse-all-floats: TRUE);
+
+  /* Test zen-float(left) with: $zen-reverse-all-floats: TRUE; */
+  $zen-reverse-all-floats: TRUE;
+  @include zen-float(left);
+}

data/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);
-  }
-}

data/templates/unit-tests/test-results/zen-float.css

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Test zen-float()
+ */
+/* line 8, ../sass/zen-float.scss */
+#test-zen-float {
+  /* Test zen-float() */
+  float: left;
+  /* Test zen-float() with $zen-float-direction: right */
+  float: right;
+  /* Test zen-float(left) */
+  float: left;
+  /* Test zen-float(left, $reverse-all-floats: TRUE) */
+  float: right;
+  /* Test zen-float(left) with: $zen-reverse-all-floats: TRUE; */
+  float: right;
+}

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

@@ -6,12 +6,12 @@
 #test-zen-grid-container {
   /* Test zen-grid-container() */
 }
-/* line 52, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
+/* line 52, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
 #test-zen-grid-container:before, #test-zen-grid-container:after {
   content: "";
   display: table;
 }
-/* line 56, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
+/* line 56, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
 #test-zen-grid-container:after {
   clear: both;
 }
@@ -22,12 +22,12 @@
   *position: relative;
   *zoom: 1;
 }
-/* line 52, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
+/* line 52, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
 #test-zen-grid-container-2:before, #test-zen-grid-container-2:after {
   content: "";
   display: table;
 }
-/* line 56, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
+/* line 56, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
 #test-zen-grid-container-2:after {
   clear: both;
 }
@@ -38,12 +38,12 @@
   *position: relative;
   *zoom: 1;
 }
-/* line 52, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
+/* line 52, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
 #test-zen-grid-container-3:before, #test-zen-grid-container-3:after {
   content: "";
   display: table;
 }
-/* line 56, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
+/* line 56, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
 #test-zen-grid-container-3:after {
   clear: both;
 }

data/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;
 }

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

@@ -8,48 +8,17 @@
   padding-left: 0;
   padding-right: 0;
 }
-/* line 52, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
-#test-zen-nested-container:before, #test-zen-nested-container:after {
-  content: "";
-  display: table;
-}
-/* line 56, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
-#test-zen-nested-container:after {
-  clear: both;
-}
 
 /* line 13, ../sass/zen-nested-container.scss */
 #test-zen-nested-container-2 {
   /* Test zen-nested-container() with $legacy-support-for-ie7: true */
-  *position: relative;
-  *zoom: 1;
   padding-left: 0;
   padding-right: 0;
 }
-/* line 52, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
-#test-zen-nested-container-2:before, #test-zen-nested-container-2:after {
-  content: "";
-  display: table;
-}
-/* line 56, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
-#test-zen-nested-container-2:after {
-  clear: both;
-}
 
 /* line 20, ../sass/zen-nested-container.scss */
 #test-zen-nested-container-3 {
   /* Test zen-nested-container() with $legacy-support-for-ie6: true */
-  *position: relative;
-  *zoom: 1;
   padding-left: 0;
   padding-right: 0;
 }
-/* line 52, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
-#test-zen-nested-container-3:before, #test-zen-nested-container-3:after {
-  content: "";
-  display: table;
-}
-/* line 56, ../../../../../../../../Library/Ruby/Gems/1.8/gems/zen-grids-1.1/stylesheets/zen/_grids.scss */
-#test-zen-nested-container-3:after {
-  clear: both;
-}

data/zen-grids.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
   s.homepage    = 'http://zengrids.com'
   s.rubyforge_project =
 
-  s.version     = '1.1'
-  s.date        = '2012-04-27'
+  s.version     = '1.2'
+  s.date        = '2012-05-04'
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'
@@ -36,6 +36,7 @@ Gem::Specification.new do |s|
     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-float.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
@@ -46,6 +47,7 @@ Gem::Specification.new do |s|
     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-float.css
     templates/unit-tests/test-results/zen-grid-container.css
     templates/unit-tests/test-results/zen-grid-flow-item.css
     templates/unit-tests/test-results/zen-grid-item-base.css

metadata

@@ -4,8 +4,8 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 1
-  - 1
-  version: "1.1"
+  - 2
+  version: "1.2"
 platform: ruby
 authors: 
 - John Albin Wilkins
@@ -13,7 +13,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-04-27 00:00:00 +08:00
+date: 2012-05-04 00:00:00 +08:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -56,6 +56,7 @@ files:
 - 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-float.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
@@ -66,6 +67,7 @@ files:
 - 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-float.css
 - templates/unit-tests/test-results/zen-grid-container.css
 - templates/unit-tests/test-results/zen-grid-flow-item.css
 - templates/unit-tests/test-results/zen-grid-item-base.css
@@ -97,7 +99,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: "0"
 requirements: []
 
-rubyforge_project: "1.1"
+rubyforge_project: "1.2"
 rubygems_version: 1.3.6
 signing_key: 
 specification_version: 3