Merge branch 'master' into docs_derp

.travis.yml

 language: node_js
 node_js:
   - 0.10
-before_script:
-  - gem install jekyll
-  - npm install -g grunt-cli
+before_install:
+  - time sudo pip install --use-mirrors -r ./test-infra/requirements.txt
+install:
+  - if [ "$TWBS_TEST" = validate-html ]; then time gem install jekyll; fi
+  - time npm install -g grunt-cli
+  - time ./test-infra/node_modules_cache.py download package.json ./node_modules || time npm install
+after_script:
+  - if [ "$TWBS_TEST" = core ]; then time ./test-infra/node_modules_cache.py upload package.json ./node_modules; fi
 env:
   global:
-  - SAUCE_USERNAME: bootstrap
-  - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
+    - SAUCE_USERNAME: bootstrap
+    - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
+    - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
+    - secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
+    - secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
+  matrix:
+    - TWBS_TEST=core
+    - TWBS_TEST=validate-html
+    - TWBS_TEST=sauce-js-unit
+matrix:
+  fast_finish: true

CONTRIBUTING.md

@@ -37,12 +37,15 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
 
 ### CSS
 
-- Adhere to the [RECESS CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
+- Adhere to the [CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
 - Multiple-line approach (one property and value per line)
 - Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
 - End all lines with a semi-colon
 - For multiple, comma-separated selectors, place each selector on its own line
 - Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
+- Attribute selectors should only be used where absolutely necessary (e.g., form controls) and should be avoided on custom components for performance and explicitness.
+- Series of classes for a component should include a base class (e.g., `.component`) and use the base class as a prefix for modifier and sub-components (e.g., `.component-lg`).
+- Avoid inheritance and over nesting—use single, explicit classes whenever possible.
 
 ### JS
 

Gruntfile.js

@@ -6,7 +6,9 @@ module.exports = function (grunt) {
   // Force use of Unix newlines
   grunt.util.linefeed = '\n';
 
-  RegExp.quote = require('regexp-quote')
+  RegExp.quote = function (string) {
+    return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
+  }
   var btoa = require('btoa')
   // Project configuration.
   grunt.initConfig({
@@ -191,6 +193,8 @@ module.exports = function (grunt) {
 
     validation: {
       options: {
+        charset: 'utf-8',
+        doctype: 'HTML5',
         reset: true,
         relaxerror: [
           'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
@@ -238,13 +242,13 @@ module.exports = function (grunt) {
             // See https://saucelabs.com/docs/platforms/webdriver
             {
               browserName: 'safari',
-              version: '6',
-              platform: 'OS X 10.8'
+              version: '7',
+              platform: 'OS X 10.9'
             },
             {
               browserName: 'chrome',
-              version: '28',
-              platform: 'OS X 10.6'
+              version: '31',
+              platform: 'OS X 10.9'
             },
             /* FIXME: currently fails 1 tooltip test
             {
@@ -331,9 +335,19 @@ module.exports = function (grunt) {
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
 
   // Test task.
-  var testSubtasks = ['dist-css', 'jshint', 'jscs', 'qunit', 'validate-html'];
+  var testSubtasks = [];
+  // Skip core tests if running a different subset of the test suite
+  if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') {
+    testSubtasks = testSubtasks.concat(['dist-css', 'jshint', 'jscs', 'qunit']);
+  }
+  // Skip HTML validation if running a different subset of the test suite
+  if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
+    testSubtasks.push('validate-html');
+  }
   // Only run Sauce Labs tests if there's a Sauce access key
-  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined') {
+  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined'
+      // Skip Sauce if running a different subset of the test suite
+      && (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
     testSubtasks.push('connect');
     testSubtasks.push('saucelabs-qunit');
   }

_includes/nav-css.html

@@ -66,7 +66,9 @@
     <li><a href="#forms-horizontal">Horizontal form</a></li>
     <li><a href="#forms-controls">Supported controls</a></li>
     <li><a href="#forms-controls-static">Static control</a></li>
-    <li><a href="#forms-control-states">Control states</a></li>
+    <li><a href="#forms-control-focus">Focus state</a></li>
+    <li><a href="#forms-control-disabled">Disabled state</a></li>
+    <li><a href="#forms-control-validation">Validation states</a></li>
     <li><a href="#forms-control-sizes">Control sizing</a></li>
     <li><a href="#forms-help-text">Help text</a></li>
   </ul>
@@ -87,6 +89,8 @@
 <li>
   <a href="#helper-classes">Helper classes</a>
   <ul class="nav">
+    <li><a href="#helper-classes-colors">Contextual colors</a></li>
+    <li><a href="#helper-classes-backgrounds">Contextual backgrounds</a></li>
     <li><a href="#helper-classes-close">Close icon</a></li>
     <li><a href="#helper-classes-carets">Carets</a></li>
     <li><a href="#helper-classes-floats">Quick floats</a></li>
@@ -105,3 +109,11 @@
     <li><a href="#responsive-utilities-tests">Test cases</a></li>
   </ul>
 </li>
+<li>
+  <a href="#less">Using LESS</a>
+  <ul class="nav">
+    <li><a href="#less-variables">Variables</a></li>
+    <li><a href="#less-mixins-vendor">Vendor mixins</a></li>
+    <li><a href="#less-mixins-utility">Utility mixins</a></li>
+  </ul>
+</li>

_includes/nav-getting-started.html

@@ -32,7 +32,19 @@
   </ul>
 </li>
 <li>
-  <a href="#browsers">Browser support</a>
+  <a href="#browsers">Browser and device support</a>
+  <ul class="nav">
+    <li><a href="#support-browsers">Supported browsers</a></li>
+    <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
+    <li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
+    <li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
+    <li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
+    <li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
+    <li><a href="#support-safari-percentages">Safari percent rounding</a></li>
+    <li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
+    <li><a href="#support-browser-zooming">Browser zooming</a></li>
+    <li><a href="#support-android-stock-browser">Android stock browser</a></li>
+  </ul>
 </li>
 <li>
   <a href="#third-parties">Third party support</a>

_includes/nav-javascript.html

@@ -13,6 +13,7 @@
   <a href="#modals">Modal</a>
   <ul class="nav">
     <li><a href="#modals-examples">Examples</a></li>
+    <li><a href="#modals-sizes">Sizes</a></li>
     <li><a href="#modals-usage">Usage</a></li>
   </ul>
 </li>

bower.json

@@ -14,7 +14,6 @@
     "_*",
     "docs-assets",
     "examples",
-    "/fonts",
     "js/tests",
     "CNAME",
     "CONTRIBUTING.md",

customize.html

@@ -182,6 +182,12 @@ base_url: "../"
 
       <div class="col-xs-6 col-sm-4">
         <h3>JavaScript components</h3>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" checked value="component-animations.less">
+            Component animations (for JS)
+          </label>
+        </div>
         <div class="checkbox">
           <label>
             <input type="checkbox" checked value="dropdowns.less">
@@ -226,12 +232,6 @@ base_url: "../"
             Responsive utilities
           </label>
         </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="component-animations.less">
-            Component animations (for JS)
-          </label>
-        </div>
       </div><!-- .col-xs-6 .col-sm-4 -->
     </div><!-- /.row -->
   </div>
@@ -1147,6 +1147,8 @@ base_url: "../"
     <h3>Wells</h3>
     <label>@well-bg</label>
     <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
+    <label>@well-border</label>
+    <input type="text" class="form-control" placeholder="darken(@well-bg, 7%)" data-var="@well-border">
 
 
     <h2 id="variables-accordion">Accordion</h2>
@@ -1247,6 +1249,11 @@ base_url: "../"
         <input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
         <p class="help-block">Modal backdrop background color</p>
       </div>
+      <div class="col-md-4">
+        <label>@modal-backdrop-opacity</label>
+        <input type="text" class="form-control" placeholder=".5" data-var="@modal-backdrop-opacity">
+        <p class="help-block">Modal backdrop opacity</p>
+      </div>
     </div>
 
     <h3>Modal header and footer</h3>

dist/js/bootstrap.js

@@ -982,7 +982,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
   }
 
   Modal.prototype.backdrop = function (callback) {
-    var that    = this
     var animate = this.$element.hasClass('fade') ? 'fade' : ''
 
     if (this.isShown && this.options.backdrop) {

docs-assets/css/docs.css

@@ -672,6 +672,35 @@ h1[id] {
 }
 
 
+/*
+ * Color swatches
+ *
+ * Color swatches and associated values for our grayscale and brand colors.
+ */
+
+.color-swatches {
+  margin: 0 -5px;
+  overflow: hidden; /* clearfix */
+}
+.color-swatch {
+  float: left;
+  width:  100px;
+  height: 100px;
+  margin: 0 5px;
+  border-radius: 3px;
+}
+.color-swatches .gray-darker   { background-color: #222; }
+.color-swatches .gray-dark     { background-color: #333; }
+.color-swatches .gray          { background-color: #555; }
+.color-swatches .gray-light    { background-color: #999; }
+.color-swatches .gray-lighter  { background-color: #eee; }
+.color-swatches .brand-primary { background-color: #428bca; }
+.color-swatches .brand-success { background-color: #5cb85c; }
+.color-swatches .brand-warning { background-color: #f0ad4e; }
+.color-swatches .brand-danger  { background-color: #d9534f; }
+.color-swatches .brand-info    { background-color: #5bc0de; }
+
+
 /*
  * Team members
  *
@@ -805,7 +834,7 @@ h1[id] {
 }
 
 /* Typography */
-.bs-example-type .table .info {
+.bs-example-type .table .type-info {
   color: #999;
   vertical-align: middle;
 }
@@ -825,6 +854,11 @@ h1[id] {
   margin: 0;
 }
 
+/* Contextual background colors */
+.bs-example-bg-classes p {
+  padding: 15px;
+}
+
 /* Images */
 .bs-example > .img-circle,
 .bs-example > .img-rounded,
@@ -1065,6 +1099,7 @@ h1[id] {
   margin-bottom: 10px;
 }
 .responsive-utilities-test span {
+  display: block;
   padding: 15px 10px;
   font-size: 14px;
   font-weight: bold;

examples/blog/blog.css

+/*
+ * Globals
+ */
+
+body {
+  font-family: Georgia, "Times New Roman", Times, serif;
+  color: #555;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  font-weight: normal;
+  color: #333;
+  margin-top: 0;
+}
+
+
+/*
+ * Override Bootstrap's default container.
+ */
+
+@media (min-width: 1200px) {
+  .container {
+    width: 970px;
+  }
+}
+
+
+/*
+ * Masthead for nav
+ */
+
+.blog-masthead {
+  background-color: #428bca;
+  box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
+}
+
+/* Nav links */
+.blog-nav {
+
+}
+.blog-nav-item {
+  position: relative;
+  display: inline-block;
+  padding: 10px;
+  font-weight: 500;
+  color: #cdddeb;
+}
+.blog-nav-item:hover,
+.blog-nav-item:focus {
+  color: #fff;
+  text-decoration: none;
+}
+
+/* Active state gets a caret at the bottom */
+.blog-nav .active {
+  color: #fff;
+}
+.blog-nav .active:after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: block;
+  content: " ";
+  width: 0;
+  height: 0;
+  margin-left: -5px;
+  vertical-align: middle;
+  border-right:  5px solid transparent;
+  border-left:   5px solid transparent;
+  border-bottom: 5px solid;
+}
+
+
+/*
+ * Blog name and description
+ */
+
+.blog-header {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.blog-title {
+  margin-top: 30px;
+  margin-bottom: 0;
+  font-size: 60px;
+  font-weight: normal;
+}
+.blog-description {
+  font-size: 20px;
+  color: #999;
+}
+
+
+/*
+ * Main column and sidebar layout
+ */
+
+.blog-main {
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+/* Sidebar modules for boxing content */
+.sidebar-module {
+  padding: 15px;
+  margin: 0 -15px 15px;
+}
+.sidebar-module-inset {
+  padding: 15px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.sidebar-module-inset p:last-child,
+.sidebar-module-inset ul:last-child,
+.sidebar-module-inset ol:last-child {
+  margin-bottom: 0;
+}
+
+
+
+/* Pagination */
+.pager {
+  margin-bottom: 60px;
+  text-align: left;
+}
+.pager > li > a {
+  width: 140px;
+  padding: 10px 20px;
+  text-align: center;
+  border-radius: 30px;
+}
+
+
+/*
+ * Blog posts
+ */
+
+.blog-post {
+  margin-bottom: 60px;
+}
+.blog-post-title {
+  margin-bottom: 5px;
+  font-size: 40px;
+}
+.blog-post-meta {
+  margin-bottom: 20px;
+  color: #999;
+}
+
+
+/*
+ * Footer
+ */
+
+.blog-footer {
+  padding: 40px 0;
+  color: #999;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-top: 1px solid #e5e5e5;
+}
+

examples/blog/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
+
+    <title>Blog Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="blog.css" rel="stylesheet">
+
+    <!-- Just for debugging purposes. Don't actually copy this line! -->
+    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+
+    <div class="blog-masthead">
+      <div class="container">
+        <nav class="blog-nav">
+          <a class="blog-nav-item active" href="#">Home</a>
+          <a class="blog-nav-item" href="#">New features</a>
+          <a class="blog-nav-item" href="#">Press</a>
+          <a class="blog-nav-item" href="#">New hires</a>
+          <a class="blog-nav-item" href="#">About</a>
+        </nav>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <div class="blog-header">
+        <h1 class="blog-title">The Bootstrap Blog</h1>
+        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
+      </div>
+
+      <div class="row">
+
+        <div class="col-sm-8 blog-main">
+
+          <div class="blog-post">
+            <h2 class="blog-post-title">Sample blog post</h2>
+            <p class="blog-post-meta">December 1, 2013 by <a href="#">Mark</a></p>
+
+            <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
+            <hr>
+            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+            <blockquote>
+              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+            </blockquote>
+            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+            <h2>Heading</h2>
+            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+            <h3>Sub-heading</h3>
+            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+            <pre><code>Example code block</code></pre>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
+            <h3>Sub-heading</h3>
+            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+            <ul>
+              <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
+              <li>Donec id elit non mi porta gravida at eget metus.</li>
+              <li>Nulla vitae elit libero, a pharetra augue.</li>
+            </ul>
+            <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
+            <ol>
+              <li>Vestibulum id ligula porta felis euismod semper.</li>
+              <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
+              <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
+            </ol>
+            <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
+          </div><!-- /.blog-post -->
+
+          <div class="blog-post">
+            <h2 class="blog-post-title">Another blog post</h2>
+            <p class="blog-post-meta">November 23, 2013 by <a href="#">Jacob</a></p>
+
+            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+            <blockquote>
+              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+            </blockquote>
+            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          </div><!-- /.blog-post -->
+
+          <div class="blog-post">
+            <h2 class="blog-post-title">New feature</h2>
+            <p class="blog-post-meta">November 14, 2013 by <a href="#">Chris</a></p>
+
+            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+            <ul>
+              <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
+              <li>Donec id elit non mi porta gravida at eget metus.</li>
+              <li>Nulla vitae elit libero, a pharetra augue.</li>
+            </ul>
+            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+            <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
+          </div><!-- /.blog-post -->
+
+          <ul class="pager">
+            <li><a href="#">Previous</a></li>
+            <li><a href="#">Next</a></li>
+          </ul>
+
+        </div><!-- /.blog-main -->
+
+        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
+          <div class="sidebar-module sidebar-module-inset">
+            <h4>About</h4>
+            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
+          </div>
+          <div class="sidebar-module">
+            <h4>Archives</h4>
+            <ol class="list-unstyled">
+              <li><a href="#">December 2013</a></li>
+              <li><a href="#">November 2013</a></li>
+              <li><a href="#">October 2013</a></li>
+              <li><a href="#">September 2013</a></li>
+              <li><a href="#">August 2013</a></li>
+              <li><a href="#">July 2013</a></li>
+              <li><a href="#">June 2013</a></li>
+              <li><a href="#">May 2013</a></li>
+              <li><a href="#">April 2013</a></li>
+              <li><a href="#">March 2013</a></li>
+              <li><a href="#">February 2013</a></li>
+              <li><a href="#">January 2013</a></li>
+            </ol>
+          </div>
+          <div class="sidebar-module">
+            <h4>Elsewhere</h4>
+            <ol class="list-unstyled">
+              <li><a href="#">GitHub</a></li>
+              <li><a href="#">Twitter</a></li>
+              <li><a href="#">Facebook</a></li>
+            </ol>
+          </div>
+        </div><!-- /.blog-sidebar -->
+
+      </div><!-- /.row -->
+
+    </div><!-- /.container -->
+
+    <div class="blog-footer">
+      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+      <p>
+        <a href="#">Back to top</a>
+      </p>
+    </div>
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+    <script src="../../docs-assets/js/holder.js"></script>
+  </body>
+</html>

examples/non-responsive/index.html

@@ -82,6 +82,10 @@
       <h3>Regarding navbars</h3>
       <p>As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.</p>
 
+      <h3>Browsers, scrolling, and fixed elements</h3>
+      <p>Non-responsive layouts highlight a key drawback to fixed elements. <strong class="text-danger">Any fixed component, such as a fixed navbar, will not be scrollable when the viewport becomes narrower than the page content.</strong> In other words, given the non-responsive container width of 970px and a viewport of 800px, you'll potentially hide 170px of content.</p>
+      <p>There is no way around this as it's default browser behavior. The only solution is a responsive layout or using a non-fixed element.</p>
+
       <h3>Non-responsive grid system</h3>
       <div class="row">
         <div class="col-xs-4">One third</div>

getting-started.html

@@ -277,6 +277,15 @@ bootstrap/
         <h4>Dashboard</h4>
         <p>Basic structure for a admin dashboard with fixed sidebar and navbar.</p>
       </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/blog/">
+          <img src="../examples/screenshots/blog.jpg" alt="">
+        </a>
+        <h4>Blog</h4>
+        <p>Simple two-column blog layout with custom navigation, header, and type.</p>
+      </div>
+      <div class="clearfix visible-xs"></div>
+
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/non-responsive/">
           <img src="../examples/screenshots/non-responsive.jpg" alt="">
@@ -284,8 +293,6 @@ bootstrap/
         <h4>Non-responsive Bootstrap</h4>
         <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
       </div>
-      <div class="clearfix visible-xs"></div>
-
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/theme/">
           <img src="../examples/screenshots/theme.jpg" alt="">
@@ -746,11 +753,11 @@ bootstrap/
   ================================================== -->
   <div class="bs-docs-section">
     <div class="page-header">
-      <h1 id="browsers">Browser support</h1>
+      <h1 id="support">Browser and device support</h1>
     </div>
     <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
 
-    <h3>Supported browsers</h3>
+    <h3 id="support-browsers">Supported browsers</h3>
     <p>Specifically, we support the latest versions of the following:</p>
     <ul>
       <li>Chrome (Mac, Windows, iOS, and Android)</li>
@@ -761,7 +768,7 @@ bootstrap/
     </ul>
     <p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
 
-    <h3>Internet Explorer 8 and 9</h3>
+    <h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
     <p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
     <div class="table-responsive">
       <table class="table table-bordered table-striped">
@@ -804,7 +811,7 @@ bootstrap/
 
     <p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
 
-    <h3>Internet Explorer 8 and Respond.js</h3>
+    <h3 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3>
     <p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
     <h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
     <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
@@ -813,10 +820,10 @@ bootstrap/
     <h4 id="respond-import">Respond.js and <code>@import</code></h4>
     <p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
 
-    <h3>Internet Explorer 8 and box-sizing</h3>
+    <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
     <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
 
-    <h3 id="ie-compat-modes">IE Compatibility modes</h3>
+    <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
     <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
 {% highlight html %}
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -825,7 +832,7 @@ bootstrap/
     <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
     <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
 
-    <h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
+    <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
     <p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
 {% highlight css %}
 @-ms-viewport       { width: device-width; }
@@ -853,7 +860,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
     <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
     <p>As a heads up, we include this in the Bootstrap docs as an example.</p>
 
-    <h3 id="safari-percentages">Safari percent rounding</h3>
+    <h3 id="support-safari-percentages">Safari percent rounding</h3>
     <p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
     <ul>
       <li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
@@ -861,14 +868,30 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
     </ul>
     <p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
 
-    <h3 id="mobile-modals">Modals and mobile devices</h3>
+    <h3 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h3>
     <h4>Overflow and scrolling</h4>
     <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
     <h4>Virtual keyboards</h4>
-    <p>Also, note that if you're using inputs in your modal – iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
+    <p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
 
-    <h3 id="browser-zoom">Browser zooming</h3>
+    <h3 id="support-browser-zoom">Browser zooming</h3>
     <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
+
+    <h3 id="support-android-stock-browser">Android stock browser</h3>
+    <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
+    <h4>Select menus</h4>
+    <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
+{% highlight html %}
+<script>
+var nua = navigator.userAgent;
+var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1);
+if (isAndroid) {
+  $('select.form-control').removeClass('form-control').css('width', '100%');
+}
+</script>
+{% endhighlight %}
+    <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
+
   </div>
 
 

js/.jscs.json

 {
-    "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return"],
+    "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
     "requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
     "disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
     "requireRightStickedOperators": ["!"],

js/modal.js

@@ -149,7 +149,6 @@
   }
 
   Modal.prototype.backdrop = function (callback) {
-    var that    = this
     var animate = this.$element.hasClass('fade') ? 'fade' : ''
 
     if (this.isShown && this.options.backdrop) {

less/button-groups.less

@@ -37,18 +37,17 @@
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
+  margin-left: -5px; // Offset the first child's margin
   &:extend(.clearfix all);
 
-  .btn-group {
+  .btn-group,
+  .input-group {
     float: left;
   }
-  // Space out series of button groups
   > .btn,
-  > .btn-group {
-    + .btn,
-    + .btn-group {
-      margin-left: 5px;
-    }
+  > .btn-group,
+  > .input-group {
+    margin-left: 5px;
   }
 }
 
@@ -188,13 +187,13 @@
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
-.btn-group-vertical > .btn-group:first-child {
+.btn-group-vertical > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
     .border-bottom-radius(0);
   }
 }
-.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
   .border-top-radius(0);
 }
 

less/dropdowns.less

@@ -46,6 +46,8 @@
   background-clip: padding-box;
 
   // Aligns the dropdown menu to right
+  //
+  // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
   &.pull-right {
     right: 0;
     left: auto;
@@ -126,6 +128,25 @@
   }
 }
 
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  left: auto; // Reset the default from `.dropdown-menu`
+  right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
 // Dropdown section headers
 .dropdown-header {
   display: block;
@@ -180,7 +201,12 @@
 @media (min-width: @grid-float-breakpoint) {
   .navbar-right {
     .dropdown-menu {
-      .pull-right > .dropdown-menu();
+      .dropdown-menu-right();
+    }
+    // Necessary for overrides of the default right aligned menu.
+    // Will remove come v4 in all likelihood.
+    .dropdown-menu-left {
+      .dropdown-menu-left();
     }
   }
 }

less/forms.less

@@ -155,6 +155,14 @@ output {
   }
 }
 
+// Special styles for iOS date input
+//
+// In Mobile Safari, date inputs require a pixel line-height that matches the
+// given height of the input.
+input[type="date"] {
+  line-height: @input-height-base;
+}
+
 
 // Form groups
 //
@@ -226,7 +234,12 @@ input[type="checkbox"],
   }
 }
 
+
 // Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+
 .input-sm {
   .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 }
@@ -240,15 +253,35 @@ input[type="checkbox"],
 //
 // Apply contextual and semantic states to individual form controls.
 
-// Warning
+.has-feedback {
+  // Enable absolute positioning
+  position: relative;
+
+  // Ensure icons don't overlap text
+  .form-control {
+    padding-right: (@input-height-base * 1.25);
+  }
+
+  // Feedback icon (requires .glyphicon classes)
+  .form-control-feedback {
+    position: absolute;
+    top: (@line-height-computed + 5); // Height of the `label` and its margin
+    right: 0;
+    display: block;
+    width: @input-height-base;
+    height: @input-height-base;
+    line-height: @input-height-base;
+    text-align: center;
+  }
+}
+
+// Feedback states
 .has-warning {
   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
-// Error
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
-// Success
 .has-success {
   .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
 }
@@ -294,7 +327,7 @@ input[type="checkbox"],
   // Kick in the inline
   @media (min-width: @screen-sm) {
     // Inline-block all the things for "inline"
-    .form-group  {
+    .form-group {
       display: inline-block;
       margin-bottom: 0;
       vertical-align: middle;
@@ -303,12 +336,13 @@ input[type="checkbox"],
     // In navbar-form, allow folks to *not* use `.form-group`
     .form-control {
       display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
       vertical-align: middle;
     }
 
-    // Override `width: 100%;` when not within a `.form-group`
-    select.form-control {
-      width: auto;
+    .control-label {
+      margin-bottom: 0;
+      vertical-align: middle;
     }
 
     // Remove default margin on radios/checkboxes that were used for stacking, and
@@ -327,6 +361,14 @@ input[type="checkbox"],
       float: none;
       margin-left: 0;
     }
+
+    // Validation states
+    //
+    // Reposition the icon because it's now within a grid column and columns have
+    // `position: relative;` on them. Also accounts for the grid gutter padding.
+    .has-feedback .form-control-feedback {
+      top: 0;
+    }
   }
 }
 
@@ -370,4 +412,13 @@ input[type="checkbox"],
       text-align: right;
     }
   }
+
+  // Validation states
+  //
+  // Reposition the icon because it's now within a grid column and columns have
+  // `position: relative;` on them. Also accounts for the grid gutter padding.
+  .has-feedback .form-control-feedback {
+    top: 0;
+    right: (@grid-gutter-width / 2);
+  }
 }

less/glyphicons.less

@@ -28,10 +28,6 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  &:empty {
-    width: 1em;
-  }
 }
 
 // Individual icons

less/grid.less

@@ -10,10 +10,10 @@
 .container {
   .container-fixed();
 
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     width: @container-sm;
   }
-  @media (min-width: @screen-md) {
+  @media (min-width: @screen-md-min) {
     width: @container-md;
   }
   @media (min-width: @screen-lg-min) {

less/input-groups.less

@@ -17,6 +17,11 @@
   }
 
   .form-control {
+    // IE9 fubars the placeholder attribute in text inputs and the arrows on
+    // select elements in input groups. To fix it, we float the input. Details:
+    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+    float: left;
+
     width: 100%;
     margin-bottom: 0;
   }
@@ -112,8 +117,26 @@
 // -------------------------
 .input-group-btn {
   position: relative;
+  // Jankily prevent input button groups from wrapping with `white-space` and
+  // `font-size` in combination with `inline-block` on buttons.
+  font-size: 0;
   white-space: nowrap;
 
+  // Negative margin for spacing, position for bringing hovered/focused/actived
+  // element above the siblings.
+  > .btn {
+    position: relative;
+    + .btn {
+      margin-left: -1px;
+    }
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+
   // Negative margin to only have a 1px border between the two
   &:first-child > .btn {
     margin-right: -1px;
@@ -122,15 +145,3 @@
     margin-left: -1px;
   }
 }
-.input-group-btn > .btn {
-  position: relative;
-  // Jankily prevent input button groups from wrapping
-  + .btn {
-    margin-left: -4px;
-  }
-  // Bring the "active" button to the front
-  &:hover,
-  &:active {
-    z-index: 2;
-  }
-}

less/jumbotron.less

@@ -6,19 +6,17 @@
 .jumbotron {
   padding: @jumbotron-padding;
   margin-bottom: @jumbotron-padding;
-  font-size: @jumbotron-font-size;
-  font-weight: 200;
-  line-height: (@line-height-base * 1.5);
   color: @jumbotron-color;
   background-color: @jumbotron-bg;
 
   h1,
   .h1 {
-    line-height: 1;
     color: @jumbotron-heading-color;
   }
   p {
-    line-height: 1.4;
+    margin-bottom: (@jumbotron-padding / 2);
+    font-size: @jumbotron-font-size;
+    font-weight: 200;
   }
 
   .container & {

less/list-group.less

@@ -79,7 +79,7 @@ a.list-group-item {
       color: inherit;
     }
     .list-group-item-text {
-      color: lighten(@list-group-active-bg, 40%);
+      color: @list-group-active-text-color;
     }
   }
 }

less/mixins.less

@@ -147,17 +147,17 @@
 // Transformations
 .rotate(@degrees) {
   -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees); // IE9+
+      -ms-transform: rotate(@degrees); // IE9 only
           transform: rotate(@degrees);
 }
 .scale(@ratio; @ratio-y...) {
   -webkit-transform: scale(@ratio, @ratio-y);
-      -ms-transform: scale(@ratio, @ratio-y); // IE9+
+      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
           transform: scale(@ratio, @ratio-y);
 }
 .translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y); // IE9+
+      -ms-transform: translate(@x, @y); // IE9 only
           transform: translate(@x, @y);
 }
 .skew(@x; @y) {
@@ -172,12 +172,12 @@
 
 .rotateX(@degrees) {
   -webkit-transform: rotateX(@degrees);
-      -ms-transform: rotateX(@degrees); // IE9+
+      -ms-transform: rotateX(@degrees); // IE9 only
           transform: rotateX(@degrees);
 }
 .rotateY(@degrees) {
   -webkit-transform: rotateY(@degrees);
-      -ms-transform: rotateY(@degrees); // IE9+
+      -ms-transform: rotateY(@degrees); // IE9 only
           transform: rotateY(@degrees);
 }
 .perspective(@perspective) {
@@ -193,6 +193,7 @@
 .transform-origin(@origin) {
   -webkit-transform-origin: @origin;
      -moz-transform-origin: @origin;
+      -ms-transform-origin: @origin; // IE9 only
           transform-origin: @origin;
 }
 
@@ -201,6 +202,30 @@
   -webkit-animation: @animation;
           animation: @animation;
 }
+.animation-name(@name) {
+  -webkit-animation-name: @name;
+          animation-name: @name;
+}
+.animation-duration(@duration) {
+  -webkit-animation-duration: @duration;
+          animation-duration: @duration;
+}
+.animation-timing-function(@timing-function) {
+  -webkit-animation-timing-function: @timing-function;
+          animation-timing-function: @timing-function;
+}
+.animation-delay(@delay) {
+  -webkit-animation-delay: @delay;
+          animation-delay: @delay;
+}
+.animation-iteration-count(@iteration-count) {
+  -webkit-animation-iteration-count: @iteration-count;
+          animation-iteration-count: @iteration-count;
+}
+.animation-direction(@direction) {
+  -webkit-animation-direction: @direction;
+          animation-direction: @direction;
+}
 
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
@@ -353,7 +378,7 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-.img-responsive(@display: block;) {
+.img-responsive(@display: block) {
   display: @display;
   max-width: 100%; // Part 1: Set a maximum relative to the parent
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
@@ -613,30 +638,39 @@
   position: relative;
   float: left;
   width: percentage((@columns / @grid-columns));
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 }
+.make-xs-column-offset(@columns) {
+  @media (min-width: @screen-xs-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-xs-column-push(@columns) {
+  @media (min-width: @screen-xs-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-xs-column-pull(@columns) {
+  @media (min-width: @screen-xs-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
 
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  // Calculate width based on number of columns available
   @media (min-width: @screen-sm-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
-
-// Generate the small column offsets
 .make-sm-column-offset(@columns) {
   @media (min-width: @screen-sm-min) {
     margin-left: percentage((@columns / @grid-columns));
@@ -653,23 +687,19 @@
   }
 }
 
+
 // Generate the medium columns
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  // Calculate width based on number of columns available
   @media (min-width: @screen-md-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
-
-// Generate the medium column offsets
 .make-md-column-offset(@columns) {
   @media (min-width: @screen-md-min) {
     margin-left: percentage((@columns / @grid-columns));
@@ -686,23 +716,19 @@
   }
 }
 
+
 // Generate the large columns
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  // Prevent columns from collapsing when empty
   min-height: 1px;
-  // Inner gutter via padding
   padding-left:  (@gutter / 2);
   padding-right: (@gutter / 2);
 
-  // Calculate width based on number of columns available
   @media (min-width: @screen-lg-min) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
-
-// Generate the large column offsets
 .make-lg-column-offset(@columns) {
   @media (min-width: @screen-lg-min) {
     margin-left: percentage((@columns / @grid-columns));
@@ -825,6 +851,10 @@
     border-color: @border-color;
     background-color: @background-color;
   }
+  // Optional feedack icon
+  .form-control-feedback {
+    color: @text-color;
+  }
 }
 
 // Form control focus state

less/modals.less

@@ -22,7 +22,12 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: @zindex-modal-background;
+  z-index: @zindex-modal;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
@@ -37,7 +42,6 @@
   position: relative;
   width: auto;
   margin: 10px;
-  z-index: (@zindex-modal-background + 10);
 }
 
 // Actual modal
@@ -60,11 +64,11 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: (@zindex-modal-background - 10);
+  z-index: @zindex-modal-background;
   background-color: @modal-backdrop-bg;
   // Fade for backdrop
   &.fade { .opacity(0); }
-  &.in { .opacity(.5); }
+  &.in { .opacity(@modal-backdrop-opacity); }
 }
 
 // Modal header
@@ -116,8 +120,9 @@
 }
 
 // Scale up the modal
-@media screen and (min-width: @screen-sm-min) {
+@media (min-width: @screen-sm-min) {
 
+  // Automatically set modal's width for larger viewports
   .modal-dialog {
     width: 600px;
     margin: 30px auto;
@@ -126,4 +131,8 @@
     .box-shadow(0 5px 15px rgba(0,0,0,.5));
   }
 
+  // Modal sizes
+  .modal-sm { width: @modal-sm; }
+  .modal-lg { width: @modal-lg; }
+
 }

less/navbar.less

@@ -161,6 +161,13 @@
     text-decoration: none;
   }
 
+  // Prevent Glyphicons from increasing height of navbar
+  > .glyphicon {
+    float: left;
+    margin-top: -2px;
+    margin-right: 5px;
+  }
+
   @media (min-width: @grid-float-breakpoint) {
     .navbar > .container &,
     .navbar > .container-fluid & {
@@ -205,7 +212,7 @@
 
 // Navbar nav links
 //
-// Builds on top of the `.nav` components with it's own modifier class to make
+// Builds on top of the `.nav` components with its own modifier class to make
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
@@ -329,13 +336,6 @@
   .border-bottom-radius(0);
 }
 
-// Right aligned menus need alt position
-.navbar-nav.pull-right > li > .dropdown-menu,
-.navbar-nav > li > .dropdown-menu.pull-right {
-  left: auto;
-  right: 0;
-}
-
 
 // Buttons in navbars
 //

less/navs.less

@@ -91,7 +91,7 @@
       }
     }
 
-    // Active state, and it's :hover to override normal :hover
+    // Active state, and its :hover to override normal :hover
     &.active > a {
       &,
       &:hover,

less/pager.less

@@ -15,15 +15,15 @@
     > span {
       display: inline-block;
       padding: 5px 14px;
-      background-color: @pagination-bg;
-      border: 1px solid @pagination-border;
+      background-color: @pager-bg;
+      border: 1px solid @pager-border;
       border-radius: @pager-border-radius;
     }
 
     > a:hover,
     > a:focus {
       text-decoration: none;
-      background-color: @pagination-hover-bg;
+      background-color: @pager-hover-bg;
     }
   }
 
@@ -47,7 +47,7 @@
     > a:focus,
     > span {
       color: @pager-disabled-color;
-      background-color: @pagination-bg;
+      background-color: @pager-bg;
       cursor: not-allowed;
     }
   }

less/panels.less

@@ -14,7 +14,7 @@
 
 // Panel contents
 .panel-body {
-  padding: 15px;
+  padding: @panel-body-padding;
   &:extend(.clearfix all);
 }
 
@@ -95,6 +95,19 @@
     border: 0;
     margin-bottom: 0;
   }
+  > .table-striped,
+  > .table-responsive > .table-striped {
+    > tbody > tr:last-child {
+      td:first-child,
+      th:first-child {
+        border-bottom-left-radius: (@panel-border-radius - 1);
+      }
+      td:last-child,
+      th:last-child {
+        border-bottom-left-radius: (@panel-border-radius - 1);
+      }
+    }
+  }
 }
 
 
@@ -109,7 +122,7 @@
   }
 }
 
-// Within heading, strip any `h*` tag of it's default margins for spacing.
+// Within heading, strip any `h*` tag of its default margins for spacing.
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;

less/responsive-utilities.less

@@ -23,172 +23,51 @@
 
 
 // Visibility utilities
-
 .visible-xs {
   .responsive-invisibility();
+
   @media (max-width: @screen-xs-max) {
     .responsive-visibility();
   }
-  &.visible-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-visibility();
-    }
-  }
 }
 .visible-sm {
   .responsive-invisibility();
-  &.visible-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-visibility();
-    }
-  }
+
   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-visibility();
   }
-  &.visible-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-visibility();
-    }
-  }
 }
 .visible-md {
   .responsive-invisibility();
-  &.visible-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-visibility();
-    }
-  }
+
   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-visibility();
   }
-  &.visible-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-visibility();
-    }
-  }
 }
 .visible-lg {
   .responsive-invisibility();
-  &.visible-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-visibility();
-    }
-  }
-  &.visible-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-visibility();
-    }
-  }
+
   @media (min-width: @screen-lg-min) {
     .responsive-visibility();
   }
 }
 
 .hidden-xs {
-  .responsive-visibility();
   @media (max-width: @screen-xs-max) {
     .responsive-invisibility();
   }
-  &.hidden-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-invisibility();
-    }
-  }
 }
 .hidden-sm {
-  .responsive-visibility();
-  &.hidden-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-invisibility();
-    }
-  }
   @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
     .responsive-invisibility();
   }
