Enable flexbox grid CSS on our docs page

- Creates new flexbox grid Sass file in our docs assets
- Updates the Gruntfile to compile said new Sass file and minify the output
- Update notice on flexbox docs page for how it works
- Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features)

diff --git a/Gruntfile.js b/Gruntfile.js
index 0deece20ce61f00c1dc12a27de20380b3d26a7fa..fd729a4f7174589e426a95f73fd173d646ad5bd9 100644 (file)
--- a/Gruntfile.js
+++ b/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'
+          }
+        ]
       }
     },
 

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 51b3cda8bf95996cdcdd5dd135947b98b783bc23..3fc75c0583023cd185cb796e5e448cdf9cef46d0 100644 (file)
--- a/docs/_includes/header.html
+++ b/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 %}

diff --git a/docs/assets/scss/flex-grid.scss b/docs/assets/scss/flex-grid.scss
new file mode 100644 (file)
index 0000000..7d0d9f4
--- /dev/null
+++ b/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";

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 6d372a96c47326e7fac2d28db40afb1b14dd47dd..ea4fad28bd27efd1260123cc1c8f52cfaa1d2ac0 100644 (file)
--- a/docs/layout/flexbox-grid.md
+++ b/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

diff --git a/grunt/bs-sass-compile/libsass.js b/grunt/bs-sass-compile/libsass.js
index 271aac881c74154a57be6ddf979f91088d6505c0..79b21c5a1a2723de184ab7363621250db245cdea 100644 (file)
--- a/grunt/bs-sass-compile/libsass.js
+++ b/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'
         }
       }
     }

diff --git a/grunt/bs-sass-compile/sass.js b/grunt/bs-sass-compile/sass.js
index 3a7d4a7100535d13d2a0d7ab60927fa3212df71b..6e32691c0eea72fe675f62b749d2bfb8324d43fe 100644 (file)
--- a/grunt/bs-sass-compile/sass.js
+++ b/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'
         }
       }
     }

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 5dc331eb6820c53533e585b895c24f81ca58f9fe..40680ca96576ddff0970b283376d83d0bf1364ea 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/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";