docs: improvements

_config.yml

@@ -42,14 +42,14 @@ download:
 
 blog:             https://blog.getbootstrap.com
 expo:             https://expo.getbootstrap.com
-themes:           https://themes.getbootstrap.com
+mkp:              https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385
-jobs:             https://jobs.getbootstrap.com
+mdp:              https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385
 
 cdn:
   # See https://www.srihash.org for info on how to generate the hashes
-  css:            https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
+  css:            https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap-material-design.min.css
   css_hash:       "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
-  js:             https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js
+  js:             https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap-material-design.min.js
   js_hash:        "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
   jquery:         https://code.jquery.com/jquery-3.2.1.slim.min.js
   jquery_hash:    "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

_includes/docs-navbar.html

@@ -15,16 +15,10 @@
         <a class="nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+        <a class="nav-link" href="{{ site.mdp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="{{ site.jobs }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
+        <a class="nav-link" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
       </li>
     </ul>
   </div>

_includes/scripts.html

@@ -4,7 +4,7 @@
 <script src="{{ site.baseurl }}/assets/js/vendor/popper.min.js"></script>
 
 {% if site.github %}
-  <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
+  <script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.min.js"></script>
 {% else %}
   <script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.js"></script>
 {% endif %}

assets/img/MD4B.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="475px" height="421px" viewBox="0 0 475 421" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
+    <title>Untitled</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="171.285341 147.434439 436.724395 240.057155 303.714659 358.923161 38.2756053 266.300446"></polygon>
+        <filter x="-14.8%" y="-16.5%" width="129.6%" height="155.8%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="14" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="14" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.26 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <polygon id="path-3" points="171.009735 83.2812324 436.448789 173.674869 303.439054 289.680218 38 199.286582"></polygon>
+        <filter x="-10.3%" y="-12.1%" width="120.6%" height="139.7%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.106091486 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0918817935 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <polygon id="path-5" points="171.009735 6.84374714 436.448789 98.303243 303.439054 215.676448 38 124.216952"></polygon>
+        <filter x="-4.1%" y="-5.0%" width="108.3%" height="115.8%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0767946105 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.105383832 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rectangle">
+            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+            <use fill="#1A237E" fill-rule="evenodd" xlink:href="#path-1"></use>
+        </g>
+        <g id="Rectangle">
+            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+            <use fill="#283593" fill-rule="evenodd" xlink:href="#path-3"></use>
+        </g>
+        <g id="Rectangle">
+            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+            <use fill="#3F51B5" fill-rule="evenodd" xlink:href="#path-5"></use>
+        </g>
+    </g>
+</svg>

assets/scss/_nav.scss

@@ -73,4 +73,8 @@
     background-position: .4rem .6rem;
     background-size: .75rem .75rem;
   }
+
+  .nav-item {
+    position: relative;
+  }
 }

assets/scss/_variables.scss

@@ -1,6 +1,7 @@
 // Local docs variables
+$brand-primary:      #3F51B5;
 $bd-purple:          #3F51B5;
-$bd-purple-bright:   red; // lighten(saturate($bd-purple, 5%), 15%);
+$bd-purple-bright:   lighten(saturate($bd-purple, 5%), 15%);
 $bd-purple-light:    #cdbfe3;
 $bd-purple-lightest: #f5f2f9;
 $bd-graphite:        #2a2730;

assets/scss/docs.scss

@@ -26,6 +26,7 @@
 // Load Bootstrap variables and mixins
 @import "../../scss/functions";
 @import "../../scss/variables";
+@import "bootstrap/scss/mixins";
 @import "../../scss/mixins";
 
 // Load docs components

index.html

@@ -4,21 +4,26 @@ layout: home
 
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
+    <div class="row align-items-center">
+      <div class="col-12 mx-auto col-md-12">
+        <h1 class="mb-3 bd-text-purple-bright text-center">Material Design for Bootstrap</h1>
+        <br /><br />
+      </div>
+    </div>
     <div class="row align-items-center">
       <div class="col-6 mx-auto col-md-6 order-md-2">
-        <img src="{{ site.baseurl }}/assets/img/bootstrap-stack.png" alt="" class="img-fluid mb-3 mb-md-0">
+        <img src="{{ site.baseurl }}/assets/img/MD4B.svg" alt="" class="img-fluid mb-3 mb-md-0">
       </div>
       <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
-        <h1 class="mb-3 bd-text-purple-bright">Bootstrap<br />Material Design</h1>
         <p class="lead">
-          Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
+          Build responsive, mobile-first projects on the web with the world's most popular Material Design front-end component library.
         </p>
         <p class="lead mb-4">
