Simplify and bring back the grid mixin for generating spans and offsets

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d67aa9b152bb04bdcab5c83b8284b5175eceef0c..016c320e1d6d2f437f1a43688a9a16336e1c2d73 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -731,71 +731,77 @@ pre code {
   [class^="span"] {
     float: left;
   }
-  .span1 {
-    width: 8.3333333%;
+  .span12 {
+    width: 100%;
   }
-  .span2 {
-    width: 16.6666667%;
+  .span11 {
+    width: 91.66666666666666%;
   }
-  .span3 {
-    width: 25%;
+  .span10 {
+    width: 83.33333333333334%;
   }
-  .span4 {
-    width: 33.3333333%;
+  .span9 {
+    width: 75%;
   }
-  .span5 {
-    width: 41.666666667%;
+  .span8 {
+    width: 66.66666666666666%;
+  }
+  .span7 {
+    width: 58.333333333333336%;
   }
   .span6 {
     width: 50%;
   }
-  .span7 {
-    width: 58.333333333%;
+  .span5 {
+    width: 41.66666666666667%;
   }
-  .span8 {
-    width: 66.666666667%;
+  .span4 {
+    width: 33.33333333333333%;
   }
-  .span9 {
-    width: 75%;
+  .span3 {
+    width: 25%;
   }
-  .span10 {
-    width: 83.333333333%;
+  .span2 {
+    width: 16.666666666666664%;
   }
-  .span11 {
-    width: 91.666666667%;
+  .span1 {
+    width: 8.333333333333332%;
   }
-  .offset1 {
-    margin-left: 8.3333333%;
+  .offset12 {
+    margin-left: 100%;
   }
-  .offset2 {
-    margin-left: 16.6666667%;
+  .offset11 {
+    margin-left: 91.66666666666666%;
   }
-  .offset3 {
-    margin-left: 25%;
+  .offset10 {
+    margin-left: 83.33333333333334%;
   }
-  .offset4 {
-    margin-left: 33.3333333%;
+  .offset9 {
+    margin-left: 75%;
   }
-  .offset5 {
-    margin-left: 41.666666667%;
+  .offset8 {
+    margin-left: 66.66666666666666%;
+  }
+  .offset7 {
+    margin-left: 58.333333333333336%;
   }
   .offset6 {
     margin-left: 50%;
   }
-  .offset7 {
-    margin-left: 58.333333333%;
+  .offset5 {
+    margin-left: 41.66666666666667%;
   }
-  .offset8 {
-    margin-left: 66.666666667%;
+  .offset4 {
+    margin-left: 33.33333333333333%;
   }
-  .offset9 {
-    margin-left: 75%;
+  .offset3 {
+    margin-left: 25%;
   }
-  .offset10 {
-    margin-left: 83.333333333%;
+  .offset2 {
+    margin-left: 16.666666666666664%;
   }
-  .offset11 {
-    margin-left: 91.666666667%;
+  .offset1 {
+    margin-left: 8.333333333333332%;
   }
 }
 

diff --git a/less/grid.less b/less/grid.less
index 47636189bfd34ea7ce6700d20b94e1664914051f..d810d96171b900ea88e89d5c79e1b69e3fc04c56 100644 (file)
--- a/less/grid.less
+++ b/less/grid.less
@@ -10,14 +10,14 @@
 
 // Mobile-first defaults
 .row {
-  margin-left: -10px;
-  margin-right: -10px;
+  margin-left:  @grid-gutter-width / -2;
+  margin-right: @grid-gutter-width / -2;
   .clear_float();
 }
 [class^="span"] {
   min-height: 1px;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left:  @grid-gutter-width / 2;
+  padding-right: @grid-gutter-width / 2;
   // Proper box-model (padding doesn't add to width)
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
@@ -26,38 +26,14 @@
 
 // Responsive: Tablets and up
 @media screen and (min-width: 768px) {
-
   .container {
     max-width: 728px;
   }
-
+  // Generate the grid columns and offsets
   [class^="span"] {
     float: left;
   }
-  .span1 { width: 8.3333333%; }
-  .span2 { width: 16.6666667%; }
-  .span3 { width: 25%; }
-  .span4 { width: 33.3333333%; }
-  .span5 { width: 41.666666667%; }
-  .span6 { width: 50%; }
-  .span7 { width: 58.333333333%; }
-  .span8 { width: 66.666666667%; }
-  .span9 { width: 75%; }
-  .span10 { width: 83.333333333%; }
-  .span11 { width: 91.666666667%; }
-
-  .offset1 { margin-left: 8.3333333%; }
-  .offset2 { margin-left: 16.6666667%; }
-  .offset3 { margin-left: 25%; }
-  .offset4 { margin-left: 33.3333333%; }
-  .offset5 { margin-left: 41.666666667%; }
-  .offset6 { margin-left: 50%; }
-  .offset7 { margin-left: 58.333333333%; }
-  .offset8 { margin-left: 66.666666667%; }
-  .offset9 { margin-left: 75%; }
-  .offset10 { margin-left: 83.333333333%; }
-  .offset11 { margin-left: 91.666666667%; }
-
+  #grid > .core(@grid-column-width, @grid-gutter-width);
 }
 
 // Responsive: Desktops and up
@@ -78,9 +54,6 @@
   }
 }
 
-// Fixed (940px)
-// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
-
 // Reset utility classes due to specificity
 [class*="span"].pull-right {
   float: right;

diff --git a/less/mixins.less b/less/mixins.less
index f00ad6b8e09c71cee99c03fe568da34aca912bce..3282bd10e5a29375c975ed01f8390b7d0a9fb657 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -431,20 +431,33 @@
 
 // Make a Grid
 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-.makeRow() {
-  margin-left: @grid-gutter-width * -1;
-  .clearfix();
+// .makeRow() {
+//   margin-left: @grid-gutter-width * -1;
+//   .clearfix();
+// }
+// .makeColumn(@columns: 1, @offset: 0) {
+//   float: left;
+//   margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
+//   width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
+// }
+
+.make-row() {
+
 }
-.makeColumn(@columns: 1, @offset: 0) {
+.make-column(@columns) {
   float: left;
-  margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
-  width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
+  padding: @grid-gutter-width;
+  width: percentage(@columns / @grid-columns);
+}
+.make-column-offset(@columns) {
+  margin-left: percentage(@columns / @grid-columns);
 }
 
+
 // The Grid
 #grid {
 
-  .core(@grid-column-width, @grid-gutter-width, @grid-row-width) {
+  .core(@grid-column-width, @grid-gutter-width) {
 
     .spanX(@index) when (@index > 0) {
       (~".span@{index}") { .span(@index); }
@@ -458,7 +471,6 @@
     }
     .offsetX(0) {}
 
-
     // Base styles
     .offset(@columns) {
       margin-left: percentage(@columns / @grid-columns);
@@ -467,65 +479,10 @@
       width: percentage(@columns / @grid-columns);
     }
 
-    .row {
-      // Negative indent the columns so text lines up
-      margin-left: @grid-gutter-width / -2;
-      margin-right: @grid-gutter-width / -2;
-      // Clear the floated columns
-      .clearfix();
-    }
-
-    [class*="span"] {
-      float: left; // Collapse whitespace
-      min-height: 1px; // Prevent empty columns from collapsing
-      padding-left: @grid-gutter-width / 2;
-      padding-right: @grid-gutter-width / 2;
-      // Proper box-model (padding doesnt' add to width)
-      -webkit-box-sizing: border-box;
-         -moz-box-sizing: border-box;
-              box-sizing: border-box;
-    }
-
-    // Generate .spanX and .offsetX
-    .spanX(@grid-columns);
-    .offsetX(@grid-columns);
-
-  }
-
-
-  .input(@grid-column-width, @grid-gutter-width, @grid-row-width) {
-
-    .spanX(@index) when (@index > 0) {
-      (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
-      .spanX(@index - 1);
-    }
-    .spanX(0) {}
-
-    .offsetX(@index) when (@index > 0) {
-      (~"input.offset@{index}, textarea.offset@{index}, select.offset@{index}, uneditable-input.offset@{index}") { .offset(@index); }
-      .offsetX(@index - 1);
-    }
-    .offsetX(0) {}
-
-    .span(@columns) {
-      // TODO: Figure out how to add this back behind a class
-      // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
-      //width: percentage(@columns / @grid-columns) - percentage(@grid-gutter-width / @grid-row-width);
-      // Part 2: That subtracted width then gets split in half and added to the left and right margins.
-      // margin-left: percentage((@grid-gutter-width / 2) / @grid-row-width);
-      // margin-right: percentage((@grid-gutter-width / 2) / @grid-row-width);
-    }
-
-    .offset(@columns) {
-      // Take the normal offset margin and add an extra gutter's worth.
-      margin-left: percentage(@columns / @grid-columns) + percentage((@grid-gutter-width / 2) / @grid-row-width);
-    }
-
     // Generate .spanX and .offsetX
     .spanX(@grid-columns);
     .offsetX(@grid-columns);
 
   }
 
-
 }

diff --git a/less/variables.less b/less/variables.less
index 45faa69394d657f94c610bf5bcf546ad18de3698..b02d42fe19df73c8d59146fab41c0832de2a1a2d 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -271,13 +271,3 @@
 @grid-column-width:         60px;
 @grid-gutter-width:         20px;
 @grid-row-width:            (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
-
-// 1200px min
-@grid-column-width-1200:    70px;
-@grid-gutter-width-1200:    30px;
-@grid-row-width-1200:       (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
-
-// 768px-979px
-@grid-column-width-768:     42px;
-@grid-gutter-width-768:     20px;
-@grid-row-width-768:        (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));