Compile examples CSS with Sass using BS variables and mixins

Gruntfile.js

@@ -209,11 +209,16 @@ module.exports = function (grunt) {
     // CSS build configuration
     scsslint: {
       options: {
-        bundleExec: true,
-        config: 'scss/.scss-lint.yml',
-        reporterOutput: null
+          bundleExec: true,
+          config: 'scss/.scss-lint.yml',
+          reporterOutput: null
+        },
+      core: {
+        src: ['scss/*.scss', '!scss/_normalize.scss']
       },
-      src: ['scss/*.scss', '!scss/_normalize.scss']
+      examples: {
+        src: ['docs/assets/scss/examples/**/*.scss']
+      }
     },
 
     postcss: {
@@ -470,7 +475,7 @@ module.exports = function (grunt) {
     require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
   })(process.env.TWBS_SASS || 'libsass');
   // grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
-  grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
+  grunt.registerTask('sass-compile', ['sass:core', 'sass:docs', 'sass:examples']);
 
   grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
 

docs/assets/scss/examples/album/album.scss

@@ -0,0 +1,89 @@
+// Load Bootstrap variables and mixins
+@import "../../../../../scss/variables";
+@import "../../../../../scss/mixins";
+
+body {
+  min-height: 75rem; /* Can be removed; just added for demo purposes */
+}
+
+.navbar {
+  margin-bottom: 0;
+}
+
+.navbar-collapse .container-fluid {
+  padding: 2rem 2.5rem;
+  border-bottom: 1px solid #55595c;
+}
+
+.navbar-collapse h4 {
+  color: #818a91;
+}
+
+.navbar-collapse .text-muted {
+  color: #818a91;
+}
+
+.about {
+  float: left;
+  max-width: 30rem;
+  margin-right: 3rem;
+}
+
+.social a {
+  font-weight: 500;
+  color: #eceeef;
+}
+.social a:hover {
+  color: #fff;
+}
+
+.jumbotron {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+
+.jumbotron p:last-child {
+  margin-bottom: 0;
+}
+
+.jumbotron-heading {
+  font-weight: 300;
+}
+
+.jumbotron .container {
+  max-width: 40rem;
+}
+
+.album {
+  min-height: 50rem; /* Can be removed; just added for demo purposes */
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  background-color: #f7f7f7;
+}
+
+.card {
+  float: left;
+  width: 33.333%;
+  padding: .75rem;
+  margin-bottom: 2rem;
+  border: 0;
+}
+
+.card > img {
+  margin-bottom: .75rem;
+}
+
+.card-text {
+  font-size: 85%;
+}
+
+footer {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  p {
+    margin-bottom: .25rem;
+  }
+}

docs/assets/scss/examples/dashboard/dashboard.scss

@@ -0,0 +1,174 @@
+// Load Bootstrap variables and mixins
+@import "../../../../../scss/variables";
+@import "../../../../../scss/mixins";
+
+/*
+ * Base structure
+ */
+
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+}
+
+/*
+ * Global add-ons
+ */
+
+.sub-header {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+/*
+ * Top navigation
+ * Hide default border to remove 1px line.
+ */
+.navbar-fixed-top {
+  border: 0;
+}
+
+/*
+ * Sidebar
+ */
+
+/* Hide for mobile, show later */
+.sidebar {
+  display: none;
+}
+
+@include media-breakpoint-up(sm) {
+
+  .sidebar {
+    display: block;
+    @if $enable-flex { /* fix for https://github.com/twbs/bootstrap/pull/17756 */
+      max-width: calc(100% * (3/12));
+    }  
+  }
+  @if $enable-flex { /* fix for https://github.com/twbs/bootstrap/pull/17756 */
+    .main {
+      max-width: calc(100% * (9/12));
+    }
+  }
+
+  .nav-sidebar {
+    position: fixed;
+    top: 51px;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    @if $enable-flex {
+      width: calc(100% * (3/12)); /* see http://stackoverflow.com/questions/34344623/fixed-position-element-inheriting-width-of-flex-item */
+    } @else {
+      width: inherit;
+    }
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    background-color: #f5f5f5;
+    border-right: 1px solid #eee;
+  }
+}
+@if $enable-flex { /* fixes for https://github.com/twbs/bootstrap/pull/17756 */
+  @include media-breakpoint-up(sm) {
+    .sidebar {
+      max-width: calc(100% * (2/12));
+    }
+    .main {
+      max-width: calc(100% * (10/12));
+    }
+    .nav-sidebar {
+      width: calc(100% * (2/12)); /* see http://stackoverflow.com/questions/34344623/fixed-position-element-inheriting-width-of-flex-item */
+    }
+  }
+}
+
+/* Main navigation */
+
+.navbar .nav {
+  padding-left: 20px;
+}
+
+/* Sidebar navigation */
+.nav-sidebar .nav {
+  padding-right: 20px;
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+
+.nav-pills .nav-link {
+  margin-right: -20px;
+  margin-left: -20px;
+  border-radius: 0;
+}
+
+.nav-pills {
+  .nav-link {
+    @inlude hover-focus {
+      background-color: #eee;
+    }
+  }
+
+  .nav-link.active {
+    @include plain-hover-focus{
+      color: #fff;
+      background-color: #428bca;
+    }
+  }
+
+}
+
+.nav-stacked .nav-item + .nav-item {
+  margin: 0;
+}
+
+/*
+ * Main content
+ */
+
+.main {
+  padding: 20px;
+}
+@include media-breakpoint-up(sm) {
+  .main {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+}
+.main .page-header {
+  margin-top: 0;
+}
+
+/*
+ * Placeholder dashboard ideas
+ */
+.placeholders {
+  margin-bottom: 30px;
+  text-align: center;
+}
+.placeholders h4 {
+  margin-bottom: 0;
+}
+.placeholder {
+  margin-bottom: 20px;
+}
+.placeholder img {
+  display: inline-block;
+  border-radius: 50%;
+}
+
+@if $enable-flex {
+  /* fixes for https://github.com/twbs/bootstrap/pull/17756 */
+  @include media-breakpoint-down(sm) {
+    .col-sm-9 {
+      max-width: 100%;
+    }
+  }
+  @include media-breakpoint-up(sm) {
+    .col-sm-3.placeholder {
+      max-width: 25%;
+    }
+  }
+  .col-xs-6.placeholder {
+    max-width: 50%;
+  }
+}