diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss
index 0f671d9d58..08282644e6 100644
--- a/demos/component-docs/app.scss
+++ b/demos/component-docs/app.scss
@@ -7,9 +7,14 @@ $colors: (
   energized:  #ffc527,
   royal:      #7e60ff,
 );
-
 $font-path: '../../dist/fonts';
+
 @import "../../ionic/ionic";
+@import "cards/background/styles";
+@import "cards/advanced-weather/styles";
+@import "cards/advanced-map/styles";
+@import "icons/basic/styles";
+@import "slides/basic/styles";
 
 
 body, body:hover, body a, body button, body media-switch {
@@ -20,6 +25,15 @@ body ion-app {
   overflow: visible;
 }
 
+ion-page {
+  display: flex;
+}
+
+ion-scroll {
+  width: 100%;
+  height: 100%;
+}
+
 body.has-scrollbar scroll-content {
   margin-right: -15px;
 }
@@ -27,30 +41,14 @@ body.has-scrollbar ion-menu scroll-content {
   margin-right: 0;
 }
 
-ion-page {
-  display: flex;
+scroll-content {
+  overflow-y: scroll;
 }
 
 section.hidden {
   display: none !important;
 }
 
-#ionitron {
-  width: 100px;
-  height: 100px;
-  position: absolute;
-  top: 25%;
-  margin-top: -50px;
-  left: 50%;
-  margin-left: -50px;
-}
-
-.animation-buttons {
-  position: absolute;
-  bottom: 25%; 
-  left: 60px; 
-  display: inline;
-}
 
 .components-demo h4 {
   text-align: center;
@@ -65,42 +63,6 @@ section.hidden {
   height: 100%;
 }
 
-.components-icons {
-  font-size: 2em;
-  text-align: center;
-}
-
-ion-scroll {
-  width: 100%;
-  height: 100%;
-}
-
-.demo-slide {
-  display: block;
-  height: 100%;
-  padding: 500px 0;
-  width: 100%;
-  font-weight: bold;
-  font-size: 2.5em;
-  color: #fff;
-}
-
-.demo-slide-1 {
-  background-color: #32db64;
-}
-
-.demo-slide-2 {
-  background-color: #387ef5;
-}
-
-.demo-slide-3 {
-  background-color: #f53d3d;
-}
-
-scroll-content {
-  overflow-y: scroll;
-}
-
 .md .ion-md-share {
   color: #ED4248;
 }
@@ -171,52 +133,6 @@ ion-card.cards-list-demo a > icon {
   color: #444444;
 }
 
-.advanced-background {
-  position: relative;
-  text-align: center !important;
-}
-
-ion-card p.advanced-background-title {
-  position: absolute;
-  top: 25%;
-  font-size: 2.0em;
-  width: 100%;
-  font-weight: bold;
-  color: #fff !important;
-}
-
-ion-card p.advanced-background-title-large {
-  top: 29%;
-  font-weight: normal;
-  font-size: 4.4em;
-  color: #fff !important;
-}
-ion-card p.advanced-background-title-large span {
-  vertical-align: top;
-  padding-top: 5px;
-  font-size: 72px;
-  height: 74px;
-  line-height: 1;
-  display: inline-block;
-}
-body.ios ion-card p.advanced-background-title-large span {
-  font-weight: 300;
-}
-
-ion-card ion-item.advanced-trans.item {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  padding: 12px 20px !important;
-  background: transparent;
-}
-ion-card ion-item.advanced-trans.item p {
-  font-size: 12px;
-  letter-spacing: 1.7px;
-  font-weight: 500;
-  opacity: 0.7;
-}
-
 ion-card .advanced-weather-tabs {
   position: absolute;
   bottom: 0;
@@ -224,60 +140,6 @@ ion-card .advanced-weather-tabs {
   background: transparent;
 }
 
-ion-card .advanced-weather-tabs tabbar {
-  background: transparent;
-  border-top: none;
-}
-body.ios ion-card .advanced-weather-tabs tabbar {
-  height: 88px;
-}
-body.md ion-card .advanced-weather-tabs tabbar {
-  height: 100px;
-}
-ion-card .advanced-weather-tabs tabbar a {
-  height: 100%;
-  border-top: 2px solid transparent !important;
-  border-bottom: 0px !important;
-}
-ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon {
-  color: #fff;
-  font-size: 2.8em;
-}
-ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
-  color: #fff;
-  font-size: 13px;
-}
-body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
-  text-transform: uppercase;
-}
-body.md .cards-bg tab-highlight {
-  background-color: #fff !important;
-  top: 0;
-}
-.cards-weather md-ripple {
-  background: rgba(255,255,255, 0.15);
-}
-
-ion-content ion-card ion-item.advanced-trans p {
-  color: #fff;
-}
-
-ion-card p.advanced-background-subtitle {
-  font-size: 1.0em;
-  position: absolute;
-  top: 48%;
-  width: 100%;
-  color: #fff !important;
-}
-
-ion-card .icon-avatar {
-  margin: 10px 8px;
-  min-width: 2.4rem !important;
-  color: #444444;
-  font-size: 1.8em;
-  text-align: center;
-}
-
 ion-card.adv-map p {
   font-size: 0.7em !important;
 }
@@ -334,22 +196,4 @@ body.ios img#ios-only {
 .item-subtle:before {
   padding-right: 5px;
 }
-p.time-ago {
-  color: #bbbbbb !important;
-  margin-left: 4px !important;
-  margin-right: 0px !important;
 
-}
-
-
-button[fab].fab-map {
-  top: 190px;
-  z-index: 50;
-}
-body.ios button[fab].fab-map {
-  width: 50px;
-  height: 50px;
-}
-body.md button[fab].fab-map {
-  top: 220px;
-}
diff --git a/demos/component-docs/cards/advanced-map/styles.scss b/demos/component-docs/cards/advanced-map/styles.scss
new file mode 100644
index 0000000000..4fee725340
--- /dev/null
+++ b/demos/component-docs/cards/advanced-map/styles.scss
@@ -0,0 +1,25 @@
+p.time-ago {
+  color: #bbbbbb !important;
+  margin-left: 4px !important;
+  margin-right: 0px !important;
+
+}
+button[fab].fab-map {
+  top: 190px;
+  z-index: 50;
+}
+body.ios button[fab].fab-map {
+  width: 50px;
+  height: 50px;
+}
+body.md button[fab].fab-map {
+  top: 220px;
+}
+
+ion-card .icon-avatar {
+  margin: 10px 8px;
+  min-width: 2.4rem !important;
+  color: #444444;
+  font-size: 1.8em;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/advanced-weather/styles.scss b/demos/component-docs/cards/advanced-weather/styles.scss
new file mode 100644
index 0000000000..59f4f1e2dc
--- /dev/null
+++ b/demos/component-docs/cards/advanced-weather/styles.scss
@@ -0,0 +1,127 @@
+body.ios ion-card .advanced-weather-tabs tabbar {
+  height: 88px;
+}
+body.md ion-card .advanced-weather-tabs tabbar {
+  height: 100px;
+}
+body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
+  text-transform: uppercase;
+}
+body.md .cards-bg tab-highlight {
+  background-color: #fff !important;
+  top: 0;
+}
+body.ios ion-card p.advanced-background-title-large span {
+  font-weight: 300;
+}
+
+
+.preview-weather-cards {
+
+  ion-content ion-card ion-item.advanced-trans p {
+    color: #fff;
+  }
+
+  ion-card p.advanced-background-subtitle {
+    font-size: 1.0em;
+    position: absolute;
+    top: 48%;
+    width: 100%;
+    color: #fff !important;
+  }
+
+  .advanced-background {
+    position: relative;
+    text-align: center !important;
+  }
+
+  ion-card ion-item.advanced-trans.item {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding: 12px 20px !important;
+    background: transparent;
+  }
+  ion-card ion-item.advanced-trans.item p {
+    font-size: 12px;
+    letter-spacing: 1.7px;
+    font-weight: 500;
+    opacity: 0.7;
+  }
+
+  ion-card p.advanced-background-title {
+    position: absolute;
+    top: 25%;
+    font-size: 2.0em;
+    width: 100%;
+    font-weight: bold;
+    color: #fff !important;
+  }
+
+  ion-card p.advanced-background-title-large {
+    top: 29%;
+    font-weight: normal;
+    font-size: 4.4em;
+    color: #fff !important;
+  }
+  ion-card p.advanced-background-title-large span {
+    vertical-align: top;
+    padding-top: 5px;
+    font-size: 72px;
+    height: 74px;
+    line-height: 1;
+    display: inline-block;
+  }
+  
+
+
+
+  
+
+  ion-card .advanced-weather-tabs tabbar {
+    background: transparent;
+    border-top: none;
+  }
+
+  ion-card .advanced-weather-tabs tabbar a {
+    height: 100%;
+    border-top: 2px solid transparent !important;
+    border-bottom: 0px !important;
+  }
+  ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon {
+    color: #fff;
+    font-size: 2.8em;
+  }
+  ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
+    color: #fff;
+    font-size: 13px;
+  }
+
+  md-ripple {
+    background: rgba(255,255,255, 0.15);
+  }
+
+  ion-card .advanced-weather-tabs {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: transparent;
+  }
+  ion-card ion-item.advanced-trans.item {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding: 12px 20px !important;
+    background: transparent;
+  }
+  ion-card ion-item.advanced-trans.item p {
+    font-size: 12px;
+    letter-spacing: 1.7px;
+    font-weight: 500;
+    opacity: 0.7;
+  }
+  ion-content ion-card ion-item.advanced-trans p {
+    color: #fff;
+  }
+
+}
\ No newline at end of file
diff --git a/demos/component-docs/cards/advanced-weather/template.html b/demos/component-docs/cards/advanced-weather/template.html
index dae1a51a71..36ce2bab6d 100644
--- a/demos/component-docs/cards/advanced-weather/template.html
+++ b/demos/component-docs/cards/advanced-weather/template.html
@@ -3,7 +3,7 @@
   <ion-title>Weather Card</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo cards-bg cards-weather">
