From 6ab56051fdf916f03efb8aa6675e50bdd1cc3155 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 23:35:34 -0800 Subject: fix up docs css for responsive and subnav, fix forms error states --- docs/assets/css/docs.css | 119 +++-- docs/base-css.html | 2 +- docs/less.html | 829 +++++++++++++++++++------------- docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/less.mustache | 845 ++++++++++++++++++++------------- 5 files changed, 1091 insertions(+), 706 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5fc04b0f9..d9f8e438b 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 27251d824..6847c0616 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 86a65a6c7..e5e3baa66 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.

-          

-          

-            
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.

+
+

+  

+    
Chop Shop Customize your build of Bootstrap

+  

+
+  

+    

+      
+      

+        

+          

+            

+              
Scaffolding

+              
+              
+              
+              
Base CSS

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Components

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
JS Components

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Responsive

+              
+              
+              
+              
Miscellaneous

+              
+              
+              
+              
+            

           

-        

-      

+          

+            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.

+    

+  

+

 
-      

 
 
+
+

+  

+    
Variables from variables.less

+  

 
-      
-      

-        
Mixins from mixins.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 225e88d2b..ba864ce9e 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 ea7058fd9..ecb39055b 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!
-      

-
-      
-      

-        
{{_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}}

-          

-          

-            
{{_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}}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

+

+  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}}

+  

+    
+  

+

+
+
+
+
+

+  

+    
Chop Shop Customize your build of Bootstrap

+  

+
+  

+    

+      
+      

+        

+          

+            

+              
Scaffolding

+              
+              
+              
+              
Base CSS

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Components

+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
JS Components

+              
+              
+              
+              
+              
+              
+              
+            

+            

+              
Responsive

+              
+              
+              
+              
Miscellaneous

+              
+              
+              
+              
+            

           

-        

+          

+            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}}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}}Variables from variables.less{{/i}}

+  

 
-      
-      

-        
{{_i}}Mixins from mixins.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}}Mixins from mixins.less{{/i}}

+

 
 
 
-      
-      

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

-      

+
+

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

+

 
 
 
-      
-      

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

-      

+
+

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

+

 
 
 
-- 
cgit v1.2.3