From e8647c1b118d2c726a8987e9a41aad82da972b57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 13:20:02 -0800 Subject: [PATCH] huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff --- docs/assets/css/bootstrap-responsive.css | 2 + docs/assets/css/bootstrap.css | 23 +-- docs/assets/css/docs.css | 32 ++-- docs/base-css.html | 2 +- docs/components.html | 12 +- docs/download.html | 198 ++++++++++++----------- docs/examples.html | 2 +- docs/index.html | 27 ++-- docs/javascript.html | 2 +- docs/less.html | 14 +- docs/scaffolding.html | 10 +- docs/templates/layout.mustache | 2 +- docs/templates/pages/components.mustache | 10 +- docs/templates/pages/download.mustache | 192 ++++++++++++---------- docs/templates/pages/index.mustache | 25 +-- docs/templates/pages/less.mustache | 12 ++ docs/upgrading.html | 2 +- less/accordion.less | 4 +- less/navbar.less | 27 ++-- less/responsive.less | 2 + less/scaffolding.less | 8 +- less/variables.less | 12 +- 22 files changed, 351 insertions(+), 269 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 02b5c099ef..6886105cb9 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -111,6 +111,8 @@ @media (min-width: 768px) and (max-width: 940px) { .container { width: 748px; + padding-left: 10px; + padding-right: 10px; } .span1 { width: 44px; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4fe86c977a..b772e8bbb5 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Fri Jan 27 12:16:22 EST 2012 + * Date: Fri Jan 27 13:19:35 PST 2012 */ article, aside, @@ -1791,11 +1791,12 @@ table .span12 { line-height: 1; color: #ffffff; } -.navbar p { - margin: 0; +.navbar .navbar-text { + margin-bottom: 0; line-height: 40px; + color: #999999; } -.navbar p a:hover { +.navbar .navbar-text a:hover { color: #ffffff; background-color: transparent; } @@ -1841,7 +1842,7 @@ table .span12 { .navbar-search .search-query :-moz-placeholder { color: #eeeeee; } -.navbar-search .search-query::-webkit-input-placeholder { +.navbar-search .search-query ::-webkit-input-placeholder { color: #eeeeee; } .navbar-search .search-query:hover { @@ -1870,7 +1871,7 @@ table .span12 { -moz-border-radius: 4px; border-radius: 4px; } -.navbar-fixed { +.navbar-fixed-top { position: fixed; top: 0; right: 0; @@ -1916,7 +1917,7 @@ table .span12 { margin: 0 5px; overflow: hidden; background-color: #222222; - border-right: 1px solid #444; + border-right: 1px solid #333333; } .navbar .nav.pull-right { margin-left: 10px; @@ -2649,7 +2650,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-bottom: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; - border: 1px solid #f3edd2; + border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -2664,14 +2665,14 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .alert-success { background-color: #dff0d8; - border-color: #cfe8c4; + border-color: #d6e9c6; } .alert-success, .alert-success .alert-heading { color: #468847; } .alert-danger, .alert-error { background-color: #f2dede; - border-color: #e9c7c7; + border-color: #eed3d7; } .alert-danger, .alert-error, @@ -2681,7 +2682,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .alert-info { background-color: #d9edf7; - border-color: #bfe1f2; + border-color: #bce8f1; } .alert-info, .alert-info .alert-heading { color: #3a87ad; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6fa20cf4da..19356df1a6 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -20,7 +20,7 @@ body { /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ -.navbar-fixed .brand { +.navbar-fixed-top .brand { padding-right: 0; padding-left: 0; margin-left: 20px; @@ -32,7 +32,7 @@ body { -moz-transition: all .2s linear; transition: all .2s linear; } -.navbar-fixed .brand:hover { +.navbar-fixed-top .brand:hover { text-decoration: none; } @@ -302,14 +302,9 @@ hr.soften { /* Quickstart section for getting le code -------------------------------------------------- */ -.getting-started h3, -.getting-started p { - line-height: 18px; - text-align: center; - margin-bottom: 9px; -} .getting-started p { color: #777; + margin-bottom: 9px; } .getting-started .current-version, .getting-started .current-version a { @@ -322,14 +317,12 @@ hr.soften { display: block; width: 95%; height: auto; - margin-left: auto; - margin-right: auto; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; - background-color: #f5f5f5; + color: #999; /* Makes inputs behave like true block-level elements */ -webkit-box-sizing: border-box; /* Older Webkit */ -moz-box-sizing: border-box; /* Older FF */ @@ -339,6 +332,9 @@ hr.soften { *width: 80%; *height: 24px; } +.getting-started textarea:focus { + color: #333; +} /* Footer @@ -476,7 +472,7 @@ hr.soften { margin-top: 36px; } .page-header .toggle-all { - margin-top: 13px; + margin-top: 5px; } /* Space out h3s when following a section */ @@ -518,6 +514,11 @@ hr.soften { color: #777; } +/* Variables section */ +#variables label { + margin-bottom: 0; +} + /* Giant download button */ .download-btn { margin: 36px 0 108px.i; @@ -525,13 +526,16 @@ hr.soften { .download p, .download h4 { max-width: 50%; - margin: 0 auto 18px; + margin: 0 auto; color: #999; text-align: center; } -.download-btn h4 { +.download h4 { margin-bottom: 0; } +.download p { + margin-bottom: 18px; +} .btn.xlarge { display: block; width: auto; diff --git a/docs/base-css.html b/docs/base-css.html index 9cad9de017..2cab601dfb 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -30,7 +30,7 @@ -
+
Bootstrap diff --git a/docs/components.html b/docs/components.html index eba49449f9..7efa889b81 100644 --- a/docs/components.html +++ b/docs/components.html @@ -30,7 +30,7 @@ -
+
Bootstrap @@ -71,7 +71,7 @@
  • Button groups
    • -
  • Combo buttons
    • +
  • Button dropdowns
  • Nav, tabs, pills
  • Navbar
  • Breadcrumbs
    • @@ -157,9 +157,9 @@ -
    +
    -

    Combo buttons Built on button groups to provide contextual dropdown menus

    +

    Buttons dropdowns Built on button groups to provide contextual dropdown menus

    @@ -699,9 +699,9 @@ </div> </div> -

    To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

    +

    To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

    -<div class="navbar navbar-fixed">
+<div class="navbar navbar-fixed-top">
   ...
 </div>
    diff --git a/docs/download.html b/docs/download.html index 3af30dca7f..458b5caa05 100644 --- a/docs/download.html +++ b/docs/download.html @@ -30,7 +30,7 @@ -
    +
    Bootstrap @@ -74,19 +74,19 @@

    Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.

    - Toggle all + Toggle all

    - 1. Select components + 1. Chose components Get just the CSS you need

    @@ -107,8 +107,7 @@

    Components

    - - + @@ -124,8 +123,7 @@ - - +
    @@ -134,97 +132,21 @@ + -
    -
    - -
    -
    - Reset to defaults -

    - 2. Modify variables - Customize Bootstrap without using a LESS compiler -

    -
    -
    -
    -

    Links

    - - - - -

    Grid system

    - - - - - - - - - - -
    -
    -

    Typography

    - - - - - - -

    Forms

    - - - - -

    Navbar

    - - - - - - -
    -
    -

    Form states & alerts

    - - - - - - - - - - - - - - - - - - - - - - - - + -->
    - Toggle all + Toggle all

    - 3. Select jQuery plugins + 2. Select jQuery plugins Quickly add only the necessary javascript

    @@ -288,6 +210,100 @@
+ +
+
+ Reset to defaults +

+ 3. Customize variables + Optionally modify Bootstrap without a compiler +

+
+
+
+

Links

+ + + + +

Colors

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

Grid system

+ + + + + + + + + + +

Typography

+ + + + + + +
+
+

Forms

+ + + + +

Navbar

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

Form states & alerts

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

diff --git a/docs/examples.html b/docs/examples.html index dfa62fe98c..3416ea6f20 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -30,7 +30,7 @@ -
+
Bootstrap diff --git a/docs/index.html b/docs/index.html index 317ec994ba..4dd21b3fa9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -30,7 +30,7 @@ -
+
Bootstrap @@ -73,7 +73,7 @@

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

View project on GitHub - Customize and download + Customize and Download

Feature highlights

@@ -90,7 +90,7 @@
    -
  • GitHub repo
    • +
  • Upgrading from 1.4
  • Issues
  • Roadmap
  • Changelog
    • @@ -220,27 +220,28 @@

    Quickly start using Bootstrap within your workflow and development process.

    +
    +

    Prostyle with Node

    +

    If you use Node, download the repo, customize Bootstrap, and run make.

    + 
    +$ git clone git@github.com:twitter/bootstrap.git
+$ make
    +

    Hotlink the CSS

    -

    For the quickest and easiest start, just copy this snippet into your webpage.

    +

    For the quickest and easiest start, just copy this snippet into your code to get the CSS.

    -

    Use it with LESS

    -

    A fan of using LESS? No problem, just download the repo and add these lines to your page:

    +

    Use LESS.js

    +

    A fan of using LESS? No problem, just link to the appropriate .less and .js files:

    -
    -
    -

    Fork on GitHub

    -

    Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

    -

    Bootstrap on GitHub »

    -

    Currently v2.0.0

    -
    +
diff --git a/docs/javascript.html b/docs/javascript.html index dd65c1b8d0..3a869e930e 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -30,7 +30,7 @@ -
+
Bootstrap diff --git a/docs/less.html b/docs/less.html index fb1b0d18c8..33ebc82762 100644 --- a/docs/less.html +++ b/docs/less.html @@ -30,7 +30,7 @@ -
+
Bootstrap @@ -331,6 +331,18 @@ @navbarBackgroundHighlight @grayDark + + @navbarText + @grayLight + + + @navbarLinkColor + @grayLight + + + @navbarLinkColorHover + @white +
diff --git a/docs/scaffolding.html b/docs/scaffolding.html index f49b8d6c4b..eed2d71120 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -30,7 +30,7 @@ -
+
Bootstrap @@ -136,6 +136,8 @@
+
+

Offsetting columns

4
@@ -148,6 +150,12 @@
8 offset 4
+
+<div class="row">
+  <div class="span4">...</div>
+  <div class="span4 offset4">...</div>
+</div>
+

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index dbb718056b..4a016e4d11 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -30,7 +30,7 @@ -
+
Bootstrap diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index aaee36410e..f73052e63a 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -6,7 +6,7 @@
  • {{_i}}Button groups{{/i}}
    • -
  • {{_i}}Combo buttons{{/i}}
    • +
  • {{_i}}Button dropdowns{{/i}}
  • {{_i}}Nav, tabs, pills{{/i}}
  • {{_i}}Navbar{{/i}}
  • {{_i}}Breadcrumbs{{/i}}
    • @@ -92,9 +92,9 @@ -
    +
    -

    {{_i}}Combo buttons{{/i}} {{_i}}Built on button groups to provide contextual dropdown menus{{/i}}

    +

    {{_i}}Buttons dropdowns{{/i}} {{_i}}Built on button groups to provide contextual dropdown menus{{/i}}

    @@ -634,9 +634,9 @@ </div> </div> -

    {{_i}}To make the navbar fixed, swap the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}

    +

    {{_i}}To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}

    -<div class="navbar navbar-fixed">
+<div class="navbar navbar-fixed-top">
   ...
 </div>
    diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index 5b9f765ab9..2a8e46a8a5 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -9,10 +9,10 @@

    {{_i}}Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}

    @@ -21,7 +21,7 @@
    Toggle all

    - 1. Select components + 1. Chose components Get just the CSS you need

    @@ -42,8 +42,7 @@

    Components

    - - + @@ -59,8 +58,7 @@ - - +
    @@ -69,88 +67,12 @@ + -
    -
    - -
    -
    - Reset to defaults -

    - 2. Modify variables - Customize Bootstrap without using a LESS compiler -

    -
    -
    -
    -

    Links

    - - - - -

    Grid system

    - - - - - - - - - - -
    -
    -

    Typography

    - - - - - - -

    Forms

    - - - - -

    Navbar

    - - - - - - -
    -
    -

    Form states & alerts

    - - - - - - - - - - - - - - - - - - - - - - - - + -->
    @@ -159,7 +81,7 @@
    Toggle all

    - 3. Select jQuery plugins + 2. Select jQuery plugins Quickly add only the necessary javascript

    @@ -223,6 +145,100 @@

