bump version numbers in css files to 2.0.3, break out responsive CSS into separate files for further customization

7 files changed, 140 insertions, 456 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 613eef56b..c6d21fc96 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index b007300c2..14d7594d2 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.2
+ * Bootstrap Responsive v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -375,120 +375,6 @@
     width: 32px;
   }
 }
-@media (max-width: 979px) {
-  body {
-    padding-top: 0;
-  }
-  .navbar-fixed-top {
-    position: static;
-    margin-bottom: 18px;
-  }
-  .navbar-fixed-top .navbar-inner {
-    padding: 5px;
-  }
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-  .navbar .brand {
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0 0 0 -5px;
-  }
-  .navbar .nav-collapse {
-    clear: left;
-  }
-  .navbar .nav {
-    float: none;
-    margin: 0 0 9px;
-  }
-  .navbar .nav > li {
-    float: none;
-  }
-  .navbar .nav > li > a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > .divider-vertical {
-    display: none;
-  }
-  .navbar .nav .nav-header {
-    color: #999999;
-    text-shadow: none;
-  }
-  .navbar .nav > li > a,
-  .navbar .dropdown-menu a {
-    padding: 6px 15px;
-    font-weight: bold;
-    color: #999999;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-  }
-  .navbar .dropdown-menu li + li a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > li > a:hover,
-  .navbar .dropdown-menu a:hover {
-    background-color: #222222;
-  }
-  .navbar .dropdown-menu {
-    position: static;
-    top: auto;
-    left: auto;
-    float: none;
-    display: block;
-    max-width: none;
-    margin: 0 15px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-  }
-  .navbar .dropdown-menu:before,
-  .navbar .dropdown-menu:after {
-    display: none;
-  }
-  .navbar .dropdown-menu .divider {
-    display: none;
-  }
-  .navbar-form,
-  .navbar-search {
-    float: none;
-    padding: 9px 15px;
-    margin: 9px 0;
-    border-top: 1px solid #222222;
-    border-bottom: 1px solid #222222;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  }
-  .navbar .nav.pull-right {
-    float: none;
-    margin-left: 0;
-  }
-  .navbar-static .navbar-inner {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  .btn-navbar {
-    display: block;
-  }
-  .nav-collapse {
-    overflow: hidden;
-    height: 0;
-  }
-}
-@media (min-width: 980px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-    overflow: visible !important;
-  }
-}
 @media (min-width: 1200px) {
   .row {
     margin-left: -30px;
@@ -686,3 +572,117 @@
     margin-left: 30px;
   }
 }
+@media (max-width: 979px) {
+  body {
+    padding-top: 0;
+  }
+  .navbar-fixed-top {
+    position: static;
+    margin-bottom: 18px;
+  }
+  .navbar-fixed-top .navbar-inner {
+    padding: 5px;
+  }
+  .navbar .container {
+    width: auto;
+    padding: 0;
+  }
+  .navbar .brand {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  .navbar .nav-collapse {
+    clear: left;
+  }
+  .navbar .nav {
+    float: none;
+    margin: 0 0 9px;
+  }
+  .navbar .nav > li {
+    float: none;
+  }
+  .navbar .nav > li > a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > .divider-vertical {
+    display: none;
+  }
+  .navbar .nav .nav-header {
+    color: #999999;
+    text-shadow: none;
+  }
+  .navbar .nav > li > a,
+  .navbar .dropdown-menu a {
+    padding: 6px 15px;
+    font-weight: bold;
+    color: #999999;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+  }
+  .navbar .dropdown-menu li + li a {
+    margin-bottom: 2px;
+  }
+  .navbar .nav > li > a:hover,
+  .navbar .dropdown-menu a:hover {
+    background-color: #222222;
+  }
+  .navbar .dropdown-menu {
+    position: static;
+    top: auto;
+    left: auto;
+    float: none;
+    display: block;
+    max-width: none;
+    margin: 0 15px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+  .navbar .dropdown-menu:before,
+  .navbar .dropdown-menu:after {
+    display: none;
+  }
+  .navbar .dropdown-menu .divider {
+    display: none;
+  }
+  .navbar-form,
+  .navbar-search {
+    float: none;
+    padding: 9px 15px;
+    margin: 9px 0;
+    border-top: 1px solid #222222;
+    border-bottom: 1px solid #222222;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .navbar .nav.pull-right {
+    float: none;
+    margin-left: 0;
+  }
+  .navbar-static .navbar-inner {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .btn-navbar {
+    display: block;
+  }
+  .nav-collapse {
+    overflow: hidden;
+    height: 0;
+  }
+}
+@media (min-width: 980px) {
+  .nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8b22f8928..4f72e0770 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.2
+ * Bootstrap v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
diff --git a/docs/download.html b/docs/download.html
index b22478e14..a35354947 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -142,7 +142,11 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
       <h3>Responsive</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> Responsive layouts</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> Visible/hidden classes</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index cec420f3e..051291148 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -66,7 +66,11 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> {{_i}}Visible/hidden classes{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> {{_i}}Responsive navbar{{/i}}</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 93ab35f4b..9749a46cb 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v2.0.2
+ * Bootstrap v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
diff --git a/less/responsive.less b/less/responsive.less
index 98485eebd..d35948ddc 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Responsive v2.0.2
+ * Bootstrap Responsive v2.0.3
  *
  * Copyright 2012 Twitter, Inc
  * Licensed under the Apache License v2.0
@@ -24,348 +24,24 @@
 // RESPONSIVE CLASSES
 // ------------------
 
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden {
-  display: none;
-  visibility: hidden;
-}
+@import "responsive-utility-classes.less";
 
-// Visibility utilities
 
-// For desktops
-.visible-phone     { display: none; }
-.visible-tablet    { display: none; }
-.visible-desktop   { display: block; }
-.hidden-phone      { display: block; }
-.hidden-tablet     { display: block; }
-.hidden-desktop    { display: none; }
-
-// Phones only
-@media (max-width: 767px) {
-  // Show
-  .visible-phone     { display: block; }
-  // Hide
-  .hidden-phone      { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-// Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
-  // Show
-  .visible-tablet    { display: block; }
-  // Hide
-  .hidden-tablet     { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-@media (max-width: 480px) {
-
-  // Smooth out the collapsing/expanding nav
-  .nav-collapse {
-    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
-  }
-
-  // Block level the page header small tag for readability
-  .page-header h1 small {
-    display: block;
-    line-height: @baseLineHeight;
-  }
-
-  // Update checkboxes for iOS
-  input[type="checkbox"],
-  input[type="radio"] {
-    border: 1px solid #ccc;
-  }
-
-  // Remove the horizontal form styles
-  .form-horizontal .control-group > label {
-    float: none;
-    width: auto;
-    padding-top: 0;
-    text-align: left;
-  }
-  // Move over all input controls and content
-  .form-horizontal .controls {
-    margin-left: 0;
-  }
-  // Move the options list down to align with labels
-  .form-horizontal .control-list {
-    padding-top: 0; // has to be padding because margin collaspes
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-horizontal .form-actions {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
-  // Modals
-  .modal {
-    position: absolute;
-    top:   10px;
-    left:  10px;
-    right: 10px;
-    width: auto;
-    margin: 0;
-    &.fade.in { top: auto; }
-  }
-  .modal-header .close {
-    padding: 10px;
-    margin: -10px;
-  }
-
-  // Carousel
-  .carousel-caption {
-    position: static;
-  }
-
-}
-
-
-
-// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
-// --------------------------------------------------
-
-@media (max-width: 767px) {
-
-  // Padding to set content in a bit
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  .navbar-fixed-top {
-    margin-left: -20px;
-    margin-right: -20px;
-  }
-
-  // GRID & CONTAINERS
-  // -----------------
-  // Remove width from containers
-  .container {
-    width: auto;
-  }
-  // Fluid rows
-  .row-fluid {
-    width: 100%;
-  }
-  // Undo negative margin on rows
-  .row {
-    margin-left: 0;
-  }
-  // Make all columns even
-  .row > [class*="span"],
-  .row-fluid > [class*="span"] {
-    float: none;
-    display: block;
-    width: auto;
-    margin: 0;
-  }
-
-  // THUMBNAILS
-  // ----------
-  .thumbnails [class*="span"] {
-    width: auto;
-  }
-
-  // FORM FIELDS
-  // -----------
-  // Make span* classes full width
-  input[class*="span"],
-  select[class*="span"],
-  textarea[class*="span"],
-  .uneditable-input {
-    .input-block-level();
-  }
-  // But don't let it screw up prepend/append inputs
-  .input-prepend input[class*="span"],
-  .input-append input[class*="span"] {
-    width: auto;
-  }
-
-}
-
-
-
-// PORTRAIT TABLET TO DEFAULT DESKTOP
-// ----------------------------------
-
-@media (min-width: 768px) and (max-width: 979px) {
-
-  // Fixed grid
-  #grid > .core(42px, 20px);
-
-  // Fluid grid
-  #grid > .fluid(5.801104972%, 2.762430939%);
-
-  // Input grid
-  #grid > .input(42px, 20px);
-
-}
-
-
-
-// TABLETS AND BELOW
-// -----------------
-@media (max-width: 979px) {
-
-  // UNFIX THE TOPBAR
-  // ----------------
-  // Remove any padding from the body
-  body {
-    padding-top: 0;
-  }
-  // Unfix the navbar
-  .navbar-fixed-top {
-    position: static;
-    margin-bottom: @baseLineHeight;
-  }
-  .navbar-fixed-top .navbar-inner {
-    padding: 5px;
-  }
-  .navbar .container {
-    width: auto;
-    padding: 0;
-  }
-  // Account for brand name
-  .navbar .brand {
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 0 0 0 -5px;
-  }
-  // Nav collapse clears brand
-  .navbar .nav-collapse {
-    clear: left;
-  }
-  // Block-level the nav
-  .navbar .nav {
-    float: none;
-    margin: 0 0 (@baseLineHeight / 2);
-  }
-  .navbar .nav > li {
-    float: none;
-  }
-  .navbar .nav > li > a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > .divider-vertical {
-    display: none;
-  }
-  .navbar .nav .nav-header {
-    color: @navbarText;
-    text-shadow: none;
-  }
-  // Nav and dropdown links in navbar
-  .navbar .nav > li > a,
-  .navbar .dropdown-menu a {
-    padding: 6px 15px;
-    font-weight: bold;
-    color: @navbarLinkColor;
-    .border-radius(3px);
-  }
-  .navbar .dropdown-menu li + li a {
-    margin-bottom: 2px;
-  }
-  .navbar .nav > li > a:hover,
-  .navbar .dropdown-menu a:hover {
-    background-color: @navbarBackground;
-  }
-  // Dropdowns in the navbar
-  .navbar .dropdown-menu {
-    position: static;
-    top: auto;
-    left: auto;
-    float: none;
-    display: block;
-    max-width: none;
-    margin: 0 15px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    .border-radius(0);
-    .box-shadow(none);
-  }
-  .navbar .dropdown-menu:before,
-  .navbar .dropdown-menu:after {
-    display: none;
-  }
-  .navbar .dropdown-menu .divider {
-    display: none;
-  }
-  // Forms in navbar
-  .navbar-form,
-  .navbar-search {
-    float: none;
-    padding: (@baseLineHeight / 2) 15px;
-    margin: (@baseLineHeight / 2) 0;
-    border-top: 1px solid @navbarBackground;
-    border-bottom: 1px solid @navbarBackground;
-    @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-    .box-shadow(@shadow);
-  }
-  // Pull right (secondary) nav content
-  .navbar .nav.pull-right {
-    float: none;
-    margin-left: 0;
-  }
-  // Static navbar
-  .navbar-static .navbar-inner {
-    padding-left:  10px;
-    padding-right: 10px;
-  }
-  // Navbar button
-  .btn-navbar {
-    display: block;
-  }
-
-  // Hide everything in the navbar save .brand and toggle button */
-  .nav-collapse {
-    overflow: hidden;
-    height: 0;
-  }
-}
-
-
-
-// DEFAULT DESKTOP
-// ---------------
-
-@media (min-width: 980px) {
-  .nav-collapse.collapse {
-    height: auto !important;
-    overflow: visible !important;
-  }
-}
-
-
-
-// LARGE DESKTOP & UP
+// MEDIA QUERIES
 // ------------------
 
-@media (min-width: 1200px) {
+// Phones to portrait tablets and narrow desktops
+@import "responsive-767px-max.less";
 
-  // Fixed grid
-  #grid > .core(70px, 30px);
+// Tablets to regular desktops
+@import "responsive-768px-979px.less";
 
-  // Fluid grid
-  #grid > .fluid(5.982905983%, 2.564102564%);
+// Large desktops
+@import "responsive-1200px-min.less";
 
-  // Input grid
-  #grid > .input(70px, 30px);
 
-  // Thumbnails
-  .thumbnails {
-    margin-left: -30px;
-  }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
+// RESPONSIVE NAVBAR
+// ------------------
 
-}
+// From 979px and below, show a button to toggle navbar contents
+@import "responsive-navbar.less";