compass-grid-plugin 0.0.3 → 0.0.4

data/lib/compass-grid.rb

@@ -2,4 +2,17 @@ require 'compass' # Ensure Compass
 require 'compass/grid'
 
 # Ensure maximum useful precision
-Sass::Script::Number.precision = 7
+Sass::Script::Number.precision = 7
+
+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
+    Sass::Script::Number.new(Sass::Script::Number.precision)
+  end
+
+  declare :precision, :args => [:number]
+end

data/lib/compass/grid.rb

@@ -1,7 +1,7 @@
-require 'compass/grid/version'
-
-module Compass
-  module Grid
-    Compass::Frameworks.register('compass-grid', :path => "#{File.dirname(__FILE__)}/../..")
-  end
+require 'compass/grid/version'
+
+module Compass
+  module Grid
+    Compass::Frameworks.register('compass-grid', :path => "#{File.dirname(__FILE__)}/../..")
+  end
 end

data/lib/compass/grid/version.rb

@@ -1,5 +1,5 @@
 module Compass
   module Grid
-    VERSION = '0.0.3'
+    VERSION = '0.0.4'
   end
 end

data/stylesheets/_grid.scss

@@ -1,127 +1,152 @@
-// Compass Clearfix
-@import "compass/utilities/general/clearfix";
-
-//-----------------------------------
-// Defaults
-//-----------------------------------
-$grid-column-width: 60px !default;
-$grid-gutter-width: 20px !default;
-$grid-columns: 12 !default;
-
-// apply fixes for IE6
-//$grid-extend-clearfix: true !default;
-$grid-clearfix-class: true !default;
-$grid-support-for-ie6: false !default;
-
-@if $grid-clearfix-class {
-  .clearfix {
-    @if $grid-clearfix-class == clearfix {
-      @include clearfix;
-    } @else if $grid-clearfix-class == legacy-pie-clearfix {
-      @include legacy-pie-clearfix;
-    } @else {
-      @include pie-clearfix;
-    }
-  }
-}
-
-//-----------------------------------
-// Column Widths
-//-----------------------------------
-
-// apply a width to a column
-@mixin grid($i, $plus: 0) {
-  width: grid-column-width($i, $plus);
-}
-
-// return a width
-@function grid-column-width($i, $plus: 0) {
-  @return $grid-column-width * $i + $grid-gutter-width * ($i - 1) + $plus;
-}
-
-//-----------------------------------
-// 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);
-  margin: 0 auto;
-}
-
-// specify a container as a row
-@mixin grid-row($page: false) {
-  @extend .clearfix;
-  width: auto;
-  
-  // rows directly inside a page don't need the negative margin
-  @if $page {
-    margin: 0 0;
-  } @else {
-    margin: 0 (-$grid-gutter-width / 2);
-  }
-}
-
-//-----------------------------------
-// Columns
-//-----------------------------------
-
-// specify a column
-@mixin grid-column($i: false, $plus: 0) {
-  margin: 0 ($grid-gutter-width / 2);
-  float: left;
-  
-  @if $grid-support-for-ie6 { display: inline; }
-  
-  // apply a width
-  @if $i { @include grid($i, $plus); }
-}
-
-// alter the margins of a column
-@mixin grid-offset($i: 1, $plus: 0, $side: left) {
-  margin-#{$side}: (grid-column-width($i, $grid-gutter-width + $plus) + ($grid-gutter-width/2));
-}
-@mixin grid-offset-left($i: 1, $plus: 0) {
-  @include grid-offset($i, $plus, left);
-}
-@mixin grid-offset-right($i: 1, $plus: 0) {
-  @include grid-offset($i, $plus, right);
-}
-
-//-----------------------------------
-// Default Styles
-//-----------------------------------
-@mixin grid-css() {
-  // containers
-  .page {
-    @include grid-page;
-  }
-  .row {
-    @include grid-row;
-  }
-  .page > .row {
-    @include grid-row(true);
-  }
-
-  // columns
-  .column {
-    @include grid-column;
-  }
-
-  @for $i from 1 through $grid-columns {
-    // columns widths
-    .grid-#{$i} { width: grid-column-width($i); }
-
-    // alter left and right margins
-    @if $i < $grid-columns {
-      .before-#{$i} { @include grid-offset-left($i); }
-      .after-#{$i} { @include grid-offset-right($i); }
-    }
-  }
-
-  // Box
-  .box {
-    margin-bottom: $grid-gutter-width;
-  }
+// Compass Clearfix
+@import "compass/utilities/general/clearfix";
+
+//-----------------------------------
+// Defaults
+//-----------------------------------
+$grid-column-width: 60px !default;
+$grid-gutter-width: 20px !default;
+$grid-columns: 12 !default;
+
+// apply fixes for IE6
+//$grid-extend-clearfix: true !default;
+$grid-clearfix-class: true !default;
+$grid-support-for-ie6: false !default;
+
+@if $grid-clearfix-class {
+  .clearfix {
+    @if $grid-clearfix-class == clearfix {
+      @include clearfix;
+    } @else if $grid-clearfix-class == legacy-pie-clearfix {
+      @include legacy-pie-clearfix;
+    } @else {
+      @include pie-clearfix;
+    }
+  }
+}
+
+//-----------------------------------
+// Column Widths
+//-----------------------------------
+
+// apply a width to a column
+@mixin grid($i, $plus: 0, $with-gutters: false) {
+  width: grid-column-width($i, $plus);
+  @if $with-gutters { @include grid-column-gutters; }
+}
+
+// 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-row-width($i, $plus);
+  margin: 0 auto;
+}
+
+// specify a container as a row
+@mixin grid-row($page: false) {
+  @extend .clearfix;
+  width: auto;
+  
+  // rows directly inside a page don't need the negative margin
+  @if $page {
+    margin: 0 0;
+  } @else {
+    @include grid-row-gutters;
+  }
+}
+
+//-----------------------------------
+// Columns
+//-----------------------------------
+
+// specify a column
+@mixin grid-column($i: false, $plus: 0, $with-gutters: true) {
+  float: left;
+  @if $grid-support-for-ie6 { _display: inline; }
+  @if $with-gutters { @include grid-column-gutters; }
+
+  // apply a width
+  @if $i { @include grid($i, $plus); }
+}
+
+// alter the margins of a column
+@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);
+}
+
+//-----------------------------------
+// Default Styles
+//-----------------------------------
+@mixin grid-css() {
+  // containers
+  .page {
+    @include grid-page;
+  }
+  .row {
+    @include grid-row;
+  }
+  .page > .row {
+    @include grid-row(true);
+  }
+
+  // columns
+  .column {
+    @include grid-column;
+  }
+
+  @for $i from 1 through $grid-columns {
+    // columns widths
+    .grid-#{$i} { width: grid-column-width($i); }
+
+    // alter left and right margins
+    @if $i < $grid-columns {
+      .before-#{$i} { @include grid-offset-left($i); }
+      .after-#{$i} { @include grid-offset-right($i); }
+    }
+  }
+
+  // Box
+  .box {
+    margin-bottom: $grid-gutter-width;
+  }
 }

