massive update to customize page to include all the new variables (and ensure they...

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index feabc4941309a9c078e0a276ba58701124c7b9f5..28dd0b9ff2331444bf4a80f9622c9404f7092630 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 02ab012c453abe003051d54d47da556a5fc2bbca..3410818d2c20cbbd490f3923e9d899a8d389ac0c 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -124,7 +124,7 @@ a {
   text-decoration: none;
 }
 a:hover {
-  color: #006699;
+  color: #005580;
   text-decoration: underline;
 }
 .row {
@@ -2601,8 +2601,8 @@ input[type="submit"].btn.btn-small {
 }
 .nav-tabs .dropdown-toggle:hover .caret,
 .nav-pills .dropdown-toggle:hover .caret {
-  border-top-color: #006699;
-  border-bottom-color: #006699;
+  border-top-color: #005580;
+  border-bottom-color: #005580;
 }
 .nav-tabs .active .dropdown-toggle .caret,
 .nav-pills .active .dropdown-toggle .caret {
@@ -3901,7 +3901,7 @@ a.thumbnail:hover {
 .hero-unit {
   padding: 60px;
   margin-bottom: 30px;
-  background-color: #f5f5f5;
+  background-color: #eeeeee;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
@@ -3910,12 +3910,14 @@ a.thumbnail:hover {
   margin-bottom: 0;
   font-size: 60px;
   line-height: 1;
+  color: inherit;
   letter-spacing: -1px;
 }
 .hero-unit p {
   font-size: 18px;
   font-weight: 200;
   line-height: 27px;
+  color: inherit;
 }
 .pull-right {
   float: right;

diff --git a/docs/download.html b/docs/download.html
index 44b3b8c03dfc606a42f548338568327f69c8e2e5..858becd719dbaa10ef6147ac2773c3a73254b886 100644 (file)
--- a/docs/download.html
+++ b/docs/download.html
@@ -227,6 +227,12 @@
   </div>
   <div class="row download-builder">
     <div class="span3">
+      <h3>Scaffolding</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
       <h3>Links</h3>
       <label>@linkColor</label>
       <input type="text" class="span3" placeholder="#08c">
@@ -247,6 +253,13 @@
       <input type="text" class="span3" placeholder="#c3325f">
       <label>@purple</label>
       <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>Sprites</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <label>@iconWhiteSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
+
     </div><!-- /span -->
     <div class="span3">
       <h3>Grid system</h3>
@@ -261,6 +274,7 @@
       <input type="text" class="span3" placeholder="6.382978723%">
       <label>@fluidGridGutterWidth</label>
       <input type="text" class="span3" placeholder="2.127659574%">
+
       <h3>Typography</h3>
       <label>@baseFontSize</label>
       <input type="text" class="span3" placeholder="13px">
@@ -268,13 +282,32 @@
       <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
       <label>@baseLineHeight</label>
       <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
     </div><!-- /span -->
     <div class="span3">
-      <h3>Forms</h3>
-      <label>@primaryButtonColor</label>
-      <input type="text" class="span3" placeholder="@blue">
-      <label>@placeholderText</label>
-      <input type="text" class="span3" placeholder="@grayLight">
+      <h3>Tables</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
       <h3>Navbar</h3>
       <label>@navbarHeight</label>
       <input type="text" class="span3" placeholder="40px">
@@ -288,8 +321,39 @@
       <input type="text" class="span3" placeholder="@grayLight">
       <label>@navbarLinkColorHover</label>
       <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+
+      <h3>Dropdowns</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <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>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+
+      <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">

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 618bb3e1ee9032795993d58f03a4d79d41417c51..7b549619da88f9781319b4e55961e8dd47800b32 100644 (file)
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -151,6 +151,12 @@
   </div>
   <div class="row download-builder">
     <div class="span3">
+      <h3>{{_i}}Scaffolding{{/i}}</h3>
+      <label>@bodyBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@textColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+
       <h3>{{_i}}Links{{/i}}</h3>
       <label>@linkColor</label>
       <input type="text" class="span3" placeholder="#08c">
@@ -171,6 +177,13 @@
       <input type="text" class="span3" placeholder="#c3325f">
       <label>@purple</label>
       <input type="text" class="span3" placeholder="#7a43b6">
+
+      <h3>{{_i}}Sprites{{/i}}</h3>
+      <label>@iconSpritePath</label>
+      <input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
+      <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>
@@ -185,6 +198,7 @@
       <input type="text" class="span3" placeholder="6.382978723%">
       <label>@fluidGridGutterWidth</label>
       <input type="text" class="span3" placeholder="2.127659574%">
+
       <h3>{{_i}}Typography{{/i}}</h3>
       <label>@baseFontSize</label>
       <input type="text" class="span3" placeholder="13px">
@@ -192,13 +206,32 @@
       <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
       <label>@baseLineHeight</label>
       <input type="text" class="span3" placeholder="18px">
+      <label>@altFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <label>@headingsFontFamily</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@headingsFontWeight</label>
+      <input type="text" class="span3" placeholder="bold">
+      <label>@headingsColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@heroUnitHeadingColor</label>
+      <input type="text" class="span3" placeholder="inherit">
+      <label>@heroUnitLeadColor</label>
+      <input type="text" class="span3" placeholder="inherit">
     </div><!-- /span -->
     <div class="span3">
-      <h3>{{_i}}Forms{{/i}}</h3>
-      <label>@primaryButtonColor</label>
-      <input type="text" class="span3" placeholder="@blue">
-      <label>@placeholderText</label>
-      <input type="text" class="span3" placeholder="@grayLight">
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <label>@tableBackground</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@tableBackgroundAccent</label>
+      <input type="text" class="span3" placeholder="#f9f9f9">
+      <label>@tableBackgroundHover</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
+      <label>@tableBorder</label>
+      <input type="text" class="span3" placeholder="#ddd">
+
       <h3>{{_i}}Navbar{{/i}}</h3>
       <label>@navbarHeight</label>
       <input type="text" class="span3" placeholder="40px">
@@ -212,8 +245,39 @@
       <input type="text" class="span3" placeholder="@grayLight">
       <label>@navbarLinkColorHover</label>
       <input type="text" class="span3" placeholder="@white">
+      <label>@navbarLinkColorActive</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColorHover">
+      <label>@navbarLinkBackgroundHover</label>
+      <input type="text" class="span3" placeholder="transparent">
+      <label>@navbarLinkBackgroundActive</label>
+      <input type="text" class="span3" placeholder="@navbarBackground">
+
+      <h3>{{_i}}Dropdowns{{/i}}</h3>
+      <label>@dropdownBackground</label>
+      <input type="text" class="span3" placeholder="@white">
+      <label>@dropdownLinkColor</label>
+      <input type="text" class="span3" placeholder="@grayDark">
+      <label>@dropdownLinkColorHover</label>
+      <input type="text" class="span3" placeholder="@white">
+      <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>@inputDisabledBackground</label>
+      <input type="text" class="span3" placeholder="@grayLighter">
+
+      <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">

diff --git a/less/hero-unit.less b/less/hero-unit.less
index cba1cc46cff8e4f0b8c4cd8ed233899f00d655eb..0ffe82962a012b152861770b9127ea3e47368a61 100644 (file)
--- a/less/hero-unit.less
+++ b/less/hero-unit.less
@@ -4,17 +4,19 @@
 .hero-unit {
   padding: 60px;
   margin-bottom: 30px;
-  background-color: #f5f5f5;
+  background-color: @heroUnitBackground;
   .border-radius(6px);
   h1 {
     margin-bottom: 0;
     font-size: 60px;
     line-height: 1;
+    color: @heroUnitHeadingColor;
     letter-spacing: -1px;
   }
   p {
     font-size: 18px;
     font-weight: 200;
     line-height: @baseLineHeight * 1.5;
+    color: @heroUnitLeadColor;
   }
 }

diff --git a/less/variables.less b/less/variables.less
index fef3ee0ee582cb1227ca752a49adf71648a261da..f3ba7122ac9e882c7b0f9796af7396e5c649bca8 100644 (file)
--- a/less/variables.less
+++ b/less/variables.less
@@ -40,7 +40,7 @@
 // Links
 // -------------------------
 @linkColor:             #08c;
-@linkColorHover:        #069;
+@linkColorHover:        darken(@linkColor, 15%);
 
 
 // Typography
@@ -67,7 +67,7 @@
 // -------------------------
 @btnBackground:                     @white;
 @btnBackgroundHighlight:            darken(@white, 10%);
-@btnBorder:                         #ccc;
+@btnBorder:                         darken(@white, 20%);
 
 @btnPrimaryBackground:              @linkColor;
 @btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
@@ -92,7 +92,6 @@
 // -------------------------
 @inputBackground:               @white;
 @inputBorder:                   #ccc;
-
 @inputDisabledBackground:       @grayLighter;
 
 
@@ -153,9 +152,9 @@
 
 // Hero unit
 // -------------------------
-@heroUnitBackground:              #312f2e;
-@heroUnitHeadingColor:            @white;
-@heroUnitLeadColor:               @white;
+@heroUnitBackground:              @grayLighter;
+@heroUnitHeadingColor:            inherit;
+@heroUnitLeadColor:               inherit;
 
 
 // Form states and alerts