From 4e979f084d0a0942cb820ca54786ad2b99e4acff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Aug 2012 21:12:52 -0700 Subject: [PATCH] fix static navbar container issues, clean up docs presentation by unfixing the top navbar in favor of static one, start adding table of contents for longer sections of docs --- docs/assets/css/bootstrap-responsive.css | 2 ++ docs/assets/css/bootstrap.css | 8 ++++-- docs/assets/css/docs.css | 33 ++++++++++-------------- docs/base-css.html | 20 +++++++++----- docs/components.html | 4 +-- docs/customize.html | 4 +-- docs/extend.html | 4 +-- docs/getting-started.html | 4 +-- docs/index.html | 4 +-- docs/javascript.html | 6 ++--- docs/scaffolding.html | 4 +-- docs/templates/layout.mustache | 4 +-- docs/templates/pages/base-css.mustache | 16 +++++++++--- docs/templates/pages/javascript.mustache | 2 +- less/mixins.less | 1 + less/navbar.less | 9 +++++++ less/scaffolding.less | 2 +- less/utilities.less | 3 ++- 18 files changed, 78 insertions(+), 52 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 394a15b4a5..821c9603fd 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -110,6 +110,7 @@ margin-left: 30px; } .container, + .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 1170px; @@ -455,6 +456,7 @@ margin-left: 20px; } .container, + .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 724px; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 38829e7d5e..3c16ef2f56 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -219,6 +219,7 @@ a:hover { } .container, +.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; @@ -4172,7 +4173,8 @@ input[type="submit"].btn.btn-mini { } .navbar-fixed-top .navbar-inner, -.navbar-fixed-bottom .navbar-inner { +.navbar-fixed-bottom .navbar-inner, +.navbar-static-top .navbar-inner { border: 0; } @@ -4185,6 +4187,7 @@ input[type="submit"].btn.btn-mini { border-radius: 0; } +.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; @@ -4194,7 +4197,8 @@ input[type="submit"].btn.btn-mini { top: 0; } -.navbar-fixed-top .navbar-inner { +.navbar-fixed-top .navbar-inner, +.navbar-static-top .navbar-inner { -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e12f46a991..2801efe5e9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -12,7 +12,6 @@ body { position: relative; - padding-top: 40px; } /* Code in headings */ @@ -26,12 +25,12 @@ h3 code { /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ -body > .navbar-fixed-top { +body > .navbar-static-top { font-size: 13px; } /* Change the docs' brand */ -body > .navbar-fixed-top .brand { +body > .navbar-static-top .brand { padding-right: 0; padding-left: 0; margin-left: 20px; @@ -43,7 +42,7 @@ body > .navbar-fixed-top .brand { -moz-transition: all .2s linear; transition: all .2s linear; } -body > .navbar-fixed-top .brand:hover { +body > .navbar-static-top .brand:hover { text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4); } @@ -54,7 +53,7 @@ body > .navbar-fixed-top .brand:hover { /* padding for in-page bookmarks and fixed navbar */ section { - padding-top: 60px; + padding-top: 30px; } section > .page-header, section > .lead { @@ -759,10 +758,9 @@ form.bs-docs-example { } .bs-docs-sidenav { - width: 218px; + width: 228px; margin-top: 30px; padding: 0; - margin-right: 10px; background-color: #fff; margin-left: 0; -webkit-border-radius: 6px; @@ -790,9 +788,13 @@ form.bs-docs-example { border-radius: 0 0 6px 6px; } .bs-docs-sidenav > .active > a { - border-color: #08c; position: relative; z-index: 2; + padding: 9px 15px; + border: 0; + -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); + -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); + box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); } /* Chevrons */ .bs-docs-sidenav .icon-chevron-right { @@ -807,12 +809,13 @@ form.bs-docs-example { .bs-docs-sidenav a:hover .icon-chevron-right { opacity: .5; } -.bs-docs-sidenav .active .icon-chevron-right { +.bs-docs-sidenav .active .icon-chevron-right, +.bs-docs-sidenav .active a:hover .icon-chevron-right { background-image: url(../img/glyphicons-halflings-white.png); opacity: .75; } .bs-docs-sidenav.affix { - top: 40px; + top: 0; } .bs-docs-sidenav.affix-bottom { position: absolute; @@ -869,18 +872,11 @@ form.bs-docs-example { body { padding-top: 0; } - /* Widen masthead and social buttons to fill body padding */ - .jumbotron { - margin-top: -20px; /* Offset bottom margin on .navbar */ - } /* Adjust sidenav width */ .bs-docs-sidenav { width: 166px; margin-top: 20px; } - .bs-docs-sidenav.affix { - top: 0; - } } /* Tablet @@ -936,9 +932,6 @@ form.bs-docs-example { .footer p { margin-bottom: 9px; } - .bs-docs-sidenav.affix { - top: 0; - } } /* Landscape phones diff --git a/docs/base-css.html b/docs/base-css.html index df5df24027..95267c5b5f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,11 +27,11 @@ - + -
+
-

Headings

+ + +
+ +

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

@@ -117,7 +125,7 @@
h6. Heading 6
-

Body copy

+

Body copy

Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

@@ -133,14 +141,14 @@ 
<p class="lead">...</p>
-

Built with Less

+

Built with Less

The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

-

Emphasis

+

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

<small>

diff --git a/docs/components.html b/docs/components.html index 6312a3041e..40f1457560 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,11 +27,11 @@ - + -
+
+ + +
+ {{! Headings }} -

{{_i}}Headings{{/i}}

+

{{_i}}Headings{{/i}}

{{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

h1. {{_i}}Heading 1{{/i}}

@@ -48,7 +56,7 @@
{{! Body copy }} -

{{_i}}Body copy{{/i}}

+

{{_i}}Body copy{{/i}}

{{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

@@ -66,7 +74,7 @@ 
<p class="lead">...</p>
{{! Using LESS }} -

{{_i}}Built with Less{{/i}}

+

{{_i}}Built with Less{{/i}}

{{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

@@ -74,7 +82,7 @@ {{! Emphasis }} -

{{_i}}Emphasis{{/i}}

+

{{_i}}Emphasis{{/i}}

{{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}

<small>

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index ccec7eb24e..c9e1b612b0 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1,6 +1,6 @@ -
+

{{_i}}JavaScript for Bootstrap{{/i}}

{{_i}}Bring Bootstrap's components to life—now with 13 custom jQuery plugins.{{/i}} diff --git a/less/mixins.less b/less/mixins.less index 68fbb5829b..b6352831fa 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -580,6 +580,7 @@ // Set the container width, and override it for fixed navbars in media queries .container, + .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { .span(@gridColumns); } diff --git a/less/navbar.less b/less/navbar.less index 3a7e074b29..70501e4595 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -165,6 +165,10 @@ left: 0; z-index: @zindexFixedNavbar; margin-bottom: 0; // remove 18px margin for default navbar +} +.navbar-fixed-top, +.navbar-fixed-bottom, +.navbar-static-top { .navbar-inner { border: 0; } @@ -177,6 +181,8 @@ } // Reset container width +// Required here as we reset the width earlier on and the grid mixins don't override early enough +.navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { #grid > .core > .span(@gridColumns); @@ -185,6 +191,9 @@ // Fixed to top .navbar-fixed-top { top: 0; +} +.navbar-fixed-top, +.navbar-static-top { .navbar-inner { .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)"); } diff --git a/less/scaffolding.less b/less/scaffolding.less index fe63c7cacd..342dcf7051 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -48,4 +48,4 @@ a:hover { .img-circle { .border-radius(500px); -} \ No newline at end of file +} diff --git a/less/utilities.less b/less/utilities.less index 5eef70fe7f..314b4ffdb4 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -24,6 +24,7 @@ visibility: hidden; } +// For Affix plugin .affix { position: fixed; -} \ No newline at end of file +}