Add small grid for phones and tablets

5 files changed, 105 insertions, 6 deletions

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index f9670a0d8..fa20d9e98 100644
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -18,6 +18,7 @@
         <li><a href="#grid-offsetting">Offset columns</a></li>
         <li><a href="#grid-nesting">Nested columns</a></li>
         <li><a href="#grid-column-ordering">Column ordering</a></li>
+        <li><a href="#grid-small">Small device grid</a></li>
         <li><a href="#grid-less">LESS mixins and variables</a></li>
       </ul>
     </li>
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 44978573e..b4b499e8f 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -782,13 +782,66 @@ pre code {
   margin-left: -15px;
 }
 
-[class*="col-span-"] {
+[class*="col-span-"],
+[class*="col-small-"] {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 
+[class*="col-small-"] {
+  float: left;
+}
+
+.col-small-span-12 {
+  width: 100%;
+}
+
+.col-small-span-11 {
+  width: 91.66666666666666%;
+}
+
+.col-small-span-10 {
+  width: 83.33333333333334%;
+}
+
+.col-small-span-9 {
+  width: 75%;
+}
+
+.col-small-span-8 {
+  width: 66.66666666666666%;
+}
+
+.col-small-span-7 {
+  width: 58.333333333333336%;
+}
+
+.col-small-span-6 {
+  width: 50%;
+}
+
+.col-small-span-5 {
+  width: 41.66666666666667%;
+}
+
+.col-small-span-4 {
+  width: 33.33333333333333%;
+}
+
+.col-small-span-3 {
+  width: 25%;
+}
+
+.col-small-span-2 {
+  width: 16.666666666666664%;
+}
+
+.col-small-span-1 {
+  width: 8.333333333333332%;
+}
+
 @media screen and (min-width: 768px) {
   .container {
     max-width: 728px;
@@ -5161,6 +5214,8 @@ a.list-group-item.active > .badge,
     font-size: 30px;
   }
   .carousel-caption {
+    right: 20%;
+    left: 20%;
     padding-bottom: 30px;
   }
 }
diff --git a/docs/docs.html b/docs/docs.html
index 517b81cfa..73c81ff40 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -321,6 +321,8 @@ title: Bootstrap Documentation
     <p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
   </div>
 
+
+
   <!-- Grid system
   ================================================== -->
   <div class="bs-docs-section" id="grid">
@@ -438,15 +440,30 @@ title: Bootstrap Documentation
 
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
+    <div class="row show-grid">
+      <div class="col-span-9 col-push-3">9</div>
+      <div class="col-span-3 col-pull-9">3</div>
+    </div>
+
+{% highlight html linenos %}
 <div class="row show-grid">
   <div class="col-span-9 col-push-3">9</div>
   <div class="col-span-3 col-pull-9">3</div>
 </div>
+{% endhighlight %}
 
+    <h3 id="grid-small">Small device grid</h3>
+    <p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
+    <div class="row show-grid">
+      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+      <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+      <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
+    </div>
 {% highlight html linenos %}
-<div class="row show-grid">
-  <div class="col-span-9 col-push-3">9</div>
-  <div class="col-span-3 col-pull-9">3</div>
+<div class="row">
+  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+  <div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
+  <div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
 </div>
 {% endhighlight %}
 
diff --git a/less/grid.less b/less/grid.less
index 1de1b15f6..8162d9940 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -12,20 +12,28 @@
 .row {
   .make-row();
 }
-[class*="col-span-"] {
+[class*="col-span-"],
+[class*="col-small-"] {
   position: relative;
   min-height: 1px;
   padding-left:  (@grid-gutter-width / 2);
   padding-right: (@grid-gutter-width / 2);
 }
 
+[class*="col-small-"] {
+  float: left;
+}
+.generate-small-grid-columns(@grid-columns);
+
 // Responsive: Tablets and up
 @media screen and (min-width: 768px) {
   .container {
     max-width: 728px;
   }
   // Generate the grid columns and offsets
-  [class*="col-span-"] { float: left; }
+  [class*="col-span-"] {
+    float: left;
+  }
   .generate-grid-columns(@grid-columns);
 }
 
diff --git a/less/mixins.less b/less/mixins.less
index e57e83a12..76c40df2d 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -501,6 +501,24 @@
   .col-pull-X(@grid-columns);
 }
 
+// Small device grid
+.generate-small-grid-columns(@grid-columns) {
+
+  // Deterimine the classes
+  .col-small-span-X (@index) when (@index > 0) {
+    .col-small-span-@{index} { .col-small-span-(@index); }
+    .col-small-span-X((@index - 1));
+  }
+  .col-small-span-X(0) {}
+
+  // Specify widths
+  .col-small-span-(@columns) {
+    width: percentage((@columns / @grid-columns));
+  }
+
+  // Generate the CSS
+  .col-small-span-X(@grid-columns);
+}
 
 
 // Framework mixins