Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

Conflicts:
	_layouts/customize.html

1 files changed, 68 insertions, 17 deletions

diff --git a/css.html b/css.html
index 6c760dd03..665d8cfbf 100644
--- a/css.html
+++ b/css.html
@@ -388,26 +388,36 @@ base_url: "../"
     <p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
 {% highlight css %}
 // Creates a wrapper for a series of columns
-.make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
+.make-row(@gutter: @grid-gutter-width) {
   // Then clear the floated columns
   .clearfix();
+
+  @media (min-width: @screen-small) {
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
+  }
+
+  // Negative margin nested rows out to align the content of columns
+  .row {
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
+  }
 }
 
 // Generate the columns
-.make-column(@columns) {
+.make-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: @grid-float-breakpoint) {
     float: left;
-    // Calculate width based on number of columns available
-    width: percentage(@columns / @grid-columns);
+    width: percentage((@columns / @grid-columns));
   }
-  // Prevent columns from collapsing when empty
-  min-height: 1px;
-  // Set inner padding as gutters instead of margin
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
 }
 
 // Generate the column offsets
@@ -416,6 +426,33 @@ base_url: "../"
     margin-left: percentage((@columns / @grid-columns));
   }
 }
+.make-column-push(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-column-pull(@columns) {
+  @media (min-width: @grid-float-breakpoint) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the small columns
+.make-small-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  float: left;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+  @max-width: (@grid-float-breakpoint - 1);
+
+  // Calculate width based on number of columns available
+  @media (max-width: @max-width) {
+    width: percentage((@columns / @grid-columns));
+  }
+}
 {% endhighlight %}
 
     <h4>Example usage</h4>
@@ -1257,15 +1294,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
-    <h3 id="forms-inline">Inline form</h2>
+    <h3 id="forms-inline">Inline form</h3>
     <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
     <div class="bs-callout bs-callout-danger">
       <h4>Requires custom widths</h4>
       <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
     </div>
+    <div class="bs-callout bs-callout-danger">
+      <h4>Always add labels</h4>
+      <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
+    </div>
     <form class="bs-example form-inline">
-      <input type="text" class="form-control" placeholder="Email">
-      <input type="password" class="form-control" placeholder="Password">
+      <label class="sr-only" for="exampleInputEmail">Email address</label>
+      <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
+      <label class="sr-only" for="exampleInputPassword">Password</label>
+      <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1275,8 +1318,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form><!-- /example -->
 {% highlight html %}
 <form class="form-inline">
-  <input type="text" class="form-control" placeholder="Email">
-  <input type="password" class="form-control" placeholder="Password">
+  <label class="sr-only" for="exampleInputEmail">Email address</label>
+  <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
+  <label class="sr-only" for="exampleInputPassword">Password</label>
+  <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me
@@ -1949,6 +1994,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   .clearfix();
 }
 {% endhighlight %}
+
+    <h3>.sr-only</h3>
+    <p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
+{% highlight html %}
+<a class="sr-only" href="#content">Skip to content</a>
+{% endhighlight %}
   </div>
 
   <!-- Responsive utilities