Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

Conflicts: bootstrap.css

Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
Conflicts: bootstrap.css
b1cba98a · Jacob Thornton · dc628c91 · bc51c157 · b1cba98a · b1cba98a
Commit b1cba98a authored Nov 30, 2011 by Jacob Thornton
15 changed files
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Here's what the LESS version looks like:
 <script src="less.js" type="text/javascript"></script>
 ```
-Or if you prefer, the standard css way:
+Or if you prefer, the standard CSS way:
 ``` html
 <link rel="stylesheet" type="text/css" href="bootstrap.css">
@@ -72,7 +72,7 @@ http://groups.google.com/group/twitter-bootstrap
 Developers
 ----------
-We have included a makefile with convenience methods for working with the bootstrap library.
+We have included a makefile with convenience methods for working with the Bootstrap library.
 + **build** - `make build`
 This will run the less compiler on the bootstrap lib and generate a bootstrap.css and bootstrap.min.css file.

--- a/bootstrap.css
+++ b/bootstrap.css
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -39,45 +39,6 @@ body > .navbar-fixed .brand:hover {
 }
-/* Github buttons
-------------------------------------------------- */
-.github-btn + .github-btn {
-  margin-left: 10px;
-}
-.github-btn {
-  display: inline-block;
-  height: 20px;
-  overflow: hidden;
-}
-.github-btn .btn,
-.github-btn .count {
-  float: left;
-  padding: 1px 5px 1px 4px;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 16px;
-  color: #666;
-  text-shadow: 0 1px 0 #fff;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-}
-.github-btn .btn {
-  box-shadow: none;
-}
-.github-btn .github-ico {
-  float: left;
-  margin-right: 4px;
-  opacity: .65;
-}
-.github-btn .count {
-  display: inline-block;
-  margin-left: 2px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-}
 /* Jumbotrons
 -------------------------------------------------- */
 .jumbotron {
@@ -304,13 +265,6 @@ body > .navbar-fixed .brand:hover {
  margin-left: 10px;
 }
-/* scrollspy docs */
-.scrollspy-example {
-  overflow: auto;
-  height: 200px;
-  position: relative;
-}
 /* Popover docs
 -------------------------------------------------- */
@@ -473,19 +427,3 @@ h2 + table {
  }
 }
-#accordion dt a{
-  display:block;
-  padding: 9px 15px;
-  line-height: 1;
-  background-color: whiteSmoke;
-  border: 1px solid #EEE;
-  border-top-color: #fff;
-}
-#accordion dt:first-child a {
-  border-top-color:#eee;
-}
-#accordion dd p {
-  padding: 10px;
-}
\ No newline at end of file
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -50,7 +50,7 @@
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>Base CSS</h1>
-        <p class="lead">The core typography, form, and table styles of Bootstrap</p>
+        <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
      </header>
@@ -551,7 +551,7 @@
        <td>
          <code>.condensed-table</code>
        </td>
-        <td>Cuts padding in half, from 10px to 5px, within all <code>td</code> and <code>th</code> elements</td>
+        <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
      </tr>
    </tbody>
  </table>
@@ -630,7 +630,49 @@
 &lt;table class="striped-table"&gt;
  ...
 &lt;/table&gt;</pre>
-  <h3>3. Condensed table</h3>
+  <h3>3. Bordered table</h3>
+  <p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p>
+  <p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
+  <table class="bordered-table">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>First Name</th>
+        <th>Last Name</th>
+        <th>Language</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td colspan="2">Some One</td>
+        <td>English</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>Joe</td>
+        <td>Sixpack</td>
+        <td>English</td>
+      </tr>
+      </tr>
+        <td>Joe</td>
+        <td>Sixpack</td>
+        <td>English</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>Stu</td>
+        <td>Dent</td>
+        <td>Code</td>
+      </tr>
+    </tbody>
+  </table>
+  <p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
+<pre class="prettyprint linenums">
+&lt;table class="striped-table"&gt;
+  ...
+&lt;/table&gt;</pre>
+  <h3>4. Condensed table</h3>
  <p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p>
  <table class="condensed-table">
    <thead>
@@ -666,7 +708,7 @@
 &lt;table class="condensed-table"&gt;
  ...
 &lt;/table&gt;</pre>
-  <h3>4. Striped table w/ TableSorter.js</h3>
+  <h3>5. Striped table w/ TableSorter.js</h3>
  <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
  <table class="striped-table" id="sortTableExample">
    <thead>

