blocking in the example page.

docs/assets/css/docs.css

@@ -373,6 +373,37 @@ body {
   cursor: pointer;
 }
 
+.docs-examples {
+  margin-top: 30px;
+}
+
+.docs-example-group {
+  margin-top: 30px;
+}
+.docs-example-group .example-wrap {
+  display: inline-block;
+  margin-right: 10px;
+}
+.docs-example-group .example-wrap:last-child {
+  margin-right: 10px;
+}
+.docs-example-group .example-wrap .example {
+  display: inline-block;
+  overflow: hidden;
+  padding: 3px;
+  width: 170px;
+  height: 100px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+}
+.docs-example-group .example-wrap h5 {
+  margin-top: 10px;
+  font-weight: 300;
+}
+.docs-example-group .example-wrap img {
+  width: 100%;
+}
+
 code {
   padding: 2px 4px;
   font-size: 90%;
@@ -874,6 +905,14 @@ hr {
     font-weight: 300;
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
+
+  .docs-example-group .example-wrap {
+    display: inline-block;
+  }
+  .docs-example-group .example-wrap .example {
+    width: 180px;
+    height: 120px;
+  }
 }
 @media screen and (min-width: 1200px) {
   .device {
@@ -887,11 +926,12 @@ hr {
   .docs-jump-menu {
     left: 30px;
   }
-}
-.example-device {
-  margin: 0 auto;
-}
 
+  .docs-example-group .example-wrap .example {
+    width: 220px;
+    height: 150px;
+  }
+}
 .container {
   position: relative;
   margin-left: auto;

docs/examples.html

@@ -21,8 +21,41 @@ title: Examples · Ratchet
 
 <div class="container">
   <div class="column-group">
-    <div class="column units-2 lg-units-8">
-      <p>Examples will go here</p>
+    <div class="column units-2 lg-units-8 docs-examples">
+      <p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device see the app as intended.</p>
+      
+      <div class="docs-example-group">
+        <div class="example-wrap">
+          <a class="example" href="#">
+            <img src="../assets/img/example.png">
+          </a>
+          <h5>Movie finder</h5>
+        </div>
+        <div class="example-wrap">
+          <a class="example" href="#">
+            <img src="../assets/img/example-ios.png">
+          </a>
+          <h5>iOS mail app</h5>
+        </div>
+        <div class="example-wrap">
+          <a class="example" href="#">
+            <img src="../assets/img/example-android.png">
+          </a>
+          <h5>Android notes app</h5>
+        </div>
+      </div>
     </div>
+    <div class="column units-2 lg-units-4">
+      <div class="docs-module">
+        <h4 class="docs-module-title">Download Ratchet</h4>
+        <p>If you haven't already, download the cource code for Ratchet.</p>
+        <a href="#" class="btn btn-block btn-primary" data-ignore="push">Download Ratchet</a>
+      </div>
+    </div>
+  </div>
+  
+  <div class="column units-2">
+    <!-- Footer -->
+    {% include footer.html %}
   </div>
 </div>

sass/docs.scss

@@ -370,8 +370,47 @@ body {
   }
 }
 
+// Example devices
+// --------------------------------------------------
+
+.docs-examples {
+  margin-top: 30px;
+}
+.docs-example-group {
+  margin-top: 30px;
+
+  .example-wrap {
+    display: inline-block;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 10px;
+    }
+    .example {
+      display: inline-block;
+      overflow: hidden;
+      padding: 3px;
+      width: 170px;
+      height: 100px;
+      border: $border-default;
+      border-radius: 3px;
+    }
+    h5 {
+      margin-top: 10px;
+      font-weight: 300;
+    }
+    img {
+      width: 100%;
+    }
+  }
+}
+// .example-device {
+//   margin: 0 auto;
+// }
+
 // Components
 // --------------------------------------------------
+
 code {
   padding: 2px 4px;
   font-size: 90%;
@@ -874,6 +913,15 @@ hr {
     font-weight: 300;
     text-shadow: 0 0 10px rgba(0,0,0,.5);
   }
+  // Examples
+  .docs-example-group .example-wrap {
+    display: inline-block;
+
+    .example {
+      width: 180px;
+      height: 120px;
+    }
+  }
 }
 @media screen and (min-width: 1200px) {
   // Device
@@ -887,12 +935,11 @@ hr {
   .docs-jump-menu {
     left: 30px;
   }
-}
-
-// Example devices
-
-.example-device {
-  margin: 0 auto;
+  // Examples
+  .docs-example-group .example-wrap .example {
+    width: 220px;
+    height: 150px;
+  }
 }