zen-grids 1.0.beta.4 → 1.0.beta.5

data/README.txt

@@ -22,13 +22,13 @@ to a 12 column grid.
     @include zen-grid-container;
   }
   .sidebar1 {
-    @include zen-grid(1, 3);  // 3 col. wide sidebar starting in the 1st column
+    @include zen-grid(3, 1);  // 3 col. wide sidebar starting in the 1st column
   }
   .content {
-    @include zen-grid(4, 6);  // 6 col. wide element starting in the 4th column
+    @include zen-grid(6, 4);  // 6 col. wide element starting in the 4th column
   }
   .sidebar2 {
-    @include zen-grid(10, 3); // 3 col. wide sidebar starting in the 10th column
+    @include zen-grid(3, 10); // 3 col. wide sidebar starting in the 10th column
   }
 
 Within the .container element, the .sidebar1, .sidebar2 and .content elements

data/stylesheets/zen/_background-grid.scss

@@ -0,0 +1,91 @@
+@import "zen/grids";
+
+// Specify the number of columns in the grid.
+$bg-grid-column-count: $zen-column-count !default;
+
+// Specify the width of the gutters; half of the gutter will be placed on each
+// side of a grid column.
+$bg-grid-gutter-width: $zen-gutter-width !default;
+
+// Specify the column background color.
+$bg-grid-color: #ffdede !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.
+$bg-grid-width: $zen-grid-width !default;
+
+// Specify the default floating direction for zen's mixins.
+$bg-float-direction: $zen-float-direction !default;
+
+
+//
+// This mixin currently requires the following markup at the top of the responsive container (e.g. body or div#page, etc.).
+// <p class="bg-grid">
+//   <span class="bgcol-1">1</span><span class="bgcol-2">2</span><span class="bgcol-3">3</span><span class="bgcol-4">4</span><span class="bgcol-5">5</span><span class="bgcol-6">6</span><span class="bgcol-7">7</span><span class="bgcol-8">8</span><span class="bgcol-9">9</span><span class="bgcol-10">10</span><span class="bgcol-11">11</span><span class="bgcol-12">12</span><span class="bgcol-13">13</span><span class="bgcol-14">14</span><span class="bgcol-15">15</span><span class="bgcol-16">16</span><span class="bgcol-17">17</span><span class="bgcol-18">18</span><span class="bgcol-19">19</span><span class="bgcol-20">20</span><span class="bgcol-21">21</span><span class="bgcol-22">22</span><span class="bgcol-23">23</span><span class="bgcol-24">24</span><span class="bgcol-25">25</span><span class="bgcol-26">26</span><span class="bgcol-27">27</span><span class="bgcol-28">28</span><span class="bgcol-29">29</span><span class="bgcol-30">30</span>
+//   <span class="bgcolrev-1">1</span><span class="bgcolrev-2">2</span><span class="bgcolrev-3">3</span><span class="bgcolrev-4">4</span><span class="bgcolrev-5">5</span><span class="bgcolrev-6">6</span><span class="bgcolrev-7">7</span><span class="bgcolrev-8">8</span><span class="bgcolrev-9">9</span><span class="bgcolrev-10">10</span><span class="bgcolrev-11">11</span><span class="bgcolrev-12">12</span><span class="bgcolrev-13">13</span><span class="bgcolrev-14">14</span><span class="bgcolrev-15">15</span><span class="bgcolrev-16">16</span><span class="bgcolrev-17">17</span><span class="bgcolrev-18">18</span><span class="bgcolrev-19">19</span><span class="bgcolrev-20">20</span><span class="bgcolrev-21">21</span><span class="bgcolrev-22">22</span><span class="bgcolrev-23">23</span><span class="bgcolrev-24">24</span><span class="bgcolrev-25">25</span><span class="bgcolrev-26">26</span><span class="bgcolrev-27">27</span><span class="bgcolrev-28">28</span><span class="bgcolrev-29">29</span><span class="bgcolrev-30">30</span>
+// </p>
+//
+@mixin -experimental-bg-grid(
+  $column-count: $bg-grid-column-count,
+  $gutter-width: $bg-grid-gutter-width,
+  $grid-color: $bg-grid-color,
+  $grid-width: $bg-grid-width,
+  $flow-direction: $bg-float-direction
+) {
+
+  // Internal variables.
+  $dir: $flow-direction;
+  @if $zen-reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  $rev: zen-direction-flip($dir);
+
+  $font-size: 16px;
+  $line-height: 24px;
+  $color-bg: #fff;
+
+  @include zen-grid-container;
+  position: absolute;
+  position: fixed;
+  z-index: -1;
+  margin: 0 auto;
+  width: $grid-width;
+  height: 100%;
+  font-size: $font-size;
+  line-height: $line-height;
+  font-weight: bold;
+  font-family: sans-serif;
+  background-color: $color-bg;
+
+  span {
+    @include zen-grid-item-base;
+    padding: 0;
+    text-align: center;
+    color: $color-bg;
+    @include text-shadow(darken($grid-color, 75%) 0 0 4px);
+  }
+  @for $i from 1 through $column-count {
+    .bgcol-#{$i} {
+      @include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $dir, $auto-include-item-base: false);
+      height: 100%;
+      margin-bottom: -($line-height);
+      background-color: $grid-color;
+      border: {
+        left: zen-half-gutter($gutter-width) solid $color-bg;
+        right: zen-half-gutter($gutter-width) solid $color-bg;
+      }
+    }
+    .bgcolrev-#{$i} {
+	  @if $i == 1 {
+        @include zen-clear();
+      }
+      @include zen-grid-item(1, $i, $column-count: $column-count, $gutter-width: $gutter-width, $float-direction: $rev, $auto-include-item-base: false);
+    }
+  }
+  @for $i from ($column-count + 1) through 30 {
+    .bgcol-#{$i},
+    .bgcolrev-#{$i} {
+      display: none;
+    }
+  }
+}

