overhaul the grid CSS to make it more durable for tables and forms to use the same sizing methods; need to see about improving this in the future

4 files changed, 45 insertions, 17 deletions

diff --git a/lib/forms.less b/lib/forms.less
index 77e1ce24b..85e6e361e 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -235,9 +235,7 @@ textarea.xxlarge {
 // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
 .formColumns(@columnSpan: 1) {
   display: inline-block;
-  float: none;
   width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
-  margin-left: 0;
 }
 input,
 textarea,
diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e..c4469e539 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -981,7 +981,7 @@ input[type=submit].btn {
 // -----------
 
 .media-grid {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   margin-bottom: 0;
   .clearfix();
   li {
@@ -990,7 +990,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 4px;
-    margin: 0 0 20px 20px;
+    margin: 0 0 @baseline @gridGutterWidth;
     border: 1px solid #ddd;
     .border-radius(4px);
     .box-shadow(0 1px 1px rgba(0,0,0,.075));
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc05..4f8634710 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -82,7 +82,7 @@ a {
 
 // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
 // Credit to @dhg for the idea
-[class*="span"] {
+.row > [class*="span"] {
   .gridColumn();
 }
 
@@ -115,18 +115,20 @@ a {
 .span24    { .columns(24); }
 
 // Offset column options
-.offset1   { .offset(1); }
-.offset2   { .offset(2); }
-.offset3   { .offset(3); }
-.offset4   { .offset(4); }
-.offset5   { .offset(5); }
-.offset6   { .offset(6); }
-.offset7   { .offset(7); }
-.offset8   { .offset(8); }
-.offset9   { .offset(9); }
-.offset10  { .offset(10); }
-.offset11  { .offset(11); }
-.offset12  { .offset(12); }
+.row {
+  & > .offset1   { .offset(1); }
+  & > .offset2   { .offset(2); }
+  & > .offset3   { .offset(3); }
+  & > .offset4   { .offset(4); }
+  & > .offset5   { .offset(5); }
+  & > .offset6   { .offset(6); }
+  & > .offset7   { .offset(7); }
+  & > .offset8   { .offset(8); }
+  & > .offset9   { .offset(9); }
+  & > .offset10  { .offset(10); }
+  & > .offset11  { .offset(11); }
+  & > .offset12  { .offset(12); }
+}
 
 // Unique column sizes for 16-column grid
 .span-one-third     { width: 300px; }
diff --git a/lib/tables.less b/lib/tables.less
index dcc72d3ea..949072001 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -52,6 +52,34 @@ table {
 }
 
 
+// TABLE CELL SIZES
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+  // Default columns
+  .span1     { .tableColumns(1); }
+  .span2     { .tableColumns(2); }
+  .span3     { .tableColumns(3); }
+  .span4     { .tableColumns(4); }
+  .span5     { .tableColumns(5); }
+  .span6     { .tableColumns(6); }
+  .span7     { .tableColumns(7); }
+  .span8     { .tableColumns(8); }
+  .span9     { .tableColumns(9); }
+  .span10    { .tableColumns(10); }
+  .span11    { .tableColumns(11); }
+  .span12    { .tableColumns(12); }
+  .span13    { .tableColumns(13); }
+  .span14    { .tableColumns(14); }
+  .span15    { .tableColumns(15); }
+  .span16    { .tableColumns(16); }
+}
+
+
 // ZEBRA-STRIPING
 // --------------