Adding support for IE7 to the fluid grid. Cleaning up some functions …

…and mixins in grid and fluid for consistency.
heygrady · Apr 30, 2012 · fe3f6de · fe3f6de
1 parent 0422f79
commit fe3f6de
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 105 deletions.
diff --git a/example/fluid.html b/example/fluid.html
@@ -79,6 +79,30 @@ <h2>Fluid</h2>
     </div>
   </div>
 
+  <!-- fluid corrected -->
+  <div class="fluid-page corrected">
+    <h2>Fluid Corrected</h2>
+    <div class="fluid-row">
+      <div class="fluid-column fluid-1">1</div>
+      <div class="fluid-column fluid-11">11
+        <div class="fluid-row">
+          <div class="fluid-column fluid-1">1</div>
+          <div class="fluid-column fluid-10">10
+            <div class="fluid-row">
+              <div class="fluid-column fluid-1">1</div>
+              <div class="fluid-column fluid-9">9
+                <div class="fluid-row">
+                  <div class="fluid-column fluid-1">1</div>
+                  <div class="fluid-column fluid-8">8</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- fluid nested -->
   <div class="fluid-page">
     <h2>Fluid Nested</h2>

diff --git a/example/scss/fluid.scss b/example/scss/fluid.scss
@@ -1,8 +1,12 @@
+$fluid-support-for-ie7: true;
+
 // import the grid
-@import "grid/fluid";
+@import "../../stylesheets/grid/fluid";
 @include grid-css;
 @include fluid-css;
 
+//@debug precision();
+
 .column {
   background-color: #ccc;
   margin-bottom: $grid-gutter-width;
@@ -32,20 +36,31 @@
   }
 }
 
+.corrected {
+  $context: 11 $grid-columns;
+  /*.fluid-11 .fluid-1 { @include fluid(1, 0, $context, 0, true); }
+  .fluid-11 .fluid-10 { @include fluid(10, 0, $context, 0, true);
+    .fluid-1 { @include fluid(1, 0, join(10, $context), 0, true); }
+    .fluid-9 { @include fluid(9, 0, join(10, $context), 0, true);
+   
+      .fluid-1 { @include fluid(1, 0, join(9 10, $context), 0, true); }
+      .fluid-8 { @include fluid(8, 0, join(9 10, $context), 0, true); }
+      .fluid-row { @include fluid-row-gutters(join(9 10, $context)); }
+    }
+    .fluid-row { @include fluid-row-gutters(join(10, $context)); }
+  }
+  .fluid-11 .fluid-row { @include fluid-row-gutters($context); }
+  */
+}
+
 .borders {
   .column, .fluid-column {
     border: 2px solid black;
   }
-  @for $i from 1 through $grid-columns {
-    .grid-#{$i} { width: grid-column-width($i, -4px); }
-  }
 }
 
 .padding {
   .column, .fluid-column {
     padding: 0 $grid-gutter-width/2;
   }
-  @for $i from 1 through $grid-columns {
-    .grid-#{$i} { width: grid-column-width($i, -$grid-gutter-width); }
-  }
 }
diff --git a/example/scss/media.scss b/example/scss/media.scss
@@ -60,28 +60,28 @@ footer {
 		margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(4, $grid-gutter-width));
 	}
 	.left-column {
-		@include fluid-column(4, $parent: 4);
+		@include fluid-column(4, $context: 4);
 	}
 	.main-column {
-		@include fluid-column(4, $parent: 4);
+		@include fluid-column(4, $context: 4);
 		section {
 			@include fluid-row();
 		}
 		section.intro {
 			margin: 0;
 		}
 		article {
-			@include fluid-column(4, $parent: 4);
+			@include fluid-column(4, $context: 4);
 
 			.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(4)); }
 			.float-left { float: none; margin-right: 0; }
 			.float-right { float: none; margin-left: 0; }
-			img.grid-3 { @include fluid(4, $parent: 4, $parent-plus: -$grid-gutter-width); }
+			img.grid-3 { @include fluid(4, $context: 4, $context-plus: -$grid-gutter-width); }
 		}
 		aside {
-			@include fluid-column(4, $parent: 4);
+			@include fluid-column(4, $context: 4);
 			.box img {
-				width: fluid-column-width(4, $parent: 4, $parent-plus: -$grid-gutter-width);
+				width: fluid-column-width(4, $context: 4, $context-plus: -$grid-gutter-width);
 			}
 		}
 	}
