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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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