Updates as per suggestions

kenwheeler · Mar 10, 2014 · d65061a · d65061a
1 parent 544901d
commit d65061a
Show file tree

Hide file tree

Showing 9 changed files with 390 additions and 215 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -64,7 +64,7 @@ <h2>Span Mixin</h2>
                 </header>
                 <code class="prettyprint">
 // cols : int - Column count
-// padding : px - Interior padding : optional
+// padding : boolean - Use grid padding : optional
 
 @include span(cols, padding);
                 </code>
@@ -79,6 +79,30 @@ <h2>Span Mixin</h2>
 
 .tile {
     @include span(4);
+}
+                </code>
+            </section>
+            <section>
+                <header>
+                    <h2>Col Mixin</h2>
+                </header>
+                <code class="prettyprint">
+// Works like span but with margins
+// cols : int - Column count
+// gutter : boolean - Use grid gutter : optional
+
+@include col(cols, padding);
+                </code>
+                <div class="container">
+                    <div class="col-tile"></div>
+                    <div class="col-tile"></div>
+                    <div class="col-tile"></div>
+                </div>
+                <code class="prettyprint">
+// Requires container with clear() mixin
+
+.col {
+    @include col(4);
 }
                 </code>
             </section>
@@ -173,6 +197,7 @@ <h2>Helper Mixins</h2>
 //  clear:both;
 // }
 //
+// Use @extend %clear; outside of media queries
 
 @include clear;
 
@@ -190,9 +215,10 @@ <h2>Helper Mixins</h2>
 // Hide Text
 //
 // overflow:hidden;
-// text-indent:-9999px;
-// display:block;
+// text-indent: 100%;
+// white-space: nowrap;
 //
+// Use @extend %hide-text; outside of media queries
 
 @include hide-text;
 
@@ -205,13 +231,14 @@ <h2>Helper Mixins</h2>
 //  > li{
 //      display:block;
 //      float:left;
-//      &:last-child{
-//          margin-right:0px;
-//      }
 //  }
 
 @include inline-list;
 
+// Pass false to render list items as inline-block instead of float
+
+@include inline-list(false);
+
                 </code>
             </section>
             <section class="typography">
@@ -225,7 +252,9 @@ <h2>Typographic Rhythm</h2>
 // $line-height-base - line height base
 // $type-rhythm-ratio - header scaling ratio
 
-@include type(16px, 26, 1.14);
+@include type(16px, 26px, 1.14);
+
+@include type(16px, 1.5, 1.14);
 
 // No arguments required, falls back to settings variables
 
@@ -261,27 +290,26 @@ <h2>Settings</h2>
                 </header>
                 <p>Override these variables at the top of your scss file.</p>
                 <code class="prettyprint">
-
 // Set base font size
 $rem-base: 16px !default;
-// Set line height ratio base
-$line-height-base: 26;
+// Set line height ratio base. Accepts px, em, rem or int values
+$line-height-base: 26px !default;
 // Vertical rhythm ratio
-$type-rhythm-ratio: 1.14;
-
+$type-rhythm-ratio: 1.14 !default;
 // Desktop Media Query
-$desktop: "(min-width: 1024px)";
+$desktop: "(min-width: 1024px)" !default;
 // Tablet Media Query
-$tablet: "(min-width: 768px) and (max-width: 1023px)";
+$tablet: "(min-width: 768px) and (max-width: 1023px)" !default;
 // Mobile Media Query
-$mobile: "(max-width: 767px)";
-
+$mobile: "(max-width: 767px)" !default;
 // Set Grid Column Count
-$grid-columns: 12;
-// Set Grid Gutter
-$grid-gutter: 20px;
-// Set Grid Max Width
-$grid-max-width: 1024px;
+$grid-columns: 12 !default;
+// Set Grid Gutter (percentage)
+$grid-gutter: 4 !default;
+// Set Grid Padding (as px)
+$grid-padding: 20px !default;
+// Set Grid Max Width (as px)
+$grid-max-width: 1024px !default;
                 </code>
             </section>
             <section>

diff --git a/demo/styles/main.css b/demo/styles/main.css
@@ -1,3 +1,5 @@
+
+
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
@@ -24,9 +26,9 @@ table {
   border-spacing: 0; }
 
 * {
+  box-sizing: border-box;
   -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box; }
+  -moz-box-sizing: border-box; }
 
 body {
   line-height: 1.625; }
@@ -84,12 +86,13 @@ a.download-button {
   font-weight: bold;
   background: #eee;
   border: 1px solid #ddd;
+  border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
-  border-radius: 5px;
+  transition: all 50ms linear;
   -webkit-transition: all 50ms linear;
   -moz-transition: all 50ms linear;
-  transition: all 50ms linear;
+  -ms-transition: all 50ms linear;
   margin: 0px 0px 20px; }
 
 a.download-button:hover {
@@ -115,16 +118,16 @@ header.primary {
     padding: 0px 0px 20px 0px; }
   @media (max-width: 767px) {
     header.primary {
+      padding-left: 20px;
+      padding-right: 20px;
+      width: 100%;
       width: 100%;
-      max-width: 600px;
-      padding-left: 10px;
-      padding-right: 10px;
       float: left; }
       header.primary h1 {
+        padding-left: 20px;
+        padding-right: 20px;
+        width: 100%;
         width: 100%;
-        max-width: 600px;
-        padding-left: 10px;
-        padding-right: 10px;
         float: left;
         margin-left: 0%; } }
 
@@ -137,10 +140,10 @@ main {
     display: table;
     clear: both; }
   main section {
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 100%;
     width: 100%;
-    max-width: 600px;
-    padding-left: 10px;
-    padding-right: 10px;
     float: left; }
     main section header {
       margin: 0px 0px 20px 0px;
@@ -167,26 +170,28 @@ main {
         display: table;
         clear: both; }
     main section .float-tile {
+      padding-left: 20px;
+      padding-right: 20px;
+      width: 33.33333%;
       width: 33.33333%;
-      max-width: 600px;
-      padding-left: 10px;
-      padding-right: 10px;
       float: left;
       background: #fee;
       border: 1px solid #dcc;
       height: 100px;
       float: left; }
       main section .float-tile.offset-tile {
         margin-left: 33.33333%; }
-    main section .inline-tile {
-      width: 33.33333%;
-      max-width: 600px;
-      padding-left: true/2;
-      padding-right: true/2;
+    main section .col-tile {
+      width: 30.66667%;
+      margin-left: 4%;
       float: left;
       background: #fee;
       border: 1px solid #dcc;
       height: 100px; }
+      main section .col-tile:first-child {
+        margin-left: 0; }
+      main section .col-tile:last-child {
+        float: right; }
 
 footer.primary {
   width: 100%;

diff --git a/demo/styles/main.scss b/demo/styles/main.scss
@@ -36,7 +36,7 @@ a.download-button {
     font-weight: bold;
     background: #eee;
     border: 1px solid #ddd;
-    @include prefixer(border-radius, 5px, webkit moz o spec);
+    @include prefixer(border-radius, 5px, webkit moz);
     @include transition(all 50ms linear);
     margin: 0px 0px 20px;
 }
@@ -103,7 +103,7 @@ main {
             margin-bottom: 20px;
         }
         .float-tile {
-            @include span(4);
+            @include span(4, true);
             background: #fee;
             border: 1px solid #dcc;
             height: 100px;
@@ -112,8 +112,8 @@ main {
                 @include offset(4);
             }
         }
-        .inline-tile {
-            @include span(4, true);
+        .col-tile {
+            @include col(4, true);
             background: #fee;
             border: 1px solid #dcc;
             height: 100px;