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)

2 files changed, 4 insertions, 2 deletions

diff --git a/grunt/bs-sass-compile/libsass.js b/grunt/bs-sass-compile/libsass.js
index 271aac881..79b21c5a1 100644
--- 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 3a7d4a710..6e32691c0 100644
--- 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'
         }
       }
     }