+<ion-content class="has-header components-demo cards-bg preview-weather-cards">
 
 <ion-card class="advanced-background">
   <img src="img/advance-card-alaska.jpg"/>
diff --git a/demos/component-docs/cards/background/styles.scss b/demos/component-docs/cards/background/styles.scss
new file mode 100644
index 0000000000..0910d7a65a
--- /dev/null
+++ b/demos/component-docs/cards/background/styles.scss
@@ -0,0 +1,54 @@
+ion-content ion-card ion-item.advanced-trans p {
+  color: #fff;
+}
+
+ion-card p.advanced-background-subtitle {
+  font-size: 1.0em;
+  position: absolute;
+  top: 48%;
+  width: 100%;
+  color: #fff !important;
+}
+
+.advanced-background {
+  position: relative;
+  text-align: center !important;
+}
+
+ion-card ion-item.advanced-trans.item {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  padding: 12px 20px !important;
+  background: transparent;
+}
+ion-card ion-item.advanced-trans.item p {
+  font-size: 12px;
+  letter-spacing: 1.7px;
+  font-weight: 500;
+  opacity: 0.7;
+}
+
+ion-card p.advanced-background-title {
+  position: absolute;
+  top: 25%;
+  font-size: 2.0em;
+  width: 100%;
+  font-weight: bold;
+  color: #fff !important;
+}
+
+ion-card p.advanced-background-title-large {
+  top: 29%;
+  font-weight: normal;
+  font-size: 4.4em;
+  color: #fff !important;
+}
+ion-card p.advanced-background-title-large span {
+  vertical-align: top;
+  padding-top: 5px;
+  font-size: 72px;
+  height: 74px;
+  line-height: 1;
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/demos/component-docs/icons/basic/styles.scss b/demos/component-docs/icons/basic/styles.scss
new file mode 100644
index 0000000000..58268ec460
--- /dev/null
+++ b/demos/component-docs/icons/basic/styles.scss
@@ -0,0 +1,4 @@
+.preview-icons {
+  font-size: 2em;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/demos/component-docs/icons/basic/template.html b/demos/component-docs/icons/basic/template.html
index 831c3fe8eb..e68e87b4d3 100644
--- a/demos/component-docs/icons/basic/template.html
+++ b/demos/component-docs/icons/basic/template.html
@@ -3,7 +3,7 @@
   <ion-title>Icons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-icons">
+<ion-content class="has-header preview-icons">
 
   <ion-row>
     <ion-col><icon ionic></icon></ion-col>
diff --git a/demos/component-docs/slides/basic/pages.ts b/demos/component-docs/slides/basic/pages.ts
index a4a3bfb775..276abcac8a 100644
--- a/demos/component-docs/slides/basic/pages.ts
+++ b/demos/component-docs/slides/basic/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-    templateUrl: 'slides/basic/slides.html',
+    templateUrl: 'slides/basic/template.html',
     directives: [forwardRef(() => AndroidAttribute)]
 })
 export class BasicPage {
diff --git a/demos/component-docs/slides/basic/styles.scss b/demos/component-docs/slides/basic/styles.scss
new file mode 100644
index 0000000000..1105e097e0
--- /dev/null
+++ b/demos/component-docs/slides/basic/styles.scss
@@ -0,0 +1,26 @@
+.preview-slides {
+
+    .slide-contents {
+      display: block;
+      height: 100%;
+      padding: 500px 0;
+      width: 100%;
+      font-weight: bold;
+      font-size: 2.5em;
+      color: #fff;
+    }
+
+    #slide-1 {
+      background-color: #32db64;
+    }
+
+    #slide-2 {
+      background-color: #387ef5;
+    }
+
+    #slide-3 {
+      background-color: #f53d3d;
+    }
+
+}
+
diff --git a/demos/component-docs/slides/basic/template.html b/demos/component-docs/slides/basic/template.html
index 45b2d45089..c46aaeca1f 100644
--- a/demos/component-docs/slides/basic/template.html
+++ b/demos/component-docs/slides/basic/template.html
@@ -3,20 +3,20 @@
   <ion-title>Slides</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header">
+<ion-content class="has-header preview-slides">
     <ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
        <ion-slide>
-         <div class="demo-slide demo-slide-1">
+         <div class="slide-contents" id="slide-1">
            Slide 1
          </div>
        </ion-slide>
        <ion-slide>
-         <div class="demo-slide demo-slide-2">
+         <div class="slide-contents" id="slide-2">
            Slide 2
          </div>
        </ion-slide>
        <ion-slide>
-         <div class="demo-slide demo-slide-3">
+         <div class="slide-contents" id="slide-3">
            Slide 3
          </div>
        </ion-slide>