zen-grids 1.0.beta.1 → 1.0.beta.2

data/README.txt

@@ -9,13 +9,13 @@ Zen Grids system can be applied to an infinite number of layouts.
 USAGE
 -----
 
-A simple example: a content column with a sidebar on each side, aligned to a 12
-column grid.
+Here's a simple example: a content column with a sidebar on each side, aligned
+to a 12 column grid.
 
   @import "zen";
 
   $zen-column-count: 12;    // Set the total number of columns in the grid.
-  $zen-gutter-width: 30px;  // Set the gutter size. A half-gutter is used on
+  $zen-gutter-width: 40px;  // Set the gutter size. A half-gutter is used on
                             // each side of each column.
 
   .container {
@@ -34,23 +34,38 @@ column grid.
 Within the .container element, the .sidebar1, .sidebar2 and .content elements
 can be in any order.
 
+Zen Grids has built-in support for the Box-sizing Polyfill which adds
+"box-sizing: border-box" support to IE7 and earlier.
+
+- Download the polyfill at https://github.com/Schepp/box-sizing-polyfill
+- Place the boxsizing.htc file in your website.
+- Set Zen Grids' $box-sizing-polyfill-path variable to the absolute path to the
+  boxsizing.htc file on your website. For example:
+    $box-sizing-polyfill-path: "/scripts/polyfills/boxsizing.htc";
+
 
 INSTALLATION
 ------------
 
 Zen grids is distributed as a Ruby Gem. On your computer, simply run:
 
-  sudo gem install zen-grids --pre
+  sudo gem install zen-grids
 
-Then to add it to an existing project, edit the project's configuration file,
-config.rb, and add this line:
+If you are using Compass (and you should!) then you can add it to an existing
+project by editing the project's configuration file, config.rb, and adding this
+line:
 
   require 'zen-grids'
 
-And then, from the project's root directory, run:
+For Rails projects, from the project's root directory, run:
 
   compass install zen-grids
 
+You can then start using Zen Grids in your Sass files. Just add this line to one
+of your .sass or .scss files and start creating!
+
+  @import "zen";
+
 
 REQUIREMENTS
 ------------

data/stylesheets/zen/_grids.scss

@@ -10,31 +10,35 @@ $zen-column-count: 12 !default;
 // side of a grid column.
 $zen-gutter-width: 20px !default;
 
+// You can generate more efficient CSS if you manually apply the
+// zen-grid-item-base mixin to all grid items from within a single ruleset.
+$zen-auto-include-item-base: true !default;
+$zen-auto-include-flow-item-base: true !default;
+
 // Specify the width of the entire grid. Defaults to 100% for a fluid responsive
 // design, but you can change this to a pixel value if you need a fixed grid.
 $zen-grid-width: 100% !default;
 
-// Specify the default floating direction for zen's mixins.
-$zen-float-direction: left !default;
-
 // Specify the CSS3 box-sizing method. The default, "border-box", is compatible
 // with all modern browsers, including IE 8 and later. Use "content-box" for
 // wider compatibility (Note: you'll also need to set $legacy-support-for-ie7
 // and $legacy-support-for-ie6 to true.)
 $zen-box-sizing: border-box !default;
 
-// This is a helper variable for RTL layouts.
-$zen-reverse-all-floats: false !default;
-
-// You can generate more efficient CSS if you manually apply the
-// zen-grid-item-base mixin to all grid items from within a single ruleset.
-$zen-auto-include-item-base: true !default;
-$zen-auto-include-html-item-base: true !default;
-
 // Turn off IE6/7 support since we're defaulting to box-sizing: border-box.
 $legacy-support-for-ie7: false !default;
 $legacy-support-for-ie6: false !default;
 
+// The box-sizing polyfill for IE6/7 requires an absolute path to the
+// boxsizing.htc file. See https://github.com/Schepp/box-sizing-polyfill
+$box-sizing-polyfill-path: "" !default;
+
+// Specify the default floating direction for zen's mixins.
+$zen-float-direction: left !default;
+
+// This is a helper variable for RTL layouts.
+$zen-reverse-all-floats: false !default;
+
 
 //
 // Zen Grids requires the clearfix mixin.
@@ -139,14 +143,24 @@ $legacy-support-for-ie6: false !default;
   overflow: visible;
   word-wrap: break-word; // A very nice CSS3 property.
 
-  @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}.";
+  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) and $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.";
   }
