{{_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 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}}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. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}

{{_i}}Bootstrap variables LESS variables, their values, and usage guidelines{{/i}}

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

@linkColor #08c {{_i}}Default link text color{{/i}}
@linkColorHover darken(@linkColor, 15%) {{_i}}Default link text hover color{{/i}}

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

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

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

@baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight 18px

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

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

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

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

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

{{_i}}Buttons{{/i}}

@primaryButtonBackground @linkColor

{{_i}}Forms{{/i}}

@placeholderText @grayLight

{{_i}}Navbar{{/i}}

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white

{{_i}}Form states and alerts{{/i}}

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

{{_i}}Bootstrap mixins {{/i}}

{{_i}}About mixins{{/i}}

{{_i}}Basic mixins{{/i}}

{{_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}}Parametric mixins{{/i}}

{{_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}}Easily add your own{{/i}}

{{_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}}Included mixins{{/i}}

{{_i}}Utilities{{/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: 5px, @width: 5px {{_i}}Quickly set the height and width on one line{{/i}}
.square() @size: 5px {{_i}}Builds on .size() to set the width and height as same value{{/i}}
.opacity() @opacity: 100 {{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}

Forms

{{_i}}Mixin{{/i}} {{_i}}Parameters{{/i}} {{_i}}Usage{{/i}}
.placeholder() @color: @placeholderText {{_i}}Set the placeholder text color for inputs{{/i}}

Typography

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

Grid system

{{_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 precent grid system with n columns and x % wide gutter{{/i}}

{{_i}}CSS3 properties{{/i}}

{{_i}}Mixin{{/i}} {{_i}}Parameters{{/i}} {{_i}}Usage{{/i}}
.border-radius() @radius: 5px {{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
.box-shadow() @shadow: 0 1px 3px rgba(0,0,0,.25) {{_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: 0, @y: 0 {{_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}}
.resizable() @direction: both {{_i}}Make any element resizable on the right and bottom{{/i}}
.content-columns() @columnCount, @columnGap: @gridColumnGutter {{_i}}Make the content of any element use CSS3 columns{{/i}}

{{_i}}Backgrounds and gradients{{/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}}Compiling Bootstrap with LESS{{/i}}

{{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}}

{{_i}}Tools for compiling{{/i}}

{{_i}}Node with makefile{{/i}}

{{_i}}Install the LESS command line compiler and uglify-js globally with npm by running the following command:{{/i}}

$ npm install -g less 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}}Command line{{/i}}

{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

$ lessc ./lib/bootstrap.less > bootstrap.css

{{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

{{_i}}Javascript{{/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}}Unofficial Mac app{{/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}}More Mac apps{{/i}}

Crunch

{{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

CodeKit

{{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

Simpless

{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}