+ +
+
+ Reset to defaults +

+ 3. Customize variables + Optionally modify Bootstrap without a compiler +

+
+
+
+

Links

+ + + + +

Colors

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

Grid system

+ + + + + + + + + + +

Typography

+ + + + + + +
+
+

Forms

+ + + + +

Navbar

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

Form states & alerts

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

diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 9a5421bd3a..96477f0cac 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -8,7 +8,7 @@

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

{{_i}}View project on GitHub{{/i}} - {{_i}}Customize and download{{/i}} + {{_i}}Customize and Download{{/i}}

{{_i}}Feature highlights{{/i}}

@@ -25,7 +25,7 @@
    -
  • GitHub repo
    • +
  • Upgrading from 1.4
  • {{_i}}Issues{{/i}}
  • {{_i}}Roadmap{{/i}}
  • {{_i}}Changelog{{/i}}
    • @@ -155,27 +155,28 @@

    {{_i}}Quickly start using Bootstrap within your workflow and development process.{{/i}}

    +
    +

    {{_i}}Prostyle with Node{{/i}}

    +

    {{_i}}If you use Node, download the repo, customize Bootstrap, and run make.{{/i}}

    + 
    +$ git clone git@github.com:twitter/bootstrap.git
+$ make
    +

    {{_i}}Hotlink the CSS{{/i}}

    -

    {{_i}}For the quickest and easiest start, just copy this snippet into your webpage.{{/i}}

    +

    {{_i}}For the quickest and easiest start, just copy this snippet into your code to get the CSS.{{/i}}

    -

    {{_i}}Use it with LESS{{/i}}

    -

    {{_i}}A fan of using LESS? No problem, just download the repo and add these lines to your page:{{/i}}

    +

    {{_i}}Use LESS.js{{/i}}

    +

    {{_i}}A fan of using LESS? No problem, just link to the appropriate .less and .js files:{{/i}}

    -
    -
    -

    {{_i}}Fork on GitHub{{/i}}

    -

    {{_i}}Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.{{/i}}

    -

    {{_i}}Bootstrap on GitHub »{{/i}}

    -

    {{_i}}Currently{{/i}} v2.0.0

    -
    +

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 1aec06c2c2..649f8f456e 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -266,6 +266,18 @@ @navbarBackgroundHighlight @grayDark + + @navbarText + @grayLight + + + @navbarLinkColor + @grayLight + + + @navbarLinkColorHover + @white +
diff --git a/docs/upgrading.html b/docs/upgrading.html index 142e750cc9..779bf7165f 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -30,7 +30,7 @@ -
+
Bootstrap diff --git a/less/accordion.less b/less/accordion.less index 1ebd5b1a1a..d5c00238c6 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -1,5 +1,5 @@ -// ACCORDION -// --------- +// COLLAPSE +// -------- // Parent container diff --git a/less/navbar.less b/less/navbar.less index dba95e5cd9..7a4b631d15 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -16,7 +16,7 @@ .box-shadow(@shadow); } -// Text and links +// Brand, links, text, and buttons .navbar { // Hover and active states .brand:hover { @@ -35,9 +35,10 @@ color: @white; } // Plain text in topbar - p { - margin: 0; + .navbar-text { + margin-bottom: 0; line-height: 40px; + color: @navbarText; a:hover { color: @white; background-color: transparent; @@ -105,6 +106,9 @@ } +// STATIC OR FIXED? +// ---------------- + // Static navbar .navbar-static { margin-bottom: @baseLineHeight; @@ -116,7 +120,7 @@ } // Fixed navbar -.navbar-fixed { +.navbar-fixed-top { position: fixed; top: 0; right: 0; @@ -125,7 +129,6 @@ } - // NAVIGATION // ---------- @@ -149,33 +152,33 @@ float: none; padding: 10px 10px 11px; line-height: 19px; - color: @grayLight; + color: @navbarLinkColor; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } // Hover .navbar .nav > li > a:hover { background-color: transparent; - color: @white; + color: @navbarLinkColorHover; text-decoration: none; } // Active nav items .navbar .nav .active > a { - color: @white; + color: @navbarLinkColorHover; text-decoration: none; - background-color: @grayDarker; + background-color: @navbarBackground; background-color: rgba(0,0,0,.5); } // Dividers (basically a vertical hr) .navbar .vertical-divider { - height: 40px; + height: @navbarHeight; width: 1px; margin: 0 5px; overflow: hidden; - background-color: @grayDarker; - border-right: 1px solid #444; + background-color: @navbarBackground; + border-right: 1px solid @navbarBackgroundHighlight; } // Secondary (floated right) nav in topbar diff --git a/less/responsive.less b/less/responsive.less index 2999eef4d8..917fdc3e2f 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -175,6 +175,8 @@ // 16cols at 30px wide with 16px gutters .container { width: @siteWidth; + padding-left: 10px; + padding-right: 10px; } // Default columns diff --git a/less/scaffolding.less b/less/scaffolding.less index 3c1826830e..d8b3f56abc 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -22,8 +22,8 @@ body { a { color: @linkColor; text-decoration: none; - &:hover { - color: @linkColorHover; - text-decoration: underline; - } +} +a:hover { + color: @linkColorHover; + text-decoration: underline; } diff --git a/less/variables.less b/less/variables.less index 5ed896cc0c..4265d7ed31 100644 --- a/less/variables.less +++ b/less/variables.less @@ -70,21 +70,25 @@ @navbarBackground: @grayDarker; @navbarBackgroundHighlight: @grayDark; +@navbarText: @grayLight; +@navbarLinkColor: @grayLight; +@navbarLinkColorHover: @white; + // Form states and alerts @warningText: #c09853; @warningBackground: #fcf8e3; -@warningBorder: #f3edd2; +@warningBorder: darken(spin(@warningBackground, -10), 3%); @errorText: #b94a48; @errorBackground: #f2dede; -@errorBorder: #e9c7c7; +@errorBorder: darken(spin(@errorBackground, -10), 3%); @successText: #468847; @successBackground: #dff0d8; -@successBorder: #cfe8c4; +@successBorder: darken(spin(@successBackground, -10), 5%); @infoText: #3a87ad; @infoBackground: #d9edf7; -@infoBorder: #bfe1f2; +@infoBorder: darken(spin(@infoBackground, -10), 7%);