Big thing happenin. Adding td's, changin up the padding, all sorts of stuff. Small...

diff --git a/scss/ink.scss b/scss/ink.scss
index 8598e31a2878f60c3b0a4dc23380ad0713d5455b..9b42bd398e6995d2e4bfb85e08d1b3a36ffea899 100755 (executable)
--- a/scss/ink.scss
+++ b/scss/ink.scss
@@ -115,3 +115,7 @@ table.columns .right-text-pad {
     padding-right: 10px !important;
   }
 }
+
+.my-class {
+  background: red;
+}

diff --git a/scss/ink/_functions.scss b/scss/ink/_functions.scss
index 8ab663a896476a3efa014bbd272062b34b61f47b..6a96fdb85cb1c4c9acd29ed9f1c986c52e99e1af 100755 (executable)
--- a/scss/ink/_functions.scss
+++ b/scss/ink/_functions.scss
@@ -40,6 +40,6 @@ $modules: () !default;
   @return floor(percentage(($colNumber / $totalColumns)) * 1000000) / 1000000;
 }
 
-@function grid-calc-px($colNumber, $totalColumns, $conWidth, $colGutter) {
-  @return (($conWidth - ($totalColumns - 1) * $colGutter) / $totalColumns * $colNumber + ($colNumber - 1) * $colGutter);
+@function grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
+  @return ($containerWidth / $totalColumns * $columnNumber - $grid-column-gutter);
 }
\ No newline at end of file

diff --git a/scss/ink/components/_global.scss b/scss/ink/components/_global.scss
index 532fe09a551b14857ed22394cfbab4bd021bf093..22ff7e469eab4faf01d4486b5c514fe3fddd7084 100755 (executable)
--- a/scss/ink/components/_global.scss
+++ b/scss/ink/components/_global.scss
@@ -52,10 +52,6 @@ $white: #fefefe !default;
 /// @type Color
 $pre-color: #ff6908 !default;
 
-/// Global column gutter spacing.
-/// @type Number
-$column-gutter: 20px !default;
-
 /// Global width of the container.
 /// @type Number
 $container-width: 580px !default;
@@ -71,3 +67,7 @@ $global-radius: 3px !default;
 /// Global rounded radius of rounded-corners.
 /// @type Number
 $global-rounded: 500px !default;
+
+/// Default gutter for the grid system
+/// @type Number
+$grid-column-gutter: 16px;
\ No newline at end of file

diff --git a/scss/ink/components/_grid.scss b/scss/ink/components/_grid.scss
index c11a63805e7474f4bfbe2c5f46dbbc9a02d0e7f5..3216b14958050f90014b50d41c2c5b26f514f7c0 100755 (executable)
--- a/scss/ink/components/_grid.scss
+++ b/scss/ink/components/_grid.scss
@@ -47,80 +47,95 @@ table.container table.row {
   display: block;
 }
 
-table.wrapper {
-  padding: $wrapper-padding-top $column-gutter 0 0;
-  position: relative;
-}
-
+//Begin new gutter!
 td.columns,
