diff --git a/bootstrap.css b/bootstrap.css index 4bda5047e4..33be3d9660 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Tue Jan 24 21:10:54 PST 2012 + * Date: Tue Jan 24 23:35:08 PST 2012 */ article, aside, @@ -253,6 +253,12 @@ p small { font-size: 11px; color: #999999; } +.lead { + margin-bottom: 18px; + font-size: 20px; + font-weight: 200; + line-height: 27px; +} h1, h2, h3, @@ -419,7 +425,6 @@ code, pre { } code { padding: 3px 4px; - background-color: #fee9cc; color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; @@ -706,13 +711,13 @@ textarea[readonly] { } .control-group.warning input, .control-group.warning textarea { color: #c09853; - border-color: #f3edd2; + border-color: #c09853; } .control-group.warning input:focus, .control-group.warning textarea:focus { - border-color: #e8ddaa; - -webkit-box-shadow: 0 0 6px #ffffff; - -moz-box-shadow: 0 0 6px #ffffff; - box-shadow: 0 0 6px #ffffff; + border-color: #a47e3c; + -webkit-box-shadow: 0 0 6px #dbc59e; + -moz-box-shadow: 0 0 6px #dbc59e; + box-shadow: 0 0 6px #dbc59e; } .control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { color: #c09853; @@ -724,13 +729,13 @@ textarea[readonly] { } .control-group.error input, .control-group.error textarea { color: #b94a48; - border-color: #e9c7c7; + border-color: #b94a48; } .control-group.error input:focus, .control-group.error textarea:focus { - border-color: #dba2a2; - -webkit-box-shadow: 0 0 6px #ffffff; - -moz-box-shadow: 0 0 6px #ffffff; - box-shadow: 0 0 6px #ffffff; + border-color: #953b39; + -webkit-box-shadow: 0 0 6px #d59392; + -moz-box-shadow: 0 0 6px #d59392; + box-shadow: 0 0 6px #d59392; } .control-group.error .input-prepend .add-on, .control-group.error .input-append .add-on { color: #b94a48; @@ -742,13 +747,13 @@ textarea[readonly] { } .control-group.success input, .control-group.success textarea { color: #468847; - border-color: #cfe8c4; + border-color: #468847; } .control-group.success input:focus, .control-group.success textarea:focus { - border-color: #b1da9f; - -webkit-box-shadow: 0 0 6px #ffffff; - -moz-box-shadow: 0 0 6px #ffffff; - box-shadow: 0 0 6px #ffffff; + border-color: #356635; + -webkit-box-shadow: 0 0 6px #7aba7b; + -moz-box-shadow: 0 0 6px #7aba7b; + box-shadow: 0 0 6px #7aba7b; } .control-group.success .input-prepend .add-on, .control-group.success .input-append .add-on { color: #468847; diff --git a/bootstrap.min.css b/bootstrap.min.css index a0c49ba490..3c2b70663b 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -54,6 +54,7 @@ a{color:#0088cc;text-decoration:none;}a:hover{color:#005580;text-decoration:unde .offset10{margin-left:820px;} .offset11{margin-left:900px;} p{margin:0 0 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;}p small{font-size:11px;color:#999999;} +.lead{margin-bottom:18px;font-size:20px;font-weight:200;line-height:27px;} h1,h2,h3,h4,h5,h6{margin:0;font-weight:bold;color:#333333;text-rendering:optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#999999;} h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} @@ -83,7 +84,7 @@ blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left: q:before,q:after,blockquote:before,blockquote:after{content:"";} address{display:block;margin-bottom:18px;line-height:18px;font-style:normal;} code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} -code{padding:3px 4px;background-color:#fee9cc;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8;} +code{padding:3px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8;} pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} pre code{padding:0;background-color:transparent;} small{font-size:100%;} @@ -143,13 +144,13 @@ select.span11{width:870px;} select.span12{width:950px;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} .control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853;} -.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#f3edd2;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#e8ddaa;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;} +.control-group.warning input,.control-group.warning textarea{color:#c09853;border-color:#c09853;}.control-group.warning input:focus,.control-group.warning textarea:focus{border-color:#a47e3c;-webkit-box-shadow:0 0 6px #dbc59e;-moz-box-shadow:0 0 6px #dbc59e;box-shadow:0 0 6px #dbc59e;} .control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853;} .control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;} -.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#e9c7c7;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#dba2a2;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;} +.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#b94a48;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#953b39;-webkit-box-shadow:0 0 6px #d59392;-moz-box-shadow:0 0 6px #d59392;box-shadow:0 0 6px #d59392;} .control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48;} .control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847;} -.control-group.success input,.control-group.success textarea{color:#468847;border-color:#cfe8c4;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#b1da9f;-webkit-box-shadow:0 0 6px #ffffff;-moz-box-shadow:0 0 6px #ffffff;box-shadow:0 0 6px #ffffff;} +.control-group.success input,.control-group.success textarea{color:#468847;border-color:#468847;}.control-group.success input:focus,.control-group.success textarea:focus{border-color:#356635;-webkit-box-shadow:0 0 6px #7aba7b;-moz-box-shadow:0 0 6px #7aba7b;box-shadow:0 0 6px #7aba7b;} .control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847;} input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid{color:#b94a48;border-color:#ee5f5b;}input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;} .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5fc04b0f95..d9f8e438b0 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -179,25 +179,27 @@ section { border-right: 0; } -/* Fixed subnav on scroll */ -.subnav-fixed { - position: fixed; - top: 40px; - left: 0; - right: 0; - z-index: 1030; - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); -} -.subnav-fixed .nav { - width: 940px; - margin: 0 auto; +/* Fixed subnav on scroll, but only for 940px and up (sorry IE!) */ +@media (min-width: 940px) { + .subnav-fixed { + position: fixed; + top: 40px; + left: 0; + right: 0; + z-index: 1030; + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + } + .subnav-fixed .nav { + width: 940px; + margin: 0 auto; + } } @@ -439,6 +441,72 @@ section { } +/* CSS Chop Shop +-------------------------------------------------- */ +.builder { +} +.builder .span2 { + width: 160px; +} +.builder ul { + margin: 0; + list-style: none; +} +.builder .tabs { + margin-right: 0; +} +.builder .tabs a { + width: 160px; + padding: 14px; + font-size: 14px; +} +.builder .tab-content { + padding: 19px; + margin-left: 189px; + border: 1px solid #e5e5e5; + -webkit-border-radius: 0 4px 4px 4px; + -moz-border-radius: 0 4px 4px 4px; + border-radius: 0 4px 4px 4px; +} + +/* Space out h3s when following a section */ +.builder input + h3, +.builder .checkbox + h3 { + margin-top: 9px; +} + +/* Fields for variables */ +.builder input + h3 { + margin-top: 9px; +} +.builder #variables label { + margin-bottom: 2px; + color: #555; +} +.builder input[type=text] { + margin-bottom: 9px; + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 12px; + color: #d14; + background-color: #f7f7f9; +} +.builder input[type=text]:focus { + background-color: #fff; +} + + +.builder-actions { + margin-top: 18px; + padding-top: 18px; + border-top: 1px solid #eee; +} +.builder-actions .toggle-all { + float: right; + line-height: 36px; +} + + + /* Misc -------------------------------------------------- */ @@ -560,14 +628,6 @@ form.well { margin-top: 18px; } - /* Subnav */ - .subnav { - background: #fff; /* whole background property since we use a background-image for gradient */ - } - .subnav .nav > li { - float: none; - } - /* Adjust the jumbotron */ .jumbotron h1, .jumbotron p { @@ -630,10 +690,14 @@ form.well { z-index: auto; width: auto; height: auto; + background: #fff; /* whole background property since we use a background-image for gradient */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } + .subnav .nav > li { + float: none; + } .subnav .nav a { border: 0; } @@ -683,7 +747,6 @@ form.well { .jumbotron h1 { font-size: 54px; } - .jumbotron h1, .jumbotron p { margin-right: 0; diff --git a/docs/base-css.html b/docs/base-css.html index 27251d8244..6847c0616a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -368,7 +368,7 @@ <pre class="prettyprint"> -

Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.

+

Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.

<div>
   <h1>Heading</h1>
   <p>Something right here…</p>
diff --git a/docs/less.html b/docs/less.html
index 86a65a6c7e..e5e3baa66b 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -58,359 +58,520 @@
 
     

 
-      

-        Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!
-      

+

+  Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!
+

 
-      
-      

-        
Using LESS with Bootstrap

-        
Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

-        

-          
-        

-      

+
+

+  
Using LESS with Bootstrap

+  
Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

+  

+    
+  

+

 
 
 
-      
-      

-        

-          
Built with LESS

-        

-        

-          

-            
Why LESS?

-            
Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

+
+

+  

+    
Chop Shop Customize your build of Bootstrap

+  

+
+  

+    

+      
+      

+        

+          

+            

+              
Scaffolding

+              
+              
+              
+              
Base CSS

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Components

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
JS Components

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Responsive

+              
+              
+              
+              
Miscellaneous

+              
+              
+              
+              
+            

           

-          

-            
What's included?

-            
As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

-          

-          

-            
Learn more

-            LESS CSS
-            
Visit the official website at http://lesscss.org to learn more.

-          

-        

-        

-          

-            
Variables

-            
Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.

-          

-          

-            
Mixins

-            
Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.

-          

-          

-            
Operations

-            
Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.

-          

-        

-      

+          

+            Reset variables
+            Next: Customize variables
+          
        
+        

+        

+          

+            

+              
Links

+              
+              
+              
+              
+              
Grid system

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Typography

+              
+              
+              
+              
+              
+              
+              
Forms

+              
+              
+              
+              
+              
Navbar

+              
+              
+              
+              
+              
+              
+            

+            

+              
Form states & alerts

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+          

+          

+            Next: Build and download
+          
        
+        

+        

+          
And you're set!

+          
We've compiled your selected CSS and customized variables and have them ready to download as a tidy ZIP file. Choose from compiled or compiled and minified CSS files.

+          Download CSS Download minified CSS
+          

+          
Looking to customize your javascript? Head over to the Javascript plugins page to build your own Bootstrap JS bundle.

+        

+      

+    

+  
+
+
 
 
 
-      
-      

-        

-          
Variables from variables.less

-        

-
-        
Hyperlinks

-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        
VariableValueUsage
@linkColor#08cDefault link text color
@linkColorHoverdarken(@linkColor, 15%)Default link text hover color

-
-        

-          

-            
Grayscale colors

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
VariableValue
@black#000
@grayDarker#222
@grayDark#333
@gray#555
@grayLight#999
@grayLighter#eee
@white#fff

-          

-          

-            
Accent colors

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
VariableValue
@blue#049cdb
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6

-          

-        
 
-        

-          

-            
Grid system

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
VariableValue
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))

