diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9598be1..4aa0cd8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,58 +1 @@
-###dart-wsk-material ChangeLog v0.6.0###
-
-
-
-###v0.6.0###
-* publish to pub [6cd365c](http://github.com/MikeMitterer/dart-wsk-material/commit/6cd365c0183ba7a3d3ffa5b91bc9e43d9049e1dc)
-* Updated SCSS to WSK Material 0.6.0, Bug: Dirty-Check in MaterialTextfield [16af3c4](http://github.com/MikeMitterer/dart-wsk-material/commit/16af3c45710e10163bbbef4eab51e7e0771a9eb2)
-* Syncronized with wsk 0.6.0 (GH) [18d7037](http://github.com/MikeMitterer/dart-wsk-material/commit/18d70374e84e2eb187d0f13fc054571b20c4f9d6)
-* Readme updated [8c3bc52](http://github.com/MikeMitterer/dart-wsk-material/commit/8c3bc5218ca78709a35e5a88db8b17d53c7a8316)
-* Added warning in Textfield if it's not a Textfield [a30717f](http://github.com/MikeMitterer/dart-wsk-material/commit/a30717f90a5ee44676ab009f5d1c612064836c13)
-* materialItemConfig had wrong cssClass [32c2291](http://github.com/MikeMitterer/dart-wsk-material/commit/32c2291f6ec189c0ddf0932441d64544c3bb92e8)
-* Bin (gensamples) removed [bc1c4e6](http://github.com/MikeMitterer/dart-wsk-material/commit/bc1c4e6ebefe77714f8c9ee4dd7764b1fa677d3b)
-* Changelog changed... [b5daa64](http://github.com/MikeMitterer/dart-wsk-material/commit/b5daa6417c363dc29407845048a54c82b01d347a)
-* Some minor update for WskAngular [888fbae](http://github.com/MikeMitterer/dart-wsk-material/commit/888fbae314430707058f83c70228aa7046449cea)
-* Link to short theming-sample [16be532](http://github.com/MikeMitterer/dart-wsk-material/commit/16be5329c52bfcd31d16a68e2adacfd5c76f4c40)
-* Link to short theming-sample [90eacc0](http://github.com/MikeMitterer/dart-wsk-material/commit/90eacc05150d264eebaf05229b374df062134526)
-* styleguide.scss added + link to wsk-angular [8259dc4](http://github.com/MikeMitterer/dart-wsk-material/commit/8259dc4265ff5442ad7f7f12f5c5ec99977a4b6b)
-* styleguide.scss added + link to wsk-angular [39e96d4](http://github.com/MikeMitterer/dart-wsk-material/commit/39e96d460a9e9354210138a90ca82f324f2dd910)
-* Remove wsk-upgrading on upgraded element [fc86f9f](http://github.com/MikeMitterer/dart-wsk-material/commit/fc86f9f6fc5daaf732c0aec0758b0e9fcec940da)
-* Remove wsk-upgrading on upgraded element [c3aabaa](http://github.com/MikeMitterer/dart-wsk-material/commit/c3aabaabf43182141c6edf6475c5a657c4a3b55e)
-* Changelog... [f60451d](http://github.com/MikeMitterer/dart-wsk-material/commit/f60451dd472550b6ab1784c98c7083dedf804a0d)
-* Preparation for wsk-angular, made sparate config for each component [dc4e67a](http://github.com/MikeMitterer/dart-wsk-material/commit/dc4e67a9641cb288acc91b664afa05f1a72121cd)
-
-###v0.2###
-* again CHANGELOG [b0ff87a](http://github.com/MikeMitterer/dart-wsk-material/commit/b0ff87a86b4ac52132918a62e55521f933beaf3e)
-* Changed path to console_log_handler [5252bb8](http://github.com/MikeMitterer/dart-wsk-material/commit/5252bb8bf40ad9a571c9add1410159eaab5288fb)
-* Changedlog updated [c8426b7](http://github.com/MikeMitterer/dart-wsk-material/commit/c8426b78e6e7a3f81a4e40dd364436c77d385d7b)
-
-###v0.1.0###
-* Changed path to console_log_handler [5252bb8](http://github.com/MikeMitterer/dart-wsk-material/commit/5252bb8bf40ad9a571c9add1410159eaab5288fb)
-* Changedlog updated [c8426b7](http://github.com/MikeMitterer/dart-wsk-material/commit/c8426b78e6e7a3f81a4e40dd364436c77d385d7b)
-
-###v0.1###
-* Changed path to console_log_handler [5252bb8](http://github.com/MikeMitterer/dart-wsk-material/commit/5252bb8bf40ad9a571c9add1410159eaab5288fb)
-* Changedlog updated [c8426b7](http://github.com/MikeMitterer/dart-wsk-material/commit/c8426b78e6e7a3f81a4e40dd364436c77d385d7b)
-* Styleguide (sample) works [09df0e8](http://github.com/MikeMitterer/dart-wsk-material/commit/09df0e89338dce3643deb657186bf9d7a6ba7ddb)
-* Projectname added to build.gradle (ChangeLog) [d4fd5d2](http://github.com/MikeMitterer/dart-wsk-material/commit/d4fd5d296cc397b998b53fa095abbbce5b46df87)
-
-###v0.0.3###
-* Full URL for Logo in README [00ea299](http://github.com/MikeMitterer/dart-wsk-material/commit/00ea299f4694635eca585399588e8801bf81894c)
-* build.gradle added [a70f97c](http://github.com/MikeMitterer/dart-wsk-material/commit/a70f97c4a9faa710321af9521d706705756b2cc5)
-
-###v0.0.2###
-* console_log_handler added to dependencies [e9ccd0b](http://github.com/MikeMitterer/dart-wsk-material/commit/e9ccd0b7c81252b37e00558624725e2b00c5fea5)
-* Added LOGO [77175a9](http://github.com/MikeMitterer/dart-wsk-material/commit/77175a9787adc53d8f9e83d009be21cd942d3e41)
-* Typo... [7bef3b3](http://github.com/MikeMitterer/dart-wsk-material/commit/7bef3b321dd4c47648fcf191ab6f9cb4d5d613d3)
-* Changed HomePage [6212c2e](http://github.com/MikeMitterer/dart-wsk-material/commit/6212c2e4f4d2325b10d1edae6a9e69f650f1b0ee)
-* Readme updated [10dde77](http://github.com/MikeMitterer/dart-wsk-material/commit/10dde77070b6e9bae92876ae976c50a5d8b10c56)
-
-###0.0.1###
-* Samples tested... [5fd73b9](http://github.com/MikeMitterer/dart-wsk-material/commit/5fd73b91ac57dddbc1769f018d6b982bff89829b)
-* Funkt [f8e7b0c](http://github.com/MikeMitterer/dart-wsk-material/commit/f8e7b0cd7e68620e8ce1167a5e2cc7f6ebcb3891)
-* Wieder einige Elemente eingebaut - Spinner war das letzte [0c2d060](http://github.com/MikeMitterer/dart-wsk-material/commit/0c2d0605e2d1041ed235507a16a8edbe8f616f43)
-* gensamples upgedatet [500fb75](http://github.com/MikeMitterer/dart-wsk-material/commit/500fb75e56f875db256e9627ce080a696ec03911)
-* gensamples generates DART-Prototype from JS [870634b](http://github.com/MikeMitterer/dart-wsk-material/commit/870634b75b4d3c252f01fe56aad235fa16519151)
-* Button, Animation, Checkbox are ported [c20a10b](http://github.com/MikeMitterer/dart-wsk-material/commit/c20a10be31a725b48f057c1778f89b2ab502ee03)
-* Funkt mit mirrors [9322a20](http://github.com/MikeMitterer/dart-wsk-material/commit/9322a2072f1300aa2d14fbe53376c1cccf66cd4a)
-* Initial realease [fcc644e](http://github.com/MikeMitterer/dart-wsk-material/commit/fcc644e51e6deb491dd4b497a078d164f5f7524d)
\ No newline at end of file
+#Change Log#
diff --git a/WskMaterial.iml b/WskMaterial.iml
index 4510767e..46e164f3 100644
--- a/WskMaterial.iml
+++ b/WskMaterial.iml
@@ -4,7 +4,6 @@
     <exclude-output />
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.pub" />
-      <excludeFolder url="file://$MODULE_DIR$/bin/packages" />
       <excludeFolder url="file://$MODULE_DIR$/build" />
       <excludeFolder url="file://$MODULE_DIR$/example/animation/packages" />
       <excludeFolder url="file://$MODULE_DIR$/example/button/packages" />
@@ -36,6 +35,7 @@
       <excludeFolder url="file://$MODULE_DIR$/packages/wsk_material" />
       <excludeFolder url="file://$MODULE_DIR$/test/packages" />
       <excludeFolder url="file://$MODULE_DIR$/test/unit/packages" />
+      <excludeFolder url="file://$MODULE_DIR$/tool/packages" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
diff --git a/example/animation/pubspec.yaml b/example/animation/pubspec.yaml
new file mode 100644
index 00000000..10afe748
--- /dev/null
+++ b/example/animation/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_animation_sample
+description: WSK Sample 'animation' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/animation/demo.css b/example/animation/web/demo.css
similarity index 100%
rename from example/animation/demo.css
rename to example/animation/web/demo.css
diff --git a/example/animation/demo.scss b/example/animation/web/demo.scss
similarity index 100%
rename from example/animation/demo.scss
rename to example/animation/web/demo.scss
diff --git a/example/animation/index.html b/example/animation/web/index.html
similarity index 83%
rename from example/animation/index.html
rename to example/animation/web/index.html
index 004b8804..2627b945 100644
--- a/example/animation/index.html
+++ b/example/animation/web/index.html
@@ -8,8 +8,14 @@
     <title>Animations</title>
     <link rel="stylesheet" href="demo.css">
     <link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
     <div class="PreviewBlock demo-js-clickable-area">
       <div class="demo-animate-container">
         <div class="demo-animate-container--background">Click me to animate</div>
diff --git a/example/animation/main.dart b/example/animation/web/main.dart
similarity index 100%
rename from example/animation/main.dart
rename to example/animation/web/main.dart
diff --git a/example/button/pubspec.yaml b/example/button/pubspec.yaml
new file mode 100644
index 00000000..96e82def
--- /dev/null
+++ b/example/button/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_button_sample
+description: WSK Sample 'button' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/button/demo.css b/example/button/web/demo.css
similarity index 100%
rename from example/button/demo.css
rename to example/button/web/demo.css
diff --git a/example/button/demo.scss b/example/button/web/demo.scss
similarity index 100%
rename from example/button/demo.scss
rename to example/button/web/demo.scss
diff --git a/example/button/index.html b/example/button/web/index.html
similarity index 93%
rename from example/button/index.html
rename to example/button/web/index.html
index 8738374a..ee980c3c 100644
--- a/example/button/index.html
+++ b/example/button/web/index.html
@@ -10,8 +10,14 @@
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
     <link rel="stylesheet" href="demo.css">
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/button/main.dart b/example/button/web/main.dart
similarity index 100%
rename from example/button/main.dart
rename to example/button/web/main.dart
diff --git a/example/card/pubspec.yaml b/example/card/pubspec.yaml
new file mode 100644
index 00000000..f607ff68
--- /dev/null
+++ b/example/card/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_card_sample
+description: WSK Sample 'card' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/card/demo.css b/example/card/web/demo.css
similarity index 100%
rename from example/card/demo.css
rename to example/card/web/demo.css
diff --git a/example/card/demo.scss b/example/card/web/demo.scss
similarity index 100%
rename from example/card/demo.scss
rename to example/card/web/demo.scss
diff --git a/example/card/index.html b/example/card/web/index.html
similarity index 92%
rename from example/card/index.html
rename to example/card/web/index.html
index 3bfd99b5..b2cb91b1 100644
--- a/example/card/index.html
+++ b/example/card/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/card/main.dart b/example/card/web/main.dart
similarity index 100%
rename from example/card/main.dart
rename to example/card/web/main.dart
diff --git a/example/checkbox/pubspec.yaml b/example/checkbox/pubspec.yaml
new file mode 100644
index 00000000..de6a4adb
--- /dev/null
+++ b/example/checkbox/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_checkbox_sample
+description: WSK Sample 'checkbox' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/checkbox/demo.css b/example/checkbox/web/demo.css
similarity index 100%
rename from example/checkbox/demo.css
rename to example/checkbox/web/demo.css
diff --git a/example/checkbox/demo.scss b/example/checkbox/web/demo.scss
similarity index 100%
rename from example/checkbox/demo.scss
rename to example/checkbox/web/demo.scss
diff --git a/example/checkbox/index.html b/example/checkbox/web/index.html
similarity index 88%
rename from example/checkbox/index.html
rename to example/checkbox/web/index.html
index 57187c74..3a21a168 100644
--- a/example/checkbox/index.html
+++ b/example/checkbox/web/index.html
@@ -10,8 +10,14 @@
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
     <link rel="stylesheet" href="demo.css">
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/checkbox/main.dart b/example/checkbox/web/main.dart
similarity index 100%
rename from example/checkbox/main.dart
rename to example/checkbox/web/main.dart
diff --git a/example/column-layout/pubspec.yaml b/example/column-layout/pubspec.yaml
new file mode 100644
index 00000000..30125e12
--- /dev/null
+++ b/example/column-layout/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_column-layout_sample
+description: WSK Sample 'column-layout' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/column-layout/demo.css b/example/column-layout/web/demo.css
similarity index 100%
rename from example/column-layout/demo.css
rename to example/column-layout/web/demo.css
diff --git a/example/column-layout/demo.scss b/example/column-layout/web/demo.scss
similarity index 100%
rename from example/column-layout/demo.scss
rename to example/column-layout/web/demo.scss
diff --git a/example/column-layout/index.html b/example/column-layout/web/index.html
similarity index 83%
rename from example/column-layout/index.html
rename to example/column-layout/web/index.html
index afd91755..fef3fb7e 100644
--- a/example/column-layout/index.html
+++ b/example/column-layout/web/index.html
@@ -10,8 +10,14 @@
     <link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
 
     <link rel="stylesheet" href="demo.css">
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
     <div class="wsk-column-layout">
       <div class="wsk-column-layout__child">Each child</div>
       <div class="wsk-column-layout__child">gets to be</div>
diff --git a/example/column-layout/main.dart b/example/column-layout/web/main.dart
similarity index 100%
rename from example/column-layout/main.dart
rename to example/column-layout/web/main.dart
diff --git a/example/dropdown-menu/pubspec.yaml b/example/dropdown-menu/pubspec.yaml
new file mode 100644
index 00000000..ef1149c8
--- /dev/null
+++ b/example/dropdown-menu/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_dropdown-menu_sample
+description: WSK Sample 'dropdown-menu' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/dropdown-menu/demo.css b/example/dropdown-menu/web/demo.css
similarity index 100%
rename from example/dropdown-menu/demo.css
rename to example/dropdown-menu/web/demo.css
diff --git a/example/dropdown-menu/demo.scss b/example/dropdown-menu/web/demo.scss
similarity index 100%
rename from example/dropdown-menu/demo.scss
rename to example/dropdown-menu/web/demo.scss
diff --git a/example/dropdown-menu/index.html b/example/dropdown-menu/web/index.html
similarity index 84%
rename from example/dropdown-menu/index.html
rename to example/dropdown-menu/web/index.html
index b0533665..da0fbd70 100644
--- a/example/dropdown-menu/index.html
+++ b/example/dropdown-menu/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/dropdown-menu/main.dart b/example/dropdown-menu/web/main.dart
similarity index 100%
rename from example/dropdown-menu/main.dart
rename to example/dropdown-menu/web/main.dart
diff --git a/example/footer/pubspec.yaml b/example/footer/pubspec.yaml
new file mode 100644
index 00000000..464f2432
--- /dev/null
+++ b/example/footer/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_footer_sample
+description: WSK Sample 'footer' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/footer/demo.css b/example/footer/web/demo.css
similarity index 100%
rename from example/footer/demo.css
rename to example/footer/web/demo.css
diff --git a/example/footer/demo.scss b/example/footer/web/demo.scss
similarity index 100%
rename from example/footer/demo.scss
rename to example/footer/web/demo.scss
diff --git a/example/footer/images/down_arrow.svg b/example/footer/web/images/down_arrow.svg
similarity index 100%
rename from example/footer/images/down_arrow.svg
rename to example/footer/web/images/down_arrow.svg
diff --git a/example/footer/images/up_arrow.svg b/example/footer/web/images/up_arrow.svg
similarity index 100%
rename from example/footer/images/up_arrow.svg
rename to example/footer/web/images/up_arrow.svg
diff --git a/example/footer/index.html b/example/footer/web/index.html
similarity index 94%
rename from example/footer/index.html
rename to example/footer/web/index.html
index b534621a..87081655 100644
--- a/example/footer/index.html
+++ b/example/footer/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <footer class="wsk-mega-footer">
     <div class="wsk-mega-footer--top-section">
diff --git a/example/footer/main.dart b/example/footer/web/main.dart
similarity index 100%
rename from example/footer/main.dart
rename to example/footer/web/main.dart
diff --git a/example/icon-toggle/pubspec.yaml b/example/icon-toggle/pubspec.yaml
new file mode 100644
index 00000000..1020e7fd
--- /dev/null
+++ b/example/icon-toggle/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_icon-toggle_sample
+description: WSK Sample 'icon-toggle' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/icon-toggle/demo.css b/example/icon-toggle/web/demo.css
similarity index 100%
rename from example/icon-toggle/demo.css
rename to example/icon-toggle/web/demo.css
diff --git a/example/icon-toggle/demo.scss b/example/icon-toggle/web/demo.scss
similarity index 100%
rename from example/icon-toggle/demo.scss
rename to example/icon-toggle/web/demo.scss
diff --git a/example/icon-toggle/index.html b/example/icon-toggle/web/index.html
similarity index 92%
rename from example/icon-toggle/index.html
rename to example/icon-toggle/web/index.html
index 9cdebe04..0258dea2 100644
--- a/example/icon-toggle/index.html
+++ b/example/icon-toggle/web/index.html
@@ -11,8 +11,14 @@
 
   <link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
-</head>
-<body>
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="preview-block">
 
diff --git a/example/icon-toggle/main.dart b/example/icon-toggle/web/main.dart
similarity index 100%
rename from example/icon-toggle/main.dart
rename to example/icon-toggle/web/main.dart
diff --git a/example/index.html b/example/index.html
index f84c95af..ea6b9f52 100644
--- a/example/index.html
+++ b/example/index.html
@@ -28,27 +28,27 @@ <h2>WSK-Material</h2>
         <ul><li><a href="styleguide.html">Styleguide</a></li></ul>
         <h2>WSK-Material-Samples</h2>
         <ol>
-            <li><a href="animation/index.html">animation/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="button/index.html">button/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="card/index.html">card/index.html</a></li>
-            <li><a href="checkbox/index.html">checkbox/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="column-layout/index.html">column-layout/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="dropdown-menu/index.html">dropdown-menu/index.html</a></li>
-            <li><a href="footer/index.html">footer/index.html</a></li>
-            <li><a href="icon-toggle/index.html">icon-toggle/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="item/index.html">item/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="layout/index.html">layout/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="list/index.html">list/index.html</a></li>
-            <li><a href="palette/index.html">palette/index.html</a></li>
-            <li><a href="radio/index.html">radio/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="shadow/index.html">shadow/index.html</a></li>
-            <li><a href="slider/index.html">slider/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="spinner/index.html">spinner/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="switch/index.html">switch/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="tabs/index.html">tabs/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="textfield/index.html">textfield/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="tooltip/index.html">tooltip/index.html</a><span class="script">[ with main.dart ]</span></li>
-            <li><a href="typography/index.html">typography/index.html</a></li>
+            <li><a href="animation/web/index.html">animation/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="button/web/index.html">button/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="card/web/index.html">card/web/index.html</a></li>
+            <li><a href="checkbox/web/index.html">checkbox/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="column-layout/web/index.html">column-layout/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="dropdown-menu/web/index.html">dropdown-menu/web/index.html</a></li>
+            <li><a href="footer/web/index.html">footer/web/index.html</a></li>
+            <li><a href="icon-toggle/web/index.html">icon-toggle/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="item/web/index.html">item/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="layout/web/index.html">layout/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="list/web/index.html">list/web/index.html</a></li>
+            <li><a href="palette/web/index.html">palette/web/index.html</a></li>
+            <li><a href="radio/web/index.html">radio/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="shadow/web/index.html">shadow/web/index.html</a></li>
+            <li><a href="slider/web/index.html">slider/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="spinner/web/index.html">spinner/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="switch/web/index.html">switch/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="tabs/web/index.html">tabs/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="textfield/web/index.html">textfield/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="tooltip/web/index.html">tooltip/web/index.html</a><span class="script">[ with main.dart ]</span></li>
+            <li><a href="typography/web/index.html">typography/web/index.html</a></li>
 
         </ol>
     </div>
diff --git a/example/item/pubspec.yaml b/example/item/pubspec.yaml
new file mode 100644
index 00000000..30e113fe
--- /dev/null
+++ b/example/item/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_item_sample
+description: WSK Sample 'item' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/item/demo.css b/example/item/web/demo.css
similarity index 100%
rename from example/item/demo.css
rename to example/item/web/demo.css
diff --git a/example/item/demo.scss b/example/item/web/demo.scss
similarity index 100%
rename from example/item/demo.scss
rename to example/item/web/demo.scss
diff --git a/example/item/index.html b/example/item/web/index.html
similarity index 85%
rename from example/item/index.html
rename to example/item/web/index.html
index 90974e36..e412aa6b 100644
--- a/example/item/index.html
+++ b/example/item/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/item/main.dart b/example/item/web/main.dart
similarity index 100%
rename from example/item/main.dart
rename to example/item/web/main.dart
diff --git a/example/layout/pubspec.yaml b/example/layout/pubspec.yaml
new file mode 100644
index 00000000..44e27d74
--- /dev/null
+++ b/example/layout/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_layout_sample
+description: WSK Sample 'layout' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/layout/README.md b/example/layout/web/README.md
similarity index 100%
rename from example/layout/README.md
rename to example/layout/web/README.md
diff --git a/example/layout/demo.css b/example/layout/web/demo.css
similarity index 100%
rename from example/layout/demo.css
rename to example/layout/web/demo.css
diff --git a/example/layout/demo.scss b/example/layout/web/demo.scss
similarity index 100%
rename from example/layout/demo.scss
rename to example/layout/web/demo.scss
diff --git a/example/layout/images/app-icon.png b/example/layout/web/images/app-icon.png
similarity index 100%
rename from example/layout/images/app-icon.png
rename to example/layout/web/images/app-icon.png
diff --git a/example/layout/images/desktop-handsfree-hero.jpg b/example/layout/web/images/desktop-handsfree-hero.jpg
similarity index 100%
rename from example/layout/images/desktop-handsfree-hero.jpg
rename to example/layout/web/images/desktop-handsfree-hero.jpg
diff --git a/example/layout/index.html b/example/layout/web/index.html
similarity index 98%
rename from example/layout/index.html
rename to example/layout/web/index.html
index db498c7b..7543d822 100644
--- a/example/layout/index.html
+++ b/example/layout/web/index.html
@@ -10,8 +10,14 @@
   <link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel='stylesheet'>
 
   <link rel="stylesheet" href="demo.css">
-</head>
-<body>
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
   <h3>Default layout</h3>
   <p>Uses a header for large screen sizes and a collapsible drawer for smaller
     screens.</p>
diff --git a/example/layout/layout.js b/example/layout/web/layout.js
similarity index 100%
rename from example/layout/layout.js
rename to example/layout/web/layout.js
diff --git a/example/layout/main.dart b/example/layout/web/main.dart
similarity index 100%
rename from example/layout/main.dart
rename to example/layout/web/main.dart
diff --git a/example/list/pubspec.yaml b/example/list/pubspec.yaml
new file mode 100644
index 00000000..edff6926
--- /dev/null
+++ b/example/list/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_list_sample
+description: WSK Sample 'list' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/list/demo.css b/example/list/web/demo.css
similarity index 100%
rename from example/list/demo.css
rename to example/list/web/demo.css
diff --git a/example/list/demo.scss b/example/list/web/demo.scss
similarity index 100%
rename from example/list/demo.scss
rename to example/list/web/demo.scss
diff --git a/example/list/images/avatar.png b/example/list/web/images/avatar.png
similarity index 100%
rename from example/list/images/avatar.png
rename to example/list/web/images/avatar.png
diff --git a/example/list/index.html b/example/list/web/index.html
similarity index 91%
rename from example/list/index.html
rename to example/list/web/index.html
index 1203d9bd..e799f196 100644
--- a/example/list/index.html
+++ b/example/list/web/index.html
@@ -12,9 +12,15 @@
 
   <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
-</head>
 
-<body>
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/list/main.dart b/example/list/web/main.dart
similarity index 100%
rename from example/list/main.dart
rename to example/list/web/main.dart
diff --git a/example/palette/pubspec.yaml b/example/palette/pubspec.yaml
new file mode 100644
index 00000000..33c11fc8
--- /dev/null
+++ b/example/palette/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_palette_sample
+description: WSK Sample 'palette' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/palette/demo.css b/example/palette/web/demo.css
similarity index 100%
rename from example/palette/demo.css
rename to example/palette/web/demo.css
diff --git a/example/palette/demo.scss b/example/palette/web/demo.scss
similarity index 100%
rename from example/palette/demo.scss
rename to example/palette/web/demo.scss
diff --git a/example/palette/index.html b/example/palette/web/index.html
similarity index 99%
rename from example/palette/index.html
rename to example/palette/web/index.html
index 60577ba4..cddc2b6e 100644
--- a/example/palette/index.html
+++ b/example/palette/web/index.html
@@ -13,8 +13,14 @@
     <link rel="stylesheet" href="demo.css">
 
     <title>Palette Demo — Web Starter Kit</title>
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
     <div class="PreviewBlock">
       <div class="demo-palette-group demo-palette-group__red">
         <div class="demo-palette-group--heading demo-palette-color--500">
diff --git a/example/palette/main.dart b/example/palette/web/main.dart
similarity index 100%
rename from example/palette/main.dart
rename to example/palette/web/main.dart
diff --git a/example/radio/pubspec.yaml b/example/radio/pubspec.yaml
new file mode 100644
index 00000000..2b3ea055
--- /dev/null
+++ b/example/radio/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_radio_sample
+description: WSK Sample 'radio' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/radio/demo.css b/example/radio/web/demo.css
similarity index 100%
rename from example/radio/demo.css
rename to example/radio/web/demo.css
diff --git a/example/radio/demo.scss b/example/radio/web/demo.scss
similarity index 100%
rename from example/radio/demo.scss
rename to example/radio/web/demo.scss
diff --git a/example/radio/index.html b/example/radio/web/index.html
similarity index 89%
rename from example/radio/index.html
rename to example/radio/web/index.html
index fb02fbba..563aa676 100644
--- a/example/radio/index.html
+++ b/example/radio/web/index.html
@@ -10,8 +10,14 @@
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
     <link rel="stylesheet" href="demo.css">
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <p>A radio button can either be a primary action or a secondary action.</p>
 
diff --git a/example/radio/main.dart b/example/radio/web/main.dart
similarity index 100%
rename from example/radio/main.dart
rename to example/radio/web/main.dart
diff --git a/example/shadow/pubspec.yaml b/example/shadow/pubspec.yaml
new file mode 100644
index 00000000..7327f820
--- /dev/null
+++ b/example/shadow/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_shadow_sample
+description: WSK Sample 'shadow' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/shadow/demo.css b/example/shadow/web/demo.css
similarity index 100%
rename from example/shadow/demo.css
rename to example/shadow/web/demo.css
diff --git a/example/shadow/demo.scss b/example/shadow/web/demo.scss
similarity index 100%
rename from example/shadow/demo.scss
rename to example/shadow/web/demo.scss
diff --git a/example/shadow/index.html b/example/shadow/web/index.html
similarity index 80%
rename from example/shadow/index.html
rename to example/shadow/web/index.html
index ec797ed4..c459542c 100644
--- a/example/shadow/index.html
+++ b/example/shadow/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/shadow/main.dart b/example/shadow/web/main.dart
similarity index 100%
rename from example/shadow/main.dart
rename to example/shadow/web/main.dart
diff --git a/example/slider/pubspec.yaml b/example/slider/pubspec.yaml
new file mode 100644
index 00000000..179343c2
--- /dev/null
+++ b/example/slider/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_slider_sample
+description: WSK Sample 'slider' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/slider/demo.css b/example/slider/web/demo.css
similarity index 100%
rename from example/slider/demo.css
rename to example/slider/web/demo.css
diff --git a/example/slider/demo.scss b/example/slider/web/demo.scss
similarity index 100%
rename from example/slider/demo.scss
rename to example/slider/web/demo.scss
diff --git a/example/slider/index.html b/example/slider/web/index.html
similarity index 85%
rename from example/slider/index.html
rename to example/slider/web/index.html
index f376704e..30910423 100644
--- a/example/slider/index.html
+++ b/example/slider/web/index.html
@@ -10,8 +10,14 @@
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
     <link rel="stylesheet" href="demo.css">
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
     <p>
diff --git a/example/slider/main.dart b/example/slider/web/main.dart
similarity index 100%
rename from example/slider/main.dart
rename to example/slider/web/main.dart
diff --git a/example/spinner/pubspec.yaml b/example/spinner/pubspec.yaml
new file mode 100644
index 00000000..2d5e59da
--- /dev/null
+++ b/example/spinner/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_spinner_sample
+description: WSK Sample 'spinner' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/spinner/demo.css b/example/spinner/web/demo.css
similarity index 100%
rename from example/spinner/demo.css
rename to example/spinner/web/demo.css
diff --git a/example/spinner/demo.scss b/example/spinner/web/demo.scss
similarity index 100%
rename from example/spinner/demo.scss
rename to example/spinner/web/demo.scss
diff --git a/example/spinner/index.html b/example/spinner/web/index.html
similarity index 81%
rename from example/spinner/index.html
rename to example/spinner/web/index.html
index 3c509cc9..99939257 100644
--- a/example/spinner/index.html
+++ b/example/spinner/web/index.html
@@ -10,8 +10,14 @@
   <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
   <link rel="stylesheet" href="demo.css">
-</head>
-<body>
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/spinner/main.dart b/example/spinner/web/main.dart
similarity index 100%
rename from example/spinner/main.dart
rename to example/spinner/web/main.dart
diff --git a/example/styleguide.css b/example/styleguide.css
index 2ed0a2fb..cf794a4e 100644
--- a/example/styleguide.css
+++ b/example/styleguide.css
@@ -775,8 +775,13 @@ dt {
   background-color: #f9f9f9; }
 
 .wsk-navigation {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  flex-wrap: nowrap; }
+  -webkit-flex-wrap: nowrap;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap; }
 
 .wsk-navigation__link {
   color: #424242;
@@ -791,8 +796,15 @@ dt {
 .wsk-layout {
   width: 100%;
   height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
   position: relative; }
@@ -813,12 +825,24 @@ dt {
   box-sizing: border-box; }
 
 .wsk-layout-spacer {
-  flex-grow: 1; }
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1; }
 
 .wsk-layout__drawer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
   width: 240px;
   height: 100%;
   max-height: 100%;
@@ -829,20 +853,30 @@ dt {
   box-sizing: border-box;
   border-right: 1px solid #e0e0e0;
   background: #fafafa;
-  transform: translateX(-250px);
-  transform-style: preserve-3d;
+  -webkit-transform: translateX(-250px);
+      -ms-transform: translateX(-250px);
+          transform: translateX(-250px);
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
   will-change: transform;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: transform;
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-property: -webkit-transform;
+          transition-property: transform;
   color: #424242;
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 5; }
   .wsk-layout__drawer.is-visible {
-    transform: translateX(0); }
+    -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+            transform: translateX(0); }
   .wsk-layout__drawer > * {
-    flex-shrink: 0; }
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0; }
   .wsk-layout__drawer > .wsk-layout-title {
     line-height: 64px;
     padding-left: 24px;
@@ -853,7 +887,11 @@ dt {
         padding-left: 16px; } }
   .wsk-layout__drawer .wsk-navigation {
     width: 100%;
-    flex-direction: column; }
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column; }
   .wsk-layout__drawer .wsk-navigation__link {
     padding: 16px 24px;
     margin: 0; }
@@ -862,7 +900,9 @@ dt {
         padding: 16px 16px; } }
   @media screen and (min-width: 851px) {
     .wsk-layout--fixed-drawer > .wsk-layout__drawer {
-      transform: translateX(0);
+      -webkit-transform: translateX(0);
+          -ms-transform: translateX(0);
+              transform: translateX(0);
       z-index: 2; } }
 
 .wsk-layout__drawer-button {
@@ -871,7 +911,9 @@ dt {
   height: 32px;
   width: 32px;
   border: 0;
-  flex-shrink: 0;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
   overflow: hidden;
   font-size: 26px;
   line-height: 32px;
@@ -903,10 +945,22 @@ dt {
       display: none; } }
 
 .wsk-layout__header {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   margin: 0;
   border: none;
   height: 64px;
@@ -914,10 +968,13 @@ dt {
   background-color: #2196f3;
   color: #eeeeee;
   z-index: 3;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 0.2s;
+          transition-duration: 0.2s;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
-  transition-property: min-height, box-shadow;
+  -webkit-transition-property: min-height, box-shadow;
+          transition-property: min-height, box-shadow;
   padding-left: 80px;
   overflow: hidden; }
   @media screen and (max-width: 850px) {
@@ -945,7 +1002,9 @@ dt {
       .wsk-layout__header.is-compact {
         min-height: 56px; } }
   .wsk-layout__header > * {
-    flex-shrink: 0; }
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0; }
   .wsk-layout__header > *:last-child {
     margin-right: 24px; }
     @media screen and (max-width: 850px) {
@@ -959,8 +1018,15 @@ dt {
     margin: 0;
     padding: 0;
     height: 64px;
-    flex-direction: row;
-    align-items: center; }
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
     @media screen and (max-width: 850px) {
       .wsk-layout__header .wsk-navigation {
         height: 56px; } }
@@ -981,10 +1047,17 @@ dt {
     .wsk-layout__header {
       display: none; }
     .wsk-layout--fixed-header > .wsk-layout__header {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
       display: flex; } }
 
 .wsk-layout__header--multi-row {
-  flex-direction: column; }
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column; }
 
 .wsk-layout__header--medium-tall {
   min-height: 128px; }
@@ -1014,11 +1087,25 @@ dt {
     box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
 
 .wsk-layout__header-row.wsk-layout__header-row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  align-items: center;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   min-height: 64px;
   width: 100%;
   margin-right: 0; }
@@ -1038,7 +1125,9 @@ dt {
         left: 16px;
         top: 12px; } }
   .wsk-layout__header-row.wsk-layout__header-row > * {
-    flex-shrink: 0; }
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0; }
   .wsk-layout__header-row.wsk-layout__header-row > *:last-child {
     margin-right: 24px; }
     @media screen and (max-width: 850px) {
@@ -1057,9 +1146,12 @@ dt {
     width: 100%;
     z-index: 4;
     visibility: hidden;
-    transition-property: background-color;
-    transition-duration: 0.2s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+    -webkit-transition-property: background-color;
+            transition-property: background-color;
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
     .wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
       background-color: rgba(0, 0, 0, 0.5);
       visibility: visible; } }
@@ -1069,7 +1161,10 @@ dt {
   display: inline-block;
   overflow-y: auto;
   overflow-x: hidden;
-  flex-grow: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   z-index: 1; }
   .wsk-layout--fixed-drawer > .wsk-layout__content {
     margin-left: 240px; }
@@ -1089,6 +1184,9 @@ dt {
   width: calc(100% -
         112px);
   padding: 0 0 0 56px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   background-color: #2196f3;
   overflow-y: hidden;
@@ -1115,8 +1213,13 @@ dt {
   border: none;
   margin: 0;
   z-index: 3;
-  flex-grow: 0;
-  flex-shrink: 0;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
   .wsk-layout__container > .wsk-layout__tab-bar-container {
     position: absolute;
@@ -1162,8 +1265,13 @@ dt {
   float: left;
   position: relative;
   display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
   text-decoration: none;
   height: 48px;
   line-height: 48px;
@@ -1178,7 +1286,10 @@ dt {
       padding: 0 12px 0 12px; } }
   .wsk-layout--fixed-tabs .wsk-layout__tab {
     float: none;
-    flex-grow: 1;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
     padding: 0; }
   .wsk-layout.is-upgraded .wsk-layout__tab.is-active {
     color: #eeeeee; }
@@ -1193,7 +1304,8 @@ dt {
     background: #e0e0e0;
     -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
     -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-    transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
+    -webkit-transition: all 1s cubic-bezier(0.4, 0, 1, 1);
+            transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
   .wsk-layout__tab .wsk-layout__tab-ripple-container {
     display: block;
     position: absolute;
@@ -1226,7 +1338,8 @@ body {
 
 .styleguide-demo {
   opacity: 0;
-  transition: opacity 0.6s ease; }
+  -webkit-transition: opacity 0.6s ease;
+          transition: opacity 0.6s ease; }
 
 .styleguide-masthead {
   height: 256px;
diff --git a/example/styleguide.html b/example/styleguide.html
index 58ca697e..3a89d3fa 100644
--- a/example/styleguide.html
+++ b/example/styleguide.html
@@ -25,71 +25,71 @@
     </div>
     <div class=wsk-layout__content>
         <div class=styleguide-demo><h1>Typography</h1>
-            <iframe src=./typography/index.html scrolling=no></iframe>
+            <iframe src=./typography/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>List</h1>
-            <iframe src=./list/index.html scrolling=no></iframe>
+            <iframe src=./list/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Palette</h1>
-            <iframe src=./palette/index.html scrolling=no></iframe>
+            <iframe src=./palette/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Shadows</h1>
-            <iframe src=./shadow/index.html scrolling=no></iframe>
+            <iframe src=./shadow/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Cards</h1>
-            <iframe src=./card/index.html scrolling=no></iframe>
+            <iframe src=./card/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Animation</h1>
-            <iframe src=./animation/index.html scrolling=no></iframe>
+            <iframe src=./animation/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Button</h1>
-            <iframe src=./button/index.html scrolling=no></iframe>
+            <iframe src=./button/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Dropdown Menu</h1>
-            <iframe src=./dropdown-menu/index.html scrolling=no></iframe>
+            <iframe src=./dropdown-menu/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Item</h1>
-            <iframe src=./item/index.html scrolling=no></iframe>
+            <iframe src=./item/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Text Field</h1>
-            <iframe src=./textfield/index.html scrolling=no></iframe>
+            <iframe src=./textfield/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Radio Buttons</h1>
-            <iframe src=./radio/index.html scrolling=no></iframe>
+            <iframe src=./radio/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Checkbox</h1>
-            <iframe src=./checkbox/index.html scrolling=no></iframe>
+            <iframe src=./checkbox/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Switch</h1>
-            <iframe src=./switch/index.html scrolling=no></iframe>
+            <iframe src=./switch/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Icon Toggle</h1>
-            <iframe src=./icon-toggle/index.html scrolling=no></iframe>
+            <iframe src=./icon-toggle/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Slider</h1>
-            <iframe src=./slider/index.html scrolling=no></iframe>
+            <iframe src=./slider/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Spinner</h1>
-            <iframe src=./spinner/index.html scrolling=no></iframe>
+            <iframe src=./spinner/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Layout</h1>
-            <iframe src=./layout/index.html scrolling=no></iframe>
+            <iframe src=./layout/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Content Tabs</h1>
-            <iframe src=./tabs/index.html scrolling=no></iframe>
+            <iframe src=./tabs/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Icons</h1>
 
             <p>See the material-design-icons pack that can be installed in your node_modules directory after running
                 <code>npm install</code></p></div>
         <div class=styleguide-demo><h1>Tooltip</h1>
-            <iframe src=./tooltip/index.html scrolling=no></iframe>
+            <iframe src=./tooltip/web/index.html scrolling=no></iframe>
         </div>
         <div class=styleguide-demo><h1>Column Layout</h1>
-            <iframe src=./column-layout/index.html></iframe>
+            <iframe src=./column-layout/web/index.html></iframe>
         </div>
         <div class=styleguide-demo><h1>Footer</h1>
-            <iframe src=./footer/index.html></iframe>
+            <iframe src=./footer/web/index.html></iframe>
         </div>
     </div>
 </div>
diff --git a/example/styleguide.scss b/example/styleguide.scss
index 0415342a..5a1663bf 100644
--- a/example/styleguide.scss
+++ b/example/styleguide.scss
@@ -59,7 +59,7 @@ body {
 }
 
 .wsk-styleguide .wsk-layout__drawer .wsk-navigation__link {
-  padding: 10px 24px;
+  padding: 8px 24px 5px;
 }
 
 .demosLoaded .styleguide-demo {
diff --git a/example/styleguide/_colors.scss b/example/styleguide/_colors.scss
deleted file mode 100644
index d827b51b..00000000
--- a/example/styleguide/_colors.scss
+++ /dev/null
@@ -1,184 +0,0 @@
-@import "palette/palette";
-
-/* ==========  Color & Themes  ========== */
-
-// Use color primarily for emphasis. Choose colors that fit with
-// your brand and provide good contrast between visual components.
-
-$palette-primary: $palette-blue !default;
-$palette-accent: $palette-pink !default;
-$palette-secondary: $palette-grey !default;
-$palette-disabled: $palette-grey !default;
-$palette-page: $palette-grey !default;
-
-/* ==========  Typography  ========== */
-
-// We use the following default color styles: text-color-primary and
-// text-color-secondary. For light themes, use text-color-primary-inverse
-// and text-color-secondary-inverse.
-
-$text-color-primary: nth($palette-grey, 9) !default;
-$text-color-secondary: nth($palette-grey, 6) !default;
-$text-color-primary-inverse: invert($text-color-primary) !default;
-$text-color-secondary-inverse: invert($text-color-secondary) !default;
-
-/* ==========  Components  ========== */
-
-/* ==========  Standard Buttons  ========== */
-
-// Default button colors.
-$button-primary-color: rgba(#999999, 0.20) !default;
-$button-secondary-color: #000 !default;
-$button-hover-color: $button-primary-color !default;
-$button-active-color: rgba($button-primary-color, 0.40) !default;
-$button-focus-color: rgba(black, 0.12) !default;
-
-// Colored button colors.
-$button-primary-color-alt: nth($palette-primary, 6) !default;
-$button-secondary-color-alt: #fff !default;
-$button-hover-color-alt: nth($palette-primary, 7) !default;
-$button-active-color-alt: nth($palette-primary, 8) !default;
-$button-focus-color-alt: $button-focus-color !default;
-
-// Ripple color for colored raised buttons and FABs.
-$button-ripple-color-alt: white !default;
-
-// Disabled button colors.
-$button-primary-color-disabled: rgba(#000, 0.12) !default;
-$button-secondary-color-disabled: rgba(#000, 0.26) !default;
-
-// FAB colors and sizes.
-$button-fab-color-alt: nth($palette-accent, 5) !default;
-$button-fab-hover-color-alt: nth($palette-accent, 6) !default;
-$button-fab-active-color-alt: nth($palette-accent, 7) !default;
-
-// Icon button colors and sizes.
-$button-icon-color: nth($palette-grey, 8) !default;
-$button-icon-focus-color: $button-focus-color !default;
-
-/* ==========  Icon Toggles  ========== */
-
-$icon-toggle-color: nth($palette-grey, 8) !default;
-$icon-toggle-focus-color: $button-focus-color !default;
-$icon-toggle-checked-color: nth($palette-primary, 6) !default;
-$icon-toggle-disabled-color: rgba(#000, 0.26) !default;
-
-/* ==========  Radio Buttons  ========== */
-
-$radio-color: nth($palette-primary, 6) !default;
-$radio-off-color: rgba(0, 0, 0, 0.54) !default;
-$radio-disabled-color: rgba(0, 0, 0, 0.26) !default;
-
-/* ==========  Ripple effect  ========== */
-
-$ripple-bg-color: nth($palette-grey, 10) !default;
-
-/* ==========  Layout  ========== */
-
-// Drawer
-$layout-drawer-bg-color: nth($palette-page, 1) !default;
-$layout-drawer-border-color: nth($palette-page, 4) !default;
-$layout-text-color: nth($palette-page, 9) !default;
-
-// Header
-$layout-header-bg-color: nth($palette-primary, 6) !default;
-$layout-header-text-color: nth($palette-page, 3) !default;
-
-// Tabs
-$layout-header-tab-highlight: nth($palette-secondary, 4) !default;
-
-/* ==========  Content Tabs  ========== */
-
-$tab-highlight-color: nth($palette-primary, 6) !default;
-$tab-text-color: rgba(0, 0, 0, 0.6) !default;
-$tab-active-text-color: black !default;
-$tab-border-color: nth($palette-grey, 4) !default;
-
-/* ==========  Checkboxes  ========== */
-
-$checkbox-color: nth($palette-primary, 6) !default;
-$checkbox-off-color: rgba(0, 0, 0, 0.54) !default;
-$checkbox-disabled-color: rgba(0, 0, 0, 0.26) !default;
-
-/* ==========  Switches  ========== */
-
-$switch-color: nth($palette-primary, 6) !default;
-$switch-thumb-color: $switch-color !default;
-$switch-track-color: rgba($switch-color, 0.5) !default;
-
-$switch-off-thumb-color: nth($palette-grey, 1) !default;
-$switch-off-track-color: rgba(0, 0, 0, 0.26) !default;
-$switch-disabled-thumb-color: nth($palette-grey, 5) !default;
-$switch-disabled-track-color: rgba(0, 0, 0, 0.12) !default;
-
-/* ==========  Spinner  ========== */
-
-$spinner-color-1: #4285f4 !default;
-$spinner-color-2: #db4437 !default;
-$spinner-color-3: #f4b400 !default;
-$spinner-color-4: #0f9d58 !default;
-
-$spinner-single-color: nth($palette-primary, 6) !default;
-
-/* ==========  Text fields  ========== */
-
-$input-text-background-color: transparent !default;
-$input-text-label-color: rgba(0, 0, 0, 0.26) !default;
-$input-text-bottom-border-color: rgba(0, 0, 0, 0.12) !default;
-$input-text-highlight-color: nth($palette-primary, 6) !default;
-$input-text-disabled-color: $input-text-bottom-border-color !default;
-$input-text-error-color: nth($palette-red, 7) !default;
-
-/* ==========  Card  ========== */
-
-$card-background-color: white !default;
-$heading-color: white !default;
-$heading-back-color: white !default;
-$heading-back-bgcolor: nth($palette-primary, 8) !default;
-$action-link-color: nth($palette-primary, 10) !default;
-$caption-color: white !default;
-$caption-bgcolor: nth($palette-primary, 10) !default;
-$image-placeholder-color: nth($palette-accent, 5) !default;
-$lower-text-color: nth($palette-primary, 10) !default;
-
-/* Heading back */
-$heading-back-border: 0 none rgb(255, 255, 255) !default;
-
-/* ==========  Sliders ========== */
-
-$range-bg-color: rgba(0, 0, 0, 0.26) !default;
-$range-color: nth($palette-primary, 6) !default;
-
-/* ==========  List ========== */
-
-$list-container-item-border-color: #ddd !default;
-$list-container-view-background: rgba(255,255,255,1) !default;
-
-/* ==========  Item ========== */
-
-// Default Item Colors
-$default-item-text-color: #000;
-$default-item-outline-color: nth($palette-secondary, 5) !default;
-$default-item-hover-bg-color: nth($palette-secondary, 3) !default;
-$default-item-focus-bg-color: nth($palette-secondary, 3) !default;
-$default-item-active-bg-color: nth($palette-secondary, 4) !default;
-
-// Disabled Button Colors
-$disabled-item-text-color: nth($palette-disabled, 5) !default;
-
-/* ==========  Dropdown menu ========== */
-
-$default-dropdown-bg-color: #fff !default;
-
-/* ==========  Tooltips  ========== */
-
-$tooltip-text-color: #fff !default;
-$tooltip-background-color: nth($palette-accent, 7) !default;
-
-/* ==========  Footer  ========== */
-
-$footer-bg-color: #454545 !default;
-$footer-color: #A0A0A0 !default;
-$footer-heading-color: #E2E2E2 !default;
-$footer-button-fill-color: $footer-color !default;
-$footer-underline-color: $footer-color;
diff --git a/example/styleguide/index.html b/example/styleguide/index.html
deleted file mode 100644
index 9f5b3e9c..00000000
--- a/example/styleguide/index.html
+++ /dev/null
@@ -1,210 +0,0 @@
-<!doctype html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Style Guide</title>
-
-    <!-- Add to homescreen for Chrome on Android -->
-    <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
-
-    <!-- Add to homescreen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
-    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
-
-    <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
-    <meta name="msapplication-TileColor" content="#3372DF">
-
-    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
-    <!--
-    <link rel="canonical" href="http://www.example.com/">
-    -->
-
-    <!-- Page styles -->
-    <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
-
-    <link rel="stylesheet" href="styleguide/styleguide.css">
-  </head>
-  <body>
-    <div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-styleguide">
-
-      <div class="wsk-layout__drawer">
-        <span class="wsk-layout-title">WSK <strong>Style Guide</strong></span>
-        <nav id="main-navigation" class="wsk-navigation">
-        </nav>
-      </div>
-
-      <div class="wsk-layout__content">
-        <div class="styleguide-demo">
-          <h1>Typography</h1>
-          <iframe src="./styleguide/typography/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>List</h1>
-          <iframe src="./styleguide/list/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Palette</h1>
-          <iframe src="./styleguide/palette/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Shadows</h1>
-          <iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Cards</h1>
-          <iframe src="./styleguide/card/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Animation</h1>
-          <iframe src="./styleguide/animation/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Button</h1>
-          <iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Dropdown Menu</h1>
-          <iframe src="./styleguide/dropdown-menu/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Item</h1>
-          <iframe src="./styleguide/item/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Text Field</h1>
-          <iframe src="./styleguide/textfield/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Radio Buttons</h1>
-          <iframe src="./styleguide/radio/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Checkbox</h1>
-          <iframe src="./styleguide/checkbox/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Switch</h1>
-          <iframe src="./styleguide/switch/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Icon Toggle</h1>
-          <iframe src="./styleguide/icon-toggle/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Slider</h1>
-          <iframe src="./styleguide/slider/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Spinner</h1>
-          <iframe src="./styleguide/spinner/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Layout</h1>
-            <iframe src="./styleguide/layout/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Content Tabs</h1>
-          <iframe src="./styleguide/tabs/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Icons</h1>
-          <p>See the material-design-icons pack that can be installed in your node_modules directory
-          after running <code>npm install</code></p>
-        </div>
-
-
-        <div class="styleguide-demo">
-          <h1>Tooltip</h1>
-          <iframe src="./styleguide/tooltip/demo.html" scrolling="no"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Column Layout</h1>
-            <iframe src="./styleguide/column-layout/demo.html"></iframe>
-        </div>
-
-        <div class="styleguide-demo">
-          <h1>Footer</h1>
-            <iframe src="./styleguide/footer/demo.html"></iframe>
-        </div>
-      </div>
-    </div>
-    <!-- build:js ../../scripts/main.min.js -->
-    <script src="styleguide/wskComponentHandler.js"></script>
-    <script src="styleguide/layout/layout.js" async defer></script>
-    <!-- endbuild -->
-
-    <!-- Script to handle sizing the iFrames -->
-    <script>
-      'use strict';
-      var navList = document.getElementById('main-navigation');
-      var totalDemosPendingLoading = 0;
-      sizeDemos();
-
-      function sizeDemos() {
-        var demos = document.querySelectorAll('.styleguide-demo');
-        totalDemosPendingLoading = demos.length;
-        for (var i = 0; i < demos.length; i++) {
-          var demoTitle = demos[i].querySelector('h1').textContent;
-          var anchorLink = 'demo-' + i;
-
-          // Add list item
-          var navAnchor = document.createElement('a');
-          navAnchor.classList.add('wsk-navigation__link');
-          navAnchor.href = '#' + anchorLink;
-          navAnchor.appendChild(document.createTextNode(demoTitle));
-          navList.appendChild(navAnchor);
-
-          var anchor = document.createElement('a');
-          anchor.id = anchorLink;
-          demos[i].insertBefore(anchor , demos[i].querySelector('h1'));
-
-          // Size iframe
-          sizeDemo(demos[i]);
-        }
-      }
-
-      function sizeDemo(rootDemoElement) {
-        var iframe = rootDemoElement.querySelector('iframe');
-        if (iframe === null) {
-          totalDemosPendingLoading--;
-          return;
-        }
-        iframe.onload = function() {
-          var contentHeight = iframe.contentDocument.documentElement.scrollHeight;
-          iframe.style.height = contentHeight + 'px';
-          iframe.classList.add('heightSet');
-          totalDemosPendingLoading--;
-          if (totalDemosPendingLoading <= 0) {
-            document.body.classList.add('demosLoaded');
-          }
-        };
-      }
-    </script>
-  </body>
-</html>
diff --git a/example/styleguide/styleguide.css b/example/styleguide/styleguide.css
deleted file mode 100644
index 2ed0a2fb..00000000
--- a/example/styleguide/styleguide.css
+++ /dev/null
@@ -1,1271 +0,0 @@
-@charset "UTF-8";
-/* We're splitting fonts into "preferred" and "performance" in order to optimize
-   page loading. For important text, such as the body, we want it to load
-   immediately and not wait for the web font load, whereas for other sections,
-   such as headers and titles, we're OK with things taking a bit longer to load.
-   We do have some optional classes and parameters in the mixins, in case you
-   definitely want to make sure you're using the preferred font and don't mind
-   the performance hit.
-   We should be able to improve on this once CSS Font Loading L3 becomes more
-   widely available.
-*/
-html, body {
-  font-family: 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px; }
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-  padding: 0; }
-
-/**
- * Styles for HTML elements
- */
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  opacity: 0.54;
-  font-size: 0.6em; }
-
-h1 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em; }
-
-h2 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 48px; }
-
-h3 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px; }
-
-h4 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  -moz-osx-font-smoothing: grayscale; }
-
-h5 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em; }
-
-h6 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-p {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  margin: 0 0 16px 0; }
-
-a {
-  font-weight: bold; }
-
-blockquote {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 300;
-  font-style: italic;
-  line-height: 1;
-  letter-spacing: 0.08em; }
-  blockquote:before {
-    content: '“';
-    opacity: 0.54; }
-  blockquote:after {
-    content: '”';
-    opacity: 0.54; }
-
-mark {
-  background-color: #f4ff81; }
-
-dt {
-  font-weight: 700; }
-
-/**
- * Class Name Styles
- */
-.wsk-typography--display-4 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 112px;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.04em; }
-
-.wsk-typography--display-4--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 112px;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.04em;
-  opacity: 0.54; }
-
-.wsk-typography--display-3 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em; }
-
-.wsk-typography--display-3--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  opacity: 0.54; }
-
-.wsk-typography--display-2 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 48px; }
-
-.wsk-typography--display-2--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 48px;
-  opacity: 0.54; }
-
-.wsk-typography--display-1 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px; }
-
-.wsk-typography--display-1--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px;
-  opacity: 0.54; }
-
-.wsk-typography--headline {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  -moz-osx-font-smoothing: grayscale; }
-
-.wsk-typography--headline--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  -moz-osx-font-smoothing: grayscale;
-  opacity: 0.87; }
-
-.wsk-typography--title {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em; }
-
-.wsk-typography--title--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em;
-  opacity: 0.87; }
-
-.wsk-typography--subhead {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--subhead--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-2 {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--Body-2--colorContrast {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-1 {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--body-1--colorContrast {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-2--forcePreferredFont {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--Body-2--forcePreferredFont--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-1--forcePreferredFont {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--body-1--forcePreferredFont--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--caption {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em; }
-
-.wsk-typography--caption--forcePreferredFont {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em; }
-
-.wsk-typography--caption--colorContrast {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em;
-  opacity: 0.54; }
-
-.wsk-typography--caption--forcePreferredFont--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em;
-  opacity: 0.54; }
-
-.wsk-typography--menu {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--menu--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--button {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 1;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--button--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--textLeft {
-  text-align: left; }
-
-.wsk-typography--textRight {
-  text-align: right; }
-
-.wsk-typography--textCenter {
-  text-align: center; }
-
-.wsk-typography--textJustify {
-  text-align: justify; }
-
-.wsk-typography--textNowrap {
-  white-space: nowrap; }
-
-.wsk-typography--textLowercase {
-  text-transform: lowercase; }
-
-.wsk-typography--textUppercase {
-  text-transform: uppercase; }
-
-.wsk-typography--textCapitalize {
-  text-transform: capitalize; }
-
-.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td, .wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
-  background-color: #f9f9f9; }
-
-.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td, .wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
-  background-color: #f9f9f9; }
-
-/**
-*
-* Material design color palettes.
-* @see http://www.google.com/design/spec/style/color.html
-*
-**/
-/* ==========  Color Palettes  ========== */
-/* ==========  Color & Themes  ========== */
-/* ==========  Typography  ========== */
-/* ==========  Components  ========== */
-/* ==========  Standard Buttons  ========== */
-/* ==========  Icon Toggles  ========== */
-/* ==========  Radio Buttons  ========== */
-/* ==========  Ripple effect  ========== */
-/* ==========  Layout  ========== */
-/* ==========  Content Tabs  ========== */
-/* ==========  Checkboxes  ========== */
-/* ==========  Switches  ========== */
-/* ==========  Spinner  ========== */
-/* ==========  Text fields  ========== */
-/* ==========  Card  ========== */
-/* Heading back */
-/* ==========  Sliders ========== */
-/* ==========  List ========== */
-/* ==========  Item ========== */
-/* ==========  Dropdown menu ========== */
-/* ==========  Tooltips  ========== */
-/* ==========  Footer  ========== */
-/**
-*
-* Material design color palettes.
-* @see http://www.google.com/design/spec/style/color.html
-*
-**/
-/* ==========  Color Palettes  ========== */
-/* ==========  Color & Themes  ========== */
-/* ==========  Typography  ========== */
-/* ==========  Components  ========== */
-/* ==========  Standard Buttons  ========== */
-/* ==========  Icon Toggles  ========== */
-/* ==========  Radio Buttons  ========== */
-/* ==========  Ripple effect  ========== */
-/* ==========  Layout  ========== */
-/* ==========  Content Tabs  ========== */
-/* ==========  Checkboxes  ========== */
-/* ==========  Switches  ========== */
-/* ==========  Spinner  ========== */
-/* ==========  Text fields  ========== */
-/* ==========  Card  ========== */
-/* Heading back */
-/* ==========  Sliders ========== */
-/* ==========  List ========== */
-/* ==========  Item ========== */
-/* ==========  Dropdown menu ========== */
-/* ==========  Tooltips  ========== */
-/* ==========  Footer  ========== */
-.wsk-shadow--z1 {
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
-
-.wsk-shadow--z2 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.23); }
-
-.wsk-shadow--z3 {
-  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.19), 0 6px 3px 0 rgba(0, 0, 0, 0.23); }
-
-.wsk-shadow--z4 {
-  box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.25), 0 10px 5px 0 rgba(0, 0, 0, 0.22); }
-
-.wsk-shadow--z5 {
-  box-shadow: 0 19px 19px 0 rgba(0, 0, 0, 0.3), 0 15px 6px 0 rgba(0, 0, 0, 0.22); }
-
-/* We're splitting fonts into "preferred" and "performance" in order to optimize
-   page loading. For important text, such as the body, we want it to load
-   immediately and not wait for the web font load, whereas for other sections,
-   such as headers and titles, we're OK with things taking a bit longer to load.
-   We do have some optional classes and parameters in the mixins, in case you
-   definitely want to make sure you're using the preferred font and don't mind
-   the performance hit.
-   We should be able to improve on this once CSS Font Loading L3 becomes more
-   widely available.
-*/
-html, body {
-  font-family: 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px; }
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-  padding: 0; }
-
-/**
- * Styles for HTML elements
- */
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  opacity: 0.54;
-  font-size: 0.6em; }
-
-h1 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em; }
-
-h2 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 48px; }
-
-h3 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px; }
-
-h4 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  -moz-osx-font-smoothing: grayscale; }
-
-h5 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em; }
-
-h6 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-p {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  margin: 0 0 16px 0; }
-
-a {
-  font-weight: bold; }
-
-blockquote {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 300;
-  font-style: italic;
-  line-height: 1;
-  letter-spacing: 0.08em; }
-  blockquote:before {
-    content: '“';
-    opacity: 0.54; }
-  blockquote:after {
-    content: '”';
-    opacity: 0.54; }
-
-mark {
-  background-color: #f4ff81; }
-
-dt {
-  font-weight: 700; }
-
-/**
- * Class Name Styles
- */
-.wsk-typography--display-4 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 112px;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.04em; }
-
-.wsk-typography--display-4--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 112px;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.04em;
-  opacity: 0.54; }
-
-.wsk-typography--display-3 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em; }
-
-.wsk-typography--display-3--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 56px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  opacity: 0.54; }
-
-.wsk-typography--display-2 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 48px; }
-
-.wsk-typography--display-2--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 45px;
-  font-weight: 400;
-  line-height: 48px;
-  opacity: 0.54; }
-
-.wsk-typography--display-1 {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px; }
-
-.wsk-typography--display-1--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 34px;
-  font-weight: 400;
-  line-height: 40px;
-  opacity: 0.54; }
-
-.wsk-typography--headline {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  -moz-osx-font-smoothing: grayscale; }
-
-.wsk-typography--headline--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 24px;
-  font-weight: 400;
-  line-height: 32px;
-  -moz-osx-font-smoothing: grayscale;
-  opacity: 0.87; }
-
-.wsk-typography--title {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em; }
-
-.wsk-typography--title--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em;
-  opacity: 0.87; }
-
-.wsk-typography--subhead {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--subhead--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-2 {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--Body-2--colorContrast {
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-1 {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--body-1--colorContrast {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-2--forcePreferredFont {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--Body-2--forcePreferredFont--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--body-1--forcePreferredFont {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--body-1--forcePreferredFont--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--caption {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em; }
-
-.wsk-typography--caption--forcePreferredFont {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em; }
-
-.wsk-typography--caption--colorContrast {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em;
-  opacity: 0.54; }
-
-.wsk-typography--caption--forcePreferredFont--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  letter-spacing: 0.08em;
-  opacity: 0.54; }
-
-.wsk-typography--menu {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--menu--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--button {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 1;
-  letter-spacing: 0.04em; }
-
-.wsk-typography--button--colorContrast {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: uppercase;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  opacity: 0.87; }
-
-.wsk-typography--textLeft {
-  text-align: left; }
-
-.wsk-typography--textRight {
-  text-align: right; }
-
-.wsk-typography--textCenter {
-  text-align: center; }
-
-.wsk-typography--textJustify {
-  text-align: justify; }
-
-.wsk-typography--textNowrap {
-  white-space: nowrap; }
-
-.wsk-typography--textLowercase {
-  text-transform: lowercase; }
-
-.wsk-typography--textUppercase {
-  text-transform: uppercase; }
-
-.wsk-typography--textCapitalize {
-  text-transform: capitalize; }
-
-.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td, .wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
-  background-color: #f9f9f9; }
-
-.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td, .wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
-  background-color: #f9f9f9; }
-
-.wsk-navigation {
-  display: flex;
-  flex-wrap: nowrap; }
-
-.wsk-navigation__link {
-  color: #424242;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 14px;
-  margin: 0; }
-
-.wsk-navigation__link:hover {
-  background-color: #e0e0e0; }
-
-.wsk-layout {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  position: relative; }
-
-.wsk-layout__container {
-  position: absolute;
-  width: 100%;
-  height: 100%; }
-
-.wsk-layout-title {
-  display: block;
-  position: relative;
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0.02em;
-  box-sizing: border-box; }
-
-.wsk-layout-spacer {
-  flex-grow: 1; }
-
-.wsk-layout__drawer {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  width: 240px;
-  height: 100%;
-  max-height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
-  box-sizing: border-box;
-  border-right: 1px solid #e0e0e0;
-  background: #fafafa;
-  transform: translateX(-250px);
-  transform-style: preserve-3d;
-  will-change: transform;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-property: transform;
-  color: #424242;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 5; }
-  .wsk-layout__drawer.is-visible {
-    transform: translateX(0); }
-  .wsk-layout__drawer > * {
-    flex-shrink: 0; }
-  .wsk-layout__drawer > .wsk-layout-title {
-    line-height: 64px;
-    padding-left: 24px;
-    border-bottom: 1px solid #e0e0e0; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__drawer > .wsk-layout-title {
-        line-height: 56px;
-        padding-left: 16px; } }
-  .wsk-layout__drawer .wsk-navigation {
-    width: 100%;
-    flex-direction: column; }
-  .wsk-layout__drawer .wsk-navigation__link {
-    padding: 16px 24px;
-    margin: 0; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__drawer .wsk-navigation__link {
-        padding: 16px 16px; } }
-  @media screen and (min-width: 851px) {
-    .wsk-layout--fixed-drawer > .wsk-layout__drawer {
-      transform: translateX(0);
-      z-index: 2; } }
-
-.wsk-layout__drawer-button {
-  display: block;
-  position: relative;
-  height: 32px;
-  width: 32px;
-  border: 0;
-  flex-shrink: 0;
-  overflow: hidden;
-  font-size: 26px;
-  line-height: 32px;
-  font-family: Helvetica, Arial, sans-serif;
-  margin: 8px;
-  color: rgba(0, 0, 0, 0.5);
-  z-index: 3; }
-  .wsk-layout__drawer-button::after {
-    content: '☰'; }
-  .wsk-layout--overlay-drawer-button > .wsk-layout__drawer-button {
-    position: absolute;
-    top: 0;
-    left: 0; }
-  .wsk-layout__header .wsk-layout__drawer-button {
-    position: absolute;
-    left: 24px;
-    top: 16px;
-    height: 32px;
-    margin: 0;
-    width: 32px;
-    color: #eeeeee;
-    background-color: #2196f3; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header .wsk-layout__drawer-button {
-        left: 16px;
-        top: 12px; } }
-  @media screen and (min-width: 851px) {
-    .wsk-layout__drawer-button {
-      display: none; } }
-
-.wsk-layout__header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  margin: 0;
-  border: none;
-  height: 64px;
-  min-height: 64px;
-  background-color: #2196f3;
-  color: #eeeeee;
-  z-index: 3;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
-  transition-property: min-height, box-shadow;
-  padding-left: 80px;
-  overflow: hidden; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__header {
-      height: 56px;
-      min-height: 56px;
-      padding-left: 72px; } }
-  .wsk-layout--fixed-drawer:not(.is-small-screen) > .wsk-layout__header {
-    padding-left: 24px; }
-  .wsk-layout__header > .wsk-layout-icon {
-    position: absolute;
-    left: 24px;
-    top: 16px;
-    height: 32px;
-    width: 32px;
-    overflow: hidden;
-    z-index: 3; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header > .wsk-layout-icon {
-        left: 16px;
-        top: 12px; } }
-  .wsk-layout__header.is-compact {
-    min-height: 64px; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header.is-compact {
-        min-height: 56px; } }
-  .wsk-layout__header > * {
-    flex-shrink: 0; }
-  .wsk-layout__header > *:last-child {
-    margin-right: 24px; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header > *:last-child {
-        margin-right: 16px; } }
-  .wsk-layout__header > .wsk-navigation:last-child {
-    margin-right: 0; }
-  .wsk-layout__header .wsk-layout-title {
-    display: block; }
-  .wsk-layout__header .wsk-navigation {
-    margin: 0;
-    padding: 0;
-    height: 64px;
-    flex-direction: row;
-    align-items: center; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header .wsk-navigation {
-        height: 56px; } }
-  .wsk-layout__header .wsk-navigation__link {
-    color: #eeeeee;
-    line-height: 64px;
-    padding: 0 24px; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header .wsk-navigation__link {
-        line-height: 56px;
-        padding: 0 16px; } }
-  .wsk-layout__header .wsk-navigation__link:hover {
-    background-color: rgba(97, 97, 97, 0.6); }
-  @media screen and (min-width: 851px) {
-    .wsk-layout--fixed-drawer > .wsk-layout__header {
-      margin-left: 240px; } }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__header {
-      display: none; }
-    .wsk-layout--fixed-header > .wsk-layout__header {
-      display: flex; } }
-
-.wsk-layout__header--multi-row {
-  flex-direction: column; }
-
-.wsk-layout__header--medium-tall {
-  min-height: 128px; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__header--medium-tall {
-      min-height: 112px; } }
-
-.wsk-layout__header--tall {
-  min-height: 192px; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__header--tall {
-      min-height: 168px; } }
-
-.wsk-layout__header--transparent.wsk-layout__header--transparent {
-  background-color: transparent;
-  box-shadow: none; }
-
-.wsk-layout__header--seamed {
-  box-shadow: none; }
-
-.wsk-layout__header--scroll {
-  box-shadow: none; }
-
-.wsk-layout__header--waterfall {
-  box-shadow: none; }
-  .wsk-layout__header--waterfall.is-casting-shadow {
-    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
-
-.wsk-layout__header-row.wsk-layout__header-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  align-items: center;
-  min-height: 64px;
-  width: 100%;
-  margin-right: 0; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__header-row.wsk-layout__header-row {
-      min-height: 56px; } }
-  .wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
-    position: absolute;
-    left: 24px;
-    top: 16px;
-    height: 32px;
-    width: 32px;
-    overflow: hidden;
-    z-index: 3; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
-        left: 16px;
-        top: 12px; } }
-  .wsk-layout__header-row.wsk-layout__header-row > * {
-    flex-shrink: 0; }
-  .wsk-layout__header-row.wsk-layout__header-row > *:last-child {
-    margin-right: 24px; }
-    @media screen and (max-width: 850px) {
-      .wsk-layout__header-row.wsk-layout__header-row > *:last-child {
-        margin-right: 16px; } }
-  .wsk-layout__header-row.wsk-layout__header-row > .wsk-navigation:last-child {
-    margin-right: 0; }
-
-@media screen and (max-width: 850px) {
-  .wsk-layout__obfuscator {
-    background-color: transparent;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    z-index: 4;
-    visibility: hidden;
-    transition-property: background-color;
-    transition-duration: 0.2s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-    .wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
-      background-color: rgba(0, 0, 0, 0.5);
-      visibility: visible; } }
-
-.wsk-layout__content {
-  -ms-flex: 0 1 auto;
-  display: inline-block;
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex-grow: 1;
-  z-index: 1; }
-  .wsk-layout--fixed-drawer > .wsk-layout__content {
-    margin-left: 240px; }
-  .wsk-layout__header--scroll ~ .wsk-layout__content {
-    overflow: visible; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout--fixed-drawer > .wsk-layout__content {
-      margin-left: 0; }
-    .wsk-layout__header--scroll ~ .wsk-layout__content {
-      overflow-y: auto;
-      overflow-x: hidden; } }
-
-.wsk-layout__tab-bar {
-  position: absolute;
-  top: 0;
-  height: 96px;
-  width: calc(100% -
-        112px);
-  padding: 0 0 0 56px;
-  display: flex;
-  background-color: #2196f3;
-  overflow-y: hidden;
-  overflow-x: scroll; }
-  .wsk-layout__tab-bar::-webkit-scrollbar {
-    display: none; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__tab-bar {
-      width: calc(100% -
-          60px);
-      padding: 0 0 0 60px; } }
-  .wsk-layout--fixed-tabs .wsk-layout__tab-bar {
-    padding: 0;
-    overflow: hidden;
-    width: 100%; }
-  .wsk-layout__tab-bar.is-casting-shadow {
-    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
-
-.wsk-layout__tab-bar-container {
-  position: relative;
-  overflow: hidden;
-  height: 48px;
-  width: 100%;
-  border: none;
-  margin: 0;
-  z-index: 3;
-  flex-grow: 0;
-  flex-shrink: 0;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
-  .wsk-layout__container > .wsk-layout__tab-bar-container {
-    position: absolute;
-    top: 0;
-    left: 0; }
-
-.wsk-layout__tab-bar-button {
-  display: inline-block;
-  position: absolute;
-  height: 48px;
-  line-height: 48px;
-  width: 56px;
-  z-index: 4;
-  text-align: center;
-  background-color: #2196f3;
-  color: transparent;
-  cursor: pointer; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__tab-bar-button {
-      display: none;
-      width: 60px; } }
-  .wsk-layout--fixed-tabs .wsk-layout__tab-bar-button {
-    display: none; }
-  .wsk-layout__tab-bar-button.is-active {
-    color: #eeeeee; }
-
-.wsk-layout__tab-bar-left-button {
-  left: 0; }
-  .wsk-layout__tab-bar-left-button::after {
-    font-size: 26px;
-    content: "<"; }
-
-.wsk-layout__tab-bar-right-button {
-  right: 0; }
-  .wsk-layout__tab-bar-right-button::after {
-    font-size: 26px;
-    content: ">"; }
-
-.wsk-layout__tab {
-  margin: 0;
-  border: none;
-  padding: 0 24px 0 24px;
-  float: left;
-  position: relative;
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  text-decoration: none;
-  height: 48px;
-  line-height: 48px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 14px;
-  text-transform: uppercase;
-  color: rgba(238, 238, 238, 0.6);
-  overflow: hidden; }
-  @media screen and (max-width: 850px) {
-    .wsk-layout__tab {
-      padding: 0 12px 0 12px; } }
-  .wsk-layout--fixed-tabs .wsk-layout__tab {
-    float: none;
-    flex-grow: 1;
-    padding: 0; }
-  .wsk-layout.is-upgraded .wsk-layout__tab.is-active {
-    color: #eeeeee; }
-  .wsk-layout.is-upgraded .wsk-layout__tab.is-active::after {
-    height: 2px;
-    width: 100%;
-    display: block;
-    content: " ";
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    background: #e0e0e0;
-    -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-    -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0s alternate forwards;
-    transition: all 1s cubic-bezier(0.4, 0, 1, 1); }
-  .wsk-layout__tab .wsk-layout__tab-ripple-container {
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    z-index: 1;
-    overflow: hidden; }
-
-.wsk-layout__tab-panel {
-  display: block; }
-  .wsk-layout.is-upgraded .wsk-layout__tab-panel {
-    display: none; }
-  .wsk-layout.is-upgraded .wsk-layout__tab-panel.is-active {
-    display: block; }
-
-body {
-  margin: 0px; }
-
-.styleguide-demo h1 {
-  margin: 48px 24px 0 24px; }
-
-.styleguide-demo h1:after {
-  content: '';
-  display: block;
-  width: 100%;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
-  margin-top: 24px; }
-
-.styleguide-demo {
-  opacity: 0;
-  transition: opacity 0.6s ease; }
-
-.styleguide-masthead {
-  height: 256px;
-  background: #0d47a1;
-  padding: 115px 16px 0; }
-
-.styleguide-container {
-  position: relative;
-  max-width: 960px;
-  width: 100%; }
-
-.styleguide-title {
-  color: #fff;
-  bottom: auto;
-  position: relative;
-  font-size: 56px;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.02em; }
-  .styleguide-title:after {
-    border-bottom: 0px; }
-  .styleguide-title span {
-    font-weight: 300; }
-
-.wsk-styleguide .wsk-layout__drawer .wsk-navigation__link {
-  padding: 10px 24px; }
-
-.demosLoaded .styleguide-demo {
-  opacity: 1; }
-
-iframe {
-  display: block;
-  width: 100%;
-  border: none; }
-
-iframe.heightSet {
-  overflow: hidden; }
-
-.demo-wrapper {
-  margin: 24px; }
-  .demo-wrapper iframe {
-    border: 1px solid rgba(0, 0, 0, 0.5); }
diff --git a/example/styleguide/styleguide.scss b/example/styleguide/styleguide.scss
deleted file mode 100644
index 0415342a..00000000
--- a/example/styleguide/styleguide.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@import 'packages/wsk_material/sass/typography/typography';
-@import "packages/wsk_material/sass/colors";
-@import "packages/wsk_material/sass/layout/layout";
-
-$padding: 24px;
-
-body {
-  margin: 0px;
-}
-
-.styleguide-demo h1 {
-  margin: ($padding * 2) $padding 0 $padding;
-}
-
-.styleguide-demo h1:after {
-  content: '';
-
-  display: block;
-  width: 100%;
-
-  border-bottom: 1px solid rgba(0,0,0,0.5);
-  margin-top: $padding;
-}
-
-.styleguide-demo {
-  opacity: 0;
-
-  transition: opacity 0.6s ease;
-}
-
-.styleguide-masthead {
-  height: 256px;
-  background: nth($palette-primary, 10);
-  padding: 115px 16px 0;
-}
-
-.styleguide-container {
-  position: relative;
-  max-width: 960px;
-  width: 100%;
-}
-
-.styleguide-title {
-  color: #fff;
-  bottom: auto;
-  position: relative;
-  font-size: 56px;
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.02em;
-
-  &:after {
-    border-bottom: 0px;
-  }
-
-  span {
-    font-weight: 300;
-  }
-}
-
-.wsk-styleguide .wsk-layout__drawer .wsk-navigation__link {
-  padding: 10px 24px;
-}
-
-.demosLoaded .styleguide-demo {
-  opacity: 1;
-}
-
-iframe {
-  display: block;
-
-  width: 100%;
-
-  border: none;
-}
-
-iframe.heightSet {
-  overflow: hidden;
-}
-
-.demo-wrapper {
-  margin: $padding;
-
-  iframe {
-    border: 1px solid rgba(0,0,0,0.5);
-  }
-}
diff --git a/example/switch/pubspec.yaml b/example/switch/pubspec.yaml
new file mode 100644
index 00000000..b06d9448
--- /dev/null
+++ b/example/switch/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_switch_sample
+description: WSK Sample 'switch' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/switch/demo.css b/example/switch/web/demo.css
similarity index 100%
rename from example/switch/demo.css
rename to example/switch/web/demo.css
diff --git a/example/switch/demo.scss b/example/switch/web/demo.scss
similarity index 100%
rename from example/switch/demo.scss
rename to example/switch/web/demo.scss
diff --git a/example/switch/index.html b/example/switch/web/index.html
similarity index 87%
rename from example/switch/index.html
rename to example/switch/web/index.html
index 7bb7f847..1d802324 100644
--- a/example/switch/index.html
+++ b/example/switch/web/index.html
@@ -10,8 +10,14 @@
   <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
   <link rel="stylesheet" href="demo.css">
-</head>
-<body>
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/switch/main.dart b/example/switch/web/main.dart
similarity index 100%
rename from example/switch/main.dart
rename to example/switch/web/main.dart
diff --git a/example/tabs/pubspec.yaml b/example/tabs/pubspec.yaml
new file mode 100644
index 00000000..c99ce925
--- /dev/null
+++ b/example/tabs/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_tabs_sample
+description: WSK Sample 'tabs' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/tabs/demo.css b/example/tabs/web/demo.css
similarity index 100%
rename from example/tabs/demo.css
rename to example/tabs/web/demo.css
diff --git a/example/tabs/demo.scss b/example/tabs/web/demo.scss
similarity index 100%
rename from example/tabs/demo.scss
rename to example/tabs/web/demo.scss
diff --git a/example/tabs/index.html b/example/tabs/web/index.html
similarity index 88%
rename from example/tabs/index.html
rename to example/tabs/web/index.html
index 18487624..bff88993 100644
--- a/example/tabs/index.html
+++ b/example/tabs/web/index.html
@@ -10,8 +10,14 @@
   <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
   <link rel="stylesheet" href="demo.css">
-</head>
-<body>
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
 
diff --git a/example/tabs/main.dart b/example/tabs/web/main.dart
similarity index 100%
rename from example/tabs/main.dart
rename to example/tabs/web/main.dart
diff --git a/example/textfield/pubspec.yaml b/example/textfield/pubspec.yaml
new file mode 100644
index 00000000..7478a6b4
--- /dev/null
+++ b/example/textfield/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_textfield_sample
+description: WSK Sample 'textfield' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/textfield/demo.css b/example/textfield/web/demo.css
similarity index 100%
rename from example/textfield/demo.css
rename to example/textfield/web/demo.css
diff --git a/example/textfield/demo.scss b/example/textfield/web/demo.scss
similarity index 100%
rename from example/textfield/demo.scss
rename to example/textfield/web/demo.scss
diff --git a/example/textfield/index.html b/example/textfield/web/index.html
similarity index 94%
rename from example/textfield/index.html
rename to example/textfield/web/index.html
index 9571f8c3..596ab334 100644
--- a/example/textfield/index.html
+++ b/example/textfield/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <div class="PreviewBlock">
     <form action="#">
diff --git a/example/textfield/main.dart b/example/textfield/web/main.dart
similarity index 100%
rename from example/textfield/main.dart
rename to example/textfield/web/main.dart
diff --git a/example/tooltip/pubspec.yaml b/example/tooltip/pubspec.yaml
new file mode 100644
index 00000000..dc4aa738
--- /dev/null
+++ b/example/tooltip/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_tooltip_sample
+description: WSK Sample 'tooltip' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/tooltip/demo.css b/example/tooltip/web/demo.css
similarity index 100%
rename from example/tooltip/demo.css
rename to example/tooltip/web/demo.css
diff --git a/example/tooltip/demo.scss b/example/tooltip/web/demo.scss
similarity index 74%
rename from example/tooltip/demo.scss
rename to example/tooltip/web/demo.scss
index 154b8993..7f90953c 100644
--- a/example/tooltip/demo.scss
+++ b/example/tooltip/web/demo.scss
@@ -8,14 +8,9 @@ body {
 }
 
 .preview-block {
-    background : #eee;
-    padding    : 20px;
-    height     : 120px;
-    margin-top : 20px;
-
-    &:first-of-type {
-        margin-top: 0;
-    }
+  background: #eee;
+  padding   : 20px;
+  height: 120px;
 }
 
 .icon {
diff --git a/example/tooltip/index.html b/example/tooltip/web/index.html
similarity index 92%
rename from example/tooltip/index.html
rename to example/tooltip/web/index.html
index 35350a47..f5ba0aed 100644
--- a/example/tooltip/index.html
+++ b/example/tooltip/web/index.html
@@ -12,9 +12,15 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
-</head>
 
-<body>
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
+  </head>
+
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
     <div class="PreviewBlock">
 
diff --git a/example/tooltip/main.dart b/example/tooltip/web/main.dart
similarity index 100%
rename from example/tooltip/main.dart
rename to example/tooltip/web/main.dart
diff --git a/example/typography/pubspec.yaml b/example/typography/pubspec.yaml
new file mode 100644
index 00000000..8634c998
--- /dev/null
+++ b/example/typography/pubspec.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_typography_sample
+description: WSK Sample 'typography' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+
diff --git a/example/typography/demo.css b/example/typography/web/demo.css
similarity index 100%
rename from example/typography/demo.css
rename to example/typography/web/demo.css
diff --git a/example/typography/demo.scss b/example/typography/web/demo.scss
similarity index 100%
rename from example/typography/demo.scss
rename to example/typography/web/demo.scss
diff --git a/example/typography/images/img-1.png b/example/typography/web/images/img-1.png
similarity index 100%
rename from example/typography/images/img-1.png
rename to example/typography/web/images/img-1.png
diff --git a/example/typography/images/img-2.png b/example/typography/web/images/img-2.png
similarity index 100%
rename from example/typography/images/img-2.png
rename to example/typography/web/images/img-2.png
diff --git a/example/typography/index.html b/example/typography/web/index.html
similarity index 97%
rename from example/typography/index.html
rename to example/typography/web/index.html
index 79cb7269..61e13e3d 100644
--- a/example/typography/index.html
+++ b/example/typography/web/index.html
@@ -11,8 +11,14 @@
 
     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
 
+
+	<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }
+	</style>
   </head>
-  <body>
+	<body class="wsk-upgrading"> <div class="loading">Loading...</div>
 
   <h2>Scale &amp; Basic Styles</h2>
 
diff --git a/example/typography/main.dart b/example/typography/web/main.dart
similarity index 100%
rename from example/typography/main.dart
rename to example/typography/web/main.dart
diff --git a/gensamples b/gensamples
new file mode 120000
index 00000000..bc8f6cc2
--- /dev/null
+++ b/gensamples
@@ -0,0 +1 @@
+tool/gensamples.dart
\ No newline at end of file
diff --git a/lib/src/WskComponentHandler.dart b/lib/src/WskComponentHandler.dart
index 7ac062ef..c4d9db33 100644
--- a/lib/src/WskComponentHandler.dart
+++ b/lib/src/WskComponentHandler.dart
@@ -57,16 +57,18 @@ class WskComponentHandler {
     Future upgradeAllRegistered() {
         html.querySelector("html")
             ..classes.add("wsk-js")
-            ..classes.add("wsk-dart")
-            ..classes.add("wsk-upgrading");
+            ..classes.add("wsk-dart");
+
+        html.querySelector("body").classes.add("wsk-upgrading");
 
         final Future future = new Future(() {
+
             _registeredComponents.forEach((final String key, final WskConfig config) {
                 _upgradeDom(config);
                 _logger.info("${config.cssClass} upgraded with ${config.classAsString}...");
             });
 
-            html.querySelector("html").classes.remove("wsk-upgrading");
+            html.querySelector("body").classes.remove("wsk-upgrading");
             html.querySelector("html").classes.add("wsk-upgraded");
             _logger.info("All components are upgraded...");
 
diff --git a/tool/gensamples.dart b/tool/gensamples.dart
new file mode 100755
index 00000000..ebafaf9e
--- /dev/null
+++ b/tool/gensamples.dart
@@ -0,0 +1,676 @@
+#!/usr/bin/env dart
+
+import 'dart:io';
+import 'dart:async';
+import 'dart:collection';
+import 'dart:convert';
+import 'dart:math';
+
+import 'package:args/args.dart';
+
+import 'package:logging/logging.dart';
+import 'package:logging_handlers/logging_handlers_shared.dart';
+
+import 'package:validate/validate.dart';
+
+class Application {
+    final Logger _logger = new Logger("gensamples.Application");
+
+    static const _ARG_HELP          = 'help';
+    static const _ARG_LOGLEVEL      = 'loglevel';
+    static const _ARG_SETTINGS      = 'settings';
+    static const _ARG_GENERATE      = 'gen';
+    static const _ARG_MK_BACKUP     = 'makebackup';
+    static const _ARG_SHOW_DIRS     = 'showdirs';
+
+    ArgParser _parser;
+
+    Application() : _parser = Application._createOptions();
+
+    void run(List<String> args) {
+
+        try {
+            final ArgResults argResults = _parser.parse(args);
+            final Config config = new Config(argResults);
+
+            _configLogging(config.loglevel);
+
+            if (argResults[_ARG_HELP] || (config.dirstoscan.length == 0 && args.length == 0)) {
+                _showUsage();
+            }
+            else if(argResults[_ARG_SETTINGS]) {
+                _printSettings(config.settings);
+            }
+            else if(argResults[_ARG_SHOW_DIRS]) {
+                _iterateThroughDirSync(config.sassdir,config.folderstoexclude.split("[,;]"),(final File file) {
+                    _logger.info(file.path);
+                });
+            }
+            else if(argResults[_ARG_GENERATE]) {
+                final List<_LinkInfo> links = new List<_LinkInfo>();
+                final List<String> foldersToExclude = config.folderstoexclude.split("[,;]");
+
+                _iterateThroughDirSync(config.sassdir,foldersToExclude,(final File file) {
+                    final String sampleName = file.parent.path.replaceFirst("${config.sassdir}/","");
+                    //_logger.info("   Found: $file in $sampleName");
+
+                    final Directory samplesDir = new Directory(config.samplesdir);
+                    if(!samplesDir.existsSync()) {
+                        samplesDir.createSync();
+                    }
+
+                    final Directory sampleDir = new Directory("${config.samplesdir}/${sampleName}");
+                    final Directory webDir = new Directory("${config.samplesdir}/${sampleName}/web");
+                    final Directory backupDir = new Directory("${config.samplesdir}/${sampleName}.backup");
+                    if(sampleDir.existsSync() && backupDir.existsSync()) {
+                        backupDir.deleteSync(recursive: true);
+                        _logger.fine("${backupDir.path} removed...");
+                    }
+                    if(sampleDir.existsSync() && config.mkbackup ) {
+                        sampleDir.renameSync(backupDir.path);
+                        _logger.fine("made ${sampleDir.path}} -> ${backupDir.path} backup...");
+
+                    } else if(sampleDir.existsSync()) {
+                        sampleDir.deleteSync(recursive: true);
+                        _logger.fine("${sampleDir.path} deleted...");
+                    }
+
+                    sampleDir.createSync();
+                    _logger.info("${sampleDir.path} created...");
+
+                    webDir.createSync();
+                    _logger.info("${webDir.path} created...");
+
+                    final Directory portBaseDir = new Directory(config.portbase);
+                    if(!portBaseDir.existsSync()) {
+                        portBaseDir.createSync(recursive: true);
+                    }
+
+                    final File srcDemo = new File("${config.sassdir}/${sampleName}/demo.html");
+                    final File srcScss = new File("${config.sassdir}/${sampleName}/demo.scss");
+                    final File targetDemo = new File("${webDir.path}/index.html");
+                    final File targetScss = new File("${webDir.path}/demo.scss");
+                    final File targetCss = new File("${webDir.path}/demo.css");
+
+                    final File srcJs = new File("${config.sassdir}/${sampleName}/${sampleName}.js");
+                    final File srcDartMain = new File("${config.maintemplate}");
+                    final File targetDartMain = new File("${webDir.path}/main.dart");
+                    final File targetConvertedJS = new File("${portBaseDir.path}/_${sampleName}.dart.js");
+
+                    final Link targetPackages = new Link("${webDir.path}/packages");
+                    final File srcPackages = new File("../../../packages");
+
+                    links.add(new _LinkInfo(targetDemo.path,srcJs.existsSync()));
+
+                    if(srcDemo.existsSync()) {
+                        srcDemo.copySync(targetDemo.path);
+                        // wird angelegt auch wenn im SRC kein JS da ist - main.dart gibt es immer
+                        srcDartMain.copySync(targetDartMain.path);
+                        _addDartMainToIndexHTML(targetDemo);
+
+                        if(!targetPackages.existsSync()) {
+                            targetPackages.createSync(srcPackages.path);
+                            _logger.fine("    ${srcPackages.path} created...");
+                        }
+
+                        _logger.fine("    ${targetDemo.path} created...");
+                    }
+                    if(srcScss.existsSync()) {
+                        srcScss.copySync(targetScss.path);
+                        _logger.fine("    ${targetScss.path} created...");
+                        _changeImportStatementInSassFile(targetScss,sampleName);
+
+                        final ProcessResult result = Process.runSync('sassc', [targetScss.path, targetCss.path]);
+                        if(result.exitCode != 0) {
+                            _logger.severe(result.stderr);
+                        } else {
+                            _logger.fine("    ${targetCss.path} created...");
+                        }
+
+                        final ProcessResult resultPrefixer = Process.runSync('autoprefixer', [ targetCss.path]);
+                        if(resultPrefixer.exitCode != 0) {
+                            _logger.severe(resultPrefixer.stderr);
+                        } else {
+                            _logger.fine("    ${targetCss.path} prefixed...");
+                        }
+                    }
+
+                    if(srcJs.existsSync()) {
+                        _logger.fine("    ${srcDartMain.path} -> ${targetDartMain.path} copied...");
+                        srcJs.copySync(targetConvertedJS.path);
+                        _Js2Dart(targetConvertedJS);
+                    }
+
+                    _copySubdirs(new File("${config.sassdir}/${sampleName}"),new File(webDir.path));
+                    _writeYaml(sampleName,config);
+
+                });
+                _writeIndexHtml(config,links);
+            }
+            else {
+                _showUsage();
+            }
+        }
+
+        on FormatException
+        catch (error) {
+            _showUsage();
+        }
+    }
+
+    // -- private -------------------------------------------------------------
+    void _copySubdirs(final File sourceDir, final File targetDir, { int level: 0 } ) {
+        Validate.notNull(sourceDir);
+        Validate.notNull(targetDir);
+
+        _logger.fine("Start!!!! ${sourceDir.path} -> ${targetDir.path} , Level: $level");
+        final Directory directory = new Directory(sourceDir.path);
+        directory.listSync(recursive: false).where((final FileSystemEntity entity) {
+            // _logger.info("Check ${entity.path}");
+
+            if(entity.path.startsWith(".") || entity.path.contains("/.")) {
+                return false;
+            }
+            if(FileSystemEntity.isLinkSync(entity.path)) {
+                return false;
+            }
+
+            return true;
+
+        }).forEach((final FileSystemEntity entity) {
+            //_logger.info("D ${entity.path}");
+
+            if (FileSystemEntity.isDirectorySync(entity.path)) {
+                final File src = new File(entity.path);
+                final File target = new File(entity.path.replaceFirst(sourceDir.path,""));
+                _copySubdirs(new File("${entity.path}"),new File("${targetDir.path}${target.path}"),level: ++level);
+
+            } else {
+                if(level > 0) {
+                    final File src = new File(entity.path);
+                    final File target = new File("${targetDir.path}${entity.path.replaceFirst(sourceDir.path,"")}");
+                    if(!target.existsSync()) {
+                        target.createSync(recursive: true);
+                    }
+                    _logger.info("    copy ${src.path} -> ${target.path} (Level $level)...");
+                    src.copySync(target.path);
+                }
+            }
+        });
+    }
+
+    void _Js2Dart(final File jsToConvert) {
+        Validate.notNull(jsToConvert);
+        Validate.notNull(jsToConvert.existsSync());
+
+        final List<String> lines = jsToConvert.readAsLinesSync();
+        final StringBuffer contents = new StringBuffer();
+        bool isCommentTurnedOn = false;
+
+        contents.writeln("import 'dart:html' as html;");
+        contents.writeln("import 'dart:math' as Math;");
+        contents.writeln();
+
+        for(final String line in lines) {
+            if(isCommentTurnedOn) {
+                contents.writeln("// $line");
+                continue;
+            }
+            if(line.contains("// in the global")) {
+                isCommentTurnedOn = true;
+                contents.writeln("// $line\n");
+                continue;
+            }
+
+            if(line.contains("this.element_ = element;")) { continue; }
+            if(line.contains("'use strict';")) { continue; }
+            if(line.contains("* @private")) { continue; }
+            if(line.contains("/**")) { continue; }
+            if(line.contains(" */")) { continue; }
+
+            String newLine = line.replaceAll("this.element_","element");
+            newLine = newLine.replaceAll("this.CssClasses_.","_cssClasses.");
+            newLine = newLine.replaceAll(".CssClasses_.","._cssClasses.");
+            newLine = newLine.replaceAll(".classList.",".classes.");
+            newLine = newLine.replaceAll(".appendChild(",".append(");
+            newLine = newLine.replaceAll("this.Constant_.","_constant.");
+            newLine = newLine.replaceAll("this.init()","init()");
+            newLine = newLine.replaceAll("};","}");
+            newLine = newLine.replaceAll("===","==");
+            newLine = newLine.replaceAll(".bind(this)","");
+            newLine = newLine.replaceAll("var ","final ");
+            newLine = newLine.replaceAll("document.querySelector(","html.querySelector(");
+            newLine = newLine.replaceAll("document.createElement('span')","new html.SpanElement()");
+            newLine = newLine.replaceAll("document.createElement('div')","new html.DivElement()");
+            newLine = newLine.replaceAll("document.getElementById","html.document.getElementById");
+            newLine = newLine.replaceAll("if (element) {","if (element != null) {");
+            newLine = newLine.replaceAll(".parentElement.",".parent.");
+
+            if(newLine.contains("final ")) { contents.writeln(); }
+            if(newLine.contains("= new html.")) { contents.writeln(); }
+            if(newLine.contains("} else {")) { contents.writeln(); }
+
+            newLine = newLine.replaceAllMapped(new RegExp('\s*([A-Z_]+):[ ]([0-9\-]+).*'),
+                (final Match m) => "  final int ${m[1]} = ${m[2]};");
+
+            newLine = newLine.replaceAllMapped(new RegExp("\s*([A-Z_]+):[ ]'([^']+)'.*"),
+                (final Match m) => "  final String ${m[1]} = '${m[2]}';");
+
+            newLine = newLine.replaceAllMapped(new RegExp("([^.]+).prototype.CssClasses_ ="),
+                (final Match m) => "class _${m[1]}CssClasses");
+
+            newLine = newLine.replaceAllMapped(new RegExp("([^.]+).prototype.Constant_ ="),
+                (final Match m) => "class _${m[1]}Constant");
+
+            newLine = newLine.replaceAllMapped(new RegExp("([^.]+).prototype.Mode_ ="),
+                (final Match m) => "class _${m[1]}Mode");
+
+            newLine = newLine.replaceAllMapped(new RegExp("([^.]+).prototype.([^_]+)(_*) = function\\(\\)"),
+                (final Match m) => "/// $line\nvoid ${m[3]}${m[2]}()");
+
+            newLine = newLine.replaceAllMapped(new RegExp("([^.]+).prototype.([^_]+)(_*) = function\\(([^\\)]+)\\)"),
+                (final Match m) => "/// $line\nvoid ${m[3]}${m[2]}(final ${m[4]})");
+
+            newLine = newLine.replaceAll("(final event)","(final html.Event event)");
+
+            newLine = newLine.replaceFirst(new RegExp("^ \\* "),"/// ");
+
+            newLine = newLine.replaceAllMapped(new RegExp("this\\.([^_]+)_"),
+                (final Match m) => "_${m[1]}");
+
+            newLine = newLine.replaceAllMapped(new RegExp("\\.([a-zA-Z]+)_+(\\.|\\()"),
+                (final Match m) => "._${m[1]}${m[2]}");
+
+            newLine = newLine.replaceFirst(new RegExp("^function "),"/*function*/\nclass ");
+            newLine = newLine.replaceAll(", function()",", /*function*/ ()");
+            newLine = newLine.replaceAll("(function()","( /*function*/ ()");
+            newLine = newLine.replaceAll(", function(e)",", /*function*/ (e)");
+            newLine = newLine.replaceAll("= function()","= /*function*/ ()");
+
+            if (line.contains(".addEventListener('click',")) {
+                contents.writeln("\n\t// .addEventListener('click', -> .onClick.listen(<MouseEvent>);");
+                newLine = newLine.replaceFirst(".addEventListener('click',",".onClick.listen(");
+            }
+            if (line.contains(".addEventListener('scroll',")) {
+                contents.writeln("\n\t// .addEventListener('scroll', -- .onScroll.listen(<Event>);");
+                newLine = newLine.replaceFirst(".addEventListener('scroll',",".onScroll.listen(");
+            }
+            if (line.contains(".addEventListener('change',")) {
+                contents.writeln("\n\t// .addEventListener('change', -- .onChange.listen(<Event>);");
+                newLine = newLine.replaceFirst(".addEventListener('change',",".onChange.listen(");
+            }
+            if (line.contains(".addEventListener('focus',")) {
+                contents.writeln("\n\t// .addEventListener('focus', -- .onFocus.listen(<Event>);");
+                newLine = newLine.replaceFirst(".addEventListener('focus',",".onFocus.listen(");
+            }
+            if (line.contains(".addEventListener('blur',")) {
+                contents.writeln("\n\t// .addEventListener('blur', -- .onBlur.listen(<Event>);");
+                newLine = newLine.replaceFirst(".addEventListener('blur',",".onBlur.listen(");
+            }
+            if (line.contains(".addEventListener('mouseup',")) {
+                contents.writeln("\n\t// .addEventListener('mouseup', -- .onMouseUp.listen(<MouseEvent>);");
+                newLine = newLine.replaceFirst(".addEventListener('mouseup',",".onMouseUp.listen(");
+            }
+            if (line.contains(".addEventListener('mouseenter',")) {
+                contents.writeln("\n\t// .addEventListener('mouseenter', -- .onMouseEnter.listen(<MouseEvent>);");
+                newLine = newLine.replaceFirst(".addEventListener('mouseenter',",".onMouseEnter.listen(");
+            }
+            if (line.contains(".addEventListener('mouseleave',")) {
+                contents.writeln("\n\t// .addEventListener('mouseleave', -- .onMouseLeave.listen(<MouseEvent>);");
+                newLine = newLine.replaceFirst(".addEventListener('mouseleave',",".onMouseLeave.listen(");
+            }
+
+            if( line.contains(new RegExp("^function [^{]+{"))) {
+                final String className = line.replaceAllMapped(new RegExp("^function ([^\\(]+)\\(.*"),
+                    (final Match m) => "${m[1]}");
+
+                contents.writeln("class $className {\n");
+
+                String params = line.replaceAllMapped(new RegExp("^function [^\\(]+(([^\\)]+)).*"),
+                    (final Match m) => "${m[1]}");
+                params = params.replaceFirst("(","");
+
+                final List<String> ptemp = new List<String>();
+                params.split(',').forEach((final String element) {
+                    ptemp.add("this.${element.trim()}");
+                    contents.writeln("    final ${element.trim()};");
+                });
+
+                contents.writeln();
+                contents.writeln("    $className(${ptemp.join(",")});");
+                continue;
+            }
+
+            newLine = newLine.replaceAll("this.","");
+
+            contents.writeln(newLine);
+        }
+
+        jsToConvert.writeAsStringSync(contents.toString().replaceAll(new RegExp("\n{2,}"),"\n\n"));
+    }
+
+    void _writeYaml(final String sampleName,final Config config) {
+        Validate.notBlank(sampleName);
+        Validate.notNull(config);
+
+        final Directory sampleDir = new Directory("${config.samplesdir}/${sampleName}");
+
+        final File srcYaml = new File("${config.yamltemplate}");
+        final File targetYaml = new File("${config.samplesdir}/${sampleName}/pubspec.yaml");
+        if(targetYaml.existsSync()) {
+            targetYaml.delete();
+        }
+        final String contents = srcYaml.readAsStringSync().replaceAll("{{samplename}}",sampleName);
+        targetYaml.writeAsStringSync(contents);
+    }
+
+    void _writeIndexHtml(final Config config, final List<_LinkInfo> links) {
+        Validate.notNull(config);
+        Validate.notNull(links);
+
+
+        final File srcIndexHtml = new File("${config.indextemplate}");
+        final File targetIndexHtml = new File("${config.samplesdir}/index.html");
+        if(targetIndexHtml.existsSync()) {
+            targetIndexHtml.delete();
+        }
+
+        final String contents = srcIndexHtml.readAsStringSync();
+        final StringBuffer buffer = new StringBuffer();
+        links.forEach((final _LinkInfo linkinfo) {
+            final String script = linkinfo.hasScript ? '<span class="script">[ with main.dart ]</span>' : '';
+            final String link = linkinfo.link.replaceFirst("${config.samplesdir}/","");
+
+            buffer.writeln('            <li><a href="${link}">${link}</a>$script</li>');
+        });
+
+        targetIndexHtml.writeAsString(contents.replaceFirst("{samples}",buffer.toString()));
+    }
+
+    void _addDartMainToIndexHTML(final File indexFile) {
+        Validate.notNull(indexFile);
+        Validate.isTrue(indexFile.existsSync());
+
+        final List<String> lines = indexFile.readAsLinesSync();
+        final StringBuffer buffer = new StringBuffer();
+
+        lines.forEach((final String line) {
+            if(line.contains("<script")) {
+                final String newline = "    <!-- ${line.trim()} -->";
+                buffer.writeln(newline);
+
+            } else if(line.contains("</body>")) {
+                buffer.writeln('    <!-- start Autogenerated with gensamples.dart -->');
+                buffer.writeln('    <script type="application/dart" src="main.dart"></script>');
+                buffer.writeln('    <script type="text/javascript" src="packages/browser/dart.js"></script>');
+                buffer.writeln('    <!-- end Autogenerated with gensamples.dart -->');
+                buffer.writeln(line);
+            }
+            else {
+                buffer.writeln(line);
+            }
+        });
+
+        final String style = """\t<style>
+            div.loading { visibility: hidden; }
+            body.wsk-upgrading > * { visibility: hidden; }
+            body.wsk-upgrading div.loading { visibility: visible; }\n\t</style>""";
+
+        final String newBody = '\t<body class="wsk-upgrading"> <div class="loading">Loading...</div>';
+
+        String contents = buffer.toString();
+        contents = contents.replaceFirst(new RegExp(r".*</head>"),"\n$style\n  </head>");
+        contents = contents.replaceFirst(new RegExp(r".*<body>"),newBody);
+
+        indexFile.writeAsStringSync(contents);
+    }
+
+    void _changeImportStatementInSassFile(final File scssFile,final String sampleName) {
+        Validate.notNull(scssFile);
+        Validate.isTrue(scssFile.existsSync());
+
+        final List<String> lines = scssFile.readAsLinesSync();
+        final StringBuffer contents = new StringBuffer();
+
+        lines.forEach((final String line) {
+            if(line.contains(new RegExp("@import [\"']{1}\\\.{2}"))) {
+                final String newline = line.replaceAllMapped(new RegExp("@import ([\"']){1}\\\.{2}/"),
+                (final Match m) => "@import ${m[1]}packages/wsk_material/sass/");
+
+                contents.writeln(newline);
+
+            } else if(line.contains(new RegExp("@import [\"']{1}"))) {
+                final String newline = line.replaceAllMapped(new RegExp("@import ([\"']){1}"),
+                    (final Match m) => "@import ${m[1]}packages/wsk_material/sass/$sampleName/");
+
+                contents.writeln(newline);
+            }
+            else {
+                contents.writeln(line);
+            }
+        });
+
+        scssFile.writeAsStringSync(contents.toString());
+    }
+
+       /// Goes through the files
+    void _iterateThroughDirSync(final String dir,final List<String> foldersToExclude, void callback(final File file)) {
+        Validate.notNull(foldersToExclude);
+
+        _logger.info("Scanning: $dir");
+
+        // its OK if the path starts with packages but not if the path contains packages (avoid recursion)
+        final RegExp regexp = new RegExp("^/*packages/*");
+
+        final Directory directory = new Directory(dir);
+        if (directory.existsSync()) {
+
+            directory.listSync(recursive: true).where((final FileSystemEntity entity) {
+                _logger.fine("Entity: ${entity}");
+
+                bool isUsableFile = (entity != null && FileSystemEntity.isFileSync(entity.path) &&
+                    ( entity.path.endsWith(".dart") || entity.path.endsWith(".DART")) || entity.path.endsWith(".html") );
+
+                if(!isUsableFile) {
+                    return false;
+                }
+
+                for(final String folder in foldersToExclude) {
+                    if(entity.path.contains(folder)) {
+                        return false;
+                    }
+                }
+
+                if(entity.path.contains("packages")) {
+                    // return only true if the path starts!!!!! with packages
+                    return entity.path.contains(regexp);
+                }
+
+                return true;
+
+            }).any((final File file) {
+                //_logger.fine("  Found: ${file}");
+                callback(file);
+            });
+        }
+    }
+
+    void _showUsage() {
+        print("Usage: gensamples [options]");
+        _parser.getUsage().split("\n").forEach((final String line) {
+            print("    $line");
+        });
+
+        print("");
+    }
+
+    void _printSettings(final Map<String,String> settings) {
+        Validate.notEmpty(settings);
+
+        int getMaxKeyLength() {
+            int length = 0;
+            settings.keys.forEach((final String key) => length = max(length,key.length));
+            return length;
+        }
+
+        final int maxKeyLeght = getMaxKeyLength();
+
+        String prepareKey(final String key) {
+            return "${key[0].toUpperCase()}${key.substring(1)}:".padRight(maxKeyLeght + 1);
+        }
+
+        print("Settings:");
+        settings.forEach((final String key,final String value) {
+            print("    ${prepareKey(key)} $value");
+        });
+    }
+
+    static ArgParser _createOptions() {
+        final ArgParser parser = new ArgParser()
+
+            ..addFlag(_ARG_HELP,            abbr: 'h', negatable: false, help: "Shows this message")
+            ..addFlag(_ARG_SETTINGS,        abbr: 's', negatable: false, help: "Prints settings")
+            ..addFlag(_ARG_GENERATE,        abbr: 'g', negatable: false, help: "Generate samples")
+            ..addFlag(_ARG_MK_BACKUP,       abbr: 'b', negatable: false, help: "Make backup")
+            ..addFlag(_ARG_SHOW_DIRS,       abbr: 'd', negatable: false, help: "Show source-Dirs")
+
+            ..addOption(_ARG_LOGLEVEL,      abbr: 'v', help: "[ info | debug | warning ]")
+            ;
+
+        return parser;
+    }
+
+    void _configLogging(final String loglevel) {
+        Validate.notBlank(loglevel);
+
+        hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
+
+        // now control the logging.
+        // Turn off all logging first
+        switch(loglevel) {
+            case "fine":
+            case "debug":
+                Logger.root.level = Level.FINE;
+                break;
+
+            case "warning":
+                Logger.root.level = Level.SEVERE;
+                break;
+
+            default:
+                Logger.root.level = Level.INFO;
+        }
+
+        Logger.root.onRecord.listen(new LogPrintHandler(messageFormat: "%m"));
+    }
+}
+
+/**
+ * Defines default-configurations.
+ * Most of these configs can be overwritten by commandline args.
+ */
+class Config {
+    final Logger _logger = new Logger("gensamples.Config");
+
+    static const String _KEY_SASS_DIR           = "sassdir";
+    static const String _KEY_SAMPLES_DIR        = "example";
+    static const String _KEY_LOGLEVEL           = "loglevel";
+    static const String _KEY_MK_BACKUP          = "mkbackup";
+    static const String _KEY_MAIN_TEMPLATE      = "maintemplate";
+    static const String _KEY_INDEX_TEMPLATE     = "indextemplate";
+    static const String _KEY_YAML_TEMPLATE      = "yamltemplate";
+    static const String _KEY_FOLDERS_TO_EXCLUDE = "excludefolder";
+    static const String _KEY_PORT_BASE          = "portbase";
+
+    final ArgResults _argResults;
+    final Map<String,dynamic> _settings = new Map<String,dynamic>();
+
+    Config(this._argResults) {
+
+        _settings[_KEY_SASS_DIR]            = 'lib/sass';
+        _settings[_KEY_SAMPLES_DIR]         = 'example';
+        _settings[_KEY_LOGLEVEL]            = 'info';
+        _settings[_KEY_MK_BACKUP]           = false;
+        _settings[_KEY_MAIN_TEMPLATE]       = "tool/templates/main.tmpl.dart";
+        _settings[_KEY_INDEX_TEMPLATE]      = "tool/templates/index.tmpl.html";
+        _settings[_KEY_YAML_TEMPLATE]       = "tool/templates/pubspec.tmpl.yaml";
+        _settings[_KEY_FOLDERS_TO_EXCLUDE]  = "icons";   // Liste durch , getrennt
+        _settings[_KEY_PORT_BASE]           = "tool/portbase"; // Ziel für die konvertierten JS-Files
+
+        _overwriteSettingsWithArgResults();
+    }
+
+    List<String> get dirstoscan => _argResults.rest;
+
+    String get loglevel => _settings[_KEY_LOGLEVEL];
+
+    String get sassdir => _settings[_KEY_SASS_DIR];
+
+    String get samplesdir => _settings[_KEY_SAMPLES_DIR];
+
+    bool get mkbackup => _settings[_KEY_MK_BACKUP];
+
+    String get maintemplate => _settings[_KEY_MAIN_TEMPLATE];
+
+    String get indextemplate => _settings[_KEY_INDEX_TEMPLATE];
+
+    String get yamltemplate => _settings[_KEY_YAML_TEMPLATE];
+
+    String get folderstoexclude => _settings[_KEY_FOLDERS_TO_EXCLUDE];
+
+    String get portbase => _settings[_KEY_PORT_BASE];
+
+    Map<String,String> get settings {
+        final Map<String,String> settings = new Map<String,String>();
+
+        settings["SASS-Dir"]                    = sassdir;
+        settings["Samples-Dir"]                 = samplesdir;
+        settings["loglevel"]                    = loglevel;
+        settings["make backup"]                 = mkbackup ? "yes" : "no";
+        settings["Main-Template"]               = maintemplate;
+        settings["Index-Template"]              = indextemplate;
+        settings["YAML-Template"]               = yamltemplate;
+        settings["Folders to exclude"]          = folderstoexclude;
+        settings["Base-Dir for js2Dart files"]  = portbase;
+
+        if(dirstoscan.length > 0) {
+            settings["Dirs to scan"] = dirstoscan.join(", ");
+        }
+
+        return settings;
+    }
+
+    // -- private -------------------------------------------------------------
+
+    _overwriteSettingsWithArgResults() {
+
+        /// Makes sure that path does not end with a /
+        String checkPath(final String arg) {
+            String path = arg;
+            if(path.endsWith("/")) {
+                path = path.replaceFirst(new RegExp("/\$"),"");
+            }
+            return path;
+        }
+
+        if(_argResults[Application._ARG_LOGLEVEL] != null) {
+            _settings[_KEY_LOGLEVEL] = _argResults[Application._ARG_LOGLEVEL];
+        }
+
+        if(_argResults[Application._ARG_MK_BACKUP] != null) {
+            _settings[_KEY_MK_BACKUP] = _argResults[Application._ARG_MK_BACKUP] as bool;
+        }
+    }
+}
+
+class _LinkInfo {
+    final String link;
+    final bool hasScript;
+    _LinkInfo(this.link, this.hasScript);
+}
+
+void main(List<String> arguments) {
+    final Application application = new Application();
+    application.run( arguments );
+}
+
diff --git a/example/animation/_animation.dart.js b/tool/portbase/_animation.dart.js
similarity index 100%
rename from example/animation/_animation.dart.js
rename to tool/portbase/_animation.dart.js
diff --git a/example/button/_button.dart.js b/tool/portbase/_button.dart.js
similarity index 100%
rename from example/button/_button.dart.js
rename to tool/portbase/_button.dart.js
diff --git a/example/checkbox/_checkbox.dart.js b/tool/portbase/_checkbox.dart.js
similarity index 100%
rename from example/checkbox/_checkbox.dart.js
rename to tool/portbase/_checkbox.dart.js
diff --git a/example/column-layout/_column-layout.dart.js b/tool/portbase/_column-layout.dart.js
similarity index 100%
rename from example/column-layout/_column-layout.dart.js
rename to tool/portbase/_column-layout.dart.js
diff --git a/example/icon-toggle/_icon-toggle.dart.js b/tool/portbase/_icon-toggle.dart.js
similarity index 100%
rename from example/icon-toggle/_icon-toggle.dart.js
rename to tool/portbase/_icon-toggle.dart.js
diff --git a/example/item/_item.dart.js b/tool/portbase/_item.dart.js
similarity index 100%
rename from example/item/_item.dart.js
rename to tool/portbase/_item.dart.js
diff --git a/example/layout/_layout.dart.js b/tool/portbase/_layout.dart.js
similarity index 100%
rename from example/layout/_layout.dart.js
rename to tool/portbase/_layout.dart.js
diff --git a/example/radio/_radio.dart.js b/tool/portbase/_radio.dart.js
similarity index 100%
rename from example/radio/_radio.dart.js
rename to tool/portbase/_radio.dart.js
diff --git a/example/slider/_slider.dart.js b/tool/portbase/_slider.dart.js
similarity index 100%
rename from example/slider/_slider.dart.js
rename to tool/portbase/_slider.dart.js
diff --git a/example/spinner/_spinner.dart.js b/tool/portbase/_spinner.dart.js
similarity index 100%
rename from example/spinner/_spinner.dart.js
rename to tool/portbase/_spinner.dart.js
diff --git a/example/switch/_switch.dart.js b/tool/portbase/_switch.dart.js
similarity index 100%
rename from example/switch/_switch.dart.js
rename to tool/portbase/_switch.dart.js
diff --git a/example/tabs/_tabs.dart.js b/tool/portbase/_tabs.dart.js
similarity index 100%
rename from example/tabs/_tabs.dart.js
rename to tool/portbase/_tabs.dart.js
diff --git a/example/textfield/_textfield.dart.js b/tool/portbase/_textfield.dart.js
similarity index 100%
rename from example/textfield/_textfield.dart.js
rename to tool/portbase/_textfield.dart.js
diff --git a/example/tooltip/_tooltip.dart.js b/tool/portbase/_tooltip.dart.js
similarity index 100%
rename from example/tooltip/_tooltip.dart.js
rename to tool/portbase/_tooltip.dart.js
diff --git a/tool/templates/index.tmpl.html b/tool/templates/index.tmpl.html
new file mode 100644
index 00000000..cf57b722
--- /dev/null
+++ b/tool/templates/index.tmpl.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WSK-Material</title>
+    <link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
+      <style>
+          .script { padding-left: 1em; }
+          body {
+              font-family: "Roboto", Arial, "sans-serif";
+              font-size: 15px;;
+          }
+          a {
+              text-decoration: none;
+              min-width: 200px;
+              display: inline-block;
+          }
+          .links { padding: 2em; }
+          .links div { margin-left: 1em; }
+      </style>
+  </head>
+  <body>
+    <div class="PreviewBlock">
+        <h2>WSK-Material</h2>
+        <ul><li><a href="styleguide.html">Styleguide</a></li></ul>
+        <h2>WSK-Material-Samples</h2>
+        <ol>
+{samples}
+        </ol>
+    </div>
+  </body>
+</html>
diff --git a/tool/templates/main.tmpl.dart b/tool/templates/main.tmpl.dart
new file mode 100644
index 00000000..7ec92d3d
--- /dev/null
+++ b/tool/templates/main.tmpl.dart
@@ -0,0 +1,19 @@
+import 'package:logging/logging.dart';
+import 'package:console_log_handler/console_log_handler.dart';
+
+import 'package:wsk_material/wskcomponets.dart';
+
+main() {
+    configLogging();
+    registerAllWskComponents();
+    upgradeAllRegistered();
+}
+
+void configLogging() {
+    hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
+
+    // now control the logging.
+    // Turn off all logging first
+    Logger.root.level = Level.INFO;
+    Logger.root.onRecord.listen(new LogConsoleHandler());
+}
\ No newline at end of file
diff --git a/tool/templates/pubspec.tmpl.yaml b/tool/templates/pubspec.tmpl.yaml
new file mode 100644
index 00000000..b2e06ef8
--- /dev/null
+++ b/tool/templates/pubspec.tmpl.yaml
@@ -0,0 +1,23 @@
+name: wsk_material_{{samplename}}_sample
+description: WSK Sample '{{samplename}}' - Material Design
+version: 0.1.0
+author: Mike Mitterer <office@mikemitterer.at>
+homepage: https://github.com/MikeMitterer/dart-wsk-material
+
+dependencies:
+  browser: any
+
+  intl: any
+  args: any
+  validate: any
+  browser_detect: any
+
+  logging: any
+  logging_handlers: any
+  console_log_handler: any
+  #  path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
+
+  wsk_material:
+    path: ../../
+
+