Merge remote-tracking branch 'nelsonomuto/master' into develop

.gitignore

@@ -7,3 +7,4 @@
 Thumbs.db
 .DS_Store
 /node_modules/
+.grunt/

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - "0.10"
+before_script:
+  - 'npm install -g grunt-cli'
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+script: 'grunt cibuild'

Gruntfile.js

@@ -0,0 +1,181 @@
+module.exports = function(grunt) {
+    "use strict";
+
+    require("load-grunt-tasks")(grunt);
+
+    grunt.initConfig({
+
+        less: {
+            production: {
+                options: {
+                    paths: ["less"]
+                },
+                files: {
+                    "css-compiled/material.css": "less/material.less",
+                    "css-compiled/material-wfont.css": "less/material-wfont.less",
+                    "css-compiled/ripples.css": "less/ripples.less"
+                }
+            }
+        },
+
+        sass: {
+            production: {
+                files: {
+                    "css-compiled/material.css": "sass/material.scss",
+                    "css-compiled/material-wfont.css": "sass/material-wfont.scss",
+                    "css-compiled/ripples.css": "sass/ripples.scss"
+                }
+            }
+        },
+
+        autoprefixer: {
+            options: {
+                browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
+            },
+            dist: {
+                files: {
+                    "css-compiled/material.css": "css-compiled/material.css",
+                    "css-compiled/material-wfont.css": "css-compiled/material-wfont.css",
+                    "css-compiled/ripples.css": "css-compiled/ripples.css"
+                }
+            }
+        },
+
+        cssmin: {
+            minify: {
+                expand: true,
+                cwd: "css-compiled/",
+                src: ["*.css", "!*.min.css"],
+                dest: "css-compiled/",
+                ext: ".min.css"
+            }
+        },
+
+        copy: {
+            css: {
+                src: "css-compiled/*.min.css",
+                dest: "template/material/"
+            },
+            js: {
+                src: "scripts/*.js",
+                dest: "template/material/"
+            }
+
+        },
+
+        connect: {
+            options: {
+                port: 8040,
+                hostname: "localhost",
+                livereload: 35729
+
+            },
+            livereload: {
+                options: {
+                    open: true,
+                    base: "."
+                }
+            },
+            test: {
+                options: {
+                    port: 8041,
+                    open: "http://localhost:8041/_SpecRunner.html",
+                    base: "."
+                }
+            }
+        },
+
+        jasmine: {
+            scripts: "scripts/**/*.js",
+            options: {
+                build: true,
+                specs: "test/*Spec.js",
+                helpers: "test/*Helper.js",
+                vendor: [
+                    "https://code.jquery.com/jquery-1.10.2.min.js",
+                    "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
+                ]
+            }
+        },
+
+        jshint: {
+            options: {
+                jshintrc: ".jshintrc",
+                reporter: require("jshint-stylish")
+            },
+            all: [
+                "Gruntfile.js",
+                "scripts/**/*.js",
+                "template/**/*.js"
+            ],
+            test: {
+                options: {
+                    jshintrc: "test/.jshintrc",
+                    src: ["test/**/*.js"]
+                }
+            }
+        },
+
+        watch: {
+            js: {
+                files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
+                tasks: ["newer:jshint:all"]
+            },
+            jsTest: {
+                files: ["test/**/*.js"],
+                tasks: ["newer:jshint:test", "jasmine"]
+            },
+            less: {
+                files:["less/**/*.less"],
+                tasks: ["default"]
+            },
+            sass: {
+                files: ["sass/**/*.scss", "sass/**/*.sass"],
+                tasks: ["scss"]
+            },
+            livereload: {
+                options: {
+                    livereload: "<%= connect.options.livereload %>"
+                },
+                files: [
+                    "index.html",
+                    "css-compiled/**/*.css",
+                    "**/*.{png,jpg,jpeg,gif,webp,svg}"
+                ]
+            }
+        }
+
+    });
+
+    grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy"]);
+
+    grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "copy"]);
+
+    grunt.registerTask("build", function(target) {
+        var buildType = "default";
+        if (target && target === "scss") {
+            buildType = "scss";
+        }
+
+        grunt.task.run(["newer:jshint", "jasmine:scripts", buildType]);
+    });
+
+    grunt.registerTask("test", [
+        "jasmine:scripts:build",
+        "connect:test:keepalive"
+    ]);
+
+    grunt.registerTask("serve", function(target){
+        var buildTarget = "default";
+        if(target && target === "scss") {
+            buildTarget = "scss";
+        }
+        grunt.task.run([
+            "build:"+ buildTarget,
+            "connect:livereload",
+            "watch"
+        ]);
+    });
+
+    grunt.registerTask('cibuild',["newer:jshint", "jasmine:scripts"]);
+};