@@ -110,27 +110,27 @@ footer {
 		margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(6, $grid-gutter-width));
 	}
 	.left-column {
-		@include fluid-column(6, $parent: 6);
+		@include fluid-column(6, $context: 6);
 	}
 	.main-column {
-		@include fluid-column(6, $parent: 6);
+		@include fluid-column(6, $context: 6);
 		section {
 			@include fluid-row();
 		}
 		section.intro {
 			margin: 0;
 		}
 		article {
-			@include fluid-column(6, $parent: 6);
+			@include fluid-column(6, $context: 6);
 			.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
 			.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
 			.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
-			img.grid-3 { @include fluid(3, $parent: 6, $parent-plus: -$grid-gutter-width); }
+			img.grid-3 { @include fluid(3, $context: 6, $context-plus: -$grid-gutter-width); }
 		}
 		aside {
-			@include fluid-column(6, $parent: 6);
+			@include fluid-column(6, $context: 6);
 			.box img {
-				width: fluid-column-width(6, $parent: 6, $parent-plus: -$grid-gutter-width);
+				width: fluid-column-width(6, $context: 6, $context-plus: -$grid-gutter-width);
 			}
 		}
 	}
@@ -158,27 +158,27 @@ footer {
 		margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(8, $grid-gutter-width));
 	}
 	.left-column {
-		@include fluid-column(3, $parent: 8);
+		@include fluid-column(3, $context: 8);
 	}
 	.main-column {
-		@include fluid-column(5, $parent: 8);
+		@include fluid-column(5, $context: 8);
 		section {
 			@include fluid-row();
 		}
 		section.intro {
 			margin: 0;
 		}
 		article {
-			@include fluid-column(5, $parent: 5);
+			@include fluid-column(5, $context: 5);
 			.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
 			.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
 			.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
-			img.grid-3 { @include fluid(3, $parent: 5, $parent-plus: -$grid-gutter-width); }
+			img.grid-3 { @include fluid(3, $context: 5, $context-plus: -$grid-gutter-width); }
 		}
 		aside {
-			@include fluid-column(5, $parent: 5);
+			@include fluid-column(5, $context: 5);
 			.box img {
-				width: fluid-column-width(5, $parent: 5, $parent-plus: -$grid-gutter-width);
+				width: fluid-column-width(5, $context: 5, $context-plus: -$grid-gutter-width);
 			}
 		}
 	}
@@ -199,27 +199,27 @@ footer {
 		margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(9, $grid-gutter-width));
 	}
 	.left-column {
-		@include fluid-column(3, $parent: 9);
+		@include fluid-column(3, $context: 9);
 	}
 	.main-column {
-		@include fluid-column(6, $parent: 9);
+		@include fluid-column(6, $context: 9);
 		section {
 			@include fluid-row();
 		}
 		section.intro {
 			margin: 0;
 		}
 		article {
-			@include fluid-column(6, $parent: 6);
+			@include fluid-column(6, $context: 6);
 			.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
 			.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
 			.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
-			img.grid-3 { @include fluid(3, $parent: 6, $parent-plus: -$grid-gutter-width); }
+			img.grid-3 { @include fluid(3, $context: 6, $context-plus: -$grid-gutter-width); }
 		}
 		aside {
-			@include fluid-column(6, $parent: 6);
+			@include fluid-column(6, $context: 6);
 			.box img {
-				width: fluid-column-width(6, $parent: 6, $parent-plus: -$grid-gutter-width);
+				width: fluid-column-width(6, $context: 6, $context-plus: -$grid-gutter-width);
 			}
 		}
 	}