-td.column {
+td.column,
+th.columns,
+th.column {
   margin: 0 auto;
+  padding-left: $grid-column-gutter;
 }
 
-table.columns td,
-table.column td {
-  padding: 0 0 $column-padding-bottom;
-}
-
-table.row td.last,
-table.container td.last {
-  padding-right: 0;
+td.columns.last,
+td.column.last,
+th.columns.last,
+th.column.last {
+  padding-right: $grid-column-gutter;
 }
 
 @for $i from 1 through $grid-column-count {
-  td.large-#{$i} {
-    width: grid-calc-px($i, $grid-column-count, $container-width, $column-gutter);
+  td.large-#{$i},
+  th.large-#{$i} {
+    width: grid-calc-px($i, $grid-column-count, $container-width);
+    padding-left: $grid-column-gutter / 2;
+    padding-right: $grid-column-gutter / 2;
+  }
+
+  td.large-#{$i}.first,
+  th.large-#{$i}.first {
+    padding-left: $grid-column-gutter;
+  }
+
+  td.large-#{$i}.last,
+  th.large-#{$i}.last {
+    padding-right: $grid-column-gutter;
+  }
+
+  td.large-#{$i}.collapse,
+  th.large-#{$i}.collapse {
+    padding-right: 0;
+    padding-left: 0;
+    width: grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter;
   }
 }
 
 @for $i from 1 through $grid-column-count {
   td.large-#{$i} center {
-    min-width: grid-calc-px($i, $grid-column-count, $container-width, $column-gutter);
+    min-width: grid-calc-px($i, $grid-column-count, $container-width);
   }
 }
 
 @for $i from 1 through $grid-column-count {
   .body .columns td.large-#{$i},
-  .body .column td.large-#{$i} {
+  .body .column td.large-#{$i},
+  .body .columns th.large-#{$i},
+  .body .column th.large-#{$i} {
     width: grid-calc-pct($i, $grid-column-count);
   }
 }
 
 @for $i from 1 through ($grid-column-count - 1) {
-  td.offset-by-#{$i} {
-    padding-left: grid-calc-px($i, $grid-column-count, $container-width, $column-gutter) + $column-gutter;
+  td.offset-by-#{$i},
+  th.offset-by-#{$i} {
+    padding-left: grid-calc-px($i, $grid-column-count, $container-width);
   }
 }
 
-td.expander {
+td.expander,
+th.expander {
   visibility: hidden;
   width: 0;
   padding: 0 !important;
 }
 
-table.columns .text-pad,
-table.column .text-pad {
-  padding-left: $text-padding;
-  padding-right: $text-padding;
-}
-
-table.columns .left-text-pad,
-table.columns .text-pad-left,
-table.column .left-text-pad,
-table.column .text-pad-left {
-  padding-left: $text-padding;
-}
-
-table.columns .right-text-pad,
-table.columns .text-pad-right,
-table.column .right-text-pad,
-table.column .text-pad-right {
-  padding-right: $text-padding;
-}
+// table.columns .text-pad,
+// table.column .text-pad {
+//   padding-left: $text-padding;
+//   padding-right: $text-padding;
+// }
 
+// table.columns .left-text-pad,
+// table.columns .text-pad-left,
+// table.column .left-text-pad,
+// table.column .text-pad-left {
+//   padding-left: $text-padding;
+// }
 
+// table.columns .right-text-pad,
+// table.columns .text-pad-right,
+// table.column .right-text-pad,
+// table.column .text-pad-right {
+//   padding-right: $text-padding;
+// }
 
 
-table.gutter {
-  margin: 10px;
-}

diff --git a/scss/ink/components/_media-query.scss b/scss/ink/components/_media-query.scss
index ffd2da9624b57c6d4338a14ab0f3c7d20d8e94c5..750055e77fc7e67a453b4f724d00694a37824e1e 100755 (executable)
--- a/scss/ink/components/_media-query.scss
+++ b/scss/ink/components/_media-query.scss
@@ -31,69 +31,64 @@ $small-range: $container-width !default;
     width: $small-container-width !important;
   }
 
-  table[class="body"] .row {
-    // width: 100% !important;
-    // display: block !important;
-  }
-
-// Brandon no likey
-  // table[class="body"] .wrapper {
-  //   display: block !important;
-  //   padding-right: 0 !important;
-  // }
 
   table[class="body"] .columns,
   table[class="body"] .column {
-    display: block !important;
-    float: left !important;
     height: auto !important;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
   }
 
-  // table[class="body"] .wrapper.first .columns,
-  // table[class="body"] .wrapper.first .column {
-  //   display: table !important;
-  // }
-
-  // table[class="body"] table.columns td,
-  // table[class="body"] table.column td {
-  //   width: 100% !important;
-  // }
-
   @for $i from 1 through $grid-column-count {
-    td.small-#{$i} {
-      width: grid-calc-pct($i, $grid-column-count) !important;    }
-  }
+    td.small-#{$i},
+    th.small-#{$i} {
+      display: inline-block !important;
 
