{{_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}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/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}}Visit the official website at http://lesscss.org to learn more.{{/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}}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}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}
@bodyBackground |
@white |
{{_i}}Page background color{{/i}} | |
@textColor |
@grayDark |
{{_i}}Default text color for entire body, headings, and more{{/i}} | |
@linkColor |
#08c |
{{_i}}Default link text color{{/i}} | |
@linkColorHover |
darken(@linkColor, 15%) |
{{_i}}Default link text hover color{{/i}} |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Must be pixels |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Must be pixels |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@btnBackground |
@white |
|
@btnBackgroundHighlight |
darken(@white, 10%) |
|
@btnBorder |
darken(@white, 20%) |
|
@btnPrimaryBackground |
@linkColor |
|
@btnPrimaryBackgroundHighlight |
spin(@btnPrimaryBackground, 15%) |
|
@btnInfoBackground |
#5bc0de |
|
@btnInfoBackgroundHighlight |
#2f96b4 |
|
@btnSuccessBackground |
#62c462 |
|
@btnSuccessBackgroundHighlight |
51a351 |
|
@btnWarningBackground |
lighten(@orange, 15%) |
|
@btnWarningBackgroundHighlight |
@orange |
|
@btnDangerBackground |
#ee5f5b |
|
@btnDangerBackgroundHighlight |
#bd362f |
|
@btnInverseBackground |
@gray |
|
@btnInverseBackgroundHighlight |
@grayDarker |
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
|
@navbarLinkColorActive |
@navbarLinkColorHover |
|
@navbarLinkBackgroundHover |
transparent |
|
@navbarLinkBackgroundActive |
@navbarBackground |
|
@navbarSearchBackground |
lighten(@navbarBackground, 25%) |
|
@navbarSearchBackgroundFocus |
@white |
|
@navbarSearchBorder |
darken(@navbarSearchBackground, 30%) |
|
@navbarSearchPlaceholderColor |
#ccc |
|
@navbarBrandColor |
@navbarLinkColor |
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
{{_i}}A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.{{/i}}
.element { .clearfix(); }
{{_i}}A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.{{/i}}
.element { .border-radius(4px); }
{{_i}}Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.{{/i}}
{{_i}}So, go ahead and use the existing ones or feel free to add your own as you need.{{/i}}
{{_i}}Mixin{{/i}} | {{_i}}Parameters{{/i}} | {{_i}}Usage{{/i}} |
---|---|---|
.clearfix() |
none | {{_i}}Add to any parent to clear floats within{{/i}} |
.tab-focus() |
none | {{_i}}Apply the Webkit focus style and round Firefox outline{{/i}} |
.center-block() |
none | {{_i}}Auto center a block-level element using margin: auto {{/i}} |
.ie7-inline-block() |
none | {{_i}}Use in addition to regular display: inline-block to get IE7 support{{/i}} |
.size() |
@height @width |
{{_i}}Quickly set the height and width on one line{{/i}} |
.square() |
@size |
{{_i}}Builds on .size() to set the width and height as same value{{/i}} |
.opacity() |
@opacity |
{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}} |
{{_i}}Mixin{{/i}} | {{_i}}Parameters{{/i}} | {{_i}}Usage{{/i}} |
---|---|---|
.placeholder() |
@color: @placeholderText |
{{_i}}Set the placeholder text color for inputs{{/i}} |
{{_i}}Mixin{{/i}} | {{_i}}Parameters{{/i}} | {{_i}}Usage{{/i}} |
---|---|---|
#font > #family > .serif() |
none | {{_i}}Make an element use a serif font stack{{/i}} |
#font > #family > .sans-serif() |
none | {{_i}}Make an element use a sans-serif font stack{{/i}} |
#font > #family > .monospace() |
none | {{_i}}Make an element use a monospace font stack{{/i}} |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
{{_i}}Easily set font size, weight, and leading{{/i}} |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
{{_i}}Set font family to serif, and control size, weight, and leading{{/i}} |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
{{_i}}Set font family to sans-serif, and control size, weight, and leading{{/i}} |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
{{_i}}Set font family to monospace, and control size, weight, and leading{{/i}} |
{{_i}}Mixin{{/i}} | {{_i}}Parameters{{/i}} | {{_i}}Usage{{/i}} |
---|---|---|
.container-fixed() |
none | {{_i}}Create a horizontally centered container for holding your content{{/i}} |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
{{_i}}Generate a pixel grid system (container, row, and columns) with n columns and x pixel wide gutter{{/i}} |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
{{_i}}Generate a percent grid system with n columns and x % wide gutter{{/i}} |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
{{_i}}Generate the pixel grid system for input elements, accounting for padding and borders{{/i}} |
.makeColumn |
@columns: 1, @offset: 0 |
{{_i}}Turn any div into a grid column without the .span* classes{{/i}} |
{{_i}}Mixin{{/i}} | {{_i}}Parameters{{/i}} | {{_i}}Usage{{/i}} |
---|---|---|
.border-radius() |
@radius |
{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}} |
.box-shadow() |
@shadow |
{{_i}}Add a drop shadow to an element{{/i}} |
.transition() |
@transition |
{{_i}}Add CSS3 transition effect (e.g., all .2s linear ){{/i}} |
.rotate() |
@degrees |
{{_i}}Rotate an element n degrees{{/i}} |
.scale() |
@ratio |
{{_i}}Scale an element to n times its original size{{/i}} |
.translate() |
@x, @y |
{{_i}}Move an element on the x and y planes{{/i}} |
.background-clip() |
@clip |
{{_i}}Crop the background of an element (useful for border-radius ){{/i}} |
.background-size() |
@size |
{{_i}}Control the size of background images via CSS3{{/i}} |
.box-sizing() |
@boxmodel |
{{_i}}Change the box model for an element (e.g., border-box for a full-width input ){{/i}} |
.user-select() |
@select |
{{_i}}Control cursor selection of text on a page{{/i}} |
.backface-visibility() |
@visibility: visible |
{{_i}}Prevent flickering of content when using CSS 3D transforms{{/i}} |
.resizable() |
@direction: both |
{{_i}}Make any element resizable on the right and bottom{{/i}} |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
{{_i}}Make the content of any element use CSS3 columns{{/i}} |
.hyphens() |
@mode: auto |
{{_i}}CSS3 hyphenation when you want it (includes word-wrap: break-word ){{/i}} |
{{_i}}Mixin{{/i}} | {{_i}}Parameters{{/i}} | {{_i}}Usage{{/i}} |
---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
{{_i}}Give an element a translucent background color{{/i}} |
#translucent > .border() |
@color: @white, @alpha: 1 |
{{_i}}Give an element a translucent border color{{/i}} |
#gradient > .vertical() |
@startColor, @endColor |
{{_i}}Create a cross-browser vertical background gradient{{/i}} |
#gradient > .horizontal() |
@startColor, @endColor |
{{_i}}Create a cross-browser horizontal background gradient{{/i}} |
#gradient > .directional() |
@startColor, @endColor, @deg |
{{_i}}Create a cross-browser directional background gradient{{/i}} |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
{{_i}}Create a cross-browser three-color background gradient{{/i}} |
#gradient > .radial() |
@innerColor, @outerColor |
{{_i}}Create a cross-browser radial background gradient{{/i}} |
#gradient > .striped() |
@color, @angle |
{{_i}}Create a cross-browser striped background gradient{{/i}} |
#gradientBar() |
@primaryColor, @secondaryColor |
{{_i}}Used for buttons to assign a gradient and slightly darker border{{/i}} |
{{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}
$ npm install -g less jshint recess uglify-js
{{_i}}Once installed just run make
from the root of your bootstrap directory and you're all set.{{/i}}
{{_i}}Additionally, if you have watchr installed, you may run make watch
to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}
{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}
$ lessc ./less/bootstrap.less > bootstrap.css
{{_i}}Be sure to include --compress
in that command if you're trying to save some bytes!{{/i}}
{{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>
.{{/i}}
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
{{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}
{{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.{{/i}}
{{_i}}If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}
{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}
{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}
{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}