Merge pull request #3 from twbs/v4_grid

Add new grid tier
twbs · Dec 5, 2014 · a4e991c · a4e991c
2 parents 8454382 + bc3a2f6
commit a4e991c
Show file tree

Hide file tree

Showing 11 changed files with 680 additions and 102 deletions.
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/docs/dist/css/bootstrap.css b/docs/dist/css/bootstrap.css
diff --git a/docs/dist/css/bootstrap.css.map b/docs/dist/css/bootstrap.css.map
diff --git a/docs/dist/css/bootstrap.min.css b/docs/dist/css/bootstrap.min.css
diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
@@ -28,6 +28,39 @@ <h1>Bootstrap grid examples</h1>
         <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
       </div>
 
+      <h3>Five grid tiers</h3>
+      <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
+
+<div class="row">
+  <div class="col-xs-4">.col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
+</div>
+
+<div class="row">
+  <div class="col-sm-4">.col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
+</div>
+
+<div class="row">
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+</div>
+
+<div class="row">
+  <div class="col-lg-4">.col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
+</div>
+
+<div class="row">
+  <div class="col-xl-4">.col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
+</div>
+
       <h3>Three equal columns</h3>
       <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
       <div class="row">

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
@@ -3,7 +3,12 @@ layout: page
 title: Grid system
 ---
 
-Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes [predefined classes](#grid-example-basic) for easy layout options, as well as powerful [mixins for generating more semantic layouts](#grid-semantic).
+Bootstrap includes a powerful grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and features multiple tiers for different device sizes. Put it to work with our predefined classes or semantic mixins. Plus, it's mobile-first!
+
+### Quick start
+
+- Example grid class
+- Example mixins
 
 ### Introduction
 

diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -82,3 +82,12 @@
 @include media-lg {
   @include make-grid(lg);
 }
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@include media-lg {
+  @include make-grid(xl);
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -272,16 +272,20 @@ $zindex-modal:             1040;
 //
 //## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
 
-// Large screen / wide desktop
-$screen-lg-min:              75em;
+// Extra large screen / wide desktop
+$screen-xl-min:              75em;
 
-// Medium screen / desktop
-$screen-md-min:              62em;
+// Large screen / desktop
+$screen-lg-max:              ($screen-xl-min - .1);
+$screen-lg-min:              62em;
+
+// Medium screen / tablet
 $screen-md-max:              ($screen-lg-min - .1);
+$screen-md-min:              48em;
 
-// Small screen / tablet
-$screen-sm-min:              48em;
+// Small screen / phone
 $screen-sm-max:              ($screen-md-min - .1);
+$screen-sm-min:              34em;
 
 // Extra small screen / phone
 $screen-xs-max:              ($screen-sm-min - .1);
@@ -306,14 +310,17 @@ $grid-float-breakpoint-max:  ($grid-float-breakpoint - 1);
 //
 //## Define the maximum width of `.container` for different screen sizes.
 
+//** For `$screen-xs-min` and up.
+$container-sm:               34em; // 480
+
 //** For `$screen-sm-min` and up.
-$container-sm:               45rem; // 720
+$container-md:               45rem; // 720
 
 //** For `$screen-md-min` and up.
-$container-md:               60rem; // 960
+$container-lg:               60rem; // 960
 
 //** For `$screen-lg-min` and up.
-$container-lg:               72.25rem; // 1140
+$container-xl:               72.25rem; // 1140
 
 
 //== Navbar

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
@@ -4,9 +4,9 @@
 // any value of `$grid-columns`.
 
 // [converter] This is defined recursively in LESS, but Sass supports real loops
-@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
   @for $i from (1 + 1) through $grid-columns {
-    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
   }
   #{$list} {
     position: relative;