Add body padding to examples

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>

examples/components/input.html

@@ -34,6 +34,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .ui.input + .ui.input {
     margin-left: 1em;
   }

examples/components/menu.html

@@ -33,6 +33,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .ui.menu {
     margin: 3em 0em;
   }

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>
 

examples/components/table.html

@@ -30,6 +30,9 @@
 
   <!--- Example CSS -->
   <style>
+  body {
+    padding: 1em;
+  }
   .ui.table {
     table-layout: fixed;
   }

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 {