From 3364414d246f5569c241f06e381ecfa505059b8e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 18 Sep 2015 21:58:44 -0500
Subject: [PATCH] use padding attribute

---
 demos/action-sheet/main.html                     |  2 +-
 demos/barkpark/pages/login.html                  |  2 +-
 demos/barkpark/pages/tabs/home.html              |  2 +-
 demos/buttons/main.html                          |  2 +-
 demos/hn/pages/top.html                          |  2 +-
 demos/material/index.ts                          |  2 +-
 demos/menu/page2.html                            |  2 +-
 demos/modal/index.ts                             |  4 ++--
 demos/modal/main.html                            |  2 +-
 demos/native/pages/battery.ts                    |  2 +-
 demos/native/pages/camera.ts                     |  2 +-
 demos/native/pages/contacts.ts                   |  2 +-
 demos/native/pages/device-motion.ts              |  2 +-
 demos/native/pages/device-orientation.ts         |  2 +-
 demos/native/pages/device.ts                     |  2 +-
 demos/native/pages/dialogs.ts                    |  2 +-
 demos/native/pages/geolocation.ts                |  2 +-
 demos/native/pages/statusbar.ts                  |  2 +-
 demos/native/pages/vibration.ts                  |  2 +-
 demos/navigation/index.ts                        |  6 +++---
 demos/sink/pages/action-sheet.ts                 |  2 +-
 demos/sink/pages/animation.ts                    |  2 +-
 demos/sink/pages/aside.ts                        |  2 +-
 demos/sink/pages/button.ts                       |  2 +-
 demos/sink/pages/card.ts                         |  2 +-
 demos/sink/pages/form.ts                         |  2 +-
 demos/sink/pages/ionicons.ts                     |  2 +-
 demos/sink/pages/list.ts                         |  2 +-
 demos/sink/pages/modal.ts                        |  2 +-
 demos/sink/pages/nav.ts                          |  4 ++--
 demos/sink/pages/search-bar.ts                   |  2 +-
 demos/sink/pages/segment.ts                      |  2 +-
 demos/sink/pages/slides.ts                       |  2 +-
 demos/sink/pages/tabs.ts                         |  8 ++++----
 demos/yerk/index.ts                              |  4 ++--
 .../components/action-sheet/test/basic/main.html |  2 +-
 ionic/components/button/test/icons/main.html     |  2 +-
 ionic/components/checkbox/test/basic/main.html   |  4 ++--
 ionic/components/list/test/infinite/main.html    |  2 +-
 ionic/components/menu/test/basic/page2.html      |  2 +-
 ionic/components/modal/test/basic/index.ts       |  4 ++--
 ionic/components/modal/test/basic/main.html      |  2 +-
 ionic/components/nav/test/basic/index.ts         |  6 +++---
 ionic/components/nav/test/routing/view1.html     |  2 +-
 ionic/components/nav/test/routing/view2.html     |  2 +-
 ionic/components/nav/test/routing/view3.html     |  2 +-
 ionic/components/popup/test/basic/main.html      |  2 +-
 ionic/components/segment/test/basic/main.html    |  2 +-
 .../show-hide-when/test/basic/main.html          |  2 +-
 ionic/components/switch/test/basic/main.html     |  4 ++--
 ionic/components/tabs/test/advanced/index.ts     | 16 ++++++++--------
 ionic/components/tabs/test/basic/main.html       |  4 ++--
 .../tabs/test/tab-bar-bottom/main.html           |  4 ++--
 ionic/components/tabs/test/tab-bar-top/main.html |  4 ++--
 54 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/demos/action-sheet/main.html b/demos/action-sheet/main.html
index c09a23b5e0..e22f9e3ca7 100644
--- a/demos/action-sheet/main.html
+++ b/demos/action-sheet/main.html
@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button (click)="openMenu()">Open Action Sheet</button>
 </ion-content>
diff --git a/demos/barkpark/pages/login.html b/demos/barkpark/pages/login.html
index 40a4cbe17f..6ebbba99b7 100644
--- a/demos/barkpark/pages/login.html
+++ b/demos/barkpark/pages/login.html
@@ -6,7 +6,7 @@
 
 </ion-toolbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <form (submit)="doLogin($event)" [control-group]="loginForm">
     <ion-input>
       <input control="email" type="email" placeholder="Your email">
