Subdivide xs range into xs-A and xs-B. This change is fully backwards…

… compatible. See twbs#10203 (comment)
donquixote · Mar 2, 2014 · 85eb205 · 85eb205
1 parent a365d86
commit 85eb205
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/less/grid.less b/less/grid.less
@@ -55,6 +55,12 @@
 
 .make-grid(xs);
 
+// Smaller grid
+// See https://github.com/twbs/bootstrap/issues/10203
+
+@media (min-width: @screen-xs-B-min) {
+  .make-grid(xs-B);
+}
 
 // Small grid
 //

diff --git a/less/variables.less b/less/variables.less
@@ -258,10 +258,16 @@
 
 // Extra small screen / phone
 // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
+// Note: xs does not really have a min-width, or the min-width would be 0.
+// The variable of 480px is bogus in this context.
 @screen-xs:                  480px;
 @screen-xs-min:              @screen-xs;
 @screen-phone:               @screen-xs-min;
 
+// Subdivision of the xs range into xs-A and xs-B.
+@screen-xs-A-min:            0px;
+@screen-xs-B-min:            480px;
+
 // Small screen / tablet
 // Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
 @screen-sm:                  768px;
@@ -285,6 +291,10 @@
 @screen-sm-max:              (@screen-md-min - 1);
 @screen-md-max:              (@screen-lg-min - 1);
 
+// Maximum width for subdivisions
+@screen-xs-A-max:            (@screen-xs-B-min - 1);
+@screen-xs-B-max:            @screen-xs-max;
+
 
 //== Grid system
 //