--- a/docs/components.html
+++ b/docs/components.html
@@ -50,7 +50,7 @@
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>Components</h1>
-        <p class="lead">Reusable patterns for navigation, alerts, popovers, and much more</p>
+        <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
      </header>
@@ -412,6 +412,28 @@
    </div>
  </div>
+  <!-- Step nav -->
+  <div class="row">
+    <div class="span3">
+      <h2>Step nav</h2>
+      <p>Placeholder for now!</p>
+    </div>
+    <div class="span9">
+      <br>
+      <ul class="step-nav">
+        <li class="prev"><a href="#">&laquo; Overview</a></li>
+        <li class="active"><a class="dot" href="#">1</a></li>
+        <li><a class="dot" href="#">2</a></li>
+        <li><a class="dot" href="#">3</a></li>
+        <li><a class="dot" href="#">4</a></li>
+        <li><a class="dot" href="#">5</a></li>
+        <li class="next"><a href="#">Base CSS &raquo;</a></li>
+      </ul>
+      <br>
+      <br>
+    </div>
+  </div>
  <!-- Pagination -->
  <div class="row">
    <div class="span3">

--- a/docs/index.html
+++ b/docs/index.html
@@ -55,7 +55,8 @@
            <h1>Bootstrap,<br> from Twitter</h1>
            <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
            <p class="download-info">
-              <a href="#" class="btn primary btn-large">Download on GitHub</a>
+              <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">Download on GitHub</a>
+              <a href="./scaffolding.html" class="btn btn-large">Get started</a>
              Currently v2.0.0
            </p>
@@ -82,22 +83,11 @@
          <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
          <li class="divider">&middot;</li>
          <li>
-            <span class="github-btn github-watchers">
+            <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
-              <a href="https://github.com/twitter/bootstrap" class="btn">
+          </li>
-                <img class="github-ico" src="assets/img/github-16px.png">
+          <li>
-                Watch
+            <iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe>
-              </a>
-              <span class="count"></span>
-            </span>
-            <span class="github-btn github-forks">
-              <a href="https://github.com/twitter/bootstrap" class="btn">
-                <img class="github-ico" src="assets/img/github-16px.png">
-                Fork
-              </a>
-              <span class="count"></span>
-            </span>
          </li>
 <!--
          <li><strong>Authors</strong></li>
          <li><a href="http://twitter.com/mdo">@mdo</a></li>
@@ -190,23 +180,6 @@
          </div><!--/row-->
        </div>
-<!--         <h3>Quick-start examples</h3>
-        <p>Need some quick templates? Check out these basic examples we've put together:</p>
-        <ul class="media-grid">
-          <li>
-            <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
-          </li>
-          <li>
-            <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
-          </li>
-          <li>
-            <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
-          </li>
-        </ul>
- -->
      </div><!-- /#overview -->
@@ -232,41 +205,5 @@
    <script src="../js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/application.js"></script>
-    <script type="text/javascript">
-      $(document).ready(function($){
-        function addCommas(nStr) {
-          nStr += '';
-          x = nStr.split('.');
-          x1 = x[0];
-          x2 = x.length > 1 ? '.' + x[1] : '';
-          var rgx = /(\d+)(\d{3})/;
-          while (rgx.test(x1)) {
-              x1 = x1.replace(rgx, '$1' + ',' + '$2');
-          }
-          return x1 + x2;
-        }
-        // GITHUB
-        window.repoCallback = function (obj) {
-          // Variables
-          var watchers = obj['repository']['watchers'];
-          var forks = obj['repository']['forks'];
-          // Echo out the counts in correct elements
-          $('.github-watchers .count').html(addCommas(watchers));
-          $('.github-forks .count').html(addCommas(forks));
-          // Debug log
-          // console.log("Watchers:" + watchers);
-          // console.log("Forks:" + forks);
-        }
-        $.ajax("http://github.com/api/v2/json/repos/show/twitter/bootstrap?callback=repoCallback", {dataType: "jsonp"});
-      });
-    </script>
  </body>
 </html>
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -83,7 +83,7 @@
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>Javascript for Bootstrap</h1>
-        <p class="lead">Bring Bootstrap's components to life with custom plugins for <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a></p>
+        <p class="lead">Bring Bootstrap's components to life with flexible, custom javascript plugins for many of our custom components that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>.</p>
      </header>

--- a/docs/less.html
+++ b/docs/less.html
@@ -50,7 +50,7 @@
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>Using LESS with Bootstrap</h1>
-        <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p>
+        <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
      </header>

--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -50,9 +50,18 @@
      ================================================== -->
      <header class="jumbotron subhead" id="overview">
        <h1>Scaffolding</h1>
