Add 3 example apps

src/index.jade

@@ -10,6 +10,7 @@ block content
   include ./sections/_downloads
   include ./sections/_inspector
   include ./sections/_code_samples
+  include ./sections/_examples
   include ./sections/_videos
   include ./sections/_screencasts
   include ./sections/_books

src/sections/_contribute.jade

@@ -24,5 +24,6 @@ section.support.column-contain
     h2 Contribute
     p.
       Marionette greatly appreciates the community! We welcome your support and contributions. Please visit the GitHub repo to report bugs, suggest your ideas, help other users out, and even contribute code.
-    a.btn.btn-action(href="https://github.com/marionettejs/backbone.marionette/issues", target="_blank") GitHub Issues
+    .btn-wrapper
+      a.btn.btn-action(href="https://github.com/marionettejs/backbone.marionette/issues", target="_blank") GitHub Issues
   .cl

src/sections/_examples.jade

@@ -0,0 +1,47 @@
+section.example-apps.column-contain
+  h2 Example Apps
+  .row
+    .example.col-3.left
+      header
+        h3 Marionette Wires
+        a.link(href="http://www.marionettewires.com", target= "_blank")
+          img(src="images/screenshots/wires.png", alt="Marionette Wires")
+      p.description.
+        An opinionated Marionette starter app.
+      ul
+        li Browserify
+        li Babel (ES6)
+        li Handlebars
+        li Gulp
+      .cl
+      .btn-wrapper
+        a.btn.btn-action(href = "https://github.com/thejameskyle/marionette-wires", target= "_blank") View Source
+
+    .example.col-3.left
+      header
+        h3 Gistbook
+        a.link(href="http://www.gistbook.io", target= "_blank")
+          img(src="images/screenshots/gistbook.png", alt="Gistbook")
+      p.description.
+        An app to write about technical subjects.
+      ul
+        li Webpack
+        li Babel (ES6)
+        li Handlebars
+        li Grunt
+      .cl
+      .btn-wrapper
+        a.btn.btn-action(href = "https://github.com/jmeas/gistbook", target= "_blank") View Source
+
+    .example.col-3.left
+      header
+        h3 Edit
+        a.link(href="http://www.edit.sx", target= "_blank")
+          img(src="images/screenshots/edit.png", alt="Edit")
+      p.description.
+        A collaborative tool to share photographs.
+      ul
+        li CoffeeScript
+      .cl
+      .btn-wrapper
+        a.btn.btn-action(href = "https://github.com/samccone/edit.sx-frontend", target= "_blank") View Source

src/sections/_inspector.jade

@@ -11,6 +11,6 @@ section.screencasts.inspector.column-contain(itemscope, itemtype="http://schema.
       .col-1-3.right
         p.description(itemprop="description").
           A world-class inspector for exploring your application's views, models, events and more. You won't know how you got by without it.
-
-        a.btn.btn-action(itemprop="downloadUrl", href="http://chrome.google.com/webstore/detail/marionette-inspector/fbgfjlockdhidoaempmjcddibjklhpka", target="_blank") Install Now
-        a.btn.btn-action.secondary-color(href="inspector") Learn More
+        .btn-wrapper
+          a.btn.btn-action(itemprop="downloadUrl", href="http://chrome.google.com/webstore/detail/marionette-inspector/fbgfjlockdhidoaempmjcddibjklhpka", target="_blank") Install Now
+          a.btn.btn-action.secondary-color(href="inspector") Learn More

src/stylesheets/pages/_home.scss

@@ -6,7 +6,8 @@
 @import "partials/companies";
 @import "partials/contribute";
 @import "partials/downloads";
+@import "partials/examples";
 @import "partials/inspector";
 @import "partials/screencasts";
 @import "partials/stickers";
-@import "partials/videos";
+@import "partials/videos";

src/stylesheets/pages/partials/_contribute.scss

@@ -52,9 +52,19 @@
       width: 100%;
     }
   }
-  .btn-action {
-    display: inline-block;
-    float: right;
-    margin-top: 10px;
+  .btn-wrapper {
+    .btn-action {
+      display: inline-block;
+      float: right;
+      margin-top: 10px;
+      @include below($sm-breakpoint) {
+        float: none;
+        width: 85%;
+      }
+    }
+    @include below($sm-breakpoint) {
+      width: 100%;
+      text-align: center;
+    }
   }
-}
+}

src/stylesheets/pages/partials/_downloads.scss

@@ -57,7 +57,6 @@ small {
 }
 
 .download-section {
-  border-top: none;
   small {
     float: right;
     color: $gray;

src/stylesheets/pages/partials/_examples.scss

@@ -0,0 +1,45 @@
+.example-apps {
+  .row {
+    .example {
+      margin: 0;
+      height: 100%;
+      img {
+        width: 100%;
+        box-shadow: 2px 2px 2px lighten($gray, 35%);
+      }
+      @include below($adaptive-snap) {
+        margin-top: 30px;
+      }
+    }
+  }
+  .description {
+    padding-bottom: 0;
+    margin: 10px 0;
+  }
+  ul {
+    list-style: disc inside;
+    li {
+      width: 100%;
+      float: left;
+      font-size: 16px;
+      color: #56585E;
+    }
+  }
+  .btn-wrapper {
+    text-align: left;
+    width: 100%;
+    .btn-action {
+      margin-top: 20px;
+      @include below($adaptive-snap) {
+        width: 35%;
+      }
+      @include below($sm-breakpoint) {
+        display: inline-block;
+        width: 85%;
+      }
+    }
+    @include below($sm-breakpoint) {
+      text-align: center;
+    }
+  }
+}

src/stylesheets/pages/partials/_inspector.scss

@@ -16,7 +16,6 @@
     @include below($sm-breakpoint) {
       width: 85%;
       margin: 20px 0;
-
       &.secondary-color {
         margin-top: 0;
       }
@@ -25,8 +24,8 @@
 
   .description {
     padding-bottom: 0 !important;
-  }    
-  
+  }
+
   .thumbnail {
     margin-right: 0;
     width: 90%;
@@ -39,4 +38,11 @@
       margin-bottom: 30px;
     }
   }
+
+  .btn-wrapper {
+    @include below($sm-breakpoint) {
+      width: 100%;
+      text-align: center;
+    }
+  }
 }