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

{{_i}}Bootstrap variables {{/i}}

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

{{_i}}Variable{{/i}} {{_i}}Value{{/i}} {{_i}}Usage{{/i}}
@linkColor #08c {{_i}}Default link text color{{/i}}
@linkColorHover darken(@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}}
@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@siteWidth (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))

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

{{_i}}Variable{{/i}} {{_i}}Value{{/i}}
@baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight 18px

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

Buttons

@primaryButtonColor @blue

Forms

@placeholderText @grayLight

Navbar

@navbarHeight 40px
@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}}Bootstrap mixins {{/i}}

{{_i}}Mixins up the wazoo{{/i}}

{{_i}}Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.{{/i}}

{{_i}}Font stacks{{/i}}

#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;
  }
  ...
}

{{_i}}Gradients{{/i}}

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

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

{{_i}}Get fancy and perform some math to generate flexible and powerful mixins like the one below.{{/i}}

// 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));
}

{{_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 with npm by running the following command:{{/i}}

$ npm install less

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