zen-grids 1.0.alpha.2 → 1.0.alpha.3

data/README.txt

@@ -19,7 +19,7 @@ column grid.
                             // each side of each column.
 
   .container {
-    @include zen-grid-container();
+    @include zen-grid-container;
   }
   .sidebar1 {
     @include zen-grid(1, 3);  // 3 col. wide sidebar starting in the 1st column

data/stylesheets/zen/_grids.scss

@@ -66,6 +66,9 @@ $legacy-support-for-ie6: false !default;
 // the content box starts on. And set the $column-span to the number of columns
 // that the content box spans.
 //
+// For content boxes that are floated right, the $column-position is counted
+// from the right instead of from the left.
+//
 @mixin zen-grid (
   $column-position,
   $column-span,
@@ -86,20 +89,16 @@ $legacy-support-for-ie6: false !default;
   }
   $rev: zen-direction-flip($dir);
 
-  // Auto-apply the unit base mixin.
-  @if $zen-auto-include-unit-base {
-    @include zen-grid-unit-base($box-sizing);
-  }
-
   float: $dir;
   width: $column-span * $unit-width;
   margin: {
     #{$dir}: ($column-position - 1) * $unit-width;
     #{$rev}: (1 - $column-position - $column-span) * $unit-width;
   }
-  padding: {
-    left: $gutter-width / 2;
-    right: $gutter-width / 2;
+
+  // Auto-apply the unit base mixin.
+  @if $zen-auto-include-unit-base {
+    @include zen-grid-unit-base($gutter-width, $box-sizing);
   }
 }
 
@@ -107,11 +106,21 @@ $legacy-support-for-ie6: false !default;
 // Apply this mixin to each content box in the layout to prevent overflowing
 // content from breaking the layout.
 //
-// The mixin has the following optional parameters:
+// The mixin has the following optional parameters, but its better to use the
+// $zen-gutter-width and $zen-box-sizing variables instead:
+// - $gutter-width: Half of this value is applied as padding to the left and
+//   right sides of the element.
 // - $box-sizing: The type of CSS3 box model each box should use. Can be set to
 //   content-box or border-box. Defaults to content-box, but border-box is way
 //   cooler. IE 6 and 7 don't support border-box.
-@mixin zen-grid-unit-base ($box-sizing: $zen-box-sizing) {
+@mixin zen-grid-unit-base (
+  $gutter-width: $zen-gutter-width,
+  $box-sizing: $zen-box-sizing
+) {
+  padding: {
+    left: $gutter-width / 2;
+    right: $gutter-width / 2;
+  }
   // Specify the border-box properties.
   @if $box-sizing == border-box {
     -moz-box-sizing: border-box;
@@ -127,16 +136,14 @@ $legacy-support-for-ie6: false !default;
   overflow: visible;
   word-wrap: break-word; // A very nice CSS3 property.
 
-  @if $legacy-support-for-ie6 {
-    @if $box-sizing == content-box {
-      .ie6 & {
-        display: inline; // display inline or double your floated margin! [1]
-        overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
-        overflow-y: visible;
-      }
-    }
-    @else {
-      @warn "IE6 legacy support is on, but $box-sizing is set to #{$box-sizing}.";
+  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) and $box-sizing == border-box {
+    @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing}.";
+  }
+  @else if $legacy-support-for-ie6 and $box-sizing == content-box {
+    .ie6 & {
+      display: inline; // display inline or double your floated margin! [1]
+      overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
+      overflow-y: visible;
     }
   }
 }
@@ -155,6 +162,41 @@ $legacy-support-for-ie6: false !default;
   clear: $dir;
 }
 
+//
+// Apply this to an element to help align it to the grid. Set the $column-span
+// to the number of columns that the content box spans. Set the $column-count to
+// the number of columns that the parent element spans.
+//
+@mixin zen-grid-width (
+  $column-span,
+  $column-count: $zen-column-count,
+  $alpha-margin: false,
+  $omega-margin: false,
+  $gutter-width: $zen-gutter-width,
+  $grid-width: $zen-grid-width,
+  $box-sizing: $zen-box-sizing
+) {
+
+  $dir: $zen-float-direction;
+  @if $zen-reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  $rev: zen-direction-flip($dir);
+  @if $alpha-margin {
+    margin-#{$dir}: -1 * zen-half-gutter($gutter-width);
+  }
+  @if $omega-margin {
+    margin-#{$rev}: -1 * zen-half-gutter($gutter-width);
+  }
+
+  // Calculate the unit width.
+  $unit-width: $grid-width / $column-count;
+  width: $column-span * $unit-width;
+
+  // Auto-apply the unit base mixin.
+  @include zen-grid-unit-base($gutter-width, $box-sizing);
+}
+
 
 //
 // Helper functions for the Zen mixins.
@@ -167,3 +209,8 @@ $legacy-support-for-ie6: false !default;
   }
   @return left;
 }
