compass-grid-plugin 0.0.5 → 0.0.6

data/README.md

@@ -44,6 +44,9 @@ The primary grid is a fixed, pixel grid. This grid is ideal for designs that do
 - **$grid-column-width**: *60px* - The width of 1 column
 - **$grid-gutter-width**: *20px* - The space between 2 columns
 - **$grid-columns**: *12* - The total number of columns
+- **$grid-clearfix-extend:** *false* - Determines if clearfix is applied directly to pages and rows or if an `@extend` directive should be used. Extend directives can make the code more compact but will cause issues in [Sass 3.1.19](http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#3119) when `@media` queries are used.
+- **$grid-clearfix-class:** *clearfix* - Sets the name of the clearfix class to extend if `$grid-clearfix-extend` is set to true.
+- **$grid-clearfix-mixin:** *pie-clearfix* - Sets the mixin to use for the clearfix if `$grid-clearfix-extend` is set to false.
 - **$grid-clearfix-class**: *true* - Create a `.clearfix` class to extend
 - **$grid-support-for-ie6**: *false* - Apply fixes for IE6
 
@@ -54,9 +57,9 @@ The primary grid is a fixed, pixel grid. This grid is ideal for designs that do
 
 ### Mixins
 - **grid(** *$i*, *[$plus: 0]*, *[$with-gutters: false]* **)** - Mixin for applying widths to a column. The `$plus` argument can be used to alter the width to account for borders or padding. The `$with-gutters` argument will optionally output the gutter margins in addition to the width.
-- **grid-page(** *[$i: $grid-columns]*, *[$plus: 0]* **)** - Mixin for declaring a page element. `$i` is `$grid-columns` by default but can be altered. The `$plus` argument can be used to alter the width to account for borders or padding.
+- **grid-page(** *[$i: $grid-columns]*, *[$plus: 0]*, *[$extend: $grid-clearfix-extend]* **)** - Mixin for declaring a page element. `$i` is `$grid-columns` by default but can be altered. The `$plus` argument can be used to alter the width to account for borders or padding.
 - **grid-row(** *[$page: false]* **)** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
-- **grid-column(** *[$i: false]*, *[$plus: 0]* **)** - Mixin for declaring a column. Specifying `$i` will call the `grid` mixin. The `$plus` argument is passed to the `grid` mixin if `$i` is also specified.
+- **grid-column(** *[$i: false]*, *[$plus: 0]*, *[$extend: $grid-clearfix-extend]* **)** - Mixin for declaring a column. Specifying `$i` will call the `grid` mixin. The `$plus` argument is passed to the `grid` mixin if `$i` is also specified.
 - **grid-gutters(** *[$row: false]* **)** - Mixin for adding gutter margins to a column or a row. The `$row` argument controls if the returned margins are negative. Rows require a negative margin.
 - **grid-row-gutters( )** - Mixin for adding gutter margins to a row.
 - **grid-column-gutters( )** - Mixin for adding gutter margins to a column.
@@ -85,8 +88,8 @@ The fluid grid uses the variables from the fixed grid module.
 
 ### Mixins
 - **fluid(** *$i*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$with-gutters: false]* **)** - Mixin for applying widths to a column. The `$plus` argument can be used to alter the width to account for borders or padding. The `$with-gutters` argument will optionally output the gutter margins in addition to the width.
-- **fluid-page(** *[$i: $grid-columns]*, *[$plus: 0]*, *[$use-max-width: true]* **)** - Mixin for declaring a page element. `$i` is `$grid-columns` by default but can be altered. The `$plus` argument can be used to alter the width to account for borders or padding. The `$use-max-width` determines if a pixel max-width is applied as well.
-- **fluid-row(** *[$page: false]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for declaring a column container. The `$page` argument is for removing the negative margins when a row is directly inside a page element.
+- **fluid-page(** *[$i: $grid-columns]*, *[$plus: 0]*, *[$use-max-width: true]*, *[$extend: $grid-clearfix-extend]* **)** - Mixin for declaring a page element. `$i` is `$grid-columns` by default but can be altered. The `$plus` argument can be used to alter the width to account for borders or padding. The `$use-max-width` determines if a pixel max-width is applied as well.
+- **fluid-row(** *[$page: false]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$extend: $grid-clearfix-extend]* **)** - Mixin for declaring a column container. The `$page` argument is for removing the negative margins when a row is directly inside a page element.
 - **fluid-column(** *[$i: false]*, *[$plus: 0]*, *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$with-gutters: true]* **)** - Mixin for declaring a column. Specifying `$i` will call the `grid` mixin. The `$plus` argument is passed to the *grid* mixin if `$i` is also specified. The `$with-gutters` argument can be used to omit the gutter margins.
 - **fluid-offset(** *[$i: 1]*, *[$plus: 0]*, *[$side]*, *[$context: $grid-columns]*, *[$context-plus: 0]* **)** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The `$i` argument specifies the width of the offset in columns. The `$plus` argument can be used to alter the width. `$side` can be right, left, top or bottom (although right and left are the most useful).
 - **fluid-gutters(** *[$context: $grid-columns]*, *[$context-plus: 0]*, *[$row: false]* **)** - Mixin for adding gutter margins to a column or a row. The `$row` argument controls if the returned margins are negative. Rows require a negative margin.