diff --git a/demos/barkpark/pages/tabs/home.html b/demos/barkpark/pages/tabs/home.html
index 983f6a72c3..0c83265683 100644
--- a/demos/barkpark/pages/tabs/home.html
+++ b/demos/barkpark/pages/tabs/home.html
@@ -1,5 +1,5 @@
 <ion-view nav-title="Stream">
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Posts</h2>
     <ion-list>
       <ion-item *for="#post of posts" (click)="selectPost(post)">
diff --git a/demos/buttons/main.html b/demos/buttons/main.html
index da5e5546e9..12804605c4 100644
--- a/demos/buttons/main.html
+++ b/demos/buttons/main.html
@@ -3,7 +3,7 @@
   <ion-title>Buttons</ion-title>
 </ion-toolbar>
 
-<ion-content class="padding" style="text-align:center">
+<ion-content padding style="text-align:center">
 
 
   <h4>Colors</h4>
diff --git a/demos/hn/pages/top.html b/demos/hn/pages/top.html
index d5b4d959e3..3bf3a42208 100644
--- a/demos/hn/pages/top.html
+++ b/demos/hn/pages/top.html
@@ -1,6 +1,6 @@
 <ion-navbar *navbar><ion-title>Top</ion-title></ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
 
   <ion-list inset>
     <ion-item *ng-for="#story of stories" (click)="openStory(story)">{{story.title}}</ion-item>
diff --git a/demos/material/index.ts b/demos/material/index.ts
index bcf90a8c80..c52e290243 100644
--- a/demos/material/index.ts
+++ b/demos/material/index.ts
@@ -29,7 +29,7 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
       </ion-item>
     </ion-list>
 
-    <div class="padding">
+    <div padding>
       <ion-card>
         <ion-card-header>
           New Post
diff --git a/demos/menu/page2.html b/demos/menu/page2.html
index 4a7e564244..55f71fd668 100644
--- a/demos/menu/page2.html
+++ b/demos/menu/page2.html
@@ -11,7 +11,7 @@
 
 </ion-navbar>
 
-<ion-content #content class="padding">
+<ion-content #content padding>
 
   <h3>Page 2</h3>
 