data/stylesheets/grid/_fluid.scss

@@ -2,40 +2,59 @@
 @import "compass/css3/box-sizing";
 
 // Ensure grid is included
-@import "grid";
+@import "../../stylesheets/grid";
+@import "../../stylesheets/grid/fluid/helpers";
 
 //-----------------------------------
 // Defaults
 //-----------------------------------
+$fluid-support-for-ie7: false !default;
 
 //-----------------------------------
 // Column Widths
 //-----------------------------------
 
 // apply a width to a column
-@mixin fluid($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0, $with-gutters: false) {
-  width: fluid-column-width($i, $plus, $parent, $parent-plus);
-  @if $with-gutters { @include fluid-gutters($parent, $parent-plus); }
+@mixin fluid($i, $plus: 0, $context: $grid-columns, $context-plus: 0, $with-gutters: false) {
+  width: fluid-column-width($i, $plus, $context, $context-plus);
+  @if $fluid-support-for-ie7 { 
+    *width: fluid-column-width($i, $plus, $context, $context-plus, $nudge: true);
+  }
+  @if $with-gutters { @include fluid-column-gutters($context, $context-plus); }
 }
 
 // apply standard gutters to a column or row
-@mixin fluid-gutters($parent: $grid-columns, $parent-plus: 0, $row: false) {
-  margin: 0 fluid-width($grid-gutter-width / 2 * if($row, -1, 1), grid-column-width($parent, $parent-plus + if($row, 0, $grid-gutter-width)));
+@mixin fluid-gutters($context: $grid-columns, $context-plus: 0, $row: false) {
+  margin: 0 fluid-gutter-width($context, $context-plus, $row);
+  @if $fluid-support-for-ie7 { 
+    *margin: 0 fluid-gutter-width($context, $context-plus, $row, $nudge: true);
+  }
+}
+@mixin fluid-row-gutters($context: $grid-columns, $context-plus: 0) {
+  @include fluid-gutters($context, $context-plus, true);
+}
+@mixin fluid-column-gutters($context: $grid-columns, $context-plus: 0) {
+  @include fluid-gutters($context, $context-plus, false);
 }
 
-// return a percentage width relative to a column width
-@function fluid-column-width($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
-  @return fluid-width(grid-column-width($i, $plus), grid-column-width($parent, $parent-plus + $grid-gutter-width));
+// return a percentage column width relative to a row width
+@function fluid-column-width($i, $plus: 0, $context: $grid-columns, $context-plus: 0, $nudge: false) {
+  @return fluid-width(grid-column-width($i, $plus), grid-row-width($context, $context-plus), $nudge);
+}
+
+// return a percentage gutter width relative to a column or row width
+@function fluid-gutter-width($context: $grid-columns, $context-plus: 0, $row: false, $nudge: false) {
+  @return fluid-width($grid-gutter-width / 2 * if($row, -1, 1), grid-row-width($context, $context-plus + if($row, 0, $grid-gutter-width)), $nudge);
 }
 
 // return a percentage width relative to a parent width
-@function fluid-width($width, $parent-width: grid-column-width($grid-columns, $grid-gutter-width)) {
-  @return percentage($width / $parent-width);
+@function fluid-width($width, $context-width: grid-column-width($grid-columns, $grid-gutter-width), $nudge: false) {
+  @return percentage($width / $context-width) + if($nudge, fluid-nudge($context-width), 0);
 }
 
 // return a percentage for a half-pixel
-@function fluid-nudge($parent-width: grid-column-width($grid-columns, $grid-gutter-width), $vendor: webkit) {
-  @return percentage(if($vendor == ie, -0.5px, 0.5px) / $parent-width);
+@function fluid-nudge($context-width: grid-column-width($grid-columns, $grid-gutter-width)) {
+  @return percentage(-0.5px / $context-width);
 }
 
 
@@ -53,7 +72,7 @@
 }
 
 // specify a container as a row
-@mixin fluid-row($page: false, $parent: $grid-columns, $parent-plus: 0) {
+@mixin fluid-row($page: false, $context: $grid-columns, $context-plus: 0) {
   @extend .clearfix;
   @include box-sizing(border-box);
   width: auto;
@@ -62,7 +81,7 @@
   @if $page {
     margin: 0 0;
   } @else {
-    @include fluid-gutters($parent, $parent-plus, true);
+    @include fluid-row-gutters($context, $context-plus);
   }
 }
 
@@ -71,30 +90,32 @@
 //-----------------------------------
 
 // specify a column
-@mixin fluid-column($i: false, $plus: 0, $parent: $grid-columns, $parent-plus: 0, $with-gutters: true) {
+@mixin fluid-column($i: false, $plus: 0, $context: $grid-columns, $context-plus: 0, $with-gutters: true) {
   @include box-sizing(border-box);
-  @if $with-gutters { @include fluid-gutters($parent, $parent-plus); }
   float: left;
-  
-  @if $grid-support-for-ie6 { display: inline; }
+  @if $grid-support-for-ie6 { _display: inline; }
+  @if $with-gutters { @include fluid-column-gutters($context, $context-plus); }
   
   // apply a width
-  @if $i { @include fluid($i, $plus, $parent, $parent-plus); }
+  @if $i { @include fluid($i, $plus, $context, $context-plus); }
 }
 
 // alter the margins of a column
-@mixin fluid-offset($i: 1, $plus: 0, $side: left, $parent: $grid-columns, $parent-plus: 0) {
-  margin-#{$side}: (fluid-column-width($i, $grid-gutter-width + $plus) + fluid-width($grid-gutter-width / 2, grid-column-width($parent, $parent-plus + $grid-gutter-width)));
+@mixin fluid-offset($i: 1, $plus: 0, $side: left, $context: $grid-columns, $context-plus: 0) {
+  margin-#{$side}: (fluid-column-width($i, $plus) + fluid-gutter-width($context, $context-plus) * 3);
+  @if $fluid-support-for-ie7 {
+    *margin-#{$side}: (fluid-column-width($i, $plus, $context, $context-plus, $nudge: nudge) + fluid-gutter-width($context, $context-plus, $nudge: nudge) * 3);
+  }
 }
 
 // convenience mixin for left offsets
-@mixin fluid-offset-left($i: 1, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
-  @include fluid-offset($i, $plus, left, $parent, $parent-plus);
+@mixin fluid-offset-left($i: 1, $plus: 0, $context: $grid-columns, $context-plus: 0) {
+  @include fluid-offset($i, $plus, left, $context, $context-plus);
 }
 
 // convenience mixin for right offsets
-@mixin fluid-offset-right($i: 1, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
-  @include fluid-offset($i, $plus, right, $parent, $parent-plus);
+@mixin fluid-offset-right($i: 1, $plus: 0, $context: $grid-columns, $context-plus: 0) {
+  @include fluid-offset($i, $plus, right, $context, $context-plus);
 }
 
 //-----------------------------------
@@ -119,8 +140,8 @@
     // columns widths
     .fluid-#{$i} {
       width: fluid-column-width($i);
-      > .fluid-row { @include fluid-gutters($i, $row: true); }
-      > .fluid-row > .fluid-column { @include fluid-gutters($i); }
+      > .fluid-row { @include fluid-row-gutters($i); }
+      > .fluid-row > .fluid-column { @include fluid-column-gutters($i); }
       @for $j from 1 through $grid-columns - 1 {
         @if $j <= $i {
           > .fluid-row > .fluid-#{$j} { width: fluid-column-width($j, 0, $i); }