-  &.hidden-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-invisibility();
-    }
-  }
 }
 .hidden-md {
-  .responsive-visibility();
-  &.hidden-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-invisibility();
-    }
-  }
   @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .responsive-invisibility();
   }
-  &.hidden-lg {
-    @media (min-width: @screen-lg-min) {
-      .responsive-invisibility();
-    }
-  }
 }
 .hidden-lg {
-  .responsive-visibility();
-  &.hidden-xs {
-    @media (max-width: @screen-xs-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-sm {
-    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-      .responsive-invisibility();
-    }
-  }
-  &.hidden-md {
-    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-      .responsive-invisibility();
-    }
-  }
   @media (min-width: @screen-lg-min) {
     .responsive-invisibility();
   }

less/tooltip.less

@@ -13,7 +13,7 @@
   line-height: 1.4;
   .opacity(0);
 
-  &.in     { .opacity(.9); }
+  &.in     { .opacity(@tooltip-opacity); }
   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
   &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
   &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }

less/type.less

@@ -81,7 +81,13 @@ small,
 // Undo browser default styling
 cite    { font-style: normal; }
 
-// Contextual emphasis
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+
+// Contextual colors
 .text-muted {
   color: @text-muted;
 }
@@ -116,11 +122,42 @@ cite    { font-style: normal; }
   }
 }
 