diff --git a/demos/modal/index.ts b/demos/modal/index.ts
index 7e7675c0c7..745166d5c4 100644
--- a/demos/modal/index.ts
+++ b/demos/modal/index.ts
@@ -76,7 +76,7 @@ export class ContactModal {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
       </p>
@@ -146,7 +146,7 @@ export class ModalFirstPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="nav.pop()">Pop (Go back to 1st)</button>
       </p>
diff --git a/demos/modal/main.html b/demos/modal/main.html
index 60fc6135cf..f52258213c 100644
--- a/demos/modal/main.html
+++ b/demos/modal/main.html
@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button id="e2eOpenModal" (click)="openModal()">Open Modal</button>
 </ion-content>
diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts
index bacb770646..d11047e576 100644
--- a/demos/native/pages/battery.ts
+++ b/demos/native/pages/battery.ts
@@ -9,7 +9,7 @@ import {IonicView, Battery} from 'ionic/ionic';
     </a>
     <ion-title>Battery</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Battery</h2>
     <button primary outline (click)="doBatteryStatus()">Get Status</button>
     <div *ng-if="battery">
diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts
index 087e03bd87..1365125cff 100644
--- a/demos/native/pages/camera.ts
+++ b/demos/native/pages/camera.ts
@@ -10,7 +10,7 @@ import {Camera} from 'ionic/ionic';
     </a>
     <ion-title>Camera</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Camera</h2>
     <button primary outline (click)="getPicture()">Get Picture</button>
   </ion-content>
diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts
index 36437e6137..aac736de0a 100644
--- a/demos/native/pages/contacts.ts
+++ b/demos/native/pages/contacts.ts
@@ -10,7 +10,7 @@ import {Contacts} from 'ionic/ionic';
     </a>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Contacts</h2>
     <div>
     </div>
diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts
index 9721eb684a..92e2824f33 100644
--- a/demos/native/pages/device-motion.ts
+++ b/demos/native/pages/device-motion.ts
@@ -9,7 +9,7 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
     </a>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <div *ng-if="accel">{{accel.x}} {{accel.y}} {{accel.z}}</div>
   </ion-content>
   `
diff --git a/demos/native/pages/device-orientation.ts b/demos/native/pages/device-orientation.ts
index cb611ccbac..95a4e8a2d4 100644
--- a/demos/native/pages/device-orientation.ts
+++ b/demos/native/pages/device-orientation.ts
@@ -9,7 +9,7 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
     </a>
     <ion-title>Device Orientation</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <div style="text-align: center">
       <img src="http://ionic-io-assets.s3.amazonaws.com/ionitron-avatar.png" [ng-style]="imageStyle">
     </div>
diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts
index da145e3c52..fd37281996 100644
--- a/demos/native/pages/device.ts
+++ b/demos/native/pages/device.ts
@@ -9,7 +9,7 @@ import {IonicView, Device} from 'ionic/ionic';
     </a>
     <ion-title>Device</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Device</h2>
     <button primary outline (click)="doDevice()">Get Device</button>
     <div *ng-if="device">
diff --git a/demos/native/pages/dialogs.ts b/demos/native/pages/dialogs.ts
index 5a1fa1ed5b..12fd20d141 100644
--- a/demos/native/pages/dialogs.ts
+++ b/demos/native/pages/dialogs.ts
@@ -9,7 +9,7 @@ import {IonicView, Dialogs} from 'ionic/ionic';
     </a>
     <ion-title>Dialogs</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Dialogs</h2>
     <button primary outline (click)="doAlert()">Do Alert</button>
     <button primary outline (click)="doConfirm()">Do Confirm</button>
diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts
index fafbca0a3d..b4e6af7052 100644
--- a/demos/native/pages/geolocation.ts
+++ b/demos/native/pages/geolocation.ts
@@ -10,7 +10,7 @@ import {Geolocation} from 'ionic/ionic';
     </a>
     <ion-title>Geolocation</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Geolocation</h2>
     <button primary outline (click)="doGetLocation()">Get Location</button>
     <div>
diff --git a/demos/native/pages/statusbar.ts b/demos/native/pages/statusbar.ts
index 56a576b046..50dc6d6864 100644
--- a/demos/native/pages/statusbar.ts
+++ b/demos/native/pages/statusbar.ts
@@ -10,7 +10,7 @@ import {StatusBar} from 'ionic/ionic';
     </a>
     <ion-title>StatusBar</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>StatusBar</h2>
     <div>
       <button primary outline (click)="hide()">Hide</button>
diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts
index 7901623874..92d72d3c6c 100644
--- a/demos/native/pages/vibration.ts
+++ b/demos/native/pages/vibration.ts
@@ -10,7 +10,7 @@ import {Vibration} from 'ionic/ionic';
     </a>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Vibration</h2>
     <button primary outline (click)="doVibrate()">Vibrate</button>
   </ion-content>
diff --git a/demos/navigation/index.ts b/demos/navigation/index.ts
index 175539340a..b67fece545 100644
--- a/demos/navigation/index.ts
+++ b/demos/navigation/index.ts
@@ -8,7 +8,7 @@ import {NavParams, NavController} from 'ionic/ionic';
     '<ion-navbar *navbar primary>' +
       '<ion-title>{{title}}</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<h1>{{title}}</h1>' +
       '<p><button id="from1To2" secondary (click)="push()">(Push) Go to Second Page</button></p>' +
       '<p><button secondary [push-data]="pushData" [nav-push]="pushPage">(Nav-Push) Go to Second Page</button></p>' +
@@ -47,7 +47,7 @@ class FirstPage {
     <ion-navbar secondary *navbar>
       <ion-title>{{title}}</ion-title>
     </ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <h1>Second page</h1>
       <p><button (click)="pop()">(Pop) Go back to First Page</button></p>
       <p><button id="from2To1" nav-pop>(NavPop) Go back to First Page</button></p>
@@ -90,7 +90,7 @@ class SecondPage {
     <ion-navbar danger *navbar>
       <ion-title>Third Page Header</ion-title>
     </ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button secondary id="from3To2" (click)="pop()">(Pop) Go back to Second Page</button>
       </p>
diff --git a/demos/sink/pages/action-sheet.ts b/demos/sink/pages/action-sheet.ts
index e5db5feca1..8470a53fef 100644
--- a/demos/sink/pages/action-sheet.ts
+++ b/demos/sink/pages/action-sheet.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Sheet</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Action Sheet</h2>
     <p>
       The Action Sheet, similar to Action Sheet's on iOS, is a slide-up prompt
diff --git a/demos/sink/pages/animation.ts b/demos/sink/pages/animation.ts
index 7fd5e7ae7f..b8e040b975 100644
--- a/demos/sink/pages/animation.ts
+++ b/demos/sink/pages/animation.ts
@@ -30,7 +30,7 @@ let scale = 0.6;
     }
   </style>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Animation</h2>
     <p>
       Ionic comes with a powerful Animation library based on the emerging Web Animation API. Trigger
diff --git a/demos/sink/pages/aside.ts b/demos/sink/pages/aside.ts
index 530747e349..f1b26a5b90 100644
--- a/demos/sink/pages/aside.ts
+++ b/demos/sink/pages/aside.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Menu</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Menu</h2>
     <p>
       Menus slide or swipe in to show more information.
diff --git a/demos/sink/pages/button.ts b/demos/sink/pages/button.ts
index 77f342199f..2ba452de75 100644
--- a/demos/sink/pages/button.ts
+++ b/demos/sink/pages/button.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Buttons</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
 
     <h2>Buttons</h2>
     <p>
diff --git a/demos/sink/pages/card.ts b/demos/sink/pages/card.ts
index 0613bd82cf..6a09f6ce03 100644
--- a/demos/sink/pages/card.ts
+++ b/demos/sink/pages/card.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Cards</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Cards</h2>
     <p>
       Cards are an emerging UI concept where a bit of content is displayed
diff --git a/demos/sink/pages/form.ts b/demos/sink/pages/form.ts
index 72967e1d5b..36c8335e7a 100644
--- a/demos/sink/pages/form.ts
+++ b/demos/sink/pages/form.ts
@@ -9,7 +9,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Form</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Forms</h2>
     <p>
       Forms help you gather important information from the user, like
diff --git a/demos/sink/pages/ionicons.ts b/demos/sink/pages/ionicons.ts
index 1eb660623c..c24f3c218e 100644
--- a/demos/sink/pages/ionicons.ts
+++ b/demos/sink/pages/ionicons.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Icons</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Icons</h2>
     <p>
       Ionic comes with a totally free (in price and license), icon pack (known as "Ionicons") with over 700
diff --git a/demos/sink/pages/list.ts b/demos/sink/pages/list.ts
index c988a488fa..43c03074c8 100644
--- a/demos/sink/pages/list.ts
+++ b/demos/sink/pages/list.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Lists</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Lists</h2>
     <p>
       Lists display data as rows in a table.
diff --git a/demos/sink/pages/modal.ts b/demos/sink/pages/modal.ts
index 1e44e988d1..0ce7a0b054 100644
--- a/demos/sink/pages/modal.ts
+++ b/demos/sink/pages/modal.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Modal</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Modal</h2>
     <p>
       Modals are entire views that slide in off screen.
diff --git a/demos/sink/pages/nav.ts b/demos/sink/pages/nav.ts
index ec065d79ca..50026a4b51 100644
--- a/demos/sink/pages/nav.ts
+++ b/demos/sink/pages/nav.ts
@@ -5,7 +5,7 @@ import {IonicView, NavController} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar><ion-title>Navigation</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Navigation</h2>
     <p>
       Navigation makes your app feel like, well, an app!
@@ -32,7 +32,7 @@ export class NavPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <button (click)="nav.pop()">Pop</button>
     </ion-content>
   `
diff --git a/demos/sink/pages/search-bar.ts b/demos/sink/pages/search-bar.ts
index ad26a0e145..e96434ea10 100644
--- a/demos/sink/pages/search-bar.ts
+++ b/demos/sink/pages/search-bar.ts
@@ -14,7 +14,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Search Bar</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Search Bar</h2>
     <p>
       The Search Bar is a multi-function search component.
diff --git a/demos/sink/pages/segment.ts b/demos/sink/pages/segment.ts
index 467557cddc..a68d33d16c 100644
--- a/demos/sink/pages/segment.ts
+++ b/demos/sink/pages/segment.ts
@@ -7,7 +7,7 @@ import {IonicView} from 'ionic/ionic';
   template: `
   <ion-navbar *navbar><ion-title>Segment</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Segment</h2>
     <p>
       A segment is a radio-style filter bar to let the user toggle between
diff --git a/demos/sink/pages/slides.ts b/demos/sink/pages/slides.ts
index b92aa24904..f832e59693 100644
--- a/demos/sink/pages/slides.ts
+++ b/demos/sink/pages/slides.ts
@@ -7,7 +7,7 @@ import {SinkPage} from '../sink-page';
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Slides</ion-title></ion-navbar>
 
-  <ion-content class="padding">
+  <ion-content padding>
     <h2>Slides</h2>
     <p>
       Slides have a set of pages that can be swiped between.
diff --git a/demos/sink/pages/tabs.ts b/demos/sink/pages/tabs.ts
index 0106270da6..724fd6a99f 100644
--- a/demos/sink/pages/tabs.ts
+++ b/demos/sink/pages/tabs.ts
@@ -10,7 +10,7 @@ import {SinkPage} from '../sink-page';
     '<ion-navbar *navbar>' +
       '<ion-title>Featured</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class FeaturedTabPage {
@@ -24,7 +24,7 @@ class FeaturedTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Top</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class TopTabPage {
@@ -38,7 +38,7 @@ class TopTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Search</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class SearchTabPage {
@@ -52,7 +52,7 @@ class SearchTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Updates</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
     '</ion-content>'
 })
 class UpdatesTabPage {
diff --git a/demos/yerk/index.ts b/demos/yerk/index.ts
index a7bd52c369..79b570df50 100644
--- a/demos/yerk/index.ts
+++ b/demos/yerk/index.ts
@@ -16,7 +16,7 @@ class IonicApp {
     '<ion-navbar *navbar>' +
       '<ion-title>Home</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       'home' +
     '</ion-content>'
 })
@@ -33,7 +33,7 @@ class HomeTabPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Peek</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       'peek' +
     '</ion-content>'
 })
diff --git a/ionic/components/action-sheet/test/basic/main.html b/ionic/components/action-sheet/test/basic/main.html
index c09a23b5e0..e22f9e3ca7 100644
--- a/ionic/components/action-sheet/test/basic/main.html
+++ b/ionic/components/action-sheet/test/basic/main.html
@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button (click)="openMenu()">Open Action Sheet</button>
 </ion-content>
diff --git a/ionic/components/button/test/icons/main.html b/ionic/components/button/test/icons/main.html
index 71d426ccf4..9dde8cf4a6 100644
--- a/ionic/components/button/test/icons/main.html
+++ b/ionic/components/button/test/icons/main.html
@@ -3,7 +3,7 @@
   <ion-title>Buttons Icons</ion-title>
 </ion-toolbar>
 
-<ion-content class="padding">
+<ion-content padding>
 
   <div>
     <button>
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index c21a641780..946f5cc1da 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -38,7 +38,7 @@
     <button (click)="doSubmit($event)" outline small id="e2eSubmit">Submit</button>
   </p>
 
-  <p aria-hidden="true" class="padding">
+  <p aria-hidden="true" padding>
     <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
     <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
     <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
@@ -49,6 +49,6 @@
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
   </p>
 
-  <pre aria-hidden="true" class="padding">{{formResults}}</pre>
+  <pre aria-hidden="true" padding>{{formResults}}</pre>
 
 </ion-content>
diff --git a/ionic/components/list/test/infinite/main.html b/ionic/components/list/test/infinite/main.html
index ed7f95174e..f7ce1dc08b 100644
--- a/ionic/components/list/test/infinite/main.html
+++ b/ionic/components/list/test/infinite/main.html
@@ -1,7 +1,7 @@
 
 <ion-view nav-title="List">
 
-  <ion-content class="padding" #content>
+  <ion-content padding #content>
 
     <ion-list inset virtual [items]="items" [content]="content">
       <ion-item *cell #item>
diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html
index ab2e7ad7b3..6895320076 100644
--- a/ionic/components/menu/test/basic/page2.html
+++ b/ionic/components/menu/test/basic/page2.html
@@ -11,7 +11,7 @@
 
 </ion-navbar>
 
-<ion-content #content class="padding">
+<ion-content #content padding>
 
   <h3>Page 2</h3>
 
diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts
index 7e7675c0c7..745166d5c4 100644
--- a/ionic/components/modal/test/basic/index.ts
+++ b/ionic/components/modal/test/basic/index.ts
@@ -76,7 +76,7 @@ export class ContactModal {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button id="e2eCloseMenu" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
       </p>
@@ -146,7 +146,7 @@ export class ModalFirstPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button (click)="nav.pop()">Pop (Go back to 1st)</button>
       </p>
diff --git a/ionic/components/modal/test/basic/main.html b/ionic/components/modal/test/basic/main.html
index 60fc6135cf..f52258213c 100644
--- a/ionic/components/modal/test/basic/main.html
+++ b/ionic/components/modal/test/basic/main.html
@@ -1,3 +1,3 @@
-<ion-content class="padding">
+<ion-content padding>
   <button id="e2eOpenModal" (click)="openModal()">Open Modal</button>
 </ion-content>
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index 196198ba88..be6b184887 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -14,7 +14,7 @@ import {NavParams, NavController} from 'ionic/ionic';
         '<button>S1</button>' +
       '</ion-nav-items>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p>{{title}}</p>' +
       '<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
       '<p><button [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
@@ -55,7 +55,7 @@ class FirstPage {
 
 @IonicView({
   template: `
-    <ion-content class="padding">
+    <ion-content padding>
       <h1>Second page</h1>
       <p>This page does not have a nav bar!</p>
       <p><button (click)="pop()">Pop (Go back to 1st)</button></p>
@@ -100,7 +100,7 @@ class SecondPage {
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
-    <ion-content class="padding">
+    <ion-content padding>
       <p>
         <button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button>
       </p>
diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html
index b1f74fd928..78ec8a66af 100644
--- a/ionic/components/nav/test/routing/view1.html
+++ b/ionic/components/nav/test/routing/view1.html
@@ -6,7 +6,7 @@
   <ion-title>First View</ion-title>
 </ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <h4>
     Window Hash: {{windowHash}}
   </h4>
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index f7cdad7add..e0016adaf7 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -8,7 +8,7 @@
   </ion-nav-item>
 </ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <h4>
     Window Hash: {{windowHash}}
   </h4>
diff --git a/ionic/components/nav/test/routing/view3.html b/ionic/components/nav/test/routing/view3.html
index 661a3c7bce..533913634f 100644
--- a/ionic/components/nav/test/routing/view3.html
+++ b/ionic/components/nav/test/routing/view3.html
@@ -3,7 +3,7 @@
   <ion-title>Third View</ion-title>
 </ion-navbar>
 
-<ion-content class="padding">
+<ion-content padding>
   <h4>
     Window Hash: {{windowHash}}
   </h4>
diff --git a/ionic/components/popup/test/basic/main.html b/ionic/components/popup/test/basic/main.html
index c760098135..41cb5ca5bf 100644
--- a/ionic/components/popup/test/basic/main.html
+++ b/ionic/components/popup/test/basic/main.html
@@ -1,5 +1,5 @@
 
-<ion-content class="padding">
+<ion-content padding>
 
   <button id="e2eOpenAlert" (click)="doAlert()">Alert</button>
   <button id="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index e1e8ed13e0..7622a84cec 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -1,4 +1,4 @@
-<ion-content class="padding">
+<ion-content padding>
   <form (submit)="doSubmit($event)" [ng-form-model]="myForm">
       <ion-segment ng-control="mapStyle">
         <ion-segment-button value="standard" button>
diff --git a/ionic/components/show-hide-when/test/basic/main.html b/ionic/components/show-hide-when/test/basic/main.html
index 95313396f0..1d2105148a 100644
--- a/ionic/components/show-hide-when/test/basic/main.html
+++ b/ionic/components/show-hide-when/test/basic/main.html
@@ -2,7 +2,7 @@
 <ion-toolbar><ion-title>Show/Hide When</ion-title></ion-toolbar>
 
 
-<ion-content class="padding">
+<ion-content padding>
 
   <p show-when="ios" style="background:blue; color:white">
     show-when="ios"
diff --git a/ionic/components/switch/test/basic/main.html b/ionic/components/switch/test/basic/main.html
index 81bba62fcf..2c6356b6d0 100644
--- a/ionic/components/switch/test/basic/main.html
+++ b/ionic/components/switch/test/basic/main.html
@@ -38,7 +38,7 @@
     <button (click)="doSubmit($event)" outline small id="e2eSubmit">Submit</button>
   </p>
 
-  <p aria-hidden="true" class="padding">
+  <p aria-hidden="true" padding>
     <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
     <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value}}</code><br>
     <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
