Permalink
Browse files

updating examples to use the new fluid-gutters mixin

  • Loading branch information...
1 parent 16dd33e commit 2f0bb461aa1d64f6d375ffe28b3009a838bf4f18 @heygrady committed Apr 23, 2012
Showing with 105 additions and 5 deletions.
  1. +40 −0 example/example-fluid.html
  2. +61 −0 example/scss/example-fluid.scss
  3. +2 −2 example/scss/fixed.scss
  4. +2 −3 example/scss/fluid.scss
View
40 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>
View
61 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; }
View
4 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); }
}
}
View
5 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); }
}
}

0 comments on commit 2f0bb46

Please sign in to comment.