-// Alignment
-.text-left           { text-align: left; }
-.text-right          { text-align: right; }
-.text-center         { text-align: center; }
-.text-justify        { text-align: justify; }
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+  // Given the contrast here, this is the only class to have its color inverted
+  // automatically.
+  color: #fff;
+  background-color: @brand-primary;
+  a&:hover {
+    background-color: darken(@brand-primary, 10%);
+  }
+}
+.bg-warning {
+  background-color: @state-warning-bg;
+  a&:hover {
+    background-color: darken(@state-warning-bg, 10%);
+  }
+}
+.bg-danger {
+  background-color: @state-danger-bg;
+  a&:hover {
+    background-color: darken(@state-danger-bg, 10%);
+  }
+}
+.bg-success {
+  background-color: @state-success-bg;
+  a&:hover {
+    background-color: darken(@state-success-bg, 10%);
+  }
+}
+.bg-info {
+  background-color: @state-info-bg;
+  a&:hover {
+    background-color: darken(@state-info-bg, 10%);
+  }
+}
 
 
 // Page header
@@ -229,12 +266,14 @@ blockquote {
   border-left: 5px solid @blockquote-border-color;
   p {
     font-size: (@font-size-base * 1.25);
-    font-weight: 300;
-    line-height: 1.25;
   }
   p:last-child {
     margin-bottom: 0;
   }
+
+  // Deprecating small and .small for v3.1
+  // Context: https://github.com/twbs/bootstrap/issues/11660
+  footer,
   small,
   .small {
     display: block;

less/variables.less

@@ -189,6 +189,9 @@
 
 @dropdown-header-color:          @gray-light;
 
+// Note: Deprecated @dropdown-caret-color as of v3.1.0
+@dropdown-caret-color:           #000;
+
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
@@ -363,8 +366,16 @@
 // Pager
 // -------------------------
 
+@pager-bg:                             @pagination-bg;
+@pager-border:                         @pagination-border;
 @pager-border-radius:                  15px;
-@pager-disabled-color:                 @gray-light;
+
+@pager-hover-bg:                       @pagination-hover-bg;
+
+@pager-active-bg:                      @pagination-active-bg;
+@pager-active-color:                   @pagination-active-color;
+
+@pager-disabled-color:                 @pagination-disabled-color;
 
 
 // Jumbotron
@@ -402,6 +413,7 @@
 @tooltip-max-width:           200px;
 @tooltip-color:               #fff;
 @tooltip-bg:                  #000;
+@tooltip-opacity:             .9;
 
 @tooltip-arrow-width:         5px;
 @tooltip-arrow-color:         @tooltip-bg;
@@ -450,9 +462,13 @@
 @modal-content-fallback-border-color:          #999;
 
 @modal-backdrop-bg:           #000;
+@modal-backdrop-opacity:      .5;
 @modal-header-border-color:   #e5e5e5;
 @modal-footer-border-color:   @modal-header-border-color;
 
+@modal-lg:                    900px;
+@modal-sm:                    300px;
+
 
 // Alerts
 // -------------------------
@@ -491,24 +507,26 @@
 
 // List group
 // -------------------------
-@list-group-bg:               #fff;
-@list-group-border:           #ddd;
-@list-group-border-radius:    @border-radius-base;
+@list-group-bg:                 #fff;
+@list-group-border:             #ddd;
+@list-group-border-radius:      @border-radius-base;
 
-@list-group-hover-bg:         #f5f5f5;
-@list-group-active-color:     @component-active-color;
-@list-group-active-bg:        @component-active-bg;
-@list-group-active-border:    @list-group-active-bg;
-
-@list-group-link-color:          #555;
-@list-group-link-heading-color:  #333;
+@list-group-hover-bg:           #f5f5f5;
+@list-group-active-color:       @component-active-color;
+@list-group-active-bg:          @component-active-bg;
+@list-group-active-border:      @list-group-active-bg;
+@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
 
+@list-group-link-color:         #555;
+@list-group-link-heading-color: #333;
 
 // Panels
 // -------------------------
 @panel-bg:                    #fff;
-@panel-inner-border:          #ddd;
+@panel-body-padding:          15px;
 @panel-border-radius:         @border-radius-base;
+
+@panel-inner-border:          #ddd;
 @panel-footer-bg:             #f5f5f5;
 
 @panel-default-text:          @gray-dark;
@@ -550,6 +568,7 @@
 // Wells
 // -------------------------
 @well-bg:                     #f5f5f5;
+@well-border:                 darken(@well-bg, 7%);
 
 
 // Badges

less/wells.less

@@ -9,7 +9,7 @@
   padding: 19px;
   margin-bottom: 20px;
   background-color: @well-bg;
-  border: 1px solid darken(@well-bg, 7%);
+  border: 1px solid @well-border;
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {

package.json

 {
-    "name": "bootstrap"
-  , "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
-  , "version": "3.0.3"
-  , "keywords": ["bootstrap", "css"]
-  , "homepage": "http://getbootstrap.com"
-  , "author": "Twitter, Inc."
-  , "scripts": { "test": "grunt test" }
-  , "repository": {
+  "name": "bootstrap",
+  "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.",
+  "version": "3.0.3",
+  "keywords": ["bootstrap", "css"],
+  "homepage": "http://getbootstrap.com",
+  "author": "Twitter, Inc.",
+  "scripts": { "test": "grunt test" },
+  "repository": {
       "type": "git"
     , "url": "https://github.com/twbs/bootstrap.git"
-  }
-  , "bugs": {
+  },
+  "bugs": {
       "url": "https://github.com/twbs/bootstrap/issues"
-  }
-  , "licenses": [
+  },
+  "licenses": [
     {
-        "type": "Apache-2.0"
-      , "url": "http://www.apache.org/licenses/LICENSE-2.0"
-    }
-  ]
-  , "devDependencies": {
-      "btoa": "~1.1.1"
-    , "grunt": "~0.4.1"
-    , "grunt-banner": "~0.2.0"
-    , "grunt-contrib-clean": "~0.5.0"
-    , "grunt-contrib-concat": "~0.3.0"
-    , "grunt-contrib-connect": "~0.5.0"
-    , "grunt-contrib-copy": "~0.4.1"
-    , "grunt-contrib-csslint": "~0.2.0"
-    , "grunt-contrib-jshint": "~0.7.0"
-    , "grunt-contrib-less": "~0.8.0"
-    , "grunt-contrib-qunit": "~0.3.0"
-    , "grunt-contrib-uglify": "~0.2.4"
-    , "grunt-contrib-watch": "~0.5.3"
-    , "grunt-csscomb": "~1.1.0"
-    , "grunt-html-validation": "~0.1.6"
-    , "grunt-jekyll": "~0.4.0"
-    , "grunt-jscs-checker": "~0.2.5"
-    , "grunt-saucelabs": "~4.1.2"
-    , "grunt-sed": "~0.1.1"
-    , "regexp-quote": "~0.0.0"
-    , "load-grunt-tasks": "~0.2.0"
-  }
-  , "jspm": {
-      "main": "js/bootstrap"
-    , "directories": { "lib": "dist" }
-    , "shim": {
-        "js/bootstrap": {
-            "imports": "jquery"
-          , "exports": "$"
-        }
+      "type": "Apache-2.0",
+      "url": "http://www.apache.org/licenses/LICENSE-2.0"
     }
-    , "buildConfig": { "uglify": true }
+  ],
+  "devDependencies": {
+    "btoa": "~1.1.1",
+    "grunt": "~0.4.1",
+    "grunt-banner": "~0.2.0",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-connect": "~0.5.0",
+    "grunt-contrib-copy": "~0.4.1",
+    "grunt-contrib-csslint": "~0.2.0",
+    "grunt-contrib-jshint": "~0.7.0",
+    "grunt-contrib-less": "~0.8.0",
+    "grunt-contrib-qunit": "~0.3.0",
+    "grunt-contrib-uglify": "~0.2.4",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-csscomb": "~1.1.0",
+    "grunt-html-validation": "~0.1.6",
+    "grunt-jekyll": "~0.4.0",
+    "grunt-jscs-checker": "~0.2.5",
+    "grunt-saucelabs": "~4.1.2",
+    "grunt-sed": "~0.1.1",
+    "load-grunt-tasks": "~0.2.0"
+  },
+  "jspm": {
+    "main": "js/bootstrap",
+    "directories": { "lib": "dist" },
+    "shim": {
+      "js/bootstrap": {
+        "imports": "jquery",
+        "exports": "$"
+      }
+    },
+    "buildConfig": { "uglify": true }
   }
 }

test-infra/node_modules_cache.py

+#!/usr/bin/env python2.7
+from __future__ import absolute_import, unicode_literals, print_function, division
+
+from sys import argv
+from os import environ, stat, remove as _delete_file
+from os.path import isfile, dirname, basename, abspath
+from hashlib import sha256
+from subprocess import check_call as run
+
+from boto.s3.connection import S3Connection
+from boto.s3.key import Key
+from boto.exception import S3ResponseError
+
+
+NEED_TO_UPLOAD_MARKER = '.need-to-upload'
+BYTES_PER_MB = 1024 * 1024
+try:
+    BUCKET_NAME = environ['TWBS_S3_BUCKET']
+except KeyError:
+    raise SystemExit("TWBS_S3_BUCKET environment variable not set!")
+
+
+def _sha256_of_file(filename):
+    hasher = sha256()
+    with open(filename, 'rb') as input_file:
+        hasher.update(input_file.read())
+    file_hash = hasher.hexdigest()
+    print('sha256({}) = {}'.format(filename, file_hash))
+    return file_hash
+
+
+def _delete_file_quietly(filename):
+    try:
+        _delete_file(filename)
+    except (OSError, IOError):
+        pass
+
+
+def _tarball_size(directory):
+    kib = stat(_tarball_filename_for(directory)).st_size // BYTES_PER_MB
+    return "{} MiB".format(kib)
+
+
+def _tarball_filename_for(directory):
+    return abspath('./{}.tar.gz'.format(basename(directory)))
+
+
+def _create_tarball(directory):
+    print("Creating tarball of {}...".format(directory))
+    run(['tar', '-czf', _tarball_filename_for(directory), '-C', dirname(directory), basename(directory)])
+
+
+def _extract_tarball(directory):
+    print("Extracting tarball of {}...".format(directory))
+    run(['tar', '-xzf', _tarball_filename_for(directory), '-C', dirname(directory)])
+
+
+def download(directory):
+    _delete_file_quietly(NEED_TO_UPLOAD_MARKER)
+    try:
+        print("Downloading {} tarball from S3...".format(basename(directory)))
+        key.get_contents_to_filename(_tarball_filename_for(directory))
+    except S3ResponseError as err:
+        open(NEED_TO_UPLOAD_MARKER, 'a').close()
+        print(err)
+        raise SystemExit("Cached {} download failed!".format(basename(directory)))
+    print("Downloaded {}.".format(_tarball_size(directory)))
+    _extract_tarball(directory)
+    print("{} successfully installed from cache.".format(directory))
+
+
+def upload(directory):
+    _create_tarball(directory)
+    print("Uploading {} tarball to S3... ({})".format(basename(directory), _tarball_size(directory)))
+    key.set_contents_from_filename(_tarball_filename_for(directory))
+    print("{} cache successfully updated.".format(directory))
+    _delete_file_quietly(NEED_TO_UPLOAD_MARKER)
+
+
+if __name__ == '__main__':
+    # Uses environment variables:
+    #   AWS_ACCESS_KEY_ID - AWS Access Key ID
+    #   AWS_SECRET_ACCESS_KEY - AWS Secret Access Key
+    argv.pop(0)
+    if len(argv) != 3:
+        raise SystemExit("USAGE: node_modules_cache.py <download | upload> <dependencies file> <directory>")
+    mode, dependencies_file, directory = argv
+
+    conn = S3Connection()
+    bucket = conn.lookup(BUCKET_NAME)
+    if bucket is None:
+        raise SystemExit("Could not access bucket!")
+
+    dependencies_file_hash = _sha256_of_file(dependencies_file)
+
+    key = Key(bucket, dependencies_file_hash)
+    key.storage_class = 'REDUCED_REDUNDANCY'
+
+    if mode == 'download':
+        download(directory)
+    elif mode == 'upload':
+        if isfile(NEED_TO_UPLOAD_MARKER):  # FIXME
+            upload(directory)
+        else:
+            print("No need to upload anything.")
+    else:
+        raise SystemExit("Unrecognized mode {!r}".format(mode))

test-infra/requirements.txt

+boto==2.20.0