From 699aeed1584fd25f5a737eac5477957116b7ae7c Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Mon, 1 Jun 2015 14:30:28 -0400
Subject: [PATCH] Add body padding to examples

---
 examples/components/button.html | 22 ++++++++++++++++++++++
 examples/components/input.html  |  3 +++
 examples/components/menu.html   |  3 +++
 examples/components/site.html   | 27 +++++++++++++++------------
 examples/components/table.html  |  3 +++
 examples/theming.html           |  4 ++--
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/examples/components/button.html b/examples/components/button.html
index 6e0e30d7d..57e7e1cf4 100644
--- a/examples/components/button.html
+++ b/examples/components/button.html
@@ -15,6 +15,8 @@
   <!--- Component CSS -->
   <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
   <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
   <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
   <link rel="stylesheet" type="text/css" href="../../dist/components/segment.css">
   <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
@@ -33,6 +35,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .spaced > .button {
     margin-bottom: 1em;
   }
@@ -164,6 +169,20 @@
       <button class="ui button">2</button>
     </div>
 
+    <div class="ui divider"></div>
+
+    <div class="ui two top attached buttons">
+      <div class="ui button">One</div>
+      <div class="ui button">Two</div>
+    </div>
+    <div class="ui attached segment">
+      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+    </div>
+    <div class="ui two bottom attached buttons">
+      <div class="ui button">One</div>
+      <div class="ui button">Two</div>
+    </div>
+
   </div>
   <div class="column">
     <button class="ui mini button">Mini</button>
@@ -186,6 +205,9 @@
       <button class="black ui button">Black</button>
     </div>
 
+
+    <div class="ui divider"></div>
+
     <div class="ui inverted segment">
       <button class="ui inverted button">Inverted</button>
       <button class="ui inverted basic button">Basic</button>
diff --git a/examples/components/input.html b/examples/components/input.html
index 23859959b..8e202837b 100644
--- a/examples/components/input.html
+++ b/examples/components/input.html
@@ -34,6 +34,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .ui.input + .ui.input {
     margin-left: 1em;
   }
diff --git a/examples/components/menu.html b/examples/components/menu.html
index 4037225f5..5c66e2ab9 100644
--- a/examples/components/menu.html
+++ b/examples/components/menu.html
@@ -33,6 +33,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .ui.menu {
     margin: 3em 0em;
   }
diff --git a/examples/components/site.html b/examples/components/site.html
index d535a1d27..7bb824294 100644
--- a/examples/components/site.html
+++ b/examples/components/site.html
@@ -15,18 +15,21 @@
   <script src="../assets/library/iframe-content.js"></script>
 
   <style>
-    .color.grid {
-      margin: -1.5em;
-      width: 400px;
-    }
-    .ui.table {
-      table-layout: fixed;
-    }
-    .color.grid .column {
-      margin: 0.5em;
-      width: 50px;
-      height: 50px;
-    }
+  body {
+    padding: 1em;
+  }
+  .color.grid {
+    margin: -1.5em;
+    width: 400px;
+  }
+  .ui.table {
+    table-layout: fixed;
+  }
+  .color.grid .column {
+    margin: 0.5em;
+    width: 50px;
+    height: 50px;
+  }
   </style>
 </head>
 
diff --git a/examples/components/table.html b/examples/components/table.html
index c0e8ee95a..3564728e3 100644
--- a/examples/components/table.html
+++ b/examples/components/table.html
@@ -30,6 +30,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .ui.table {
     table-layout: fixed;
   }
diff --git a/examples/theming.html b/examples/theming.html
index 0e2ec5457..30557246a 100644
--- a/examples/theming.html
+++ b/examples/theming.html
@@ -17,10 +17,10 @@
     body > .ui.container {
       margin-top: 3em;
     }
-
     iframe {
       border: none;
-      width: 100%;
+      width: calc(100% + 2em);
+      margin: 0em -1em;
       height: 300px;
     }
     iframe html {