From 6ab56051fdf916f03efb8aa6675e50bdd1cc3155 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 23:35:34 -0800 Subject: fix up docs css for responsive and subnav, fix forms error states --- docs/less.html | 829 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 495 insertions(+), 334 deletions(-) (limited to 'docs/less.html') diff --git a/docs/less.html b/docs/less.html index 86a65a6c7..e5e3baa66 100644 --- a/docs/less.html +++ b/docs/less.html @@ -58,359 +58,520 @@
-
- Heads up! This page is still under construction and is missing plenty of documentation. Hang tight! -
+
+ Heads up! This page is still under construction and is missing plenty of documentation. Hang tight! +
- -
-

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.

-
- -
-
+ +
+

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.

-
-
-

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.

+ +
+
+

Chop Shop Customize your build of Bootstrap

+
+ +
+
+ +
+
+
+
+

Scaffolding

+ + + +

Base CSS

+ + + + + + + +
+
+

Components

+ + + + + + + + + + +
+
+

JS Components

+ + + + + + + +
+
+

Responsive

+ + + +

Miscellaneous

+ + + + +
-
-
+
+ Reset variables + Next: Customize variables +
+
+
+
+
+

Links

+ + + + +

Grid system

+ + + + + + + + + + +
+
+

Typography

+ + + + + + +

Forms

+ + + + +

Navbar

+ + + + + + +
+
+

Form states & alerts

+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Next: Build and download +
+
+
+

And you're set!

+

We've compiled your selected CSS and customized variables and have them ready to download as a tidy ZIP file. Choose from compiled or compiled and minified CSS files.

+ Download CSS Download minified CSS +
+

Looking to customize your javascript? Head over to the Javascript plugins page to build your own Bootstrap JS bundle.

+
+
+
+ + - -
-
-

Variables from variables.less

-
-

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

Components

-
-
-

Buttons

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

Forms

- - - - - - - -
@placeholderText@grayLight
-

Navbar

- - - - - - - - - - - - - - - -
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark
-
-
-

Form states and alerts

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@warningText#f3edd2
@warningBackground#c09853
@warningBorder#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@errorBorder#e9c7c7
@successText#468847
@successBackground#dff0d8
@successBorder#cfe8c4
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorder#bfe1f2
-
-
+ +
+
+

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.

+
+
+

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

+
- -
-

Mixins from mixins.less

-
+

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

Components

+
+
+

Buttons

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

Forms

+ + + + + + + +
@placeholderText@grayLight
+

Navbar

+ + + + + + + + + + + + + + + +
@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark
+
+
+

Form states and alerts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@warningText#f3edd2
@warningBackground#c09853
@warningBorder#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@errorBorder#e9c7c7
@successText#468847
@successBackground#dff0d8
@successBorder#cfe8c4
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorder#bfe1f2
+
+
+
- -
-

Operations

-
+ +
+

Mixins from mixins.less

+
- -
-

Compiling LESS and Bootstrap

-
+ + +
+

Operations

+
+ + + + +
+

Compiling LESS and Bootstrap

+
-- cgit v1.2.3