added snackbar

_config.yml

@@ -56,6 +56,7 @@ cdn:
   jquery:         https://code.jquery.com/jquery-VERSION.min.js
   bootstrap:      https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap.min.js
   tether:         https://cdn.rawgit.com/HubSpot/tether/vVERSION/dist/js/tether.min.js
+  snackbar:       https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js
 
   'ie10-viewport-bug-workaround': https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js
 

docs/_data/nav.yml

@@ -20,6 +20,7 @@
     - title: Menus
     - title: Navs
     - title: Selections
+    - title: Snackbars
 
 - title: About
   pages:

docs/_includes/footer-example.html

@@ -1,5 +1,6 @@
 <script src="{{ site.data.cdn.jquery }}"></script>
 <script src="{{ site.data.cdn.tether }}"></script>
+<script src="{{ site.data.cdn.snackbar }}"></script>
 <script src="{{ site.baseurl }}/dist/bootstrap-material-design.iife.min.js"></script>
 
 

docs/_includes/footer.html

@@ -21,6 +21,7 @@
 <script src="{{ site.baseurl }}/dist/docs-vendor.min.js"></script>
 <!--<script src="{{ site.data.cdn.jquery }}"></script>-->
 <script src="{{ site.data.cdn.tether }}"></script>
+<script src="{{ site.data.cdn.snackbar }}"></script>
 <script src="{{ site.baseurl }}/dist/docs.iife.min.js"></script>
 
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

docs/assets/scss/bmd/_content.scss

@@ -0,0 +1,10 @@
+.bd-title {
+  @include media-breakpoint-up(sm) {
+    font-size: 3rem;
+
+    ~ p:first-of-type {
+      font-size: 1.25rem;
+      font-weight: 300;
+    }
+  }
+}

docs/assets/scss/bmd/_masthead.scss

@@ -1,5 +1,5 @@
 .bd-masthead {
-  background-image: linear-gradient(rgba(66, 66, 167, 0.2),rgba(57, 57, 152, 0.4)), url(../assets/img/bg.jpg);
+  background-image: linear-gradient(rgba(66, 66, 167, 0.2),rgba(57, 57, 152, 0.4)), url("../assets/img/bg.jpg");
   background-position: center top;
   background-size: cover;
 

docs/assets/scss/docs.scss

@@ -89,6 +89,7 @@ $bd-info:           $brand-info; // #5bc0de;
 
 // BMD customizatinos
 @import 'bmd/booticon';
+@import 'bmd/content';
 @import 'bmd/component-examples';
 @import 'bmd/clipboard-js';
 @import 'bmd/docs';

docs/material-design/drawers.md

@@ -11,7 +11,7 @@ The Bootstrap Material Design `Drawer` provides a markup structure and plugin th
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-## Overview 
+## Overview
 
 ### Templates and examples
 
@@ -333,4 +333,3 @@ The following generates a custom drawer at the size of 500px that is _out_ by de
   @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
 }
 {% endhighlight %}
-

docs/material-design/extensions.md

@@ -4,9 +4,6 @@ title: Extensions
 group: material-design
 ---
 
-{% callout warning %}
-## **Heads up! These need work!**
- 
-Do you want to see something integrated (at least style wise)? Submit a PR!
-{% endcallout %}
+Bootstrap Material Design provides seamlessly integration with some extensions.
 
+- [SnackbarJS]({{ site.baseurl }}/material-design/snackbars)

docs/material-design/snackbars.md

