From e8647c1b118d2c726a8987e9a41aad82da972b57 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -71,7 +71,7 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#buttonGroups">Button groups</a></li> - <li><a href="#comboButtons">Combo buttons</a></li> + <li><a href="#buttonDropdowns">Button dropdowns</a></li> <li><a href="#navs">Nav, tabs, pills</a></li> <li><a href="#navbar">Navbar</a></li> <li><a href="#breadcrumbs">Breadcrumbs</a></li> @@ -157,9 +157,9 @@ <!-- Split button dropdowns ================================================== --> -<section id="comboButtons"> +<section id="buttonDropdowns"> <div class="page-header"> - <h1>Combo buttons <small>Built on button groups to provide contextual dropdown menus</small></h1> + <h1>Buttons dropdowns <small>Built on button groups to provide contextual dropdown menus</small></h1> </div> <div class="row"> <div class="span4"> @@ -699,9 +699,9 @@ </div> </div> </pre> - <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> + <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> <pre class="prettyprint linenums"> -<div class="navbar navbar-fixed"> +<div class="navbar navbar-fixed-top"> ... </div> </pre> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -74,19 +74,19 @@ <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p> <div class="subnav"> <ul class="nav pills"> - <li><a href="#components">1. Select components</a></li> - <li><a href="#variables">2. Modify variables</a></li> - <li><a href="#plugins">3. Select jQuery plugins</a></li> - <li><a href="#download">4. Customize and download</a></li> + <li><a href="#components">1. Choose components</a></li> + <li><a href="#plugins">2. Select jQuery plugins</a></li> + <li><a href="#variables">3. Customize variables</a></li> + <li><a href="#download">4. Download</a></li> </ul> </div> </header> <section class="download" id="components"> <div class="page-header"> - <a class="pull-right toggle-all" href="#">Toggle all</a> + <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 1. Select components + 1. Chose components <small>Get just the CSS you need</small> </h1> </div> @@ -107,8 +107,7 @@ </div><!-- /span --> <div class="span3"> <h3>Components</h3> - <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Combo buttons</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label> <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label> @@ -124,8 +123,7 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label> <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label> <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Tabs</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Collapse</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label> <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label> </div><!-- /span --> <div class="span3"> @@ -134,97 +132,21 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label> <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label> + <!-- <h3>Responsive</h3> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 480px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 768px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 1210px</label> - </div><!-- /span --> - </div><!-- /row --> -</section> - -<section class="download" id="variables"> - <div class="page-header"> - <a class="pull-right toggle-all" href="#">Reset to defaults</a> - <h1> - 2. Modify variables - <small>Customize Bootstrap without using a LESS compiler</small> - </h1> - </div> - <div class="row download-builder"> - <div class="span4"> - <h3>Links</h3> - <label>@linkColor</label> - <input type="text" class="span3" placeholder="#08c"> - <label>@linkColorHover</label> - <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> - <h3>Grid system</h3> - <label>@gridColumns</label> - <input type="text" class="span3" placeholder="12"> - <label>@gridColumnWidth</label> - <input type="text" class="span3" placeholder="40px"> - <label>@gridGutterWidth</label> - <input type="text" class="span3" placeholder="20px"> - <label>@siteWidth</label> - <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> - <label>@fluidSidebarWidth</label> - <input type="text" class="span3" placeholder="220px"> - </div><!-- /span --> - <div class="span4"> - <h3>Typography</h3> - <label>@baseFontSize</label> - <input type="text" class="span3" placeholder="13px"> - <label>@baseFontFamily</label> - <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> - <label>@baseLineHeight</label> - <input type="text" class="span3" placeholder="18px"> - <h3>Forms</h3> - <label>@primaryButtonColor</label> - <input type="text" class="span3" placeholder="@blue"> - <label>@placeholderText</label> - <input type="text" class="span3" placeholder="@grayLight"> - <h3>Navbar</h3> - <label>@navbarHeight</label> - <input type="text" class="span3" placeholder="40px"> - <label>@navbarBackground</label> - <input type="text" class="span3" placeholder="@grayDarker"> - <label>@navbarBackgroundHighlight</label> - <input type="text" class="span3" placeholder="@grayDark"> - </div><!-- /span --> - <div class="span4"> - <h3>Form states & alerts</h3> - <label>@warningText</label> - <input type="text" class="span3" placeholder="#c09853"> - <label>@warningBackground</label> - <input type="text" class="span3" placeholder="#fcf8e3"> - <label>@warningBorder</label> - <input type="text" class="span3" placeholder="#f3edd2"> - <label>@errorText</label> - <input type="text" class="span3" placeholder="#b94a48"> - <label>@errorBackground</label> - <input type="text" class="span3" placeholder="#f2dede"> - <label>@errorBorder</label> - <input type="text" class="span3" placeholder="#e9c7c7"> - <label>@successText</label> - <input type="text" class="span3" placeholder="#468847"> - <label>@successBackground</label> - <input type="text" class="span3" placeholder="#dff0d8"> - <label>@successBorder</label> - <input type="text" class="span3" placeholder="#cfe8c4"> - <label>@infoText</label> - <input type="text" class="span3" placeholder="#3a87ad"> - <label>@infoBackground</label> - <input type="text" class="span3" placeholder="#d9edf7"> - <label>@infoBorder</label> - <input type="text" class="span3" placeholder="#bfe1f2"> + --> </div><!-- /span --> </div><!-- /row --> </section> <section class="download" id="plugins"> <div class="page-header"> - <a class="pull-right toggle-all" href="#">Toggle all</a> + <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 3. Select jQuery plugins + 2. Select jQuery plugins <small>Quickly add only the necessary javascript</small> </h1> </div> @@ -288,6 +210,100 @@ </div><!-- /row --> </section> + +<section class="download" id="variables"> + <div class="page-header"> + <a class="btn small pull-right toggle-all" href="#">Reset to defaults</a> + <h1> + 3. Customize variables + <small>Optionally modify Bootstrap without a compiler</small> + </h1> + </div> + <div class="row download-builder"> + <div class="span3"> + <h3>Links</h3> + <label>@linkColor</label> + <input type="text" class="span3" placeholder="#08c"> + <label>@linkColorHover</label> + <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> + <h3>Colors</h3> + <label>@blue</label> + <input type="text" class="span3" placeholder="#049cdb"> + <label>@green</label> + <input type="text" class="span3" placeholder="#46a546"> + <label>@red</label> + <input type="text" class="span3" placeholder="#9d261d"> + <label>@yellow</label> + <input type="text" class="span3" placeholder="#ffc40d"> + <label>@orange</label> + <input type="text" class="span3" placeholder="#f89406"> + <label>@pink</label> + <input type="text" class="span3" placeholder="#c3325f"> + <label>@purple</label> + <input type="text" class="span3" placeholder="#7a43b6"> + </div><!-- /span --> + <div class="span3"> + <h3>Grid system</h3> + <label>@gridColumns</label> + <input type="text" class="span3" placeholder="12"> + <label>@gridColumnWidth</label> + <input type="text" class="span3" placeholder="40px"> + <label>@gridGutterWidth</label> + <input type="text" class="span3" placeholder="20px"> + <label>@siteWidth</label> + <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> + <label>@fluidSidebarWidth</label> + <input type="text" class="span3" placeholder="220px"> + <h3>Typography</h3> + <label>@baseFontSize</label> + <input type="text" class="span3" placeholder="13px"> + <label>@baseFontFamily</label> + <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> + <label>@baseLineHeight</label> + <input type="text" class="span3" placeholder="18px"> + </div><!-- /span --> + <div class="span3"> + <h3>Forms</h3> + <label>@primaryButtonColor</label> + <input type="text" class="span3" placeholder="@blue"> + <label>@placeholderText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <h3>Navbar</h3> + <label>@navbarHeight</label> + <input type="text" class="span3" placeholder="40px"> + <label>@navbarBackground</label> + <input type="text" class="span3" placeholder="@grayDarker"> + <label>@navbarBackgroundHighlight</label> + <input type="text" class="span3" placeholder="@grayDark"> + <label>@navbarText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColor</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColorHover</label> + <input type="text" class="span3" placeholder="@white"> + </div><!-- /span --> + <div class="span3"> + <h3>Form states & alerts</h3> + <label>@warningText</label> + <input type="text" class="span3" placeholder="#c09853"> + <label>@warningBackground</label> + <input type="text" class="span3" placeholder="#fcf8e3"> + <label>@errorText</label> + <input type="text" class="span3" placeholder="#b94a48"> + <label>@errorBackground</label> + <input type="text" class="span3" placeholder="#f2dede"> + <label>@successText</label> + <input type="text" class="span3" placeholder="#468847"> + <label>@successBackground</label> + <input type="text" class="span3" placeholder="#dff0d8"> + <label>@infoText</label> + <input type="text" class="span3" placeholder="#3a87ad"> + <label>@infoBackground</label> + <input type="text" class="span3" placeholder="#d9edf7"> + </div><!-- /span --> + </div><!-- /row --> +</section> + <section class="download" id="download"> <div class="page-header"> <h1> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -73,7 +73,7 @@ <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">View project on GitHub</a> - <a href="./download.html" class="btn btn-large">Customize and download</a> + <a href="./download.html" class="btn btn-large">Customize and Download</a> </p> <div class="benefits"> <h4>Feature highlights</h4> @@ -90,7 +90,7 @@ </div> <ul class="quick-links"> - <li><a href="https://github.com/twitter/bootstrap/">GitHub repo</a></li> + <li><a href="./upgrading.html">Upgrading from 1.4</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> @@ -220,27 +220,28 @@ <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> <div class="getting-started"> <div class="row"> + <div class="span4"> + <h3>Prostyle with Node</h3> + <p>If you use Node, download the repo, customize Bootstrap, and run make.</p> + <pre class="prettyprint"> +$ git clone git@github.com:twitter/bootstrap.git +$ make</pre> + </div> <div class="span4"> <h3>Hotlink the CSS</h3> - <p>For the quickest and easiest start, just copy this snippet into your webpage.</p> + <p>For the quickest and easiest start, just copy this snippet into your code to get the CSS.</p> <form> <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> </form> </div> <div class="span4"> - <h3>Use it with LESS</h3> - <p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p> + <h3>Use LESS.js</h3> + <p>A fan of using LESS? No problem, just link to the appropriate .less and .js files:</p> <form> <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script></textarea> </form> - </div> - <div class="span4"> - <h3>Fork on GitHub</h3> - <p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p> - <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> - <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> - </div> + </div> </div><!-- /row --> </div><!-- /getting-started --> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -331,6 +331,18 @@ <td><code>@navbarBackgroundHighlight</code></td> <td><code>@grayDark</code></td> </tr> + <tr> + <td><code>@navbarText</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColor</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColorHover</code></td> + <td><code>@white</code></td> + </tr> </tbody> </table> </div> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -136,6 +136,8 @@ </div> </div><!-- /row --> + <br> + <h2>Offsetting columns</h2> <div class="row show-grid"> <div class="span4">4</div> @@ -148,6 +150,12 @@ <div class="row show-grid"> <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> +<pre class="prettyprint linenums"> +<div class="row"> + <div class="span4">...</div> + <div class="span4 offset4">...</div> +</div> +</pre> <br> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> 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 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li> - <li><a href="#comboButtons">{{_i}}Combo buttons{{/i}}</a></li> + <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li> <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li> <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li> <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li> @@ -92,9 +92,9 @@ <!-- Split button dropdowns ================================================== --> -<section id="comboButtons"> +<section id="buttonDropdowns"> <div class="page-header"> - <h1>{{_i}}Combo buttons{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1> + <h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1> </div> <div class="row"> <div class="span4"> @@ -634,9 +634,9 @@ </div> </div> </pre> - <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.{{/i}}</p> + <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.{{/i}}</p> <pre class="prettyprint linenums"> -<div class="navbar navbar-fixed"> +<div class="navbar navbar-fixed-top"> ... </div> </pre> 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 @@ <p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p> <div class="subnav"> <ul class="nav pills"> - <li><a href="#components">{{_i}}1. Select components{{/i}}</a></li> - <li><a href="#variables">{{_i}}2. Modify variables{{/i}}</a></li> - <li><a href="#plugins">{{_i}}3. Select jQuery plugins{{/i}}</a></li> - <li><a href="#download">{{_i}}4. Customize and download{{/i}}</a></li> + <li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li> + <li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li> + <li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li> + <li><a href="#download">{{_i}}4. Download{{/i}}</a></li> </ul> </div> </header> @@ -21,7 +21,7 @@ <div class="page-header"> <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 1. Select components + 1. Chose components <small>Get just the CSS you need</small> </h1> </div> @@ -42,8 +42,7 @@ </div><!-- /span --> <div class="span3"> <h3>Components</h3> - <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Combo buttons</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label> <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label> @@ -59,8 +58,7 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label> <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label> <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Tabs</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Collapse</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label> <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label> </div><!-- /span --> <div class="span3"> @@ -69,88 +67,12 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label> <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label> + <!-- <h3>Responsive</h3> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 480px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 768px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 1210px</label> - </div><!-- /span --> - </div><!-- /row --> -</section> - -<section class="download" id="variables"> - <div class="page-header"> - <a class="btn small pull-right toggle-all" href="#">Reset to defaults</a> - <h1> - 2. Modify variables - <small>Customize Bootstrap without using a LESS compiler</small> - </h1> - </div> - <div class="row download-builder"> - <div class="span4"> - <h3>Links</h3> - <label>@linkColor</label> - <input type="text" class="span3" placeholder="#08c"> - <label>@linkColorHover</label> - <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> - <h3>Grid system</h3> - <label>@gridColumns</label> - <input type="text" class="span3" placeholder="12"> - <label>@gridColumnWidth</label> - <input type="text" class="span3" placeholder="40px"> - <label>@gridGutterWidth</label> - <input type="text" class="span3" placeholder="20px"> - <label>@siteWidth</label> - <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> - <label>@fluidSidebarWidth</label> - <input type="text" class="span3" placeholder="220px"> - </div><!-- /span --> - <div class="span4"> - <h3>Typography</h3> - <label>@baseFontSize</label> - <input type="text" class="span3" placeholder="13px"> - <label>@baseFontFamily</label> - <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> - <label>@baseLineHeight</label> - <input type="text" class="span3" placeholder="18px"> - <h3>Forms</h3> - <label>@primaryButtonColor</label> - <input type="text" class="span3" placeholder="@blue"> - <label>@placeholderText</label> - <input type="text" class="span3" placeholder="@grayLight"> - <h3>Navbar</h3> - <label>@navbarHeight</label> - <input type="text" class="span3" placeholder="40px"> - <label>@navbarBackground</label> - <input type="text" class="span3" placeholder="@grayDarker"> - <label>@navbarBackgroundHighlight</label> - <input type="text" class="span3" placeholder="@grayDark"> - </div><!-- /span --> - <div class="span4"> - <h3>Form states & alerts</h3> - <label>@warningText</label> - <input type="text" class="span3" placeholder="#c09853"> - <label>@warningBackground</label> - <input type="text" class="span3" placeholder="#fcf8e3"> - <label>@warningBorder</label> - <input type="text" class="span3" placeholder="#f3edd2"> - <label>@errorText</label> - <input type="text" class="span3" placeholder="#b94a48"> - <label>@errorBackground</label> - <input type="text" class="span3" placeholder="#f2dede"> - <label>@errorBorder</label> - <input type="text" class="span3" placeholder="#e9c7c7"> - <label>@successText</label> - <input type="text" class="span3" placeholder="#468847"> - <label>@successBackground</label> - <input type="text" class="span3" placeholder="#dff0d8"> - <label>@successBorder</label> - <input type="text" class="span3" placeholder="#cfe8c4"> - <label>@infoText</label> - <input type="text" class="span3" placeholder="#3a87ad"> - <label>@infoBackground</label> - <input type="text" class="span3" placeholder="#d9edf7"> - <label>@infoBorder</label> - <input type="text" class="span3" placeholder="#bfe1f2"> + --> </div><!-- /span --> </div><!-- /row --> </section> @@ -159,7 +81,7 @@ <div class="page-header"> <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 3. Select jQuery plugins + 2. Select jQuery plugins <small>Quickly add only the necessary javascript</small> </h1> </div> @@ -223,6 +145,100 @@ </div><!-- /row --> </section> + +<section class="download" id="variables"> + <div class="page-header"> + <a class="btn small pull-right toggle-all" href="#">Reset to defaults</a> + <h1> + 3. Customize variables + <small>Optionally modify Bootstrap without a compiler</small> + </h1> + </div> + <div class="row download-builder"> + <div class="span3"> + <h3>Links</h3> + <label>@linkColor</label> + <input type="text" class="span3" placeholder="#08c"> + <label>@linkColorHover</label> + <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> + <h3>Colors</h3> + <label>@blue</label> + <input type="text" class="span3" placeholder="#049cdb"> + <label>@green</label> + <input type="text" class="span3" placeholder="#46a546"> + <label>@red</label> + <input type="text" class="span3" placeholder="#9d261d"> + <label>@yellow</label> + <input type="text" class="span3" placeholder="#ffc40d"> + <label>@orange</label> + <input type="text" class="span3" placeholder="#f89406"> + <label>@pink</label> + <input type="text" class="span3" placeholder="#c3325f"> + <label>@purple</label> + <input type="text" class="span3" placeholder="#7a43b6"> + </div><!-- /span --> + <div class="span3"> + <h3>Grid system</h3> + <label>@gridColumns</label> + <input type="text" class="span3" placeholder="12"> + <label>@gridColumnWidth</label> + <input type="text" class="span3" placeholder="40px"> + <label>@gridGutterWidth</label> + <input type="text" class="span3" placeholder="20px"> + <label>@siteWidth</label> + <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> + <label>@fluidSidebarWidth</label> + <input type="text" class="span3" placeholder="220px"> + <h3>Typography</h3> + <label>@baseFontSize</label> + <input type="text" class="span3" placeholder="13px"> + <label>@baseFontFamily</label> + <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> + <label>@baseLineHeight</label> + <input type="text" class="span3" placeholder="18px"> + </div><!-- /span --> + <div class="span3"> + <h3>Forms</h3> + <label>@primaryButtonColor</label> + <input type="text" class="span3" placeholder="@blue"> + <label>@placeholderText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <h3>Navbar</h3> + <label>@navbarHeight</label> + <input type="text" class="span3" placeholder="40px"> + <label>@navbarBackground</label> + <input type="text" class="span3" placeholder="@grayDarker"> + <label>@navbarBackgroundHighlight</label> + <input type="text" class="span3" placeholder="@grayDark"> + <label>@navbarText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColor</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColorHover</label> + <input type="text" class="span3" placeholder="@white"> + </div><!-- /span --> + <div class="span3"> + <h3>Form states & alerts</h3> + <label>@warningText</label> + <input type="text" class="span3" placeholder="#c09853"> + <label>@warningBackground</label> + <input type="text" class="span3" placeholder="#fcf8e3"> + <label>@errorText</label> + <input type="text" class="span3" placeholder="#b94a48"> + <label>@errorBackground</label> + <input type="text" class="span3" placeholder="#f2dede"> + <label>@successText</label> + <input type="text" class="span3" placeholder="#468847"> + <label>@successBackground</label> + <input type="text" class="span3" placeholder="#dff0d8"> + <label>@infoText</label> + <input type="text" class="span3" placeholder="#3a87ad"> + <label>@infoBackground</label> + <input type="text" class="span3" placeholder="#d9edf7"> + </div><!-- /span --> + </div><!-- /row --> +</section> + <section class="download" id="download"> <div class="page-header"> <h1> 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 @@ <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">{{_i}}View project on GitHub{{/i}}</a> - <a href="./download.html" class="btn btn-large">{{_i}}Customize and download{{/i}}</a> + <a href="./download.html" class="btn btn-large">{{_i}}Customize and Download{{/i}}</a> </p> <div class="benefits"> <h4>{{_i}}Feature highlights{{/i}}</h4> @@ -25,7 +25,7 @@ </div> <ul class="quick-links"> - <li><a href="https://github.com/twitter/bootstrap/">GitHub repo</a></li> + <li><a href="./upgrading.html">Upgrading from 1.4</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">{{_i}}Roadmap{{/i}}</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">{{_i}}Changelog{{/i}}</a></li> @@ -155,27 +155,28 @@ <p class="marketing-byline">{{_i}}Quickly start using Bootstrap within your workflow and development process.{{/i}}</p> <div class="getting-started"> <div class="row"> + <div class="span4"> + <h3>{{_i}}Prostyle with Node{{/i}}</h3> + <p>{{_i}}If you use Node, download the repo, customize Bootstrap, and run make.{{/i}}</p> + <pre class="prettyprint"> +$ git clone git@github.com:twitter/bootstrap.git +$ make</pre> + </div> <div class="span4"> <h3>{{_i}}Hotlink the CSS{{/i}}</h3> - <p>{{_i}}For the quickest and easiest start, just copy this snippet into your webpage.{{/i}}</p> + <p>{{_i}}For the quickest and easiest start, just copy this snippet into your code to get the CSS.{{/i}}</p> <form> <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> </form> </div> <div class="span4"> - <h3>{{_i}}Use it with LESS{{/i}}</h3> - <p>{{_i}}A fan of using LESS? No problem, just download the repo and add these lines to your page:{{/i}}</p> + <h3>{{_i}}Use LESS.js{{/i}}</h3> + <p>{{_i}}A fan of using LESS? No problem, just link to the appropriate .less and .js files:{{/i}}</p> <form> <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script></textarea> </form> - </div> - <div class="span4"> - <h3>{{_i}}Fork on GitHub{{/i}}</h3> - <p>{{_i}}Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.{{/i}}</p> - <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">{{_i}}Bootstrap on GitHub »{{/i}}</a></p> - <p class="current-version">{{_i}}Currently{{/i}} <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> - </div> + </div> </div><!-- /row --> </div><!-- /getting-started --> 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 @@ <td><code>@navbarBackgroundHighlight</code></td> <td><code>@grayDark</code></td> </tr> + <tr> + <td><code>@navbarText</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColor</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColorHover</code></td> + <td><code>@white</code></td> + </tr> </tbody> </table> </div> 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 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> 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%); -- GitLab