-  @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;
+  @else {
+    @if $legacy-support-for-ie7 and $box-sizing-polyfill-path {
+      .ie7 & {
+        behavior: url($box-sizing-polyfill-path);
+      }
+    }
+    @if $legacy-support-for-ie6 {
+      .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;
+        @if $box-sizing-polyfill-path {
+          behavior: url($box-sizing-polyfill-path);
+        }
+      }
     }
   }
 }
@@ -172,32 +186,45 @@ $legacy-support-for-ie6: false !default;
 // HTML element should span. Set the $column-count to the number of columns that
 // the parent element spans.
 //
-// Unlike the zen-grid-item() mixin, this mixin does not float the HTML item. To
-// help position the item to align flush with the left edge of a containing grid
-// item, you can set the $alpha-margin to true. To help position the item to
-// align to align flush with the right edge of a containing grid item, you can
-// set the $omega-margin to true.
+// Unlike the zen-grid-item() mixin, this mixin does not float the HTML item; it
+// also does not have a half-gutter on each side. By default, it has no gutter
+// in the "alpha position" (the left side) and a full gutter in the "omega
+// position" (the right side.) You can turn on or off the alpha and omega
+// gutters by setting the $alpha-gutter and $omega-gutter parameters to true or
+// false.
+//
+// Note: when the $flow-direction is set to right (for RTL languages), the alpha
+// position is on the right and the omega position is on the left.
 //
-@mixin zen-grid-html-item (
+@mixin zen-grid-flow-item (
   $column-span,
-  $column-count: $zen-column-count,
-  $alpha-margin: false,
-  $omega-margin: false,
+  $column-count,
+  $alpha-gutter: false,
+  $omega-gutter: true,
   $gutter-width: $zen-gutter-width,
   $grid-width: $zen-grid-width,
   $box-sizing: $zen-box-sizing,
-  $auto-include-html-item-base: $zen-auto-include-html-item-base
+  $auto-include-flow-item-base: $zen-auto-include-flow-item-base,
+  $flow-direction: $zen-float-direction
 ) {
 
-  $dir: $zen-float-direction;
+  $dir: $flow-direction;
   @if $zen-reverse-all-floats {
     $dir: zen-direction-flip($dir);
   }
   $rev: zen-direction-flip($dir);
-  @if $alpha-margin {
+
+  // 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);
+  }
+  @else {
     margin-#{$dir}: -1 * zen-half-gutter($gutter-width);
   }
-  @if $omega-margin {
+  @if $omega-gutter {
+    margin-#{$rev}: zen-half-gutter($gutter-width);
+  }
+  @else {
     margin-#{$rev}: -1 * zen-half-gutter($gutter-width);
   }
 
@@ -206,7 +233,7 @@ $legacy-support-for-ie6: false !default;
   width: $column-span * $unit-width;
 
   // Auto-apply the unit base mixin.
-  @if $auto-include-html-item-base {
+  @if $auto-include-flow-item-base {
     @include zen-grid-item-base($gutter-width, $box-sizing);
   }
 }
@@ -221,7 +248,10 @@ $legacy-support-for-ie6: false !default;
   @if $dir == left {
     @return right;
   }
-  @return left;
+  @else if $dir == right {
+    @return left;
+  }
+  @return both;
 }
 
 // Returns a half gutter width.

data/templates/project/example.html

@@ -22,6 +22,7 @@
       <h1>Main content</h1>
       <p>Source order: 1</p>
     </header>
+    <aside>‘There’s no such thing!’</aside>
     <p>Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’</p>
     <p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’</p>
     <p>‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p>

data/templates/project/layout.scss

@@ -49,6 +49,18 @@ $zen-gutter-width: 20px;
   @include zen-grid-container();
 }
 
+#content aside {
+  font-weight: bold;
+  font-style: italic;
+  font-size: 1.2em;
+  @include zen-grid-flow-item(1, 3);
+  float: left;
+  margin: {
+    top: (1em/1.2);
+    bottom: (1em/1.2);
+  }
+}
+
 //
 // Horizontal navigation bar
 @media all and (min-width: 480px) {
@@ -59,7 +71,7 @@ $zen-gutter-width: 20px;
     padding-top: $navbar-height;
   }
   #main-menu {