-        <p class="lead">Responsive 12-column grid and fixed- and fluid-width layouts</p>
+        <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>
      </header>
+      <!-- Work in progress sub nav for docs -->
+      <div class="navbar subnav docked-top">
+        <ul class="nav">
+          <li class="active"><a href="#">Grid system</a></li>
+          <li><a href="#">Layouts</a></li>
+          <li><a href="#">Responsive</a></li>
+        </ul>
+      </div>
 <!-- Grid system
@@ -162,7 +171,7 @@
  </div>
  <h2>Grid customization</h2>
-  <table class="striped-table">
+  <table class="bordered-table striped-table">
    <thead>
      <tr>
        <th>Variable</th>
@@ -173,12 +182,12 @@
    <tbody>
      <tr>
        <td><code>@gridColumns</code></td>
-        <td>16</td>
+        <td>12</td>
        <td>The number of columns within the grid</td>
      </tr>
      <tr>
        <td><code>@gridColumnWidth</code></td>
-        <td>40px</td>
+        <td>60px</td>
        <td>The width of each column within the grid</td>
      </tr>
      <tr>
@@ -274,7 +283,7 @@
    <div class="span8">
      <h2>Supported devices</h2>
      <p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
-      <table class="striped-table">
+      <table class="bordered-table striped-table">
        <thead>
          <tr>
            <th>Label</th>

--- a/js/README.md
+++ b/js/README.md
-## 2.0 BOOTSTRAP JS PHILSOPHY
+## 2.0 BOOTSTRAP JS PHILOSOPHY
-These are the highlevel design rules which guide the developement of Bootstrap's js plugins.
+These are the high-level design rules which guide the development of Bootstrap's JS plugins.
 ---
 ### DATA-ATTRIBUTE API
-We believe you should be able to use all plugins provided by bootstrap purely through the markup api without writing a single line of javascript.
+We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript.
-We acknoledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute api by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
+We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
    $('body').unbind('.data-api')
@@ -19,13 +19,13 @@ To target a specific plugin, just include the plugins name as a namespace along
 ### PROGRAMATIC API
-We also believe you should be able to use all plugins provided by bootstrap purely through the JS api.
+We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
-All pubilc APIs should be a single, chainable method, and return the collection acted upon.
+All public APIs should be a single, chainable method, and return the collection acted upon.
    $(".btn.danger").button("toggle").addClass("fat")
-All methods should accept an optional options object, a string which targets a particular method, or null which innitiates the default behavior:
+All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
    $("#myModal").modal() // initialized with defaults
@@ -39,7 +39,7 @@ All plugins should have a default object which can be modified to effect all ins
    $.fn.modal.defaults = { … }
-An options definiton should take the following form:
+An options definition should take the following form:
    *noun*: *adjective* - describes or modifies a quality of an instance

--- a/lib/forms.less
+++ b/lib/forms.less
@@ -145,7 +145,7 @@ select:focus {
 .formColumns(@columnSpan: 1) {
  display: inline-block;
  float: none;
-  width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
+  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
  margin-left: 0;
 }
 input,
@@ -220,15 +220,15 @@ textarea[readonly] {
  }
 }
 // Error