data/example/scss/fixed.scss

@@ -1,7 +1,12 @@
 // import the grid
-@import "grid";
+@import "../../stylesheets/grid";
+$grid-clearfix-extend: true;
 @include grid-css;
 
+.clearfix {
+  @include grid-clearfix-rules;
+}
+
 .column {
   background-color: #ccc;
   margin-bottom: $grid-gutter-width;

data/lib/compass/grid/version.rb

@@ -1,5 +1,5 @@
 module Compass
   module Grid
-    VERSION = '0.0.5'
+    VERSION = '0.0.6'
   end
 end

data/stylesheets/_grid.scss

@@ -8,20 +8,27 @@ $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;
-    }
+$grid-clearfix-extend: false !default;
+$grid-clearfix-class: clearfix !default; // clearfix
+$grid-clearfix-mixin: pie-clearfix !default; // pie-clearfix
+
+$grid-support-for-ie6: false !default; // apply fixes for IE6
+
+@mixin grid-clearfix($clearfix-mixin: $grid-clearfix-mixin, $clearfix-extend: $grid-clearfix-extend) {
+  @if not($clearfix-extend) {
+    @include grid-clearfix-rules($clearfix-mixin);
+  } @else {
+    @extend .#{$grid-clearfix-class};
+  }
+}
+
+@mixin grid-clearfix-rules ($clearfix-mixin: $grid-clearfix-mixin) {
+  @if $clearfix-mixin == clearfix {
+    @include clearfix;
+  } @else if $clearfix-mixin == legacy-pie-clearfix {
+    @include legacy-pie-clearfix;
+  } @else {
+    @include pie-clearfix;
   }
 }
 
@@ -66,15 +73,15 @@ $grid-support-for-ie6: false !default;
 //-----------------------------------
 
 // specify a container as a page
-@mixin grid-page($i: $grid-columns, $plus: 0) {
-  @extend .clearfix;
+@mixin grid-page($i: $grid-columns, $plus: 0, $extend: $grid-clearfix-extend) {
+  @include grid-clearfix($extend);
   width: grid-row-width($i, $plus);
   margin: 0 auto;
 }
 
 // specify a container as a row
-@mixin grid-row($page: false) {
-  @extend .clearfix;
+@mixin grid-row($page: false, $extend: $grid-clearfix-extend) {
+  @include grid-clearfix($extend);
   width: auto;
   
   // rows directly inside a page don't need the negative margin

data/stylesheets/grid/_fluid.scss

@@ -73,10 +73,10 @@ $fluid-debug: false !default;
 //-----------------------------------
 
 // specify a container as a page
-@mixin fluid-page($i: $grid-columns, $plus: 0, $use-max-width: true) {
+@mixin fluid-page($i: $grid-columns, $plus: 0, $use-max-width: true, $extend: $grid-clearfix-extend) {
   @if $fluid-debug { @debug "@mixin fluid-page", $i, $plus, $use-max-width; }
 
-  @extend .clearfix;
+  @include grid-clearfix($extend);
   @include box-sizing(border-box);
   @if $use-max-width { max-width: grid-column-width($i, $plus + $grid-gutter-width); }
   width: 100%;
@@ -84,10 +84,10 @@ $fluid-debug: false !default;
 }
 
 // specify a container as a row
-@mixin fluid-row($page: false, $context: $grid-columns, $context-plus: 0) {
+@mixin fluid-row($page: false, $context: $grid-columns, $context-plus: 0, $extend: $grid-clearfix-extend) {
   @if $fluid-debug { @debug "@mixin fluid-row", $page, $context, $context-plus; }
 
-  @extend .clearfix;
+  @include grid-clearfix($extend);
   @include box-sizing(border-box);
   width: auto;
   

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-grid-plugin
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-15 00:00:00.000000000 Z
+date: 2012-06-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass