Merge branch 'master' into optimize_docs_fonts

Conflicts: docs/_includes/header.html docs/getting-started.html sass/docs.scss
11 years ago · 84a532eda2
42 changed files with 539 additions and 365 deletions
--- a/.gitignore
+++ b/.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
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,11 @@
+language: node_js
+node_js:
+  - "0.10"
+before_install:
+  - rvm use 1.9.3
+install:
+  - npm install -g grunt-cli
+  - npm install
+  - gem install --no-document jekyll sass
+matrix:
+  fast_finish: true
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -80,26 +80,45 @@ module.exports = function(grunt) {
    },

    cssmin: {
-      minify: {
      options: {
-          banner: '', // set to empty ; see bellow
+        banner: '', // set to empty; see bellow
        keepSpecialComments: '*', // set to '*' because we already add the banner in sass
        report: 'min'
      },
-        files: {
-          'dist/<%= pkg.name %>.min.css': 'dist/<%= pkg.name %>.css'
-        }
+      ratchet: {
+        src: '<%= meta.distPath %><%= pkg.name %>.css',
+        dest: '<%= meta.distPath %><%= pkg.name %>.min.css'
+      },
+      docs: {
+        options: {
+          noAdvanced: true  // disable advanced optimizations since it causes code highlighting not to work
+        },
+        src: [
+          '<%= meta.docsAssetsPath %>css/docs.css',
+          '<%= meta.docsAssetsPath %>css/pygments-manni.css'
+        ],
+        dest: '<%= meta.docsAssetsPath %>css/docs.min.css'
      }
    },

    uglify: {
      options: {
        banner: '<%= banner %>',
+        compress: true,
+        mangle: true,
+        preserveComments: false,
        report: 'min'
      },
      ratchet: {
-        src: 'dist/<%= pkg.name %>.js',
-        dest: 'dist/<%= pkg.name %>.min.js'
+        src: '<%= meta.distPath %><%= pkg.name %>.js',
+        dest: '<%= meta.distPath %><%= pkg.name %>.min.js'
+      },
+      docs: {
+        src: [
+          '<%= meta.docsAssetsPath %>js/docs.js',
+          '<%= meta.docsAssetsPath %>js/fingerblast.js'
+        ],
+        dest: '<%= meta.docsAssetsPath %>js/docs.min.js'
      }
    },

@ -156,6 +175,7 @@ module.exports = function(grunt) {
  grunt.registerTask('validate-html', ['jekyll', 'validation']);
  grunt.registerTask('default', ['dist']);
  grunt.registerTask('build', ['dist']);
+  grunt.registerTask('test', ['dist', 'validate-html']);

  // Version numbering task.
  // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-# Ratchet v2.0.0 [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)
+# Ratchet v2.0.0 [![Build Status](https://secure.travis-ci.org/twbs/ratchet.png)](http://travis-ci.org/twbs/ratchet) [![devDependencies](https://david-dm.org/twbs/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/ratchet#info=devDependencies)

 Build mobile apps with simple HTML, CSS, and JS components.

--- a/dist/ratchet-theme-android.css
+++ b/dist/ratchet-theme-android.css
@ -30,12 +30,21 @@ a:active {
  padding-top: 50px;
 }

+.bar-header-secondary ~ .content {
+  padding-top: 100px;
+}
+
 .bar-tab ~ .content {
+  padding-top: 50px;
+  padding-bottom: 0;
+}
+
+.bar-footer ~ .content {
  padding-bottom: 50px;
 }

-.bar-header-secondary ~ .content {
-  padding-top: 100px;
+.bar-footer-secondary ~ .content {
+  padding-bottom: 100px;
 }

 .btn {
@ -525,10 +534,12 @@ textarea,
  content: "On";
 }

+.navigate-left:after,
 .push-left:after {
  content: '';
 }

+.navigate-right:after,
 .push-right:after {
  content: '';
 }
--- a/dist/ratchet.css
+++ b/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';
--- a/dist/ratchet.min.css
+++ b/dist/ratchet.min.css
--- a/dist/template.html
+++ b/dist/template.html
@ -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>
--- a/docs/_includes/footer.html
+++ b/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,25 @@
    <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.min.js"></script>
+<script src="/assets/js/docs.min.js"></script>
+
+<script src="//use.typekit.net/asj6ttm.js"></script>
+<script>try{Typekit.load();}catch(e){}</script>
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@ -11,9 +11,8 @@
 <!-- Google Web Fonts -->
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:300">

-<link rel="stylesheet" href="/dist/ratchet.css">
-<link rel="stylesheet" href="/assets/css/docs.css">
-<link rel="stylesheet" href="/assets/css/pygments.css">
+<link rel="stylesheet" href="/dist/ratchet.min.css">
+<link rel="stylesheet" href="/assets/css/docs.min.css">

 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
@ -23,11 +22,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']);
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -296,7 +296,7 @@ body {
 }
 .docs-header-content .btn {
  display: block;
-  padding: 15px 60px 16px;
+  padding: 15px 90px 16px;
  font-size: 18px;
  margin-bottom: 0;
  color: #0a1855;
@ -425,12 +425,20 @@ body {
  }
 }
 .docs-section {
-  margin-bottom: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #ddd;
 }

+.docs-section:last-child {
+  border-bottom: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .docs-module {
+    margin-top: 35px;
+  }
+}
 .docs-module {
  margin-top: 20px;
  padding: 20px;
@ -662,12 +670,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 +776,8 @@ code {
 }

 #blockButtonsInDevice .btn-block {
-  margin: 10px;
+  width: 300px;
+  margin: 10px auto;
 }

 #segmentedControlsInDevice .segmented-control {
@ -853,9 +864,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: 0 0;
    -webkit-transition: background-image 0.1s linear;
    -moz-transition: background-image 0.1s linear;
    transition: background-image 0.1s linear;
@ -1516,7 +1528,7 @@ hr {
  transform: translate3d(-20%, 0, 0);
 }
 .platform-ios .device {
-  background-image: url("../img/iphone5s.png");
+  background-position: -395px 0;
 }
 .platform-ios .device .device-content {
  background-color: #efeff4;
@ -1540,11 +1552,18 @@ hr {
 .platform-android .bar-nav ~ .content {
  padding-top: 50px;
 }
+.platform-android .bar-header-secondary ~ .content {
+  padding-top: 100px;
+}
 .platform-android .bar-tab ~ .content {
+  padding-top: 50px;
+  padding-bottom: 0;
+}
+.platform-android .bar-footer ~ .content {
  padding-bottom: 50px;
 }
-.platform-android .bar-header-secondary ~ .content {
-  padding-top: 100px;
+.platform-android .bar-footer-secondary ~ .content {
+  padding-bottom: 100px;
 }
 .platform-android .btn {
  padding: 8px 15px;
@ -1995,9 +2014,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 +2058,7 @@ hr {
 }
 .platform-android .device {
  font-family: 'Roboto', sans-serif;
-  background-image: url("../img/android.png");
+  background-position: -790px 0;
 }
 .platform-android .device .device-content {
  font-size: 18px;
--- a/docs/assets/css/docs.min.css
+++ b/docs/assets/css/docs.min.css
--- a/docs/assets/css/pygments-manni.css
+++ b/docs/assets/css/pygments-manni.css
@ -0,0 +1,66 @@
+.hll { background-color: #ffffcc }
+ /*{ background: #f0f3f3; }*/
+.c { color: #999; } /* Comment */
+.err { color: #AA0000; background-color: #FFAAAA } /* Error */
+.k { color: #006699; } /* Keyword */
+.o { color: #555555 } /* Operator */
+.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
+.cp { color: #009999 } /* Comment.Preproc */
+.c1 { color: #999; } /* Comment.Single */
+.cs { color: #999; } /* Comment.Special */
+.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
+.ge { font-style: italic } /* Generic.Emph */
+.gr { color: #FF0000 } /* Generic.Error */
+.gh { color: #003300; } /* Generic.Heading */
+.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
+.go { color: #AAAAAA } /* Generic.Output */
+.gp { color: #000099; } /* Generic.Prompt */
+.gs { } /* Generic.Strong */
+.gu { color: #003300; } /* Generic.Subheading */
+.gt { color: #99CC66 } /* Generic.Traceback */
+.kc { color: #006699; } /* Keyword.Constant */
+.kd { color: #006699; } /* Keyword.Declaration */
+.kn { color: #006699; } /* Keyword.Namespace */
+.kp { color: #006699 } /* Keyword.Pseudo */
+.kr { color: #006699; } /* Keyword.Reserved */
+.kt { color: #007788; } /* Keyword.Type */
+.m { color: #FF6600 } /* Literal.Number */
+.s { color: #d44950 } /* Literal.String */
+.na { color: #4f9fcf } /* Name.Attribute */
+.nb { color: #336666 } /* Name.Builtin */
+.nc { color: #00AA88; } /* Name.Class */
+.no { color: #336600 } /* Name.Constant */
+.nd { color: #9999FF } /* Name.Decorator */
+.ni { color: #999999; } /* Name.Entity */
+.ne { color: #CC0000; } /* Name.Exception */
+.nf { color: #CC00FF } /* Name.Function */
+.nl { color: #9999FF } /* Name.Label */
+.nn { color: #00CCFF; } /* Name.Namespace */
+.nt { color: #2f6f9f; } /* Name.Tag */
+.nv { color: #003333 } /* Name.Variable */
+.ow { color: #000000; } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #FF6600 } /* Literal.Number.Float */
+.mh { color: #FF6600 } /* Literal.Number.Hex */
+.mi { color: #FF6600 } /* Literal.Number.Integer */
+.mo { color: #FF6600 } /* Literal.Number.Oct */
+.sb { color: #CC3300 } /* Literal.String.Backtick */
+.sc { color: #CC3300 } /* Literal.String.Char */
+.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
+.s2 { color: #CC3300 } /* Literal.String.Double */
+.se { color: #CC3300; } /* Literal.String.Escape */
+.sh { color: #CC3300 } /* Literal.String.Heredoc */
+.si { color: #AA0000 } /* Literal.String.Interpol */
+.sx { color: #CC3300 } /* Literal.String.Other */
+.sr { color: #33AAAA } /* Literal.String.Regex */
+.s1 { color: #CC3300 } /* Literal.String.Single */
+.ss { color: #FFCC33 } /* Literal.String.Symbol */
+.bp { color: #336666 } /* Name.Builtin.Pseudo */
+.vc { color: #003333 } /* Name.Variable.Class */
+.vg { color: #003333 } /* Name.Variable.Global */
+.vi { color: #003333 } /* Name.Variable.Instance */
+.il { color: #FF6600 } /* Literal.Number.Integer.Long */
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
--- a/docs/assets/css/pygments.css
+++ b/docs/assets/css/pygments.css
@ -1,61 +0,0 @@
-.hll { background-color: #ffffcc }
-.c { color: #999988; font-style: italic } /* Comment */
-.err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.k { color: #000000; font-weight: bold } /* Keyword */
-.o { color: #000000; font-weight: bold } /* Operator */
-.cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
-.c1 { color: #999988; font-style: italic } /* Comment.Single */
-.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.ge { color: #000000; font-style: italic } /* Generic.Emph */
-.gr { color: #aa0000 } /* Generic.Error */
-.gh { color: #999999 } /* Generic.Heading */
-.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.go { color: #888888 } /* Generic.Output */
-.gp { color: #555555 } /* Generic.Prompt */
-.gs { font-weight: bold } /* Generic.Strong */
-.gu { color: #aaaaaa } /* Generic.Subheading */
-.gt { color: #aa0000 } /* Generic.Traceback */
-.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
-.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
-.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
-.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
-.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
-.kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.m { color: #009999 } /* Literal.Number */
-.s { color: #d01040 } /* Literal.String */
-.na { color: #008080 } /* Name.Attribute */
-.nb { color: #0086B3 } /* Name.Builtin */
-.nc { color: #445588; font-weight: bold } /* Name.Class */
-.no { color: #008080 } /* Name.Constant */
-.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
-.ni { color: #800080 } /* Name.Entity */
-.ne { color: #990000; font-weight: bold } /* Name.Exception */
-.nf { color: #990000; font-weight: bold } /* Name.Function */
-.nl { color: #990000; font-weight: bold } /* Name.Label */
-.nn { color: #555555 } /* Name.Namespace */
-.nt { color: #000080 } /* Name.Tag */
-.nv { color: #008080 } /* Name.Variable */
-.ow { color: #000000; font-weight: bold } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #009999 } /* Literal.Number.Float */
-.mh { color: #009999 } /* Literal.Number.Hex */
-.mi { color: #009999 } /* Literal.Number.Integer */
-.mo { color: #009999 } /* Literal.Number.Oct */
-.sb { color: #d01040 } /* Literal.String.Backtick */
-.sc { color: #d01040 } /* Literal.String.Char */
-.sd { color: #d01040 } /* Literal.String.Doc */
-.s2 { color: #d01040 } /* Literal.String.Double */
-.se { color: #d01040 } /* Literal.String.Escape */
-.sh { color: #d01040 } /* Literal.String.Heredoc */
-.si { color: #d01040 } /* Literal.String.Interpol */
-.sx { color: #d01040 } /* Literal.String.Other */
-.sr { color: #009926 } /* Literal.String.Regex */
-.s1 { color: #d01040 } /* Literal.String.Single */
-.ss { color: #990073 } /* Literal.String.Symbol */
-.bp { color: #999999 } /* Name.Builtin.Pseudo */
-.vc { color: #008080 } /* Name.Variable.Class */
-.vg { color: #008080 } /* Name.Variable.Global */
-.vi { color: #008080 } /* Name.Variable.Instance */
-.il { color: #009999 } /* Literal.Number.Integer.Long */
--- a/docs/assets/img/android.png
+++ b/docs/assets/img/android.png
--- a/docs/assets/img/device-sprite.png
+++ b/docs/assets/img/device-sprite.png
--- a/docs/assets/img/iphone5c.png
+++ b/docs/assets/img/iphone5c.png
--- a/docs/assets/img/iphone5s.png
+++ b/docs/assets/img/iphone5s.png
--- a/docs/assets/img/slide-1.jpg
+++ b/docs/assets/img/slide-1.jpg
--- a/docs/assets/img/slide-1.png
+++ b/docs/assets/img/slide-1.png
--- a/docs/assets/img/slide-2.jpg
+++ b/docs/assets/img/slide-2.jpg
--- a/docs/assets/img/slide-2.png
+++ b/docs/assets/img/slide-2.png
--- a/docs/assets/img/slide-3.jpg
+++ b/docs/assets/img/slide-3.jpg
--- a/docs/assets/img/slide-3.png
+++ b/docs/assets/img/slide-3.png
--- a/docs/assets/js/docs.min.js
+++ b/docs/assets/js/docs.min.js
--- a/docs/components.html
+++ b/docs/components.html
@ -57,28 +57,28 @@ title: Components &middot; 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>
+      <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>

-      <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 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>
+      <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>

-      <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 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>
--- a/docs/dist/ratchet-theme-android.css
+++ b/docs/dist/ratchet-theme-android.css
@ -30,12 +30,21 @@ a:active {
  padding-top: 50px;
 }

+.bar-header-secondary ~ .content {
+  padding-top: 100px;
+}
+
 .bar-tab ~ .content {
+  padding-top: 50px;
+  padding-bottom: 0;
+}
+
+.bar-footer ~ .content {
  padding-bottom: 50px;
 }

-.bar-header-secondary ~ .content {
-  padding-top: 100px;
+.bar-footer-secondary ~ .content {
+  padding-bottom: 100px;
 }

 .btn {
@ -525,10 +534,12 @@ textarea,
  content: "On";
 }

+.navigate-left:after,
 .push-left:after {
  content: '';
 }

+.navigate-right:after,
 .push-right:after {
  content: '';
 }
--- a/docs/dist/ratchet.css
+++ b/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';
--- a/docs/dist/ratchet.min.css
+++ b/docs/dist/ratchet.min.css
--- a/docs/dist/template.html
+++ b/docs/dist/template.html
@ -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>
--- a/docs/examples.html
+++ b/docs/examples.html
@ -21,7 +21,7 @@ title: Examples &middot; Ratchet
 <div class="container">
  <div class="column-group">
    <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 apps as intended.</p>
+      <p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device to see the apps as intended.</p>
      
      <div class="docs-example-group">
        <div class="example-wrap">
--- a/docs/examples/app-android-notes/index.html
+++ b/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">
+        <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">
--- a/docs/examples/app-ios-mail/inbox.html
+++ b/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>
--- a/docs/examples/app-ios-mail/index.html
+++ b/docs/examples/app-ios-mail/index.html
@ -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
--- a/docs/examples/app-movies/index.html
+++ b/docs/examples/app-movies/index.html
@ -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
@ -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 -->
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@ -55,7 +55,7 @@ title: Getting started &middot; Ratchet



-      <div class="compontent">
+      <div class="docs-section">
        <h2 id="pageLayout">Basic template</h2>
        <p class="lead">Use this basic template to get your app started.</p>
 {% highlight html %}
@ -118,6 +118,25 @@ title: Getting started &middot; Ratchet
 </html>
 {% endhighlight %}
      </div>
+
+
+
+      <div class="docs-section">
+        <h2>Community</h2>
+        <p class="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> (which includes Ratchet releases and news).</p>
+          </li>
+          <li>
+            <p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</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>

    <div class="column units-2 lg-units-4">
--- a/package.json
+++ b/package.json
@ -20,15 +20,18 @@
    "url": "https://github.com/twbs/ratchet/issues"
  },
  "license": "MIT",
+  "scripts": {
+    "test": "grunt test"
+  },
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "~0.5.0",
-    "grunt-contrib-cssmin": "~0.8.0",
+    "grunt-contrib-cssmin": "~0.9.0",
    "grunt-contrib-jshint": "~0.8.0",
-    "grunt-contrib-nodeunit": "~0.3.0",
-    "grunt-contrib-sass": "~0.7.1",
-    "grunt-contrib-uglify": "~0.3.0",
+    "grunt-contrib-nodeunit": "~0.3.2",
+    "grunt-contrib-sass": "~0.7.2",
+    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-html-validation": "~0.1.13",
    "grunt-jekyll": "~0.4.1",
--- a/sass/buttons.scss
+++ b/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;
--- a/sass/docs.scss
+++ b/sass/docs.scss
@ -302,7 +302,7 @@ body {

  .btn {
    display: block;
-    padding: 15px 60px 16px;
+    padding: 15px 90px 16px;
    font-size: 18px;
    margin-bottom: 0;
    color: #0a1855;
@ -438,11 +438,20 @@ body {

 // Wrap each section of the docs
 .docs-section {
-  margin-bottom: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #ddd;
 }
+.docs-section:last-child {
+  border-bottom: 0;
+}
+
+// Docs modules
+@media screen and (min-width: 768px) {
+  .docs-module {
+    margin-top: 35px;
+  }
+}

 // Docs modules
 .docs-module {
@ -690,11 +699,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 +801,8 @@ code {
  }
 }
 #blockButtonsInDevice .btn-block {
-  margin: 10px;
+  width: 300px;
+  margin: 10px auto;
 }

 //Segmented Control
@ -894,9 +907,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: 0 0;
    @include transition(background-image .1s linear);

    &.device-fixed {
@ -1070,7 +1084,7 @@ hr {
  @import "theme-ios.scss";

  .device {
-    background-image: url("../img/iphone5s.png");
+    background-position: -395px 0;

    .device-content {
      background-color: #efeff4;
@ -1082,7 +1096,7 @@ hr {

  .device {
    font-family: 'Roboto', sans-serif;
-    background-image: url("../img/android.png");
+    background-position: -790px 0;

    .device-content {
      font-size: 18px;
--- a/sass/push.scss
+++ b/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';
 }
--- a/sass/table-views.scss
+++ b/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,
--- a/sass/theme-android.scss
+++ b/sass/theme-android.scss
@ -66,13 +66,19 @@ a {
 .bar-nav ~ .content {
  padding-top: $bar-base-height;
 }
-.bar-tab ~ .content {
-  padding-bottom: $bar-tab-height;
-}
 .bar-header-secondary ~ .content {
  padding-top: $bar-base-height*2;
 }
-
+.bar-tab ~ .content {
+  padding-top: $bar-tab-height;
+  padding-bottom: 0;
+}
+.bar-footer ~ .content {
+  padding-bottom: $bar-base-height;
+}
+.bar-footer-secondary ~ .content {
+  padding-bottom: ($bar-base-height*2);
+}

 // Buttons
 // --------------------------------------------------
@ -697,9 +703,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: '';
 }