overhaul js docs top sections, update subhead

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 640dc5cfb7760b13b89c606a992dfb10a14c84e4..b5e4cc33cb0aad8d339acf88319d1f6d06303860 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -258,9 +258,10 @@ hr.soften {
   font-size: 60px;
 }
 .subhead .lead {
-  max-width: 780px;
   margin-bottom: 30px;
   line-height: 25px;
+  font-size: 30px;
+  line-height: 40px;
 }
 
 /* Subnav */

diff --git a/docs/javascript.html b/docs/javascript.html
index 2aa5fce2c1f751bb40c812770301900ca89f6f2a..a6dcd301e4100935d603ca908c893c385fb4f6d8 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -177,69 +177,35 @@
 
 
 
-  <!-- Using Javascript w/ Bootstrap
-  ================================================== -->
-  <section id="javascript">
-    <div class="page-header">
-      <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
-    </div>
-  <div class="row">
-    <div class="span4">
-      <h3><a href="./javascript.html#modals">Modals</a></h3>
-      <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
-      <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
-      <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
-      <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span4">
-      <h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
-      <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
-      <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
-      <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#alerts">Alert messages</a></h3>
-      <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#buttons">Buttons</a></h3>
-      <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
-    </div>
-  </div> <!-- /row -->
-  <div class="row" style="margin-bottom: 9px;">
-    <div class="span4">
-      <h3><a href="./javascript.html#collapse">Collapse</a></h3>
-      <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#carousel">Carousel</a></h3>
-      <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
-      <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
-    </div>
-    <div class="span4">
-      <h3>Transitions <small class="muted">*</small></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>
-    </div>
-  </div> <!-- /row -->
-  <div class="alert alert-info"><strong>Heads up!</strong>  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.</div>
+
+<!-- Overview
+================================================== -->
+<section id="overview">
+  <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>
+  <p>...</p>
+  <h3>Programmatic API</h3>
+  <p>...</p>
+
+
+
+</section>
+
+
+
+<!-- Transitions
+================================================== -->
+<section id="modals">
+  <div class="page-header">
+    <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>
 </section>
 
 

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index e9e81ddb5c9d7c9033e05b9ba992046ed185fa43..d90184c7b83b5ba1f294bb61e870217c56a4af46 100644 (file)
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -22,69 +22,36 @@
 
 
 
-  <!-- Using Javascript w/ Bootstrap
-  ================================================== -->
-  <section id="javascript">
-    <div class="page-header">
-      <h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1>
-    </div>
-  <div class="row">
-    <div class="span4">
-      <h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
-      <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
-      <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
-      <p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
-      <p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span4">
-      <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
-      <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
-      <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
-      <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
-      <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
-      <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
-    </div>
-  </div> <!-- /row -->
-  <div class="row" style="margin-bottom: 9px;">
-    <div class="span4">
-      <h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
-      <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
-      <p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
-      <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></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>
-    </div>
-  </div> <!-- /row -->
-  <div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_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}}</div>
+
+<!-- Overview
+================================================== -->
+<section id="overview">
+  <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>
+  <p>{{_i}}...{{/i}}</p>
+  <h3>{{_i}}Programmatic API{{/i}}</h3>
+  <p>{{_i}}...{{/i}}</p>
+
+
+  {{! Thought: consider porting much of the JS readme here? }}
+
+</section>
+
+
+
+<!-- Transitions
+================================================== -->
+<section id="modals">
+  <div class="page-header">
+    <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>
 </section>