grid vars updated

docs/customize.html

@@ -249,19 +249,19 @@
                 <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
 
                 <h3>Grid system</h3>
-                <label>@gridColumns</label>
+                <label>@grid-columns</label>
                 <input type="text" class="span3" placeholder="12">
-                <label>@gridColumnWidth</label>
+                <label>@grid-column-width</label>
                 <input type="text" class="span3" placeholder="60px">
-                <label>@gridGutterWidth</label>
+                <label>@grid-gutter-width</label>
                 <input type="text" class="span3" placeholder="20px">
-                <label>@gridColumnWidth1200</label>
+                <label>@grid-column-width-1200</label>
                 <input type="text" class="span3" placeholder="70px">
-                <label>@gridGutterWidth1200</label>
+                <label>@grid-gutter-width-1200</label>
                 <input type="text" class="span3" placeholder="30px">
-                <label>@gridColumnWidth768</label>
+                <label>@grid-column-width-768</label>
                 <input type="text" class="span3" placeholder="42px">
-                <label>@gridGutterWidth768</label>
+                <label>@grid-gutter-width-768</label>
                 <input type="text" class="span3" placeholder="20px">
 
               </div><!-- /span -->

docs/templates/pages/customize.mustache

@@ -181,19 +181,19 @@
                 <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
 
                 <h3>{{_i}}Grid system{{/i}}</h3>
-                <label>@gridColumns</label>
+                <label>@grid-columns</label>
                 <input type="text" class="span3" placeholder="12">
-                <label>@gridColumnWidth</label>
+                <label>@grid-column-width</label>
                 <input type="text" class="span3" placeholder="60px">
-                <label>@gridGutterWidth</label>
+                <label>@grid-gutter-width</label>
                 <input type="text" class="span3" placeholder="20px">
-                <label>@gridColumnWidth1200</label>
+                <label>@grid-column-width-1200</label>
                 <input type="text" class="span3" placeholder="70px">
-                <label>@gridGutterWidth1200</label>
+                <label>@grid-gutter-width-1200</label>
                 <input type="text" class="span3" placeholder="30px">
-                <label>@gridColumnWidth768</label>
+                <label>@grid-column-width-768</label>
                 <input type="text" class="span3" placeholder="42px">
-                <label>@gridGutterWidth768</label>
+                <label>@grid-gutter-width-768</label>
                 <input type="text" class="span3" placeholder="20px">
 
               </div><!-- /span -->

less/forms.less

@@ -291,7 +291,7 @@ textarea[class*="span"],
 }
 
 .controls-row {
-  #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
+  #grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width);
 }
 
 // Ensure input-prepend/append never wraps

less/grid.less

@@ -9,7 +9,7 @@
 }
 
 // Fixed (940px)
-#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
+#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
 
 // Reset utility classes due to specificity
 [class*="span"].hide {

less/layouts.less

@@ -10,7 +10,7 @@
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .container-fluid {
-  padding-right: @gridGutterWidth;
-  padding-left: @gridGutterWidth;
+  padding-right: @grid-gutter-width;
+  padding-left: @grid-gutter-width;
   .clearfix();
 }
\ No newline at end of file

less/mixins.less

@@ -319,7 +319,7 @@
 }
 
 // CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
+.content-columns(@columnCount, @columnGap: @grid-gutter-width) {
   -webkit-column-count: @columnCount;
      -moz-column-count: @columnCount;
           column-count: @columnCount;
@@ -474,19 +474,19 @@
 // Make a Grid
 // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
 .makeRow() {
-  margin-left: @gridGutterWidth * -1;
+  margin-left: @grid-gutter-width * -1;
   .clearfix();
 }
 .makeColumn(@columns: 1, @offset: 0) {
   float: left;
-  margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  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));
 }
 
 // The Grid
 #grid {
 
-  .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+  .core(@grid-column-width, @grid-gutter-width, @grid-row-width) {
 
     .spanX(@index) when (@index > 0) {
       (~".span@{index}") { .span(@index); }
@@ -503,16 +503,16 @@
 
     // Base styles
     .offset(@columns) {
-      margin-left: percentage(@columns / @gridColumns);
+      margin-left: percentage(@columns / @grid-columns);
     }
     .span(@columns) {
-      width: percentage(@columns / @gridColumns);
+      width: percentage(@columns / @grid-columns);
     }
 
     .row {
       // Negative indent the columns so text lines up
-      margin-left: @gridGutterWidth / -2;
-      margin-right: @gridGutterWidth / -2;
+      margin-left: @grid-gutter-width / -2;
+      margin-right: @grid-gutter-width / -2;
       // Clear the floated columns
       .clearfix();
     }
@@ -520,8 +520,8 @@
     [class*="span"] {
       float: left; // Collapse whitespace
       min-height: 1px; // Prevent empty columns from collapsing
-      padding-left: @gridGutterWidth / 2;
-      padding-right: @gridGutterWidth / 2;
+      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;
@@ -529,13 +529,13 @@
     }
 
     // Generate .spanX and .offsetX
-    .spanX(@gridColumns);
-    .offsetX(@gridColumns);
+    .spanX(@grid-columns);
+    .offsetX(@grid-columns);
 
   }
 
 
-  .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+  .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); }
@@ -552,20 +552,20 @@
     .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 / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      //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((@gridGutterWidth / 2) / @gridRowWidth);
-      // margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      // 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 / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth);
+      margin-left: percentage(@columns / @grid-columns) + percentage((@grid-gutter-width / 2) / @grid-row-width);
     }
 
     // Generate .spanX and .offsetX
-    .spanX(@gridColumns);
-    .offsetX(@gridColumns);
+    .spanX(@grid-columns);
+    .offsetX(@grid-columns);
 
   }
 

less/navbar.less

@@ -173,7 +173,7 @@
 .navbar-static-top .container,
 .navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
-  #grid > .core > .span(@gridColumns);
+  #grid > .core > .span(@grid-columns);
 }
 
 // Fixed to top

less/responsive-1200px-min.less

@@ -11,7 +11,7 @@
   }
 
   // Fixed grid
-  #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
-  // #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
+  #grid > .core(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
+  // #grid > .input(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
 
 }

less/responsive-768px-979px.less

@@ -6,6 +6,6 @@
 @media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
-  #grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768);
+  #grid > .core(@grid-column-width-768, @grid-gutter-width-768, @grid-row-width-768);
 
 }

less/variables.less

@@ -262,17 +262,17 @@
 // --------------------------------------------------
 
 // Default 940px grid
-@gridColumns:             12;
-@gridColumnWidth:         60px;
-@gridGutterWidth:         20px;
-@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+@grid-columns:             12;
+@grid-column-width:         60px;
+@grid-gutter-width:         20px;
+@grid-row-width:            (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
 
 // 1200px min
-@gridColumnWidth1200:     70px;
-@gridGutterWidth1200:     30px;
-@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
+@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
-@gridColumnWidth768:      42px;
-@gridGutterWidth768:      20px;
-@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
+@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));