# Built with LESS

### Why LESS?

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.

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

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

# Bootstrap variables LESS variables, their values, and usage guidelines

### Scaffolding and links

`@bodyBackground` | `@white` | Page background color |
`@textColor` | `@grayDark` | Default text color for entire body, headings, and more |
`@linkColor` | `#08c` | Default link text color |
`@linkColorHover` | `darken(@linkColor, 15%)` | Default link text hover color |

### Grid system

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

### Typography

`@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`

### Tables

`@tableBackground` | `transparent`
`@tableBackgroundAccent` | `#f9f9f9`
`@tableBackgroundHover` | `#f5f5f5`
`@tableBorder` | `ddd`

### Grayscale colors

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

### Accent colors

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

### Components

#### Buttons

`@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` |

#### Forms

`@placeholderText` | `@grayLight`
`@inputBackground` | `@white`
`@inputBorder` | `#ccc`
`@inputBorderRadius` | `3px`
`@inputDisabledBackground` | `@grayLighter`
`@formActionsBackground` | `#f5f5f5`

#### Form states and alerts

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

#### Navbar

`@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` |

#### Dropdowns

`@dropdownBackground` | `@white`
`@dropdownBorder` | `rgba(0,0,0,.2)`
`@dropdownLinkColor` | `@grayDark`
`@dropdownLinkColorHover` | `@white`
`@dropdownLinkBackgroundHover` | `@linkColor`
`@@dropdownDividerTop` | `#e5e5e5`
`@@dropdownDividerBottom` | `@white`

#### Hero unit

`@heroUnitBackground` | `@grayLighter` |
`@heroUnitHeadingColor` | `inherit` |
`@heroUnitLeadColor` | `inhereit` |

# Bootstrap mixins

## About mixins

### Basic mixins

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.

    .element {
      .clearfix();
    }

### Parametric mixins

A parametric mixin is just like a basic mixin, but it also accepts parameters (hence the name) with optional default values.

    .element {
      .border-radius(4px);
    }

### Easily add your own

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.

So, go ahead and use the existing ones or feel free to add your own as you need.

## Included mixins

### Utilities

Mixin | Parameters | Usage
--- | --- | ---
`.clearfix()` | none | Add to any parent to clear floats within
`.tab-focus()` | none | Apply the Webkit focus style and round Firefox outline
`.center-block()` | none | Auto center a block-level element using `margin: auto`
`.ie7-inline-block()` | none | Use in addition to regular `display: inline-block` to get IE7 support
`.size()` | `@height @width` | Quickly set the height and width on one line
`.square()` | `@size` | Builds on `.size()` to set the width and height as same value
`.opacity()` | `@opacity` | Set, in whole numbers, the opacity percentage (e.g., "50" or "75")

### Forms

Mixin | Parameters | Usage
--- | --- | ---
`.placeholder()` | `@color: @placeholderText` | Set the `placeholder` text color for inputs

### Typography

Mixin | Parameters | Usage
--- | --- | ---
`#font > #family > .serif()` | none | Make an element use a serif font stack
`#font > #family > .sans-serif()` | none | Make an element use a sans-serif font stack
`#font > #family > .monospace()` | none | Make an element use a monospace font stack
`#font > .shorthand()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Easily set font size, weight, and leading
`#font > .serif()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Set font family to serif, and control size, weight, and leading
`#font > .sans-serif()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Set font family to sans-serif, and control size, weight, and leading
`#font > .monospace()` | `@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight` | Set font family to monospace, and control size, weight, and leading

### Grid system

Mixin | Parameters | Usage
--- | --- | ---
`.container-fixed()` | none | Create a horizontally centered container for holding your content
`#grid > .core()` | `@gridColumnWidth, @gridGutterWidth` | Generate a pixel grid system (container, row, and columns) with n columns and x pixel wide gutter
`#grid > .fluid()` | `@fluidGridColumnWidth, @fluidGridGutterWidth` | Generate a percent grid system with n columns and x % wide gutter
`#grid > .input()` | `@gridColumnWidth, @gridGutterWidth` | Generate the pixel grid system for `input` elements, accounting for padding and borders
`.makeColumn` | `@columns: 1, @offset: 0` | Turn any `div` into a grid column without the `.span*` classes

### CSS3 properties

Mixin | Parameters | Usage
--- | --- | ---
`.border-radius()` | `@radius` | Round the corners of an element. Can be a single value or four space-separated values
`.box-shadow()` | `@shadow` | Add a drop shadow to an element
`.transition()` | `@transition` | Add CSS3 transition effect (e.g., `all .2s linear`)
`.rotate()` | `@degrees` | Rotate an element n degrees
`.scale()` | `@ratio` | Scale an element to n times its original size
`.translate()` | `@x, @y` | Move an element on the x and y planes
`.background-clip()` | `@clip` | Crop the background of an element (useful for `border-radius`)
`.background-size()` | `@size` | Control the size of background images via CSS3
`.box-sizing()` | `@boxmodel` | Change the box model for an element (e.g., `border-box` for a full-width `input`)
`.user-select()` | `@select` | Control cursor selection of text on a page
`.backface-visibility()` | `@visibility: visible` | Prevent flickering of content when using CSS 3D transforms
`.resizable()` | `@direction: both` | Make any element resizable on the right and bottom
`.content-columns()` | `@columnCount, @columnGap: @gridGutterWidth` | Make the content of any element use CSS3 columns
`.hyphens()` | `@mode: auto` | CSS3 hyphenation when you want it (includes `word-wrap: break-word`)

### Backgrounds and gradients

Mixin | Parameters | Usage
--- | --- | ---
`#translucent > .background()` | `@color: @white, @alpha: 1` | Give an element a translucent background color
`#translucent > .border()` | `@color: @white, @alpha: 1` | Give an element a translucent border color
`#gradient > .vertical()` | `@startColor, @endColor` | Create a cross-browser vertical background gradient
`#gradient > .horizontal()` | `@startColor, @endColor` | Create a cross-browser horizontal background gradient
`#gradient > .directional()` | `@startColor, @endColor, @deg` | Create a cross-browser directional background gradient
`#gradient > .vertical-three-colors()` | `@startColor, @midColor, @colorStop, @endColor` | Create a cross-browser three-color background gradient
`#gradient > .radial()` | `@innerColor, @outerColor` | Create a cross-browser radial background gradient
`#gradient > .striped()` | `@color, @angle` | Create a cross-browser striped background gradient
`#gradientBar()` | `@primaryColor, @secondaryColor` | Used for buttons to assign a gradient and slightly darker border

# Compiling Bootstrap with LESS

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

## Tools for compiling

### Node with makefile

Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

    $ npm install -g less jshint recess uglify-js

Once installed just run `make` from the root of your bootstrap directory and you're all set.

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

### Command line

Install the LESS command line tool via Node and run the following command:

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

Be sure to include `--compress` in that command if you're trying to save some bytes!

### Javascript

Download the latest Less.js and include the path to it (and Bootstrap) in the `<head>`.

    <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

### Unofficial Mac app

The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

### More Mac apps

#### Crunch

Crunch is a great looking LESS editor and compiler built on Adobe Air.

#### CodeKit

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

#### Simpless

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