-  td.small-12 {
-    display: block !important;
+      width: grid-calc-pct($i, $grid-column-count) !important;    
+    }
   }
 
-
-  @for $i from 1 through $grid-column-count {
+  @for $i from 1 through ($grid-column-count - 1) {
     .body .columns td.small-#{$i},
     .body .column td.small-#{$i},
-    td.small-#{$i} center {
+    td.small-#{$i} center,
+
+    .body .columns th.small-#{$i},
+    .body .column th.small-#{$i},
+    th.small-#{$i} center {
+      display: inline-block !important;
       width: grid-calc-pct($i, $grid-column-count) !important;
     }
   }
-  @for $i from 1 through $grid-column-count {
+
+  @for $i from 1 through ($grid-column-count - 1) {
     table[class="body"] .columns td.small-#{$i},
-    table[class="body"] .column td.small-#{$i} {
+    table[class="body"] .column td.small-#{$i},
+    table[class="body"] .columns th.small-#{$i},
+    table[class="body"] .column th.small-#{$i} {
+      display: inline-block !important;
       width: grid-calc-pct($i, $grid-column-count) !important;
     }
   }
 
+  table[class="body"] .columns td.small-#{$grid-column-count},
+  table[class="body"] .column td.small-#{$grid-column-count},
+  table[class="body"] .columns th.small-#{$grid-column-count},
+  table[class="body"] .column th.small-#{$grid-column-count} {
+    display: block !important;
+    width: 100% !important;
+  }
+
   @for $i from 1 through ($grid-column-count - 1) {
-    table[class="body"] td.offset-by-#{$i} {
+    table[class="body"] td.offset-by-#{$i}, 
+    table[class="body"] th.offset-by-#{$i} {
       padding-left: 0 !important;
     }
   }
 
