diff --git a/README.md b/README.md
index da5cc5d3..2f6269c8 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,12 @@ This theme is in early developement and is not ready for production.
 
 Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/).
 
+## How to install
+
+    bower install bootstrap-material-design --save
+
+
+## Features
 
 Currently supported elements:
 
diff --git a/bower.json b/bower.json
new file mode 100644
index 00000000..b126bd2e
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,26 @@
+{
+  "name": "Material Design for Bootstrap",
+  "version": "0.0.8",
+  "homepage": "http://fezvrasta.github.io/bootstrap-material-design",
+  "authors": [
+    "Federico Zivolo <info@mywebexpression.com>"
+  ],
+  "description": "Material Design theme for Bootstrap 3",
+  "main": "css-compiled/material.css",
+  "keywords": [
+    "material",
+    "design",
+    "bootstrap",
+    "theme",
+    "google",
+    "android"
+  ],
+  "license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/css-compiled/material.css b/css-compiled/material.css
index d2fd2bfa..0a396b53 100644
--- a/css-compiled/material.css
+++ b/css-compiled/material.css
@@ -1,4 +1,4 @@
-/* Generated by less 1.7.0 */
+/* Generated by less 1.7.5 */
 @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
 @-webkit-keyframes input-highlight {
   0% {
@@ -536,8 +536,8 @@ h6,
 }
 .checkbox input[type=checkbox] ~ .check {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 2px;
+  left: 11px;
   width: 18px;
   height: 18px;
   border: solid 2px;
@@ -1173,11 +1173,15 @@ h6,
 .radio input[type=radio][disabled] ~ .check {
   background-color: rgba(0, 0, 0, 0.84);
 }
+fieldset[disabled] .form-control,
 .form-control-wrapper .form-control,
 .form-control,
+fieldset[disabled] .form-control:focus,
 .form-control-wrapper .form-control:focus,
-.form-control:focus {
-  height: 28px;
+.form-control:focus,
+fieldset[disabled] .form-control.focus,
+.form-control-wrapper .form-control.focus,
+.form-control.focus {
   padding: 0;
   float: none;
   border: 0;
@@ -1186,24 +1190,42 @@ h6,
   background: transparent;
   border-bottom: 1px solid #757575;
 }
+fieldset[disabled] .form-control:not(textarea):not(select),
+.form-control-wrapper .form-control:not(textarea):not(select),
+.form-control:not(textarea):not(select),
+fieldset[disabled] .form-control:focus:not(textarea):not(select),
+.form-control-wrapper .form-control:focus:not(textarea):not(select),
+.form-control:focus:not(textarea):not(select),
+fieldset[disabled] .form-control.focus:not(textarea):not(select),
+.form-control-wrapper .form-control.focus:not(textarea):not(select),
+.form-control.focus:not(textarea):not(select) {
+  height: 28px;
+}
+fieldset[disabled] .form-control:disabled,
 .form-control-wrapper .form-control:disabled,
 .form-control:disabled,
+fieldset[disabled] .form-control:focus:disabled,
 .form-control-wrapper .form-control:focus:disabled,
-.form-control:focus:disabled {
+.form-control:focus:disabled,
+fieldset[disabled] .form-control.focus:disabled,
+.form-control-wrapper .form-control.focus:disabled,
+.form-control.focus:disabled {
   border-style: dashed;
 }
 select.form-control {
   height: 23px;
 }
 select[multiple].form-control,
-select[multiple].form-control:focus {
+select[multiple].form-control:focus,
+select[multiple].form-control.focus {
   height: 85px;
 }
 .form-control-wrapper {
   position: relative;
   /* active state */
 }
-.form-control-wrapper .form-control:focus {
+.form-control-wrapper .form-control:focus,
+.form-control-wrapper .form-control.focus {
   outline: none;
 }
 .form-control-wrapper .floating-label {
@@ -1221,14 +1243,18 @@ select[multiple].form-control:focus {
   font-size: 10px;
   opacity: 1;
 }
-.form-control-wrapper .form-control:focus:invalid ~ .floating-label {
+.form-control-wrapper .form-control:focus:invalid ~ .floating-label,
+.form-control-wrapper .form-control.focus:invalid ~ .floating-label {
   color: #f44336;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:after {
+.form-control-wrapper .form-control:focus ~ .material-input:after,
+.form-control-wrapper .form-control.focus ~ .material-input:after {
   background-color: #5264ae;
 }
 .form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
-.form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
+.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
+.form-control-wrapper .form-control:focus:invalid ~ .material-input:after,
+.form-control-wrapper .form-control.focus:invalid ~ .material-input:after {
   background-color: #f44336;
 }
 .form-control-wrapper .form-control.empty ~ .floating-label {
@@ -1245,7 +1271,8 @@ select[multiple].form-control:focus {
   transform: scaleX(0);
   transition: transform 0s;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:before {
+.form-control-wrapper .form-control:focus ~ .material-input:before,
+.form-control-wrapper .form-control.focus ~ .material-input:before {
   transform: scaleX(1);
   transition: transform 0.2s ease-out;
 }
@@ -1270,7 +1297,8 @@ select[multiple].form-control:focus {
 .form-control-wrapper textarea ~ .form-control-highlight {
   margin-top: -11px;
 }
-.form-control-wrapper .form-control:focus ~ .material-input:after {
+.form-control-wrapper .form-control:focus ~ .material-input:after,
+.form-control-wrapper .form-control.focus ~ .material-input:after {
   -webkit-animation: input-highlight 0.3s ease;
   animation: input-highlight 0.3s ease;
   -webkit-animation-fill-mode: forwards;
@@ -1284,7 +1312,8 @@ select[multiple].form-control:focus {
   display: none;
 }
 .form-group.has-warning .material-input:before,
-.form-group.has-warning input.form-control:focus ~ .material-input:after {
+.form-group.has-warning input.form-control:focus ~ .material-input:after,
+.form-group.has-warning input.form-control.focus ~ .material-input:after {
   background: #ff5722;
 }
 .form-group.has-warning .control-label,
@@ -1292,7 +1321,8 @@ select[multiple].form-control:focus {
   color: #ff5722;
 }
 .form-group.has-error .material-input:before,
-.form-group.has-error input.form-control:focus ~ .material-input:after {
+.form-group.has-error input.form-control:focus ~ .material-input:after,
+.form-group.has-error input.form-control.focus ~ .material-input:after {
   background: #f44336;
 }
 .form-group.has-error .control-label,
@@ -1300,7 +1330,8 @@ select[multiple].form-control:focus {
   color: #f44336;
 }
 .form-group.has-success .material-input:before,
-.form-group.has-success input.form-control:focus ~ .material-input:after {
+.form-group.has-success input.form-control:focus ~ .material-input:after,
+.form-group.has-success input.form-control.focus ~ .material-input:after {
   background: #0f9d58;
 }
 .form-group.has-success .control-label,
@@ -1308,7 +1339,8 @@ select[multiple].form-control:focus {
   color: #0f9d58;
 }
 .form-group.has-info .material-input:before,
-.form-group.has-info input.form-control:focus ~ .material-input:after {
+.form-group.has-info input.form-control:focus ~ .material-input:after,
+.form-group.has-info input.form-control.focus ~ .material-input:after {
   background: #03a9f4;
 }
 .form-group.has-info .control-label,
@@ -1455,6 +1487,76 @@ select[multiple].form-control:focus {
 .form-group-material-lightgrey input.form-control:focus ~ .material-input:after {
   background-color: #ececec;
 }
+.form-group input.form-control.focus ~ .material-input:after,
+.form-group-default input.form-control.focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-primary input.form-control.focus ~ .material-input:after {
+  background-color: #4285f4;
+}
+.form-group-success input.form-control.focus ~ .material-input:after {
+  background-color: #0f9d58;
+}
+.form-group-info input.form-control.focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-warning input.form-control.focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-danger input.form-control.focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-red input.form-control.focus ~ .material-input:after {
+  background-color: #f44336;
+}
+.form-group-material-pink input.form-control.focus ~ .material-input:after {
+  background-color: #e91e63;
+}
+.form-group-material-purple input.form-control.focus ~ .material-input:after {
+  background-color: #9c27b0;
+}
+.form-group-material-deeppurple input.form-control.focus ~ .material-input:after {
+  background-color: #673ab7;
+}
+.form-group-material-indigo input.form-control.focus ~ .material-input:after {
+  background-color: #3f51b5;
+}
+.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
+  background-color: #03a9f4;
+}
+.form-group-material-cyan input.form-control.focus ~ .material-input:after {
+  background-color: #00bcd4;
+}
+.form-group-material-teal input.form-control.focus ~ .material-input:after {
+  background-color: #009688;
+}
+.form-group-material-lightgreen input.form-control.focus ~ .material-input:after {
+  background-color: #8bc34a;
+}
+.form-group-material-lime input.form-control.focus ~ .material-input:after {
+  background-color: #cddc39;
+}
+.form-group-material-lightyellow input.form-control.focus ~ .material-input:after {
+  background-color: #ffeb3b;
+}
+.form-group-material-orange input.form-control.focus ~ .material-input:after {
+  background-color: #ff9800;
+}
+.form-group-material-deeporange input.form-control.focus ~ .material-input:after {
+  background-color: #ff5722;
+}
+.form-group-material-grey input.form-control.focus ~ .material-input:after {
+  background-color: #9e9e9e;
+}
+.form-group-material-bluegrey input.form-control.focus ~ .material-input:after {
+  background-color: #607d8b;
+}
+.form-group-material-brown input.form-control.focus ~ .material-input:after {
+  background-color: #795548;
+}
+.form-group-material-lightgrey input.form-control.focus ~ .material-input:after {
+  background-color: #ececec;
+}
 .form-group .control-label,
 .form-group-default .control-label {
   color: rgba(0, 0, 0, 0.84);
@@ -1615,7 +1717,8 @@ select.form-control {
   border-bottom: 1px solid #757575;
   border-radius: 0;
 }
-select.form-control:focus {
+select.form-control:focus,
+select.form-control.focus {
   box-shadow: none;
   border-color: #757575;
 }
diff --git a/demo/index.html b/demo/index.html
index b6b7800d..16f92bfb 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1342,7 +1342,7 @@
 
                         <form class="bs-component">
                             <div class="form-group">
-                                <input class="form-control floating-label" id="focusedInput" type="text" placeholder="Floating label on click input">
+                                <input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float">
                             </div>
 
                             <div class="form-group">
diff --git a/less/checkboxes.less b/less/checkboxes.less
index da4335a5..c559513a 100644
--- a/less/checkboxes.less
+++ b/less/checkboxes.less
@@ -41,8 +41,8 @@
 
     input[type=checkbox] ~ .check {
         position: absolute;
-        top: 0px;
-        left: 0px;
+        top: 2px;
+        left: 11px;
         width: 18px;
         height: 18px;
         border: solid 2px;
diff --git a/less/inputs.less b/less/inputs.less
index 2e6b58bc..ad438a56 100644
--- a/less/inputs.less
+++ b/less/inputs.less
@@ -1,8 +1,10 @@
 // main: material.less
 
-.form-control-wrapper .form-control, .form-control {
-    &, &:focus {
-        height: 28px;
+fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
+    &, &:focus, &.focus {
+        &:not(textarea):not(select) {
+            height: 28px;
+        }
         padding: 0;
         float: none;
         border: 0;
@@ -19,7 +21,7 @@ select.form-control {
     height: 23px;
 }
 select[multiple].form-control {
-    &, &:focus {
+    &, &:focus, &.focus {
         height: 85px;
     }
 }
@@ -27,7 +29,7 @@ select[multiple].form-control {
 .form-control-wrapper {
     position: relative;
 
-    .form-control:focus {
+    .form-control:focus, .form-control.focus {
         outline: none;
     }
 
@@ -46,13 +48,13 @@ select[multiple].form-control {
         font-size: 10px;
         opacity: 1;
     }
-    .form-control:focus:invalid ~ .floating-label {
+    .form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
         color: @input-danger;
     }
-    .form-control:focus ~ .material-input:after {
+    .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
         background-color: @input-default;
     }
-    .form-control:focus:invalid ~ .material-input {
+    .form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
         &:before, &:after  {
             background-color: @input-danger;
         }
@@ -71,7 +73,7 @@ select[multiple].form-control {
         transform: scaleX(0);
         transition: transform 0s;
     }
-    .form-control:focus  ~ .material-input:before {
+    .form-control:focus  ~ .material-input:before, .form-control.focus  ~ .material-input:before {
         transform: scaleX(1);
         transition: transform 0.2s ease-out;
     }
@@ -96,7 +98,7 @@ select[multiple].form-control {
     }
 
     /* active state */
-    .form-control:focus ~ .material-input:after {
+    .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
         -webkit-animation: input-highlight 0.3s ease;
         animation: input-highlight 0.3s ease;
         -webkit-animation-fill-mode: forwards;
@@ -115,7 +117,7 @@ select[multiple].form-control {
 
 .form-group {
     &.has-warning {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-warning;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -123,7 +125,7 @@ select[multiple].form-control {
         }
     }
     &.has-error {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-danger;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -131,7 +133,7 @@ select[multiple].form-control {
         }
     }
     &.has-success {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-success;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -139,7 +141,7 @@ select[multiple].form-control {
         }
     }
     &.has-info {
-        .material-input:before, input.form-control:focus ~ .material-input:after {
+        .material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
             background: @input-info;
         }
         .control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -148,6 +150,7 @@ select[multiple].form-control {
     }
     .variations(~" .material-input:before", background-color, @indigo);
     .variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo);
+    .variations(~" input.form-control.focus ~ .material-input:after", background-color, @indigo);
     .variations(~" .control-label", color, @lightbg-text);
     .variations(~" input.form-control:not(.empty) ~ .floating-label", color, @indigo);
 
@@ -175,7 +178,7 @@ select.form-control {
     box-shadow: none;
     border-bottom: 1px solid #757575;
     border-radius: 0;
-    &:focus {
+    &:focus, &.focus {
         box-shadow: none;
         border-color: #757575;
     }
diff --git a/less/material.less b/less/material.less
index c467ccea..d53340aa 100644
--- a/less/material.less
+++ b/less/material.less
@@ -2,7 +2,7 @@
 // Material Theme 0.0.1
 // -----------------------------------------------------
 
-@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
+@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
 
 @import "variables.less";
 @import "mixins.less";
diff --git a/less/test.css b/less/test.css
new file mode 100644
index 00000000..03617ac4
--- /dev/null
+++ b/less/test.css
@@ -0,0 +1,10 @@
+/* Generated by less 1.7.0 */
+.btn-default {
+  color: #000000;
+}
+.btn-primary {
+  color: #4285f4;
+}
+.btn-success {
+  color: #0f9d58;
+}
diff --git a/less/test.less b/less/test.less
new file mode 100644
index 00000000..d2f9117e
--- /dev/null
+++ b/less/test.less
@@ -0,0 +1,39 @@
+@import "variables.less";
+
+.color(@default) {
+    &-default {
+        color: @default;
+    }
+    &-primary {
+        color: @primary;
+    }
+    &-success {
+        color: @success;
+    }
+    // etc
+}
+.btn {
+    .color(black);
+}
+
+.background(@default) {
+    &-default {
+        color: @default;
+    }
+    &-primary {
+        color: @primary;
+    }
+    &-success {
+        color: @success;
+    }
+}
+
+.variations(@extra, @property) {
+    &-default@{extra}  { &:extend(.@{property}-default); }
+    &-primary@{extra}  { &:extend(.@{property}-primary); }
+// etc
+}
+
+.label {
+    .variations(~"", btn);
+}
diff --git a/scripts/material.js b/scripts/material.js
index 04be9b07..d88d0628 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -5,10 +5,10 @@ $(function (){
     ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
 
     // Add fake-checkbox to material checkboxes
-    $(".checkbox label input").after("<span class=ripple></span><span class=check></span>");
+    $(".checkbox > label > input").after("<span class=ripple></span><span class=check></span>");
 
     // Add fake-radio to material radios
-    $(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
+    $(".radio > label > input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
 
     // Add elements for material inputs
     $("input.form-control, textarea.form-control, select.form-control").each( function() {
@@ -24,12 +24,15 @@ $(function (){
         }
     });
 
-    $(document).on("keyup", ".form-control", function() {
+    $(document).on("keyup change", ".form-control", function() {
         if ($(this).val() !== "") {
             $(this).removeClass("empty");
         } else {
             $(this).addClass("empty");
         }
     });
+    $(document).on("keydown", ".form-control", function() {
+        $(this).removeClass("empty");
+    });
 });