Merge pull request #20372 from twbs/v4-flexbox-docs

v4: Enable flexbox CSS on flexbox grid page

Gruntfile.js

@@ -184,8 +184,15 @@ module.exports = function (grunt) {
         ]
       },
       docs: {
-        src: 'docs/assets/css/docs.min.css',
-        dest: 'docs/assets/css/docs.min.css'
+        files: [
+          {
+            expand: true,
+            cwd: 'docs/assets/css',
+            src: ['*.css', '!*.min.css'],
+            dest: 'docs/assets/css',
+            ext: '.min.css'
+          }
+        ]
       }
     },
 

docs/_includes/header.html

@@ -15,6 +15,9 @@
 <!-- Bootstrap core CSS -->
 {% if site.github %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
+  {% if page.title == "Flexbox grid system" %}
+    <link href="{{ site.baseurl }}/assets/css/docs-flexbox.min.css" rel="stylesheet">
+  {% endif %}
 {% else %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
 {% endif %}

docs/assets/scss/flex-grid.scss

@@ -0,0 +1,24 @@
+// Bootstrap flexbox grid for our docs page
+
+
+//
+// Variables
+//
+
+@import "custom";
+@import "variables";
+
+// Override for flexbox mode
+$enable-flex: true;
+
+
+//
+// Grid mixins
+//
+
+@import "mixins/clearfix";
+@import "mixins/breakpoints";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+
+@import "grid";

docs/layout/flexbox-grid.md

@@ -9,7 +9,7 @@ Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-
 Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
 
 {% callout warning %}
-**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled.
+**Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development.
 {% endcallout %}
 
 ## Contents

grunt/bs-sass-compile/libsass.js

@@ -25,7 +25,8 @@ module.exports = function configureLibsass(grunt) {
       },
       docs: {
         files: {
-          'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
+          'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss',
+          'docs/assets/css/docs-flexbox.min.css': 'docs/assets/scss/flex-grid.scss'
         }
       }
     }

grunt/bs-sass-compile/sass.js

@@ -29,7 +29,8 @@ module.exports = function configureRubySass(grunt) {
       docs: {
         options: options,
         files: {
-          'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
+          'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss',
+          'docs/assets/css/docs-flexbox.min.css': 'docs/assets/scss/flex-grid.scss'
         }
       }
     }

scss/bootstrap-grid.scss

@@ -8,53 +8,13 @@
 // Variables
 //
 
-
-// Grid breakpoints
-//
-// Define the minimum and maximum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 544px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 992px,
-  // Extra large screen / wide desktop
-  xl: 1200px
-) !default;
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
-  sm: 576px,
-  md: 720px,
-  lg: 940px,
-  xl: 1140px
-) !default;
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns:               12 !default;
-$grid-gutter-width:          1.875rem !default; // 30px
-
+@import "custom";
+@import "variables";
 
 //
 // Grid mixins
 //
 
-@import "custom";
-@import "variables";
-
 @import "mixins/clearfix";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";