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/assets/css/docs.css | 22 +- docs/index.html | 2 +- docs/less.html | 405 ++++++++++++++++++++---------------- docs/templates/pages/index.mustache | 2 +- docs/templates/pages/less.mustache | 405 ++++++++++++++++++++---------------- 5 files changed, 462 insertions(+), 374 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b8d5bfcdc..d78cea2b1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -126,7 +126,6 @@ section { /* Subnav */ .subhead .nav { - padding: 0 10px; background-color: #eeeeee; /* Old browsers */ background-repeat: repeat-x; /* Repeat the gradient */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ @@ -136,7 +135,7 @@ section { background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */ - border: 1px solid #eee; + border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -145,6 +144,9 @@ section { margin: 0; padding-top: 11px; padding-bottom: 11px; + font-size: 13px; + border-left: 1px solid #f5f5f5; + border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; @@ -153,6 +155,15 @@ section { background-color: #fff; color: #333; } +.subhead .nav li:first-child a { + border-left: 0; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.subhead .nav li:last-child a { + border-right: 0; +} /* Quick links @@ -247,16 +258,19 @@ section { height: auto; margin-left: auto; margin-right: auto; - line-height: 21px; + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 12px; + line-height: 20px; white-space: nowrap; overflow: hidden; + background-color: #f5f5f5; /* Makes inputs behave like true block-level elements */ -webkit-box-sizing: border-box; /* Older Webkit */ -moz-box-sizing: border-box; /* Older FF */ -ms-box-sizing: border-box; /* IE8 */ box-sizing: border-box; /* CSS3 spec*/ /* Hacks for IE7 to make this work just okay enough to function */ - *width: 270px; + *width: 80%; *height: 24px; } diff --git a/docs/index.html b/docs/index.html index 0beff1e7e..1e4b4a270 100644 --- a/docs/index.html +++ b/docs/index.html @@ -136,7 +136,7 @@ - +

Designed for everyone, everywhere.

Need reasons to love Bootstrap? Look no further.

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

{{_i}}Built with LESS{{/i}}

-
-
-
-

{{_i}}Why LESS?{{/i}}

-

{{_i}}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.{{/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}}Built with LESS{{/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}}Why LESS?{{/i}}

+

{{_i}}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.{{/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}}Operations{{/i}}

-

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

+
-
+
-
-

{{_i}}Variables from variables.less{{/i}}

-
- -

{{_i}}Hyperlinks{{/i}}

- - - - - - - - - - - - - - - - - - - - -
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}{{_i}}Usage{{/i}}
@linkColor#0069d6{{_i}}Default link text color{{/i}}
@linkColorHoverdarken(@linkColor, 15){{_i}}Default link text hover color{{/i}}
- -
-
-

{{_i}}Grayscale colors{{/i}}

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

{{_i}}Variables from variables.less{{/i}}

-
-

{{_i}}Accent colors{{/i}}

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

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

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

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

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

{{_i}}Hyperlinks{{/i}}

+ + + + + + + + + + + + + + + + + + + + +
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}{{_i}}Usage{{/i}}
@linkColor#08c{{_i}}Default link text color{{/i}}
@linkColorHoverdarken(@linkColor, 15%){{_i}}Default link text hover color{{/i}}
+ +
+
+

{{_i}}Grayscale colors{{/i}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@black#000
@grayDarker#222
@grayDark#333
@gray#555
@grayLight#999
@grayLighter#eee
@white#fff
+
+
+

{{_i}}Accent colors{{/i}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@blue#049cdb
@green#46a546
@red#9d261d
@yellow#ffc40d
@orange#f89406
@pink#c3325f
@purple#7a43b6
+
+
+
+
+

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

+ + + + + + + + + + + + + + + + + + + + + + + + + +
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@siteWidth(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))
+
+
+

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

+ + + + + + + + + + + + + + + + + + + + + + +
{{_i}}Variable{{/i}}{{_i}}Value{{/i}}
@baseFontSize13px
@baseFontFamily"Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight18px
+
+
+
+
+

{{_i}}Visuals{{/i}}

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

{{_i}}Visuals{{/i}}

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