-          

-          

-            
Typography

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
VariableValue
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px

-          

-        
 
-
-        
Components

-        

-          

-            
Buttons

-            
-              
-                
-                  
-                  
-                
-              
-            
@primaryButtonColor@blue

-            
Forms

-            
-              
-                
-                  
-                  
-                
-              
-            
@placeholderText@grayLight

-            
Navbar

-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark

-          

-          

-            
Form states and alerts

-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
@warningText#f3edd2
@warningBackground#c09853
@warningBorder#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@errorBorder#e9c7c7
@successText#468847
@successBackground#dff0d8
@successBorder#cfe8c4
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorder#bfe1f2

-          

-        

-
-      

+
+

+  

+    
Built with LESS

+  

+  

+    

+      
Why LESS?

+      
Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

+    

+    

+      
What's included?

+      
As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

+    

+    

+      
Learn more

+      LESS CSS
+      
Visit the official website at http://lesscss.org to learn more.

+    

+  

+  

+    

+      
Variables

+      
Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.

+    

+    

+      
Mixins

+      
Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.

+    

+    

+      
Operations

+      
Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.

+    

+  

+

 
 
 
-      
-      

-        
Mixins from mixins.less

-      

+
+

+  

+    
Variables from variables.less

+  

+
+  
Hyperlinks

