Merge pull request #200 from jenius/table-layout

adds table-layout

Author: Jeff Escalante

axis/layout.styl

@@ -112,3 +112,22 @@ ratio-box(ratio = 1/1)
     display: block
     height: 0
     padding-top: (1 / ratio) * 100%
+
+
+// Mixin: Table Layout
+//
+// Sometimes you just need a good old-fashioned table layout.
+// Read more: http://colintoh.com/blog/display-table-anti-hero
+//
+// ex: tl()
+// ex: tl(auto)
+
+tl(layoutType = fixed)
+  display: table
+  table-layout: layoutType  // "fixed" or "auto"
+  margin: 0
+  padding: 0
+  width: 100%
+
+  > *
+    display: table-cell

test/fixtures/layout/table-layout.css

@@ -0,0 +1,10 @@
+.tl {
+  display: table;
+  table-layout: fixed;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.tl > * {
+  display: table-cell;
+}

test/fixtures/layout/table-layout.styl

@@ -0,0 +1,2 @@
+.tl
+  tl()

test/test.coffee

@@ -167,6 +167,9 @@ describe 'layout', ->
   it 'vertical-align', (done) ->
     compile_and_match(path.join(@path, 'vertical-align.styl'), done)
 
+  it 'table-layout', (done) ->
+    compile_and_match(path.join(@path, 'table-layout.styl'), done)    
+
 describe 'print', ->
 
   before -> @path = path.join(test_path, 'print')

test/visual.html

@@ -49,6 +49,7 @@
     <link rel='stylesheet' href='fixtures/layout/media.css' >
     <link rel='stylesheet' href='fixtures/layout/ratio-box.css' >
     <link rel='stylesheet' href='fixtures/layout/vertical-align.css' >
+    <link rel='stylesheet' href='fixtures/layout/table-layout.css' >    
 
     <!-- tables -->
     <link rel='stylesheet' href='fixtures/tables/table.css' >
@@ -256,6 +257,14 @@ <h1>layout</h1>
         <div class='inner-div reset'>not vertically aligned</div>
       </div>
 
+      <ul class="tl">
+        <li>
+          <h1>Table Layout Mixin</h1>Adding more lines here.<br/>Will add height<br/>to the li's to the right.
+        </li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+      </ul>
     </section>
 
     <section id='tables'>