@@ -49,6 +49,6 @@
     <code>grape.value: {{fruitsForm.controls.grapeCtrl.value}}</code><br>
   </p>
 
-  <pre aria-hidden="true" class="padding">{{formResults}}</pre>
+  <pre aria-hidden="true" padding>{{formResults}}</pre>
 
 </ion-content>
diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts
index af72582eba..1926ef7b49 100644
--- a/ionic/components/tabs/test/advanced/index.ts
+++ b/ionic/components/tabs/test/advanced/index.ts
@@ -8,7 +8,7 @@ import {App, IonicView, NavController} from 'ionic/ionic';
     '<ion-navbar *navbar>' +
       '<ion-title>Sign In</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button id="signIn" (click)="push()">Go to tabs</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -45,7 +45,7 @@ class TabsPage {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 1</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -67,7 +67,7 @@ class Tab1Page1 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 2</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="push()">Go to Tab 1, Page 3</button></p>' +
       '<p><button id="backToTab1Page1" (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -90,7 +90,7 @@ class Tab1Page2 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 3</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -112,7 +112,7 @@ class Tab1Page3 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 1</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="push()">Go to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -134,7 +134,7 @@ class Tab2Page1 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 2</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="push()">Go to Tab 2, Page 3</button></p>' +
       '<p><button (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -157,7 +157,7 @@ class Tab2Page2 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 3</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding">' +
