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

data/zen-grids/_grids.scss

@@ -1,16 +1,19 @@
 //
-// Mixins for the Zen Grids system.
+// Main module for the Zen Grids system.
 //
 
 
-// Specify the number of columns in the grid. @see http://zengrids.com/help/#zen-column-count
-$zen-column-count                 : 1           !default;
+// 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-gutter-width
-$zen-gutter-width                 : 20px        !default;
+// Specify the width of the gutters (as padding). @see http://zengrids.com/help/#zen-gutters
+$zen-gutters                      : 20px        !default;
 
-// @see http://zengrids.com/help/#zen-auto-include-item-base
-$zen-auto-include-item-base       : true        !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;
@@ -25,11 +28,11 @@ $zen-box-sizing                   : border-box  !default;
 $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-float-direction
-$zen-float-direction              : left        !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-reverse-all-floats
-$zen-reverse-all-floats           : false       !default;
+// Reverse the floating direction in all zen's mixins. @see http://zengrids.com/help/#zen-switch-direction
+$zen-switch-direction             : false       !default;
 
 
 //
@@ -37,9 +40,10 @@ $zen-reverse-all-floats           : false       !default;
 // @see http://zengrids.com/help/#zen-grid-container
 //
 @mixin zen-grid-container(
-  $context          : 'none',
-  $gutter-width     : $zen-gutter-width,
-  $float-direction  : $zen-float-direction
+  $context          : none,
+  $gutters          : $zen-gutters,
+  $gutter-method    : $zen-gutter-method,
+  $direction        : $zen-direction
 ) {
 
   // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
@@ -61,15 +65,15 @@ $zen-reverse-all-floats           : false       !default;
   }
 
   // Un-do the gutter padding of the parent grid item.
