two col scaffolding rev

dd127611 · Mark Otto · 094e65eb · dd127611 · dd127611 · dd127611
Commit dd127611 authored 12 years ago by Mark Otto
Hide whitespace changes
Inline Side-by-side

Showing

with 80 additions and 72 deletions
+80 -72
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -23,10 +23,6 @@ li {
  line-height: 20px;
 }

-.bs-docs-container {
-  max-width: 780px;
-  margin: 0 auto;
-}

 /* Tweak navbar brand link to be super sleek
 -------------------------------------------------- */
@@ -67,6 +63,19 @@ hr.soften {
  border: 0;
 }

+/* Table of contents */
+.bs-docs-content {
+  color: #999;
+}
+.bs-docs-contents ol {
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+.bs-docs-contents li {
+  line-height: 25px;
+  color: #999;
+}
+

 /* Jumbotrons
 -------------------------------------------------- */
@@ -75,7 +84,7 @@ hr.soften {
 }
 .jumbotron h1 {
  margin-bottom: 9px;
-  font-size: 81px;
+  font-size: 80px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
@@ -110,8 +119,6 @@ hr.soften {
  margin-bottom: 18px;
 }
 .masthead p {
-  margin-left: 5%;
-  margin-right: 5%;
  font-size: 30px;
  line-height: 36px;
 }
@@ -290,10 +297,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;
 }

@@ -689,7 +696,7 @@ form.well {
 ------------------------- */
 .bs-docs-grid {
  width: 940px;
-  margin-left: -80px;
+  margin-left: -240px;
 }


@@ -908,7 +915,7 @@ form.well {

  .bs-docs-grid {
    width: 1170px;
-    margin-left: -195px;
+    margin-left: -300px;
  }

 }
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -1592,10 +1592,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/components.html
+++ b/docs/components.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -1847,10 +1847,10 @@ class="clearfix"
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/download.html
+++ b/docs/download.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -421,10 +421,10 @@
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/examples.html
+++ b/docs/examples.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -112,10 +112,10 @@
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/index.html
+++ b/docs/index.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -187,10 +187,10 @@
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -1508,10 +1508,10 @@ $('.carousel').carousel({
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/less.html
+++ b/docs/less.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -1025,10 +1025,10 @@
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -74,7 +74,23 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">
+
+<div class="row">
+  <div class="span3">
+    <div class="bs-docs-contents well">
+      <h3>Contents</h3>
+      <ol>
+        <li><a href="#global">Global styles</a></li>
+        <li><a href="#gridSystem">Grid system</a></li>
+        <li><a href="#fluidGridSystem">Fluid grid system</a></li>
+        <li><a href="#gridCustomization">Customizing</a></li>
+        <li><a href="#layouts">Layouts</a></li>
+        <li><a href="#responsive">Responsive design</a></li>
+      </ol>
+    </div>
+  </div>
+  <div class="span9">

 <!-- Masthead
 ================================================== -->
@@ -82,17 +98,6 @@
  <h1>Scaffolding</h1>
  <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>

-  <div class="bs-docs-contents">
-    <h4>Contents</h4>
-    <ul>
-      <li><a href="#global">Global styles</a></li>
-      <li><a href="#gridSystem">Grid system</a></li>
-      <li><a href="#fluidGridSystem">Fluid grid system</a></li>
-      <li><a href="#gridCustomization">Customizing</a></li>
-      <li><a href="#layouts">Layouts</a></li>
-      <li><a href="#responsive">Responsive design</a></li>
-    </ul>
-  </div>

 <!--   <div class="subnav">
    <ul class="nav nav-pills">
@@ -183,22 +188,15 @@
    </div>
  </div>

-  <div class="row">
-    <div class="span4">
-      <p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
-    </div><!-- /.span -->
-    <div class="span4">
+  <p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
 <pre class="prettyprint linenums">
 &lt;div class="row"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span8"&gt;...&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div><!-- /.span -->
-    <div class="span4">
-      <p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
-    </div><!-- /.span -->
-  </div><!-- /.row -->
+
+  <p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>

  <br>

@@ -611,14 +609,16 @@

 </section>

+  </div>
+</div>

     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -86,7 +86,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 {{>body}}

@@ -94,10 +94,10 @@
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
        <p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
        <p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
        <p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
-        <p><a href="#">{{_i}}Back to top{{/i}}</a></p>
      </footer>

    </div><!-- /container -->

--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
+<div class="row">
+  <div class="span3">
+    <div class="bs-docs-contents well">
+      <h3>{{_i}}Contents{{/i}}</h3>
+      <ol>
+        <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
+        <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
+        <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
+        <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
+        <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
+        <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
+      </ol>
+    </div>
+  </div>
+  <div class="span9">
+
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
  <h1>{{_i}}Scaffolding{{/i}}</h1>
  <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>

-  <div class="bs-docs-contents">
-    <h4>Contents</h4>
-    <ul>
-      <li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
-      <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
-      <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
-      <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
-      <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
-      <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
-    </ul>
-  </div>

 <!--   <div class="subnav">
    <ul class="nav nav-pills">
@@ -105,22 +110,15 @@
    </div>
  </div>

-  <div class="row">
-    <div class="span4">
-      <p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
-    </div><!-- /.span -->
-    <div class="span4">
+  <p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="row"&gt;
  &lt;div class="span4"&gt;...&lt;/div&gt;
  &lt;div class="span8"&gt;...&lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div><!-- /.span -->
-    <div class="span4">
-      <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
-    </div><!-- /.span -->
-  </div><!-- /.row -->
+
+  <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>

  <br>

@@ -532,3 +530,6 @@
  </ul>

 </section>
+
+  </div>
+</div>
\ No newline at end of file
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -74,7 +74,7 @@
      </div>
    </div>

-    <div class="bs-docs-container">
+    <div class="container">

 <!-- Masthead
 ================================================== -->
@@ -275,10 +275,10 @@
     <!-- Footer
      ================================================== -->
      <footer class="footer">
+        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <p><a href="#">Back to top</a></p>
      </footer>

    </div><!-- /container -->