+  
+    
+      
+        
+        
+        
+      
+    
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+  
VariableValueUsage
@linkColor#08cDefault link text color
@linkColorHoverdarken(@linkColor, 15%)Default link text hover color

+
+  

+    

+      
Grayscale colors

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
VariableValue
@black#000
@grayDarker#222
@grayDark#333
@gray#555
@grayLight#999
@grayLighter#eee
@white#fff

+    

+    

+      
Accent colors

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
VariableValue
@blue#049cdb
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6

+    

+  
 
+  

+    

+      
Grid system

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
VariableValue
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))

+    

+    

+      
Typography

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+            
+          
+          
+            
+            
+          
+        
+      
VariableValue
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px

+    

+  
 
+
+  
Components

+  

+    

+      
Buttons

+      
+        
+          
+            
+            
+          
+        
+      
@primaryButtonColor@blue

+      
Forms

+      
+        
+          
+            
+            
+          
+        
+      
@placeholderText@grayLight

+      
Navbar

+      
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark

+    

+    

+      
Form states and alerts

+      
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
@warningText#f3edd2
@warningBackground#c09853
@warningBorder#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@errorBorder#e9c7c7
@successText#468847
@successBackground#dff0d8
@successBorder#cfe8c4
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorder#bfe1f2

+    

