2011-10-27 08:11:56 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Bootstrap, from Twitter< / title >
2011-11-08 20:32:28 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-10-27 08:11:56 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2012-01-23 23:14:16 +01:00
<!-- Le HTML5 shim, for IE6 - 8 support of HTML elements -->
2011-10-27 08:11:56 +02:00
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le styles -->
< link href = "../bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
<!-- Le fav and touch icons -->
2012-01-23 23:14:16 +01:00
< link rel = "shortcut icon" href = "images/favicon.ico" >
< link rel = "apple-touch-icon" href = "images/apple-touch-icon.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "images/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "images/apple-touch-icon-114x114.png" >
2011-10-27 08:11:56 +02:00
< / head >
< body >
2012-01-24 04:55:00 +01:00
2012-01-24 00:17:32 +01:00
<!-- Navbar
2011-10-27 08:11:56 +02:00
================================================== -->
< div class = "navbar navbar-fixed" >
< div class = "navbar-inner" >
< div class = "container" >
< a class = "brand" href = "./index.html" > Bootstrap< / a >
< ul class = "nav" >
2012-01-24 00:17:32 +01:00
< li class = "" >
< a href = "./index.html" > Overview< / a >
2012-01-13 00:29:16 +01:00
< / li >
2012-01-24 00:17:32 +01:00
< li class = "" >
2012-01-23 20:55:04 +01:00
< a href = "./scaffolding.html" > Scaffolding< / a >
2012-01-13 00:29:16 +01:00
< / li >
2012-01-24 00:17:32 +01:00
< li class = "" >
2012-01-23 20:55:04 +01:00
< a href = "./base-css.html" > Base CSS< / a >
2012-01-13 00:29:16 +01:00
< / li >
2012-01-24 00:17:32 +01:00
< li class = "" >
2012-01-23 20:55:04 +01:00
< a href = "./components.html" > Components< / a >
2012-01-13 00:29:16 +01:00
< / li >
2012-01-24 00:17:32 +01:00
< li class = "" >
2012-01-23 20:55:04 +01:00
< a href = "./javascript.html" > Javascript plugins< / a >
2012-01-13 00:29:16 +01:00
< / li >
< li class = "active" >
2012-01-23 20:55:04 +01:00
< a href = "./less.html" > Using LESS< / a >
2012-01-13 00:29:16 +01:00
< / li >
2011-10-27 08:11:56 +02:00
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
2012-01-25 08:35:34 +01:00
< div class = "alert" >
< strong > Heads up!< / strong > This page is still under construction and is missing plenty of documentation. Hang tight!
< / div >
2012-01-25 02:14:19 +01:00
2012-01-25 08:35:34 +01:00
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
< h1 > Using LESS with Bootstrap< / h1 >
< p class = "lead" > Customize and extend Bootstrap with < a href = "http://lesscss.org" target = "_blank" > LESS< / a > , a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.< / p >
< div class = "subnav" >
< ul class = "nav pills" >
< li > < a href = "./less.html#builtWith" > Built with Less< / a > < / li >
< li > < a href = "./less.html#variables" > Variables< / a > < / li >
< li > < a href = "./less.html#mixins" > Mixins< / a > < / li >
< li > < a href = "./less.html#compiling" > Compiling Bootstrap< / a > < / li >
< / ul >
< / div >
< / header >
2011-10-27 08:11:56 +02:00
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
<!-- BUILDER
================================================== -->
< section id = "builder" >
< div class = "page-header" >
< h1 > Chop Shop < small > Customize your build of Bootstrap< / small > < / h1 >
< / div >
< form class = "form-horizontal builder" >
< div class = "tabbable tabs-left" >
< ul class = "nav tabs" >
< li class = "active" >
< a href = "#components" data-toggle = "tab" > 1. Select components< / a >
< / li >
< li > < a href = "#variables" data-toggle = "tab" > 2. Customize variables< / a > < / li >
< li > < a href = "#download" data-toggle = "tab" > 3. Build and download< / a > < / li >
< / ul >
< div class = "tab-content" >
< div class = "tab-pane active" id = "components" >
< div class = "row" >
< div class = "span2 builder-section" >
< h3 > Scaffolding< / h3 >
< label class = "checkbox" > < input type = "checkbox" value = "" > CSS reset< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Grid system< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Layouts< / label >
< h3 > Base CSS< / h3 >
< label class = "checkbox" > < input type = "checkbox" value = "" > Headings and body< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Code and pre< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Labels< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Tables< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Forms< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Buttons< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Icons< / label >
< / div >
< div class = "span2 builder-section" >
< h3 > Components< / h3 >
< label class = "checkbox" > < input type = "checkbox" value = "" > Button groups< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Combo buttons< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Navs, tabs, and pills< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Navbar< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Breadcrumbs< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Pagination< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Pager< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Thumbnails< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Alerts< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Progress bars< / label >
< / div >
< div class = "span2 builder-section" >
< h3 > JS Components< / h3 >
< label class = "checkbox" > < input type = "checkbox" value = "" > Tooltips< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Popovers< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Modals< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Dropdowns< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Tabs< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Collapse< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Carousel< / label >
< / div >
< div class = "span2 builder-section" >
< h3 > Responsive< / h3 >
< label class = "checkbox" > < input type = "checkbox" value = "" > Max-width 480px< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Max-width 768px< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Max-width 1210px< / label >
< h3 > Miscellaneous< / h3 >
< label class = "checkbox" > < input type = "checkbox" value = "" > Wells< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Close icon< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Utilities< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Component animations< / label >
< / div >
2012-01-25 01:07:30 +01:00
< / div >
2012-01-25 08:35:34 +01:00
< div class = "builder-actions" >
< a class = "toggle-all" href = "" > Reset variables< / a >
< a class = "btn large primary" href = "" > Next: Customize variables< / a >
< / div >
< / div > <!-- /tab - pane -->
< div class = "tab-pane" id = "variables" >
< div class = "row" >
< div class = "span3" >
< h3 > Links< / h3 >
< label > @linkColor< / label >
< input type = "text" class = "span3" value = "#08c" >
< label > @linkColorHove< / label >
< input type = "text" class = "span3" value = "darken(@linkColor, 15%)" >
< h3 > Grid system< / h3 >
< label > @gridColumns< / label >
< input type = "text" class = "span3" value = "" >
< label > @gridColumnWidth< / label >
< input type = "text" class = "span3" value = "" >
< label > @gridGutterWidth< / label >
< input type = "text" class = "span3" value = "" >
< label > @siteWidth< / label >
< input type = "text" class = "span3" value = "" >
< label > @fluidSidebarWidth< / label >
< input type = "text" class = "span3" value = "" >
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Typography< / h3 >
< label > @baseFontSize< / label >
< input type = "text" class = "span3" value = "13px" >
< label > @baseFontFamily< / label >
< input type = "text" class = "span3" value = "'Helvetica Neue', Helvetica, Arial, sans-serif" >
< label > @baseLineHeight< / label >
< input type = "text" class = "span3" value = "18px" >
< h3 > Forms< / h3 >
< label > @primaryButtonColor< / label >
< input type = "text" class = "span3" value = "@blue" >
< label > @placeholderText< / label >
< input type = "text" class = "span3" value = "@grayLight" >
< h3 > Navbar< / h3 >
< label > @navbarHeight< / label >
< input type = "text" class = "span3" value = "40px" >
< label > @navbarBackground< / label >
< input type = "text" class = "span3" value = "@grayDarker" >
< label > @navbarBackgroundHighlight< / label >
< input type = "text" class = "span3" value = "@grayDark" >
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Form states & alerts< / h3 >
< label > @warningText< / label >
< input type = "text" class = "span3" value = "#c09853" >
< label > @warningBackground< / label >
< input type = "text" class = "span3" value = "#fcf8e3" >
< label > @warningBorder< / label >
< input type = "text" class = "span3" value = "#f3edd2" >
< label > @errorText< / label >
< input type = "text" class = "span3" value = "#b94a48" >
< label > @errorBackground< / label >
< input type = "text" class = "span3" value = "#f2dede" >
< label > @errorBorder< / label >
< input type = "text" class = "span3" value = "#e9c7c7" >
< label > @successText< / label >
< input type = "text" class = "span3" value = "#468847" >
< label > @successBackground< / label >
< input type = "text" class = "span3" value = "#dff0d8" >
< label > @successBorder< / label >
< input type = "text" class = "span3" value = "#cfe8c4" >
< label > @infoText< / label >
< input type = "text" class = "span3" value = "#3a87ad" >
< label > @infoBackground< / label >
< input type = "text" class = "span3" value = "#d9edf7" >
< label > @infoBorder< / label >
< input type = "text" class = "span3" value = "#bfe1f2" >
< / div > <!-- /span -->
< / div > <!-- /row -->
< div class = "builder-actions" >
< a class = "btn large primary" href = "" > Next: Build and download< / a >
< / div >
< / div > <!-- /tab - pane -->
< div class = "tab-pane" id = "download" >
< h2 > And you're set!< / h2 >
< p class = "lead" > 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.< / p >
< a class = "btn large primary" > Download CSS< / a > < a class = "btn large primary" > Download minified CSS< / a >
< hr >
2012-01-25 08:45:48 +01:00
< p > Looking to customize your javascript? Head over to the < a href = "./javascript.html#javascript" > Javascript plugins page< / a > to build your own Bootstrap JS bundle.< / p >
2012-01-25 08:35:34 +01:00
< / div > <!-- /tab - pane -->
< / div > <!-- /tab - content -->
< / div > <!-- /tabbable -->
< / form >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
< / section >
2011-11-12 09:46:02 +01:00
2011-11-17 08:58:36 +01:00
2012-01-25 08:35:34 +01:00
<!-- BUILT WITH LESS
================================================== -->
< section id = "builtWith" >
< div class = "page-header" >
< h1 > Built with LESS< / h1 >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > Why LESS?< / h3 >
< p > Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by < a href = "http://cloudhead.io" > Alexis Sellier< / a > . It makes developing systems-based CSS faster, easier, and more fun.< / p >
< / div >
< div class = "span4" >
< h3 > What's included?< / h3 >
< p > As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.< / p >
< / div >
< div class = "span4" >
< h3 > Learn more< / h3 >
< img style = "float: right; height: 36px;" src = "assets/img/less-logo-large.png" alt = "LESS CSS" >
< p > Visit the official website at < a href = "http://lesscss.org" > http://lesscss.org< / a > to learn more.< / p >
< / div >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > Variables< / h3 >
< p > 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.< / p >
< / div >
< div class = "span4" >
< h3 > Mixins< / h3 >
< p > 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.< / p >
< / div >
< div class = "span4" >
< h3 > Operations< / h3 >
< p > 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.< / p >
< / div >
< / div >
< / section >
2012-01-25 01:54:35 +01:00
2012-01-25 08:35:34 +01:00
<!-- VARIABLES
================================================== -->
< section id = "variables" >
< div class = "page-header" >
< h1 > Variables < small > from variables.less< / small > < / h1 >
< / div >
2011-11-17 08:58:36 +01:00
2012-01-25 08:35:34 +01:00
< h3 > Hyperlinks< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span2" > Variable< / th >
< th > Value< / th >
< th > Usage< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > @linkColor< / code > < / td >
< td > #08c< / td >
< td > Default link text color< / td >
< / tr >
< tr >
< td > < code > @linkColorHover< / code > < / td >
< td > < code > darken(@linkColor, 15%)< / code > < / td >
< td > Default link text hover color< / td >
< / tr >
< / tbody >
< / table >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
< div class = "row" >
< div class = "span6" >
< h3 > Grayscale colors< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span2" > Variable< / th >
< th > Value< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > @black< / code > < / td >
< td > #000< / td >
< / tr >
< tr >
< td > < code > @grayDarker< / code > < / td >
< td > #222< / td >
< / tr >
< tr >
< td > < code > @grayDark< / code > < / td >
< td > #333< / td >
< / tr >
< tr >
< td > < code > @gray< / code > < / td >
< td > #555< / td >
< / tr >
< tr >
< td > < code > @grayLight< / code > < / td >
< td > #999< / td >
< / tr >
< tr >
< td > < code > @grayLighter< / code > < / td >
< td > #eee< / td >
< / tr >
< tr >
< td > < code > @white< / code > < / td >
< td > #fff< / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "span6" >
< h3 > Accent colors< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span2" > Variable< / th >
< th > Value< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > @blue< / code > < / td >
< td > #049cdb< / td >
< / tr >
< tr >
< td > < code > @green< / code > < / td >
< td > #46a546< / td >
< / tr >
< tr >
< td > < code > @red< / code > < / td >
< td > #9d261d< / td >
< / tr >
< tr >
< td > < code > @yellow< / code > < / td >
< td > #ffc40d< / td >
< / tr >
< tr >
< td > < code > @orange< / code > < / td >
< td > #f89406< / td >
< / tr >
< tr >
< td > < code > @pink< / code > < / td >
< td > #c3325f< / td >
< / tr >
< tr >
< td > < code > @purple< / code > < / td >
< td > #7a43b6< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div > <!-- /row -->
< div class = "row" >
< div class = "span6" >
< h3 > Grid system< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span2" > Variable< / th >
< th > Value< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > @gridColumns< / code > < / td >
< td > 12< / td >
< / tr >
< tr >
< td > < code > @gridColumnWidth< / code > < / td >
< td > 60px< / td >
< / tr >
< tr >
< td > < code > @gridGutterWidth< / code > < / td >
< td > 20px< / td >
< / tr >
< tr >
< td > < code > @siteWidth< / code > < / td >
< td > < code > (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))< / code > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "span6" >
< h3 > Typography< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th class = "span2" > Variable< / th >
< th > Value< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > @baseFontSize< / code > < / td >
< td > 13px< / td >
< / tr >
< tr >
< td > < code > @baseFontFamily< / code > < / td >
< td > < code > "Helvetica Neue", Helvetica, Arial, sans-serif< / code > < / td >
< td > < / td >
< / tr >
< tr >
< td > < code > @baseLineHeight< / code > < / td >
< td > 18px< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div > <!-- /row -->
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
< h3 > Components< / h3 >
< div class = "row" >
< div class = "span6" >
< h4 > Buttons< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span3" > < code > @primaryButtonColor< / code > < / td >
< td > < code > @blue< / code > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Forms< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span3" > < code > @placeholderText< / code > < / td >
< td > < code > @grayLight< / code > < / td >
< / tr >
< / tbody >
< / table >
< h4 > Navbar< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span3" > < code > @navbarHeight< / code > < / td >
< td > 40px< / td >
< / tr >
< tr >
< td > < code > @navbarBackground< / code > < / td >
< td > < code > @grayDarker< / code > < / td >
< / tr >
< tr >
< td > < code > @navbarBackgroundHighlight< / code > < / td >
< td > < code > @grayDark< / code > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "span6" >
< h4 > Form states and alerts< / h4 >
< table class = "table table-bordered table-striped" >
< tbody >
< tr >
< td class = "span3" > < code > @warningText< / code > < / td >
< td > #f3edd2< / td >
< / tr >
< tr >
< td > < code > @warningBackground< / code > < / td >
< td > #c09853< / td >
< / tr >
< tr >
< td > < code > @warningBorder< / code > < / td >
< td > #f3edd2< / td >
< / tr >
< tr >
< td > < code > @errorText< / code > < / td >
< td > #b94a48< / td >
< / tr >
< tr >
< td > < code > @errorBackground< / code > < / td >
< td > #f2dede< / td >
< / tr >
< tr >
< td > < code > @errorBorder< / code > < / td >
< td > #e9c7c7< / td >
< / tr >
< tr >
< td > < code > @successText< / code > < / td >
< td > #468847< / td >
< / tr >
< tr >
< td > < code > @successBackground< / code > < / td >
< td > #dff0d8< / td >
< / tr >
< tr >
< td > < code > @successBorder< / code > < / td >
< td > #cfe8c4< / td >
< / tr >
< tr >
< td > < code > @infoText< / code > < / td >
< td > #3a87ad< / td >
< / tr >
< tr >
< td > < code > @infoBackground< / code > < / td >
< td > #d9edf7< / td >
< / tr >
< tr >
< td > < code > @infoBorder< / code > < / td >
< td > #bfe1f2< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div > <!-- /row -->
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
< / section >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
<!-- MIXINS
================================================== -->
< div class = "page-header" id = "mixins" >
< h1 > Mixins < small > from mixins.less< / small > < / h1 >
< / div >
2011-11-12 09:46:02 +01:00
2012-01-25 08:35:34 +01:00
<!-- OPERATIONS
================================================== -->
< div class = "page-header" id = "operations" >
< h1 > Operations< / h1 >
< / div >
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
< div class = "page-header" id = "compiling" >
< h1 > Compiling LESS and Bootstrap< / h1 >
< / div >
2011-11-12 09:46:02 +01:00
2011-10-27 08:11:56 +02:00
<!-- Using Bootstrap w/ Less
================================================== -->
< section id = "less" >
< div class = "page-header" >
< h1 > Using Bootstrap with Less < small > Supercharge your CSS with variables, mixins, and functions< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span3" >
< p > Bootstrap was built with < a href = "http://markdotto.com/bootstrap/" > Preboot< / a > , an open-source pack of mixins and variables to be used in conjunction with < a href = "http://lesscss.org" target = "_blank" > Less< / a > , a CSS preprocessor for faster and easier web development.< / p >
< p > Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.< / p >
< / div >
< div class = "span9" >
< h2 > How to use it< / h2 >
< p > Use this option to make full use of Bootstrap’ < / p >
< pre class = "prettyprint linenums" >
< link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
< script src="js/less-1.1.3.min.js"> < /script> < / pre >
< p > Not feeling the .js solution? < a href = "http://incident57.com/less" target = "_blank" > Try the Less Mac app< / a > or < a href = "http://lesscss.org/#-client-side-usage" target = "_blank" > use Node.js< / a > to compile when you deploy your code.< / p >
< h2 > What’ < / h2 >
< p > Here are some of the highlights of what’ < / p >
< h3 > Variables< / h3 >
< p > Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’ < / p >
< pre class = "prettyprint linenums" >
// Links
@linkColor: #8b59c2;
@linkColorHover: darken(@linkColor, 10);
// Grays
@black: #000;
@grayDark: lighten(@black, 25%);
@gray: lighten(@black, 50%);
@grayLight: lighten(@black, 70%);
@grayLighter: lighten(@black, 90%);
@white: #fff;
// Accent Colors
@blue: #08b5fb;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Baseline grid
@basefont: 13px;
@baseline: 18px;
< / pre >
< h3 > Commenting< / h3 >
< p > Less also provides another style of commenting in addition to CSS’ < code > /* ... */< / code > syntax.< / p >
< pre class = "prettyprint linenums" >
// This is a comment
/* This is also a comment */
< / pre >
< h3 > Mixins up the wazoo< / h3 >
< p > Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’ < code > box-shadow< / code > , cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.< / p >
< h4 > Font stacks< / h4 >
< pre class = "prettyprint linenums" >
#font {
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
...
}
< / pre >
< h4 > Gradients< / h4 >
< pre class = "prettyprint linenums" >
#gradient {
...
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@startColor, @endColor); // The standard
}
...
}
< / pre >
< h3 > Operations< / h3 >
< p > Get fancy and perform some math to generate flexible and powerful mixins like the one below.< / p >
< pre class = "prettyprint linenums" >
// Griditude
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Make some columns
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
< / pre >
< h2 id = "compiling" > Compiling Less< / h2 >
< p > After modifying the < code > .less< / code > files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.< / p >
< h3 > Ways to compile< / h3 >
2012-01-18 08:39:18 +01:00
< table class = "table table-bordered table-striped" >
2011-10-27 08:11:56 +02:00
< thead >
< tr >
< th style = "width: 120px;" > Method< / th >
< th > Steps< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Node with makefile< / td >
< td >
2012-01-07 08:59:22 +01:00
< p > Install the LESS command line compiler with npm by running the following command:< / p >
< pre > $ npm install less< / pre >
2011-10-27 08:11:56 +02:00
< p > Once installed just run < code > make< / code > from the root of your bootstrap directory and you're all set.< / p >
< p > Additionally, if you have < a href = "https://github.com/mynyml/watchr" > watchr< / a > installed, you may run < code > make watch< / code > to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).< / p >
< / td >
< / tr >
< td > Javascript< / td >
< td >
2011-10-27 08:24:22 +02:00
< p > < a href = "http://lesscss.org/" > Download the latest Less.js< / a > and include the path to it (and Bootstrap) in the < code > < head> < / code > .< / p >
2011-10-27 08:11:56 +02:00
< pre class = "prettyprint" >
< link rel="stylesheet/less" href="/path/to/bootstrap.less">
< script src="/path/to/less.js"> < /script>
< / pre >
< p > To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.< / p >
< / td >
< / tr >
< tr >
< td > Command line< / td >
< td >
2012-01-07 08:59:22 +01:00
< p > Install the LESS command line tool via Node and run the following command:< / p >
2011-10-27 08:11:56 +02:00
< pre > $ lessc ./lib/bootstrap.less > bootstrap.css< / pre >
< p > Be sure to include < code > --compress< / code > in that command if you're trying to save some bytes!< / p >
< / td >
< / tr >
< tr >
2011-12-12 18:51:41 +01:00
< td > < a href = "http://incident57.com/less/" target = "_blank" > Unofficial Mac app< / a > < / td >
2011-10-27 08:11:56 +02:00
< td >
< p > < a href = "http://incident57.com/less/" > The unofficial Mac app< / a > watches directories of .less files and compiles the code to local files after every save of a watched .less file.< / p >
< p > If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.< / p >
< / td >
< / tr >
2011-12-12 18:51:41 +01:00
< tr >
< td > < a href = "http://crunchapp.net/" target = "_blank" > Crunch< / a > < / td >
< td > Crunch is a great looking LESS editor and compiler built on Adobe Air.< / td >
< / tr >
< tr >
< td > < a href = "http://incident57.com/codekit/" target = "_blank" > CodeKit< / a > < / td >
< td > Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.< / td >
< / tr >
< tr >
< td > < a href = "http://wearekiss.com/simpless" target = "_blank" > Simpless< / a > < / td >
< td > Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the < a href = "https://github.com/Paratron/SimpLESS" target = "_blank" > source code is on GitHub< / a > .< / td >
< / tr >
2011-10-27 08:11:56 +02:00
< / tbody >
< / table >
< / div >
< / div >
< / section >
2012-01-24 00:17:32 +01:00
<!-- Footer
2011-10-27 08:11:56 +02:00
================================================== -->
< footer class = "footer" >
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
2011-12-11 11:03:16 +01:00
< p > Designed and built with all the love in the world < a href = "http://twitter.com/twitter" target = "_blank" > @twitter< / a > by < a href = "http://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "http://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Code licensed under the < a href = "http://www.apache.org/licenses/LICENSE-2.0" target = "_blank" > Apache License v2.0< / a > . Documentation licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
< p > Icons from < a href = "http://glyphicons.com" > Glyphicons Free< / a > , licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
2011-10-27 08:11:56 +02:00
< / footer >
2012-01-23 23:14:16 +01:00
2011-10-27 08:11:56 +02:00
< / div > <!-- /container -->
2012-01-23 23:14:16 +01:00
2011-10-27 08:11:56 +02:00
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
2012-01-23 23:14:16 +01:00
<!-- <script src="http://code.jquery.com/jquery - 1.7.min.js"></script> -->
< script src = "../js/tests/vendor/jquery.js" > < / script >
2011-10-27 08:11:56 +02:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
2012-01-23 23:14:16 +01:00
< script src = "../js/bootstrap-transition.js" > < / script >
< script src = "../js/bootstrap-alert.js" > < / script >
< script src = "../js/bootstrap-modal.js" > < / script >
2012-01-13 18:55:15 +01:00
< script src = "../js/bootstrap-dropdown.js" > < / script >
2012-01-23 23:14:16 +01:00
< script src = "../js/bootstrap-scrollspy.js" > < / script >
< script src = "../js/bootstrap-tab.js" > < / script >
< script src = "../js/bootstrap-tooltip.js" > < / script >
< script src = "../js/bootstrap-popover.js" > < / script >
< script src = "../js/bootstrap-button.js" > < / script >
< script src = "../js/bootstrap-collapse.js" > < / script >
< script src = "../js/bootstrap-carousel.js" > < / script >
< script src = "../js/bootstrap-typeahead.js" > < / script >
< script src = "assets/js/application.js" > < / script >
2011-10-27 08:11:56 +02:00
< / body >
< / html >
