updating examples to use the new fluid-gutters mixin

heygrady · Apr 23, 2012 · 2f0bb46 · 2f0bb46
1 parent 16dd33e
commit 2f0bb46
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 5 deletions.
diff --git a/example/example-fluid.html b/example/example-fluid.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+
+  <title>1KB SCSS Grid Test Page</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+
+  <link rel="stylesheet" href="css/example-fluid.css">
+</head>
+
+<body>
+  <div id="container">
+    <header>
+        <h1>Header</h1>
+        <nav><a href="#">Nav Link</a></nav>
+    </header>
+    <div role="main">
+      <div id="left-column">Left Column</div>
+      <div id="main-column">
+        <section class="hero">
+          Hero Space, I take the full width
+        </section>
+        <section>
+          <article id="content">Actual Content</article>
+          <aside id="right-column">Right Column</aside>
+        </section>
+      </div>
+    </div>
+    <footer>
+      <p>&copy; Copyright 2011</p>
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/example/scss/example-fluid.scss b/example/scss/example-fluid.scss
@@ -0,0 +1,61 @@
+$grid-clearfix-class: false;
+
+// import the grid
+@import "grid/fluid";
+
+// establishes page width and centers
+#container {
+  @include fluid-page;
+}
+
+// main page sections
+[role="main"] {
+  @include fluid-row(true); //true indicates a row is directly inside a page
+}
+
+// header and footer don't have columns in this example
+header, footer {
+  @include fluid-gutters; // gutters, like full-width columns
+  border: 1px solid black;
+  margin-bottom: $grid-gutter-width;
+}
+
+// side columns
+#left-column, #right-column {
+  @include fluid-column($with-gutters: false);
+  border: 1px solid red;
+}
+#left-column {
+  @include fluid(3, 0); //3 columns wide, don't adjust for border
+  @include fluid-gutters; // normal gutters
+}
+#right-column {
+  @include fluid(3, 0, 9); //3 columns wide, 9 column parent, don't adjust for border
+  @include fluid-gutters(9); // gutters in a 9 column parent
+}
+
+// main column
+#main-column {
+  @include fluid-column(9); //9 columns wide
+
+  // sections in the main column are rows
+  > section {
+    @include fluid-row(false, 9);
+    margin-bottom: $grid-gutter-width;
+  }
+
+  // hero sections don't have columns in this example
+  > section.hero {
+    border: 1px solid black;
+    margin-left: 0; // remove the right and left margins because this isn't a row
+    margin-right: 0;
+  }
+}
+
+// center column
+#content {
+  @include fluid-column(6, 0, 9); //6 columns wide, adjust for border, don't adjust for border
+  border: 1px solid blue;
+}
+
+.clearfix { @include pie-clearfix; }
diff --git a/example/scss/fixed.scss b/example/scss/fixed.scss
@@ -12,7 +12,7 @@
     border: 2px solid black;
   }
   @for $i from 1 through $grid-columns {
-    .grid-#{$i} { width: grid-width($i, -4px); }
+    .grid-#{$i} { width: grid-column-width($i, -4px); }
   }
 }
 
@@ -21,6 +21,6 @@
     padding: 0 $grid-gutter-width/2;
   }
   @for $i from 1 through $grid-columns {
-    .grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
+    .grid-#{$i} { width: grid-column-width($i, -$grid-gutter-width); }
   }
 }
diff --git a/example/scss/fluid.scss b/example/scss/fluid.scss
@@ -1,5 +1,4 @@
 // import the grid
-@import "grid";
 @import "grid/fluid";
 @include grid-css;
 @include fluid-css;
@@ -38,7 +37,7 @@
     border: 2px solid black;
   }
   @for $i from 1 through $grid-columns {
-    .grid-#{$i} { width: grid-width($i, -4px); }
+    .grid-#{$i} { width: grid-column-width($i, -4px); }
   }
 }
 
@@ -47,6 +46,6 @@
     padding: 0 $grid-gutter-width/2;
   }
   @for $i from 1 through $grid-columns {
-    .grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
+    .grid-#{$i} { width: grid-column-width($i, -$grid-gutter-width); }
   }
 }