diff --git a/docs/index.html b/docs/index.html index 611e28b132..bca04b1a00 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1639,34 +1639,13 @@ Lorem ipsum dolar sit amet illo error ipsum verita font-weight: @weight; line-height: @lineHeight; } - .serif(@weight: normal, @size: 14px, @lineHeight: 20px) { - font-family: "Georgia", Times New Roman, Times, sans-serif; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } - .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { - font-family: "Monaco", Courier New, monospace; - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } + ... }
#gradient { - .horizontal (@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 - background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(left, @startColor, @endColor); // Le standard - } + ... .vertical (@startColor: #555, @endColor: #333) { background-color: @endColor; background-repeat: repeat-x; @@ -1678,16 +1657,11 @@ Lorem ipsum dolar sit amet illo error ipsum verita background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 background-image: linear-gradient(@startColor, @endColor); // The standard } - .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { - ... - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - ... - } + ... }-
Get fancy and perform some math to generate flexible and powerful mixins like the one below.
// Griditude @@ -1696,19 +1670,55 @@ Lorem ipsum dolar sit amet illo error ipsum verita @gridGutterWidth: 20px; @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// Grid System -.container { - width: @siteWidth; - margin: 0 auto; - .clearfix(); -} +// Make some columns .columns(@columnSpan: 1) { width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } -.offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; -}+ +
After modifying the .less
files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.
Method | +Steps | +
---|---|
Node with makefile | ++ + | +Javascript | +
+ Download the latest Less.js and include the path to it (and your Bootstrap code) in the +<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. + |
+
+
Command line | ++ + | +
Less 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. + |
+