fixing conflicts

.gitignore

@@ -1,3 +1,9 @@
+# Ignore docs files
+_gh_pages
+_site
+.ruby-version
+.sass-cache
+
 # Numerous always-ignore extensions
 *.diff
 *.err
@@ -9,7 +15,6 @@
 *.zip
 *.vi
 *~
-*.sass-cache
 
 # OS or Editor folders
 .DS_Store
@@ -23,16 +28,16 @@ Thumbs.db
 nbproject
 *.sublime-project
 *.sublime-workspace
+.idea
 
 # Komodo
 *.komodoproject
 .komodotools
 
-# Folders to ignore
-.idea
-node_modules
-_site
-
 # grunt-html-validation
-validation-report.json
 validation-status.json
+validation-report.json
+
+# Folders to ignore
+node_modules
+bower_components

dist/ratchet-theme-android.css

@@ -525,10 +525,12 @@ textarea,
   content: "On";
 }
 
+.navigate-left:after,
 .push-left:after {
   content: '';
 }
 
+.navigate-right:after,
 .push-right:after {
   content: '';
 }

dist/ratchet.css

@@ -367,6 +367,7 @@ p {
   color: #333;
   text-align: center;
   vertical-align: top;
+  white-space: nowrap;
   cursor: pointer;
   background-color: white;
   border: 1px solid #ccc;
@@ -443,6 +444,7 @@ p {
 
 .btn-block {
   display: block;
+  width: 100%;
   padding: 15px 0;
   margin-bottom: 10px;
   font-size: 18px;
@@ -785,12 +787,24 @@ input[type="button"] {
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
+.table-view-cell .navigate-left > .btn,
+.table-view-cell .navigate-left > .badge,
+.table-view-cell .navigate-left > .toggle,
+.table-view-cell .navigate-right > .btn,
+.table-view-cell .navigate-right > .badge,
+.table-view-cell .navigate-right > .toggle,
 .table-view-cell .push-left > .btn,
 .table-view-cell .push-left > .badge,
 .table-view-cell .push-left > .toggle,
 .table-view-cell .push-right > .btn,
 .table-view-cell .push-right > .badge,
 .table-view-cell .push-right > .toggle,
+.table-view-cell > a .navigate-left > .btn,
+.table-view-cell > a .navigate-left > .badge,
+.table-view-cell > a .navigate-left > .toggle,
+.table-view-cell > a .navigate-right > .btn,
+.table-view-cell > a .navigate-right > .badge,
+.table-view-cell > a .navigate-right > .toggle,
 .table-view-cell > a .push-left > .btn,
 .table-view-cell > a .push-left > .badge,
 .table-view-cell > a .push-left > .toggle,
@@ -1204,6 +1218,8 @@ select {
   transform: translate3d(100%, 0, 0);
 }
 
+.navigate-left:after,
+.navigate-right:after,
 .push-left:after,
 .push-right:after {
   position: absolute;
@@ -1220,11 +1236,13 @@ select {
   transform: translateY(-50%);
 }
 
+.navigate-left:after,
 .push-left:after {
   left: 15px;
   content: '\e822';
 }
 
+.navigate-right:after,
 .push-right:after {
   right: 15px;
   content: '\e826';

dist/template.html

@@ -10,7 +10,7 @@
     <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    
+
     <!-- Set a shorter title for iOS6 devices when saved to home screen -->
     <meta name="apple-mobile-web-app-title" content="Ratchet">
 
@@ -47,22 +47,22 @@
       <div class="card">
         <ul class="table-view">
           <li class="table-view-cell">
-            <a class="push-right" href="http://goratchet.com">
+            <a class="navigate-right" href="http://goratchet.com">
               <strong>Ratchet documentation</strong>
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https://github.com/twbs/ratchet/">
+            <a class="navigate-right" href="https://github.com/twbs/ratchet/">
               <strong>Ratchet on Github</strong>
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
+            <a class="navigate-right" href="https://groups.google.com/forum/#!forum/goratchet">
               <strong>Ratchet Google group</strong>
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https://www.twitter.com/GoRatchet">
+            <a class="navigate-right" href="https://www.twitter.com/GoRatchet">
               <strong>Ratchet on Twitter</strong>
             </a>
           </li>

docs/_includes/footer.html

@@ -6,11 +6,9 @@
     </li>
     <li>
       <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet &#8211; Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
-      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     </li>
     <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
       Follow @GoRatchet</a>
-      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     </li>
   </ul>
 
@@ -26,3 +24,26 @@
     <li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
   </ul>
 </div>
+
+{% comment %}
+  Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
+  JS interface site: https://dev.twitter.com/docs/tfw-javascript
+
+  * "js.async=1;" added to add async attribute to the generated script tag.
+{% endcomment %}
+<script>
+  window.twttr = (function (d,s,id) {
+    var t, js, fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
+    js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
+    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
+  }(document, "script", "twitter-wjs"));
+</script>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script src="/dist/ratchet.js"></script>
+<script src="/assets/js/docs.js"></script>
+<script src="/assets/js/fingerblast.js"></script>
+
+<script src="//use.typekit.net/asj6ttm.js"></script>
+<script>try{Typekit.load();}catch(e){}</script>

docs/_includes/header.html

@@ -23,11 +23,6 @@
 
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="/dist/ratchet.js"></script>
-<script src="/assets/js/docs.js"></script>
-<script src="/assets/js/fingerblast.js"></script>
-
 <script>
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-36050008-1']);
@@ -38,8 +33,4 @@
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
-  // Remove once I add back in the docs.js
-  // $(function() {
-  //   $(window).on('load', function () { new FingerBlast('.body'); });
-  // });
 </script>

docs/assets/css/docs.css

@@ -662,12 +662,14 @@ code {
 }
 
 .component-example .slider {
-  height: 200px;
+  height: 300px;
+}
+.component-example .slider .slide {
+  height: 300px;
 }
 
 .component-example .slide img {
   width: 100%;
-  height: 200px;
 }
 
 .component-example .slide-text {
@@ -766,7 +768,8 @@ code {
 }
 
 #blockButtonsInDevice .btn-block {
-  margin: 10px;
+  width: 300px;
+  margin: 10px auto;
 }
 
 #segmentedControlsInDevice .segmented-control {
@@ -853,9 +856,10 @@ code {
     height: 813px;
     margin-left: -20px;
     font-family: "Helvetica Neue", sans-serif;
-    background-image: url("../img/iphone5c.png");
-    background-size: 100%;
+    background-image: url("../img/device-sprite.png");
+    background-size: 300%;
     background-repeat: no-repeat;
+    background-position-x: 0;
     -webkit-transition: background-image 0.1s linear;
     -moz-transition: background-image 0.1s linear;
     transition: background-image 0.1s linear;
@@ -1516,7 +1520,7 @@ hr {
   transform: translate3d(-20%, 0, 0);
 }
 .platform-ios .device {
-  background-image: url("../img/iphone5s.png");
+  background-position-x: -395px;
 }
 .platform-ios .device .device-content {
   background-color: #efeff4;
@@ -1995,9 +1999,11 @@ hr {
   color: #fff;
   content: "On";
 }
+.platform-android .navigate-left:after,
 .platform-android .push-left:after {
   content: '';
 }
+.platform-android .navigate-right:after,
 .platform-android .push-right:after {
   content: '';
 }
@@ -2037,7 +2043,7 @@ hr {
 }
 .platform-android .device {
   font-family: 'Roboto', sans-serif;
-  background-image: url("../img/android.png");
+  background-position-x: -790px;
 }
 .platform-android .device .device-content {
   font-size: 18px;

docs/components.html

@@ -57,28 +57,28 @@ title: Components · Ratchet
 
     <article class="component">
       <h3 class="component-title">Title bar with buttons</h3>
-      <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-right</code> utility classes to float the buttons. Also, be sure to place any floated elements bofore the title.</p>
+      <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions. Use the <code>.pull-right</code> or <code>.pull-left</code> utility classes to float the buttons. Also, be sure to place any floated elements before the title.</p>
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn pull-left">
+          <button class="btn pull-left">
             Left
-          </a>
-          <a class="btn pull-right">
+          </button>
+          <button class="btn pull-right">
             Right
-          </a>
+          </button>
           <h1 class="title">Title</h1>
         </header>
       </div>
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn pull-left">
+  <button class="btn pull-left">
     Left
-  </a>
-  <a class="btn pull-right">
+  </button>
+  <button class="btn pull-right">
     Right
-  </a>
+  </button>
   <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
@@ -113,28 +113,28 @@ title: Components &middot; Ratchet
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn btn-link btn-nav pull-left">
+          <button class="btn btn-link btn-nav pull-left">
             <span class="icon icon-left-nav"></span>
             Left
-          </a>
-          <a class="btn btn-link btn-nav pull-right">
+          </button>
+          <button class="btn btn-link btn-nav pull-right">
             Right
             <span class="icon icon-right-nav"></span>
-          </a>
+          </button>
           <h1 class="title">Title</h1>
         </header>
       </div>
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn btn-link btn-nav pull-left">
+  <button class="btn btn-link btn-nav pull-left">
     <span class="icon icon-left-nav"></span>
     Left
-  </a>
-  <a class="btn btn-link btn-nav pull-right">
+  </button>
+  <button class="btn btn-link btn-nav pull-right">
     Right
     <span class="icon icon-right-nav"></span>
-  </a>
+  </button>
   <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
@@ -147,10 +147,10 @@ title: Components &middot; Ratchet
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn pull-left">
+          <button class="btn pull-left">
             Left
-          </a>
-          <a class="btn pull-right">
+          </button>
+          <button class="btn pull-right">
             Right
           </a>
           <div class="segmented-control">
@@ -163,12 +163,12 @@ title: Components &middot; Ratchet
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn pull-left">
+  <button class="btn pull-left">
     Left
   </a>
-  <a class="btn pull-right">
+  <button class="btn pull-right">
     Right
-  </a>
+  </button>
   <div class="segmented-control">
     <a class="control-item active">One</a>
     <a class="control-item">Two</a>
@@ -287,7 +287,7 @@ title: Components &middot; Ratchet
 
         <!-- Block button in standard bar fixed below top bar -->
         <div class="bar bar-standard bar-header-secondary">
-          <a class="btn btn-block">Block level button</a>
+          <button class="btn btn-block">Block level button</button>
         </div>
       </div>
 
@@ -303,12 +303,12 @@ title: Components &middot; Ratchet
 
 <!-- Block button in standard bar fixed below top bar -->
 <div class="bar bar-standard bar-header-secondary">
-  <a class="btn btn-block">Block level button</a>
+  <button class="btn btn-block">Block level button</button>
 </div>
 
 <!-- Block button in standard bar fixed above the footer -->
 <div class="bar bar-standard bar-footer-secondary">
-  <a class="btn btn-block">Block level button</a>
+  <button class="btn btn-block">Block level button</button>
 </div>
 
 <!-- Icons in standard bar fixed to the bottom of the screen -->
@@ -382,22 +382,22 @@ title: Components &middot; Ratchet
 
   <article class="component">
     <h3 class="component-title">Table view with chevrons</h3>
-    <p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.push-right</code> or <code>.push-left</code> to use a chevron.</p>
+    <p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.navigate-right</code> or <code>.navigate-left</code> to use a chevron.</p>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
         <li class="table-view-cell">
-          <a class="push-right">
+          <a class="navigate-right">
             Item 1
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right">
+          <a class="navigate-right">
             Item 2
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right">
+          <a class="navigate-right">
             Item 3
           </a>
         </li>
@@ -407,17 +407,17 @@ title: Components &middot; Ratchet
 {% highlight html %}
 <ul class="table-view">
   <li class="table-view-cell">
-    <a class="push-right">
+    <a class="navigate-right">
       Item 1
     </a>
   </li>
   <li class="table-view-cell">
-    <a class="push-right">
+    <a class="navigate-right">
       Item 2
     </a>
   </li>
   <li class="table-view-cell">
-    <a class="push-right">
+    <a class="navigate-right">
       Item 3
     </a>
   </li>
@@ -455,19 +455,19 @@ title: Components &middot; Ratchet
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
         <li class="table-view-cell">
-          <a class="push-right">
+          <a class="navigate-right">
             <span class="badge">5</span>
             Item 1
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right">
+          <a class="navigate-right">
             <span class="badge">5</span>
             Item 2
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right">
+          <a class="navigate-right">
             <span class="badge">5</span>
             Item 3
           </a>
@@ -478,19 +478,19 @@ title: Components &middot; Ratchet
 {% highlight html %}
 <ul class="table-view">
   <li class="table-view-cell">
-    <a class="push-right">
+    <a class="navigate-right">
       <span class="badge">5</span>
       Item 1
     </a>
   </li>
   <li class="table-view-cell">
-    <a class="push-right">
+    <a class="navigate-right">
       <span class="badge">5</span>
       Item 2
     </a>
   </li>
   <li class="table-view-cell">
-    <a class="push-right">
+    <a class="navigate-right">
       <span class="badge">5</span>
       Item 3
     </a>
@@ -507,7 +507,7 @@ title: Components &middot; Ratchet
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
         <li class="table-view-cell media">
-          <a class="push-right">
+          <a class="navigate-right">
             <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
             <div class="media-body">
               Item 1
@@ -516,7 +516,7 @@ title: Components &middot; Ratchet
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right">
+          <a class="navigate-right">
             <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
             <div class="media-body">
               Item 1
@@ -525,7 +525,7 @@ title: Components &middot; Ratchet
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right">
+          <a class="navigate-right">
             <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
             <div class="media-body">
               Item 1
@@ -539,7 +539,7 @@ title: Components &middot; Ratchet
 {% highlight html %}
 <ul class="table-view">
   <li class="table-view-cell media">
-    <a class="push-right">
+    <a class="navigate-right">
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
@@ -548,7 +548,7 @@ title: Components &middot; Ratchet
     </a>
   </li>
   <li class="table-view-cell media">
-    <a class="push-right">
+    <a class="navigate-right">
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
@@ -557,7 +557,7 @@ title: Components &middot; Ratchet
     </a>
   </li>
   <li class="table-view-cell media">
-    <a class="push-right">
+    <a class="navigate-right">
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
@@ -577,7 +577,7 @@ title: Components &middot; Ratchet
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
         <li class="table-view-cell media">
-          <a class="push-right">
+          <a class="navigate-right">
             <span class="media-object pull-left icon icon-trash"></span>
             <div class="media-body">
               Item 1
@@ -585,7 +585,7 @@ title: Components &middot; Ratchet
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right">
+          <a class="navigate-right">
             <span class="media-object pull-left icon icon-gear"></span>
             <div class="media-body">
               Item 2
@@ -593,7 +593,7 @@ title: Components &middot; Ratchet
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right">
+          <a class="navigate-right">
             <span class="media-object pull-left icon icon-pages"></span>
             <div class="media-body">
               Item 3
@@ -606,7 +606,7 @@ title: Components &middot; Ratchet
 {% highlight html %}
 <ul class="table-view">
   <li class="table-view-cell media">
-    <a class="push-right">
+    <a class="navigate-right">
       <span class="media-object pull-left icon icon-trash"></span>
       <div class="media-body">
         Item 1
@@ -614,7 +614,7 @@ title: Components &middot; Ratchet
     </a>
   </li>
   <li class="table-view-cell media">
-    <a class="push-right">
+    <a class="navigate-right">
       <span class="media-object pull-left icon icon-gear"></span>
       <div class="media-body">
         Item 2
@@ -622,7 +622,7 @@ title: Components &middot; Ratchet
     </a>
   </li>
   <li class="table-view-cell media">
-    <a class="push-right">
+    <a class="navigate-right">
       <span class="media-object pull-left icon icon-pages"></span>
       <div class="media-body">
         Item 3
@@ -639,19 +639,19 @@ title: Components &middot; Ratchet
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
-        <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
-        <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
-        <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
+        <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
+        <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
+        <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
+        <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
-  <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
-  <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
-  <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
+  <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
+  <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
+  <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
+  <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
 </ul>
 {% endhighlight %}
 
@@ -744,29 +744,29 @@ title: Components &middot; Ratchet
     <p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
 
     <div class="component-example">
-      <a class="btn">Button</a>
-      <a class="btn btn-primary">Button</a>
-      <a class="btn btn-positive">Button</a>
-      <a class="btn btn-negative">Button</a>
-      <a class="btn btn-link">Button</a>
-
-      <a class="btn btn-outlined">Button</a>
-      <a class="btn btn-primary btn-outlined">Button</a>
-      <a class="btn btn-positive btn-outlined">Button</a>
-      <a class="btn btn-negative btn-outlined">Button</a>
+      <button class="btn">Button</button>
+      <button class="btn btn-primary">Button</button>
+      <button class="btn btn-positive">Button</button>
+      <button class="btn btn-negative">Button</button>
+      <button class="btn btn-link">Button</button>
+
+      <button class="btn btn-outlined">Button</a>
+      <button class="btn btn-primary btn-outlined">Button</button>
+      <button class="btn btn-positive btn-outlined">Button</button>
+      <button class="btn btn-negative btn-outlined">Button</button>
     </div>
 
 {% highlight html %}
-<a class="btn">Button</a>
-<a class="btn btn-primary">Button</a>
-<a class="btn btn-positive">Button</a>
-<a class="btn btn-negative">Button</a>
-<a class="btn btn-link">Button</a>
-
-<a class="btn btn-outlined">Button</a>
-<a class="btn btn-primary btn-outlined">Button</a>
-<a class="btn btn-positive btn-outlined">Button</a>
-<a class="btn btn-negative btn-outlined">Button</a>
+<button class="btn">Button</button>
+<button class="btn btn-primary">Button</button>
+<button class="btn btn-positive">Button</button>
+<button class="btn btn-negative">Button</button>
+<button class="btn btn-link">Button</button>
+
+<button class="btn btn-outlined">Button</a>
+<button class="btn btn-primary btn-outlined">Button</button>
+<button class="btn btn-positive btn-outlined">Button</button>
+<button class="btn btn-negative btn-outlined">Button</button>
 {% endhighlight %}
 
   </article>
@@ -777,49 +777,49 @@ title: Components &middot; Ratchet
     <p class="component-description">Ratchicons work inside buttons too.</p>
 
     <div class="component-example">
-      <a class="btn">
+      <button class="btn">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-primary">
+      </button>
+      <button class="btn btn-primary">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-positive">
+      </button>
+      <button class="btn btn-positive">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-negative">
+      </button>
+      <button class="btn btn-negative">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-link">
+      </button>
+      <button class="btn btn-link">
         <span class="icon icon-left"></span>
         Button
-      </a>
+      </button>
     </div>
 
 {% highlight html %}
-<a class="btn">
+<button class="btn">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-primary">
+</button>
+<button class="btn btn-primary">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-positive">
+</button>
+<button class="btn btn-positive">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-negative">
+</button>
+<button class="btn btn-negative">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-link">
+</button>
+<button class="btn btn-link">
   <span class="icon icon-left"></span>
   Button
-</a>
+</button>
 {% endhighlight %}
 
   </article>
@@ -828,22 +828,22 @@ title: Components &middot; Ratchet
     <h3 class="component-title">Buttons with badges</h3>
 
     <div class="component-example">
-      <a class="btn">Badge button <span class="badge">1</span></a>
-      <a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
-      <a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
-      <a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
+      <button class="btn">Badge button <span class="badge">1</span></button>
+      <button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
+      <button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
+      <button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
     </div>
 
 {% highlight html %}
-<a class="btn">Badge button <span class="badge">1</span></a>
-<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
-<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
-<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
-
-<a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a>
+<button class="btn">Badge button <span class="badge">1</span></button>
+<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
+<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
+<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
+
+<button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
+<button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
+<button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
+<button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>
 {% endhighlight %}
 
   </article>
@@ -852,27 +852,27 @@ title: Components &middot; Ratchet
     <h3 class="component-title">Block buttons</h3>
 
     <div class="component-example">
-      <a class="btn btn-block">Block button</a>
-      <a class="btn btn-primary btn-block">Block button</a>
-      <a class="btn btn-positive btn-block">Block button</a>
-      <a class="btn btn-negative btn-block">Block button</a>
-
-      <a class="btn btn-block btn-outlined">Block button</a>
-      <a class="btn btn-primary btn-block btn-outlined">Block button</a>
-      <a class="btn btn-positive btn-block btn-outlined">Block button</a>
-      <a class="btn btn-negative btn-block btn-outlined">Block button</a>
+      <button class="btn btn-block">Block button</button>
+      <button class="btn btn-primary btn-block">Block button</button>
+      <button class="btn btn-positive btn-block">Block button</button>
+      <button class="btn btn-negative btn-block">Block button</button>
+
+      <button class="btn btn-block btn-outlined">Block button</button>
+      <button class="btn btn-primary btn-block btn-outlined">Block button</button>
+      <button class="btn btn-positive btn-block btn-outlined">Block button</button>
+      <button class="btn btn-negative btn-block btn-outlined">Block button</button>
     </div>
 
 {% highlight html %}
-<a class="btn btn-block">Block button</a>
-<a class="btn btn-primary btn-block">Block button</a>
-<a class="btn btn-positive btn-block">Block button</a>
-<a class="btn btn-negative btn-block">Block button</a>
-
-<a class="btn btn-block btn-outlined">Block button</a>
-<a class="btn btn-primary btn-block btn-outlined">Block button</a>
-<a class="btn btn-positive btn-block btn-outlined">Block button</a>
-<a class="btn btn-negative btn-block btn-outlined">Block button</a>
+<button class="btn btn-block">Block button</button>
+<button class="btn btn-primary btn-block">Block button</button>
+<button class="btn btn-positive btn-block">Block button</button>
+<button class="btn btn-negative btn-block">Block button</button>
+
+<button class="btn btn-block btn-outlined">Block button</button>
+<button class="btn btn-primary btn-block btn-outlined">Block button</button>
+<button class="btn btn-positive btn-block btn-outlined">Block button</button>
+<button class="btn btn-negative btn-block btn-outlined">Block button</button>
 {% endhighlight %}
 
   </article>
@@ -961,7 +961,7 @@ title: Components &middot; Ratchet
         <input type="text" placeholder="Full name">
         <input type="search" placeholder="Search">
         <textarea rows="5"></textarea>
-        <a class="btn btn-positive btn-block">Choose existing</a>
+        <button class="btn btn-positive btn-block">Choose existing</button>
       </form>
     </div>
 
@@ -970,7 +970,7 @@ title: Components &middot; Ratchet
   <input type="text" placeholder="Full name">
   <input type="search" placeholder="Search">
   <textarea rows="5"></textarea>
-  <a class="btn btn-positive btn-block">Choose existing</a>
+  <button class="btn btn-positive btn-block">Choose existing</button>
 </form>
 {% endhighlight %}
 
@@ -1103,7 +1103,6 @@ document
   </a>
 </header>
 {% endhighlight %}
-
   </article>
 
   <!-- Modals -->
@@ -1149,17 +1148,17 @@ document
         <div class="slider" id="mySlider">
           <div class="slide-group">
             <div class="slide">
-              <img src="/assets/img/slide-1.png" alt="Mountain and sky">
+              <img src="/assets/img/slide-1.jpg" alt="Mountain and sky">
               <span class="slide-text">
                 <span class="icon icon-left-nav"></span>
                 Slide me
               </span>
             </div>
             <div class="slide">
-              <img src="/assets/img/slide-2.png" alt="Giant mecha">
+              <img src="/assets/img/slide-2.jpg" alt="Giant mecha">
             </div>
             <div class="slide">
-              <img src="/assets/img/slide-3.png" alt="Big Ben">
+              <img src="/assets/img/slide-3.jpg" alt="Big Ben">
             </div>
           </div>
         </div>
@@ -1169,17 +1168,17 @@ document
 <div class="slider" id="mySlider">
   <div class="slide-group">
     <div class="slide">
-      <img src="/assets/img/slide-1.png">
+      <img src="/assets/img/slide-1.jpg">
       <span class="slide-text">
         <span class="icon icon-left-nav"></span>
         Slide me
       </span>
     </div>
     <div class="slide">
-      <img src="/assets/img/slide-2.png">
+      <img src="/assets/img/slide-2.jpg">
     </div>
     <div class="slide">
-      <img src="/assets/img/slide-3.png">
+      <img src="/assets/img/slide-3.jpg">
     </div>
   </div>
 </div>
@@ -1225,7 +1224,7 @@ document
           <div class="card">
             <ul class="table-view">
               <li class="table-view-cell">
-                <a class="push-right" href="../two.html" data-transition="slide-in">
+                <a class="navigate-right" href="../two.html" data-transition="slide-in">
                   Load new page with push
                 </a>
               </li>
@@ -1242,7 +1241,7 @@ document
   <div class="card">
     <ul class="table-view">
       <li class="table-view-cell">
-        <a class="push-right" href="../two.html" data-transition="slide-in">
+        <a class="navigate-right" href="../two.html" data-transition="slide-in">
           Load new page with push
         </a>
       </li>

docs/dist/ratchet-theme-android.css

@@ -525,10 +525,12 @@ textarea,
   content: "On";
 }
 
+.navigate-left:after,
 .push-left:after {
   content: '';
 }
 
+.navigate-right:after,
 .push-right:after {
   content: '';
 }

docs/dist/ratchet.css

@@ -367,6 +367,7 @@ p {
   color: #333;
   text-align: center;
   vertical-align: top;
+  white-space: nowrap;
   cursor: pointer;
   background-color: white;
   border: 1px solid #ccc;
@@ -443,6 +444,7 @@ p {
 
 .btn-block {
   display: block;
+  width: 100%;
   padding: 15px 0;
   margin-bottom: 10px;
   font-size: 18px;
@@ -785,12 +787,24 @@ input[type="button"] {
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
+.table-view-cell .navigate-left > .btn,
+.table-view-cell .navigate-left > .badge,
+.table-view-cell .navigate-left > .toggle,
+.table-view-cell .navigate-right > .btn,
+.table-view-cell .navigate-right > .badge,
+.table-view-cell .navigate-right > .toggle,
 .table-view-cell .push-left > .btn,
 .table-view-cell .push-left > .badge,
 .table-view-cell .push-left > .toggle,
 .table-view-cell .push-right > .btn,
 .table-view-cell .push-right > .badge,
 .table-view-cell .push-right > .toggle,
+.table-view-cell > a .navigate-left > .btn,
+.table-view-cell > a .navigate-left > .badge,
+.table-view-cell > a .navigate-left > .toggle,
+.table-view-cell > a .navigate-right > .btn,
+.table-view-cell > a .navigate-right > .badge,
+.table-view-cell > a .navigate-right > .toggle,
 .table-view-cell > a .push-left > .btn,
 .table-view-cell > a .push-left > .badge,
 .table-view-cell > a .push-left > .toggle,
@@ -1204,6 +1218,8 @@ select {
   transform: translate3d(100%, 0, 0);
 }
 
+.navigate-left:after,
+.navigate-right:after,
 .push-left:after,
 .push-right:after {
   position: absolute;
@@ -1220,11 +1236,13 @@ select {
   transform: translateY(-50%);
 }
 
+.navigate-left:after,
 .push-left:after {
   left: 15px;
   content: '\e822';
 }
 
+.navigate-right:after,
 .push-right:after {
   right: 15px;
   content: '\e826';

docs/dist/template.html

@@ -10,7 +10,7 @@
     <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    
+
     <!-- Set a shorter title for iOS6 devices when saved to home screen -->
     <meta name="apple-mobile-web-app-title" content="Ratchet">
 
@@ -47,22 +47,22 @@
       <div class="card">
         <ul class="table-view">
           <li class="table-view-cell">
-            <a class="push-right" href="http://goratchet.com">
+            <a class="navigate-right" href="http://goratchet.com">
               <strong>Ratchet documentation</strong>
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https://github.com/twbs/ratchet/">
+            <a class="navigate-right" href="https://github.com/twbs/ratchet/">
               <strong>Ratchet on Github</strong>
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
+            <a class="navigate-right" href="https://groups.google.com/forum/#!forum/goratchet">
               <strong>Ratchet Google group</strong>
             </a>
           </li>
           <li class="table-view-cell">
-            <a class="push-right" href="https://www.twitter.com/GoRatchet">
+            <a class="navigate-right" href="https://www.twitter.com/GoRatchet">
               <strong>Ratchet on Twitter</strong>
             </a>
           </li>

docs/examples/app-android-notes/index.html

@@ -31,79 +31,79 @@
 
       <ul class="table-view">
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             Note title goes here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
@@ -111,52 +111,21 @@
       </ul>
     </div>
 
-    <!-- Settings modal -->
+    <!-- Compose modal -->
     <div id="composeModal" class="modal">
       <header class="bar bar-nav">
-        <a class="icon icon-close pull-right" href="#composeModal"></a>
-        <h1 class="title">
-          <span class="icon icon-gear"></span>
-          Settings
-        </h1>
+        <a class="icon icon-left pull-left" href="#composeModal"></a>
+        <h1 class="title">New note</h1>
       </header>
-      
-      <div class="content">
-        <h5>User settings</h5>
 
-        <form class="input-group">
-          <input type="text" placeholder="Full name">
-          <input type="email" placeholder="Email">
-          <input type="text" placeholder="Username">
+      <div class="content">
+        <form class="content-padded">
+          <input type="text" placeholder="Title">
+          <textarea rows="10"></textarea>
+          <a class="btn btn-positive btn-block" href="#composeModal">Save note</a>
         </form>
-
-        <h5>App settings</h5>
-
-        <ul class="table-view">
-          <li class="table-view-cell media">
-            <span class="media-object pull-left icon icon-sound"></span>
-            <div class="media-body">
-              Enable sounds
-            </div>
-            <div class="toggle">
-              <div class="toggle-handle"></div>
-            </div>
-          </li>
-          <li class="table-view-cell media">
-            <span class="media-object pull-left icon icon-person"></span>
-            <div class="media-body">
-              Parental controls
-            </div>
-            <div class="toggle">
-              <div class="toggle-handle"></div>
-            </div>
-          </li>
-        </ul>
-        <div class="container">
-          <a class="btn btn-positive btn-block">Save settings</a>
-        </div>
       </div>
-    </div>
+    </div><!-- /.modal -->
 
     <!-- Popover -->
     <div id="navPopover" class="popover">

docs/examples/app-ios-mail/inbox.html

@@ -23,91 +23,91 @@
 
       <ul class="table-view">
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>
         </li>
         <li class="table-view-cell">
-          <a class="push-right" href="#">
+          <a class="navigate-right" href="#">
             Email subject line here
             <p>Lorem ipsum dolor sit amet...</p>
           </a>

docs/examples/app-ios-mail/index.html

@@ -17,7 +17,7 @@
       <a class="icon icon-refresh pull-right"></a>
       <h1 class="title">Mailboxes</h1>
     </header>
-    
+
     <div class="bar bar-footer">
       <a class="icon icon-compose pull-right" href="#composeModal"></a>
       <small class="updated-text">Updated just now</small>
@@ -27,7 +27,7 @@
 
       <ul class="table-view">
         <li class="table-view-cell media">
-          <a class="push-right" href="inbox.html" data-transition="slide-in">
+          <a class="navigate-right" href="inbox.html" data-transition="slide-in">
             <span class="media-object icon icon-pages pull-left"></span>
             <div class="media-body">
               All inboxes
@@ -35,7 +35,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="inbox.html" data-transition="slide-in">
+          <a class="navigate-right" href="inbox.html" data-transition="slide-in">
             <span class="media-object icon icon-person pull-left"></span>
             <div class="media-body">
               Personal email
@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="inbox.html" data-transition="slide-in">
+          <a class="navigate-right" href="inbox.html" data-transition="slide-in">
             <span class="media-object icon icon-star-filled pull-left"></span>
             <div class="media-body">
               Starred
@@ -51,7 +51,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="inbox.html" data-transition="slide-in">
+          <a class="navigate-right" href="inbox.html" data-transition="slide-in">
             <span class="media-object icon icon-trash pull-left"></span>
             <div class="media-body">
               Trash
@@ -63,7 +63,7 @@
       <h5 class="content-padded">Other accounts</h5>
       <ul class="table-view">
         <li class="table-view-cell media">
-          <a class="push-right" href="inbox.html" data-transition="slide-in">
+          <a class="navigate-right" href="inbox.html" data-transition="slide-in">
             <span class="media-object icon icon-more pull-left"></span>
             <div class="media-body">
               Misc
@@ -84,7 +84,7 @@
         </a>
         <h1 class="title">New message</h1>
       </header>
-      
+
       <div class="content">
         <form class="input-group">
           <input type="text" placeholder="To:">

docs/examples/app-movies/index.html

@@ -16,7 +16,7 @@
       <a class="icon icon-gear pull-right" href="#settingsModal" ></a>
       <h1 class="title">Movie finder</h1>
     </header>
-    
+
     <div class="bar bar-standard bar-header-secondary">
       <form>
         <input type="search" placeholder="Search">
@@ -24,7 +24,7 @@
     </div>
 
     <div class="content">
-      
+
       <div class="slider">
         <div class="slide-group">
           <div class="slide">
@@ -42,7 +42,7 @@
       <ul class="table-view">
         <li class="table-view-cell table-view-divider">Recommended movies</li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
             <div class="media-body">
               Argo
@@ -51,7 +51,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
             <div class="media-body">
               Skyfall: 007
@@ -60,7 +60,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
             <div class="media-body">
               Wreck-it Ralph
@@ -69,7 +69,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
             <div class="media-body">
               Argo
@@ -78,7 +78,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
             <div class="media-body">
               Skyfall: 007
@@ -87,7 +87,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
             <div class="media-body">
               Wreck-it Ralph
@@ -96,7 +96,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
             <div class="media-body">
               Argo
@@ -105,7 +105,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
             <div class="media-body">
               Skyfall: 007
@@ -114,7 +114,7 @@
           </a>
         </li>
         <li class="table-view-cell media">
-          <a class="push-right" href="choose-theater.html" data-transition="slide-in">
+          <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
             <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
             <div class="media-body">
               Wreck-it Ralph
@@ -131,7 +131,7 @@
         <a class="icon icon-close pull-right" href="#settingsModal"></a>
         <h1 class="title">Settings</h1>
       </header>
-      
+
       <div class="content">
         <form class="input-group">
           <input type="text" placeholder="Full name">
@@ -161,8 +161,8 @@
             </div>
           </li>
         </ul>
-        <div class="container">
-          <a class="btn btn-positive btn-block content-padded">Save settings</a>
+        <div class="content-padded">
+          <button class="btn btn-positive btn-block">Save settings</button>
         </div>
       </div>
     </div><!-- /.modal -->

docs/getting-started.html

@@ -21,9 +21,6 @@ title: Getting started · Ratchet
 <div class="container">
   <div class="column-group">
     <div class="column units-2 lg-units-8 docs-content">
-
-
-
       <div class="docs-section">
         <h2>Quick start</h2>
         <p class="lead">Quickly get up and running with a Ratchet prototype.</p>
@@ -117,7 +114,23 @@ title: Getting started &middot; Ratchet
   </body>
 </html>
 {% endhighlight %}
-      </div>
+    </div>
+
+    <div class="docs-section">
+      <h2 class="section-heading">Community</h2>
+      <p class="section-lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
+      <ol>
+        <li>
+          <p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</p>
+        </li>
+        <li>
+          <p>For help using Ratchet, ask on  <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</p>
+        </li>
+        <li>
+          <p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
+        </li>
+      </ol>
+      <p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
     </div>
 
     <div class="column units-2 lg-units-4">

sass/buttons.scss

@@ -13,6 +13,7 @@
   color: #333;
   text-align: center;
   vertical-align: top;
+  white-space: nowrap;
   cursor: pointer;
   background-color: $chrome-color;
   border: 1px solid #ccc;
@@ -117,6 +118,7 @@
 // Block level buttons (full width buttons)
 .btn-block {
   display: block;
+  width: 100%;
   padding: 15px 0;
   margin-bottom: 10px;
   font-size: 18px;

sass/docs.scss

@@ -690,11 +690,14 @@ code {
   margin-bottom: 10px;
 }
 .component-example .slider {
-  height: 200px;
+  height: 300px;
+
+  .slide {
+    height: 300px;
+  }
 }
 .component-example .slide img {
   width: 100%;
-  height: 200px;
 }
 .component-example .slide-text {
   position: absolute;
@@ -789,7 +792,8 @@ code {
   }
 }
 #blockButtonsInDevice .btn-block {
-  margin: 10px;
+  width: 300px;
+  margin: 10px auto;
 }
 
 //Segmented Control
@@ -894,9 +898,10 @@ code {
     height: 813px;
     margin-left: -20px;
     font-family: "Helvetica Neue", sans-serif;
-    background-image: url("../img/iphone5c.png");
-    background-size: 100%;
+    background-image: url("../img/device-sprite.png");
+    background-size: 300%;
     background-repeat: no-repeat;
+    background-position-x: 0;
     @include transition(background-image .1s linear);
 
     &.device-fixed {
@@ -1070,7 +1075,7 @@ hr {
   @import "theme-ios.scss";
 
   .device {
-    background-image: url("../img/iphone5s.png");
+    background-position-x: -395px;
 
     .device-content {
       background-color: #efeff4;
@@ -1082,7 +1087,7 @@ hr {
 
   .device {
     font-family: 'Roboto', sans-serif;
-    background-image: url("../img/android.png");
+    background-position-x: -790px;
 
     .device-content {
       font-size: 18px;

sass/push.scss

@@ -34,6 +34,8 @@
 }
 
 // Add chevrons to elements
+.navigate-left,
+.navigate-right,
 .push-left,
 .push-right {
   &:after {
@@ -49,11 +51,13 @@
     @include transform(translateY(-50%));
   }
 }
+.navigate-left:after,
 .push-left:after {
   left: 15px;
   content: '\e822';
 }
-.push-right:after {
+.navigate-right:after,
+.push-right:after{
   right: 15px;
   content: '\e826';
 }

sass/table-views.scss

@@ -91,6 +91,8 @@
   }
 
   // If the cell has a chevron, give some more room.
+  .navigate-left,
+  .navigate-right,
   .push-left,
   .push-right {
     > .btn,

sass/theme-android.scss

@@ -697,9 +697,12 @@ textarea,
 // Push icons
 // --------------------------------------------------
 
+// Deprecated `push-left` and `push-right` as of 2.0.1
+.navigate-left:after,
 .push-left:after {
   content: '';
 }
+.navigate-right:after,
 .push-right:after {
   content: '';
 }