-  table[class="body"] table.columns td.expander {
-    // width: 1px !important;
+  table[class="body"] table.columns td.expander,
+  table[class="body"] table.columns th.expander {
     display: none !important;
   }
 
@@ -119,13 +114,15 @@ $small-range: $container-width !default;
 }
 
 table[class="body"] table.inline-list {
-  td {
+  td,
+  th {
     width: auto !important;
     display: inline-block !important;
   }
 
   &.vertical {
-    td {
+    td,
+    th {
       display: block !important;
     }
   }

diff --git a/scss/ink/components/_type.scss b/scss/ink/components/_type.scss
index 5112a72c139be84d2127ca8b1ae8ed04e847bcbb..b4bc92afc711d117b267e754e0521c4a8fe87c04 100755 (executable)
--- a/scss/ink/components/_type.scss
+++ b/scss/ink/components/_type.scss
@@ -109,7 +109,8 @@ h4,
 h5,
 h6,
 p,
-td {
+td,
+th {
   color: $global-font-color;
   font-family: $global-font-family;
   font-weight: $global-font-weight;
@@ -156,7 +157,8 @@ h6 {
 body,
 table.body,
 p,
-td {
+td,
+th {
   font-size: $body-font-size;
   line-height: $body-line-height;
 }

diff --git a/testing/package.json b/testing/package.json
index e5ce7efaaa45dca95c06494f541c0810571a302e..61e37e48d559762e1795480af43f925ddd321885 100644 (file)
--- a/testing/package.json
+++ b/testing/package.json
@@ -23,7 +23,7 @@
     "gulp-sass": "^2.1.0",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-webserver": "^0.9.1",
-    "inky": "^0.1.0",
+    "inky": "git://github.com/zurb/inky#develop",
     "lazypipe": "^1.0.1",
     "media-query-extractor": "^0.1.1",
     "panini": "^1.1.1",

diff --git a/testing/src/pages/tim-test.html b/testing/src/pages/tim-test.html
index f29c25a4d76be74420edc0a1a42ebfe4bd729c1d..496877882e02fd9798b0593df26f97b9c9e7698f 100644 (file)
--- a/testing/src/pages/tim-test.html
+++ b/testing/src/pages/tim-test.html
@@ -1,34 +1,137 @@
-<container>
-  <table class="row">
-    <tr>
-      <td class="small-12 large-6 columns">
-        <table>
-          <tr>
-            <td class="gutter">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laborum delectus rerum eveniet veritatis, praesentium, pariatur. Libero saepe mollitia numquam voluptatum sapiente, explicabo sint, vitae placeat facere, quos voluptate, consequuntur!
-            </td>
-          </tr>
-        </table>
-      </td>
-      <td class="small-12 large-6 columns">
-        <table>
-          <tr>
-            <td class="gutter">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laborum delectus rerum eveniet veritatis, praesentium, pariatur. Libero saepe mollitia numquam voluptatum sapiente, explicabo sint, vitae placeat facere, quos voluptate, consequuntur!
-            </td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-  </table>
-</container>
-<container>
-  <row>
-    <columns small='12' large='6'>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illo maiores nulla accusantium dolor unde sed blanditiis dolorem, optio id harum vel voluptates, quae atque vero ducimus, voluptatum repellat rem!
-    </columns>
-      <columns small='12' large='6'>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illo maiores nulla accusantium dolor unde sed blanditiis dolorem, optio id harum vel voluptates, quae atque vero ducimus, voluptatum repellat rem!
-      </columns>
-  </row>
-</container>
\ No newline at end of file
+<table class="container">
+  <tr>
+    <td>
+
+    <table class="row">
+      <tr>
+        <th class="large-6 small-6 columns first" style="background: red;">
+          <table>
+            <tr>
+              <th>
+                <p>
+                  One word
+                </p>
+              </th>
+              <th class="expander"></th>
+            </tr>
+          </table>
+        </th>
+        <th class="large-6 small-6 columns last" style="background: blue;">
+          <table>
+            <tr>
+              <th>
+                ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
+              </th>
+              <th class="expander"></th>
+            </tr>
+          </table>
+        </th>
+      </tr>
+    </table>
+
+
+
+      <table class="row">
+        <tr>
+          <th class="large-2 small-12 columns first" style="background: red;">
+            <table>
+              <tr>
+                <th>
+                  <p>
+                    One word
+                  </p>
+                </th>
+                <th class="expander"></th>
+              </tr>
+            </table>
+          </th>
+          <th class="large-4 small-12 columns" style="background: green;">
+            <table>
+              <tr>
+                <th>
+                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
+                </th>
+                <th class="expander"></th>
+              </tr>
+            </table>
+          </th>
+          <th class="large-6 small-12 columns last" style="background: blue;">
+            <table>
+              <tr>
+                <th>
+                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
+                </th>
+                <th class="expander"></th>
+              </tr>
+            </table>
+          </th>
+        </tr>
+      </table>
+
+      <table class="row">
+        <tr>
+          <th class="large-2 small-12 columns first" style="background: red;">
+            <table>
+              <tr>
+                <th>
+                  <p>
+                    One word
+                  </p>
+                </th>
+                <th class="expander"></th>
+              </tr>
+            </table>
+          </th>
+          <th class="large-4 small-4 columns" style="background: green;">
+            <table>
+              <tr>
+                <th>
+                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
+                </th>
+                <th class="expander"></th>
+              </tr>
+            </table>
+          </th>
+          <th class="large-6 small-8 columns last" style="background: blue;">
+            <table>
+              <tr>
+                <th>
+                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
+                </th>
+                <th class="expander"></th>
+              </tr>
+            </table>
+          </th>
+        </tr>
+      </table>
+
+
+      <table class="row">
+        <tr>
+          <td class="large-4 small-4 columns first" style="background: red;">
+            <table>
+              <tr>
+                <td class="callout">
+                  One word
+                </td>
+                <td class="expander"></td>
+              </tr>
+            </table>
+          </td>
+          <td class="large-8 small-8 columns last" style="background: blue;">
+            <table>
+              <tr>
+                <td class="callout">
+                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
+                </td>
+                <td class="expander"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+
+
+    </td>
+  </tr>
+</table>
\ No newline at end of file