Part 1 of unCamelCasing variables

6 files changed, 44 insertions, 48 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index c8a785fed..ce9f16857 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -131,7 +131,7 @@
           <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
 
           <h3>Built with Less</h3>
-          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
+          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@base-font-size</code> and <code>@base-line-height</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
 
 
           <hr class="bs-docs-separator">
diff --git a/docs/customize.html b/docs/customize.html
index e23a23466..16a76e3a7 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -237,16 +237,16 @@
             <div class="row download-builder">
               <div class="span3">
                 <h3>Scaffolding</h3>
-                <label>@bodyBackground</label>
+                <label>@body-background</label>
                 <input type="text" class="span3" placeholder="@white">
-                <label>@textColor</label>
+                <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
                 <h3>Links</h3>
-                <label>@linkColor</label>
+                <label>@link-color</label>
                 <input type="text" class="span3" placeholder="#08c">
-                <label>@linkColorHover</label>
-                <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+                <label>@link-color-hover</label>
+                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
                 <h3>Colors</h3>
                 <label>@blue</label>
                 <input type="text" class="span3" placeholder="#049cdb">
@@ -289,35 +289,33 @@
               <div class="span3">
 
                 <h3>Typography</h3>
-                <label>@sansFontFamily</label>
+                <label>@font-family-sans-serif</label>
                 <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
-                <label>@serifFontFamily</label>
+                <label>@font-family-serif</label>
                 <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
-                <label>@monoFontFamily</label>
+                <label>@font-family-monospace</label>
                 <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
 
-                <label>@baseFontSize</label>
+                <label>@base-font-size</label>
                 <input type="text" class="span3" placeholder="14px">
-                <label>@baseFontFamily</label>
-                <input type="text" class="span3" placeholder="@sansFontFamily">
-                <label>@baseLineHeight</label>
+                <label>@base-font-family</label>
+                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <label>@base-line-height</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@serifFontFamily">
-                <label>@headingsFontFamily</label>
+                <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@headingsFontWeight</label>
+                <label>@headings-font-weight</label>
                 <input type="text" class="span3" placeholder="bold">
                 <label>@headingsColor</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <label>@fontSizeLarge</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 1.25">
+                <input type="text" class="span3" placeholder="@base-font-size * 1.25">
                 <label>@fontSizeSmall</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.85">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
                 <label>@fontSizeMini</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.75">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.75">
 
                 <label>@paddingLarge</label>
                 <input type="text" class="span3" placeholder="11px 19px">
@@ -364,7 +362,7 @@
                 <label>@formActionsBackground</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
                 <label>@btnPrimaryBackgroundHighlight</label>
                 <input type="text" class="span3" placeholder="darken(@white, 10%)">
 
@@ -434,7 +432,7 @@
                 <label>@dropdownLinkColorHover</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@dropdownLinkBackgroundHover</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 4846f1ca3..0a1c6d1ae 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -113,8 +113,8 @@
           <ul>
             <li>Remove <code>margin</code> on the body</li>
             <li>Set <code>background-color: white;</code> on the <code>body</code></li>
-            <li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base</li>
-            <li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
+            <li>Use the <code>@base-font-family</code>, <code>@base-font-size</code>, and <code>@base-line-height</code> attributes as our typographic base</li>
+            <li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
           </ul>
           <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 4be10716c..e36eca214 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -67,7 +67,7 @@
 
           {{! Using LESS }}
           <h3>{{_i}}Built with Less{{/i}}</h3>
-          <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
+          <p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@base-font-size</code> and <code>@base-line-height</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
 
 
           <hr class="bs-docs-separator">
diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache
index 54bffd786..37490a698 100644
--- a/docs/templates/pages/customize.mustache
+++ b/docs/templates/pages/customize.mustache
@@ -169,16 +169,16 @@
             <div class="row download-builder">
               <div class="span3">
                 <h3>{{_i}}Scaffolding{{/i}}</h3>
