From 302252230667f5e65175065cb26d5c9a544a3533 Mon Sep 17 00:00:00 2001 From: Nick Giancola Date: Wed, 11 Apr 2012 18:48:15 -0700 Subject: [PATCH] Adds the ability to override $total-width when calling mixins. Adds an example of this in use in fixed_responsive --- .../fixed_responsive/fixed_responsive.css | 34 +++++++++++ .../fixed_responsive/fixed_responsive.html | 32 ++++++++++ .../fixed_responsive/fixed_responsive.scss | 42 +++++++++++++ stylesheets/scss/grid.scss | 60 +++++++++---------- 4 files changed, 138 insertions(+), 30 deletions(-) create mode 100644 examples/fixed_responsive/fixed_responsive.css create mode 100755 examples/fixed_responsive/fixed_responsive.html create mode 100755 examples/fixed_responsive/fixed_responsive.scss diff --git a/examples/fixed_responsive/fixed_responsive.css b/examples/fixed_responsive/fixed_responsive.css new file mode 100644 index 0000000..98aefac --- /dev/null +++ b/examples/fixed_responsive/fixed_responsive.css @@ -0,0 +1,34 @@ +@import url(../../stylesheets/reset.css); +@import url(../../stylesheets/demo.css); +body { + width: 100%; + *zoom: 1; } + body:before, body:after { + content: ""; + display: table; } + body:after { + clear: both; } + +header#top { + margin-bottom: 1em; } + +#maincolumn { + display: inline; + float: left; + width: 700px; + margin: 0 10px; } + +#sidebar { + display: inline; + float: left; + width: 220px; + margin: 0 10px; } + +@media screen and (max-width: 960px) { + #maincolumn, + #sidebar { + display: inline; + float: left; + width: 97.917%; + margin: 0 1.042%; + margin-bottom: 1em; } } diff --git a/examples/fixed_responsive/fixed_responsive.html b/examples/fixed_responsive/fixed_responsive.html new file mode 100755 index 0000000..cfe25b2 --- /dev/null +++ b/examples/fixed_responsive/fixed_responsive.html @@ -0,0 +1,32 @@ + + + + + + The Semantic Grid System | Non-Fluid Responsive Example + + + + + + + + + + +
+

The Semantic Grid System

+
+ + +
+

Main

+
+ + + + + + \ No newline at end of file diff --git a/examples/fixed_responsive/fixed_responsive.scss b/examples/fixed_responsive/fixed_responsive.scss new file mode 100755 index 0000000..1383621 --- /dev/null +++ b/examples/fixed_responsive/fixed_responsive.scss @@ -0,0 +1,42 @@ +@import '../../stylesheets/reset.css'; +@import '../../stylesheets/demo.css'; +@import '../../stylesheets/scss/grid.scss'; + + +////////// +// GRID // +////////// + +// Specify the number of columns and set column and gutter widths +$columns: 12; +$column-width: 60; +$gutter-width: 20; + +// Remove the definition below for a pixel-based layout +// $total-width: 100%; + + +//////////// +// LAYOUT // +//////////// + +// header +header#top { + margin-bottom: 1em; +} + +// main column & sidebar +#maincolumn { + @include column(9); +} +#sidebar { + @include column(3); +} + +@media screen and (max-width: 960px) { + #maincolumn, + #sidebar { + @include column(12, $total-width:100%); + margin-bottom: 1em; + } +} \ No newline at end of file diff --git a/stylesheets/scss/grid.scss b/stylesheets/scss/grid.scss index 0b937c1..5e5cef0 100644 --- a/stylesheets/scss/grid.scss +++ b/stylesheets/scss/grid.scss @@ -9,7 +9,7 @@ $columns: 12; // Utility function — you should never need to modify this @function gridsystem-width($columns:$columns) { - @return ($column-width * $columns) + ($gutter-width * $columns); + @return ($column-width * $columns) + ($gutter-width * $columns); } // Set $total-width to 100% for a fluid layout @@ -21,16 +21,16 @@ $total-width: gridsystem-width($columns); // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { - *zoom:1; + *zoom:1; - &:before, - &:after { - content:""; - display:table; - } - &:after { - clear:both; - } + &:before, + &:after { + content:""; + display:table; + } + &:after { + clear:both; + } } @@ -39,29 +39,29 @@ $total-width: gridsystem-width($columns); ////////// body { - width: 100%; - @include clearfix(); + width: 100%; + @include clearfix(); } -@mixin row($columns:$columns) { - display: block; - width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns)); - margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1); - // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction; - // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction; - @include clearfix(); +@mixin row($columns:$columns, $total-width:$total-width) { + display: block; + width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns)); + margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1); + // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction; + // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction; + @include clearfix(); } -@mixin column($x,$columns:$columns) { - display: inline; - float: left; - width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns)); - margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns)); - // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction; - // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction; +@mixin column($x,$columns:$columns, $total-width:$total-width) { + display: inline; + float: left; + width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns)); + margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns)); + // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction; + // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction; } -@mixin push($offset:1) { - margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); +@mixin push($offset:1, $total-width:$total-width) { + margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); } -@mixin pull($offset:1) { - margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); +@mixin pull($offset:1, $total-width:$total-width) { + margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); } \ No newline at end of file