Ran jscs, required some variable name changes. Added typography docs fn to show font properties

.gitignore

@@ -2,6 +2,8 @@
 dist/**/*
 docs/dist/**/*
 docs/assets/css/*
+docs/assets/js/dist/*
+docs/assets/js/docs.*
 js/dist/**/*
 
 # Ignore docs files

Gruntfile.js

@@ -114,6 +114,16 @@ module.exports = function (grunt) {
           //'js/dist/popover.js'   : 'js/src/popover.js'
         }
       },
+      docs: {
+        options: {
+          sourceMap: true,
+          modules: 'ignore'
+        },
+        files: {
+          'docs/assets/js/dist/style.js': 'docs/assets/js/src/style.js',
+          'docs/assets/js/dist/application.js': 'docs/assets/js/src/application.js'
+        }
+      },
       dist: {
         options: {
           modules: 'ignore'
@@ -147,7 +157,7 @@ module.exports = function (grunt) {
       options: {
         configFile: 'js/.eslintrc'
       },
-      target: 'js/src/*.js'
+      target: ['js/src/*.js', 'docs/assets/js/src/*.js']
     },
 
     jscs: {
@@ -391,6 +401,11 @@ module.exports = function (grunt) {
         tasks: ['babel:dev']
       },
 
+      docsjs: {
+        files: ['docs/assets/js/src/*.js'],
+        tasks: ['docs-js']
+      },
+
       // FIXME: restore this after getting fundamentals done, just trying to reduce churn while developing
       //sass: {
       //  files: 'scss/**/*.scss',
@@ -555,7 +570,7 @@ module.exports = function (grunt) {
 
   // Docs task.
   grunt.registerTask('docs-css', ['sass:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
-  grunt.registerTask('docs-js', ['uglify:docsJs']);
+  grunt.registerTask('docs-js', ['babel:docs', 'uglify:docsJs']);
   grunt.registerTask('lint-docs-js', ['jscs:assets']);
   grunt.registerTask('docs', ['copy:bs-docs-components', 'copy:bs-docs-content', 'docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);
 

docs/_includes/footer.html

@@ -63,7 +63,3 @@ Holder.addTheme('gray', {
   fontweight: 'normal'
 })
 </script>
-<script>
-  $.bootstrapMaterialDesign()
-</script>
-

docs/assets/js/src/application.js

@@ -1,83 +1,21 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+import Style from './style'
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
 
-/*!
+class Application {
- * JavaScript for Bootstrap's docs (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
- * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see https://creativecommons.org/licenses/by/3.0/.
- */
 
-/* global Clipboard, anchors */
+  constructor() {
-
-!function ($) {
-  'use strict';
-
-  $(function () {
-
-    // Tooltip and popover demos
-    $('.tooltip-demo').tooltip({
-      selector: '[data-toggle="tooltip"]',
-      container: 'body'
-    })
-
-    $('[data-toggle="popover"]').popover()
-
-    // Demos within modals
-    $('.tooltip-test').tooltip()
-    $('.popover-test').popover()
-
-    // Indeterminate checkbox example
-    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
-
-    // Disable empty links in docs examples
-    $('.bd-example [href=#]').click(function (e) {
-      e.preventDefault()
-    })
-
-    // Insert copy to clipboard button before .highlight
-    $('.highlight').each(function () {
-      var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
-      $(this).before(btnHtml)
-      $('.btn-clipboard').tooltip()
-    })
-
-    var clipboard = new Clipboard('.btn-clipboard', {
-      target: function (trigger) {
-        return trigger.parentNode.nextElementSibling
   }
+
+  displayTypographyProperties() {
+    Style.displayFontSizeWeightColor('.bd-example-type td > *:not(.type-info)', ($element) => {
+      return $element.closest('tr').find('td.type-info')
     })
+  }
+}
 
-    clipboard.on('success', function (e) {
+$(() => {
-      $(e.triggerStart)
+  let app = new Application()
-        .attr('title', 'Copied!')
+  app.displayTypographyProperties()
-        .tooltip('_fixTitle')
-        .tooltip('show')
-        .attr('title', 'Copy to clipboard')
-        .tooltip('_fixTitle')
 
-      e.clearSelection()
+  // $.bootstrapMaterialDesign()
-    })
 
-    clipboard.on('error', function (e) {
+})
-      var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
-
-      $(e.triggerStart)
-        .attr('title', fallbackMsg)
-        .tooltip('_fixTitle')
-        .tooltip('show')
-        .attr('title', 'Copy to clipboard')
-        .tooltip('_fixTitle')
-    })
-
-  })
-
-}(jQuery)
-
-;(function () {
-  'use strict';
-
-  anchors.options.placement = 'left';
-  anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
-})();

docs/assets/js/src/old/old_application.js

@@ -0,0 +1,83 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License. For
+ * details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global Clipboard, anchors */
+
+!function ($) {
+  'use strict';
+
+  $(function () {
+
+    // Tooltip and popover demos
+    $('.tooltip-demo').tooltip({
+      selector: '[data-toggle="tooltip"]',
+      container: 'body'
+    })
+
+    $('[data-toggle="popover"]').popover()
+
+    // Demos within modals
+    $('.tooltip-test').tooltip()
+    $('.popover-test').popover()
+
+    // Indeterminate checkbox example
+    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
+
+    // Disable empty links in docs examples
+    $('.bd-example [href=#]').click(function (e) {
+      e.preventDefault()
+    })
+
+    // Insert copy to clipboard button before .highlight
+    $('.highlight').each(function () {
+      var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
+      $(this).before(btnHtml)
+      $('.btn-clipboard').tooltip()
+    })
+
+    var clipboard = new Clipboard('.btn-clipboard', {
+      target: function (trigger) {
+        return trigger.parentNode.nextElementSibling
+      }
+    })
+
+    clipboard.on('success', function (e) {
+      $(e.triggerStart)
+        .attr('title', 'Copied!')
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
+
+      e.clearSelection()
+    })
+
+    clipboard.on('error', function (e) {
+      var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
+
+      $(e.triggerStart)
+        .attr('title', fallbackMsg)
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
+    })
+
+  })
+
+}(jQuery)
+
+;(function () {
+  'use strict';
+
+  anchors.options.placement = 'left';
+  anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
+})();

docs/assets/js/src/style.js

@@ -0,0 +1,75 @@
+const Style = (($) => {
+
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+  // const Default = {
+  //  template: ``
+  // }
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  class Style {
+
+    constructor() {
+
+    }
+
+    static rgbToHex(rgba) {
+      rgba = rgba.match(/\d+/g)
+      let hex = `#${String(`0${Number(rgba[0]).toString(16)}`).slice(-2)}${String(`0${Number(rgba[1]).toString(16)}`).slice(-2)}${String(`0${Number(rgba[2]).toString(16)}`).slice(-2)}`
+      return hex
+    }
+
+    static displayFontSizeWeightColor(selector, targetFn, after = false, bg = false, wrapWithMark = false) {
+      return $(selector).each((index, element) => {
+        let $element = $(element)
+        let $target = targetFn($element)
+
+        let rgbaBgColor = $element.css('background-color')
+        // let hexBgColor = Style.rgbToHex(rgbaBgColor)
+
+        let rgbaColor = $element.css('color')
+        // let hexColor = Style.rgbToHex(rgbaColor)
+
+        let text = ''
+
+        if (wrapWithMark) {
+          text += `<mark style='font-size: 10px; font-weight: normal; letter-spacing: normal'>`
+        }
+        // text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}`
+        text += `<span>${$element.css('font-size')} ${$element.css('font-weight')} <small style='white-space: nowrap'>${rgbaColor}</small></span>`
+        if (bg) {
+          // text += ` bg: ${hexBgColor} `
+          text += ` bg: ${rgbaBgColor} `
+        }
+
+        if (wrapWithMark) {
+          text += `</mark>`
+        }
+
+        $target.text('')
+        $target.append($(text))
+      })
+    }
+
+
+    // ------------------------------------------------------------------------
+    // private
+
+
+    // ------------------------------------------------------------------------
+    // static
+  }
+
+
+  return Style
+
+})(jQuery)
+
+export default Style

grunt/configBridge.json

@@ -4,7 +4,8 @@
       "../assets/js/vendor/anchor.min.js",
       "../assets/js/vendor/clipboard.min.js",
       "../assets/js/vendor/holder.min.js",
-      "../assets/js/src/application.js"
+      "../assets/js/dist/style.js",
+      "../assets/js/dist/application.js"
     ]
   }
 }

js/src/autofill.js

@@ -20,8 +20,8 @@ const Autofill = (($) => {
    */
   class Autofill {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
 
       this._watchLoading()
@@ -29,8 +29,8 @@ const Autofill = (($) => {
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
       this.config = null
     }
 
@@ -48,7 +48,7 @@ const Autofill = (($) => {
     _onLoading() {
       setInterval(() => {
         $('input[type!=checkbox]').each((index, element) => {
-          let $element = $(element)
+          let $element = $($element)
           if ($element.val() && $element.val() !== $element.attr('value')) {
             $element.triggerStart('change')
           }
@@ -65,7 +65,7 @@ const Autofill = (($) => {
           let $inputs = $(event.currentTarget).closest('form').find('input').not('[type=file]')
           focused = setInterval(() => {
             $inputs.each((index, element) => {
-              let $element = $(element)
+              let $element = $($element)
               if ($element.val() !== $element.attr('value')) {
                 $element.triggerStart('change')
               }

js/src/bootstrapMaterialDesign.js

@@ -84,8 +84,8 @@ const BootstrapMaterialDesign = (($) => {
    */
   class BootstrapMaterialDesign {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
       let $document = $(document)
 
@@ -106,7 +106,7 @@ const BootstrapMaterialDesign = (($) => {
           // add to arrive if present and enabled
           if (document.arrive && this.config.arrive) {
             $document.arrive(selector, (element) => {  // eslint-disable-line no-loop-func
-              $(element)[component](componentConfig)
+              $($element)[component](componentConfig)
             })
           }
         }
@@ -114,8 +114,8 @@ const BootstrapMaterialDesign = (($) => {
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
       this.config = null
     }
 

js/src/checkbox.js

@@ -23,20 +23,20 @@ const Checkbox = (($) => {
    */
   class Checkbox {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
 
-      this.element.after(this.config.template)
+      this.$element.after(this.config.template)
-      this.formGroup = Util.findFormGroup(this.element)
+      this.$formGroup = Util.findFormGroup(this.$element)
 
       this._bindEventListeners()
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
-      this.formGroup = null
+      this.$formGroup = null
       this.config = null
     }
 
@@ -44,14 +44,14 @@ const Checkbox = (($) => {
     // private
     _bindEventListeners() {
       // checkboxes didn't appear to bubble to the document, so we'll bind these directly
-      this.formGroup.find('.checkbox label').hover(() => {
+      this.$formGroup.find('.checkbox label').hover(() => {
-        Util.addFormGroupFocus(this.formGroup)
+        Util.addFormGroupFocus(this.$formGroup)
       }, () => {
-        Util.removeFormGroupFocus(this.formGroup)
+        Util.removeFormGroupFocus(this.$formGroup)
       })
 
-      this.element.change(() => {
+      this.$element.change(() => {
-        this.element.blur()
+        this.$element.blur()
       })
     }
 

js/src/fileinput.js

@@ -27,38 +27,38 @@ const FileInput = (($) => {
    */
   class FileInput {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
-      this.formGroup = Util.findFormGroup(this.element)
+      this.$formGroup = Util.findFormGroup(this.$element)
 
-      this.formGroup.addClass(ClassName.IS_FILEINPUT)
+      this.$formGroup.addClass(ClassName.IS_FILEINPUT)
 
       this._bindEventListeners()
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
-      this.formGroup = null
+      this.$formGroup = null
       this.config = null
     }
 
     // ------------------------------------------------------------------------
     // private
     _bindEventListeners() {
-      this.formGroup
+      this.$formGroup
         .on('focus', () => {
-          Util.addFormGroupFocus(this.formGroup)
+          Util.addFormGroupFocus(this.$formGroup)
         })
         .on('blur', () => {
-          Util.removeFormGroupFocus(this.formGroup)
+          Util.removeFormGroupFocus(this.$formGroup)
         })
 
       // set the fileinput readonly field with the name of the file
-      this.element.on('change', () => {
+      this.$element.on('change', () => {
         let value = ''
-        $.each(this.element.files, (i, file) => {
+        $.each(this.$element.files, (i, file) => {
           value += `${file.name}  , `
         })
         value = value.substring(0, value.length - 2)
@@ -67,16 +67,16 @@ const FileInput = (($) => {
         } else {
           this._addIsEmpty()
         }
-        this.formGroup.find('input.form-control[readonly]').val(value)
+        this.$formGroup.find('input.form-control[readonly]').val(value)
       })
     }
 
     _addIsEmpty() {
-      this.formGroup.addClass(ClassName.IS_EMPTY)
+      this.$formGroup.addClass(ClassName.IS_EMPTY)
     }
 
     _removeIsEmpty() {
-      this.formGroup.removeClass(ClassName.IS_EMPTY)
+      this.$formGroup.removeClass(ClassName.IS_EMPTY)
     }
 
     // ------------------------------------------------------------------------

js/src/input.js

@@ -41,30 +41,30 @@ const Input = (($) => {
    */
   class Input {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
 
       // Requires form-group standard markup (will add it if necessary)
-      this.formGroup = this._findOrCreateFormGroup()
+      this.$formGroup = this._findOrCreateFormGroup()
 
       this._convertInputSizeVariations()
 
       // Initially mark as empty
       if (this._isEmpty()) {
-        this.formGroup.addClass(ClassName.IS_EMPTY)
+        this.$formGroup.addClass(ClassName.IS_EMPTY)
       }
 
       // Add marker div the end of the form-group
-      this.formGroup.append(this.config.template)
+      this.$formGroup.append(this.config.template)
 
       this._bindEventListeners()
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
-      this.formGroup = null
+      this.$formGroup = null
       this.config = null
     }
 
@@ -73,16 +73,16 @@ const Input = (($) => {
 
     _bindEventListeners() {
 
-      this.element
+      this.$element
         .on('keydown paste', (event) => {
           if (Util.isChar(event)) {
             this._removeIsEmpty()
           }
         })
         .on('keyup change', (event) => {
-          let isValid = (typeof this.element[0].checkValidity === 'undefined' || this.element[0].checkValidity())
+          let isValid = (typeof this.$element[0].checkValidity === 'undefined' || this.$element[0].checkValidity())
 
-          if (this.element.val() === '' && isValid) {
+          if (this.$element.val() === '' && isValid) {
             this._addIsEmpty()
           } else {
             this._removeIsEmpty()
@@ -101,19 +101,19 @@ const Input = (($) => {
           }
         })
         .on('focus', () => {
-          Util.addFormGroupFocus(this.formGroup)
+          Util.addFormGroupFocus(this.$formGroup)
         })
         .on('blur', () => {
-          Util.removeFormGroupFocus(this.formGroup)
+          Util.removeFormGroupFocus(this.$formGroup)
         })
         // make sure empty is added back when there is a programmatic value change.
         //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
         .on('change', () => {
-          if (this.element.attr('type') === 'file') {
+          if (this.$element.attr('type') === 'file') {
             return
           }
 
-          let value = this.element.val()
+          let value = this.$element.val()
           if (value) {
             this._removeIsEmpty()
           } else {
@@ -123,23 +123,23 @@ const Input = (($) => {
     }
 
     _addHasError() {
-      this.formGroup.addClass(ClassName.HAS_ERROR)
+      this.$formGroup.addClass(ClassName.HAS_ERROR)
     }
 
     _removeHasError() {
-      this.formGroup.removeClass(ClassName.HAS_ERROR)
+      this.$formGroup.removeClass(ClassName.HAS_ERROR)
     }
 
     _addIsEmpty() {
-      this.formGroup.addClass(ClassName.IS_EMPTY)
+      this.$formGroup.addClass(ClassName.IS_EMPTY)
     }
 
     _removeIsEmpty() {
-      this.formGroup.removeClass(ClassName.IS_EMPTY)
+      this.$formGroup.removeClass(ClassName.IS_EMPTY)
     }
 
     _isEmpty() {
-      return (this.element.val() === null || this.element.val() === undefined || this.element.val() === '')
+      return (this.$element.val() === null || this.$element.val() === undefined || this.$element.val() === '')
     }
 
     _convertInputSizeVariations() {
@@ -149,18 +149,18 @@ const Input = (($) => {
 
       // Modification - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
       for (let inputSize in InputSizeConversions) {
-        if (this.element.hasClass(inputSize)) {
+        if (this.$element.hasClass(inputSize)) {
-          this.element.removeClass(inputSize)
+          this.$element.removeClass(inputSize)
-          this.formGroup.addClass(InputSizeConversions[inputSize])
+          this.$formGroup.addClass(InputSizeConversions[inputSize])
         }
       }
     }
 
     _findOrCreateFormGroup() {
-      let fg = this.element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
+      let fg = this.$element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
       if (fg.length === 0) {
-        this.element.wrap(this.config.formGroup.template)
+        this.$element.wrap(this.config.$formGroup.template)
-        fg = this.element.closest(Selector.FORM_GROUP) // find node after attached (otherwise additional attachments don't work)
+        fg = this.$element.closest(Selector.FORM_GROUP) // find node after attached (otherwise additional attachments don't work)
       }
       return fg
     }

js/src/old/es6Template.js

@@ -22,14 +22,14 @@ const Foo = (($) => {
    */
   class Foo {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
       this.config = null
     }
 

js/src/old/material.js

@@ -1,301 +0,0 @@
-/* globals jQuery */
-
-(function($) {
-  // Selector to select only not already processed elements
-  //$.expr[":"].notmdproc = function(obj){
-  //  if ($(obj).data("mdproc")) {
-  //    return false;
-  //  } else {
-  //    return true;
-  //  }
-  //};
-  //
-  //function isChar(evt) {
-  //  if (typeof evt.which == "undefined") {
-  //    return true;
-  //  } else if (typeof evt.which == "number" && evt.which > 0) {
-  //    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 && evt.which != 9;
-  //  }
-  //  return false;
-  //}
-  //
-  //function addFormGroupFocus(formGroup){
-  //  formGroup.addClass("is-focused");
-  //}
-  //
-  //function removeFormGroupFocus(formGroup){
-  //  formGroup.removeClass("is-focused"); // remove class from form-group
-  //}
-
-  $.material =  {
-    "options": {
-      // These options set what will be started by $.material.init()
-      //"input": true,
-      //"ripples": true,
-      //"checkbox": true,
-      //"togglebutton": true,
-      //"radio": true,
-      //"arrive": true,
-      //"autofill": false,
-
-      //"withRipples": [
-      //  ".btn:not(.btn-link)",
-      //  ".card-image",
-      //  ".navbar a:not(.ripple-none)",
-      //  ".dropdown-menu a",
-      //  ".nav-tabs a:not(.ripple-none)",
-      //  ".withripple",
-      //  ".pagination li:not(.active):not(.disabled) a:not(.ripple-none)"
-      //].join(","),
-      //"inputElements": "input.form-control, textarea.form-control, select.form-control",
-      //"checkboxElements": ".checkbox > label > input[type=checkbox]",
-      //"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
-      //"radioElements": ".radio > label > input[type=radio]" ,
-      //"fileInputElements": 'input[type=file]'
-    },
-    //"checkbox": function(selector) {
-    //  // Add fake-checkbox to material checkboxes
-    //  $((selector) ? selector : this.options.checkboxElements)
-    //  .filter(":notmdproc")
-    //  .data("mdproc", true)
-    //  .after("<span class='checkbox-material'><span class='check'></span></span>");
-    //},
-    //"togglebutton": function(selector) {
-    //  $((selector) ? selector : this.options.togglebuttonElements)
-    //  .filter(":notmdproc")
-    //  .data("mdproc", true)
-    //  .after("<span class='toggle'></span>");
-    //},
-    //"radio": function(selector) {
-    //  // Add fake-radio to material radios
-    //  $((selector) ? selector : this.options.radioElements)
-    //  .filter(":notmdproc")
-    //  .data("mdproc", true)
-    //  .after("<span class='circle'></span><span class='check'></span>");
-    //},
-    //"input": function(selector) {
-    //  $((selector) ? selector : this.options.inputElements)
-    //    .filter(":notmdproc")
-    //  .data("mdproc", true)
-    //  .each( () => {
-    //    var $input = $(this);
-    //
-    //    // Requires form-group standard markup (will add it if necessary)
-    //    var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
-    //    if($formGroup.length === 0){
-    //      $input.wrap("<div class='form-group'></div>");
-    //      $formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
-    //    }
-    //
-    //    // Modification - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
-    //    var legacySizes = {
-    //      "input-lg": "form-group-lg",
-    //      "input-sm": "form-group-sm"
-    //    };
-    //    $.each( legacySizes, function( legacySize, standardSize ) {
-    //      if ($input.hasClass(legacySize)) {
-    //        $input.removeClass(legacySize);
-    //        $formGroup.addClass(standardSize);
-    //      }
-    //    }); // TODO: determine if we want to keep meddling this much.
-    //
-    //    // Set as empty if is empty (damn I must improve this...)
-    //    if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
-    //      $formGroup.addClass("is-empty");
-    //    }
-    //
-    //      // Add at the end of the form-group
-    //    $formGroup.append("<span class='material-input'></span>");
-    //
-    //    // Support for file input
-    //    if ($formGroup.find("input[type=file]").length > 0) {
-    //      $formGroup.addClass("is-fileinput");
-    //    }
-    //  });
-    //},
-    //"attachInputEventHandlers": () => {
-    //
-      //// checkboxes didn't appear to bubble to the document, so we'll bind these directly
-      //$(".form-group .checkbox label").hover(() => {
-      //  Util.addFormGroupFocus(this);
-      //}, () => {
-      //  Util.removeFormGroupFocus(this);
-      //});
-      //
-      //$(document)
-      //.on("change", ".checkbox input[type=checkbox]", () => { $(this).blur(); })
-      //.on("keydown paste", ".form-control", function(e) {
-      //  if(Util.isChar(e)) {
-      //    $(this).closest(".form-group").removeClass("is-empty");
-      //  }
-      //})
-      //.on("keyup change", ".form-control", () => {
-      //  var $input = $(this);
-      //  var $formGroup = $input.closest(".form-group");
-      //  var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
-      //
-      //  if ($input.val() === "" && isValid) {
-      //    $formGroup.addClass("is-empty");
-      //  }
-      //  else {
-      //    $formGroup.removeClass("is-empty");
-      //  }
-      //
-      //  // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
-      //  //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
-      //  //  the form-group on change.
-      //  //
-      //  // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
-      //  //        BUT, I've left it here for backwards compatibility.
-      //  if(isValid){
-      //    $formGroup.removeClass("has-error");
-      //  }
-      //  else{
-      //    $formGroup.addClass("has-error");
-      //  }
-      //})
-      //.on("focus", ".form-control, .form-group.is-fileinput", () => {
-      //  Util.addFormGroupFocus(this.formGroup);
-      //})
-      //.on("blur", ".form-control, .form-group.is-fileinput", () => {
-      //  Util.removeFormGroupFocus(this.formGroup);
-      //})
-      //// make sure empty is added back when there is a programmatic value change.
-      ////  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
-      //.on("change", ".form-group input", () => {
-      //  var $input = $(this);
-      //  if($input.attr("type") == "file") {
-      //    return;
-      //  }
-      //
-      //  var $formGroup = $input.closest(".form-group");
-      //  var value = $input.val();
-      //  if (value) {
-      //    $formGroup.removeClass("is-empty");
-      //  } else {
-      //    $formGroup.addClass("is-empty");
-      //  }
-      //})
-      //// set the fileinput readonly field with the name of the file
-      //.on("change", ".form-group.is-fileinput input[type='file']", () => {
-      //  var $input = $(this);
-      //  var $formGroup = $input.closest(".form-group");
-      //  var value = "";
-      //  $.each(this.files, function(i, file) {
-      //    value += file.name + ", ";
-      //  });
-      //  value = value.substring(0, value.length - 2);
-      //  if (value) {
-      //    $formGroup.removeClass("is-empty");
-      //  } else {
-      //    $formGroup.addClass("is-empty");
-      //  }
-      //  $formGroup.find("input.form-control[readonly]").val(value);
-      //});
-    //},
-    //"ripples": function(selector) {
-    //  $((selector) ? selector : this.options.withRipples).ripples();
-    //},
-    //"autofill": () => {
-    //  // This part of code will detect autofill when the page is loading (username and password inputs for example)
-    //  var loading = setInterval(() => {
-    //    $("input[type!=checkbox]").each(() => {
-    //      var $this = $(this);
-    //      if ($this.val() && $this.val() !== $this.attr("value")) {
-    //        $this.triggerStart("change");
-    //      }
-    //    });
-    //  }, 100);
-    //
-    //  // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
-    //  setTimeout(() => {
-    //    clearInterval(loading);
-    //  }, 10000);
-    //},
-    //"attachAutofillEventHandlers": () => {
-    //  // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
-    //  var focused;
-    //  $(document)
-    //  .on("focus", "input", () => {
-    //    var $inputs = $(this).parents("form").find("input").not("[type=file]");
-    //    focused = setInterval(() => {
-    //      $inputs.each(() => {
-    //        var $this = $(this);
-    //        if ($this.val() !== $this.attr("value")) {
-    //          $this.triggerStart("change");
-    //        }
-    //      });
-    //    }, 100);
-    //  })
-    //  .on("blur", ".form-group input", () => {
-    //    clearInterval(focused);
-    //  });
-    //},
-    "init": () => {
-    //  var $document = $(document);
-    //
-    //  if ($.fn.ripples && this.options.ripples) {
-    //    //this.ripples();
-    //    $(this.options.withRipples).ripples()
-    //  }
-    //  if (this.options.input) {
-    //    this.input();
-    //    this.attachInputEventHandlers();
-    //
-    //    $(this.options.inputElements).input()
-    //  }
-    //  if (this.options.checkbox) {
-    //    //this.checkbox();
-    //    $(this.options.checkboxElements).checkbox()
-    //  }
-    //  if (this.options.togglebutton) {
-    //    //this.togglebutton();
-    //    $(this.options.togglebuttonElements).togglebutton()
-    //  }
-    //  if (this.options.radio) {
-    //    //this.radio();
-    //    $(this.options.radioElements).radio()
-    //  }
-    //  if (this.options.autofill) {
-    //    //this.autofill();
-    //    //this.attachAutofillEventHandlers();
-    //    $('body').autofill();
-    //  }
-    //
-    //  $(this.options.fileInputElements).fileInput()
-    //
-    //  if (document.arrive && this.options.arrive) {
-    //    if ($.fn.ripples && this.options.ripples) {
-    //      $document.arrive(this.options.withRipples, () => {
-    //        $(this).ripples()
-    //      });
-    //    }
-    //    if (this.options.input) {
-    //      $document.arrive(this.options.inputElements, () => {
-    //        $(this).input()
-    //      });
-    //    }
-    //    if (this.options.checkbox) {
-    //      $document.arrive(this.options.checkboxElements, () => {
-    //        $(this).checkbox();
-    //      });
-    //    }
-    //    if (this.options.radio) {
-    //      $document.arrive(this.options.radioElements, () => {
-    //        $(this).radio();
-    //      });
-    //    }
-    //    if (this.options.togglebutton) {
-    //      $document.arrive(this.options.togglebuttonElements, () => {
-    //        $(this).togglebutton();
-    //      });
-    //    }
-    //
-    //    $document.arrive(this.options.fileInputElements, () => {
-    //      $(this).fileInput();
-    //    });
-    //  }
-    }
-  };
-
-})(jQuery);

js/src/old/ripples.js

@@ -1,320 +0,0 @@
-/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
-/* globals jQuery, navigator */
-
-(function($, window, document, undefined) {
-
-  //"use strict";
-  //
-  ///**
-  // * Define the name of the plugin
-  // */
-  //var ripples = "ripples";
-  //
-  //
-  ///**
-  // * Get an instance of the plugin
-  // */
-  //var self = null;
-  //
-  //
-  ///**
-  // * Define the DEFAULT_OPTIONS of the plugin
-  // */
-  //var DEFAULT_OPTIONS = {};
-  //
-  //
-  ///**
-  // * Create the main plugin function
-  // */
-  //function Ripples(element, options) {
-  //  self = this;
-  //
-  //  this._element = $(element);
-  //  this._options = $.extend({}, DEFAULT_OPTIONS, options);
-  //
-  //  this.init();
-  //}
-  //
-  //
-  /**
-   * Initialize the plugin
-   */
-  //Ripples.prototype.init = function() {
-  //  var $element  = this._element;
-  //
-  //  $element.on("mousedown touchstart", function(event) {
-  //    /**
-  //     * Verify if the user is just touching on a device and return if so
-  //     */
-  //    if(self.isTouch() && event.type === "mousedown") {
-  //      return;
-  //    }
-  //
-  //
-  //    /**
-  //     * Verify if the current element already has a ripple wrapper element and
-  //     * creates if it doesn't
-  //     */
-  //    if(!($element.find(".ripple-container").length)) {
-  //      $element.append("<div class=\"ripple-container\"></div>");
-  //    }
-  //
-  //
-  //    /**
-  //     * Find the ripple wrapper
-  //     */
-  //    var $container = $element.children(".ripple-container");
-  //
-  //
-  //    /**
-  //     * Get relY and relX positions
-  //     */
-  //    var relY = self.getRelY($container, event);
-  //    var relX = self.getRelX($container, event);
-  //
-  //
-  //    /**
-  //     * If relY and/or relX are false, return the event
-  //     */
-  //    if(!relY && !relX) {
-  //      return;
-  //    }
-  //
-  //
-  //    /**
-  //     * Get the ripple color
-  //     */
-  //    var rippleColor = self.getRipplesColor($element);
-  //
-  //
-  //    /**
-  //     * Create the ripple element
-  //     */
-  //    var $ripple = $("<div></div>");
-  //
-  //    $ripple
-  //    .addClass("ripple")
-  //    .css({
-  //      "left": relX,
-  //      "top": relY,
-  //      "background-color": rippleColor
-  //    });
-  //
-  //
-  //    /**
-  //     * Append the ripple to the wrapper
-  //     */
-  //    $container.append($ripple);
-  //
-  //
-  //    /**
-  //     * Make sure the ripple has the styles applied (ugly hack but it works)
-  //     */
-  //    (function() { return window.getComputedStyle($ripple[0]).opacity; })();
-  //
-  //
-  //    /**
-  //     * Turn on the ripple animation
-  //     */
-  //    self.rippleOn($element, $ripple);
-  //
-  //
-  //    /**
-  //     * Call the rippleEnd function when the transition "on" ends
-  //     */
-  //    setTimeout(function() {
-  //      self.rippleEnd($ripple);
-  //    }, 500);
-  //
-  //
-  //    /**
-  //     * Detect when the user leaves the element
-  //     */
-  //    $element.on("mouseup mouseleave touchend", function() {
-  //      $ripple.data("mousedown", "off");
-  //
-  //      if($ripple.data("animating") === "off") {
-  //        self.rippleOut($ripple);
-  //      }
-  //    });
-  //
-  //  });
-  //};
-  //
-  //
-  ///**
-  // * Get the new size based on the element height/width and the ripple width
-  // */
-  //Ripples.prototype.getNewSize = function($element, $ripple) {
-  //
-  //  return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
-  //};
-
-
-  ///**
-  // * Get the relX
-  // */
-  //Ripples.prototype.getRelX = function($container,  event) {
-  //  var wrapperOffset = $container.offset();
-  //
-  //  if(!self.isTouch()) {
-  //    /**
-  //     * Get the mouse position relative to the ripple wrapper
-  //     */
-  //    return event.pageX - wrapperOffset.left;
-  //  } else {
-  //    /**
-  //     * Make sure the user is using only one finger and then get the touch
-  //     * position relative to the ripple wrapper
-  //     */
-  //    event = event.originalEvent;
-  //
-  //    if(event.touches.length === 1) {
-  //      return event.touches[0].pageX - wrapperOffset.left;
-  //    }
-  //
-  //    return false;
-  //  }
-  //};
-  //
-  //
-  ///**
-  // * Get the relY
-  // */
-  //Ripples.prototype.getRelY = function($container, event) {
-  //  var wrapperOffset = $container.offset();
-  //
-  //  if(!self.isTouch()) {
-  //    /**
-  //     * Get the mouse position relative to the ripple wrapper
-  //     */
-  //    return event.pageY - wrapperOffset.top;
-  //  } else {
-  //    /**
-  //     * Make sure the user is using only one finger and then get the touch
-  //     * position relative to the ripple wrapper
-  //     */
-  //    event = event.originalEvent;
-  //
-  //    if(event.touches.length === 1) {
-  //      return event.touches[0].pageY - wrapperOffset.top;
-  //    }
-  //
-  //    return false;
-  //  }
-  //};
-  //
-  //
-  ///**
-  // * Get the ripple color
-  // */
-  //Ripples.prototype.getRipplesColor = function($element) {
-  //
-  //  var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
-  //
-  //  return color;
-  //};
-
-  //
-  ///**
-  // * Verify if the client browser has transistion support
-  // */
-  //Ripples.prototype.hasTransitionSupport = function() {
-  //  var thisBody  = document.body || document.documentElement;
-  //  var thisStyle = thisBody.style;
-  //
-  //  var support = (
-  //    thisStyle.transition !== undefined ||
-  //    thisStyle.WebkitTransition !== undefined ||
-  //    thisStyle.MozTransition !== undefined ||
-  //    thisStyle.MsTransition !== undefined ||
-  //    thisStyle.OTransition !== undefined
-  //  );
-  //
-  //  return support;
-  //};
-  //
-  //
-  ///**
-  // * Verify if the client is using a mobile device
-  // */
-  //Ripples.prototype.isTouch = function() {
-  //  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  //};
-  //
-  //
-  ///**
-  // * End the animation of the ripple
-  // */
-  //Ripples.prototype.rippleEnd = function($ripple) {
-  //  $ripple.data("animating", "off");
-  //
-  //  if($ripple.data("mousedown") === "off") {
-  //    self.rippleOut($ripple);
-  //  }
-  //};
-  //
-  //
-  ///**
-  // * Turn off the ripple effect
-  // */
-  //Ripples.prototype.rippleOut = function($ripple) {
-  //  $ripple.off();
-  //
-  //  if(self.hasTransitionSupport()) {
-  //    $ripple.addClass("ripple-out");
-  //  } else {
-  //    $ripple.animate({"opacity": 0}, 100, function() {
-  //      $ripple.trigger("transitionend");
-  //    });
-  //  }
-  //
-  //  $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
-  //    $ripple.remove();
-  //  });
-  //};
-  //
-  //
-  ///**
-  // * Turn on the ripple effect
-  // */
-  //Ripples.prototype.rippleOn = function($element, $ripple) {
-  //  var size = self.getNewSize($element, $ripple);
-  //
-  //  if(self.hasTransitionSupport()) {
-  //    $ripple
-  //    .css({
-  //      "-ms-transform": "scale(" + size + ")",
-  //      "-moz-transform": "scale(" + size + ")",
-  //      "-webkit-transform": "scale(" + size + ")",
-  //      "transform": "scale(" + size + ")"
-  //    })
-  //    .addClass("ripple-on")
-  //    .data("animating", "on")
-  //    .data("mousedown", "on");
-  //  } else {
-  //    $ripple.animate({
-  //      "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
-  //      "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
-  //      "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
-  //      "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
-  //      "opacity": 0.2
-  //    }, 500, function() {
-  //      $ripple.trigger("transitionend");
-  //    });
-  //  }
-  //};
-  //
-  //
-  ///**
-  // * Create the jquery plugin function
-  // */
-  //$.fn.ripples = function(options) {
-  //  return this.each(function() {
-  //    if(!$.data(this, "plugin_" + ripples)) {
-  //      $.data(this, "plugin_" + ripples, new Ripples(this, options));
-  //    }
-  //  });
-  //};
-
-})(jQuery, window, document);

js/src/radio.js

@@ -23,16 +23,16 @@ const Radio = (($) => {
    */
   class Radio {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
 
-      this.element.after(this.config.template)
+      this.$element.after(this.config.template)
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
       this.config = null
     }
 

js/src/ripples.js

@@ -44,17 +44,17 @@ const Ripples = (($) => {
    */
   class Ripples {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = $(element)
+      this.$element = $element
       this.config = $.extend({}, Default, config)
 
       // attach initial listener
-      this.element.on(this.config.triggerStart, this._onStartRipple)
+      this.$element.on(this.config.triggerStart, this._onStartRipple)
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
       this.containerElement = null
       this.decoratorElement = null
       this.config = null
@@ -101,7 +101,7 @@ const Ripples = (($) => {
       }, this.config.duration)
 
       // Detect when the user leaves the element (attach only when necessary for performance)
-      this.element.on(this.config.triggerEnd, () => {
+      this.$element.on(this.config.triggerEnd, () => {
         this.decoratorElement.data('mousedown', 'off')
 
         if (this.decoratorElement.data('animating') === 'off') {
@@ -112,12 +112,12 @@ const Ripples = (($) => {
 
     _findOrCreateContainer() {
       if (!this.containerElement || !this.containerElement.length > 0) {
-        this.element.append(this.config.container.template)
+        this.$element.append(this.config.container.template)
-        this.containerElement = this.element.find(Selector.CONTAINER)
+        this.containerElement = this.$element.find(Selector.CONTAINER)
       }
 
       // always add the rippleElement, it is always removed
-      this.containerElement.append(this.config.element.template)
+      this.containerElement.append(this.config.$element.template)
       this.decoratorElement = this.containerElement.find(Selector.DECORATOR)
     }
 
@@ -184,7 +184,7 @@ const Ripples = (($) => {
      * Get the ripple color
      */
     _getRipplesColor() {
-      let color = this.element.data('ripple-color') ? this.element.data('ripple-color') : window.getComputedStyle(this.element[0]).color
+      let color = this.$element.data('ripple-color') ? this.$element.data('ripple-color') : window.getComputedStyle(this.$element[0]).color
       return color
     }
 
@@ -245,10 +245,10 @@ const Ripples = (($) => {
           .data('mousedown', 'on')
       } else {
         this.decoratorElement.animate({
-          width: Math.max(this.element.outerWidth(), this.element.outerHeight()) * 2,
+          width: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
-          height: Math.max(this.element.outerWidth(), this.element.outerHeight()) * 2,
+          height: Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * 2,
-          'margin-left': Math.max(this.element.outerWidth(), this.element.outerHeight()) * (-1),
+          'margin-left': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
-          'margin-top': Math.max(this.element.outerWidth(), this.element.outerHeight()) * (-1),
+          'margin-top': Math.max(this.$element.outerWidth(), this.$element.outerHeight()) * (-1),
           opacity: 0.2
         }, this.config.duration, () => {
           this.decoratorElement.triggerStart('transitionend')
@@ -260,7 +260,7 @@ const Ripples = (($) => {
      * Get the new size based on the element height/width and the ripple width
      */
     _getNewSize() {
-      return (Math.max(this.element.outerWidth(), this.element.outerHeight()) / this.decoratorElement.outerWidth()) * 2.5
+      return (Math.max(this.$element.outerWidth(), this.$element.outerHeight()) / this.decoratorElement.outerWidth()) * 2.5
     }
 
     // ------------------------------------------------------------------------
@@ -268,12 +268,12 @@ const Ripples = (($) => {
 
     static _jQueryInterface(config) {
       return this.each(() => {
-        let element = $(this)
+        let $element = $(this)
-        let data = element.data(DATA_KEY)
+        let data = $element.data(DATA_KEY)
 
         if (!data) {
           data = new Ripples(this, config)
-          element.data(DATA_KEY, data)
+          $element.data(DATA_KEY, data)
         }
       })
     }

js/src/togglebutton.js

@@ -23,16 +23,16 @@ const Togglebutton = (($) => {
    */
   class Togglebutton {
 
-    constructor(element, config) {
+    constructor($element, config) {
-      this.element = element
+      this.$element = $element
       this.config = $.extend({}, Default, config)
 
-      this.element.after(this.config.template)
+      this.$element.after(this.config.template)
     }
 
     dispose() {
-      $.removeData(this.element, DATA_KEY)
+      $.removeData(this.$element, DATA_KEY)
-      this.element = null
+      this.$element = null
       this.config = null
     }
 

js/src/util.js

@@ -86,10 +86,10 @@ const Util = (($) => {
     /**
      Find expected form-group
      */
-    findFormGroup(element) {
+    findFormGroup($element) {
-      let fg = element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
+      let fg = $element.closest(Selector.FORM_GROUP) // note that form-group may be grandparent in the case of an input-group
       if (fg.length === 0) {
-        $.error(`Failed to find form-group for ${element}`)
+        $.error(`Failed to find form-group for ${$element}`)
       }
       return fg
     }

scss/includes/_bootstrap-material-design.scss

@@ -5,7 +5,8 @@
 @import 'bootstrap';
 
 @import 'mixins';
-@import 'scaffolding'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
+
+@import 'reboot';
 @import 'buttons';
 @import 'checkboxes';
 @import 'togglebutton';
@@ -23,4 +24,5 @@
 @import 'dialogs';
 @import 'dividers';
 @import 'themes';
+
 @import 'plugins';

scss/includes/_reboot.scss

@@ -0,0 +1,12 @@
+body {
+  font-weight: $mdb-font-weight-base;
+}
+
+//// Prevent highlight on mobile
+//* {
+//  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+//  -webkit-tap-highlight-color: transparent;
+//  &:focus {
+//    outline: 0;
+//  }
+//}

scss/includes/_scaffolding.scss

@@ -1,39 +0,0 @@
-body {
-  // Not sure we need this now that we are customizing bootstrap
-
-
-  //  background-color: $body-bg;
-  //  &.inverse {
-  //    background: #333333;
-  //    &, .form-control {
-  //      color: $mdb-text-color-light;
-  //    }
-  //    .modal,
-  //    .card {
-  //      &,
-  //      .form-control {
-  //        background-color: initial;
-  //        color: initial;
-  //      }
-  //    }
-  //
-  //  }
-  //}
-  //
-  //
-  //a, a:hover, a:focus {
-  //  color: $brand-primary;
-  //
-  //  & .material-icons {
-  //    vertical-align: middle;
-  //  }
-}
-
-//// Prevent highlight on mobile
-//* {
-//  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-//  -webkit-tap-highlight-color: transparent;
-//  &:focus {
-//    outline: 0;
-//  }
-//}

scss/includes/_type.scss

@@ -1,25 +1,25 @@
 
-body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
+//body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
-  //font-family: $font-family-sans-serif;
+//  //font-family: $font-family-sans-serif;
-  //font-weight: 300;
+//  //font-weight: 300;
-}
+//}
-
+//
-h5, h6{
+//h5, h6{
-  font-weight: 400;
+//  font-weight: 400;
-}
+//}
-
+//
-.text-warning {
+//.text-warning {
-  color: $brand-warning;
+//  color: $brand-warning;
-}
+//}
-.text-primary {
+//.text-primary {
-  color: $brand-primary;
+//  color: $brand-primary;
-}
+//}
-.text-danger {
+//.text-danger {
-  color: $brand-danger;
+//  color: $brand-danger;
-}
+//}
-.text-success {
+//.text-success {
-  color: $brand-success;
+//  color: $brand-success;
-}
+//}
-.text-info {
+//.text-info {
-  color: $brand-info;
+//  color: $brand-info;
-}
+//}

scss/includes/_variables.scss

@@ -3,6 +3,7 @@
 // Typography elements FIXME: review to see if we actually need these
 $mdb-text-color-light: rgba(255, 255, 255, 0.84) !default; //hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default;
 $mdb-text-color-primary: rgba(0, 0, 0, 0.87) !default;
+$mdb-font-weight-base: 400;
 $icon-color: rgba(0, 0, 0, 0.5) !default;
 
 
@@ -13,15 +14,15 @@ $gray-dark: $mdb-text-color-primary;
 // Customized BS variables
 $enable-flex: true;
 @import 'variables/brand';
-
-$border-radius-base: 2px !default;
-$border-radius-small: 1px !default;
-
 @import 'variables/type';
 @import 'variables/body';
 @import 'variables/buttons';
 
 
+$border-radius-base: 2px !default;
+$border-radius-small: 1px !default;
+
+
 //---
 // Bootstrap Material Design variables start with mdb-
 $mdb-brand-inverse: $indigo !default;

scss/includes/variables/_type.scss

@@ -1,3 +1,55 @@
 // Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
 $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$headings-font-weight: 300 !default;
+//$font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
+//$font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
+//$font-family-base:           $font-family-sans-serif !default;
+
+// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+//$font-size-root:             16px !default;
+//
+//$font-size-base:             1rem !default;
+//$font-size-lg:               1.25rem !default;
+//$font-size-sm:               .875rem !default;
+//$font-size-xs:               .75rem !default;
+//
+//$font-size-h1:               2.5rem !default;
+//$font-size-h2:               2rem !default;
+//$font-size-h3:               1.75rem !default;
+//$font-size-h4:               1.5rem !default;
+//$font-size-h5:               1.25rem !default;
+//$font-size-h6:               1rem !default;
+//
+//$display1-size:               6rem !default;
+//$display2-size:               5.5rem !default;
+//$display3-size:               4.5rem !default;
+//$display4-size:               3.5rem !default;
+//
+//$display1-weight:             300 !default;
+//$display2-weight:             300 !default;
+//$display3-weight:             300 !default;
+//$display4-weight:             300 !default;
+//
+//$line-height:                1.5 !default;
+//
+//$headings-margin-bottom:     ($spacer / 2) !default;
+//$headings-font-family:       inherit !default;
+//$headings-font-weight:       500 !default;
+//$headings-line-height:       1.1 !default;
+//$headings-color:             inherit !default;
+//
+//$lead-font-size:             1.25rem !default;
+//$lead-font-weight:           300 !default;
+//
+//$text-muted:                  $gray-light !default;
+//
+//$abbr-border-color:           $gray-light !default;
+//
+//$blockquote-small-color:      $gray-light !default;
+//$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//$blockquote-border-color:     $gray-lighter !default;
+//
+//$hr-border-color:             rgba(0,0,0,.1) !default;
+//$hr-border-width:             $border-width !default;