Bootstrap with LESS
Introduction
LESS is a CSS preprocessor that adds dynamism to CSS.
On the other hand, Bootstrap is a toolkit for rapid development of web applications and sites.
In this tutorial, we will discuss how to use Bootstrap with LESS CSS. This allows you to use Bootstrap's LESS variables, mixins, and nesting in your CSS.
View LESS Getting Started Tutorial
Getting Bootstrap and LESS CSS
Bootstrap Official Site: http://getbootstrap.com/
LESS Official Site: http://lesscss.org/
What's Included
Download Bootstrap, unzip the file. The LESS components of Bootstrap are located in the 'lib' directory. Since Bootstrap v1.4.0, it includes nine LESS files. Let's take a look at what each of these nine files contains.
bootstrap.less
This is the main LESS file. It imports other LESS files. There is no code in this file.
forms.less
This LESS file contains styles for form layouts and input types.
mixins.less
This LESS file makes CSS code reusable.
patterns.less
This LESS file contains CSS code for repetitive UI elements that are not overridden by the basic styles in the scaffolding LESS file.
reset.less
This LESS file contains CSS reset. It is an updated version of Eric Meyer's CSS reset. Some HTML elements like dfn, samp, etc., are exempt from reset.
scaffolding.less
This LESS file holds the basic styles needed to create a grid system, structured layout, and page templates.
tables.less
This LESS file contains styles for creating tables.
type.less
This LESS file contains typography-related styles. Styles for headings, paragraphs, lists, code, etc., are found in this file.
variables.less
This LESS file contains variables to customize the appearance and feel of Bootstrap.
How to Use
To use it, include the following code in your HTML page:
Note that less-1.1.5.min.js is not in the js folder; you need to download it and place it in the specified folder.
LESS Variables and Values, and Usage Guide
Hyperlinks
| @linkColor | #08c | Default link color | | | @linkColorHover | darken(@linkColor, 15%) | Default hover link color | |
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 | |
Buttons
| @primaryButtonBackground | @linkColor | |
Forms
| @placeholderText | @grayLight | |
Navigation Bar
| @navbarHeight | 40px | | | @navbarBackground | @grayDarker | | | @navbarBackgroundHighlight | @grayDark | | | @navbarText | @grayLight | | | @navbarLinkColor | @grayLight | | | @navbarLinkColorHover | @white | |
Form States and Notifications
| @warningText | #c09853 | | | @warningBackground | #f3edd2 | | | @errorText | #b94a48 | | | @errorBackground | #f2dede | | | @successText | #468847 | | | @successBackground | #dff0d8 | | | @infoText | #3a87ad | | | @infoBackground | #d9edf7 | |
Bootstrap Mixins
Basic Mixins
Basic mixins essentially include entire or partial code snippets. They are written like a CSS class and can be called anywhere.
.element {
.clearfix();
}
Parameterized Mixins
Parameterized mixins are similar to basic mixins, but they can receive parameters (by name) and parameters can have default values.
.element {
.border-radius(4px);
}
Easy Customization
Essentially, all Bootstrap mixins are stored in mixins.less, which is an excellent utility .less file. We can use the mixins in any .less file.
Therefore, you can directly use existing mixins or create a new one.
Including Mixins
Utility
| Mixin | Parameters | Usage |
|---|---|---|
| .clearfix() | None | Clear floats |
| .tab-focus() | None | Add WebKit-like focus styles and Firefox outline |
| .center-block() | None | Center block-level elements with margin: auto |
| .ie7-inline-block() | None | Add compliant display: inline-block for IE7 |
| .size() | @height: 5px, @width: 5px | Quickly set height and width |
| .square() | @size: 5px | Set a square area based on .size() |
| .opacity() | @opacity: 100 | Set opacity percentage (e.g., "50" or "75") |
Forms
| Mixin | Parameters | Usage |
|---|---|---|
| .placeholder() | @color: @placeholderText | Set the font color for input placeholders |
Typography
| Mixin | Parameters | Usage |
|---|---|---|
| #font > #family > .serif() | None | Apply a series of serif fonts to an element |
| #font > #family > .sans-serif() | None | Apply a series of sans-serif fonts to an element |
| #font > #family > .monospace() | None | Apply a series of monospace fonts to an element |
| #font > .shorthand() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | Conveniently set font size, weight, and line height |
| #font > .serif() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | Set serif font family, size, weight, and line height |
| #font > .sans-serif() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | Set sans-serif font family, size, weight, and line height |
| #font > .monospace() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | Set monospace font family, size, weight, and line height |
Grid System
| Mixin | Parameters | Usage |
|---|---|---|
| .container-fixed() | None | Create a horizontally centered container for content |
| #grid > .core() | @gridColumnWidth, @gridGutterWidth | Generate a pixel grid system (container, rows, columns) with n columns and x pixel gutter width |
| #grid > .fluid() | @fluidGridColumnWidth, @fluidGridGutterWidth | Generate a percentage grid system with n columns and x% gutter width |
CSS3 Properties
| Mixin | Parameters | Usage | | --- | --- | --- |
Border Radius
| Mixin | Parameter | Usage |
|---|---|---|
| .border-radius() | @radius: 5px | Rounds the corners of an element, can be a single value or specify each corner |
| .box-shadow() | @shadow: 0 1px 3px rgba(0,0,0,.25) | Applies a shadow to an element |
| .transition() | @transition | Adds CSS3 transition effects (e.g., all .2s linear) |
| .rotate() | @degrees | Rotates an element by n degrees |
| .scale() | @ratio | Scales an element by n times its original size |
| .translate() | @x: 0, @y: 0 | Moves an element x and y pixels on the plane |
| .background-clip() | @clip | Clips the background of an element (useful for border-radius) |
| .background-size() | @size | Changes the size of background images via CSS3 |
| .box-sizing() | @boxmodel | Alters the box model of an element (e.g., border-box for 100% width inputs) |
| .user-select() | @select | Changes the text selection cursor on the page |
| .resizable() | @direction: both | Resizes an element by adjusting its bottom-right corner |
| .content-columns() | @columnCount, @columnGap: @gridColumnGutter | Makes content within an element use CSS3 columns |
Backgrounds and Gradients
| Mixin | Parameter | Usage |
|---|---|---|
| #translucent > .background() | @color: @white, @alpha: 1 | Sets the background color and opacity of an element |
| #translucent > .border() | @color: @white, @alpha: 1 | Sets the border color and opacity of an element |
| #gradient > .vertical() | @startColor, @endColor | Creates a cross-browser vertical background gradient |
| #gradient > .horizontal() | @startColor, @endColor | Creates a cross-browser horizontal background gradient |
| #gradient > .directional() | @startColor, @endColor, @deg | Creates a cross-browser slanted background gradient |
| #gradient > .vertical-three-colors() | @startColor, @midColor, @colorStop, @endColor | Creates a cross-browser three-color background gradient |
| #gradient > .radial() | @innerColor, @outerColor | Creates a cross-browser radial background gradient |
| #gradient > .striped() | @color, @angle | Creates a cross-browser striped background gradient |
| #gradientBar() | @primaryColor, @secondaryColor | Used to give buttons a gradient background and light/dark borders |
How to Compile
Node.js with Makefile
Run the following commands to install the LESS command-line compiler and uglify-js globally using npm:
$ npm install -g less uglify-js
After successful installation, run make in your Bootstrap root directory to compile the CSS.
Additionally, if you have watchr installed, you can run make watch, which will automatically recompile Bootstrap every time you modify it. (This is optional, done for convenience.)
Using JavaScript
Simply include the less.js file (download the latest Less.js) and reload the page.
The JS file will compile the LESS.
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
Command Line
If you have the Less command line installed, use the following command to compile:
$ lessc ./lib/bootstrap.less > bootstrap.css
For a compressed compilation, use the --compress command.
Less Mac App
Although unofficial, there is a usable Less Mac application available for compiling.
Click here to download all HTML, CSS, JS, and image files used in this tutorial.