-    @include zen-grid(1, 1);
+    @include zen-grid-item(1, 1);
     margin-top: -$navbar-height;
     height: $navbar-height;
   }
@@ -69,14 +81,14 @@ $zen-gutter-width: 20px;
   $zen-column-count: 2;
 
   #content {
-    @include zen-grid(1, 2);
+    @include zen-grid-item(1, 2);
   }
   #aside1 {
     @include zen-clear(); // Clear left-floated elements (#content)
-    @include zen-grid(1, 1);
+    @include zen-grid-item(1, 1);
   }
   #aside2 {
-    @include zen-grid(2, 1);
+    @include zen-grid-item(2, 1);
   }
 }
 
@@ -84,14 +96,14 @@ $zen-gutter-width: 20px;
   $zen-column-count: 3;
 
   #content {
-    @include zen-grid(1, 2);
+    @include zen-grid-item(1, 2);
   }
   #aside1 {
-    @include zen-grid(1, 1, right); // Position from the right
+    @include zen-grid-item(1, 1, right); // Position from the right
   }
   #aside2 {
     @include zen-clear(); // Clear left-floated elements (#content)
-    @include zen-grid(1, 2);
+    @include zen-grid-item(1, 2);
   }
 }
 
@@ -99,14 +111,14 @@ $zen-gutter-width: 20px;
   $zen-column-count: 3;
 
   #content {
-    @include zen-grid(1, 2);
+    @include zen-grid-item(1, 2);
   }
   #aside1 {
-    @include zen-grid(1, 1, right); // Position from the right
+    @include zen-grid-item(1, 1, right); // Position from the right
   }
   #aside2 {
     @include zen-clear(right); // Clear right-floated elements (#aside1)
-    @include zen-grid(1, 1, right);
+    @include zen-grid-item(1, 1, right);
   }
 }
 
@@ -114,12 +126,12 @@ $zen-gutter-width: 20px;
   $zen-column-count: 5;
 
   #content {
-    @include zen-grid(2, 3);
+    @include zen-grid-item(2, 3);
   }
   #aside1 {
-    @include zen-grid(1, 1);
+    @include zen-grid-item(1, 1);
   }
   #aside2 {
-    @include zen-grid(5, 1);
+    @include zen-grid-item(5, 1);
   }
 }

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.beta.1'
-  s.date        = '2012-01-20'
+  s.version     = '1.0.beta.2'
+  s.date        = '2012-02-06'
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: zen-grids
 version: !ruby/object:Gem::Version 
-  hash: 62196289
+  hash: 62196295
   prerelease: 4
   segments: 
   - 1
   - 0
   - beta
-  - 1
-  version: 1.0.beta.1
+  - 2
+  version: 1.0.beta.2
 platform: ruby
 authors: 
 - John Albin Wilkins
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-01-20 00:00:00 Z
+date: 2012-02-06 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -84,7 +84,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 
-rubyforge_project: 1.0.beta.1
+rubyforge_project: 1.0.beta.2
 rubygems_version: 1.8.15
 signing_key: 
 specification_version: 3