From 8ff621aa26dee69088b527089cdd719bce68be31 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 16:07:30 -0800 Subject: fix broken index page heading, update variables and less pages --- docs/less.html | 405 +++++++++++++++++++++++++++++++-------------------------- 1 file changed, 221 insertions(+), 184 deletions(-) (limited to 'docs/less.html') diff --git a/docs/less.html b/docs/less.html index cd486ac98..735bd0dc6 100644 --- a/docs/less.html +++ b/docs/less.html @@ -63,207 +63,244 @@

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 it's core, a dynamic stylesheet language created by 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.

+
+
+

Built with LESS

-
-

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.

+
+
+

Why LESS?

+

Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by 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.

+
-
-

Operations

-

Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.

+
+
+

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

+
-
+
-
-

Variables from variables.less

-
- -

Hyperlinks

- - - - - - - - - - - - - - - - - - - - -
VariableValueUsage
@linkColor#0069d6Default link text color
@linkColorHoverdarken(@linkColor, 15)Default link text hover color
- -
-
-

Grayscale colors

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
@black#000
@grayDarklighten(@black, 25%)
@graylighten(@black, 50%)
@grayLightlighten(@black, 75%)
@grayLighterlighten(@black, 90%)
@white#fff
+
+
+

Variables from variables.less

-
-

Accent colors

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@blue#049CDB
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6
-
-
-
-
-

Grid system

- - - - - - - - - - - - - - - - - - - -
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
-
-
-

Typography

- - - - - - - - - - - - - - - - -
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px
-
-
+

Hyperlinks

+ + + + + + + + + + + + + + + + + + + + +
VariableValueUsage
@linkColor#08cDefault link text color
@linkColorHoverdarken(@linkColor, 15%)Default link text hover color
+ +
+
+

Grayscale colors

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

Accent colors

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

Grid system

+ + + + + + + + + + + + + + + + + + + + + + + + + +
VariableValue
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
+
+
+

Typography

+ + + + + + + + + + + + + + + + + + + + + + +
VariableValue
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px
+
+
+
+
+

Visuals

+
+
+ + + + + + + + +
@primaryButtonColor@blue
+
+
+ -
-
-

Visuals

-
-
- - - - - - - - -
@primaryButtonColor@blue
-
-