Add grid breakpoint for 480px

This is the col-ms purposal in twbs#10203 for v3.3.1
sergio91pt · Jan 19, 2015 · fe2580a · fe2580a · KevinDuganJr · Feb 22, 2015
1 parent 9a7e365
commit fe2580a
Show file tree

Hide file tree

Showing 11 changed files with 289 additions and 17 deletions.
diff --git a/dist/css/bootstrap-theme.css b/dist/css/bootstrap-theme.css
diff --git a/dist/css/bootstrap-theme.min.css b/dist/css/bootstrap-theme.min.css
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
diff --git a/dist/css/bootstrap.css.map b/dist/css/bootstrap.css.map
diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/dist/js/bootstrap.js b/dist/js/bootstrap.js
@@ -1,6 +1,6 @@
 /*!
  * Bootstrap v3.3.1 (http://getbootstrap.com)
- * Copyright 2011-2014 Twitter, Inc.
+ * Copyright 2011-2015 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 

diff --git a/dist/js/bootstrap.min.js b/dist/js/bootstrap.min.js
diff --git a/less/grid.less b/less/grid.less
@@ -55,6 +55,15 @@
 
 .make-grid(xs);
 
+// Mid small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@media (min-width: @screen-ms-min) {
+  .make-grid(ms);
+}
+
 
 // Small grid
 //

diff --git a/less/mixins/grid.less b/less/mixins/grid.less
@@ -37,6 +37,34 @@
   right: percentage((@columns / @grid-columns));
 }
 
+// Generate the mid small columns
+.make-ms-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-ms-min) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-ms-column-offset(@columns) {
+  @media (min-width: @screen-ms-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-ms-column-push(@columns) {
+  @media (min-width: @screen-ms-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-ms-column-pull(@columns) {
+  @media (min-width: @screen-ms-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;