Merge pull request #11050 from twbs/restore_grid_mixins

Restore grid mixins

_includes/header.html

@@ -13,7 +13,7 @@
 </title>
 
 <!-- Bootstrap core CSS -->
-<link href="{{ page.base_url }}dist/css/bootstrap.css" rel="stylesheet">
+<link href="{{ page.base_url }}dist/css/bootstrap.min.css" rel="stylesheet">
 
 <!-- Documentation extras -->
 <link href="{{ page.base_url }}docs-assets/css/docs.css" rel="stylesheet">

customize.html

@@ -509,14 +509,11 @@ base_url: "../"
     </div>
 
     <div class="row">
-<!--
-  Temporarily removed until mixins are restored in v3.1
       <div class="col-xs-6 col-sm-4">
         <label>@grid-columns</label>
         <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
         <p class="help-block">Number of columns in the grid.</p>
       </div>
- -->
       <div class="col-xs-6 col-sm-4">
         <label>@grid-gutter-width</label>
         <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">

docs-assets/css/docs.css

@@ -400,6 +400,12 @@ body {
   .bs-docs-home .bs-masthead-links {
     margin-left: 350px;
   }
+  .bs-docs-home .bs-social {
+    margin-bottom: 10px;
+  }
+  .bs-docs-home .bs-masthead-links {
+    margin-top: 10px;
+  }
 }
 @media (min-width: 992px) {
   .bs-docs-home .carbonad {

less/mixins.less

@@ -565,6 +565,7 @@
   td& { display: none !important; }
 }
 
+
 // Grid System
 // -----------
 
@@ -696,6 +697,80 @@
 }
 
 
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `@grid-columns`.
+
+.make-grid-columns() {
+  // Common styles for all sizes of grid columns, widths 1-12
+  .col(@index) when (@index = 1) { // initial
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    .col(@index + 1, @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    .col(@index + 1, ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      // Inner gutter via padding
+      padding-left:  (@grid-gutter-width / 2);
+      padding-right: (@grid-gutter-width / 2);
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.make-grid-columns-float(@class) {
+  .col(@index) when (@index = 1) { // initial
+    @item: ~".col-@{class}-@{index}";
+    .col(@index + 1, @item);
+  }
+  .col(@index, @list) when (@index < @grid-columns) { // general
+    @item: ~".col-@{class}-@{index}";
+    .col(@index + 1, ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index = @grid-columns) { // terminal
+    @{list} {
+      float: left;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.calc-grid(@index, @class, @type) when (@type = width) {
+  .col-@{class}-@{index} {
+    width: percentage((@index / @grid-columns));
+  }
+}
+.calc-grid(@index, @class, @type) when (@type = push) {
+  .col-@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+}
+.calc-grid(@index, @class, @type) when (@type = pull) {
+  .col-@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+}
+.calc-grid(@index, @class, @type) when (@type = offset) {
+  .col-@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+}
+
+// Basic looping in LESS
+.make-grid(@index, @class, @type) when (@index > 0) {
+  .calc-grid(@index, @class, @type);
+  // next iteration
+  .make-grid(@index - 1, @class, @type);
+}
+
+
 // Form validation states
 //
 // Used in forms.less to generate the form validation CSS for warnings, errors,