Updated col.js to reflect new scss classes.

diff --git a/html/index.html b/html/index.html
index bb37dc13b7507b11072afda9c8e23a8a1ba07a19..54deb0ce8dea7ebb9966b8ef937427812db10376 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -16,45 +16,23 @@
     <tr>
       <container>
         <row>
-          <column num="four">
-            Explicitly declare four col
-            <div class="bloop">
-            bloop 
-            </div>
+          <column class="green">
+            I'm evenly
           </column>
-          <column num="eight">eight col</column>
+          <column class="blue">distributed</column>
+          <column class="red">into 3 columns</column>
         </row>
       </container>
 
       <container>
         <row>
-          <column num="two">
-            <center>two col centered</center> 
-          </column>
-          <column num="eight">
-            <center>eight col centered</center>
-          </column>
-          <column num="two">
-            <center>two col centered</center> 
-          </column>
-        </row>
-      </container>
-
-        <container>
-        <row>
-          <column class="green">
-            I'm evenly
+          <column class="green" small='8'>
+            .large-4 .small-8
           </column>
-          <column class="blue">distributed</column>
-          <column class="red">into</column>
-          <column class="green">two</column>
-          <column class="blue">columns</column>
-          <column class="red">each</column>
+          <column class="blue" small='2'>.large-4 .small-2</column>
+          <column class="red" small='2'>.large-4 .small-2</column>
         </row>
       </container>
-
-      <container>empty container</container>
-      <row>empty row</row>
     </tr>
   </table>
 </body>

diff --git a/js/components/col.js b/js/components/col.js
index db2a04dbee5eb74ebe43184b37c70acfff8993bf..bccddfe72dc76fae8e49142a20efd61f6ed8c7dc 100644 (file)
--- a/js/components/col.js
+++ b/js/components/col.js
@@ -3,31 +3,53 @@
 
 var createCol = function(obj) {
   var output = '';
+  var mQ     = {small: 0, large: 0};
+  var colEven  = '';
+
+  $.each(obj, function() {
+    var col = $(this);
+
+    // do the maths first
+    $.each( mQ, function(i, val) {
+      if (!col.attr(i)) {
+        // count the number of columns that do not have a specified width
+        mQ[i]++;
+
+        // at the final iteration
+        if (mQ[i] === obj.length) {
+          // divide the default grid number by the number of colums with no width
+          var evenSplit = Math.floor( 12 / (mQ[i]) );
+
+          // append the missing class to the column class
+          colEven += i + '-' + evenSplit + ' ';
+        }
+      };
+    });
+  });
 
   $.each(obj, function(v,k) {
-    var temp = ''
+    var temp     = ''
     var contents = $(this).html();
     var colClass = 'columns ' + $(this).attr('class');
-    var colNum;
-    if ($(this).attr('num')) {
-      colNum = $(this).attr('num');
-    }
-    else {
-      // divide row evenly into number of column elements
-      // round down, just in case
-      var map   = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"];
-      var index = Math.floor( 12 / (obj.length) );
-      colNum = map[index - 1];
-    }
+    var colNum   = '';
+    var col      = $(this);
+
+    $.each( mQ, function(i, val) {
+      if (col.attr(i)) {
+        colNum += i + '-' + col.attr(i) + ' ';
+      };
+    });
+
     // check if this is the last element in the row
+    // add previously calculated even class
     if (v !== obj.length - 1) {
       temp = '<td class="wrapper">' 
-              +'<table class="' + colClass + ' ' + colNum +'">'
+              +'<table class="' + colClass + ' ' + colNum + colEven +'">'
               +'<tr><td>'
               + contents +'</td><td class="expander"></td></tr></table></td>';
     } else {
       temp = '<td class="wrapper last">' 
-              +'<table class="' + colClass + ' ' + colNum +'">'
+              +'<table class="' + colClass + ' ' + colNum + colEven +'">'
               +'<tr><td>'
               + contents +'</td><td class="expander"></td></tr></table></td>';
     }   

diff --git a/scss/ink.scss b/scss/ink.scss
index 6d81bd70bebcc9d1931e47ac54d1e1b4938b9a3b..abd52a24a3a1f855638eb8239c877c8b975da6f0 100755 (executable)
--- a/scss/ink.scss
+++ b/scss/ink.scss
@@ -22,6 +22,7 @@
     background: #00558B;
     font-family: Helvetica;
   }
+
   .container{
     background:#fff;
     border:1px solid #eee;