first implementation of fun stats site

22 files changed, 1144 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/scss/variables/_colors-map.scss b/templates/assets/bootstrap-material-design/scss/variables/_colors-map.scss
new file mode 100644
index 0000000..b20e34a
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/_colors-map.scss
@@ -0,0 +1,311 @@
+// these might be useful in a switch to sass...at some point.
+
+//$bmd-colors: (
+//        "red": $red,
+//        "pink": $pink,
+//        "purple": $purple,
+//        "deep-purple": $deep-purple,
+//        "indigo": $indigo,
+//        "blue": $blue,
+//        "light-blue": $light-blue,
+//        "cyan": $cyan,
+//        "teal": $teal,
+//        "green": $green,
+//        "light-green": $light-green,
+//        "lime": $lime,
+//        "yellow": $yellow,
+//        "amber": $amber,
+//        "orange": $orange,
+//        "deep-orange": $deep-orange,
+//        "brown": $brown,
+//        "grey": $grey,
+//        "blue-grey": $blue-grey
+//);
+//
+//$bmd-colors-map: (
+//        "red-50": (name: "red", color: $red-50, number: "-50"),
+//        "red-100": (name: "red", color: $red-100, number: "-100"),
+//        "red-200": (name: "red", color: $red-200, number: "-200"),
+//        "red-300": (name: "red", color: $red-300, number: "-300"),
+//        "red-400": (name: "red", color: $red-400, number: "-400"),
+//        "red-500": (name: "red", color: $red-500, number: "-500"),
+//        "red-600": (name: "red", color: $red-600, number: "-600"),
+//        "red-700": (name: "red", color: $red-700, number: "-700"),
+//        "red-800": (name: "red", color: $red-800, number: "-800"),
+//        "red-900": (name: "red", color: $red-900, number: "-900"),
+//        "red-a100": (name: "red", color: $red-a100, number: "-a100"),
+//        "red-a200": (name: "red", color: $red-a200, number: "-a200"),
+//        "red-a400": (name: "red", color: $red-a400, number: "-a400"),
+//        "red-a700": (name: "red", color: $red-a700, number: "-a700"),
+//        "red": (name: "red", color: $red, number: ""),
+//        "pink-50": (name: "pink", color: $pink-50, number: "-50"),
+//        "pink-100": (name: "pink", color: $pink-100, number: "-100"),
+//        "pink-200": (name: "pink", color: $pink-200, number: "-200"),
+//        "pink-300": (name: "pink", color: $pink-300, number: "-300"),
+//        "pink-400": (name: "pink", color: $pink-400, number: "-400"),
+//        "pink-500": (name: "pink", color: $pink-500, number: "-500"),
+//        "pink-600": (name: "pink", color: $pink-600, number: "-600"),
+//        "pink-700": (name: "pink", color: $pink-700, number: "-700"),
+//        "pink-800": (name: "pink", color: $pink-800, number: "-800"),
+//        "pink-900": (name: "pink", color: $pink-900, number: "-900"),
+//        "pink-a100": (name: "pink", color: $pink-a100, number: "-a100"),
+//        "pink-a200": (name: "pink", color: $pink-a200, number: "-a200"),
+//        "pink-a400": (name: "pink", color: $pink-a400, number: "-a400"),
+//        "pink-a700": (name: "pink", color: $pink-a700, number: "-a700"),
+//        "pink": (name: "pink", color: $pink, number: ""),
+//        "purple-50": (name: "purple", color: $purple-50, number: "-50"),
+//        "purple-100": (name: "purple", color: $purple-100, number: "-100"),
+//        "purple-200": (name: "purple", color: $purple-200, number: "-200"),
+//        "purple-300": (name: "purple", color: $purple-300, number: "-300"),
+//        "purple-400": (name: "purple", color: $purple-400, number: "-400"),
+//        "purple-500": (name: "purple", color: $purple-500, number: "-500"),
+//        "purple-600": (name: "purple", color: $purple-600, number: "-600"),
+//        "purple-700": (name: "purple", color: $purple-700, number: "-700"),
+//        "purple-800": (name: "purple", color: $purple-800, number: "-800"),
+//        "purple-900": (name: "purple", color: $purple-900, number: "-900"),
+//        "purple-a100": (name: "purple", color: $purple-a100, number: "-a100"),
+//        "purple-a200": (name: "purple", color: $purple-a200, number: "-a200"),
+//        "purple-a400": (name: "purple", color: $purple-a400, number: "-a400"),
+//        "purple-a700": (name: "purple", color: $purple-a700, number: "-a700"),
+//        "purple": (name: "purple", color: $purple, number: ""),
+//        "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
+//        "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"),
+//        "deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"),
+//        "deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"),
+//        "deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"),
+//        "deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"),
+//        "deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"),
+//        "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
+//        "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"),
+//        "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
+//        "deep-purple-a100": (name: "deep-purple", color: $deep-purple-a100, number: "-a100"),
+//        "deep-purple-a200": (name: "deep-purple", color: $deep-purple-a200, number: "-a200"),
+//        "deep-purple-a400": (name: "deep-purple", color: $deep-purple-a400, number: "-a400"),
+//        "deep-purple-a700": (name: "deep-purple", color: $deep-purple-a700, number: "-a700"),
+//        "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
+//        "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
+//        "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
+//        "indigo-200": (name: "indigo", color: $indigo-200, number: "-200"),
+//        "indigo-300": (name: "indigo", color: $indigo-300, number: "-300"),
+//        "indigo-400": (name: "indigo", color: $indigo-400, number: "-400"),
+//        "indigo-500": (name: "indigo", color: $indigo-500, number: "-500"),
+//        "indigo-600": (name: "indigo", color: $indigo-600, number: "-600"),
+//        "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
+//        "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
+//        "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
+//        "indigo-a100": (name: "indigo", color: $indigo-a100, number: "-a100"),
+//        "indigo-a200": (name: "indigo", color: $indigo-a200, number: "-a200"),
+//        "indigo-a400": (name: "indigo", color: $indigo-a400, number: "-a400"),
+//        "indigo-a700": (name: "indigo", color: $indigo-a700, number: "-a700"),
+//        "indigo": (name: "indigo", color: $indigo, number: ""),
+//        "blue-50": (name: "blue", color: $blue-50, number: "-50"),
+//        "blue-100": (name: "blue", color: $blue-100, number: "-100"),
+//        "blue-200": (name: "blue", color: $blue-200, number: "-200"),
+//        "blue-300": (name: "blue", color: $blue-300, number: "-300"),
+//        "blue-400": (name: "blue", color: $blue-400, number: "-400"),
+//        "blue-500": (name: "blue", color: $blue-500, number: "-500"),
+//        "blue-600": (name: "blue", color: $blue-600, number: "-600"),
+//        "blue-700": (name: "blue", color: $blue-700, number: "-700"),
+//        "blue-800": (name: "blue", color: $blue-800, number: "-800"),
+//        "blue-900": (name: "blue", color: $blue-900, number: "-900"),
+//        "blue-a100": (name: "blue", color: $blue-a100, number: "-a100"),
+//        "blue-a200": (name: "blue", color: $blue-a200, number: "-a200"),
+//        "blue-a400": (name: "blue", color: $blue-a400, number: "-a400"),
+//        "blue-a700": (name: "blue", color: $blue-a700, number: "-a700"),
+//        "blue": (name: "blue", color: $blue, number: ""),
+//        "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
+//        "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"),
+//        "light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"),
+//        "light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"),
+//        "light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"),
+//        "light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"),
+//        "light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"),
+//        "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
+//        "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"),
+//        "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
+//        "light-blue-a100": (name: "light-blue", color: $light-blue-a100, number: "-a100"),
+//        "light-blue-a200": (name: "light-blue", color: $light-blue-a200, number: "-a200"),
+//        "light-blue-a400": (name: "light-blue", color: $light-blue-a400, number: "-a400"),
+//        "light-blue-a700": (name: "light-blue", color: $light-blue-a700, number: "-a700"),
+//        "light-blue": (name: "light-blue", color: $light-blue, number: ""),
+//        "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
+//        "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
+//        "cyan-200": (name: "cyan", color: $cyan-200, number: "-200"),
+//        "cyan-300": (name: "cyan", color: $cyan-300, number: "-300"),
+//        "cyan-400": (name: "cyan", color: $cyan-400, number: "-400"),
+//        "cyan-500": (name: "cyan", color: $cyan-500, number: "-500"),
+//        "cyan-600": (name: "cyan", color: $cyan-600, number: "-600"),
+//        "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
+//        "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
+//        "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
+//        "cyan-a100": (name: "cyan", color: $cyan-a100, number: "-a100"),
+//        "cyan-a200": (name: "cyan", color: $cyan-a200, number: "-a200"),
+//        "cyan-a400": (name: "cyan", color: $cyan-a400, number: "-a400"),
+//        "cyan-a700": (name: "cyan", color: $cyan-a700, number: "-a700"),
+//        "cyan": (name: "cyan", color: $cyan, number: ""),
+//        "teal-50": (name: "teal", color: $teal-50, number: "-50"),
+//        "teal-100": (name: "teal", color: $teal-100, number: "-100"),
+//        "teal-200": (name: "teal", color: $teal-200, number: "-200"),
+//        "teal-300": (name: "teal", color: $teal-300, number: "-300"),
+//        "teal-400": (name: "teal", color: $teal-400, number: "-400"),
+//        "teal-500": (name: "teal", color: $teal-500, number: "-500"),
+//        "teal-600": (name: "teal", color: $teal-600, number: "-600"),
+//        "teal-700": (name: "teal", color: $teal-700, number: "-700"),
+//        "teal-800": (name: "teal", color: $teal-800, number: "-800"),
+//        "teal-900": (name: "teal", color: $teal-900, number: "-900"),
+//        "teal-a100": (name: "teal", color: $teal-a100, number: "-a100"),
+//        "teal-a200": (name: "teal", color: $teal-a200, number: "-a200"),
+//        "teal-a400": (name: "teal", color: $teal-a400, number: "-a400"),
+//        "teal-a700": (name: "teal", color: $teal-a700, number: "-a700"),
+//        "teal": (name: "teal", color: $teal, number: ""),
+//        "green-50": (name: "green", color: $green-50, number: "-50"),
+//        "green-100": (name: "green", color: $green-100, number: "-100"),
+//        "green-200": (name: "green", color: $green-200, number: "-200"),
+//        "green-300": (name: "green", color: $green-300, number: "-300"),
+//        "green-400": (name: "green", color: $green-400, number: "-400"),
+//        "green-500": (name: "green", color: $green-500, number: "-500"),
+//        "green-600": (name: "green", color: $green-600, number: "-600"),
+//        "green-700": (name: "green", color: $green-700, number: "-700"),
+//        "green-800": (name: "green", color: $green-800, number: "-800"),
+//        "green-900": (name: "green", color: $green-900, number: "-900"),
+//        "green-a100": (name: "green", color: $green-a100, number: "-a100"),
+//        "green-a200": (name: "green", color: $green-a200, number: "-a200"),
+//        "green-a400": (name: "green", color: $green-a400, number: "-a400"),
+//        "green-a700": (name: "green", color: $green-a700, number: "-a700"),
+//        "green": (name: "green", color: $green, number: ""),
+//        "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
+//        "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"),
+//        "light-green-200": (name: "light-green", color: $light-green-200, number: "-200"),
+//        "light-green-300": (name: "light-green", color: $light-green-300, number: "-300"),
+//        "light-green-400": (name: "light-green", color: $light-green-400, number: "-400"),
+//        "light-green-500": (name: "light-green", color: $light-green-500, number: "-500"),
+//        "light-green-600": (name: "light-green", color: $light-green-600, number: "-600"),
+//        "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"),
+//        "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"),
+//        "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"),
+//        "light-green-a100": (name: "light-green", color: $light-green-a100, number: "-a100"),
+//        "light-green-a200": (name: "light-green", color: $light-green-a200, number: "-a200"),
+//        "light-green-a400": (name: "light-green", color: $light-green-a400, number: "-a400"),
+//        "light-green-a700": (name: "light-green", color: $light-green-a700, number: "-a700"),
+//        "light-green": (name: "light-green", color: $light-green, number: ""),
+//        "lime-50": (name: "lime", color: $lime-50, number: "-50"),
+//        "lime-100": (name: "lime", color: $lime-100, number: "-100"),
+//        "lime-200": (name: "lime", color: $lime-200, number: "-200"),
+//        "lime-300": (name: "lime", color: $lime-300, number: "-300"),
+//        "lime-400": (name: "lime", color: $lime-400, number: "-400"),
+//        "lime-500": (name: "lime", color: $lime-500, number: "-500"),
+//        "lime-600": (name: "lime", color: $lime-600, number: "-600"),
+//        "lime-700": (name: "lime", color: $lime-700, number: "-700"),
+//        "lime-800": (name: "lime", color: $lime-800, number: "-800"),
+//        "lime-900": (name: "lime", color: $lime-900, number: "-900"),
+//        "lime-a100": (name: "lime", color: $lime-a100, number: "-a100"),
+//        "lime-a200": (name: "lime", color: $lime-a200, number: "-a200"),
+//        "lime-a400": (name: "lime", color: $lime-a400, number: "-a400"),
+//        "lime-a700": (name: "lime", color: $lime-a700, number: "-a700"),
+//        "lime": (name: "lime", color: $lime, number: ""),
+//        "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
+//        "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
+//        "yellow-200": (name: "yellow", color: $yellow-200, number: "-200"),
+//        "yellow-300": (name: "yellow", color: $yellow-300, number: "-300"),
+//        "yellow-400": (name: "yellow", color: $yellow-400, number: "-400"),
+//        "yellow-500": (name: "yellow", color: $yellow-500, number: "-500"),
+//        "yellow-600": (name: "yellow", color: $yellow-600, number: "-600"),
+//        "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
+//        "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
+//        "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
+//        "yellow-a100": (name: "yellow", color: $yellow-a100, number: "-a100"),
+//        "yellow-a200": (name: "yellow", color: $yellow-a200, number: "-a200"),
+//        "yellow-a400": (name: "yellow", color: $yellow-a400, number: "-a400"),
+//        "yellow-a700": (name: "yellow", color: $yellow-a700, number: "-a700"),
+//        "yellow": (name: "yellow", color: $yellow, number: ""),
+//        "amber-50": (name: "amber", color: $amber-50, number: "-50"),
+//        "amber-100": (name: "amber", color: $amber-100, number: "-100"),
+//        "amber-200": (name: "amber", color: $amber-200, number: "-200"),
+//        "amber-300": (name: "amber", color: $amber-300, number: "-300"),
+//        "amber-400": (name: "amber", color: $amber-400, number: "-400"),
+//        "amber-500": (name: "amber", color: $amber-500, number: "-500"),
+//        "amber-600": (name: "amber", color: $amber-600, number: "-600"),
+//        "amber-700": (name: "amber", color: $amber-700, number: "-700"),
+//        "amber-800": (name: "amber", color: $amber-800, number: "-800"),
+//        "amber-900": (name: "amber", color: $amber-900, number: "-900"),
+//        "amber-a100": (name: "amber", color: $amber-a100, number: "-a100"),
+//        "amber-a200": (name: "amber", color: $amber-a200, number: "-a200"),
+//        "amber-a400": (name: "amber", color: $amber-a400, number: "-a400"),
+//        "amber-a700": (name: "amber", color: $amber-a700, number: "-a700"),
+//        "amber": (name: "amber", color: $amber, number: ""),
+//        "orange-50": (name: "orange", color: $orange-50, number: "-50"),
+//        "orange-100": (name: "orange", color: $orange-100, number: "-100"),
+//        "orange-200": (name: "orange", color: $orange-200, number: "-200"),
+//        "orange-300": (name: "orange", color: $orange-300, number: "-300"),
+//        "orange-400": (name: "orange", color: $orange-400, number: "-400"),
+//        "orange-500": (name: "orange", color: $orange-500, number: "-500"),
+//        "orange-600": (name: "orange", color: $orange-600, number: "-600"),
+//        "orange-700": (name: "orange", color: $orange-700, number: "-700"),
+//        "orange-800": (name: "orange", color: $orange-800, number: "-800"),
+//        "orange-900": (name: "orange", color: $orange-900, number: "-900"),
+//        "orange-a100": (name: "orange", color: $orange-a100, number: "-a100"),
+//        "orange-a200": (name: "orange", color: $orange-a200, number: "-a200"),
+//        "orange-a400": (name: "orange", color: $orange-a400, number: "-a400"),
+//        "orange-a700": (name: "orange", color: $orange-a700, number: "-a700"),
+//        "orange": (name: "orange", color: $orange, number: ""),
+//        "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
+//        "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"),
+//        "deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"),
+//        "deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"),
+//        "deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"),
+//        "deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"),
+//        "deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"),
+//        "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
+//        "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"),
+//        "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
+//        "deep-orange-a100": (name: "deep-orange", color: $deep-orange-a100, number: "-a100"),
+//        "deep-orange-a200": (name: "deep-orange", color: $deep-orange-a200, number: "-a200"),
+//        "deep-orange-a400": (name: "deep-orange", color: $deep-orange-a400, number: "-a400"),
+//        "deep-orange-a700": (name: "deep-orange", color: $deep-orange-a700, number: "-a700"),
+//        "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
+//        "brown-50": (name: "brown", color: $brown-50, number: "-50"),
+//        "brown-100": (name: "brown", color: $brown-100, number: "-100"),
+//        "brown-200": (name: "brown", color: $brown-200, number: "-200"),
+//        "brown-300": (name: "brown", color: $brown-300, number: "-300"),
+//        "brown-400": (name: "brown", color: $brown-400, number: "-400"),
+//        "brown-500": (name: "brown", color: $brown-500, number: "-500"),
+//        "brown-600": (name: "brown", color: $brown-600, number: "-600"),
+//        "brown-700": (name: "brown", color: $brown-700, number: "-700"),
+//        "brown-800": (name: "brown", color: $brown-800, number: "-800"),
+//        "brown-900": (name: "brown", color: $brown-900, number: "-900"),
+//        "brown-a100": (name: "brown", color: $brown-a100, number: "-a100"),
+//        "brown-a200": (name: "brown", color: $brown-a200, number: "-a200"),
+//        "brown-a400": (name: "brown", color: $brown-a400, number: "-a400"),
+//        "brown-a700": (name: "brown", color: $brown-a700, number: "-a700"),
+//        "brown": (name: "brown", color: $brown, number: ""),
+//        "grey-50": (name: "grey", color: $grey-50, number: "-50"),
+//        "grey-100": (name: "grey", color: $grey-100, number: "-100"),
+//        "grey-200": (name: "grey", color: $grey-200, number: "-200"),
+//        "grey-300": (name: "grey", color: $grey-300, number: "-300"),
+//        "grey-400": (name: "grey", color: $grey-400, number: "-400"),
+//        "grey-500": (name: "grey", color: $grey-500, number: "-500"),
+//        "grey-600": (name: "grey", color: $grey-600, number: "-600"),
+//        "grey-700": (name: "grey", color: $grey-700, number: "-700"),
+//        "grey-800": (name: "grey", color: $grey-800, number: "-800"),
+//        "grey-900": (name: "grey", color: $grey-900, number: "-900"),
+//        "grey-a100": (name: "grey", color: $grey-a100, number: "-a100"),
+//        "grey-a200": (name: "grey", color: $grey-a200, number: "-a200"),
+//        "grey-a400": (name: "grey", color: $grey-a400, number: "-a400"),
+//        "grey-a700": (name: "grey", color: $grey-a700, number: "-a700"),
+//        "grey": (name: "grey", color: $grey, number: ""),
+//        "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
+//        "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"),
+//        "blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"),
+//        "blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"),
+//        "blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"),
+//        "blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"),
+//        "blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"),
+//        "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
+//        "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"),
+//        "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
+//        "blue-grey-a100": (name: "blue-grey", color: $blue-grey-a100, number: "-a100"),
+//        "blue-grey-a200": (name: "blue-grey", color: $blue-grey-a200, number: "-a200"),
+//        "blue-grey-a400": (name: "blue-grey", color: $blue-grey-a400, number: "-a400"),
+//        "blue-grey-a700": (name: "blue-grey", color: $blue-grey-a700, number: "-a700"),
+//        "blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
+//);
diff --git a/templates/assets/bootstrap-material-design/scss/variables/_colors.scss b/templates/assets/bootstrap-material-design/scss/variables/_colors.scss
new file mode 100644
index 0000000..c805cc5
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/_colors.scss
@@ -0,0 +1,356 @@
+//
+//To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
+//
+//Then, run this script to get the list@mixin (function(){
+//  var colors = {}, main = {};
+//  $(".color-group")@mixin each(function(){
+//    var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
+//    colors[color] = {};
+//
+//    $(this)@mixin find(".color").not(".main-color").each(function(){
+//      var shade = $(this).find(".shade").text().trim(),
+//          hex   = $(this).find(".hex").text().trim();
+//
+//      colors[color][shade] = hex;
+//    });
+//    main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
+//
+//  });
+//  var LESS = "";
+//  $@mixin each(colors, function(name, shades){
+//    LESS += "\n\n";
+//    $@mixin each(shades, function(shade, hex){
+//      LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default;
+//    });
+//    if (main[name]) {
+//      LESS += "$" + name + ": " + main[name] + ";\n" !default;
+//    }
+//  });
+//  console.log(LESS);
+//})();
+
+$red-50: #ffebee !default;
+$red-100: #ffcdd2 !default;
+$red-200: #ef9a9a !default;
+$red-300: #e57373 !default;
+$red-400: #ef5350 !default;
+$red-500: #f44336 !default;
+$red-600: #e53935 !default;
+$red-700: #d32f2f !default;
+$red-800: #c62828 !default;
+$red-900: #b71c1c !default;
+$red-a100: #ff8a80 !default;
+$red-a200: #ff5252 !default;
+$red-a400: #ff1744 !default;
+$red-a700: #d50000 !default;
+$red: $red-500 !default;
+
+
+$pink-50: #fce4ec !default;
+$pink-100: #f8bbd0 !default;
+$pink-200: #f48fb1 !default;
+$pink-300: #f06292 !default;
+$pink-400: #ec407a !default;
+$pink-500: #e91e63 !default;
+$pink-600: #d81b60 !default;
+$pink-700: #c2185b !default;
+$pink-800: #ad1457 !default;
+$pink-900: #880e4f !default;
+$pink-a100: #ff80ab !default;
+$pink-a200: #ff4081 !default;
+$pink-a400: #f50057 !default;
+$pink-a700: #c51162 !default;
+$pink: $pink-500 !default;
+
+
+$purple-50: #f3e5f5 !default;
+$purple-100: #e1bee7 !default;
+$purple-200: #ce93d8 !default;
+$purple-300: #ba68c8 !default;
+$purple-400: #ab47bc !default;
+$purple-500: #9c27b0 !default;
+$purple-600: #8e24aa !default;
+$purple-700: #7b1fa2 !default;
+$purple-800: #6a1b9a !default;
+$purple-900: #4a148c !default;
+$purple-a100: #ea80fc !default;
+$purple-a200: #e040fb !default;
+$purple-a400: #d500f9 !default;
+$purple-a700: #a0f !default;
+$purple: $purple-500 !default;
+
+
+$deep-purple-50: #ede7f6 !default;
+$deep-purple-100: #d1c4e9 !default;
+$deep-purple-200: #b39ddb !default;
+$deep-purple-300: #9575cd !default;
+$deep-purple-400: #7e57c2 !default;
+$deep-purple-500: #673ab7 !default;
+$deep-purple-600: #5e35b1 !default;
+$deep-purple-700: #512da8 !default;
+$deep-purple-800: #4527a0 !default;
+$deep-purple-900: #311b92 !default;
+$deep-purple-a100: #b388ff !default;
+$deep-purple-a200: #7c4dff !default;
+$deep-purple-a400: #651fff !default;
+$deep-purple-a700: #6200ea !default;
+$deep-purple: $deep-purple-500 !default;
+
+
+$indigo-50: #e8eaf6 !default;
+$indigo-100: #c5cae9 !default;
+$indigo-200: #9fa8da !default;
+$indigo-300: #7986cb !default;
+$indigo-400: #5c6bc0 !default;
+$indigo-500: #3f51b5 !default;
+$indigo-600: #3949ab !default;
+$indigo-700: #303f9f !default;
+$indigo-800: #283593 !default;
+$indigo-900: #1a237e !default;
+$indigo-a100: #8c9eff !default;
+$indigo-a200: #536dfe !default;
+$indigo-a400: #3d5afe !default;
+$indigo-a700: #304ffe !default;
+$indigo: $indigo-500 !default;
+
+
+$blue-50: #e3f2fd !default;
+$blue-100: #bbdefb !default;
+$blue-200: #90caf9 !default;
+$blue-300: #64b5f6 !default;
+$blue-400: #42a5f5 !default;
+$blue-500: #2196f3 !default;
+$blue-600: #1e88e5 !default;
+$blue-700: #1976d2 !default;
+$blue-800: #1565c0 !default;
+$blue-900: #0d47a1 !default;
+$blue-a100: #82b1ff !default;
+$blue-a200: #448aff !default;
+$blue-a400: #2979ff !default;
+$blue-a700: #2962ff !default;
+$blue: $blue-500 !default;
+
+
+$light-blue-50: #e1f5fe !default;
+$light-blue-100: #b3e5fc !default;
+$light-blue-200: #81d4fa !default;
+$light-blue-300: #4fc3f7 !default;
+$light-blue-400: #29b6f6 !default;
+$light-blue-500: #03a9f4 !default;
+$light-blue-600: #039be5 !default;
+$light-blue-700: #0288d1 !default;
+$light-blue-800: #0277bd !default;
+$light-blue-900: #01579b !default;
+$light-blue-a100: #80d8ff !default;
+$light-blue-a200: #40c4ff !default;
+$light-blue-a400: #00b0ff !default;
+$light-blue-a700: #0091ea !default;
+$light-blue: $light-blue-500 !default;
+
+
+$cyan-50: #e0f7fa !default;
+$cyan-100: #b2ebf2 !default;
+$cyan-200: #80deea !default;
+$cyan-300: #4dd0e1 !default;
+$cyan-400: #26c6da !default;
+$cyan-500: #00bcd4 !default;
+$cyan-600: #00acc1 !default;
+$cyan-700: #0097a7 !default;
+$cyan-800: #00838f !default;
+$cyan-900: #006064 !default;
+$cyan-a100: #84ffff !default;
+$cyan-a200: #18ffff !default;
+$cyan-a400: #00e5ff !default;
+$cyan-a700: #00b8d4 !default;
+$cyan: $cyan-500 !default;
+
+
+$teal-50: #e0f2f1 !default;
+$teal-100: #b2dfdb !default;
+$teal-200: #80cbc4 !default;
+$teal-300: #4db6ac !default;
+$teal-400: #26a69a !default;
+$teal-500: #009688 !default;
+$teal-600: #00897b !default;
+$teal-700: #00796b !default;
+$teal-800: #00695c !default;
+$teal-900: #004d40 !default;
+$teal-a100: #a7ffeb !default;
+$teal-a200: #64ffda !default;
+$teal-a400: #1de9b6 !default;
+$teal-a700: #00bfa5 !default;
+$teal: $teal-500 !default;
+
+
+$green-50: #e8f5e9 !default;
+$green-100: #c8e6c9 !default;
+$green-200: #a5d6a7 !default;
+$green-300: #81c784 !default;
+$green-400: #66bb6a !default;
+$green-500: #4caf50 !default;
+$green-600: #43a047 !default;
+$green-700: #388e3c !default;
+$green-800: #2e7d32 !default;
+$green-900: #1b5e20 !default;
+$green-a100: #b9f6ca !default;
+$green-a200: #69f0ae !default;
+$green-a400: #00e676 !default;
+$green-a700: #00c853 !default;
+$green: $green-500 !default;
+
+
+$light-green-50: #f1f8e9 !default;
+$light-green-100: #dcedc8 !default;
+$light-green-200: #c5e1a5 !default;
+$light-green-300: #aed581 !default;
+$light-green-400: #9ccc65 !default;
+$light-green-500: #8bc34a !default;
+$light-green-600: #7cb342 !default;
+$light-green-700: #689f38 !default;
+$light-green-800: #558b2f !default;
+$light-green-900: #33691e !default;
+$light-green-a100: #ccff90 !default;
+$light-green-a200: #b2ff59 !default;
+$light-green-a400: #76ff03 !default;
+$light-green-a700: #64dd17 !default;
+$light-green: $light-green-500 !default;
+
+
+$lime-50: #f9fbe7 !default;
+$lime-100: #f0f4c3 !default;
+$lime-200: #e6ee9c !default;
+$lime-300: #dce775 !default;
+$lime-400: #d4e157 !default;
+$lime-500: #cddc39 !default;
+$lime-600: #c0ca33 !default;
+$lime-700: #afb42b !default;
+$lime-800: #9e9d24 !default;
+$lime-900: #827717 !default;
+$lime-a100: #f4ff81 !default;
+$lime-a200: #eeff41 !default;
+$lime-a400: #c6ff00 !default;
+$lime-a700: #aeea00 !default;
+$lime: $lime-500 !default;
+
+
+$yellow-50: #fffde7 !default;
+$yellow-100: #fff9c4 !default;
+$yellow-200: #fff59d !default;
+$yellow-300: #fff176 !default;
+$yellow-400: #ffee58 !default;
+$yellow-500: #ffeb3b !default;
+$yellow-600: #fdd835 !default;
+$yellow-700: #fbc02d !default;
+$yellow-800: #f9a825 !default;
+$yellow-900: #f57f17 !default;
+$yellow-a100: #ffff8d !default;
+$yellow-a200: #ff0 !default;
+$yellow-a400: #ffea00 !default;
+$yellow-a700: #ffd600 !default;
+$yellow: $yellow-500 !default;
+
+
+$amber-50: #fff8e1 !default;
+$amber-100: #ffecb3 !default;
+$amber-200: #ffe082 !default;
+$amber-300: #ffd54f !default;
+$amber-400: #ffca28 !default;
+$amber-500: #ffc107 !default;
+$amber-600: #ffb300 !default;
+$amber-700: #ffa000 !default;
+$amber-800: #ff8f00 !default;
+$amber-900: #ff6f00 !default;
+$amber-a100: #ffe57f !default;
+$amber-a200: #ffd740 !default;
+$amber-a400: #ffc400 !default;
+$amber-a700: #ffab00 !default;
+$amber: $amber-500 !default;
+
+
+$orange-50: #fff3e0 !default;
+$orange-100: #ffe0b2 !default;
+$orange-200: #ffcc80 !default;
+$orange-300: #ffb74d !default;
+$orange-400: #ffa726 !default;
+$orange-500: #ff9800 !default;
+$orange-600: #fb8c00 !default;
+$orange-700: #f57c00 !default;
+$orange-800: #ef6c00 !default;
+$orange-900: #e65100 !default;
+$orange-a100: #ffd180 !default;
+$orange-a200: #ffab40 !default;
+$orange-a400: #ff9100 !default;
+$orange-a700: #ff6d00 !default;
+$orange: $orange-500 !default;
+
+
+$deep-orange-50: #fbe9e7 !default;
+$deep-orange-100: #ffccbc !default;
+$deep-orange-200: #ffab91 !default;
+$deep-orange-300: #ff8a65 !default;
+$deep-orange-400: #ff7043 !default;
+$deep-orange-500: #ff5722 !default;
+$deep-orange-600: #f4511e !default;
+$deep-orange-700: #e64a19 !default;
+$deep-orange-800: #d84315 !default;
+$deep-orange-900: #bf360c !default;
+$deep-orange-a100: #ff9e80 !default;
+$deep-orange-a200: #ff6e40 !default;
+$deep-orange-a400: #ff3d00 !default;
+$deep-orange-a700: #dd2c00 !default;
+$deep-orange: $deep-orange-500 !default;
+
+
+$brown-50: #efebe9 !default;
+$brown-100: #d7ccc8 !default;
+$brown-200: #bcaaa4 !default;
+$brown-300: #a1887f !default;
+$brown-400: #8d6e63 !default;
+$brown-500: #795548 !default;
+$brown-600: #6d4c41 !default;
+$brown-700: #5d4037 !default;
+$brown-800: #4e342e !default;
+$brown-900: #3e2723 !default;
+$brown-a100: #d7ccc8 !default;
+$brown-a200: #bcaaa4 !default;
+$brown-a400: #8d6e63 !default;
+$brown-a700: #5d4037 !default;
+$brown: $brown-500 !default;
+
+
+$grey-50: #fafafa !default;
+$grey-100: #f5f5f5 !default;
+$grey-200: #eee !default;
+$grey-300: #e0e0e0 !default;
+$grey-400: #bdbdbd !default;
+$grey-500: #9e9e9e;
+$grey-600: #757575 !default;
+$grey-700: #616161 !default;
+$grey-800: #424242 !default;
+$grey-900: #212121 !default;
+$grey-a100: #f5f5f5 !default;
+$grey-a200: #eee !default;
+$grey-a400: #bdbdbd !default;
+$grey-a700: #616161 !default;
+$grey: $grey-500 !default;
+
+
+$blue-grey-50: #eceff1 !default;
+$blue-grey-100: #cfd8dc !default;
+$blue-grey-200: #b0bec5 !default;
+$blue-grey-300: #90a4ae !default;
+$blue-grey-400: #78909c !default;
+$blue-grey-500: #607d8b !default;
+$blue-grey-600: #546e7a !default;
+$blue-grey-700: #455a64 !default;
+$blue-grey-800: #37474f !default;
+$blue-grey-900: #263238 !default;
+$blue-grey-a100: #cfd8dc !default;
+$blue-grey-a200: #b0bec5 !default;
+$blue-grey-a400: #78909c !default;
+$blue-grey-a700: #455a64 !default;
+$blue-grey: $blue-grey-500 !default;
+
+
+$black: #000;
+$white: #fff;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/_drawer.scss b/templates/assets/bootstrap-material-design/scss/variables/_drawer.scss
new file mode 100644
index 0000000..d30b021
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/_drawer.scss
@@ -0,0 +1,5 @@
+// Drawer
+
+// Sizing
+$bmd-drawer-x-size: 240px !default;
+$bmd-drawer-y-size: 100px !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/_layout.scss b/templates/assets/bootstrap-material-design/scss/variables/_layout.scss
new file mode 100644
index 0000000..7cbf784
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/_layout.scss
@@ -0,0 +1 @@
+// Layout variables - evidently nothing to see here...remove now?
diff --git a/templates/assets/bootstrap-material-design/scss/variables/_menu.scss b/templates/assets/bootstrap-material-design/scss/variables/_menu.scss
new file mode 100644
index 0000000..54da3c4
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/_menu.scss
@@ -0,0 +1,18 @@
+$bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
+
+$bmd-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
+$bmd-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
+$bmd-menu-item-min-height: 3rem !default; // 48px
+
+$bmd-menu-item-padding-right: 1rem !default;
+$bmd-menu-item-padding-bottom: .8rem !default;
+$bmd-menu-item-padding-left: 1rem !default;
+$bmd-menu-item-padding-top: .8rem !default;
+
+// md and up
+$bmd-menu-item-padding-right-md: 1.5rem !default;
+$bmd-menu-item-padding-left-md: 1.5rem !default;
+
+// Menu
+$bmd-menu-expand-duration: 0.3s !default;
+$bmd-menu-fade-duration: 0.2s !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/_shadow.scss b/templates/assets/bootstrap-material-design/scss/variables/_shadow.scss
new file mode 100644
index 0000000..ef1f786
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/_shadow.scss
@@ -0,0 +1,35 @@
+// Shadows (originally from mdl http://www.getmdl.io/)
+$bmd-shadow-umbra-opacity: 0.2 !default;
+$bmd-shadow-penumbra-opacity: 0.14 !default;
+$bmd-shadow-ambient-opacity: 0.12 !default;
+
+// Declare the following for reuse with both mixins and the bootstrap variables
+$bmd-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36);
+
+$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+  0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity),
+  0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity);
+
+$bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+  0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity),
+  0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity);
+
+$bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+  0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity),
+  0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity);
+
+$bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity),
+  0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity),
+  0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity);
+
+$bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity),
+  0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity),
+  0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity);
+
+$bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity),
+  0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity),
+  0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity);
+
+$bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity),
+  0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity),
+  0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity);
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_body.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_body.scss
new file mode 100644
index 0000000..0d9fbea
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_body.scss
@@ -0,0 +1,6 @@
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                    #fafafa !default;
+//$body-color:                 $gray-dark !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_brand.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_brand.scss
new file mode 100644
index 0000000..3ba4a5b
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_brand.scss
@@ -0,0 +1,6 @@
+// Bootstrap brand color customization
+$brand-primary: $teal !default;
+$brand-success: $green !default;
+$brand-danger: $red !default;
+$brand-warning: $deep-orange !default;
+$brand-info: $light-blue !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_buttons.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_buttons.scss
new file mode 100644
index 0000000..5823491
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_buttons.scss
@@ -0,0 +1,77 @@
+// Buttons:
+$bmd-btn-font-size: .875rem !default; // 14px
+$bmd-btn-font-size-lg: 1.25rem !default;
+$bmd-btn-font-size-sm: .8125rem !default; // 13px
+$bmd-btn-margin-bottom: .3125rem !default; // 5px
+
+// default btn with no specific type designation
+$bmd-btn-color:            $gray-dark !default;
+$bmd-btn-bg:               inherit !default; //$body-bg !default; // #fff
+$bmd-btn-border:           #ccc !default;
+
+$bmd-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
+$bmd-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
+$bmd-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
+
+$bmd-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
+$bmd-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
+$bmd-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
+
+$bmd-btn-fab-size: 3.5rem !default; // 56px
+$bmd-btn-fab-size-sm: 2.5rem !default; // 40px
+$bmd-btn-fab-font-size: 1.5rem !default; // 24px
+
+// icons
+$bmd-btn-icon-size: 2rem !default; // 32px
+$bmd-btn-icon-size-sm: (.75 * $bmd-btn-icon-size) !default; // ~24px
+$bmd-btn-icon-font-size-sm: (.75 * $bmd-btn-fab-font-size) !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background and border color.
+$btn-padding-x:                  1rem !default; // 1rem
+$btn-padding-y:                  .46875rem !default; // .5rem achieve a 36dp height
+//$btn-line-height:                1 !default; //1.25
+$btn-font-weight:                500 !default; // normal
+$btn-box-shadow:                 none !default;
+$btn-active-box-shadow:          none !default; // inset 0 3px 5px rgba(0,0,0,.125)
+
+//
+//$btn-primary-color:              #fff !default;
+//$btn-primary-bg:                 $brand-primary !default;
+//$btn-primary-border:             $btn-primary-bg !default;
+//
+$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-bg:               $body-bg !default; // #fff
+//$btn-secondary-border:           #ccc !default;
+//
+//$btn-info-color:                 #fff !default;
+//$btn-info-bg:                    $brand-info !default;
+//$btn-info-border:                $btn-info-bg !default;
+//
+//$btn-success-color:              #fff !default;
+//$btn-success-bg:                 $brand-success !default;
+//$btn-success-border:             $btn-success-bg !default;
+//
+//$btn-warning-color:              #fff !default;
+//$btn-warning-bg:                 $brand-warning !default;
+//$btn-warning-border:             $btn-warning-bg !default;
+//
+//$btn-danger-color:               #fff !default;
+//$btn-danger-bg:                  $brand-danger !default;
+//$btn-danger-border:              $btn-danger-bg !default;
+//
+//$btn-link-disabled-color:        $gray-light !default;
+//
+//$btn-padding-x-sm:               .5rem !default;
+$btn-padding-y-sm:               .40625rem !default; // achieve a 32dp height was .25rem
+//
+//$btn-padding-x-lg:               1.5rem !default;
+//$btn-padding-y-lg:               .75rem !default;
+//
+//// Allows for customizing button radius independently from global border radius
+//$btn-border-radius:              $border-radius !default;
+//$btn-border-radius-lg:           $border-radius-lg !default;
+//$btn-border-radius-sm:           $border-radius-sm !default;
+
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_card.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_card.scss
new file mode 100644
index 0000000..6c18fba
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_card.scss
@@ -0,0 +1,13 @@
+// Cards
+//$card-spacer-x:            1.25rem !default;
+//$card-spacer-y:            .75rem !default;
+//$card-border-width:        1px !default;
+//$card-border-radius:       $border-radius !default;
+$card-border-color:        $gray-lighter !default; // #e5e5e5
+//$card-border-radius-inner: $card-border-radius !default;
+$card-bg:                  #fff !default;
+$card-cap-bg:              $card-bg !default; // #f5f5f5
+//
+//$card-link-hover-color:    #fff !default;
+//
+//$card-deck-margin:         .625rem !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_code.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_code.scss
new file mode 100644
index 0000000..9e10188
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_code.scss
@@ -0,0 +1,12 @@
+// Code
+
+//$code-color:                  #bd4147 !default;
+$code-bg:                     $grey-200 !default; // #f7f7f9 !default;
+
+//$kbd-color:                   #fff !default;
+//$kbd-bg:                      #333 !default;
+//
+//$pre-bg:                      #f7f7f9 !default;
+//$pre-color:                   $gray-dark !default;
+//$pre-border-color:            #ccc !default;
+//$pre-scrollable-max-height:   340px !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_components.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_components.scss
new file mode 100644
index 0000000..ff03bdb
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_components.scss
@@ -0,0 +1,16 @@
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+//$line-height-lg:         (4 / 3) !default;
+//$line-height-sm:         1.5 !default;
+//
+$border-radius:          .125rem !default; // .25rem !default;
+//$border-radius-lg:       .3rem !default;
+$border-radius-sm:       .0625rem !default; // .2rem !default;
+//
+//$component-active-color: #fff !default;
+//$component-active-bg:    $brand-primary !default;
+//
+//$caret-width:            .3em !default;
+//$caret-width-lg:         $caret-width !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_custom-forms.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_custom-forms.scss
new file mode 100644
index 0000000..d6f3644
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_custom-forms.scss
@@ -0,0 +1,5 @@
+$custom-file-bg: transparent !default;
+$custom-file-border-width: 0 !default;
+$custom-file-box-shadow: none !default;
+$custom-file-border-radius: 0 !default;
+$custom-file-line-height: 1.3 !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_dropdown.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_dropdown.scss
new file mode 100644
index 0000000..67ac5ec
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_dropdown.scss
@@ -0,0 +1,20 @@
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+//$dropdown-bg:                    #fff !default;
+//$dropdown-border-color:          rgba(0,0,0,.15) !default;
+//$dropdown-border-width:          $border-width !default;
+//$dropdown-divider-bg:            #e5e5e5 !default;
+$dropdown-box-shadow:            $bmd-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default;
+//
+//$dropdown-link-color:            $gray-dark !default;
+//$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//$dropdown-link-hover-bg:         #f5f5f5 !default;
+//
+//$dropdown-link-active-color:     $component-active-color !default;
+//$dropdown-link-active-bg:        $component-active-bg !default;
+//
+//$dropdown-link-disabled-color:   $gray-light !default;
+//
+//$dropdown-header-color:          $gray-light !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_forms.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_forms.scss
new file mode 100644
index 0000000..425008e
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_forms.scss
@@ -0,0 +1,47 @@
+// Forms
+
+//
+$input-bg:                       rgba($black, 0) !default; // #fff !default;
+$input-bg-disabled:              rgba($black, 0) !default; // $gray-lighter !default;
+//
+//$input-color:                    $gray !default;
+$input-border-color:             $gray-light !default; // #ccc !default;
+//$input-btn-border-width:         $border-width !default; // For form controls and buttons
+$input-box-shadow:               none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default;
+//
+$input-border-radius:            0 !default; // $border-radius !default;
+//$input-border-radius-lg:         $border-radius-lg !default;
+//$input-border-radius-sm:         $border-radius-sm !default;
+//
+//$input-border-focus:             #66afe9 !default;
+$input-box-shadow-focus:         none !default; // rgba(102,175,233,.6) !default;
+//
+$input-color-placeholder:        $bmd-label-color !default; // #999 !default;
+
+
+
+$input-padding-x:                0 !default; // .75rem !default;
+$input-padding-y:                .4375rem !default; // spec 8px // .375rem !default;
+
+$input-padding-x-sm:             0 !default; // .75rem !default;
+$input-padding-y-sm:             .25rem !default; // spec 4px //.275rem !default;
+
+$input-padding-x-lg:             0 !default; //   1.25rem !default;
+$input-padding-y-lg:             .5625rem !default; // no-spec 9px // .75rem !default;
+
+//$input-height:                   (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
+//$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
+//$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
+//
+//$form-group-margin-bottom:       $spacer-y !default;
+//
+$input-group-addon-bg:            transparent !default; //$gray-lighter !default;
+$input-group-addon-border-color:  transparent !default; //$input-border-color !default;
+//
+//$cursor-disabled:                not-allowed !default;
+//
+//// Form validation icons
+//$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==";
+//$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+";
+//$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=";
+
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_list-group.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_list-group.scss
new file mode 100644
index 0000000..b8e1ed8
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_list-group.scss
@@ -0,0 +1,21 @@
+// List group
+
+$list-group-bg:                 inherit !default; // #fff
+//$list-group-border-color:       #ddd !default;
+$list-group-border-width:       0 !default; // $border-width
+$list-group-border-radius:      0 !default; // $border-radius
+//
+//$list-group-hover-bg:           #f5f5f5 !default;
+//$list-group-active-color:       $component-active-color !default;
+//$list-group-active-bg:          $component-active-bg !default;
+//$list-group-active-border:      $list-group-active-bg !default;
+//$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+//
+//$list-group-disabled-color:      $gray-light !default;
+//$list-group-disabled-bg:         $gray-lighter !default;
+//$list-group-disabled-text-color: $list-group-disabled-color !default;
+//
+//$list-group-link-color:         #555 !default;
+//$list-group-link-hover-color:   $list-group-link-color !default;
+//$list-group-link-heading-color: #333 !default;
+
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_modals.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_modals.scss
new file mode 100644
index 0000000..6585799
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_modals.scss
@@ -0,0 +1,20 @@
+// Modals
+$modal-content-xs-box-shadow: $bmd-shadow-24dp !default;
+
+// Padding applied to the modal body
+//$modal-inner-padding:         15px !default;
+//
+//$modal-title-padding:         15px !default;
+//$modal-title-line-height:     $line-height-base !default;
+//
+//$modal-content-bg:                             #fff !default;
+//$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//
+//$modal-backdrop-bg:           #000 !default;
+$modal-backdrop-opacity:      .26 !default; // .5
+//$modal-header-border-color:   #e5e5e5 !default;
+//$modal-footer-border-color:   $modal-header-border-color !default;
+//
+//$modal-lg:                    900px !default;
+//$modal-md:                    600px !default;
+//$modal-sm:                    300px !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_nav.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_nav.scss
new file mode 100644
index 0000000..3334006
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_nav.scss
@@ -0,0 +1,62 @@
+// Navs https://www.google.com/design/spec/components/tabs.html#tabs-specs
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+$bmd-navbar-link-font-weight:               $bmd-font-weight-base !default; //
+$bmd-navbar-link-font-size:                 .875rem !default; // 14
+$bmd-navbar-link-padding:                   .5321rem; // 7
+
+
+// tabs & pills
+$bmd-nav-tabs-pills-font-weight:            500 !default; //
+$bmd-nav-tabs-pills-font-size:              .875rem !default; // 14
+$bmd-nav-tabs-pills-link-padding:           1.4286em .8575em !default; // spec // was .5em 1em   // relative em based on 14
+
+// tabs only
+$bmd-nav-tabs-border-size:                  .214rem !default; // 3px
+
+$bmd-nav-tabs-color:                        $gray !default;
+$bmd-nav-tabs-active-color:                 $gray-dark !default;
+$bmd-nav-tabs-active-border-color:          $brand-primary !default;
+$bmd-nav-tabs-disabled-link-color:          $nav-disabled-link-color !default;
+$bmd-nav-tabs-disabled-link-color-hover:    $nav-disabled-link-hover-color !default;
+
+$bmd-nav-tabs-primary-color:                $bmd-inverse !default;
+$bmd-nav-tabs-primary-active-color:         #fff !default;
+$bmd-nav-tabs-primary-active-border-color:  #fff !default;
+$bmd-nav-tabs-primary-disabled-link-color:       $bmd-inverse-light !default;
+$bmd-nav-tabs-primary-disabled-link-color-hover: $bmd-inverse-light !default;
+
+$bmd-nav-tabs-inverse-color:                $bmd-inverse !default;
+$bmd-nav-tabs-inverse-active-color:         #fff !default;
+$bmd-nav-tabs-inverse-active-border-color:  #fff !default;
+$bmd-nav-tabs-inverse-disabled-link-color:       $bmd-inverse-light !default;
+$bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-inverse-light !default;
+
+
+//$nav-item-margin:                           .2rem !default;
+
+
+
+//$bmd-nav-link-line-height:                  1 !default; // makes it easier to line up with the spec
+//$nav-link-padding:                          .5em 1em !default; // changing this for tabs alters generic navbars, so do it elsewhere with higher specificity
+//$nav-link-hover-bg:                         $gray-lighter !default;
+
+
+//
+//$nav-tabs-border-color:                     #ddd !default;
+//
+//$nav-tabs-link-border-width:                $border-width !default;
+//$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+//
+$nav-tabs-active-link-hover-bg:             transparent !default; // $body-bg
+//$nav-tabs-active-link-hover-color:          $gray !default;
+//$nav-tabs-active-link-hover-border-color:   #ddd !default;
+//
+//$nav-tabs-justified-link-border-color:            #ddd !default;
+//$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+//
+//$nav-pills-border-radius:                   $border-radius !default;
+//$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+//$nav-pills-active-link-hover-color:         $component-active-color !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_pagination.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_pagination.scss
new file mode 100644
index 0000000..e55ec27
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_pagination.scss
@@ -0,0 +1,6 @@
+$pagination-border-width: 0;
+$pagination-bg: transparent;
+$pagination-disabled-bg: transparent;
+
+$pagination-padding-x-lg: 0;
+$pagination-padding-x-sm: 0;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_spacing.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_spacing.scss
new file mode 100644
index 0000000..4032860
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_spacing.scss
@@ -0,0 +1,26 @@
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer:                     .5rem !default; // 1rem !default;    // $form-group-margin-bottom uses $spacer-y.  Decided to try this globally and see how it works out.
+//$spacer-x:                   $spacer !default;
+//$spacer-y:                   $spacer !default;
+//$spacers: (
+//  0: (
+//    x:   0,
+//    y:   0
+//  ),
+//  1: (
+//    x:   $spacer-x,
+//    y:   $spacer-y
+//  ),
+//  2: (
+//    x:   ($spacer-x * 1.5),
+//    y:   ($spacer-y * 1.5)
+//  ),
+//  3: (
+//    x:   ($spacer-x * 3),
+//    y:   ($spacer-y * 3)
+//  )
+//) !default;
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_state.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_state.scss
new file mode 100644
index 0000000..0037a2b
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_state.scss
@@ -0,0 +1,15 @@
+// Form states and alerts
+//
+// Define colors for form feedback states and, by default, alerts.
+$state-success-text: $bmd-inverse !default;
+$state-success-bg: $brand-success !default;
+
+$state-info-text: $bmd-inverse !default;
+$state-info-bg: $brand-info !default;
+
+$state-warning-text: $bmd-inverse !default;
+$state-warning-bg: $brand-warning !default;
+
+$state-danger-text: $bmd-inverse !default;
+$state-danger-bg: $brand-danger !default;
+
diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_type.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_type.scss
new file mode 100644
index 0000000..22b2289
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_type.scss
@@ -0,0 +1,66 @@
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// https://www.google.com/design/spec/style/typography.html#typography-styles
+// http://www.getmdl.io/styles/index.html
+
+$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !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:               7rem !default; // md display-4 112px was 6rem;
+$display2-size:               3.5rem !default; // md display-3 56px was 5.5rem
+$display3-size:               2.8125rem !default; // md display-2 45px was 4.5rem
+$display4-size:               2.125rem !default; // md display-1 34px was 3.5rem
+//
+//$display1-weight:             300 !default;
+//$display2-weight:             300 !default;
+//$display3-weight:             300 !default;
+//$display4-weight:             300 !default;
+//
+//$line-height-base:                1.5 !default;
+//
+//$headings-margin-bottom:     ($spacer / 2) !default;
+//$headings-font-family:       inherit !default;
+$headings-font-weight:       400 !default; // was 500
+//$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;
+//
+//$list-inline-padding:         5px !default;
+//
+//$dt-font-weight:              bold !default;
+//
+//$nested-kbd-font-weight:      bold !default;
+
+