-form .clearfix.error {
+.control-group.error {
  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
 }
 // Warning
-form .clearfix.warning {
+.control-group.warning {
  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
 }
 // Success
-form .clearfix.success {
+.control-group.success {
  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
 }

--- a/lib/tables.less
+++ b/lib/tables.less
@@ -4,45 +4,41 @@
 // ----------------------------------------
 // BASELINE STYLES
 // ---------------
 table {
  width: 100%;
-  padding: 0;
  margin-bottom: @baseLineHeight;
-  font-size: @baseFontSize;
+}
-  border-collapse: collapse;
+th,
-  th,
+td {
-  td {
+  padding: 8px;
-    padding: 10px 10px 9px;
  line-height: @baseLineHeight;
  text-align: left;
-  }
+  border-bottom: 1px solid #ddd;
-  th {
+}
-    padding-top: 9px;
+th {
  font-weight: bold;
-    vertical-align: middle;
+  vertical-align: bottom;
-  }
+}
-  td {
+td {
-    vertical-align: top;
-    border-top: 1px solid #ddd;
-  }
-  // When scoped to row, fix th in tbody
-  tbody th {
-    border-top: 1px solid #ddd;
  vertical-align: top;
-  }
+}
+tbody tr:last-child th,
+tbody tr:last-child td {
+  border-bottom: 0;
 }
-// CONDENSED VERSION
+// CONDENSED TABLE W/ HALF PADDING
-// -----------------
+// -------------------------------
 .condensed-table {
  th,
  td {
-    padding: 5px 5px 4px;
+    padding: 4px 5px;
  }
 }
@@ -53,13 +49,14 @@ table {
 .bordered-table {
  border: 1px solid #ddd;
  border-collapse: separate; // Done so we can round those corners!
-  *border-collapse: collapse; /* IE7, collapse table to remove spacing */
  .border-radius(4px);
  th + th,
  td + td,
-  th + td {
+  th + td,
+  td + th {
    border-left: 1px solid #ddd;
  }
+  // For first th or td in the first row in the first thead or tbody
  thead:first-child tr:first-child th:first-child,
  tbody:first-child tr:first-child td:first-child {
    .border-radius(4px 0 0 0);
@@ -68,15 +65,34 @@ table {
  tbody:first-child tr:first-child td:last-child {
    .border-radius(0 4px 0 0);
  }
-  tbody tr:last-child td:first-child {
+  // For first th or td in the first row in the first thead or tbody
+  thead:last-child tr:last-child th:first-child,
+  tbody:last-child tr:last-child td:first-child {
    .border-radius(0 0 0 4px);
  }
-  tbody tr:last-child td:last-child {
+  thead:last-child tr:last-child th:last-child,
+  tbody:last-child tr:last-child td:last-child {
    .border-radius(0 0 4px 0);
  }
 }
+// ZEBRA-STRIPING
+// --------------
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+.striped-table {
+  tbody {
+    tr:nth-child(odd) td,
+    tr:nth-child(odd) th {
+      background-color: #f9f9f9;
+    }
+  }
+}
+/*
 // ----------------
 // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
@@ -104,24 +120,6 @@ table {
 }
-// ZEBRA-STRIPING
-// --------------
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.striped-table {
-  tbody {
-    tr:nth-child(odd) td,
-    tr:nth-child(odd) th {
-      background-color: #f9f9f9;
-    }
-    tr:hover td,
-    tr:hover th {
-      background-color: #f5f5f5;
-    }
-  }
-}
 // TABLESORTER
 // -----------
@@ -225,4 +223,4 @@ table {
  .headerSortDown.purple {
    background-color: lighten(@purple, 40%);
  }
-}
+}*/
\ No newline at end of file
--- a/lib/tabs-pills.less
+++ b/lib/tabs-pills.less
@@ -216,3 +216,78 @@
 .pill-content > .active {
  display: block;
 }
+// Step nav
+.step-nav {
+  position: relative; // for prev/next links
+  margin: 0 0 @baseLineHeight;
+  list-style: none;
+  line-height: 30px;
+  text-align: center;
+  background-color: #f5f5f5;
+  .border-radius(15px);
+  li {
+    display: inline;
+    color: @grayLight;
+  }
+  // prev/next links
+  .prev,
+  .next {
+    position: absolute;
+    top: 6px;
+  }
+  .prev {
+    left: 15px;
+  }
+  .next {
+    right: 15px;
+  }
+  // indicators for each step/page/item/etc
+  .dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin: 0 3px;
+    text-indent: -999em;
+    background-color: @grayLight;
+    .border-radius(5px);
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
+  }
+  .dot:hover,
+  .active .dot {
+    background-color: @grayDark;
+  }
+}
+// Subnav
+// STILL A WIP
+.subnav {
+  position: relative;
+  #gradient > .vertical(#f5f5f5, #eeeeee);
+  .border-radius(6px);
+  a {
+    padding: 10px 15px;
+    color: @linkColor;
+    text-shadow: 0 1px 0 #fff;
+    border-left: 1px solid #f9f9f9;
+    border-right: 1px solid #e5e5e5;
+    &:hover {
+      color: @linkColorHover;
+      background-color: #eee;
+    }
+  }
+  li:first-child a {
+    border-left: 0;
+    .border-radius(6px 0 0 6px);
+  }
+  li:last-child a {
+    border-right: 0;
+    .border-radius(0 6px 6px 0);
+  }
+  ul .active > a {
+    color: @grayDark;
+    background-color: #eee;
+  }
+}
\ No newline at end of file
--- a/lib/type.less
+++ b/lib/type.less
@@ -205,6 +205,11 @@ pre {
  white-space: pre-wrap;
  word-break: break-all;
+  // Make prettyprint styles more spaced out for readability
+  &.prettyprint {
+    margin-bottom: @baseLineHeight;
+  }
  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;