data/stylesheets/zen/_grids.scss

@@ -33,6 +33,16 @@ $zen-box-sizing: border-box !default;
 $legacy-support-for-ie7: false !default;
 $legacy-support-for-ie6: false !default;
 
+// Specify the method to add IE legacy support; can be hack or class. Setting
+// this to class will result in generated CSS rules using html/body classes
+// specified in $default-legacy-ie*-class variables, like those used in HTML5
+// Boilerplate.
+$default-legacy-ie-approach: hack !default;
+
+// The html/body classes to use when $default-legacy-ie-approach equals class.
+$default-legacy-ie6-class: lt-ie7;
+$default-legacy-ie7-class: lt-ie8;
+
 // Specify the default floating direction for zen's mixins.
 $zen-float-direction: left !default;
 
@@ -89,6 +99,10 @@ $zen-reverse-all-floats: false !default;
   // Calculate the unit width.
   $unit-width: $grid-width / $column-count;
 
+  @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.";
+  }
+
   // Determine the float direction and its reverse.
   $dir: $float-direction;
   @if $reverse-all-floats {
@@ -97,7 +111,16 @@ $zen-reverse-all-floats: false !default;
   $rev: zen-direction-flip($dir);
 
   float: $dir;
-  width: $column-span * $unit-width;
+  $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;
   margin: {
     #{$dir}: ($column-position - 1) * $unit-width;
     #{$rev}: (1 - $column-position - $column-span) * $unit-width;
@@ -122,11 +145,20 @@ $zen-reverse-all-floats: false !default;
 //   cooler. IE 6 and 7 don't support border-box.
 @mixin zen-grid-item-base (
   $gutter-width: $zen-gutter-width,
-  $box-sizing: $zen-box-sizing
+  $box-sizing: $zen-box-sizing,
+  $flow-direction: $zen-float-direction,
+  $reverse-all-flows: $zen-reverse-all-floats
 ) {
+
+  $dir: $flow-direction;
+  @if $reverse-all-flows {
+    $dir: zen-direction-flip($dir);
+  }
+  $rev: zen-direction-flip($dir);
+
   padding: {
-    left: zen-half-gutter($gutter-width);
-    right: zen-half-gutter($gutter-width);
+    left: zen-half-gutter($gutter-width, $dir);
+    right: zen-half-gutter($gutter-width, $rev);
   }
   // Specify the border-box properties.
   @if $box-sizing == border-box {
@@ -147,18 +179,29 @@ $zen-reverse-all-floats: false !default;
     @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-ie7 and $box-sizing-polyfill-path {
-      .ie7 & {
-        behavior: url($box-sizing-polyfill-path);
+    @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+      @if $box-sizing-polyfill-path {
+        @if $default-legacy-ie-approach == hack {
+          *behavior: url($box-sizing-polyfill-path);
+        }
+        @else {
+          #{$default-legacy-ie7-class} & {
+            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);
+      @if $legacy-support-for-ie6 {
+        @if $default-legacy-ie-approach == hack {
+          _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 {
+          #{$default-legacy-ie6-class} & {
+            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;
+          }
         }
         // 1. http://www.positioniseverything.net/explorer/doubled-margin.html
         // 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
@@ -186,8 +229,10 @@ $zen-reverse-all-floats: false !default;
 //
 // 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
-// HTML element should span. Set the $column-count to the number of columns that
-// the parent element spans.
+// HTML element should span. For responsive layouts with a percentage-based grid
+// width, set the $parent-column-count to the number of columns that the parent
+// element spans; fixed-unit layouts using px, em, etc. do not need to specify
+// this.
 //
 // 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
@@ -201,39 +246,60 @@ $zen-reverse-all-floats: false !default;
 //
 @mixin zen-grid-flow-item (
   $column-span,
-  $column-count,
+  $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,
-  $auto-include-flow-item-base: $zen-auto-include-flow-item-base,
-  $flow-direction: $zen-float-direction
+  $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 $zen-reverse-all-floats {
+  @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);
+    margin-#{$dir}: zen-half-gutter($gutter-width, $rev);
   }
   @else {
-    margin-#{$dir}: -1 * zen-half-gutter($gutter-width);
+    margin-#{$dir}: -(zen-half-gutter($gutter-width, $dir));
   }
   @if $omega-gutter {
-    margin-#{$rev}: zen-half-gutter($gutter-width);
+    margin-#{$rev}: zen-half-gutter($gutter-width, $dir);
   }
   @else {
-    margin-#{$rev}: -1 * zen-half-gutter($gutter-width);
+    margin-#{$rev}: -(zen-half-gutter($gutter-width, $rev));
   }
 
   // Calculate the unit width.
-  $unit-width: $grid-width / $column-count;
-  width: $column-span * $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 {
@@ -247,9 +313,22 @@ $zen-reverse-all-floats: false !default;
 //
 
 // Returns a half gutter width.
-@function zen-half-gutter($gutter-width: $zen-gutter-width) {
-  // @todo Handle odd-pixel-sized gutters.
-  @return $gutter-width / 2;
+@function zen-half-gutter(
+  $gutter-width: $zen-gutter-width,
+  $gutter-side: $zen-float-direction,
+  $flow-direction: $zen-float-direction
+) {
+  $half-gutter: $gutter-width / 2;
+  // Special handling in case gutter has an odd number of pixels.
+  @if unit($gutter-width) == "px" {
+    @if $gutter-side == $flow-direction {
+      @return floor($half-gutter);
+    }
+    @else {
+      @return ceil($half-gutter);
+    }
+  }
+  @return $half-gutter;
 }
 
 // Returns the opposite direction, given "left" or "right".

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.4'
-  s.date        = '2012-02-09'
+  s.version     = '1.0.beta.5'
+  s.date        = '2012-02-13'
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'
@@ -22,6 +22,7 @@ Gem::Specification.new do |s|
     README.txt
     lib/zen-grids.rb
     stylesheets/_zen.scss
+    stylesheets/zen/_background-grid.scss
     stylesheets/zen/_columns.scss
     stylesheets/zen/_grids.scss
     templates/project/example.html

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification 
 name: zen-grids
 version: !ruby/object:Gem::Version 
-  hash: 62196299
+  hash: 62196297
   prerelease: 4
   segments: 
   - 1
   - 0
   - beta
-  - 4
-  version: 1.0.beta.4
+  - 5
+  version: 1.0.beta.5
 platform: ruby
 authors: 
 - John Albin Wilkins
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-02-09 00:00:00 Z
+date: 2012-02-13 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -46,6 +46,7 @@ files:
 - README.txt
 - lib/zen-grids.rb
 - stylesheets/_zen.scss
+- stylesheets/zen/_background-grid.scss
 - stylesheets/zen/_columns.scss
 - stylesheets/zen/_grids.scss
 - templates/project/example.html
@@ -84,7 +85,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 
-rubyforge_project: 1.0.beta.4
+rubyforge_project: 1.0.beta.5
 rubygems_version: 1.8.15
 signing_key: 
 specification_version: 3