Changing col method

kenwheeler · Mar 12, 2014 · 0884e4d · 0884e4d
1 parent e525d2c
commit 0884e4d
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 124 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -55,6 +55,13 @@ <h2>Container Mixin</h2>
 
 .container {
     @include container;
+}
+                </code>
+                <code class="prettyprint">
+// Use on divs wrapping col mixins
+
+.container {
+    @include col-container;
 }
                 </code>
             </section>
@@ -74,7 +81,7 @@ <h2>Span Mixin</h2>
                     <div class="float-tile"></div>
                 </div>
                 <code class="prettyprint">
-// Requires container with clear() mixin
+// Requires container with container() mixin
 // Use span function to just get width
 
 .tile {
@@ -87,19 +94,18 @@ <h2>Span Mixin</h2>
                     <h2>Col Mixin</h2>
                 </header>
                 <code class="prettyprint">
-// Works like span but with margins
+// Creates columns with margins using the justify method
 // cols : int - Column count
-// gutter : boolean - Use grid gutter : optional
 
-@include col(cols, padding);
+@include col(cols);
                 </code>
-                <div class="container">
+                <div class="col-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
+// Requires a container with col-container mixin
 
 .col {
     @include col(4);

diff --git a/demo/styles/main.css b/demo/styles/main.css
@@ -185,17 +185,27 @@ main {
       float: left; }
       main section .float-tile.offset-tile {
         margin-left: 33.33333%; }
+    main section .col-container {
+      width: 100%;
+      text-align: justify !important;
+      text-justify: distribute-all-lines;
+      font-size: 0 !important;
+      max-width: 600px;
+      margin-bottom: 20px; }
+      main section .col-container > * {
+        text-align: left;
+        font-sze: 1rem; }
+      main section .col-container:after {
+        content: '';
+        display: inline-block;
+        width: 100%; }
     main section .col-tile {
-      width: 30.66667%;
-      margin-left: 4%;
-      float: left;
-      background: #fee;
+      width: 30.83333%;
+      vertical-align: top;
+      display: inline-block;
       border: 1px solid #dcc;
+      background: #fee;
       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
@@ -114,10 +114,14 @@ main {
                 @include offset(4);
             }
         }
+        .col-container {
+            @include col-container();
+            margin-bottom: 20px;
+        }
         .col-tile {
-            @include col(4, true);
-            background: #fee;
+            @include col(4);
             border: 1px solid #dcc;
+            background: #fee;
             height: 100px;
         }
     }