fixing up the docs a bit

_includes/footer.html

@@ -1,4 +1 @@
-<div>
-  <h3>License &amp; credit</h3>
-  <p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>.</p>
-</div>
+<p class="docs-mini-footer">Code licensed under the MIT license. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>

components.html

@@ -568,7 +568,7 @@ base_url: "../"
 
   </article>
 
-  <article class="component" id="buttonsCounts">
+  <article class="component" id="buttonsBadges">
     <h3 class="component-title">Buttons with badges</h3>
 
     <div class="component-example">
@@ -896,10 +896,12 @@ document
         </header>
         
         <div class="content">
+          <div class="card">
             <p>The contents of my modal</p>
           </div>
         </div>
       </div>
+    </div>
 
 {% highlight html %}
 <a href="#myModalexample" class="button">Open modal</a>
@@ -912,9 +914,11 @@ document
   </header>
   
   <div class="content">
+    <div class="card">
       <p>The contents of my modal</p>
     </div>
   </div>
+</div>
 {% endhighlight %}
 
     <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>

docs-assets/css/docs.css

@@ -266,6 +266,12 @@ body {
   color: #fff;
 }
 
+.docs-mini-footer {
+  padding-top: 40px;
+  padding-bottom: 20px;
+  color: #777;
+}
+
 .platform-toggle {
   padding-top: 15px;
   padding-bottom: 90px;
@@ -369,6 +375,52 @@ body {
   word-wrap: normal;
 }
 
+#buttonsInDevice [class*="button"],
+#buttonsBadgesInDevice [class*="button"] {
+  margin-top: 10px;
+  margin-right: 100px;
+  margin-left: 10px;
+}
+
+#blockButtonsInDevice .button-block {
+  margin: 10px;
+}
+
+#segmentedControllersInDevice .segmented-controller {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+#segmentedControllersInDevice .card p {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+#badgesInDevice {
+  text-align: center;
+}
+#badgesInDevice [class*="badge"] {
+  margin-top: 10px;
+}
+
+#formsInDevice form {
+  margin: 10px;
+}
+#formsInDevice form.input-group {
+  margin: 0;
+}
+
+#togglesInDevice .toggle {
+  margin: 10px auto;
+}
+
+#modalsInDevice #iwindow > .button {
+  margin: 10px;
+}
+#modalsInDevice .card p {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
 .device {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 17px;

index.html

@@ -112,7 +112,7 @@ base_url: "./"
 <footer class="docs-footer docs-section">
   <div class="container column-group">
     <div class="column units-2">
-      <p class="footer-content">Code licensed under the MIT license. Version v2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
+      <p class="footer-content">Code licensed under the MIT license. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
     </div>
   </div>
 </footer>

lib/sass/docs.scss

@@ -279,6 +279,11 @@ body {
     }
   }
 }
+.docs-mini-footer {
+  padding-top: 40px;
+  padding-bottom: 20px;
+  color: #777;
+}
 
 
 // Platform toggle
@@ -388,6 +393,65 @@ body {
   word-wrap: normal;
 }
 
+// Buttons
+#buttonsInDevice,
+#buttonsBadgesInDevice {
+  [class*="button"] {
+    margin-top: 10px;
+    margin-right: 100px;
+    margin-left: 10px;
+  }
+}
+#blockButtonsInDevice .button-block {
+  margin: 10px;
+}
+
+//Segmented Control
+#segmentedControllersInDevice {
+  .segmented-controller {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+  .card p {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+}
+
+// Badges
+#badgesInDevice {
+  text-align: center;
+
+  [class*="badge"] {
+    margin-top: 10px;
+  }
+}
+
+// Forms
+#formsInDevice form {
+  margin: 10px;
+
+  &.input-group {
+    margin: 0;
+  }
+}
+
+// Toggles
+#togglesInDevice .toggle {
+  margin: 10px auto;
+}
+
+// Modals
+#modalsInDevice {
+  #iwindow > .button {
+    margin: 10px;
+  }
+  .card p {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+}
+
 // Misc
 // --------------------------------------------------