From a683497dbc0f9cc3f883f195206e87589d09caaf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jun 2012 23:56:00 -0700 Subject: [PATCH] renamed less.html to extend.html, removing all the vars and mixins --- docs/base-css.html | 6 +- docs/components.html | 6 +- docs/download.html | 6 +- docs/examples.html | 6 +- docs/extend.html | 205 +++++ docs/index.html | 6 +- docs/javascript.html | 6 +- docs/less.html | 1052 -------------------------- docs/scaffolding.html | 6 +- docs/templates/layout.mustache | 6 +- docs/templates/pages/extend.mustache | 90 +++ docs/templates/pages/less.mustache | 937 ----------------------- docs/upgrading.html | 6 +- 13 files changed, 322 insertions(+), 2016 deletions(-) create mode 100644 docs/extend.html delete mode 100644 docs/less.html create mode 100644 docs/templates/pages/extend.mustache delete mode 100644 docs/templates/pages/less.mustache diff --git a/docs/base-css.html b/docs/base-css.html index 9eed2bea23..2b679d994c 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/components.html b/docs/components.html index 74dda4dc80..0c81aefa52 100644 --- a/docs/components.html +++ b/docs/components.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/download.html b/docs/download.html index 865e84143f..34fdc741ec 100644 --- a/docs/download.html +++ b/docs/download.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/examples.html b/docs/examples.html index 06b70b9b57..3b541df3b5 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/extend.html b/docs/extend.html new file mode 100644 index 0000000000..7169908a6a --- /dev/null +++ b/docs/extend.html @@ -0,0 +1,205 @@ + + + + + Extend · Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + Bootstrap +
    + +
    +
    +
    +
    + +
    + + +
    +

    Extending Bootstrap

    +

    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.

    +
    + + + + +
    +
    +

    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.

    + +
    + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index 1dea842ffe..4e028a13f4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/javascript.html b/docs/javascript.html index 8f07b58d81..bc82711fb9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/less.html b/docs/less.html deleted file mode 100644 index 559b4bbe16..0000000000 --- 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.

    - -
    - - - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 2cf9d5da13..3fe6affab9 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +
    • diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index eeda3c2c43..1cda879541 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -69,9 +69,6 @@
  • {{_i}}Javascript{{/i}}
    • -
  • - {{_i}}LESS{{/i}} -
  • {{_i}}Customize{{/i}} @@ -79,6 +76,9 @@
  • {{_i}}Examples{{/i}}
    • +
  • + {{_i}}Extend{{/i}} +
    • diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache new file mode 100644 index 0000000000..aae99f765d --- /dev/null +++ b/docs/templates/pages/extend.mustache @@ -0,0 +1,90 @@ + +
    +

    {{_i}}Extending Bootstrap{{/i}}

    +

    {{_i}}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}}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, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

    + 
    $ npm install -g less jshint recess 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 ./less/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}}

    + +
    diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache deleted file mode 100644 index b08efd86c0..0000000000 --- a/docs/templates/pages/less.mustache +++ /dev/null @@ -1,937 +0,0 @@ - -
    -

    {{_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}}Scaffolding and links{{/i}}

    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    @bodyBackground@white{{_i}}Page background color{{/i}}
    @textColor@grayDark{{_i}}Default text color for entire body, headings, and more{{/i}}
    @linkColor#08c{{_i}}Default link text color{{/i}}
    @linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}
    -

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

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

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

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

    {{_i}}Tables{{/i}}

    - - - - - - - - - - - - - - - - - - - -
    @tableBackgroundtransparent
    @tableBackgroundAccent#f9f9f9
    @tableBackgroundHover#f5f5f5
    @tableBorder#ddd
    - -

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

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

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

    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    @placeholderText@grayLight
    @inputBackground@white
    @inputBorder#ccc
    @inputBorderRadius3px
    @inputDisabledBackground@grayLighter
    @formActionsBackground#f5f5f5
    -

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

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

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

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

    {{_i}}Dropdowns{{/i}}

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

    {{_i}}Hero unit{{/i}}

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

    {{_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 @width{{_i}}Quickly set the height and width on one line{{/i}}
    .square()@size{{_i}}Builds on .size() to set the width and height as same value{{/i}}
    .opacity()@opacity{{_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 percent grid system with n columns and x % wide gutter{{/i}}
    #grid > .input()@gridColumnWidth, @gridGutterWidth{{_i}}Generate the pixel grid system for input elements, accounting for padding and borders{{/i}}
    .makeColumn@columns: 1, @offset: 0{{_i}}Turn any div into a grid column without the .span* classes{{/i}}
    -

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

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    {{_i}}Mixin{{/i}}{{_i}}Parameters{{/i}}{{_i}}Usage{{/i}}
    .border-radius()@radius{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}
    .box-shadow()@shadow{{_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, @y{{_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}}
    .backface-visibility()@visibility: visible{{_i}}Prevent flickering of content when using CSS 3D transforms{{/i}}
    .resizable()@direction: both{{_i}}Make any element resizable on the right and bottom{{/i}}
    .content-columns()@columnCount, @columnGap: @gridGutterWidth{{_i}}Make the content of any element use CSS3 columns{{/i}}
    .hyphens()@mode: auto{{_i}}CSS3 hyphenation when you want it (includes word-wrap: break-word){{/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, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

    - 
    $ npm install -g less jshint recess 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 ./less/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}}

    - -
    diff --git a/docs/upgrading.html b/docs/upgrading.html index 0ffe9a59f2..f001f17721 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -57,9 +57,6 @@
  • Javascript
    • -
  • - LESS -
  • Customize @@ -67,6 +64,9 @@
  • Examples
    • +
  • + Extend +