reorg vars fields on customize page to ensure they are all in three columns for time being

2 files changed, 86 insertions, 84 deletions

diff --git a/docs/customize.html b/docs/customize.html
index 37da451e8..daf1606d1 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -267,8 +267,6 @@
                 <label>@iconWhiteSpritePath</label>
                 <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
 
-              </div><!-- /span -->
-              <div class="span3">
                 <h3>Grid system</h3>
                 <label>@gridColumns</label>
                 <input type="text" class="span3" placeholder="12">
@@ -285,6 +283,9 @@
                 <label>@gridGutterWidth768</label>
                 <input type="text" class="span3" placeholder="20px">
 
+              </div><!-- /span -->
+              <div class="span3">
+
                 <h3>Typography</h3>
                 <label>@sansFontFamily</label>
                 <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
@@ -312,8 +313,7 @@
                 <input type="text" class="span3" placeholder="inherit">
                 <label>@heroUnitLeadColor</label>
                 <input type="text" class="span3" placeholder="inherit">
-              </div><!-- /span -->
-              <div class="span3">
+
                 <h3>Tables</h3>
                 <label>@tableBackground</label>
                 <input type="text" class="span3" placeholder="transparent">
@@ -324,6 +324,45 @@
                 <label>@tableBorder</label>
                 <input type="text" class="span3" placeholder="#ddd">
 
+                <h3>Forms</h3>
+                <label>@placeholderText</label>
+                <input type="text" class="span3" placeholder="@grayLight">
+                <label>@inputBackground</label>
+                <input type="text" class="span3" placeholder="@white">
+                <label>@inputBorder</label>
+                <input type="text" class="span3" placeholder="#ccc">
+                <label>@inputBorderRadius</label>
+                <input type="text" class="span3" placeholder="3px">
+                <label>@inputDisabledBackground</label>
+                <input type="text" class="span3" placeholder="@grayLighter">
+                <label>@formActionsBackground</label>
+                <input type="text" class="span3" placeholder="#f5f5f5">
+                <label>@btnPrimaryBackground</label>
+                <input type="text" class="span3" placeholder="@linkColor">
+                <label>@btnPrimaryBackgroundHighlight</label>
+                <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
+              </div><!-- /span -->
+              <div class="span3">
+
+                <h3>Form states &amp; alerts</h3>
+                <label>@warningText</label>
+                <input type="text" class="span3" placeholder="#c09853">
+                <label>@warningBackground</label>
+                <input type="text" class="span3" placeholder="#fcf8e3">
+                <label>@errorText</label>
+                <input type="text" class="span3" placeholder="#b94a48">
+                <label>@errorBackground</label>
+                <input type="text" class="span3" placeholder="#f2dede">
+                <label>@successText</label>
+                <input type="text" class="span3" placeholder="#468847">
+                <label>@successBackground</label>
+                <input type="text" class="span3" placeholder="#dff0d8">
+                <label>@infoText</label>
+                <input type="text" class="span3" placeholder="#3a87ad">
+                <label>@infoBackground</label>
+                <input type="text" class="span3" placeholder="#d9edf7">
+
                 <h3>Navbar</h3>
                 <label>@navbarHeight</label>
                 <input type="text" class="span3" placeholder="40px">
@@ -366,44 +405,6 @@
                 <label>@dropdownLinkBackgroundHover</label>
                 <input type="text" class="span3" placeholder="@linkColor">
               </div><!-- /span -->
-              <div class="span3">
-                <h3>Forms</h3>
-                <label>@placeholderText</label>
-                <input type="text" class="span3" placeholder="@grayLight">
-                <label>@inputBackground</label>
-                <input type="text" class="span3" placeholder="@white">
-                <label>@inputBorder</label>
-                <input type="text" class="span3" placeholder="#ccc">
-                <label>@inputBorderRadius</label>
-                <input type="text" class="span3" placeholder="3px">
-                <label>@inputDisabledBackground</label>
-                <input type="text" class="span3" placeholder="@grayLighter">
-                <label>@formActionsBackground</label>
-                <input type="text" class="span3" placeholder="#f5f5f5">
-
-                <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
-                <label>@btnPrimaryBackgroundHighlight</label>
-                <input type="text" class="span3" placeholder="darken(@white, 10%);">
-
-                <h3>Form states &amp; alerts</h3>
-                <label>@warningText</label>
-                <input type="text" class="span3" placeholder="#c09853">
-                <label>@warningBackground</label>
-                <input type="text" class="span3" placeholder="#fcf8e3">
-                <label>@errorText</label>
-                <input type="text" class="span3" placeholder="#b94a48">
-                <label>@errorBackground</label>
-                <input type="text" class="span3" placeholder="#f2dede">
-                <label>@successText</label>
-                <input type="text" class="span3" placeholder="#468847">
-                <label>@successBackground</label>
-                <input type="text" class="span3" placeholder="#dff0d8">
-                <label>@infoText</label>
-                <input type="text" class="span3" placeholder="#3a87ad">
-                <label>@infoBackground</label>
-                <input type="text" class="span3" placeholder="#d9edf7">
-              </div><!-- /span -->
             </div><!-- /row -->
           </section>
 
diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index 83f016900..53b1f98ea 100644
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -196,8 +196,6 @@
                 <label>@iconWhiteSpritePath</label>
                 <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
 
-              </div><!-- /span -->
-              <div class="span3">
                 <h3>{{_i}}Grid system{{/i}}</h3>
                 <label>@gridColumns</label>
                 <input type="text" class="span3" placeholder="12">
@@ -214,6 +212,9 @@
                 <label>@gridGutterWidth768</label>
                 <input type="text" class="span3" placeholder="20px">
 
+              </div><!-- /span -->
+              <div class="span3">
+
                 <h3>{{_i}}Typography{{/i}}</h3>
                 <label>@sansFontFamily</label>
                 <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
@@ -241,8 +242,7 @@
                 <input type="text" class="span3" placeholder="inherit">
                 <label>@heroUnitLeadColor</label>
                 <input type="text" class="span3" placeholder="inherit">
-              </div><!-- /span -->
-              <div class="span3">
+
                 <h3>{{_i}}Tables{{/i}}</h3>
                 <label>@tableBackground</label>
                 <input type="text" class="span3" placeholder="transparent">
@@ -253,6 +253,45 @@
                 <label>@tableBorder</label>
                 <input type="text" class="span3" placeholder="#ddd">
 
+                <h3>{{_i}}Forms{{/i}}</h3>
+                <label>@placeholderText</label>
+                <input type="text" class="span3" placeholder="@grayLight">
+                <label>@inputBackground</label>
+                <input type="text" class="span3" placeholder="@white">
+                <label>@inputBorder</label>
+                <input type="text" class="span3" placeholder="#ccc">
+                <label>@inputBorderRadius</label>
+                <input type="text" class="span3" placeholder="3px">
+                <label>@inputDisabledBackground</label>
+                <input type="text" class="span3" placeholder="@grayLighter">
+                <label>@formActionsBackground</label>
+                <input type="text" class="span3" placeholder="#f5f5f5">
+                <label>@btnPrimaryBackground</label>
+                <input type="text" class="span3" placeholder="@linkColor">
+                <label>@btnPrimaryBackgroundHighlight</label>
+                <input type="text" class="span3" placeholder="darken(@white, 10%);">
+
+              </div><!-- /span -->
+              <div class="span3">
+
+                <h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
+                <label>@warningText</label>
+                <input type="text" class="span3" placeholder="#c09853">
+                <label>@warningBackground</label>
+                <input type="text" class="span3" placeholder="#fcf8e3">
+                <label>@errorText</label>
+                <input type="text" class="span3" placeholder="#b94a48">
+                <label>@errorBackground</label>
+                <input type="text" class="span3" placeholder="#f2dede">
+                <label>@successText</label>
+                <input type="text" class="span3" placeholder="#468847">
+                <label>@successBackground</label>
+                <input type="text" class="span3" placeholder="#dff0d8">
+                <label>@infoText</label>
+                <input type="text" class="span3" placeholder="#3a87ad">
+                <label>@infoBackground</label>
+                <input type="text" class="span3" placeholder="#d9edf7">
+
                 <h3>{{_i}}Navbar{{/i}}</h3>
                 <label>@navbarHeight</label>
                 <input type="text" class="span3" placeholder="40px">
@@ -295,44 +334,6 @@
                 <label>@dropdownLinkBackgroundHover</label>
                 <input type="text" class="span3" placeholder="@linkColor">
               </div><!-- /span -->
-              <div class="span3">
-                <h3>{{_i}}Forms{{/i}}</h3>
-                <label>@placeholderText</label>
-                <input type="text" class="span3" placeholder="@grayLight">
-                <label>@inputBackground</label>
-                <input type="text" class="span3" placeholder="@white">
-                <label>@inputBorder</label>
-                <input type="text" class="span3" placeholder="#ccc">
-                <label>@inputBorderRadius</label>
-                <input type="text" class="span3" placeholder="3px">
-                <label>@inputDisabledBackground</label>
-                <input type="text" class="span3" placeholder="@grayLighter">
-                <label>@formActionsBackground</label>
-                <input type="text" class="span3" placeholder="#f5f5f5">
-
-                <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
-                <label>@btnPrimaryBackgroundHighlight</label>
-                <input type="text" class="span3" placeholder="darken(@white, 10%);">
-
-                <h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
-                <label>@warningText</label>
-                <input type="text" class="span3" placeholder="#c09853">
-                <label>@warningBackground</label>
-                <input type="text" class="span3" placeholder="#fcf8e3">
-                <label>@errorText</label>
-                <input type="text" class="span3" placeholder="#b94a48">
-                <label>@errorBackground</label>
-                <input type="text" class="span3" placeholder="#f2dede">
-                <label>@successText</label>
-                <input type="text" class="span3" placeholder="#468847">
-                <label>@successBackground</label>
-                <input type="text" class="span3" placeholder="#dff0d8">
-                <label>@infoText</label>
-                <input type="text" class="span3" placeholder="#3a87ad">
-                <label>@infoBackground</label>
-                <input type="text" class="span3" placeholder="#d9edf7">
-              </div><!-- /span -->
             </div><!-- /row -->
           </section>