+
+// Returns a half gutter width.
+@function zen-half-gutter($gutter-width: $zen-gutter-width) {
+  @return $gutter-width / 2;
+}

data/templates/project/layout.scss

@@ -72,8 +72,8 @@ $zen-gutter-width: 20px;
     @include zen-grid(1, 2);
   }
   #aside1 {
-    @include zen-grid(1, 1);
     @include zen-clear(); // Clear left-floated elements (#content)
+    @include zen-grid(1, 1);
   }
   #aside2 {
     @include zen-grid(2, 1);
@@ -87,10 +87,10 @@ $zen-gutter-width: 20px;
     @include zen-grid(1, 2);
   }
   #aside1 {
-    @include zen-grid(1, 1, right);
+    @include zen-grid(1, 1, right); // Position from the right
   }
   #aside2 {
-    @include zen-clear(left); // Clear right-floated elements (#content)
+    @include zen-clear(); // Clear left-floated elements (#content)
     @include zen-grid(1, 2);
   }
 }
@@ -102,7 +102,7 @@ $zen-gutter-width: 20px;
     @include zen-grid(1, 2);
   }
   #aside1 {
-    @include zen-grid(1, 1, right);
+    @include zen-grid(1, 1, right); // Position from the right
   }
   #aside2 {
     @include zen-clear(right); // Clear right-floated elements (#aside1)

data/zen-grids.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
   s.homepage    = 'http://zengrids.com'
   s.rubyforge_project =
 
-  s.version     = '1.0.alpha.2'
-  s.date        = '2012-01-12'
+  s.version     = '1.0.alpha.3'
+  s.date        = '2012-01-15'
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: zen-grids
 version: !ruby/object:Gem::Version 
-  prerelease: true
+  hash: -3702664262
+  prerelease: 4
   segments: 
   - 1
   - 0
   - alpha
-  - 2
-  version: 1.0.alpha.2
+  - 3
+  version: 1.0.alpha.3
 platform: ruby
 authors: 
 - John Albin Wilkins
@@ -15,16 +16,17 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-01-12 00:00:00 +08:00
-default_executable: 
+date: 2012-01-15 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
+        hash: 5
         segments: 
         - 3
         - 1
@@ -52,7 +54,6 @@ files:
 - templates/project/layout.scss
 - templates/project/styles.scss
 - zen-grids.gemspec
-has_rdoc: true
 homepage: http://zengrids.com
 licenses: []
 
@@ -62,16 +63,20 @@ rdoc_options: []
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
+      hash: 3
       segments: 
       - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">"
     - !ruby/object:Gem::Version 
+      hash: 25
       segments: 
       - 1
       - 3
@@ -79,8 +84,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 
-rubyforge_project: 1.0.alpha.2
-rubygems_version: 1.3.6
+rubyforge_project: 1.0.alpha.3
+rubygems_version: 1.8.15
 signing_key: 
 specification_version: 3
 summary: A Compass plugin for Zen Grids, a fluid responsive grid system