-                <label>@bodyBackground</label>
+                <label>@body-background</label>
                 <input type="text" class="span3" placeholder="@white">
-                <label>@textColor</label>
+                <label>@text-color</label>
                 <input type="text" class="span3" placeholder="@grayDark">
 
                 <h3>{{_i}}Links{{/i}}</h3>
-                <label>@linkColor</label>
+                <label>@link-color</label>
                 <input type="text" class="span3" placeholder="#08c">
-                <label>@linkColorHover</label>
-                <input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
+                <label>@link-color-hover</label>
+                <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
                 <h3>{{_i}}Colors{{/i}}</h3>
                 <label>@blue</label>
                 <input type="text" class="span3" placeholder="#049cdb">
@@ -221,35 +221,33 @@
               <div class="span3">
 
                 <h3>{{_i}}Typography{{/i}}</h3>
-                <label>@sansFontFamily</label>
+                <label>@font-family-sans-serif</label>
                 <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
-                <label>@serifFontFamily</label>
+                <label>@font-family-serif</label>
                 <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
-                <label>@monoFontFamily</label>
+                <label>@font-family-monospace</label>
                 <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
 
-                <label>@baseFontSize</label>
+                <label>@base-font-size</label>
                 <input type="text" class="span3" placeholder="14px">
-                <label>@baseFontFamily</label>
-                <input type="text" class="span3" placeholder="@sansFontFamily">
-                <label>@baseLineHeight</label>
+                <label>@base-font-family</label>
+                <input type="text" class="span3" placeholder="@font-family-sans-serif">
+                <label>@base-line-height</label>
                 <input type="text" class="span3" placeholder="20px">
 
-                <label>@altFontFamily</label>
-                <input type="text" class="span3" placeholder="@serifFontFamily">
-                <label>@headingsFontFamily</label>
+                <label>@headings-font-family</label>
                 <input type="text" class="span3" placeholder="inherit">
-                <label>@headingsFontWeight</label>
+                <label>@headings-font-weight</label>
                 <input type="text" class="span3" placeholder="bold">
                 <label>@headingsColor</label>
                 <input type="text" class="span3" placeholder="inherit">
 
                 <label>@fontSizeLarge</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 1.25">
+                <input type="text" class="span3" placeholder="@base-font-size * 1.25">
                 <label>@fontSizeSmall</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.85">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.85">
                 <label>@fontSizeMini</label>
-                <input type="text" class="span3" placeholder="@baseFontSize * 0.75">
+                <input type="text" class="span3" placeholder="@base-font-size * 0.75">
 
                 <label>@paddingLarge</label>
                 <input type="text" class="span3" placeholder="11px 19px">
@@ -296,7 +294,7 @@
                 <label>@formActionsBackground</label>
                 <input type="text" class="span3" placeholder="#f5f5f5">
                 <label>@btnPrimaryBackground</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
                 <label>@btnPrimaryBackgroundHighlight</label>
                 <input type="text" class="span3" placeholder="darken(@white, 10%)">
 
@@ -366,7 +364,7 @@
                 <label>@dropdownLinkColorHover</label>
                 <input type="text" class="span3" placeholder="@white">
                 <label>@dropdownLinkBackgroundHover</label>
-                <input type="text" class="span3" placeholder="@linkColor">
+                <input type="text" class="span3" placeholder="@link-color">
               </div><!-- /span -->
             </div><!-- /row -->
           </section>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 7a5bfaed7..4c7b7e89a 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -45,8 +45,8 @@
           <ul>
             <li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
             <li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li>
-            <li>{{_i}}Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base{{/i}}</li>
-            <li>{{_i}}Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
+            <li>{{_i}}Use the <code>@base-font-family</code>, <code>@base-font-size</code>, and <code>@base-line-height</code> attributes as our typographic base{{/i}}</li>
+            <li>{{_i}}Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
           </ul>
           <p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>