From 47177b5d2b207f452231e640411049dbf1827295 Mon Sep 17 00:00:00 2001 From: jstoller Date: Fri, 4 May 2012 17:50:15 -0700 Subject: [PATCH 1/4] Add column-position, gutter-width and box-sizing variables to zen-grid-item-width() function. We will need this for more advanced features, like variable width columns. Make the function default to the total grid width if no variables are input. --- stylesheets/zen/_grids.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/stylesheets/zen/_grids.scss b/stylesheets/zen/_grids.scss index 59a411b..b4e8b4e 100644 --- a/stylesheets/zen/_grids.scss +++ b/stylesheets/zen/_grids.scss @@ -218,6 +218,7 @@ $zen-reverse-all-floats: false !default; // @mixin zen-grid-flow-item ( $column-span, + $column-position, $parent-column-count: false, $alpha-gutter: false, $omega-gutter: true, @@ -261,7 +262,7 @@ $zen-reverse-all-floats: false !default; } // Calculate the item's width. - $width: zen-grid-item-width($column-span, $columns, $grid-width); + $width: zen-grid-item-width($column-span, $column-position, $columns, $gutter-width, $grid-width, $box-sizing); @if $box-sizing == content-box { @if not comparable($width, $gutter-width) { $units-gutter: unit($gutter-width); @@ -316,9 +317,12 @@ $zen-reverse-all-floats: false !default; // Calculates the width of a grid item that spans the specified number of columns. @function zen-grid-item-width ( - $column-span, + $column-span: $zen-column-count, + $column-position: 1, $column-count: $zen-column-count, - $grid-width: $zen-grid-width + $gutter-width: $zen-gutter-width, + $grid-width: $zen-grid-width, + $box-sizing: $zen-box-sizing ) { @return $column-span * zen-unit-width($column-count, $grid-width); } From 9fd5775ea528a82dd066f7fb24a85454b6ff598e Mon Sep 17 00:00:00 2001 From: jstoller Date: Fri, 4 May 2012 18:00:50 -0700 Subject: [PATCH 2/4] Move box sizing check inside the zen-grid-item-width() function. --- stylesheets/zen/_grids.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/stylesheets/zen/_grids.scss b/stylesheets/zen/_grids.scss index b4e8b4e..f1cd006 100644 --- a/stylesheets/zen/_grids.scss +++ b/stylesheets/zen/_grids.scss @@ -263,15 +263,6 @@ $zen-reverse-all-floats: false !default; // Calculate the item's width. $width: zen-grid-item-width($column-span, $column-position, $columns, $gutter-width, $grid-width, $box-sizing); - @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 { @@ -324,7 +315,16 @@ $zen-reverse-all-floats: false !default; $grid-width: $zen-grid-width, $box-sizing: $zen-box-sizing ) { - @return $column-span * zen-unit-width($column-count, $grid-width); + $width: $column-span * zen-unit-width($column-count, $grid-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; + } + @return $width; } // Returns the opposite direction, given "left" or "right". From 9c6707012988d24dad51c240dd2085b09e48c156 Mon Sep 17 00:00:00 2001 From: jstoller Date: Fri, 4 May 2012 23:54:53 -0700 Subject: [PATCH 3/4] Use zen-grid-item-width() to calculate the width of grid items. --- stylesheets/zen/_grids.scss | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/stylesheets/zen/_grids.scss b/stylesheets/zen/_grids.scss index f1cd006..74bc986 100644 --- a/stylesheets/zen/_grids.scss +++ b/stylesheets/zen/_grids.scss @@ -92,10 +92,6 @@ $zen-reverse-all-floats: false !default; $reverse-all-floats: $zen-reverse-all-floats, $auto-include-item-base: $zen-auto-include-item-base ) { - - // Calculate the unit width. - $unit-width: zen-unit-width($column-count, $grid-width); - // Determine the float direction and its reverse. $dir: $float-direction; @if $reverse-all-floats { @@ -104,16 +100,7 @@ $zen-reverse-all-floats: false !default; $rev: zen-direction-flip($dir); float: $dir; - $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; + width: zen-grid-item-width($column-span, $column-position, $column-count, $gutter-width, $grid-width, $box-sizing); margin: { #{$dir}: ($column-position - 1) * $unit-width; #{$rev}: (1 - $column-position - $column-span) * $unit-width; From 868e6c0d7a70a929cc1edec98079bab19e846a98 Mon Sep 17 00:00:00 2001 From: jstoller Date: Sat, 5 May 2012 00:29:37 -0700 Subject: [PATCH 4/4] Use zen-grid-item-width() to calculate grid item margins. --- stylesheets/zen/_grids.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stylesheets/zen/_grids.scss b/stylesheets/zen/_grids.scss index 74bc986..82757ee 100644 --- a/stylesheets/zen/_grids.scss +++ b/stylesheets/zen/_grids.scss @@ -102,8 +102,8 @@ $zen-reverse-all-floats: false !default; float: $dir; width: zen-grid-item-width($column-span, $column-position, $column-count, $gutter-width, $grid-width, $box-sizing); margin: { - #{$dir}: ($column-position - 1) * $unit-width; - #{$rev}: (1 - $column-position - $column-span) * $unit-width; + #{$dir}: zen-grid-item-width(($column-position - 1), 1, $column-count, $gutter-width, $grid-width, border-box); + #{$rev}: - zen-grid-item-width(($column-position + $column-span - 1), 1, $column-count, $gutter-width, $grid-width, border-box); } // Auto-apply the unit base mixin.