From 22918f8f92d29a12a42db4e357f3d439e41bad0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 17:16:17 -0700 Subject: [PATCH] more tweaks to layouts and some docs styles --- docs/assets/css/docs.css | 19 +-- docs/base-css.html | 162 ++++++++++++++-------- docs/components.html | 4 +- docs/download.html | 4 +- docs/examples.html | 4 +- docs/index.html | 4 +- docs/javascript.html | 4 +- docs/less.html | 4 +- docs/scaffolding.html | 67 ++++++--- docs/templates/layout.mustache | 4 +- docs/templates/pages/base-css.mustache | 158 +++++++++++++-------- docs/templates/pages/scaffolding.mustache | 64 ++++++--- docs/upgrading.html | 4 +- 13 files changed, 321 insertions(+), 181 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b694f107ab..1df8827991 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -23,6 +23,10 @@ li { line-height: 20px; } +.bs-docs-container { + max-width: 780px; + margin: 0 auto; +} /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ @@ -64,16 +68,14 @@ hr.soften { } /* Table of contents */ -.bs-docs-content { +.bs-docs-contents { color: #999; } -.bs-docs-contents ol { - margin-top: 5px; - margin-bottom: 0; +.bs-docs-contents h3 { + } .bs-docs-contents li { line-height: 25px; - color: #999; } @@ -130,6 +132,7 @@ hr.soften { .subhead { padding-bottom: 0; margin-bottom: 9px; + border-bottom: 1px solid #ddd; } .subhead h1 { font-size: 54px; @@ -297,10 +300,10 @@ hr.soften { .footer { padding: 35px 0 36px; margin-top: 45px; + text-align: center; border-top: 1px solid #e5e5e5; } .footer p { - margin-bottom: 5px; color: #555; } @@ -696,7 +699,7 @@ form.well { ------------------------- */ .bs-docs-grid { width: 940px; - margin-left: -240px; + margin-left: -80px; } @@ -915,7 +918,7 @@ form.well { .bs-docs-grid { width: 1170px; - margin-left: -300px; + margin-left: -195px; } } diff --git a/docs/base-css.html b/docs/base-css.html index 75bfced937..95b4f1f97a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -74,14 +74,14 @@ -
+

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

-
+
+
+
+

Contents

+
    +
  1. Typography
    2. +
  2. Code
    3. +
  3. Tables
    4. +
  4. Forms
    5. +
  5. Buttons
    6. +
  6. Icons by Glyphicons
    7. +
+
+
+
@@ -288,7 +302,7 @@

Lists

Unordered

-

A list of items in which the order does not explicitly matter.

+

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
    • @@ -314,64 +328,94 @@ </ul> -

    Unstyled

    -

    <ul class="unstyled">

    -
      -
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit -
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
        • -
      • Vestibulum laoreet porttitor sem
        • -
      • Ac tristique libero volutpat at
        • -
      -
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • -
    -

    Ordered

    -

    <ol>

    -
      -
    1. Lorem ipsum dolor sit amet
      2. -
    2. Consectetur adipiscing elit
      3. -
    3. Integer molestie lorem at massa
      4. -
    4. Facilisis in pretium nisl aliquet
      5. -
    5. Nulla volutpat aliquam velit
      6. -
    6. Faucibus porta lacus fringilla vel
      7. -
    7. Aenean sit amet erat nunc
      8. -
    8. Eget porttitor lorem
      9. -
    +

    A list of items in which the order does explicitly matter.

    +
    +
      +
    1. Lorem ipsum dolor sit amet
      2. +
    2. Consectetur adipiscing elit
      3. +
    3. Integer molestie lorem at massa
      4. +
    4. Facilisis in pretium nisl aliquet
      5. +
    5. Nulla volutpat aliquam velit
      6. +
    6. Faucibus porta lacus fringilla vel
      7. +
    7. Aenean sit amet erat nunc
      8. +
    8. Eget porttitor lorem
      9. +
    +
    +
    +<ol>
+  <li>...</li>
+</ol>
+
    + +

    Unstyled

    +

    A list of items with no list-style or additional left padding.

    +
    +
      +
    • Lorem ipsum dolor sit amet
      • +
    • Consectetur adipiscing elit
      • +
    • Integer molestie lorem at massa
      • +
    • Facilisis in pretium nisl aliquet
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
        • +
      • Vestibulum laoreet porttitor sem
        • +
      • Ac tristique libero volutpat at
        • +
      +
      • +
    • Faucibus porta lacus fringilla vel
      • +
    • Aenean sit amet erat nunc
      • +
    • Eget porttitor lorem
      • +
    +
    +
    +<ul class="unstyled">
+  <li>...</li>
+</ul>
+

    Description

    -

    <dl>

    -
    -
    Description lists
    -
    A description list is perfect for defining terms.
    -
    Euismod
    -
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    -
    Donec id elit non mi porta gravida at eget metus.
    -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    -
    +

    A list of terms with their associated descriptions.

    +
    +
    +
    Description lists
    +
    A description list is perfect for defining terms.
    +
    Euismod
    +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    +
    Donec id elit non mi porta gravida at eget metus.
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    +
    +
    +<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+
    -

    Horizontal description

    -

    <dl class="dl-horizontal">

    -
    -
    Description lists
    -
    A description list is perfect for defining terms.
    -
    Euismod
    -
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    -
    Donec id elit non mi porta gravida at eget metus.
    -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    -
    Felis euismod semper eget lacinia
    -
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    -
    +

    Horizontal description

    +

    Make terms and descriptions in <dl> line up side-by-side.

    +
    +
    +
    Description lists
    +
    A description list is perfect for defining terms.
    +
    Euismod
    +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    +
    Donec id elit non mi porta gravida at eget metus.
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    Felis euismod semper eget lacinia
    +
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    +
    +
    +
    +<dl class="dl-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+

    Heads up! @@ -1592,10 +1636,10 @@ For example, <code>section</code> should be wrapped as inline.

diff --git a/docs/components.html b/docs/components.html index 1e324bbfdf..72b86200f8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -74,7 +74,7 @@
-
+
@@ -1847,10 +1847,10 @@ class="clearfix"
diff --git a/docs/download.html b/docs/download.html index a387c79217..9979ef26bf 100644 --- a/docs/download.html +++ b/docs/download.html @@ -74,7 +74,7 @@
-
+
@@ -421,10 +421,10 @@
diff --git a/docs/examples.html b/docs/examples.html index 5e8d74a3b5..c70c4b00dc 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -74,7 +74,7 @@
-
+
@@ -112,10 +112,10 @@
diff --git a/docs/index.html b/docs/index.html index 1d55aa23ad..dbc5b99d0b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,7 +74,7 @@
-
+
@@ -187,10 +187,10 @@
diff --git a/docs/javascript.html b/docs/javascript.html index f5276ccdd0..7e604a37b9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -74,7 +74,7 @@
-
+
@@ -1508,10 +1508,10 @@ $('.carousel').carousel({
diff --git a/docs/less.html b/docs/less.html index ad860bd4bd..4a56f65a00 100644 --- a/docs/less.html +++ b/docs/less.html @@ -74,7 +74,7 @@
-
+
@@ -1025,10 +1025,10 @@
diff --git a/docs/scaffolding.html b/docs/scaffolding.html index ffc55c3b99..5a91d67a67 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -74,23 +74,7 @@
-
- -
-
-
-

Contents

-
    -
  1. Global styles
    2. -
  2. Grid system
    3. -
  3. Fluid grid system
    4. -
  4. Customizing
    5. -
  5. Layouts
    6. -
  6. Responsive design
    7. -
-
-
-
+
@@ -98,7 +82,6 @@

Scaffolding

Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.

- +
+

Contents

+
    +
  1. + Global styles + +
    2. +
  2. + Grid system + +
    3. +
  3. + Fluid grid system + +
    4. +
  4. + Grid Customization +
    5. +
  5. + Layouts + +
    6. +
  6. + Responsive design + +
    7. +
+
+
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index ae2ce4aad0..3e8448d194 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -86,7 +86,7 @@
-
+
{{>body}} @@ -94,10 +94,10 @@
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 9ef80c1254..ce710d7e33 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -3,7 +3,7 @@

{{_i}}Base CSS{{/i}}

{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}

-
+
+
+
+

{{_i}}Contents{{/i}}

+
    +
  1. {{_i}}Typography{{/i}}
    2. +
  2. {{_i}}Code{{/i}}
    3. +
  3. {{_i}}Tables{{/i}}
    4. +
  4. {{_i}}Forms{{/i}}
    5. +
  5. {{_i}}Buttons{{/i}}
    6. +
  6. {{_i}}Icons by Glyphicons{{/i}}
    7. +
+
+
+
@@ -219,7 +233,7 @@

{{_i}}Lists{{/i}}

{{_i}}Unordered{{/i}}

-

{{_i}}A list of items in which the order does not explicitly matter.{{/i}}

+

{{_i}}A list of items in which the order does not explicitly matter.{{/i}}

  • Lorem ipsum dolor sit amet
    • @@ -245,64 +259,94 @@ </ul> -

    {{_i}}Unstyled{{/i}}

    -

    <ul class="unstyled">

    -
      -
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit -
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
        • -
      • Vestibulum laoreet porttitor sem
        • -
      • Ac tristique libero volutpat at
        • -
      -
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • -
    -

    {{_i}}Ordered{{/i}}

    -

    <ol>

    -
      -
    1. Lorem ipsum dolor sit amet
      2. -
    2. Consectetur adipiscing elit
      3. -
    3. Integer molestie lorem at massa
      4. -
    4. Facilisis in pretium nisl aliquet
      5. -
    5. Nulla volutpat aliquam velit
      6. -
    6. Faucibus porta lacus fringilla vel
      7. -
    7. Aenean sit amet erat nunc
      8. -
    8. Eget porttitor lorem
      9. -
    +

    {{_i}}A list of items in which the order does explicitly matter.{{/i}}

    +
    +
      +
    1. Lorem ipsum dolor sit amet
      2. +
    2. Consectetur adipiscing elit
      3. +
    3. Integer molestie lorem at massa
      4. +
    4. Facilisis in pretium nisl aliquet
      5. +
    5. Nulla volutpat aliquam velit
      6. +
    6. Faucibus porta lacus fringilla vel
      7. +
    7. Aenean sit amet erat nunc
      8. +
    8. Eget porttitor lorem
      9. +
    +
    +
    +<ol>
+  <li>...</li>
+</ol>
+
    + +

    {{_i}}Unstyled{{/i}}

    +

    {{_i}}A list of items with no list-style or additional left padding.{{/i}}

    +
    +
      +
    • Lorem ipsum dolor sit amet
      • +
    • Consectetur adipiscing elit
      • +
    • Integer molestie lorem at massa
      • +
    • Facilisis in pretium nisl aliquet
      • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
        • +
      • Purus sodales ultricies
        • +
      • Vestibulum laoreet porttitor sem
        • +
      • Ac tristique libero volutpat at
        • +
      +
      • +
    • Faucibus porta lacus fringilla vel
      • +
    • Aenean sit amet erat nunc
      • +
    • Eget porttitor lorem
      • +
    +
    +
    +<ul class="unstyled">
+  <li>...</li>
+</ul>
+

    {{_i}}Description{{/i}}

    -

    <dl>

    -
    -
    {{_i}}Description lists{{/i}}
    -
    {{_i}}A description list is perfect for defining terms.{{/i}}
    -
    Euismod
    -
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    -
    Donec id elit non mi porta gravida at eget metus.
    -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    -
    +

    {{_i}}A list of terms with their associated descriptions.{{/i}}

    +
    +
    +
    {{_i}}Description lists{{/i}}
    +
    {{_i}}A description list is perfect for defining terms.{{/i}}
    +
    Euismod
    +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    +
    Donec id elit non mi porta gravida at eget metus.
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    +
    +
    +<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+
    -

    {{_i}}Horizontal description{{/i}}

    -

    <dl class="dl-horizontal">

    -
    -
    {{_i}}Description lists{{/i}}
    -
    {{_i}}A description list is perfect for defining terms.{{/i}}
    -
    Euismod
    -
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    -
    Donec id elit non mi porta gravida at eget metus.
    -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    -
    Felis euismod semper eget lacinia
    -
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    -
    +

    {{_i}}Horizontal description{{/i}}

    +

    {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

    +
    +
    +
    {{_i}}Description lists{{/i}}
    +
    {{_i}}A description list is perfect for defining terms.{{/i}}
    +
    Euismod
    +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    +
    Donec id elit non mi porta gravida at eget metus.
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    Felis euismod semper eget lacinia
    +
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    +
    +
    +
    +<dl class="dl-horizontal">
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+

    {{_i}}Heads up!{{/i}} diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index d2832e0fac..ae17ad4a8d 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -1,26 +1,9 @@ -

    -
    -
    -

    {{_i}}Contents{{/i}}

    -
      -
    1. {{_i}}Global styles{{/i}}
      2. -
    2. {{_i}}Grid system{{/i}}
      3. -
    3. {{_i}}Fluid grid system{{/i}}
      4. -
    4. {{_i}}Customizing{{/i}}
      5. -
    5. {{_i}}Layouts{{/i}}
      6. -
    6. {{_i}}Responsive design{{/i}}
      7. -
    -
    -
    -
    -

    {{_i}}Scaffolding{{/i}}

    {{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}

    -
    + @@ -275,10 +275,10 @@