-          Bootstrap Material Design is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
+          Material Design for Bootstrap is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
         </p>
         <div class="d-flex flex-column flex-md-row lead mb-3">
-          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-primary" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
-          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
         </div>
         <p class="text-muted mb-0">
           Currently v{{ site.current_version }}
@@ -30,28 +35,28 @@ layout: home
 </main>
 
 <div class="masthead-followup row m-0 border border-white">
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
     <h3>Installation</h3>
     <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
 
 {% highlight sh %}
-npm install bootstrap@{{ site.current_version }}
+npm install bootstrap-material-design@{{ site.current_version }}
 {% endhighlight %}
 
 {% highlight sh %}
-gem install bootstrap -v 4.0.0.beta
+gem install bootstrap-material-design -v 4.0.0.beta
 {% endhighlight %}
 
 {% highlight sh %}
-bower install bootstrap#v{{ site.current_version }}
+bower install bootstrap-material-design#v{{ site.current_version }}
 {% endhighlight %}
     <hr class="half-rule">
     <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download">Read installation docs</a>
   </div>
 
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
     <h3>Bootstrap CDN</h3>
@@ -62,7 +67,7 @@ bower install bootstrap#v{{ site.current_version }}
 <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
 {% endhighlight %}
 
-<h5>JS, Popper, and jQuery</h5>
+<h5>JS, Popper.js, and jQuery</h5>
 {% highlight html %}
 <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
@@ -71,16 +76,20 @@ bower install bootstrap#v{{ site.current_version }}
     <hr class="half-rule">
     <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
   </div>
-
+</div>
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+<div class="masthead-followup row m-0 border border-white">
+  <div class="col-12 col-md-12 p-3 p-md-5 bg-white border border-white text-center">
     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
     {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
-    <h3>Official Themes</h3>
+    <h3>Official Pro Kits</h3>
     <p>
-      Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
+      Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro.
     </p>
-    <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+    <a href="{{ site.mkp }}">
-    <hr class="half-rule">
+      <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388">
-    <a href="{{ site.themes }}" class="btn btn-outline-primary">Browse themes</a>
+    </a>
+    <br /><br />
+    <a href="{{ site.mkp }}" class="btn btn-outline-primary">Material Kit Pro</a>
+    <a href="{{ site.mdp }}" class="btn btn-outline-primary">Material Dashboard Pro</a>
   </div>
 </div>

package.json

@@ -20,6 +20,7 @@
   "scripts": {
     "docs-compile": "bundle exec jekyll build",
     "docs-serve": "bundle exec jekyll serve",
+    "docs:assets": "node-sass --include-path node_modules assets/scss/docs.scss > assets/css/docs.css && cssnano assets/css/docs.css assets/css/docs.min.css",
     "prepare": "npm run build",
     "build": "npm run build:js && npm run build:css",
     "build:js": "rollup js/index.js --output=dist/js/bootstrap-material-design.js -m --config=rollup.config.js && npm run build:js-min",

scss/mixins/_breakpoints.scss

@@ -1,34 +1,34 @@
-//// case where behavior is responsive, or with a marker class
+// case where behavior is responsive, or with a marker class
-//@mixin media-breakpoint-down-or($breakpoint, $name) {
+@mixin media-breakpoint-down-or($breakpoint, $name) {
-//  #{unquote($name)} {
+  #{unquote($name)} {
-//    @content
+    @content;
-//  }
+  }
+
+  @include media-breakpoint-down($breakpoint) {
+    @content;
+  }
+}
+
+// case where behavior is responsive, or with a marker class
+@mixin media-breakpoint-up-or($breakpoint, $name) {
+  #{unquote($name)} {
+    @content;
+  }
+
+  @include media-breakpoint-up($breakpoint) {
+    @content;
+  }
+}
+
+// Name of the previous breakpoint, or null
 //
-//  @include media-breakpoint-down($breakpoint) {
+//    >> breakpoint-next(sm)
-//    @content
+//    xs
-//  }
+//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
-//}
+//    xs
-//
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
-//// case where behavior is responsive, or with a marker class
+//    xs
-//@mixin media-breakpoint-up-or($breakpoint, $name) {
+@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-//  #{unquote($name)} {
+  $n: index($breakpoint-names, $name);
-//    @content
+  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
-//  }
+}
-//
-//  @include media-breakpoint-up($breakpoint) {
-//    @content
-//  }
-//}
-//
-//// Name of the previous breakpoint, or null
-////
-////    >> breakpoint-next(sm)
-////    xs
-////    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
-////    xs
-////    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
-////    xs
-//@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-//  $n: index($breakpoint-names, $name);
-//  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
-//}