+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/assets/less/twbs-222/tests/css-tests.css b/docs/assets/less/twbs-222/tests/css-tests.css
new file mode 100755
index 000000000..9edaf69bf
--- /dev/null
+++ b/docs/assets/less/twbs-222/tests/css-tests.css
@@ -0,0 +1,139 @@
+/*!
+ * Bootstrap CSS Tests
+ */
+
+
+/* Remove background image */
+body {
+ background-image: none;
+}
+
+/* Space out subhead */
+.subhead {
+ margin-bottom: 36px;
+}
+/*h4 {
+ margin-bottom: 5px;
+}
+*/
+
+.type-test {
+ margin-bottom: 20px;
+ padding: 0 20px 20px;
+ background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+ background-color: rgba(255,0,0,.2);
+}
+
+
+/* colgroup tests */
+.col1 {
+ background-color: rgba(255,0,0,.1);
+}
+.col2 {
+ background-color: rgba(0,255,0,.1);
+}
+.col3 {
+ background-color: rgba(0,0,255,.1);
+}
+
+
+/* Fluid row inputs */
+#rowInputs .row > [class*=span],
+#fluidRowInputs .row-fluid > [class*=span] {
+ background-color: rgba(255,0,0,.1);
+}
+
+
+/* Fluid grid */
+.fluid-grid {
+ margin-bottom: 45px;
+}
+.fluid-grid .row {
+ height: 40px;
+ padding-top: 10px;
+ margin-top: 10px;
+ color: #ddd;
+ text-align: center;
+}
+.fluid-grid .span1 {
+ background-color: #999;
+}
+
+
+/* Gradients */
+
+[class^="gradient-"] {
+ width: 100%;
+ height: 400px;
+ margin: 20px 0;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+
+.gradient-horizontal {
+ background-color: #333333;
+ background-image: -moz-linear-gradient(left, #555555, #333333);
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
+ background-image: -webkit-linear-gradient(left, #555555, #333333);
+ background-image: -o-linear-gradient(left, #555555, #333333);
+ background-image: linear-gradient(to right, #555555, #333333);
+ background-repeat: repeat-x;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
+}
+
+.gradient-vertical {
+ background-color: #474747;
+ background-image: -moz-linear-gradient(top, #555555, #333333);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
+ background-image: -webkit-linear-gradient(top, #555555, #333333);
+ background-image: -o-linear-gradient(top, #555555, #333333);
+ background-image: linear-gradient(to bottom, #555555, #333333);
+ background-repeat: repeat-x;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
+}
+
+.gradient-directional {
+ background-color: #333333;
+ background-image: -moz-linear-gradient(45deg, #555555, #333333);
+ background-image: -webkit-linear-gradient(45deg, #555555, #333333);
+ background-image: -o-linear-gradient(45deg, #555555, #333333);
+ background-image: linear-gradient(45deg, #555555, #333333);
+ background-repeat: repeat-x;
+}
+
+.gradient-vertical-three {
+ background-color: #8940a5;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
+ background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+ background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
+ background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+ background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
+ background-repeat: no-repeat;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
+}
+
+.gradient-radial {
+ background-color: #333333;
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
+ background-image: -webkit-radial-gradient(circle, #555555, #333333);
+ background-image: -moz-radial-gradient(circle, #555555, #333333);
+ background-image: -o-radial-gradient(circle, #555555, #333333);
+ background-repeat: no-repeat;
+}
+
+.gradient-striped {
+ background-color: #555555;
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
\ No newline at end of file
diff --git a/docs/assets/less/twbs-222/tests/css-tests.html b/docs/assets/less/twbs-222/tests/css-tests.html
new file mode 100755
index 000000000..035ba8bd4
--- /dev/null
+++ b/docs/assets/less/twbs-222/tests/css-tests.html
@@ -0,0 +1,1345 @@
+
+
+
+
+ Dropups
+ + + +
+
+CSS Tests
+One stop shop for quick debugging and edge-case tests of CSS.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/assets/less/twbs-222/tests/forms-responsive.html b/docs/assets/less/twbs-222/tests/forms-responsive.html
new file mode 100755
index 000000000..c3e208d02
--- /dev/null
+++ b/docs/assets/less/twbs-222/tests/forms-responsive.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + +
+
+
+
+
+ +
+ +
+ + +
+ + +
+ + + + + + +
+ + + + +
+ + + + +
+ + + + +
+
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+Typography
+
+
+
+
+
+
+
+
+
+
+
+ h1. Heading 1
+h2. Heading 2
+h3. Heading 3
+h4. Heading 4
+h5. Heading 5
+h6. Heading 6
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+
+ h1. Heading 1
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+h2. Heading 2
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+h3. Heading 3
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+h4. Heading 4
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+h5. Heading 5
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+h6. Heading 6
+Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+
+
+Responsive images
+
+
+
+
+ ![]()
+
+
+ ![]()
+
+
+ ![]()
+
++ +
+
+
+
+ ![]()
+
+
+ ![]()
+
+
+ ![]()
+
++ + + + + + +
+
+
+Fluid grids
+
+
+
+
+
+
+
+
+
+ 12
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+ 11
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+ 10
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 2
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+ 9
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 3
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+ 8
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 4
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+ 7
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 5
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+6
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 6
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+
+Tables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bordered without thead
+| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
Bordered without thead, with caption
+| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
Bordered without thead, with colgroup
+| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 3 | +6 | +9 | +
Bordered with thead, with colgroup
+| A | +B | +C | +
|---|---|---|
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 3 | +6 | +9 | +
+
+
+
+
+
+
+Bordered with thead and caption
+| 1 | +2 | +3 | +
|---|---|---|
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 1 | +2 | +3 | +
| 3 | +6 | +9 | +
Bordered with rowspan and colspan
+| 1 | +2 | +3 | +
|---|---|---|
| 1 and 2 | +3 | +|
| 1 | +2 | +3 | +
| 1 | +3 | +|
| 2 and 3 | +||
Grid sizing
+
+
+
+
+
+
+
+
+| 1 | +2 | +3 | +
|---|---|---|
| 1 and 2 | +3 | +|
| 1 | +2 | +3 | +
| 1 | +3 | +|
| 2 and 3 | +||
Nesting and striping
+| Test | +||||||||
|---|---|---|---|---|---|---|---|---|
+
|
+
Fluid grid sizing
+
+
+
+
+
+
+
+
+
+
+
+
+| 1 | +2 | +3 | +
|---|---|---|
| 1 and 2 | +3 | +|
| 1 | +2 | +3 | +
| 1 | +3 | +|
| 2 and 3 | +||
+
+
+Forms
+Buttons and button groups
+ + +Horizontal form errors
+ + +
+
+
+
+
+ Prepend and append on inputs
+ +
+
+ Prepend and append with uneditable
+ +
+
+Prepend with type="submit"
+ +
+
+
+
+
+
+
+
+
+ Fluid prepended and appended inputs
+
+
+
+
+
+
+Fixed row with inputs
+Inputs should not extend past the light red background, set on their parent, a .span* column.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
Fluid row with inputs
+Inputs should not extend past the light red background, set on their parent, a .span* column.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
Inline form in fluid row
+ +
+
+
+
+
+
+
++ + +
Fluid textarea at .span12
+
+
+
+
+
+
+
++ + +
Selects
+ + + ++ + + + + + +
+
+
+Dropdowns
+Dropdown link with hash URL
+ + +Dropdown link with custom URL and data-target
+ + +Dropdown on a button
+
+
+
+
+
++ + + + +
+
+
+Thumbnails
+Default thumbnails (no grid sizing)
+-
+
-
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
Standard grid sizing
+ + +Fluid thumbnails
+ + + + + + +
+
+
+Tabs
+
+
+
+
+
+
+
+
+ I'm in Section 1.
+ +
+
+
+
+
+
+
+ I'm in Section 1.1.
+
+
+ I'm in Section 1.2.
+
+
+ I'm in Section 1.3.
+
+
+ Howdy, I'm in Section 2.
+
+
+ What up girl, this is Section 3.
++ + + + +
+
+
+Labels
+
+
+
+
+
+ Inline label
+Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. Fusce .class-name dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+
+
+
+
+
++ + + + +
+
+
+Buttons
+| + Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + | +
+
+
+
+
+
+
+ |
+
Mini buttons: text and icon
+
+
+
+
+
++ + + + + +
+
+
+Responsive utility classes
+Visible on...
+-
+
- Phone✔ Phone +
- Tablet✔ Tablet +
- Desktop✔ Desktop +
-
+
- Phone + Tablet✔ Phone + Tablet +
- Tablet + Desktop✔ Tablet + Desktop +
- All✔ All +
Hidden on...
+ + + + + + + +
+
+
+Gradients
+Horizontal
+ + +Vertical
+ + +Directional
+ + +Three colors
+ + +Radial
+ + +Striped
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/assets/less/twbs-222/tests/navbar-static-top.html b/docs/assets/less/twbs-222/tests/navbar-static-top.html
new file mode 100755
index 000000000..4bead8ec6
--- /dev/null
+++ b/docs/assets/less/twbs-222/tests/navbar-static-top.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+ Navbar example
+This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/assets/less/twbs-222/tests/navbar.html b/docs/assets/less/twbs-222/tests/navbar.html
new file mode 100755
index 000000000..d5ad4784e
--- /dev/null
+++ b/docs/assets/less/twbs-222/tests/navbar.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+ Navbar example
+This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/assets/less/twbs-222/thumbnails.less b/docs/assets/less/twbs-222/thumbnails.less
new file mode 100755
index 000000000..a84a7d37d
--- /dev/null
+++ b/docs/assets/less/twbs-222/thumbnails.less
@@ -0,0 +1,52 @@
+//
+// Thumbnails
+// --------------------------------------------------
+
+
+// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
+
+// Make wrapper ul behave like the grid
+.thumbnails {
+ margin-left: -@gridGutterWidth;
+ list-style: none;
+ .clearfix();
+}
+// Fluid rows have no left margin
+.row-fluid .thumbnails {
+ margin-left: 0;
+}
+
+// Float li to make thumbnails appear in a row
+.thumbnails > li {
+ float: left; // Explicity set the float since we don't require .span* classes
+ margin-bottom: @baseLineHeight;
+ margin-left: @gridGutterWidth;
+}
+
+// The actual thumbnail (can be `a` or `div`)
+.thumbnail {
+ display: block;
+ padding: 4px;
+ line-height: @baseLineHeight;
+ border: 1px solid #ddd;
+ .border-radius(@baseBorderRadius);
+ .box-shadow(0 1px 3px rgba(0,0,0,.055));
+ .transition(all .2s ease-in-out);
+}
+// Add a hover state for linked versions only
+a.thumbnail:hover {
+ border-color: @linkColor;
+ .box-shadow(0 1px 4px rgba(0,105,214,.25));
+}
+
+// Images and captions
+.thumbnail > img {
+ display: block;
+ max-width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+.thumbnail .caption {
+ padding: 9px;
+ color: @gray;
+}
diff --git a/docs/assets/less/twbs-222/tooltip.less b/docs/assets/less/twbs-222/tooltip.less
new file mode 100755
index 000000000..93fac8d6b
--- /dev/null
+++ b/docs/assets/less/twbs-222/tooltip.less
@@ -0,0 +1,70 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: @zindexTooltip;
+ display: block;
+ visibility: visible;
+ padding: 5px;
+ font-size: 11px;
+ .opacity(0);
+ &.in { .opacity(80); }
+ &.top { margin-top: -3px; }
+ &.right { margin-left: 3px; }
+ &.bottom { margin-top: 3px; }
+ &.left { margin-left: -3px; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: @tooltipColor;
+ text-align: center;
+ text-decoration: none;
+ background-color: @tooltipBackground;
+ .border-radius(@baseBorderRadius);
+}
+
+// Arrows
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+.tooltip {
+ &.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -@tooltipArrowWidth;
+ border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
+ border-top-color: @tooltipArrowColor;
+ }
+ &.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -@tooltipArrowWidth;
+ border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
+ border-right-color: @tooltipArrowColor;
+ }
+ &.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -@tooltipArrowWidth;
+ border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
+ border-left-color: @tooltipArrowColor;
+ }
+ &.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -@tooltipArrowWidth;
+ border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
+ border-bottom-color: @tooltipArrowColor;
+ }
+}
diff --git a/docs/assets/less/twbs-222/type.less b/docs/assets/less/twbs-222/type.less
new file mode 100755
index 000000000..683a30772
--- /dev/null
+++ b/docs/assets/less/twbs-222/type.less
@@ -0,0 +1,235 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Body text
+// -------------------------
+
+p {
+ margin: 0 0 @baseLineHeight / 2;
+}
+.lead {
+ margin-bottom: @baseLineHeight;
+ font-size: @baseFontSize * 1.5;
+ font-weight: 200;
+ line-height: @baseLineHeight * 1.5;
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: 14px base font * 85% = about 12px
+small { font-size: 85%; }
+
+strong { font-weight: bold; }
+em { font-style: italic; }
+cite { font-style: normal; }
+
+// Utility classes
+.muted { color: @grayLight; }
+a.muted:hover { color: darken(@grayLight, 10%); }
+
+.text-warning { color: @warningText; }
+a.text-warning:hover { color: darken(@warningText, 10%); }
+
+.text-error { color: @errorText; }
+a.text-error:hover { color: darken(@errorText, 10%); }
+
+.text-info { color: @infoText; }
+a.text-info:hover { color: darken(@infoText, 10%); }
+
+.text-success { color: @successText; }
+a.text-success:hover { color: darken(@successText, 10%); }
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6 {
+ margin: (@baseLineHeight / 2) 0;
+ font-family: @headingsFontFamily;
+ font-weight: @headingsFontWeight;
+ line-height: @baseLineHeight;
+ color: @headingsColor;
+ text-rendering: optimizelegibility; // Fix the character spacing for headings
+ small {
+ font-weight: normal;
+ line-height: 1;
+ color: @grayLight;
+ }
+}
+
+h1,
+h2,
+h3 { line-height: @baseLineHeight * 2; }
+
+h1 { font-size: @baseFontSize * 2.75; } // ~38px
+h2 { font-size: @baseFontSize * 2.25; } // ~32px
+h3 { font-size: @baseFontSize * 1.75; } // ~24px
+h4 { font-size: @baseFontSize * 1.25; } // ~18px
+h5 { font-size: @baseFontSize; }
+h6 { font-size: @baseFontSize * 0.85; } // ~12px
+
+h1 small { font-size: @baseFontSize * 1.75; } // ~24px
+h2 small { font-size: @baseFontSize * 1.25; } // ~18px
+h3 small { font-size: @baseFontSize; }
+h4 small { font-size: @baseFontSize; }
+
+
+// Page header
+// -------------------------
+
+.page-header {
+ padding-bottom: (@baseLineHeight / 2) - 1;
+ margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
+ border-bottom: 1px solid @grayLighter;
+}
+
+
+
+// Lists
+// --------------------------------------------------
+
+// Unordered and Ordered lists
+ul, ol {
+ padding: 0;
+ margin: 0 0 @baseLineHeight / 2 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin-bottom: 0;
+}
+li {
+ line-height: @baseLineHeight;
+}
+
+// Remove default list styles
+ul.unstyled,
+ol.unstyled {
+ margin-left: 0;
+ list-style: none;
+}
+
+// Single-line list items
+ul.inline,
+ol.inline {
+ margin-left: 0;
+ list-style: none;
+ & > li {
+ display: inline-block;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+}
+
+// Description Lists
+dl {
+ margin-bottom: @baseLineHeight;
+}
+dt,
+dd {
+ line-height: @baseLineHeight;
+}
+dt {
+ font-weight: bold;
+}
+dd {
+ margin-left: @baseLineHeight / 2;
+}
+// Horizontal layout (like forms)
+.dl-horizontal {
+ .clearfix(); // Ensure dl clears floats if empty dd elements present
+ dt {
+ float: left;
+ width: @horizontalComponentOffset - 20;
+ clear: left;
+ text-align: right;
+ .text-overflow();
+ }
+ dd {
+ margin-left: @horizontalComponentOffset;
+ }
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+ margin: @baseLineHeight 0;
+ border: 0;
+ border-top: 1px solid @hrBorder;
+ border-bottom: 1px solid @white;
+}
+
+// Abbreviations and acronyms
+abbr[title],
+// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
+abbr[data-original-title] {
+ cursor: help;
+ border-bottom: 1px dotted @grayLight;
+}
+abbr.initialism {
+ font-size: 90%;
+ text-transform: uppercase;
+}
+
+// Blockquotes
+blockquote {
+ padding: 0 0 0 15px;
+ margin: 0 0 @baseLineHeight;
+ border-left: 5px solid @grayLighter;
+ p {
+ margin-bottom: 0;
+ #font > .shorthand(16px,300,@baseLineHeight * 1.25);
+ }
+ small {
+ display: block;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ &:before {
+ content: '\2014 \00A0';
+ }
+ }
+
+ // Float right with text-align: right
+ &.pull-right {
+ float: right;
+ padding-right: 15px;
+ padding-left: 0;
+ border-right: 5px solid @grayLighter;
+ border-left: 0;
+ p,
+ small {
+ text-align: right;
+ }
+ small {
+ &:before {
+ content: '';
+ }
+ &:after {
+ content: '\00A0 \2014';
+ }
+ }
+ }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+ content: "";
+}
+
+// Addresses
+address {
+ display: block;
+ margin-bottom: @baseLineHeight;
+ font-style: normal;
+ line-height: @baseLineHeight;
+}
diff --git a/docs/assets/less/twbs-222/utilities.less b/docs/assets/less/twbs-222/utilities.less
new file mode 100755
index 000000000..314b4ffdb
--- /dev/null
+++ b/docs/assets/less/twbs-222/utilities.less
@@ -0,0 +1,30 @@
+//
+// Utility classes
+// --------------------------------------------------
+
+
+// Quick floats
+.pull-right {
+ float: right;
+}
+.pull-left {
+ float: left;
+}
+
+// Toggling content
+.hide {
+ display: none;
+}
+.show {
+ display: block;
+}
+
+// Visibility
+.invisible {
+ visibility: hidden;
+}
+
+// For Affix plugin
+.affix {
+ position: fixed;
+}
diff --git a/docs/assets/less/twbs-222/variables.less b/docs/assets/less/twbs-222/variables.less
new file mode 100755
index 000000000..de36074fd
--- /dev/null
+++ b/docs/assets/less/twbs-222/variables.less
@@ -0,0 +1,301 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+@black: #000;
+@grayDarker: #222;
+@grayDark: #333;
+@gray: #555;
+@grayLight: #999;
+@grayLighter: #eee;
+@white: #fff;
+
+
+// Accent colors
+// -------------------------
+@blue: #049cdb;
+@blueDark: #0064cd;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+
+// Scaffolding
+// -------------------------
+@bodyBackground: @white;
+@textColor: @grayDark;
+
+
+// Links
+// -------------------------
+@linkColor: #08c;
+@linkColorHover: darken(@linkColor, 15%);
+
+
+// Typography
+// -------------------------
+@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@serifFontFamily: Georgia, "Times New Roman", Times, serif;
+@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
+
+@baseFontSize: 14px;
+@baseFontFamily: @sansFontFamily;
+@baseLineHeight: 20px;
+@altFontFamily: @serifFontFamily;
+
+@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
+@headingsFontWeight: bold; // instead of browser default, bold
+@headingsColor: inherit; // empty to use BS default, @textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge: @baseFontSize * 1.25; // ~18px
+@fontSizeSmall: @baseFontSize * 0.85; // ~12px
+@fontSizeMini: @baseFontSize * 0.75; // ~11px
+
+@paddingLarge: 11px 19px; // 44px
+@paddingSmall: 2px 10px; // 26px
+@paddingMini: 0 6px; // 22px
+
+@baseBorderRadius: 4px;
+@borderRadiusLarge: 6px;
+@borderRadiusSmall: 3px;
+
+
+// Tables
+// -------------------------
+@tableBackground: transparent; // overall background-color
+@tableBackgroundAccent: #f9f9f9; // for striping
+@tableBackgroundHover: #f5f5f5; // for hover
+@tableBorder: #ddd; // table and cell border
+
+// Buttons
+// -------------------------
+@btnBackground: @white;
+@btnBackgroundHighlight: darken(@white, 10%);
+@btnBorder: #bbb;
+
+@btnPrimaryBackground: @linkColor;
+@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
+
+@btnInfoBackground: #5bc0de;
+@btnInfoBackgroundHighlight: #2f96b4;
+
+@btnSuccessBackground: #62c462;
+@btnSuccessBackgroundHighlight: #51a351;
+
+@btnWarningBackground: lighten(@orange, 15%);
+@btnWarningBackgroundHighlight: @orange;
+
+@btnDangerBackground: #ee5f5b;
+@btnDangerBackgroundHighlight: #bd362f;
+
+@btnInverseBackground: #444;
+@btnInverseBackgroundHighlight: @grayDarker;
+
+
+// Forms
+// -------------------------
+@inputBackground: @white;
+@inputBorder: #ccc;
+@inputBorderRadius: @baseBorderRadius;
+@inputDisabledBackground: @grayLighter;
+@formActionsBackground: #f5f5f5;
+@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+@dropdownBackground: @white;
+@dropdownBorder: rgba(0,0,0,.2);
+@dropdownDividerTop: #e5e5e5;
+@dropdownDividerBottom: @white;
+
+@dropdownLinkColor: @grayDark;
+@dropdownLinkColorHover: @white;
+@dropdownLinkColorActive: @white;
+
+@dropdownLinkBackgroundActive: @linkColor;
+@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+@zindexDropdown: 1000;
+@zindexPopover: 1010;
+@zindexTooltip: 1030;
+@zindexFixedNavbar: 1030;
+@zindexModalBackdrop: 1040;
+@zindexModal: 1050;
+
+
+// Sprite icons path
+// -------------------------
+@iconSpritePath: "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+@placeholderText: @grayLight;
+
+
+// Hr border color
+// -------------------------
+@hrBorder: @grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+@horizontalComponentOffset: 180px;
+
+
+// Wells
+// -------------------------
+@wellBackground: #f5f5f5;
+
+
+// Navbar
+// -------------------------
+@navbarCollapseWidth: 979px;
+@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
+
+@navbarHeight: 40px;
+@navbarBackgroundHighlight: #ffffff;
+@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
+@navbarBorder: darken(@navbarBackground, 12%);
+
+@navbarText: #777;
+@navbarLinkColor: #777;
+@navbarLinkColorHover: @grayDark;
+@navbarLinkColorActive: @gray;
+@navbarLinkBackgroundHover: transparent;
+@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
+
+@navbarBrandColor: @navbarLinkColor;
+
+// Inverted navbar
+@navbarInverseBackground: #111111;
+@navbarInverseBackgroundHighlight: #222222;
+@navbarInverseBorder: #252525;
+
+@navbarInverseText: @grayLight;
+@navbarInverseLinkColor: @grayLight;
+@navbarInverseLinkColorHover: @white;
+@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
+@navbarInverseLinkBackgroundHover: transparent;
+@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
+
+@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus: @white;
+@navbarInverseSearchBorder: @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor: #ccc;
+
+@navbarInverseBrandColor: @navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+@paginationBackground: #fff;
+@paginationBorder: #ddd;
+@paginationActiveBackground: #f5f5f5;
+
+
+// Hero unit
+// -------------------------
+@heroUnitBackground: @grayLighter;
+@heroUnitHeadingColor: inherit;
+@heroUnitLeadColor: inherit;
+
+
+// Form states and alerts
+// -------------------------
+@warningText: #c09853;
+@warningBackground: #fcf8e3;
+@warningBorder: darken(spin(@warningBackground, -10), 3%);
+
+@errorText: #b94a48;
+@errorBackground: #f2dede;
+@errorBorder: darken(spin(@errorBackground, -10), 3%);
+
+@successText: #468847;
+@successBackground: #dff0d8;
+@successBorder: darken(spin(@successBackground, -10), 5%);
+
+@infoText: #3a87ad;
+@infoBackground: #d9edf7;
+@infoBorder: darken(spin(@infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+@tooltipColor: #fff;
+@tooltipBackground: #000;
+@tooltipArrowWidth: 5px;
+@tooltipArrowColor: @tooltipBackground;
+
+@popoverBackground: #fff;
+@popoverArrowWidth: 10px;
+@popoverArrowColor: #fff;
+@popoverTitleBackground: darken(@popoverBackground, 3%);
+
+// Special enhancement for popovers
+@popoverArrowOuterWidth: @popoverArrowWidth + 1;
+@popoverArrowOuterColor: rgba(0,0,0,.25);
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+@gridColumns: 12;
+@gridColumnWidth: 60px;
+@gridGutterWidth: 20px;
+@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// 1200px min
+@gridColumnWidth1200: 70px;
+@gridGutterWidth1200: 30px;
+@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
+
+// 768px-979px
+@gridColumnWidth768: 42px;
+@gridGutterWidth768: 20px;
+@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
+
+// 1200px min
+@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
+
+// 768px-979px
+@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
diff --git a/docs/assets/less/twbs-222/wells.less b/docs/assets/less/twbs-222/wells.less
new file mode 100755
index 000000000..84a744b1c
--- /dev/null
+++ b/docs/assets/less/twbs-222/wells.less
@@ -0,0 +1,29 @@
+//
+// Wells
+// --------------------------------------------------
+
+
+// Base class
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: @wellBackground;
+ border: 1px solid darken(@wellBackground, 7%);
+ .border-radius(@baseBorderRadius);
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+ blockquote {
+ border-color: #ddd;
+ border-color: rgba(0,0,0,.15);
+ }
+}
+
+// Sizes
+.well-large {
+ padding: 24px;
+ .border-radius(@borderRadiusLarge);
+}
+.well-small {
+ padding: 9px;
+ .border-radius(@borderRadiusSmall);
+}
diff --git a/docs/assets/less/variables.less b/docs/assets/less/variables.less
index 8fa8a3f84..4a7ada810 100755
--- a/docs/assets/less/variables.less
+++ b/docs/assets/less/variables.less
@@ -1,10 +1,9 @@
-// Variables.less
-// Variables to customize the look and feel of Bootstrap
-// -----------------------------------------------------
+//
+// Variables
+// --------------------------------------------------
-
-// GLOBAL VALUES
+// Global values
// --------------------------------------------------
@@ -45,14 +44,13 @@
// Typography
// -------------------------
-//@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@sansFontFamily: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
-@baseLineHeight: 21px;
+@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@@ -60,6 +58,23 @@
@headingsColor: inherit; // empty to use BS default, @textColor
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge: @baseFontSize * 1.25; // ~18px
+@fontSizeSmall: @baseFontSize * 0.85; // ~12px
+@fontSizeMini: @baseFontSize * 0.75; // ~11px
+
+@paddingLarge: 11px 19px; // 44px
+@paddingSmall: 2px 10px; // 26px
+@paddingMini: 0 6px; // 22px
+
+@baseBorderRadius: 4px;
+@borderRadiusLarge: 6px;
+@borderRadiusSmall: 3px;
+
+
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@@ -67,15 +82,14 @@
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
-
// Buttons
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
-@btnBorder: #ccc;
+@btnBorder: #bbb;
-@btnPrimaryBackground: @linkColor;
-@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
+@btnPrimaryBackground: #fffeb8;
+@btnPrimaryBackgroundHighlight: #c49c38;
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@@ -89,7 +103,7 @@
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
-@btnInverseBackground: @gray;
+@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
@@ -97,31 +111,39 @@
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
-@inputBorderRadius: 3px;
+@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
+@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
+@dropdownDividerTop: #e5e5e5;
+@dropdownDividerBottom: @white;
+
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
-@dropdownLinkBackgroundHover: @linkColor;
+@dropdownLinkColorActive: @white;
+@dropdownLinkBackgroundActive: @linkColor;
+@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
// COMPONENT VARIABLES
// --------------------------------------------------
+
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
-@zindexTooltip: 1020;
+@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
@@ -143,25 +165,61 @@
@hrBorder: @grayLighter;
+// Horizontal forms & lists
+// -------------------------
+@horizontalComponentOffset: 180px;
+
+
+// Wells
+// -------------------------
+@wellBackground: #f5f5f5;
+
+
// Navbar
// -------------------------
+@navbarCollapseWidth: 979px;
+@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
+
@navbarHeight: 40px;
-@navbarBackground: @grayDarker;
-@navbarBackgroundHighlight: @grayDark;
+@navbarBackgroundHighlight: #ffffff;
+@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
+@navbarBorder: darken(@navbarBackground, 12%);
-@navbarText: @grayLight;
-@navbarLinkColor: @grayLight;
-@navbarLinkColorHover: @white;
-@navbarLinkColorActive: @navbarLinkColorHover;
+@navbarText: #777;
+@navbarLinkColor: #777;
+@navbarLinkColorHover: @grayDark;
+@navbarLinkColorActive: @gray;
@navbarLinkBackgroundHover: transparent;
-@navbarLinkBackgroundActive: @navbarBackground;
+@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
-@navbarSearchBackground: lighten(@navbarBackground, 25%);
-@navbarSearchBackgroundFocus: @white;
-@navbarSearchBorder: darken(@navbarSearchBackground, 30%);
-@navbarSearchPlaceholderColor: #ccc;
@navbarBrandColor: @navbarLinkColor;
+// Inverted navbar
+@navbarInverseBackground: #111111;
+@navbarInverseBackgroundHighlight: #222222;
+@navbarInverseBorder: #252525;
+
+@navbarInverseText: @grayLight;
+@navbarInverseLinkColor: @grayLight;
+@navbarInverseLinkColorHover: @white;
+@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
+@navbarInverseLinkBackgroundHover: transparent;
+@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
+
+@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus: @white;
+@navbarInverseSearchBorder: @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor: #ccc;
+
+@navbarInverseBrandColor: @navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+@paginationBackground: #fff;
+@paginationBorder: #ddd;
+@paginationActiveBackground: #f5f5f5;
+
// Hero unit
// -------------------------
@@ -189,10 +247,28 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%);
+// Tooltips and popovers
+// -------------------------
+@tooltipColor: #fff;
+@tooltipBackground: #000;
+@tooltipArrowWidth: 5px;
+@tooltipArrowColor: @tooltipBackground;
+
+@popoverBackground: #fff;
+@popoverArrowWidth: 10px;
+@popoverArrowColor: #fff;
+@popoverTitleBackground: darken(@popoverBackground, 3%);
+
+// Special enhancement for popovers
+@popoverArrowOuterWidth: @popoverArrowWidth + 1;
+@popoverArrowOuterColor: rgba(0,0,0,.25);
+
+
// GRID
// --------------------------------------------------
+
// Default 940px grid
// -------------------------
@gridColumns: 12;
@@ -200,7 +276,26 @@
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+// 1200px min
+@gridColumnWidth1200: 70px;
+@gridGutterWidth1200: 30px;
+@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
+
+// 768px-979px
+@gridColumnWidth768: 42px;
+@gridGutterWidth768: 20px;
+@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
+
+
// Fluid grid
// -------------------------
-@fluidGridColumnWidth: 6.382978723%;
-@fluidGridGutterWidth: 2.127659574%;
+@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
+
+// 1200px min
+@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
+
+// 768px-979px
+@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
diff --git a/docs/index.html b/docs/index.html
index e16a92149..4180fa889 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,7 +10,9 @@
+
+
+ Navbar example
+This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
+ +
Desktop Font + Vectors
+Desktop Font + Vectors
The full desktop font and a pdf of vectors are now included. Happy designing.70 New Icons in v2.0
+70 New Icons in v2.0
All requested by our active community on the Font Awesome GitHub project.IE7 Support
+IE7 Support
Font Awesome v2.0 now even supports IE7. If you need it, you have my condolences.One font, 220 icons
+One font, 220 icons
In a single collection, Font Awesome is a pictographic language of web-related actions.Free for commercial use
+Free for commercial use
The Font Awesome webfont and CSS libraries are completely free for commercial use.Screen reader compatible
+Screen reader compatible
Font Awesome won't trip up screen readers, unlike most icon fonts.Made for Twitter Bootstrap
+Made for Twitter Bootstrap
Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.CSS control
+CSS control
Easily style icon color, size, shadow, and anything that's possible with CSS.Infinite scalability
+Infinite scalability
Scalable vector graphics means icons look awesome at any size.What's new in Font Awesome v3.0
+LGPL Compliant
+ No more attribution required, but much appreciated. +25% smaller size
+ More compact file size for faster page loads. +Font Sub-setting
+ Thanks to @someone, sub-setting is now possible, so you get just the icons you need + +