From a683497dbc0f9cc3f883f195206e87589d09caaf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jun 2012 23:56:00 -0700 Subject: renamed less.html to extend.html, removing all the vars and mixins --- docs/less.html | 1052 -------------------------------------------------------- 1 file changed, 1052 deletions(-) delete mode 100644 docs/less.html (limited to 'docs/less.html') diff --git a/docs/less.html b/docs/less.html deleted file mode 100644 index 559b4bbe1..000000000 --- a/docs/less.html +++ /dev/null @@ -1,1052 +0,0 @@ - - - - - Less ยท Twitter Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - Bootstrap -
- -
-
-
-
- -
- - -
-

Using LESS with Bootstrap

-

Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.

-
-
- -
-
-
- - - - -
-
-

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

- LESS CSS -

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@whitePage background color
@textColor@grayDarkDefault text color for entire body, headings, and more
@linkColor#08cDefault link text color
@linkColorHoverdarken(@linkColor, 15%)Default link text hover color
-

Grid system

- - - - - - - - - - - - - - - - - - - - - - - -
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@fluidGridColumnWidth6.382978723%
@fluidGridGutterWidth2.127659574%
-

Typography

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@sansFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamilyGeorgia, "Times New Roman", Times, serif
@monoFontFamilyMenlo, Monaco, "Courier New", monospace
@baseFontSize13pxMust be pixels
@baseFontFamily@sansFontFamily
@baseLineHeight18pxMust be pixels
@altFontFamily@serifFontFamily
@headingsFontFamilyinherit
@headingsFontWeightbold
@headingsColorinherit
-

Tables

- - - - - - - - - - - - - - - - - - - -
@tableBackgroundtransparent
@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
@btnBackgroundHighlightdarken(@white, 10%)
@btnBorderdarken(@white, 20%)
@btnPrimaryBackground@linkColor
@btnPrimaryBackgroundHighlightspin(@btnPrimaryBackground, 15%)
@btnInfoBackground#5bc0de
@btnInfoBackgroundHighlight#2f96b4
@btnSuccessBackground#62c462
@btnSuccessBackgroundHighlight#51a351
@btnWarningBackgroundlighten(@orange, 15%)
@btnWarningBackgroundHighlight@orange
@btnDangerBackground#ee5f5b
@btnDangerBackgroundHighlight#bd362f
@btnInverseBackground@gray
@btnInverseBackgroundHighlight@grayDarker
-

Forms

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
@placeholderText@grayLight
@inputBackground@white
@inputBorder#ccc
@inputBorderRadius3px
@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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark
@navbarText@grayLight
@navbarLinkColor@grayLight
@navbarLinkColorHover@white
@navbarLinkColorActive@navbarLinkColorHover
@navbarLinkBackgroundHovertransparent
@navbarLinkBackgroundActive@navbarBackground
@navbarSearchBackgroundlighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus@white
@navbarSearchBorderdarken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor#ccc
@navbarBrandColor@navbarLinkColor
-

Dropdowns

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@dropdownBackground@white
@dropdownBorderrgba(0,0,0,.2)
@dropdownLinkColor@grayDark
@dropdownLinkColorHover@white
@dropdownLinkColorActive@linkColor
@dropdownLinkBackgroundHover@grayLighter
@dropdownLinkBackgroundActive@linkColor
@dropdownDividerTop#e5e5e5
@dropdownDividerBottom@white
-

Hero unit

- - - - - - - - - - - - - - - - - - -
@heroUnitBackground@grayLighter
@heroUnitHeadingColorinherit
@heroUnitLeadColorinherit
- - -
- - - - -
-
-

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MixinParametersUsage
.clearfix()noneAdd to any parent to clear floats within
.tab-focus()noneApply the Webkit focus style and round Firefox outline
.center-block()noneAuto center a block-level element using margin: auto
.ie7-inline-block()noneUse in addition to regular display: inline-block to get IE7 support
.size()@height @widthQuickly set the height and width on one line
.square()@sizeBuilds on .size() to set the width and height as same value
.opacity()@opacitySet, in whole numbers, the opacity percentage (e.g., "50" or "75")
-

Forms

- - - - - - - - - - - - - - - -
MixinParametersUsage
.placeholder()@color: @placeholderTextSet the placeholder text color for inputs
-

Typography

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MixinParametersUsage
#font > #family > .serif()noneMake an element use a serif font stack
#font > #family > .sans-serif()noneMake an element use a sans-serif font stack
#font > #family > .monospace()noneMake an element use a monospace font stack
#font > .shorthand()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightEasily set font size, weight, and leading
#font > .serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightSet font family to serif, and control size, weight, and leading
#font > .sans-serif()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightSet font family to sans-serif, and control size, weight, and leading
#font > .monospace()@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeightSet font family to monospace, and control size, weight, and leading
-

Grid system

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MixinParametersUsage
.container-fixed()noneCreate a horizontally centered container for holding your content
#grid > .core()@gridColumnWidth, @gridGutterWidthGenerate a pixel grid system (container, row, and columns) with n columns and x pixel wide gutter
#grid > .fluid()@fluidGridColumnWidth, @fluidGridGutterWidthGenerate a percent grid system with n columns and x % wide gutter
#grid > .input()@gridColumnWidth, @gridGutterWidthGenerate the pixel grid system for input elements, accounting for padding and borders
.makeColumn@columns: 1, @offset: 0Turn any div into a grid column without the .span* classes
-

CSS3 properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MixinParametersUsage
.border-radius()@radiusRound the corners of an element. Can be a single value or four space-separated values
.box-shadow()@shadowAdd a drop shadow to an element
.transition()@transitionAdd CSS3 transition effect (e.g., all .2s linear)
.rotate()@degreesRotate an element n degrees
.scale()@ratioScale an element to n times its original size
.translate()@x, @yMove an element on the x and y planes
.background-clip()@clipCrop the background of an element (useful for border-radius)
.background-size()@sizeControl the size of background images via CSS3
.box-sizing()@boxmodelChange the box model for an element (e.g., border-box for a full-width input)
.user-select()@selectControl cursor selection of text on a page
.backface-visibility()@visibility: visiblePrevent flickering of content when using CSS 3D transforms
.resizable()@direction: bothMake any element resizable on the right and bottom
.content-columns()@columnCount, @columnGap: @gridGutterWidthMake the content of any element use CSS3 columns
.hyphens()@mode: autoCSS3 hyphenation when you want it (includes word-wrap: break-word)
-

Backgrounds and gradients

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MixinParametersUsage
#translucent > .background()@color: @white, @alpha: 1Give an element a translucent background color
#translucent > .border()@color: @white, @alpha: 1Give an element a translucent border color
#gradient > .vertical()@startColor, @endColorCreate a cross-browser vertical background gradient
#gradient > .horizontal()@startColor, @endColorCreate a cross-browser horizontal background gradient
#gradient > .directional()@startColor, @endColor, @degCreate a cross-browser directional background gradient
#gradient > .vertical-three-colors()@startColor, @midColor, @colorStop, @endColorCreate a cross-browser three-color background gradient
#gradient > .radial()@innerColor, @outerColorCreate a cross-browser radial background gradient
#gradient > .striped()@color, @angleCreate a cross-browser striped background gradient
.gradientBar()@primaryColor, @secondaryColorUsed 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.

- -
- - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3