README.md

@@ -98,7 +98,7 @@ The syntax to add a Material icon is:
 
 # Plugins
 
-Material Design for Bootstrap comes with styling support for various external scripts. At the moment only two scripts are supported but others will come:
+Material Design for Bootstrap comes with styling support for various external scripts:
 
 ### SnackbarJS
 
@@ -114,6 +114,11 @@ At the moment RipplesJS does not have its own repository but it will probably ha
 Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme.
 Read more about [noUiSlider here](http://refreshless.com/nouislider/)
 
+### Selectize.js
+
+Transform select and multi select inputs in advanced text inputs. Material Design for BS provides a fulle replacement of the plugin's CSS, don't include it so.
+Read more about [selectize.js](http://brianreavis.github.io/selectize.js/)
+
 
 # Compatibility
 

css-compiled/material-wfont.css

@@ -2365,6 +2365,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .dropdown-menu li a:hover {
   background: rgba(0, 0, 0, 0.08);
 }
+div {
+  background-color: white;
+}
 .alert {
   border: 0px;
   border-radius: 0;
@@ -3083,3 +3086,144 @@ fieldset[disabled] .navbar .btn-link:focus {
 .slider-material-lightgrey .noUi-handle {
   border-color: #ececec;
 }
+.selectize-control.single,
+.selectize-control.multi {
+  padding: 0;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.multi .selectize-input,
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.multi .selectize-input.input-active {
+  cursor: text;
+  background: transparent;
+  box-shadow: none;
+  border: 0;
+  padding: 0;
+  height: 100%;
+  font-size: 14px;
+  line-height: 30px;
+}
+.selectize-control.single .selectize-input .has-items,
+.selectize-control.multi .selectize-input .has-items,
+.selectize-control.single .selectize-input.input-active .has-items,
+.selectize-control.multi .selectize-input.input-active .has-items {
+  padding: 0;
+}
+.selectize-control.single .selectize-input:after,
+.selectize-control.multi .selectize-input:after,
+.selectize-control.single .selectize-input.input-active:after,
+.selectize-control.multi .selectize-input.input-active:after {
+  content: "\e611";
+  right: 5px;
+  position: absolute;
+  font-size: 7px;
+  font-family: 'Material-Design';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.selectize-control.single .selectize-input input,
+.selectize-control.multi .selectize-input input,
+.selectize-control.single .selectize-input.input-active input,
+.selectize-control.multi .selectize-input.input-active input {
+  font-size: 14px;
+  outline: 0px;
+  border: 0px;
+  background: transparent;
+}
+.selectize-control.single .selectize-input.floating-label-fix input,
+.selectize-control.multi .selectize-input.floating-label-fix input,
+.selectize-control.single .selectize-input.input-active.floating-label-fix input,
+.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
+  opacity: 0;
+}
+.selectize-control.single .selectize-input > div,
+.selectize-control.multi .selectize-input > div,
+.selectize-control.single .selectize-input.input-active > div,
+.selectize-control.multi .selectize-input.input-active > div,
+.selectize-control.single .selectize-input > .item,
+.selectize-control.multi .selectize-input > .item,
+.selectize-control.single .selectize-input.input-active > .item,
+.selectize-control.multi .selectize-input.input-active > .item {
+  display: inline-block;
+  margin: 0 8px 3px 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.selectize-control.single .selectize-input > div:after,
+.selectize-control.multi .selectize-input > div:after,
+.selectize-control.single .selectize-input.input-active > div:after,
+.selectize-control.multi .selectize-input.input-active > div:after,
+.selectize-control.single .selectize-input > .item:after,
+.selectize-control.multi .selectize-input > .item:after,
+.selectize-control.single .selectize-input.input-active > .item:after,
+.selectize-control.multi .selectize-input.input-active > .item:after {
+  content: ",";
+}
+.selectize-control.single .selectize-input > div:last-of-type:after,
+.selectize-control.multi .selectize-input > div:last-of-type:after,
+.selectize-control.single .selectize-input.input-active > div:last-of-type:after,
+.selectize-control.multi .selectize-input.input-active > div:last-of-type:after,
+.selectize-control.single .selectize-input > .item:last-of-type:after,
+.selectize-control.multi .selectize-input > .item:last-of-type:after,
+.selectize-control.single .selectize-input.input-active > .item:last-of-type:after,
+.selectize-control.multi .selectize-input.input-active > .item:last-of-type:after {
+  content: "";
+}
+.selectize-control.single .selectize-input > div.active,
+.selectize-control.multi .selectize-input > div.active,
+.selectize-control.single .selectize-input.input-active > div.active,
+.selectize-control.multi .selectize-input.input-active > div.active,
+.selectize-control.single .selectize-input > .item.active,
+.selectize-control.multi .selectize-input > .item.active,
+.selectize-control.single .selectize-input.input-active > .item.active,
+.selectize-control.multi .selectize-input.input-active > .item.active {
+  font-weight: bold;
+  background: transparent;
+  border: 0;
+}
+.selectize-control.single .selectize-dropdown,
+.selectize-control.multi .selectize-dropdown {
+  position: absolute;
+  z-index: 1000;
+  border: 0;
+  width: 100% !important;
+  left: 0 !important;
+  height: auto;
+  background-color: #FFF;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 2px;
+  padding: 0;
+  margin-top: 3px;
+}
+.selectize-control.single .selectize-dropdown .active,
+.selectize-control.multi .selectize-dropdown .active {
+  background-color: inherit;
+}
+.selectize-control.single .selectize-dropdown .highlight,
+.selectize-control.multi .selectize-dropdown .highlight {
+  background-color: #d5d8ff;
+}
+.selectize-control.single .selectize-dropdown .selected,
+.selectize-control.multi .selectize-dropdown .selected,
+.selectize-control.single .selectize-dropdown .selected.active,
+.selectize-control.multi .selectize-dropdown .selected.active {
+  background-color: #EEEEEE;
+}
+.selectize-control.single .selectize-dropdown [data-selectable],
+.selectize-control.multi .selectize-dropdown [data-selectable],
+.selectize-control.single .selectize-dropdown .optgroup-header,
+.selectize-control.multi .selectize-dropdown .optgroup-header {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.selectize-control.single .dropdown-active ~ .selectize-dropdown,
+.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
+  display: block;
+}

css-compiled/material.css

@@ -2364,6 +2364,9 @@ fieldset[disabled] .navbar .btn-link:focus {
 .dropdown-menu li a:hover {
   background: rgba(0, 0, 0, 0.08);
 }
+div {
+  background-color: white;
+}
 .alert {
   border: 0px;
   border-radius: 0;
@@ -3082,3 +3085,144 @@ fieldset[disabled] .navbar .btn-link:focus {
 .slider-material-lightgrey .noUi-handle {
   border-color: #ececec;
 }
+.selectize-control.single,
+.selectize-control.multi {
+  padding: 0;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.multi .selectize-input,
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.multi .selectize-input.input-active {
+  cursor: text;
+  background: transparent;
+  box-shadow: none;
+  border: 0;
+  padding: 0;
+  height: 100%;
+  font-size: 14px;
+  line-height: 30px;
+}
+.selectize-control.single .selectize-input .has-items,
+.selectize-control.multi .selectize-input .has-items,
+.selectize-control.single .selectize-input.input-active .has-items,
+.selectize-control.multi .selectize-input.input-active .has-items {
+  padding: 0;
+}
+.selectize-control.single .selectize-input:after,
+.selectize-control.multi .selectize-input:after,
+.selectize-control.single .selectize-input.input-active:after,
+.selectize-control.multi .selectize-input.input-active:after {
+  content: "\e611";
+  right: 5px;
+  position: absolute;
+  font-size: 7px;
+  font-family: 'Material-Design';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 4;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.selectize-control.single .selectize-input input,
+.selectize-control.multi .selectize-input input,
+.selectize-control.single .selectize-input.input-active input,
+.selectize-control.multi .selectize-input.input-active input {
+  font-size: 14px;
+  outline: 0px;
+  border: 0px;
+  background: transparent;
+}
+.selectize-control.single .selectize-input.floating-label-fix input,
+.selectize-control.multi .selectize-input.floating-label-fix input,
+.selectize-control.single .selectize-input.input-active.floating-label-fix input,
+.selectize-control.multi .selectize-input.input-active.floating-label-fix input {
+  opacity: 0;
+}
+.selectize-control.single .selectize-input > div,
+.selectize-control.multi .selectize-input > div,
+.selectize-control.single .selectize-input.input-active > div,
+.selectize-control.multi .selectize-input.input-active > div,
+.selectize-control.single .selectize-input > .item,
+.selectize-control.multi .selectize-input > .item,
+.selectize-control.single .selectize-input.input-active > .item,
+.selectize-control.multi .selectize-input.input-active > .item {
+  display: inline-block;
+  margin: 0 8px 3px 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.selectize-control.single .selectize-input > div:after,
+.selectize-control.multi .selectize-input > div:after,
+.selectize-control.single .selectize-input.input-active > div:after,
+.selectize-control.multi .selectize-input.input-active > div:after,
+.selectize-control.single .selectize-input > .item:after,
+.selectize-control.multi .selectize-input > .item:after,
+.selectize-control.single .selectize-input.input-active > .item:after,
+.selectize-control.multi .selectize-input.input-active > .item:after {
+  content: ",";
+}
+.selectize-control.single .selectize-input > div:last-of-type:after,
+.selectize-control.multi .selectize-input > div:last-of-type:after,
+.selectize-control.single .selectize-input.input-active > div:last-of-type:after,
+.selectize-control.multi .selectize-input.input-active > div:last-of-type:after,
+.selectize-control.single .selectize-input > .item:last-of-type:after,
+.selectize-control.multi .selectize-input > .item:last-of-type:after,
+.selectize-control.single .selectize-input.input-active > .item:last-of-type:after,
+.selectize-control.multi .selectize-input.input-active > .item:last-of-type:after {
+  content: "";
+}
+.selectize-control.single .selectize-input > div.active,
+.selectize-control.multi .selectize-input > div.active,
+.selectize-control.single .selectize-input.input-active > div.active,
+.selectize-control.multi .selectize-input.input-active > div.active,
+.selectize-control.single .selectize-input > .item.active,
+.selectize-control.multi .selectize-input > .item.active,
+.selectize-control.single .selectize-input.input-active > .item.active,
+.selectize-control.multi .selectize-input.input-active > .item.active {
+  font-weight: bold;
+  background: transparent;
+  border: 0;
+}
+.selectize-control.single .selectize-dropdown,
+.selectize-control.multi .selectize-dropdown {
+  position: absolute;
+  z-index: 1000;
+  border: 0;
+  width: 100% !important;
+  left: 0 !important;
+  height: auto;
+  background-color: #FFF;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border-radius: 2px;
+  padding: 0;
+  margin-top: 3px;
+}
+.selectize-control.single .selectize-dropdown .active,
+.selectize-control.multi .selectize-dropdown .active {
+  background-color: inherit;
+}
+.selectize-control.single .selectize-dropdown .highlight,
+.selectize-control.multi .selectize-dropdown .highlight {
+  background-color: #d5d8ff;
+}
+.selectize-control.single .selectize-dropdown .selected,
+.selectize-control.multi .selectize-dropdown .selected,
+.selectize-control.single .selectize-dropdown .selected.active,
+.selectize-control.multi .selectize-dropdown .selected.active {
+  background-color: #EEEEEE;
+}
+.selectize-control.single .selectize-dropdown [data-selectable],
+.selectize-control.multi .selectize-dropdown [data-selectable],
+.selectize-control.single .selectize-dropdown .optgroup-header,
+.selectize-control.multi .selectize-dropdown .optgroup-header {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.selectize-control.single .dropdown-active ~ .selectize-dropdown,
+.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
+  display: block;
+}

gruntfile.js

@@ -1,73 +0,0 @@
-module.exports = function(grunt) {
-
-    "use strict";
-
-    grunt.initConfig({
-
-        less: {
-            production: {
-                options: {
-                    paths: ["less"]
-                },
-                files: {
-                    "css-compiled/material.css": "less/material.less",
-                    "css-compiled/material-wfont.css": "less/material-wfont.less",
-                    "css-compiled/ripples.css": "less/ripples.less"
-                }
-            }
-        },
-
-        sass: {
-            production: {
-                files: {
-                    "css-compiled/material.css": "sass/material.scss",
-                    "css-compiled/material-wfont.css": "sass/material-wfont.scss",
-                    "css-compiled/ripples.css": "sass/ripples.scss"
-                }
-            }
-        },
-
-        autoprefixer: {
-            options: {
-                browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
-            },
-            dist: {
-                files: {
-                    "css-compiled/material.css": "css-compiled/material.css",
-                    "css-compiled/material-wfont.css": "css-compiled/material-wfont.css",
-                    "css-compiled/ripples.css": "css-compiled/ripples.css"
-                }
-            },
-        },
-
-        cssmin: {
-            minify: {
-                expand: true,
-                cwd: "css-compiled/",
-                src: ["*.css", "!*.min.css"],
-                dest: "css-compiled/",
-                ext: ".min.css"
-            }
-        },
-
-        copy: {
-            css: {
-                src: "css-compiled/*.min.css",
-                dest: "template/material/"
-            },
-            js: {
-                src: "scripts/*.js",
-                dest: "template/material/"
-            }
-
-        }
-
-    });
-    grunt.loadNpmTasks("grunt-contrib-less");
-    grunt.loadNpmTasks("grunt-contrib-sass");
-    grunt.loadNpmTasks("grunt-autoprefixer");
-    grunt.loadNpmTasks("grunt-contrib-cssmin");
-    grunt.loadNpmTasks("grunt-contrib-copy");
-    grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy"]);
-    grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "copy"]);
-};

less/_alerts.less

@@ -1,5 +1,4 @@
 // main: material.less
-
 .alert {
     border: 0px;
     border-radius: 0;

less/_plugin-selectize.less

@@ -0,0 +1,91 @@
+// Support for Selectize plugin
+// http://brianreavis.github.io/selectize.js/
+
+.selectize-control.single, .selectize-control.multi {
+    padding: 0;
+    .selectize-input, .selectize-input.input-active {
+
+        cursor: text;
+        background: transparent;
+        box-shadow: none;
+        border: 0;
+        padding: 0;
+        height: 100%;
+        font-size: 14px;
+        line-height: 30px;
+        .has-items {
+            padding: 0;
+        }
+        &:after {
+            content: "\e611";
+            right: 5px;
+            position: absolute;
+            font-size: 7px;
+            font-family: 'Material-Design';
+            speak: none;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 4;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        input {
+            font-size: 14px;
+            outline: 0px;
+            border: 0px;
+            background: transparent;
+        }
+        &.floating-label-fix input {
+            opacity: 0;
+        }
+        > div, > .item {
+            display: inline-block;
+            margin: 0 8px 3px 0;
+            padding: 0;
+            background: transparent;
+            border: 0;
+            &:after {
+                content: ",";
+            }
+            &:last-of-type:after {
+                content: "";
+            }
+            &.active {
+                font-weight: bold;
+                background: transparent;
+                border: 0;
+            }
+        }
+    }
+    .selectize-dropdown {
+        position: absolute;
+        z-index: 1000;
+        border: 0;
+        width: 100% !important;
+        left: 0 !important;
+        height: auto;
+        background-color: #FFF;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        border-radius: 2px;
+        padding: 0;
+        margin-top: 3px;
+        .active {
+            background-color: inherit;
+        }
+        .highlight {
+            background-color: #d5d8ff;
+        }
+        .selected, .selected.active {
+            background-color: #EEEEEE;
+        }
+        [data-selectable], .optgroup-header {
+            padding: 10px 20px;
+            cursor: pointer;
+        }
+    }
+    .dropdown-active ~ .selectize-dropdown {
+        display: block;
+    }
+}

less/material.less

@@ -1,10 +1,10 @@
 // Material Theme 0.0.1
 // -----------------------------------------------------
 
-@import "variables.less";
+@import "_variables.less";
-@import "mixins.less";
+@import "_mixins.less";
-@import "animations.less";
+@import "_animations.less";
-@import "shadows.less";
+@import "_shadows.less";
 
 body {
     background-color: #EEEEEE;
@@ -21,19 +21,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 // Well and Jumbotrons
-@import "welljumbo.less";
+@import "_welljumbo.less";
 
 // Buttons
-@import "buttons.less";
+@import "_buttons.less";
 
 // Checkboxes
-@import "checkboxes.less";
+@import "_checkboxes.less";
 
 // Radios
-@import "radios.less";
+@import "_radios.less";
 
 // Text inputs
-@import "inputs.less";
+@import "_inputs.less";
 
 legend {
     border-bottom: 0;
@@ -55,10 +55,10 @@ legend {
 }
 
 // Lists
-@import "lists.less";
+@import "_lists.less";
 
 // Navbar
-@import "navbar.less";
+@import "_navbar.less";
 
 .dropdown-menu {
     border: 0;
@@ -76,10 +76,10 @@ legend {
 }
 
 // Alerts
-@import "alerts.less";
+@import "_alerts.less";
 
 // Progress bar
-@import "progress.less";
+@import "_progress.less";
 
 // Typography
 .text-warning {
@@ -98,13 +98,14 @@ legend {
     color: @btn-info;
 }
 
-@import "tabs.less";
+@import "_tabs.less";
 
-@import "popups.less";
+@import "_popups.less";
 
-@import "icons.less";
+@import "_icons.less";
 
 
 // External plugins
-@import "plugin-snackbarjs.less";
+@import "_plugin-snackbarjs.less";
-@import "plugin-nouislider.less";
+@import "_plugin-nouislider.less";
+@import "_plugin-selectize.less";

package.json

@@ -19,9 +19,16 @@
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-autoprefixer": "^1.0.1",
+    "grunt-contrib-connect": "^0.8.0",
     "grunt-contrib-copy": "^0.6.0",
     "grunt-contrib-cssmin": "^0.10.0",
+    "grunt-contrib-jasmine": "^0.8.0",
+    "grunt-contrib-jshint": "^0.10.0",
     "grunt-contrib-less": "^0.11.4",
-    "grunt-contrib-sass": "^0.8.1"
+    "grunt-contrib-sass": "^0.8.1",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-newer": "^0.7.0",
+    "jshint-stylish": "^1.0.0",
+    "load-grunt-tasks": "^0.6.0"
   }
 }

scripts/ripples.js

@@ -1,14 +1,16 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
 /* globals CustomEvent */
 
-var ripples = {
+window.ripples = {
     init : function(withRipple) {
         "use strict";
 
         // Cross browser matches function
-        function matchesSelector(dom_element, selector) {
+        function matchesSelector(domElement, selector) {
-            var matches = dom_element.matches || dom_element.matchesSelector || dom_element.webkitMatchesSelector || dom_element.mozMatchesSelector || dom_element.msMatchesSelector || dom_element.oMatchesSelector;
+            var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector ||
-            return matches.call(dom_element, selector);
+                domElement.mozMatchesSelector ||
+                    domElement.msMatchesSelector || domElement.oMatchesSelector;
+            return matches.call(domElement, selector);
         }
 
         // animations time

template/material/scripts/ripples.js

@@ -1,14 +1,16 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
 /* globals CustomEvent */
 
-var ripples = {
+window.ripples = {
     init : function(withRipple) {
         "use strict";
 
         // Cross browser matches function
-        function matchesSelector(dom_element, selector) {
+        function matchesSelector(domElement, selector) {
-            var matches = dom_element.matches || dom_element.matchesSelector || dom_element.webkitMatchesSelector || dom_element.mozMatchesSelector || dom_element.msMatchesSelector || dom_element.oMatchesSelector;
+            var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector ||
-            return matches.call(dom_element, selector);
+                domElement.mozMatchesSelector ||
+                    domElement.msMatchesSelector || domElement.oMatchesSelector;
+            return matches.call(domElement, selector);
         }
 
         // animations time

test/.jshintrc

@@ -0,0 +1,47 @@
+{
+    "bitwise": true,
+    "camelcase": true,
+    "curly": true,
+    "eqeqeq": false,
+    "es3": false,
+    "forin": true,
+    "freeze": false,
+    "immed": true,
+    "indent": 4,
+    "latedef": true,
+    "newcap": true,
+    "noarg": true,
+    "noempty": true,
+    "nonbsp": true,
+    "nonew": true,
+    "plusplus": false,
+    "quotmark": "double",
+    "undef": true,
+    "unused": true,
+    "strict": false,
+    "trailing": true,
+    "maxparams": 5,
+    "maxdepth": 5,
+    "maxstatements": 50,
+    "maxlen": 150,
+
+    "eqnull": true,
+
+    "browser": false,
+    "devel": false,
+    "node": true,
+
+    "white": true,
+
+    "globals": {
+        "$": true,
+        "document": true,
+        "brackets": true,
+        "define": true,
+        "Mustache": true,
+        "window": true,
+        "expect": true,
+        "describe": true,
+        "it": true
+    }
+}

test/materialSpec.js

@@ -0,0 +1,9 @@
+'use strict';
+
+describe('Material', function (){
+
+    //Dummy test just to ensure tests are accurately configured
+    it('jquery should be loaded', function () {
+        expect($).toBeDefined();
+    });
+});