keep tables at 13px in docs for now, clean up some modals js docs stuff

3 files changed, 82 insertions, 97 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a39dc3c6e..c91afd73a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -69,81 +69,6 @@ body > .navbar-fixed-top .brand:hover {
 }
 
 
-
-/* Left nav
--------------------------------------------------- */
-
-.bs-docs-nav {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  overflow-y: scroll;
-  width: 150px;
-  padding: 25px;
-  background-color: #dde2e9;
-  text-shadow: 0 1px 0 rgba(255,255,255,.55);
-  -webkit-box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
-     -moz-box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
-          box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
-  background-color: #444;
-  text-shadow: 0 1px 0 rgba(0,0,0,.5);
-}
-.bs-docs-nav ul {
-  margin-left: 0;
-  margin-bottom: 15px;
-}
-.bs-docs-nav ul li {
-  list-style: none;
-  line-height: 1;
-}
-.bs-docs-nav a:hover {
-  text-decoration: none;
-}
-.bs-docs-nav ul li a {
-  display: block;
-  width: 145px;
-  padding: 0 30px;
-  margin: 0 -30px;
-  font-size: 12px;
-  line-height: 22px;
-  color: #444;
-  color: #999;
-}
-.bs-docs-nav ul li a:hover {
-  color: #333;
-  color: #fff;
-  background-color: rgba(0,0,0,.05);
-}
-.bs-docs-nav > ul > li > a {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 24px;
-  color: #333;
-  color: #fff;
-}
-
-/* Logo wordmark */
-.bs-docs-logo {
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 1;
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-.bs-docs-logo a {
-  color: #a4b4cb;
-  color: #333;
-  text-shadow: 0 1px 0 #555;
-}
-.bs-docs-logo a:hover {
-  color: #8e9db3;
-  color: #222;
-}
-
-
-
 /* Space out sub-sections more
 -------------------------------------------------- */
 
@@ -151,6 +76,11 @@ section {
   padding-top: 60px;
 }
 
+section > .table {
+  font-size: 13px;
+}
+
+
 /* Table of contents */
 .bs-docs-contents li {
   line-height: 25px;
diff --git a/docs/javascript.html b/docs/javascript.html
index 90079292b..b83612d52 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -106,10 +106,13 @@
   <div class="page-header">
     <h1>Javascript in Bootstrap</h1>
   </div>
+
   <h3>Individual or compiled</h3>
   <p>If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</p>
-  <h3>Data attributea</h3>
+
+  <h3>Data attributes</h3>
   <p>...</p>
+
   <h3>Programmatic API</h3>
   <p>...</p>
 
@@ -126,8 +129,16 @@
     <h1>Transitions <small>bootstrap-transition.js</small></h1>
   </div>
   <h3>About transitions</h3>
-  <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
-  <p class="muted"><strong>*</strong> Required for animation in plugins</p>
+  <p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
+  <h3>Use cases</h3>
+  <p>A few examples of the transition plugin:</p>
+  <ul>
+    <li>Sliding or fading in modals</li>
+    <li>Fading out tabs</li>
+    <li>Fading out alerts</li>
+    <li>Sliding carousel panes</li>
+  </ul>
+
 </section>
 
 
@@ -139,11 +150,11 @@
     <h1>Modals <small>bootstrap-modal.js</small></h1>
   </div>
 
-  <h3>About modals</h3>
+
+  <h2>About modals</h2>
   <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
 
-  <h2>Static example</h2>
-  <p>Below is a statically rendered modal.</p>
+  <h3>Static example</h3>
   <div class="bs-docs-example" style="background-color: #f5f5f5;">
     <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
       <div class="modal-header">
@@ -159,10 +170,24 @@
       </div>
     </div>
   </div>
+<pre class="prettyprint linenums">
+&lt;div class="modal hide fade"&gt;
+  &lt;div class="modal-header"&gt;
+    &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
+    &lt;h3&gt;Modal header&lt;/h3&gt;
+  &lt;/div&gt;
+  &lt;div class="modal-body"&gt;
+    &lt;p&gt;One fine body…&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="modal-footer"&gt;
+    &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
+    &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
 
-  <h2>Live demo</h2>
+  <h3>Live demo</h3>
   <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
-
   <!-- sample modal content -->
   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-header">
@@ -195,16 +220,18 @@
       <a href="#" role="button" class="btn btn-primary">Save changes</a>
     </div>
   </div>
-
   <div class="bs-docs-example" style="padding-bottom: 24px;">
     <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
   </div>
 
-  <hr>
 
-  <h2>Using bootstrap-modal</h2>
+  <hr class="bs-docs-separator">
+
+
+  <h2>Usage</h2>
   <p>Call the modal via javascript:</p>
   <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
+
   <h3>Options</h3>
   <table class="table table-bordered table-striped">
     <thead>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index d90184c7b..38e38a9e4 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -29,10 +29,13 @@
   <div class="page-header">
     <h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
   </div>
+
   <h3>{{_i}}Individual or compiled{{/i}}</h3>
   <p>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</p>
-  <h3>{{_i}}Data attributea{{/i}}</h3>
+
+  <h3>{{_i}}Data attributes{{/i}}</h3>
   <p>{{_i}}...{{/i}}</p>
+
   <h3>{{_i}}Programmatic API{{/i}}</h3>
   <p>{{_i}}...{{/i}}</p>
 
@@ -50,8 +53,17 @@
     <h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
   </div>
   <h3>{{_i}}About transitions{{/i}}</h3>
-  <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
-  <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
+  <p>{{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.{{/i}}</p>
+  <h3>{{_i}}Use cases{{/i}}</h3>
+  <p>{{_i}}A few examples of the transition plugin:{{/i}}</p>
+  <ul>
+    <li>{{_i}}Sliding or fading in modals{{/i}}</li>
+    <li>{{_i}}Fading out tabs{{/i}}</li>
+    <li>{{_i}}Fading out alerts{{/i}}</li>
+    <li>{{_i}}Sliding carousel panes{{/i}}</li>
+  </ul>
+
+  {{! Ideas: include docs for .fade.in, .slide.in, etc }}
 </section>
 
 
@@ -63,11 +75,11 @@
     <h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
   </div>
 
-  <h3>{{_i}}About modals{{/i}}</h3>
+
+  <h2>{{_i}}About modals{{/i}}</h2>
   <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
 
-  <h2>{{_i}}Static example{{/i}}</h2>
-  <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
+  <h3>{{_i}}Static example{{/i}}</h3>
   <div class="bs-docs-example" style="background-color: #f5f5f5;">
     <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
       <div class="modal-header">
@@ -83,10 +95,24 @@
       </div>
     </div>
   </div>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;div class="modal hide fade"&gt;
+  &lt;div class="modal-header"&gt;
+    &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
+    &lt;h3&gt;{{_i}}Modal header{{/i}}&lt;/h3&gt;
+  &lt;/div&gt;
+  &lt;div class="modal-body"&gt;
+    &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="modal-footer"&gt;
+    &lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
+    &lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
 
-  <h2>{{_i}}Live demo{{/i}}</h2>
+  <h3>{{_i}}Live demo{{/i}}</h3>
   <p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
-
   <!-- sample modal content -->
   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-header">
@@ -119,16 +145,18 @@
       <a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
     </div>
   </div>
-
   <div class="bs-docs-example" style="padding-bottom: 24px;">
     <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
   </div>{{! /example }}
 
-  <hr>
 
-  <h2>{{_i}}Using bootstrap-modal{{/i}}</h2>
+  <hr class="bs-docs-separator">
+
+
+  <h2>{{_i}}Usage{{/i}}</h2>
   <p>{{_i}}Call the modal via javascript:{{/i}}</p>
   <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
+
   <h3>{{_i}}Options{{/i}}</h3>
   <table class="table table-bordered table-striped">
     <thead>