+    '<ion-content padding>' +
       '<p><button (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
@@ -179,7 +179,7 @@ class Tab2Page3 {
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 3</ion-title>' +
     '</ion-navbar>' +
-    '<ion-content class="padding"><h2>Tabs 3</h2></ion-content>'
+    '<ion-content padding><h2>Tabs 3</h2></ion-content>'
 })
 class Tab3Page1 {}
 
diff --git a/ionic/components/tabs/test/basic/main.html b/ionic/components/tabs/test/basic/main.html
index eb3dad7ed3..45a0a49e01 100644
--- a/ionic/components/tabs/test/basic/main.html
+++ b/ionic/components/tabs/test/basic/main.html
@@ -3,7 +3,7 @@
 
   <ion-tab tab-title="Tab 1" tab-icon="home">
 
-    <ion-content class="padding">
+    <ion-content padding>
       Tab 1 Content
     </ion-content>
 
@@ -11,7 +11,7 @@
 
   <ion-tab tab-title="Tab 2" tab-icon="star">
 
-    <ion-content class="padding">
+    <ion-content padding>
       Tab 2 Content
     </ion-content>
 
diff --git a/ionic/components/tabs/test/tab-bar-bottom/main.html b/ionic/components/tabs/test/tab-bar-bottom/main.html
index 477a463388..41b9a9999d 100644
--- a/ionic/components/tabs/test/tab-bar-bottom/main.html
+++ b/ionic/components/tabs/test/tab-bar-bottom/main.html
@@ -3,7 +3,7 @@
 
   <ion-tab tab-title="Tab 1">
     <ion-view nav-title="Tab 1">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 1 Content
       </ion-content>
     </ion-view>
@@ -11,7 +11,7 @@
 
   <ion-tab tab-title="Tab 2">
     <ion-view nav-title="Tab 2">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 2 Content
       </ion-content>
     </ion-view>
diff --git a/ionic/components/tabs/test/tab-bar-top/main.html b/ionic/components/tabs/test/tab-bar-top/main.html
index 4e9e174bcb..38dda31c3a 100644
--- a/ionic/components/tabs/test/tab-bar-top/main.html
+++ b/ionic/components/tabs/test/tab-bar-top/main.html
@@ -3,7 +3,7 @@
 
   <ion-tab tab-title="Tab 1">
     <ion-view nav-title="Tab 1">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 1 Content
       </ion-content>
     </ion-view>
@@ -11,7 +11,7 @@
 
   <ion-tab tab-title="Tab 2">
     <ion-view nav-title="Tab 2">
-      <ion-content class="padding">
+      <ion-content padding>
         Tab 2 Content
       </ion-content>
     </ion-view>