@@ -0,0 +1,56 @@
+---
+layout: docs
+title: Snackbars
+group: material-design
+---
+
+Snackbars and toasts can be created using the [SnackbarJS](https://github.com/FezVrasta/snackbarjs) plugin developed by us.
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## Include in the page
+
+In order to make snackbars work, make sure to include `snackbar.min.js` before `bootstrap-material-design.iife.min.js`.
+
+{% highlight html %}
+<script src="{{ site.data.cdn.jquery }}"></script>
+<script src="{{ site.data.cdn.tether }}"></script>
+<script src="{{ site.data.cdn.snackbar }}"></script>
+<script src="{{ site.data.cdn.js }}"></script>
+<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+<script src="{{ site.data.cdn['ie10-viewport-bug-workaround'] }}"></script>
+<script>
+  $('body').bootstrapMaterialDesign();
+</script>
+{% endhighlight %}
+
+<div class="alert alert-info" role="alert">
+  <strong>Heads up!</strong> You don't need to include SnackbarCSS CSS, it's already bundled in BMD.
+</div>
+
+## Examples
+
+Click on the buttons below to spawn snackbars and toasts:
+
+### Snackbar
+
+{% example html %}
+<button type="button" class="btn btn-secondary" data-toggle="snackbar" data-content="Free fried chicken here! <a href='https://example.org' class='btn btn-info'>Check it out</a>" data-html-allowed="true" data-timeout="0">
+  Snackbar
+</button>
+{% endexample %}
+
+### Toast
+
+{% example html %}
+<button type="button" class="btn btn-secondary" data-toggle="snackbar" data-style="toast" data-content="Fried chicken out of stock.">
+  Toast
+</button>
+{% endexample %}
+
+## Usage
+
+The complete documentation of SnackbarJS is available visiting [its official GitHub repository](https://github.com/FezVrasta/snackbarjs).

scss/_variables.scss

@@ -48,6 +48,7 @@ $enable-shadows: true;  // enable shadows, set to false to turn off shadows
 @import "variables/layout";
 @import "variables/menu";
 @import "variables/drawer";
+@import "variables/snackbar";
 
 $bmd-label-color-focus:  $brand-primary !default;
 $bmd-invalid-underline:  $red-a700 !default;

scss/extensions/_snackbarjs.scss

@@ -1,27 +1,59 @@
-//// Support for SnackbarJS plugin
-//// https://github.com/FezVrasta/snackbarjs
-//
-//.snackbar {
-//  height: 0;
-//  font-size: 14px;
-//  color: $bmd-inverse;
-//  background-color: #323232;
-//  border-radius: $border-radius;
-//  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
-//  transform: translateY(200%);
-//
-//  @include box-shadow($bmd-shadow-2dp);
-//}
-//
-//.snackbar.snackbar-opened {
-//  height: auto;
-//  padding: 14px 15px;
-//  margin-bottom: 20px;
-//  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
-//  transform: none;
-//}
-//
-//// Variations
-//.snackbar.toast {
-//  border-radius: 200px;
-//}
+// Support for SnackbarJS plugin
+// https://github.com/FezVrasta/snackbarjs
+
+#snackbar-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.snackbar {
+  display: inline-block;
+  min-width: $bmd-snackbar-min-width-sm;
+  max-height: 0;
+  opacity: 0;
+  transition: transform .25s cubic-bezier(0,0,.2,1), opacity 0s .25s, max-height .25s;
+  transform: translateY(100%);
+
+  &.toast .snackbar-content {
+    border-radius: 10rem;
+  }
+}
+
+.snackbar-content {
+  display: block;
+  padding: $bmd-snackbar-padding;
+  margin-top: 3px;
+  font-size: .9rem;
+  color: $bmd-snackbar-color;
+  background-color: $bmd-snackbar-bg;
+  border-radius: 2px;
+
+  .btn {
+    margin-bottom: 0;
+  }
+}
+
+.snackbar.snackbar-opened {
+  max-height: 100px;
+  opacity: 1;
+  transition: transform .25s cubic-bezier(0,0,.2,1), opacity 0s 0s, max-height .25s;
+  transform: translateY(0%);
+}
+
+@include media-breakpoint-up(sm) {
+  #snackbar-container {
+    right: 1rem;
+    left: 1rem;
+    width: 100%;
+  }
+
+  .snackbar {
+    min-width: $bmd-snackbar-min-width;
+  }
+}

scss/variables/_snackbar.scss

@@ -0,0 +1,7 @@
+$bmd-snackbar-bg: #323232 !default;
+$bmd-snackbar-color: #fff !default;
+$bmd-snackbar-min-width: 280px !default;
+$bmd-snackbar-padding: .8rem 1.5rem !default;
+
+
+$bmd-snackbar-min-width-sm: 100% !default;