+  

+
+

 
 
 
-      
-      

-        
Operations

-      

+
+

+  
Mixins from mixins.less

+

 
 
 
-      
-      

-        
Compiling LESS and Bootstrap

-      

+
+

+  
Operations

+

+
+
+
+
+

+  
Compiling LESS and Bootstrap

+

 
 
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 225e88d2bf..ba864ce9e5 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -308,7 +308,7 @@
       
         <pre class="prettyprint">
         
-          
{{_i}}Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}

+          
{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}

 
<div>
   <h1>{{_i}}Heading{{/i}}</h1>
   <p>{{_i}}Something right here…{{/i}}</p>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index ea7058fd9b..ecb39055b0 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -1,356 +1,517 @@
-      

-        Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!
-      

+

+  Heads up! This page is still under construction and is missing plenty of documentation. Hang tight!
+

 
-      
-      

-        
{{_i}}Using LESS with Bootstrap{{/i}}

-        
{{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

-        

-          
-        

-      

+
+

+  
{{_i}}Using LESS with Bootstrap{{/i}}

+  
{{_i}}Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}

+  

+    
+  

+

 
 
 
-      
-      

-        

-          
{{_i}}Built with LESS{{/i}}

-        

-        

-          

-            
{{_i}}Why LESS?{{/i}}

-            
{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

+
+

+  

+    
Chop Shop Customize your build of Bootstrap

+  

+
+  

+    

+      
+      

+        

+          

+            

+              
Scaffolding

+              
+              
+              
+              
Base CSS

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Components

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
JS Components

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Responsive

+              
+              
+              
+              
Miscellaneous

+              
+              
+              
+              
+            

           

-          

-            
{{_i}}What's included?{{/i}}

-            
{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

-          

-          

-            
{{_i}}Learn more{{/i}}

-            LESS CSS
-            
{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

-          

-        

-        

-          

-            
{{_i}}Variables{{/i}}

-            
{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

-          

-          

-            
{{_i}}Mixins{{/i}}

-            
{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

-          

-          

-            
{{_i}}Operations{{/i}}

-            
{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}

-          

-        

-      

+          

+            Reset variables
+            Next: Customize variables
+          
        
+        

+        

+          

+            

+              
Links

+              
+              
+              
+              
+              
Grid system

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Typography

+              
+              
+              
+              
+              
+              
+              
Forms

+              
+              
+              
+              
+              
Navbar

+              
+              
+              
+              
+              
+              
+            

+            

+              
Form states & alerts

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+          

+          

+            Next: Build and download
+          
        
+        

+        

+          
And you're set!

+          
We've compiled your selected CSS and customized variables and have them ready to download as a tidy ZIP file. Choose from compiled or compiled and minified CSS files.

+          Download CSS Download minified CSS
+          

+          
Looking to customize your javascript? Head over to the Javascript plugins page to build your own Bootstrap JS bundle.

+        

+      

+    
+  
+
+

 
 
 
-      
-      

-        

-          
{{_i}}Variables from variables.less{{/i}}

-        

-
-        
{{_i}}Hyperlinks{{/i}}

-        
-          
-            
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-            
-            
-              
-              
-              
-            
-          
-        
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}{{_i}}Usage{{/i}}
@linkColor#08c{{_i}}Default link text color{{/i}}
@linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}

-
-        

-          

-            
{{_i}}Grayscale colors{{/i}}

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@black#000
@grayDarker#222
@grayDark#333
@gray#555
@grayLight#999
@grayLighter#eee
@white#fff

-          

-          

-            
{{_i}}Accent colors{{/i}}

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@blue#049cdb
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6

-          

-        
 
-        

-          

-            
{{_i}}Grid system{{/i}}

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))

-          

-          

-            
{{_i}}Typography{{/i}}

-            
-              
-                
-                  
-                  
-                
-              
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px

-          

-        
 
-
-        
{{_i}}Components{{/i}}

-        

-          

-            
Buttons

-            
-              
-                
-                  
-                  
-                
-              
-            
@primaryButtonColor@blue

-            
Forms

-            
-              
-                
-                  
-                  
-                
-              
-            
@placeholderText@grayLight

-            
Navbar

-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark

-          

-          

-            
Form states and alerts

-            
-              
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-                
-                  
-                  
-                
-              
-            
@warningText#f3edd2
@warningBackground#c09853
@warningBorder#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@errorBorder#e9c7c7
@successText#468847
@successBackground#dff0d8
@successBorder#cfe8c4
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorder#bfe1f2

-          

-        

-
-      

+
+

+  

+    
{{_i}}Built with LESS{{/i}}

+  

+  

+    

+      
{{_i}}Why LESS?{{/i}}

+      
{{_i}}Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

+    

+    

+      
{{_i}}What's included?{{/i}}

+      
{{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

+    

+    

+      
{{_i}}Learn more{{/i}}

+      LESS CSS
+      
{{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

+    

+  

+  

+    

+      
{{_i}}Variables{{/i}}

+      
{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though—assign colors or pixel values as variables and change them once.{{/i}}

+    

+    

+      
{{_i}}Mixins{{/i}}

+      
{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}

+    

+    

+      
{{_i}}Operations{{/i}}

+      
{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}

+    

+  

+

 
 
 
-      
-      

-        
{{_i}}Mixins from mixins.less{{/i}}

-      

+
+

+  

+    
{{_i}}Variables from variables.less{{/i}}

+  

+
+  
{{_i}}Hyperlinks{{/i}}

+  
+    
+      
+        
+        
+        
+      
+    
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+  
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}{{_i}}Usage{{/i}}
@linkColor#08c{{_i}}Default link text color{{/i}}
@linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}

+
+  

+    

+      
{{_i}}Grayscale colors{{/i}}

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@black#000
@grayDarker#222
@grayDark#333
@gray#555
@grayLight#999
@grayLighter#eee
@white#fff

+    

+    

+      
{{_i}}Accent colors{{/i}}

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@blue#049cdb
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6

+    

+  
 
+  

+    

+      
{{_i}}Grid system{{/i}}

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))

+    

+    

+      
{{_i}}Typography{{/i}}

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+          
+            
+            
+            
+          
+          
+            
+            
+          
+        
+      
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px

+    

+  
 
+
+  
{{_i}}Components{{/i}}

+  

+    

+      
Buttons

+      
+        
+          
+            
+            
+          
+        
+      
@primaryButtonColor@blue

+      
Forms

+      
+        
+          
+            
+            
+          
+        
+      
@placeholderText@grayLight

+      
Navbar

+      
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark

+    

+    

+      
Form states and alerts

+      
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+      
@warningText#f3edd2
@warningBackground#c09853
@warningBorder#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@errorBorder#e9c7c7
@successText#468847
@successBackground#dff0d8
@successBorder#cfe8c4
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorder#bfe1f2

+    

+  

+
+

 
 
 
-      
-      

-        
{{_i}}Operations{{/i}}

-      

+
+

+  
{{_i}}Mixins from mixins.less{{/i}}

+

 
 
 
-      
-      

-        
{{_i}}Compiling LESS and Bootstrap{{/i}}

-      

+
+

+  
{{_i}}Operations{{/i}}

+

+
+
+
+
+

+  
{{_i}}Compiling LESS and Bootstrap{{/i}}

+

 
 
 
diff --git a/lib/forms.less b/lib/forms.less
index 2b24fb2f0e..e35b23da02 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -297,15 +297,15 @@ textarea[readonly] {
 }
 // Warning
 .control-group.warning {
-  .formFieldState(@warningText, @warningBorder, @warningBackground);
+  .formFieldState(@warningText, @warningText, @warningBackground);
 }
 // Error
 .control-group.error {
-  .formFieldState(@errorText, @errorBorder, @errorBackground);
+  .formFieldState(@errorText, @errorText, @errorBackground);
 }
 // Success
 .control-group.success {
-  .formFieldState(@successText, @successBorder, @successBackground);
+  .formFieldState(@successText, @successText, @successBackground);
 }
 
 // HTML5 invalid states
diff --git a/lib/type.less b/lib/type.less
index 211111761b..548c222f1c 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -16,6 +16,12 @@ p {
     color: @grayLight;
   }
 }
+.lead {
+  margin-bottom: @baseLineHeight;
+  font-size: 20px;
+  font-weight: 200;
+  line-height: @baseLineHeight * 1.5;
+}
 
 // HEADINGS
 // --------
@@ -202,7 +208,6 @@ pre {
 }
 code {
   padding: 3px 4px;
-  background-color: lighten(@orange, 40%);
   color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;