-  @if $context == 'flow' {
+  @if $context == flow and $gutter-method == padding {
     margin: {
-      left: -(zen-half-gutter($gutter-width, left, $float-direction));
-      right: -(zen-half-gutter($gutter-width, right, $float-direction));
+      left: -(zen-half-gutter($gutters, left, $direction));
+      right: -(zen-half-gutter($gutters, right, $direction));
     }
   }
 
   // Prevent any padding from messing up the alignment of the nested grid.
-  @if $context == 'grid-item' or $context == 'flow' {
+  @if $context == grid-item or $context == flow {
     padding: {
       left: 0;
       right: 0;
@@ -83,32 +87,39 @@ $zen-reverse-all-floats           : false       !default;
 @mixin zen-grid-item(
   $column-span,
   $column-position,
-  $float-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-floats       : $zen-reverse-all-floats,
-  $auto-include-item-base   : $zen-auto-include-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,
+  $auto-include-grid-item-base  : $zen-auto-include-grid-item-base
 ) {
 
   // Calculate the unit width.
-  $unit-width: zen-unit-width($column-count, $grid-width);
+  $unit-width: zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
 
   // Calculate the item's width.
-  $width: zen-grid-item-width($column-span, $column-count, $gutter-width, $grid-width, $box-sizing);
+  $width: zen-grid-item-width($column-span, $columns, $gutters, $gutter-method, $grid-width, $box-sizing);
+
+  // Calculate the margin from the container's edge.
+  $margin: ($column-position - 1) * $unit-width;
+  @if $gutter-method == margin {
+    $margin: $margin + (floor($column-position) - 1) * $gutters;
+  }
 
   // Determine the float direction and its reverse.
-  $dir: $float-direction;
-  @if $reverse-all-floats {
-    $dir: zen-direction-flip($dir);
+  $dir: $direction;
+  @if $switch-direction {
+    $dir: zen-direction-switch($dir);
   }
-  $rev: zen-direction-flip($dir);
+  $rev: zen-direction-switch($dir);
 
   float: $dir;
   width: $width;
   margin: {
-    #{$dir}: ($column-position - 1) * $unit-width;
+    #{$dir}: $margin;
     #{$rev}: -100%;
   }
   @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
@@ -116,8 +127,8 @@ $zen-reverse-all-floats           : false       !default;
   }
 
   // Auto-apply the unit base mixin.
-  @if $auto-include-item-base {
-    @include zen-grid-item-base($gutter-width, $box-sizing);
+  @if $auto-include-grid-item-base {
+    @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
   }
 }
 
@@ -126,20 +137,23 @@ $zen-reverse-all-floats           : false       !default;
 // @see http://zengrids.com/help/#zen-grid-item-base
 //
 @mixin zen-grid-item-base(
-  $gutter-width       : $zen-gutter-width,
+  $gutters            : $zen-gutters,
+  $gutter-method      : $zen-gutter-method,
   $box-sizing         : $zen-box-sizing,
-  $flow-direction     : $zen-float-direction,
-  $reverse-all-flows  : $zen-reverse-all-floats
+  $direction          : $zen-direction,
+  $switch-direction   : $zen-switch-direction
 ) {
 
-  $dir: $flow-direction;
-  @if $reverse-all-flows {
-    $dir: zen-direction-flip($dir);
+  $dir: $direction;
+  @if $switch-direction {
+    $dir: zen-direction-switch($dir);
   }
 
-  padding: {
-    left: zen-half-gutter($gutter-width, left, $dir);
-    right: zen-half-gutter($gutter-width, right, $dir);
+  @if $gutter-method == padding {
+    padding: {
+      left: zen-half-gutter($gutters, left, $dir);
+      right: zen-half-gutter($gutters, right, $dir);
+    }
   }
   // Specify the border-box properties.
   @if $box-sizing == border-box {
@@ -154,41 +168,49 @@ $zen-reverse-all-floats           : false       !default;
       left: 0 !important;
       right: 0 !important;
     }
+    @if $gutter-method == margin {
+      padding: {
+        left: 0 !important;
+        right: 0 !important;
+      }
+    }
   }
   // Prevent overflowing content from being hidden beneath other grid items.
-  word-wrap: break-word; // A very nice CSS3 property.
+  word-wrap: break-word;
 
   @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
     @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
-      @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
+      @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 {
-      _display: inline; // Display inline or double your floated margin! [1]
-      _overflow: hidden; // Prevent overflowing content from breaking the layout.
-      _overflow-y: visible; // In IE6, overflow visible is broken [2]
-      // 1. http://www.positioniseverything.net/explorer/doubled-margin.html
-      // 2. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
+      // Display inline or double your floated margin!
+      // @see http://www.positioniseverything.net/explorer/doubled-margin.html
+      _display: inline;
+      // Prevent overflowing content from breaking the layout.
+      _overflow: hidden;
+      // In IE6, overflow visible is broken.
+      // @see http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
+      _overflow-y: visible;
     }
   }
 }
 
 //
-// Apply this to grid items that need to be cleared below other grid items.
-// @see http://zengrids.com/help/#zen-clear
+// Apply this to a grid item so that it starts a new row.
+// @see http://zengrids.com/help/#zen-new-row
 //
-@mixin zen-clear(
-  $float-direction      : $zen-float-direction,
-  $reverse-all-floats   : $zen-reverse-all-floats
+@mixin zen-new-row(
+  $clear              : $zen-direction,
+  $switch-direction   : $zen-switch-direction
 ) {
-  // Determine the float direction.
-  $dir: $float-direction;
-  @if $reverse-all-floats {
-    $dir: zen-direction-flip($dir);
+  // Determine the clearing direction.
+  @if $switch-direction {
+    $clear: zen-direction-switch($clear);
   }
-  clear: $dir;
+  clear: $clear;
 }
 
 
@@ -198,14 +220,14 @@ $zen-reverse-all-floats           : false       !default;
 
 // Returns a half gutter width. @see http://zengrids.com/help/#zen-half-gutter
 @function zen-half-gutter(
-  $gutter-width     : $zen-gutter-width,
-  $gutter-side      : $zen-float-direction,
-  $flow-direction   : $zen-float-direction
+  $gutters          : $zen-gutters,
+  $gutter-side      : $zen-direction,
+  $direction        : $zen-direction
 ) {
-  $half-gutter: $gutter-width / 2;
+  $half-gutter: $gutters / 2;
   // Special handling in case gutter has an odd number of pixels.
-  @if unit($gutter-width) == "px" {
-    @if $gutter-side == $flow-direction {
+  @if unit($gutters) == "px" {
+    @if $gutter-side == $direction {
       @return floor($half-gutter);
     }
     @else {
@@ -215,14 +237,44 @@ $zen-reverse-all-floats           : false       !default;
   @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(
-  $column-count   : $zen-column-count,
+  $columns        : $zen-columns,
+  $gutters        : $zen-gutters,
+  $gutter-method  : $zen-gutter-method,
   $grid-width     : $zen-grid-width
 ) {
-  $unit-width: $grid-width / $column-count;
+  $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) {
-    @warn "You may experience rounding errors as the grid width, #{$grid-width}, does not divide evenly into #{$column-count} columns.";
+    @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;
 }
@@ -231,26 +283,29 @@ $zen-reverse-all-floats           : false       !default;
 // @see http://zengrids.com/help/#zen-grid-item-width
 @function zen-grid-item-width(
   $column-span,
-  $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,
   $box-sizing     : $zen-box-sizing
 ) {
-  $width: $column-span * zen-unit-width($column-count, $grid-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: $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://zengrids.com/help/#zen-direction-flip
-@function zen-direction-flip(
+// @see http://zengrids.com/help/#zen-direction-switch
+@function zen-direction-switch(
   $dir
 ) {
   @if $dir == left {
@@ -262,6 +317,6 @@ $zen-reverse-all-floats           : false       !default;
   @else if $dir == none or $dir == both {
     @return $dir;
   }
-  @warn "Invalid direction passed to zen-direction-flip().";
+  @warn "Invalid direction passed to zen-direction-switch().";
   @return both;
 }

metadata

@@ -1,14 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: zen-grids
 version: !ruby/object:Gem::Version 
-  prerelease: true
-  segments: 
-  - 2
-  - 0
-  - 0
-  - alpha
-  - 2
-  version: 2.0.0.alpha.2
+  version: 2.0.0.beta.1
 platform: ruby
 authors: 
 - John Albin Wilkins
@@ -16,8 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-02-25 00:00:00 +08:00
-default_executable: 
+date: 2013-07-22 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -26,9 +18,6 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        segments: 
-        - 3
-        - 2
         version: "3.2"
   type: :runtime
   version_requirements: *id001
@@ -41,7 +30,7 @@ extensions: []
 extra_rdoc_files: []
 
 files: 
-- component.json
+- bower.json
 - LICENSE.txt
 - README.txt
 - lib/zen-grids.rb
@@ -58,22 +47,22 @@ files:
 - 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
@@ -81,9 +70,10 @@ files:
 - templates/unit-tests/test-results/zen-grid-item-base.css
 - templates/unit-tests/test-results/zen-grid-item.css
 - zen-grids.gemspec
-has_rdoc: true
 homepage: http://zengrids.com
-licenses: []
+licenses: 
+- GPL-2
+metadata: {}
 
 post_install_message: 
 rdoc_options: []
@@ -94,24 +84,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      segments: 
-      - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
   requirements: 
   - - ">"
     - !ruby/object:Gem::Version 
-      segments: 
-      - 1
-      - 3
-      - 1
       version: 1.3.1
 requirements: []
 
-rubyforge_project: 2.0.0.alpha.2
-rubygems_version: 1.3.6
+rubyforge_project: 2.0.0.beta.1
+rubygems_version: 2.0.3
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: A Compass plugin for Zen Grids, a fluid responsive grid system
 test_files: []