@@ -240,27 +240,27 @@ footer {
 		margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(11, $grid-gutter-width));
 	}
 	.left-column {
-		@include fluid-column(3, $parent: 11);
+		@include fluid-column(3, $context: 11);
 	}
 	.main-column {
-		@include fluid-column(8, $parent: 11);
+		@include fluid-column(8, $context: 11);
 		section {
 			@include fluid-row();
 		}
 		section.intro {
 			margin: 0;
 		}
 		article {
-			@include fluid-column(5, $parent: 8);
+			@include fluid-column(5, $context: 8);
 			.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
 			.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
 			.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
-			img.grid-3 { @include fluid(3, $parent: 5, $parent-plus: -$grid-gutter-width); }
+			img.grid-3 { @include fluid(3, $context: 5, $context-plus: -$grid-gutter-width); }
 		}
 		aside {
-			@include fluid-column(3, $parent: 8);
+			@include fluid-column(3, $context: 8);
 			.box img {
-				width: fluid-column-width(3, $parent: 3, $parent-plus: -$grid-gutter-width);
+				width: fluid-column-width(3, $context: 3, $context-plus: -$grid-gutter-width);
 			}
 		}
 	}

diff --git a/lib/compass-grid.rb b/lib/compass-grid.rb
@@ -6,11 +6,11 @@
 
 module Sass::Script::Functions
   def precision(*args)
-  	if !args[0].nil?
-  		precision = args[0]
-  		assert_type precision, :Number
-  		Sass::Script::Number.precision = precision.value
-  	end
+    if !args[0].nil?
+      precision = args[0]
+      assert_type precision, :Number
+      Sass::Script::Number.precision = precision.value
+    end
     Sass::Script::Number.new(Sass::Script::Number.precision)
   end
 

diff --git a/stylesheets/_grid.scss b/stylesheets/_grid.scss
@@ -30,23 +30,45 @@ $grid-support-for-ie6: false !default;
 //-----------------------------------
 
 // apply a width to a column
-@mixin grid($i, $plus: 0) {
+@mixin grid($i, $plus: 0, $with-gutters: false) {
   width: grid-column-width($i, $plus);
+  @if $with-gutters { @include grid-column-gutters; }
 }
 
-// return a width
+// apply standard gutters to a column or row
+@mixin grid-gutters($row: false) {
+  margin: 0 grid-gutter-width($row);
+}
+@mixin grid-row-gutters() {
+  @include grid-gutters(true);
+}
+@mixin grid-column-gutters() {
+  @include grid-gutters(false);
+}
+
+// return a column width in pixels
 @function grid-column-width($i, $plus: 0) {
   @return $grid-column-width * $i + $grid-gutter-width * ($i - 1) + $plus;
 }
 
+// return a row width in pixels
+@function grid-row-width($i, $plus: 0) {
+  @return grid-column-width($i, $plus + $grid-gutter-width);
+}
+
+// return a gutter width in pixels
+@function grid-gutter-width($row: false) {
+  @return (-$grid-gutter-width / 2 * if($row, -1, 1));
+}
+
 //-----------------------------------
 // Containers
 //-----------------------------------
 
 // specify a container as a page
 @mixin grid-page($i: $grid-columns, $plus: 0) {
   @extend .clearfix;
-  width: grid-column-width($i, $plus + $grid-gutter-width);
+  width: grid-row-width($i, $plus);
   margin: 0 auto;
 }
 
@@ -59,7 +81,7 @@ $grid-support-for-ie6: false !default;
   @if $page {
     margin: 0 0;
   } @else {
-    margin: 0 (-$grid-gutter-width / 2);
+    @include grid-row-gutters;
   }
 }
 
@@ -68,12 +90,11 @@ $grid-support-for-ie6: false !default;
 //-----------------------------------
 
 // specify a column
-@mixin grid-column($i: false, $plus: 0) {
-  margin: 0 ($grid-gutter-width / 2);
+@mixin grid-column($i: false, $plus: 0, $with-gutters: true) {
   float: left;
-
-  @if $grid-support-for-ie6 { display: inline; }
-  
+  @if $grid-support-for-ie6 { _display: inline; }
+  @if $with-gutters { @include grid-column-gutters; }
+
   // apply a width
   @if $i { @include grid($i, $plus); }
 }
@@ -82,9 +103,13 @@ $grid-support-for-ie6: false !default;
 @mixin grid-offset($i: 1, $plus: 0, $side: left) {
   margin-#{$side}: (grid-column-width($i, $grid-gutter-width + $plus) + ($grid-gutter-width/2));
 }
+
+// convenience mixin for left offsets
 @mixin grid-offset-left($i: 1, $plus: 0) {
   @include grid-offset($i, $plus, left);
 }
+
+// convenience mixin for right offsets
 @mixin grid-offset-right($i: 1, $plus: 0) {
   @include grid-offset($i, $plus, right);
 }