first commit

12 years ago · 5bfd3fa14d
63 changed files with 6318 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,37 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+*.sass-cache
+
+# OS or Editor folders
+.DS_Store
+._*
+Thumbs.db
+.cache
+.project
+.settings
+.tmproj
+*.esproj
+nbproject
+*.sublime-project
+*.sublime-workspace
+
+# Komodo
+*.komodoproject
+.komodotools
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+.idea
+node_modules
+dist
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,151 @@
+# Contributing to Ratchet
+
+## Types of issues<a name="types-of-issues"></a>
+
+The GitHub issue tracker should only be used for one of the
+following:
+
+ **Bugs** &mdash; when a feature of the project has been _identified as
+  broken_.
+
+ **Feature requests** &mdash; when you ask for a _new feature_ to be added to a
+  project.
+
+ **Contribution enquiries** &mdash; when you want to discuss whether a _new
+  feature_ or _change_ would be accepted in a project before you begin
+  development work on it.
+
+These are some things that don't belong in the issue tracker:
+
+ **Please avoid personal support requests.** We cannot
+  provide personal support for implementation issues. The best place for help
+  is generally going to be StackOverflow, Twitter, IRC, etc.
+
+ **Please avoid derailing issues.** Keep the discussion on topic and respect
+  the opinions of others.
+
+## Bugs<a name="bugs"></a>
+
+A bug is a _demonstrable problem_ that is caused by the code in the
+repository.
+
+If you've come across a problem with the code and you're letting us know about
+it, _thank you_. We appreciate your time and the effort you're making to help
+improve the code for everyone else!
+
+Please read the following guidelines for reporting bugs:
+
+1. **Use the GitHub issue search** &mdash; check if the issue has already been
+   reported. If it has been, please comment on the existing issue.
+
+2. **Check if the issue has been fixed** &mdash; the latest `master` or
+   development branch may already contain a fix.
+
+3. **Isolate the demonstrable problem** &mdash; make sure that the code in the
+   project's repository is _definitely_ responsible for the issue. Create a
+   [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an
+   extremely simple and immediately viewable example of the issue.
+
+4. **Include a live example** &mdash; provide a link to your reduced test case
+   when appropriate (e.g. if the issue is related to front-end technologies).
+   Please use [jsFiddle](http://jsfiddle.net) to host examples.
+
+Please try to be as detailed as possible in your report too. What is your
+environment? What steps will reproduce the issue? What browser(s) and OS
+experience the problem? What would you expect to be the outcome? All these
+details will help me and others to assess and fix any potential bugs.
+
+### Example of a good bug report:
+
+> Short and descriptive title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+A good bug report shouldn't leave us needing to chase you up to get further
+information that is required to assess or fix the bug.
+
+## Feature requests<a name="feature-requests"></a>
+
+Feature requests are welcome! Please provide links to examples or articles that
+help to illustrate the specifics of a feature you're requesting. The more
+detail, the better. It will help us to decide whether the feature is something I
+agree should become part of the project.
+
+## Contribution enquiries<a name="enquiries"></a>
+
+Contribution enquiries should take place before any significant pull request,
+otherwise you risk spending a lot of time working on something that we might not
+want to pull into the repository.
+
+In this regard, some contribution enquires may be feature requests that you
+would like to have a go at implementing yourself if they are wanted. Other
+enquiries might revolve around refactoring code or porting a project to
+different languages.
+
+## Pull requests<a name="pull-requests"></a>
+
+Good pull requests - patches, improvements, new features - are a fantastic
+help.
+
+If you've spotted any small, obvious errors and want to help out by patching it,
+that will be much appreciated.
+
+If your contribution involves a significant amount of work or substantial
+changes to any part of the project, please open a "contribution enquiry" issue
+first to check that the work is wanted or matches the goals of the project.
+
+All pull requests should remain focused in scope and avoid containing unrelated
+commits.
+
+Please follow this process; it's the best way to get your work included in the
+project:
+
+1. [Fork](http://help.github.com/fork-a-repo/) the project.
+
+2. Clone your fork (`git clone
+   git@github.com:<your-username>/<repo-name>.git`).
+
+3. Add an `upstream` remote (`git remote add upstream
+   git://github.com/<upsteam-owner>/<repo-name>.git`).
+
+4. Get the latest changes from upstream (e.g. `git pull upstream
+   <dev-branch>`).
+
+5. Create a new topic branch to contain your feature, change, or fix (`git
+   checkout -b <topic-branch-name>`).
+
+6. Make sure that your changes adhere to the current coding conventions used
+   throughout the project - indentation, accurate comments, etc.
+
+7. Commit your changes in logical chunks; use git's [interactive
+   rebase](https://help.github.com/articles/interactive-rebase) feature to tidy
+   up your commits before making them public. Please adhere to these [git commit
+   message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your pull request is unlikely be merged into the main project.
+
+8. Locally merge (or rebase) the upstream branch into your topic branch.
+
+9. Push your topic branch up to your fork (`git push origin
+   <topic-branch-name>`).
+
+10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a
+    clear title and description. Please mention which browsers you tested in.
+
+If you have any other questions about contributing, please feel free to contact
+us.
+
+## Special thanks to @necolas
+
+For writing the original [issue-guidelines](https://github.com/necolas/issue-guidelines/) from which these were adapted.
--- a/7
+++ b/7
@ -0,0 +1,7 @@
+Copyright (c) 2012 DHG, CONNORS, FAT and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/63
+++ b/63
@ -0,0 +1,63 @@
+#
+# BUILD LIB FILES
+#
+
+build:
+	mkdir -p dist
+	cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css
+	cat lib/js/*.js > ./dist/ratchet.tmp.js
+	@echo "/**\n * ==================================\n * Ratchet v1.0.0\n * Licensed under The MIT License\n * http://opensource.org/licenses/MIT\n * ==================================\n */\n" > ./dist/copywrite.txt
+	cat ./dist/copywrite.txt ./dist/ratchet.tmp.js  > ./dist/ratchet.js
+	cat ./dist/copywrite.txt ./dist/ratchet.tmp.css > ./dist/ratchet.css
+	rm  ./dist/ratchet.tmp.css ./dist/ratchet.tmp.js ./dist/copywrite.txt
+
+
+#
+# START DOCS SERVER
+#
+
+docs:
+	open http://localhost:8000/docs
+	python -m SimpleHTTPServer
+
+
+#
+# BUILDS GH-PAGES BRANCH
+#
+
+gh-pages: build
+	mkdir -p gh-pages
+	cp -r docs/ gh-pages/
+	cp -r lib gh-pages/lib
+	cp -r dist gh-pages/dist
+	git fetch origin
+	git checkout gh-pages
+	sed -i -e 's/\.\.\//\.\//g' gh-pages/index.html
+	sed -i -e 's/\.\.\//\.\//g' gh-pages/one.html
+	sed -i -e 's/\.\.\//\.\//g' gh-pages/two.html
+	rm -rf ./css
+	rm -rf ./img
+	rm -rf ./js
+	rm -rf ./lib
+	mv gh-pages/* .
+	rm -rf ./*-e
+	rm -rf gh-pages
+
+#
+# START DEMO SERVER
+#
+
+demo: build_demo
+	open http://localhost:8000/test/app
+	python -m SimpleHTTPServer
+
+#
+# START TEST SERVER
+#
+
+test:
+	open http://localhost:8000/test
+	python -m SimpleHTTPServer
+
+
+.PHONY: docs demo test gh-pages
--- a/README.md
+++ b/README.md
@ -0,0 +1,56 @@
+# Ratchet
+
+Prototype mobile apps with simple HTML, CSS and JS components.
+
+## Getting Started
+
+- Clone the repo `git clone git@github.com:maker/ratchet.git` or just [download]() the bundled CSS and JS
+- [Read the docs](http://maker.github.com/ratchet) to learn about the components and how to get a prototype on your phone
+- We will have example apps to check out very soon!
+
+## Support
+
+Ratchet was developed to support iOS 5+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@goRatchet](http://www.twitter.com/goratchet).
+
+## Reporting bugs & contributing
+
+Please file a Github issue to [report a bug](http://github.com/maker/ratchet/issues). When reporting a bug, be sure to follow the [contributor guidelines](https://github.com/maker/ratchet/blob/master/CONTRIBUTING.md).
+
+## Future features
+
+Ratchet is just getting started. Here are some of the immediate features we're thinking about:
+
+- Shelf (exposable left hand navigation a la Path or Facebook)
+- Gridviews
+- Notifications
+- Slide control
+- More list views options
+- Improved active states (especially for lists)
+- Docking list dividers
+- Touch library for richer touch events (swipes, long press, etc)
+- Autocomplete
+- Hiding title bar (hides with scroll)
+
+Even these are just the short-term goals though. We eventually want to extend Ratchet beyond the prototying for iPhone and create HTML/CSS/JS components for iPad and Android devices. Our dream is that Ratchet becomes the best way to create mobile experiences with web standard languages.
+
+## Authors
+
+Dave Gamache
+
+- http://twitter.com/dhg
+- http://github.com/dhgamache
+
+Connor Sears
+
+- http://twitter.com/connors
+- http://github.com/connors
+
+Jacob Thornton
+
+- http://twitter.com/fat
+- http://github.com/fat
+
+
+## License
+
+Ratchet is licensed under the [MIT License](http://opensource.org/licenses/MIT).
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
--- a/docs/css/prettify.css
+++ b/docs/css/prettify.css
@ -0,0 +1 @@
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#999}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:teal}.atv{color:#d14}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/img/apple-touch-icon-114x114.png
+++ b/docs/img/apple-touch-icon-114x114.png
--- a/docs/img/apple-touch-icon-57x57.png
+++ b/docs/img/apple-touch-icon-57x57.png
--- a/docs/img/apple-touch-icon-72x72.png
+++ b/docs/img/apple-touch-icon-72x72.png
--- a/docs/img/avatar-connors.png
+++ b/docs/img/avatar-connors.png
--- a/docs/img/avatar-dhg.png
+++ b/docs/img/avatar-dhg.png
--- a/docs/img/avatar-fat.png
+++ b/docs/img/avatar-fat.png
--- a/docs/img/cubes.png
+++ b/docs/img/cubes.png
--- a/docs/img/header-bg.jpg
+++ b/docs/img/header-bg.jpg
--- a/docs/img/header-bg.png
+++ b/docs/img/header-bg.png
--- a/docs/img/icon-hamburger.png
+++ b/docs/img/icon-hamburger.png
--- a/docs/img/icon-home.png
+++ b/docs/img/icon-home.png
--- a/docs/img/icon-messages.png
+++ b/docs/img/icon-messages.png
--- a/docs/img/icon-profile.png
+++ b/docs/img/icon-profile.png
--- a/docs/img/icon-settings.png
+++ b/docs/img/icon-settings.png
--- a/docs/img/icon-share.png
+++ b/docs/img/icon-share.png
--- a/docs/img/iphone-forshow.png
+++ b/docs/img/iphone-forshow.png
--- a/docs/img/iphone.png
+++ b/docs/img/iphone.png
--- a/docs/img/noise.png
+++ b/docs/img/noise.png
--- a/docs/img/slide-1.jpg
+++ b/docs/img/slide-1.jpg
--- a/docs/img/slide-2.jpg
+++ b/docs/img/slide-2.jpg
--- a/docs/img/slide-3.jpg
+++ b/docs/img/slide-3.jpg
--- a/docs/index.html
+++ b/docs/index.html
--- a/docs/js/docs.js
+++ b/docs/js/docs.js
@ -0,0 +1,128 @@
+$(function() {
+
+  var doc;
+  var iphone;
+  var windowWidth;
+  var windowHeight;
+  var pageHeight;
+  var contentPadding;
+  var footerHeight;
+  var noticeBanner;
+  var componentsList;
+  var navComponentLinks;
+  var contentSection;
+  var currentActive;
+  var topCache;
+  var eventListeners;
+
+  prettyPrint();
+
+  var initialize = function  () {
+    currentActive        = 0;
+    topCache             = [];
+    win                  = $(window);
+    doc                  = $(document);
+    bod                  = $(document.body)
+    iphone               = iphone || $('.iphone');
+    noticeBanner         = $('.notice-banner');
+    navComponentLinks    = $('.nav-components-link');
+    componentsList       = $('.components-list');
+    componentLinks       = $('.component-example a');
+    contentSection       = $('.component');
+    topCache             = contentSection.map(function () { return $(this).offset().top })
+    windowHeight         = $(window).height() / 3
+    pageHeight           = $(document).height();
+    contentPadding       = parseInt($('.docs-content').css('padding-bottom'));
+    footerHeight         = $('.docs-footer').outerHeight(false);
+
+    iphone.initialLeft   = iphone.offset().left;
+    iphone.initialTop    = iphone.initialTop || iphone.offset().top;
+    iphone.dockingOffset = ($(window).height() + 20 + $('.docs-masthead').height() - iphone.height())/2;
+    checkDesktopContent();
+    calculateScroll();
+
+    if (!eventListeners) addEventListeners();
+  }
+
+  var addEventListeners = function () {
+    eventListeners = true;
+
+    noticeBanner.on('click', function () {
+      $(this).hide();
+    });
+
+    iphone.on('click', function (e) {
+      e.preventDefault();
+    });
+
+    navComponentLinks.click(function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      componentsList.toggleClass('active');
+    })
+
+    doc.on('click', function () {
+      componentsList.removeClass('active');
+    })
+
+    win.on('scroll', calculateScroll);
+  }
+
+  var checkDesktopContent = function () {
+    windowWidth = $(window).width();
+    if (windowWidth <= 768) {
+      var content = $('.content')
+      if (content.length > 1) {
+        $(content[0]).remove()
+      }
+    }
+  }
+
+  var calculateScroll = function() {
+    // if small screen don't worry about this
+    if (windowWidth <= 768) return
+
+    // Save scrollTop value
+    var contentSectionItem;
+    var currentTop = win.scrollTop();
+
+    // If page is scrolled to bottom near footers
+    if(pageHeight - currentTop < footerHeight + contentPadding + 1400) {
+      iphone[0].className = "iphone iphone-bottom";
+      iphone[0].setAttribute('style','')
+    } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset) {
+      iphone[0].className = "iphone iphone-fixed";
+      iphone.css({top: iphone.dockingOffset})
+    } else {
+      iphone[0].className = "iphone"
+      iphone[0].setAttribute('style','')
+    }
+
+    // Injection of components into phone
+    for (var l = contentSection.length; l--;) {
+      if ((topCache[l] - currentTop) < windowHeight) {
+        if (currentActive == l) return;
+        currentActive = l;
+        bod.find('.component.active').removeClass('active');
+        contentSectionItem = $(contentSection[l])
+        contentSectionItem.addClass('active')
+        if(contentSectionItem.attr('id')) {
+          iphone.attr("id", contentSectionItem.attr('id') + "InPhone");
+        } else {
+          iphone.attr("id", "")
+        }
+        if (!contentSectionItem.hasClass('informational')) {
+          updateContent(contentSectionItem.find('.prettyprint').not('.js').text())
+        }
+        break
+      }
+    }
+
+    function updateContent(content) {
+      $('#iwindow').html(content);
+    }
+  }
+
+  $(window).on('load resize', initialize);
+  $(window).on('load', function () { new FingerBlast('.iphone-content'); });
+});
--- a/docs/js/fingerblast.js
+++ b/docs/js/fingerblast.js
@ -0,0 +1,221 @@
+// FINGERBLAST.js
+// --------------
+// Adapted from phantom limb by brian cartensen
+
+function FingerBlast(element) {
+  this.element = typeof element == 'string' ? document.querySelector(element) : element;
+  this.listen();
+}
+
+FingerBlast.prototype = {
+  x: NaN,
+  y: NaN,
+
+  startDistance: NaN,
+  startAngle:    NaN,
+
+  mouseIsDown: false,
+
+  listen: function () {
+
+    var activate = this.activate.bind(this);
+    var deactivate = this.deactivate.bind(this);
+
+    function contains (element, ancestor) {
+      var descendants, index, descendant;
+      if ("compareDocumentPosition" in ancestor) {
+        return !!(ancestor.compareDocumentPosition(element) & 16);
+      } else if ("contains" in ancestor) {
+        return ancestor != element && ancestor.contains(element);
+      } else {
+        for (descendants = ancestor.getElementsByTagName("*"), index = 0; descendant = descendants[index++];) {
+          if (descendant == element) return true;
+        }
+        return false;
+      }
+    }
+
+    this.element.addEventListener('mouseover', function (e) {
+      var target = e.relatedTarget;
+      if (target != this && !contains(target, this)) activate();
+    });
+
+    this.element.addEventListener("mouseout", function (e) {
+      var target = e.relatedTarget;
+      if (target != this && !contains(target, this)) deactivate(e);
+    });
+  },
+
+  activate: function () {
+    if (this.active) return;
+    this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true);
+    this.element.addEventListener('mousemove', (this.touchMove  = this.touchMove.bind(this)),  true);
+    this.element.addEventListener('mouseup',   (this.touchEnd   = this.touchEnd.bind(this)),   true);
+    this.element.addEventListener('click',     (this.click      = this.click.bind(this)),      true);
+    this.active = true;
+  },
+
+  deactivate: function (e) {
+    this.active = false;
+    if (this.mouseIsDown) this.touchEnd(e);
+    this.element.removeEventListener('mousedown', this.touchStart, true);
+    this.element.removeEventListener('mousemove', this.touchMove,  true);
+    this.element.removeEventListener('mouseup',   this.touchEnd,   true);
+    this.element.removeEventListener('click',     this.click,      true);
+  },
+
+  click: function (e) {
+    if (e.synthetic) return;
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
+  touchStart: function (e) {
+    if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) return;
+
+    this.mouseIsDown = true;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.fireTouchEvents('touchstart', e);
+  },
+
+  touchMove: function (e) {
+    if (e.synthetic) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.move(e.clientX, e.clientY);
+
+    if (this.mouseIsDown) this.fireTouchEvents('touchmove', e);
+  },
+
+  touchEnd: function (e) {
+    if (e.synthetic) return;
+
+    this.mouseIsDown = false;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.fireTouchEvents('touchend', e);
+
+    if (!this.target) return;
+
+    // Mobile Safari moves all the mouse events to fire after the touchend event.
+    this.target.dispatchEvent(this.createMouseEvent('mouseover', e));
+    this.target.dispatchEvent(this.createMouseEvent('mousemove', e));
+    this.target.dispatchEvent(this.createMouseEvent('mousedown', e));
+  },
+
+  fireTouchEvents: function (eventName, originalEvent) {
+    var events   = [];
+    var gestures = [];
+
+    if (!this.target) return;
+
+    // Convert "ontouch*" properties and attributes to listeners.
+    var onEventName = 'on' + eventName;
+
+    if (onEventName in this.target) {
+      console.warn('Converting `' + onEventName + '` property to event listener.', this.target);
+      this.target.addEventListener(eventName, this.target[onEventName], false);
+      delete this.target[onEventName];
+    }
+
+    if (this.target.hasAttribute(onEventName)) {
+      console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target);
+      var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName));
+      this.target.addEventListener(eventName, handler, false);
+      this.target.removeAttribute(onEventName);
+    }
+
+    // Set up a new event with the coordinates of the finger.
+    var touch = this.createMouseEvent(eventName, originalEvent);
+
+    events.push(touch);
+
+    // Figure out scale and rotation.
+    if (events.length > 1) {
+      var x = events[0].pageX - events[1].pageX;
+      var y = events[0].pageY - events[1].pageY;
+
+      var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+      var angle = Math.atan2(x, y) * (180 / Math.PI);
+
+      var gestureName = 'gesturechange';
+
+      if (eventName === 'touchstart') {
+        gestureName = 'gesturestart';
+        this.startDistance = distance;
+        this.startAngle = angle;
+      }
+
+      if (eventName === 'touchend') gestureName = 'gestureend';
+
+      events.forEach(function(event) {
+        var gesture = this.createMouseEvent.call(event._finger, gestureName, event);
+        gestures.push(gesture);
+      }.bind(this));
+
+      events.concat(gestures).forEach(function(event) {
+        event.scale = distance / this.startDistance;
+        event.rotation = this.startAngle - angle;
+      });
+    }
+
+    // Loop through the events array and fill in each touch array.
+    events.forEach(function(touch) {
+      touch.touches = events.filter(function(e) {
+        return ~e.type.indexOf('touch') && e.type !== 'touchend';
+      });
+
+      touch.changedTouches = events.filter(function(e) {
+        return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target;
+      });
+
+      touch.targetTouches = touch.changedTouches.filter(function(e) {
+        return ~e.type.indexOf('touch') && e.type !== 'touchend';
+      });
+    });
+
+    // Then fire the events.
+    events.concat(gestures).forEach(function(event, i) {
+      event.identifier = i;
+      event._finger.target.dispatchEvent(event);
+    });
+  },
+
+  createMouseEvent: function (eventName, originalEvent) {
+    var e = document.createEvent('MouseEvent');
+
+    e.initMouseEvent(eventName, true, true,
+      originalEvent.view, originalEvent.detail,
+      this.x || originalEvent.screenX, this.y || originalEvent.screenY,
+      this.x || originalEvent.clientX, this.y || originalEvent.clientY,
+      originalEvent.ctrlKey, originalEvent.shiftKey,
+      originalEvent.altKey, originalEvent.metaKey,
+      originalEvent.button, this.target || originalEvent.relatedTarget
+    );
+
+    e.synthetic = true;
+    e._finger   = this;
+
+    return e;
+  },
+
+  move: function (x, y) {
+    if (isNaN(x) || isNaN(y)) {
+      this.target = null;
+    } else {
+      this.x = x;
+      this.y = y;
+
+      if (!this.mouseIsDown) {
+        this.target = document.elementFromPoint(x, y);
+      }
+    }
+  }
+};
--- a/docs/js/prettify.js
+++ b/docs/js/prettify.js
@ -0,0 +1,28 @@
+var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
+(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
+[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
+f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
+(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
+{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
+t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
+"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
+l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
+q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
+"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
+a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
+for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
+m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
+a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
+j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
+"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
+H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
+J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
+I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
+["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
+/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
+["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
+hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
+!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
+250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
+PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
--- a/docs/one.html
+++ b/docs/one.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ratchet</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="shortcut icon" href="favicon.ico"/>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="stylesheet" href="../lib/css/base.css">
+    <link rel="stylesheet" href="../lib/css/bars.css">
+    <link rel="stylesheet" href="../lib/css/lists.css">
+    <link rel="stylesheet" href="../lib/css/forms.css">
+    <link rel="stylesheet" href="../lib/css/buttons.css">
+    <link rel="stylesheet" href="../lib/css/chevrons.css">
+    <link rel="stylesheet" href="../lib/css/counts.css">
+    <link rel="stylesheet" href="../lib/css/segmented-controllers.css">
+    <link rel="stylesheet" href="../lib/css/popovers.css">
+    <link rel="stylesheet" href="../lib/css/sliders.css">
+    <link rel="stylesheet" href="../lib/css/toggles.css">
+    <link rel="stylesheet" href="../lib/css/push.css">
+    <link rel="stylesheet" href="css/docs.css">
+    <link rel="stylesheet" href="css/prettify.css">
+    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <script type="text/javascript" src="//use.typekit.net/gwz1sef.js"></script>
+    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+    <style>
+      .iphone [class*="bar"] {
+        position: absolute;
+      }
+    </style>
+
+    <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
+  </head>
+  <body ontouchstart="">
+
+    <div class="content">
+      <ul class="list">
+        <li>
+          <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
+              Load new page with push
+          </a>
+          <span class="chevron"></span>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>
--- a/docs/two.html
+++ b/docs/two.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ratchet</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="shortcut icon" href="favicon.ico"/>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="stylesheet" href="../lib/css/base.css">
+    <link rel="stylesheet" href="../lib/css/bars.css">
+    <link rel="stylesheet" href="../lib/css/lists.css">
+    <link rel="stylesheet" href="../lib/css/forms.css">
+    <link rel="stylesheet" href="../lib/css/buttons.css">
+    <link rel="stylesheet" href="../lib/css/chevrons.css">
+    <link rel="stylesheet" href="../lib/css/counts.css">
+    <link rel="stylesheet" href="../lib/css/segmented-controllers.css">
+    <link rel="stylesheet" href="../lib/css/popovers.css">
+    <link rel="stylesheet" href="../lib/css/sliders.css">
+    <link rel="stylesheet" href="../lib/css/toggles.css">
+    <link rel="stylesheet" href="../lib/css/push.css">
+    <link rel="stylesheet" href="css/docs.css">
+    <link rel="stylesheet" href="css/prettify.css">
+    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <script type="text/javascript" src="//use.typekit.net/gwz1sef.js"></script>
+    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+    <style>
+      .iphone [class*="bar"] {
+        position: absolute;
+      }
+    </style>
+
+    <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
+  </head>
+  <body ontouchstart="">
+
+    <div class="content">
+        <ul class="list">
+            <li><a href="one.html" data-transition="slide-out">Go back</a>, or try your browser back button.</li>
+        </ul>
+    </div>
+  </body>
+</html>
--- a/lib/css/bars.css
+++ b/lib/css/bars.css
@ -0,0 +1,332 @@
+/* General bar styles
+-------------------------------------------------- */
+
+[class*="bar-"] {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  height: 44px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
+/* Modifier class to dock any bar below .bar-title */
+.bar-header-secondary {
+  top: 45px;
+}
+
+/* Modifier class to dock any bar to bottom of viewport */
+.bar-footer {
+  bottom: 0;
+}
+
+/* Generic bar for wrapping buttons, segmented controllers, etc. */
+.bar-standard {
+  background-color: #f2f2f2;
+  background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
+  background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
+  border-bottom: 1px solid #aaa;
+  box-shadow: inset 0 1px 1px -1px #fff;
+}
+
+/* Flip border position to top for footer bars */
+.bar-footer.bar-standard,
+.bar-footer-secondary.bar-standard {
+  border-top: 1px solid #aaa;
+  border-bottom-width: 0;
+}
+
+/* Title bar
+-------------------------------------------------- */
+
+/* Bar docked to top of viewport for showing page title and actions */
+.bar-title {
+  top: 0;
+  display: -webkit-box;
+  display: box;
+  background-color: #1eb0e9;
+  background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
+  background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
+  border-bottom: 1px solid #0e5895;
+  box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
+  -webkit-box-orient: horizontal;
+          box-orient: horizontal;
+}
+
+/* Centered text in the .bar-title */
+.bar-title .title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 44px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 -1px rgba(0, 0, 0, .5);
+  white-space: nowrap;
+}
+
+.bar-title > a:not([class*="button"]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Retain specified title color */
+.bar-title .title a {
+  color: inherit;
+}
+
+/* Tab bar
+-------------------------------------------------- */
+
+/* Bar docked to bottom used for primary app navigation */
+.bar-tab {
+  bottom: 0;
+  height: 50px;
+  padding: 0;
+  background-color: #393939;
+  background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
+  background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
+  border-top: 1px solid #000;
+  border-bottom-width: 0;
+  box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
+}
+
+/* Wrapper for individual tab */
+.tab-inner {
+  display: -webkit-box;
+  display: box;
+  height: 100%;
+  list-style: none;
+  -webkit-box-orient: horizontal;
+          box-orient: horizontal;
+}
+
+/* Navigational tab */
+.tab-item {
+  height: 100%;
+  padding-top: 9px;
+  text-align: center;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+/* Active state for tab */
+.tab-item.active {
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
+}
+
+/* Icon for tab  */
+.tab-icon {
+  display: block;
+  height: 18px;
+  margin: 0 auto;
+}
+
+/* Label for tab */
+.tab-label {
+  margin-top: 1px;
+  font-size: 10px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 1px rgba(0, 0, 0, .3);
+}
+
+/* Buttons in title bars
+-------------------------------------------------- */
+
+/* Generic style for all buttons in .bar-title */
+.bar-title [class*="button"] {
+  position: relative;
+  z-index: 10; /* Places buttons over full width title */
+  font-size: 12px;
+  line-height: 23px;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+  background-color: #1eb0e9;
+  background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
+  background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
+  border: 1px solid #0e5895;
+  box-shadow: 0 1px rgba(255, 255, 255, .25);
+  -webkit-box-flex: 0;
+          box-flex: 0;
+}
+
+
+/* Hacky way to right align buttons outside of flex-box system
+   Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
+.bar-title .title + [class*="button"]:last-child,
+.bar-title .button + [class*="button"]:last-child,
+.bar-title [class*="button"].pull-right {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+/* Override standard button active states */
+.bar-title .button:active {
+  color: #fff;
+  background-color: #0876b1;
+}
+
+/* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/)
+-------------------------------------------------- */
+
+/* Add relative positioning so :before content is positioned properly */
+.bar-title .button-prev,
+.bar-title .button-next {
+  position: relative;
+}
+
+/* Prev/next button base styles */
+.bar-title .button-prev {
+  margin-left: 7px; /* Push over to make room for :before content */
+  border-left: 0;
+  border-bottom-left-radius: 10px 15px;
+  border-top-left-radius: 10px 15px;
+}
+.bar-title .button-next {
+  margin-right: 7px; /* Push over to make room for :before content */
+  border-right: 0;
+  border-top-right-radius: 10px 15px;
+  border-bottom-right-radius: 10px 15px;
+}
+
+/* Pointed part of directional button */
+.bar-title .button-prev:before,
+.bar-title .button-next:before {
+  position: absolute;
+  top: 2px;
+  width: 27px;
+  height: 27px;
+  border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
+  content: '';
+  box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
+  -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
+                  mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
+}
+.bar-title .button-prev:before {
+  left: -5px;
+  background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
+  background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
+  border-left: 1.5px solid rgba(255, 255, 255, .25);
+  -webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
+          transform: rotate(-45deg) skew(-10deg, -10deg);
+}
+.bar-title .button-next:before {
+  right: -5px;
+  background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
+  background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
+  border-top: 1.5px solid rgba(255, 255, 255, .25);
+  -webkit-transform: rotate(135deg) skew(-10deg, -10deg);
+          transform: rotate(135deg) skew(-10deg, -10deg);
+}
+
+/* Active states for the directional buttons */
+.bar-title .button-prev:active,
+.bar-title .button-next:active,
+.bar-title .button-prev:active:before,
+.bar-title .button-next:active:before {
+  color: #fff;
+  background-color: #0876b1;
+  background-image: none;
+}
+.bar-title .button-prev:active:before,
+.bar-title .button-next:active:before {
+  content: '';
+}
+.bar-title .button-prev:active:before {
+  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
+}
+.bar-title .button-next:active:before {
+  box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
+}
+
+/* Block buttons in any bar
+-------------------------------------------------- */
+
+/* Add proper padding and replace buttons normal dropshadow with a shine from bar */
+[class*="bar"] .button-block {
+  padding: 7px 0;
+  margin-bottom: 0;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8);
+}
+
+/* Override standard padding changes for .button-blocks */
+[class*="bar"] .button-block:active {
+  padding: 7px 0;
+}
+
+/* Segmented controller in any bar
+-------------------------------------------------- */
+
+/* Remove standard segmented bottom margin */
+[class*="bar-"] .segmented-controller {
+  margin-bottom: 0;
+}
+
+/* Add margins between segmented controllers and buttons */
+[class*="bar-"] .segmented-controller + [class*="button"],
+[class*="bar-"] [class*="button"] + .segmented-controller {
+  margin-left: 5px;
+}
+
+/* Segmented controller in a title bar
+-------------------------------------------------- */
+
+.bar-title .segmented-controller {
+  line-height: 18px;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  background-color: #1eb0e9;
+  background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
+  background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
+  border: 1px solid #0e5895;
+  border-radius: 3px;
+  box-shadow: 0 1px rgba(255, 255, 255, .25);
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+/* Set color for tab border and highlight */
+.bar-title .segmented-controller li {
+  border-left: 1px solid #0e5895;
+  box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
+}
+
+/* Remove inset shadow from first tab or one to the right of the active tab  */
+.bar-title .segmented-controller .active + li,
+.bar-title .segmented-controller li:first-child {
+  box-shadow: none;
+}
+
+/* Remove left-hand border from first tab */
+.bar-title .segmented-controller li:first-child {
+  border-left-width: 0;
+}
+
+/* Depressed state (active) */
+.bar-title .segmented-controller li.active {
+  background-color: #0082c4;
+  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
+}
+
+/* Set color of links to white */
+.bar-title .segmented-controller li > a {
+  color: #fff;
+}
+
+
+/* Search forms in standard bar
+-------------------------------------------------- */
+
+/* Position/size search bar within the bar */
+.bar-standard input[type=search] {
+  height: 32px;
+  margin: 0;
+}
--- a/lib/css/base.css
+++ b/lib/css/base.css
@ -0,0 +1,153 @@
+/* Hard reset
+-------------------------------------------------- */
+
+html,
+body,
+div,
+span,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+audio,
+video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
+html {
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+/* Base styles
+-------------------------------------------------- */
+
+body {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  font: 14px/1.25 "Helvetica Neue", sans-serif;
+  color: #222;
+  background-color: #fff;
+}
+
+/* Universal link styling */
+a {
+  color: #0882f0;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */
+}
+
+/* Wrapper to be used around all content not in .bar-title and .bar-tab */
+.content {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  background: #fff;
+  -webkit-transition-property: top, bottom;
+          transition-property: top, bottom;
+  -webkit-transition-duration: .2s, .2s;  
+          transition-duration: .2s, .2s;  
+  -webkit-transition-timing-function: linear, linear;
+          transition-timing-function: linear, linear;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hack to force all relatively and absolutely positioned elements still render while scrolling
+   Note: This is a bug for "-webkit-overflow-scrolling: touch" */
+.content > * {
+  -webkit-transform: translateZ(0px);
+          transform: translateZ(0px);
+}
+
+/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
+.content-padded {
+  padding: 10px;
+}
+
+/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+   Note: For these to work, content must come after both bars in the markup */
+.bar-title ~ .content {
+  top: 44px;
+}
+.bar-tab ~ .content {
+  bottom: 51px;
+}
+.bar-header-secondary ~ .content {
+  top: 88px;
+}
--- a/lib/css/buttons.css
+++ b/lib/css/buttons.css
@ -0,0 +1,121 @@
+/* General button styles
+-------------------------------------------------- */
+
+[class*="button"] {
+  position: relative;
+  display: inline-block;
+  padding: 4px 12px;
+  margin: 0;
+  font-weight: bold;
+  line-height: 18px;
+  color: #333;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  vertical-align: top;
+  cursor: pointer;
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
+  border: 1px solid rgba(0, 0, 0, .3);
+  border-radius: 3px;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
+}
+
+/* Active */
+[class*="button"]:active {
+  padding-top: 5px;
+  padding-bottom: 3px;
+  color: #333;
+  background-color: #ccc;
+  background-image: none;
+  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
+}
+
+/* Button modifiers
+-------------------------------------------------- */
+
+/* Overriding styles for buttons with modifiers  */
+.button-main,
+.button-positive,
+.button-negative {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+}
+
+/* Main button */
+.button-main {
+  background-color: #1eafe7;
+  background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
+  background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
+  border: 1px solid #117aaa;
+}
+
+/* Positive button  */
+.button-positive {
+  background-color: #34ba15;
+  background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
+  background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
+  border: 1px solid #278f0f;
+}
+
+/* Negative button  */
+.button-negative {
+  background-color: #e71e1e;
+  background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
+  background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
+  border: 1px solid #b51a1a;
+}
+
+/* Active state for buttons with modifiers */
+.button-main:active,
+.button-positive:active,
+.button-negative:active {
+  color: #fff;
+}
+.button-main:active {
+  background-color: #0876b1;
+}
+.button-positive:active {
+  background-color: #298f11;
+}
+.button-negative:active {
+  background-color: #b21a1a;
+}
+
+/* Block level buttons (full width buttons) */
+.button-block {
+  display: block;
+  padding: 11px 0 13px;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+/* Active state for block level buttons */
+.button-block:active {
+  padding: 12px 0;
+}
+
+/* Counts in buttons
+-------------------------------------------------- */
+
+/* Generic styles for all counts within buttons */
+[class*="button"] [class*="count"] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin-right: -4px;
+  margin-left: 4px;
+  text-shadow: none;
+  background-color: rgba(0, 0, 0, .2);
+  box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff;
+}
+
+/* Position counts within block level buttons
+   Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
+   stays at true center of button */
+.button-block [class*="count"] {
+  position: absolute;
+  right: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-right: 10px;
+}
--- a/lib/css/chevrons.css
+++ b/lib/css/chevrons.css
@ -0,0 +1,30 @@
+/* Chevrons
+-------------------------------------------------- */
+
+.chevron {
+  display: block;
+  height: 20px;
+}
+
+/* Base styles for both 1/2's of the chevron */
+.chevron:before,
+.chevron:after {
+  position: relative;
+  display: block;
+  width: 12px;
+  height: 4px;
+  background-color: #999;
+  content: '';
+}
+
+/* Position and rotate respective 1/2's of the chevron */
+.chevron:before {
+  top: 5px;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.chevron:after {
+  top: 7px;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
--- a/lib/css/counts.css
+++ b/lib/css/counts.css
@ -0,0 +1,45 @@
+/* General count styles
+-------------------------------------------------- */
+
+[class*="count"] {
+  display: inline-block;
+  padding: 4px 9px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 13px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 100px;
+}
+
+/* Count modifiers
+-------------------------------------------------- */
+
+/* Overriding styles for counts with modifiers  */
+.count-main,
+.count-positive,
+.count-negative {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+}
+
+/* Main count  */
+.count-main {
+  background-color: #1eafe7;
+  background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
+  background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
+}
+
+/* Positive count  */
+.count-positive {
+  background-color: #34ba15;
+  background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
+  background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
+}
+
+/* Negative count  */
+.count-negative {
+  background-color: #e71e1e;
+  background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
+  background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
+}
--- a/lib/css/forms.css
+++ b/lib/css/forms.css
@ -0,0 +1,120 @@
+/* Forms
+-------------------------------------------------- */
+
+/* Force form elements to inherit font styles */
+input,
+textarea,
+button,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  width: 100%;
+  height: 40px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 3px;
+  box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
+  -webkit-appearance: none;
+  box-sizing: border-box;
+}
+
+/* Fully round search input */
+input[type=search] {
+  height: 34px;
+  font-size: 14px;
+  border-radius: 30px;
+}
+
+/* Allow text area's height to grow larger than a normal input */
+textarea {
+  height: auto;
+}
+
+/* Style select button to look like part of the Ratchet's style */
+select {
+  height: auto;
+  font-size: 14px;
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
+}
+
+
+/* Input groups (cluster multiple inputs together into a single group)
+-------------------------------------------------- */
+
+/* Reset from initial form setup styles */
+.input-group {
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+
+/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
+.input-group input {
+  margin-bottom: 0;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Remove bottom border on last input to avoid double bottom border */
+.input-group input:last-child {
+  border-bottom-width: 0;
+}
+
+/* Input groups with labels
+-------------------------------------------------- */
+
+/* To use labels with input groups, wrap a label and an input in an .input-row */
+.input-row {
+  overflow: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+}
+
+/* Remove bottom border on last input-row to avoid double bottom border */
+.input-row:last-child {
+  border-bottom-width: 0;
+}
+
+/* Labels get floated left with a set percentage width */
+.input-row label {
+  float: left;
+  width: 25%;
+  padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
+  font-weight: bold;
+}
+
+/* Actual inputs float to right of labels and also have a set percentage */
+.input-row label + input {
+  float: right;
+  width: 65%;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-bottom: 0;
+}
--- a/lib/css/lists.css
+++ b/lib/css/lists.css
@ -0,0 +1,115 @@
+/* Lists
+-------------------------------------------------- */
+
+/* Remove usual bullet styles from list */
+.list {
+  margin-bottom: 10px;
+  list-style: none;
+  background-color: #fff;
+}
+
+/* Pad each list item and add dividers */
+.list li {
+  position: relative;
+  padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+}
+
+/* Give top border to first list items */
+.list li:first-child {
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
+.list li > a:not([class*="button"]) {
+  position: relative;
+  display: block;
+  padding: inherit;
+  margin: -20px -60px -20px -10px;
+  color: inherit;
+}
+
+/* Inset list
+-------------------------------------------------- */
+
+.list.inset {
+  width: auto;
+  margin-right: 10px;
+  margin-left: 10px;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
+.list.inset li:first-child {
+  border-top-width: 0;
+}
+.list.inset li:last-child {
+  border-bottom-width: 0;
+}
+
+
+/* List dividers
+-------------------------------------------------- */
+
+.list .list-divider {
+  position: relative;
+  top: -1px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%);
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
+}
+
+/* Rounding first divider on inset lists and remove border on the top */
+.list.inset .list-divider:first-child {
+  top: 0;
+  border-top-width: 0;
+  border-radius: 6px 6px 0 0;
+}
+
+/* Rounding last divider on inset lists */
+.list.inset .list-divider:last-child {
+  border-radius: 0 0 6px 6px;
+}
+
+/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
+-------------------------------------------------- */
+.list .chevron,
+.list [class*="button"],
+.list [class*="count"],
+.list .toggle {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+}
+
+ /* Position chevrons/counts vertically centered on the right in list items */
+.list .chevron,
+.list [class*="count"] {
+  margin-top: -10px; /* Half height of chevron */
+}
+
+/* Push count over if there's a sibling chevron */
+.list .chevron + [class*="count"] {
+  right: 30px;
+}
+
+/* Position buttons vertically centered on the right in list items */
+.list [class*="button"] {
+  left: auto;
+  margin-top: -14px; /* Half height of button */
+}
+
+.list .toggle {
+  margin-top: -15px; /* Half height of toggle */
+}
--- a/lib/css/popovers.css
+++ b/lib/css/popovers.css
@ -0,0 +1,153 @@
+/* Popovers (to be used with popovers.js)
+-------------------------------------------------- */
+
+.popover {
+  position: fixed;
+  top: 55px;
+  left: 50%;
+  z-index: 20;
+  display: none;
+  width: 280px;
+  padding: 5px;
+  margin-left: -146px;
+  background-color: #555;
+  background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
+  background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
+  border: 1px solid #111;
+  border-radius: 6px;
+  opacity: 0;
+  box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
+  -webkit-transform: translate3d(0, -15px, 0);
+          transform: translate3d(0, -15px, 0);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+                  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
+.popover:before,
+.popover:after {
+  position: absolute;
+  left: 50%;
+  width: 0;
+  height: 0;
+  content: '';
+}
+.popover:before {
+  top: -20px;
+  margin-left: -21px;
+  border-right: 21px solid transparent;
+  border-bottom: 21px solid #111;
+  border-left: 21px solid transparent;
+}
+.popover:after {
+  top: -19px;
+  margin-left: -20px;
+  border-right: 20px solid transparent;
+  border-bottom: 20px solid #555;
+  border-left: 20px solid transparent;
+}
+
+/* Wrapper for a title and buttons */
+.popover-header {
+  display: -webkit-box;
+  display: box;
+  height: 34px;
+  margin-bottom: 5px;
+}
+
+/* Centered title for popover */
+.popover-header .title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 15px 0;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 12px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 -1px rgba(0, 0, 0, .5);
+}
+
+/* Generic style for all buttons in .popover-header */
+.popover-header [class*="button"] {
+  z-index: 25;
+  font-size: 12px;
+  line-height: 22px;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+  background-color: #454545;
+  background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
+  background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
+  border: 1px solid #111;
+  -webkit-box-flex: 0;
+          box-flex: 0;
+}
+
+/* Hacky way to right align buttons outside of flex-box system
+   Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
+.popover-header .title + [class*="button"]:last-child,
+.popover-header .button + [class*="button"]:last-child,
+.popover-header [class*="button"].pull-right {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+/* Active state for popover header buttons */
+.popover-header .button:active {
+  color: #fff;
+  background-color: #0876b1;
+}
+
+/* Popover animation
+-------------------------------------------------- */
+
+.popover.visible {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+
+/* Backdrop (used as invisible touch escape)
+-------------------------------------------------- */
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+}
+
+/* Block level buttons in popovers
+-------------------------------------------------- */
+
+/* Positioning and giving darker border to look sharp against dark popover */
+.popover .button-block {
+  margin-bottom: 5px;
+  border: 1px solid #111;
+}
+
+/* Remove extra margin on bottom of last button */
+.popover .button-block:last-child {
+  margin-bottom: 0;
+}
+
+/* Lists in popovers
+-------------------------------------------------- */
+
+.popover .list {
+  width: auto;
+  max-height: 250px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  overflow: auto;
+  background-color: #fff;
+  border: 1px solid #000;
+  border-radius: 3px;
+  -webkit-overflow-scrolling: touch;
+}
--- a/lib/css/push.css
+++ b/lib/css/push.css
@ -0,0 +1,29 @@
+/* Push styles (to be used with push.js)
+-------------------------------------------------- */
+
+/* Fade animation */
+.content.fade {
+  left: 0;
+  opacity: 0;
+  -webkit-transition: opacity .2s ease-in-out;
+          transition: opacity .2s ease-in-out;
+}
+.content.fade.in {
+  opacity: 1;
+}
+
+/* Slide animation */
+.content.slide {
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+ -webkit-transition: -webkit-transform .25s ease-in-out;
+         transition:         transform .25s ease-in-out;
+}
+.content.slide.left {
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
+}
+.content.slide.right {
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
+}
--- a/lib/css/segmented-controllers.css
+++ b/lib/css/segmented-controllers.css
@ -0,0 +1,62 @@
+/* Segmented controllers
+-------------------------------------------------- */
+
+.segmented-controller {
+  display: -webkit-box;
+  display: box;
+  margin-bottom: 10px;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 1px rgba(255, 255, 255, .5);
+  list-style: none;
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
+  -webkit-box-orient: horizontal;
+          box-orient: horizontal;
+}
+
+/* Section within controller */
+.segmented-controller li {
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  border-left: 1px solid #aaa;
+  box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+/* Link that fills each section */
+.segmented-controller li > a {
+  display: block;
+  padding: 8px 16px;
+  overflow: hidden;
+  line-height: 15px;
+  color: #333;
+  text-overflow: ellipsis;
+}
+
+/* Remove border-left and shadow from first section */
+.segmented-controller li:first-child {
+  border-left-width: 0;
+  box-shadow: none;
+}
+
+/* Active segment of controller */
+.segmented-controller li.active {
+  background-color: #ccc;
+  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
+}
+
+.segmented-controller-item {
+  display: none;
+}
+
+.segmented-controller-item.active {
+  display: block;
+}
--- a/lib/css/sliders.css
+++ b/lib/css/sliders.css
@ -0,0 +1,37 @@
+/* Slider styles (to be used with sliders.js)
+-------------------------------------------------- */
+
+/* Width/height of slider */
+.slider,
+.slider > li {
+  width: 100%;
+  height: 200px;
+}
+
+/* Outer wrapper for slider */
+.slider {
+  overflow: hidden;
+  background-color: #000;
+}
+
+/* Inner wrapper for slider (width of all slides together) */
+.slider > ul {
+  position: relative;
+  font-size: 0; /* Remove spaces from inline-block children */
+  white-space: nowrap;
+  -webkit-transition: all 0 linear;
+          transition: all 0 linear;
+}
+
+/* Individual slide */
+.slider > ul > li {
+  display: inline-block;
+  vertical-align: top; /* Ensure that li always aligns to top */
+  width: 100%; 
+  height: 100%;
+}
+
+/* Required reset of font-size to same as standard body */
+.slider > ul > li > * {
+  font-size: 14px;
+}
--- a/lib/css/toggles.css
+++ b/lib/css/toggles.css
@ -0,0 +1,66 @@
+/* Toggle styles (to be used with toggles.js)
+-------------------------------------------------- */
+
+.toggle {
+  position: relative;
+  width: 75px;
+  height: 28px;
+  background-color: #eee;
+  border: 1px solid #bbb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
+}
+
+/* Text indicating "on" or "off". Default is "off" */
+.toggle:before {
+  position: absolute;
+  right: 13px;
+  font-weight: bold;
+  line-height: 28px;
+  color: #777;
+  text-shadow: 0 1px #fff;
+  text-transform: uppercase;
+  content: "Off";
+}
+
+/* Sliding handle */
+.toggle-handle {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
+  background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 100px;
+  -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
+                  transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
+}
+
+/* Active state for toggle */
+.toggle.active {
+  background-color: #19a8e4;
+  background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%);
+  background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%);
+  border: 1px solid #096c9d;
+  box-shadow: inset 0 0 15px rgba(255, 255, 255, .25);
+}
+
+/* Active state for toggle handle */
+.toggle.active .toggle-handle {
+  border-color: #0a76ad;
+  -webkit-transform: translate3d(48px,0,0);
+          transform: translate3d(48px,0,0);
+}
+
+/* Change "off" to "on" for active state */
+.toggle.active:before {
+  right: auto;
+  left: 15px;
+  color: #fff;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
+  content: "On";
+}
--- a/lib/js/popovers.js
+++ b/lib/js/popovers.js
@ -0,0 +1,63 @@
+/* ----------------------------------
+ * POPOVER v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var popover;
+
+  var findPopovers = function (target) {
+    var i, popovers = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+    }
+  };
+
+  var onPopoverHidden = function () {
+    document.body.removeChild(backdrop);
+    popover.style.display = 'none';
+    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
+  }
+
+  var backdrop = function () {
+    var element = document.createElement('div');
+
+    element.classList.add('backdrop');
+
+    element.addEventListener('touchend', function () {
+      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
+      popover.classList.remove('visible');
+    });
+
+    return element;
+  }();
+
+  var getPopover = function (e) {
+    var anchor = findPopovers(e.target);
+
+    if (!anchor || !anchor.hash) return;
+
+    popover = document.querySelector(anchor.hash);
+
+    if (!popover || !popover.classList.contains('popover')) return;
+
+    return popover;
+  }
+
+  window.addEventListener('touchend', function (e) {
+    var popover = getPopover(e);
+
+    if (!popover) return;
+
+    popover.style.display = 'block';
+    popover.offsetHeight;
+    popover.classList.add('visible');
+
+    popover.parentNode.appendChild(backdrop);
+  });
+
+  window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); });
+
+}();
--- a/lib/js/push.js
+++ b/lib/js/push.js
@ -0,0 +1,417 @@
+/* ----------------------------------
+ * PUSH v1.0.0
+ * Licensed under The MIT License
+ * inspired by chris's jquery.pjax.js
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var noop = function () {};
+
+
+  // Pushstate cacheing
+  // ==================
+
+  var isScrolling;
+  var maxCacheLength = 20;
+  var cacheMapping   = sessionStorage;
+  var domCache       = {};
+  var transitionMap  = {
+    'slide-in'  : 'slide-out',
+    'slide-out' : 'slide-in',
+    'fade'      : 'fade'
+  };
+  var bars = {
+    bartab             : '.bar-tab',
+    bartitle           : '.bar-title',
+    barfooter          : '.bar-footer',
+    barheadersecondary : '.bar-header-secondary'
+  }
+
+  var cacheReplace = function (data, updates) {
+    PUSH.id = data.id;
+    if (updates) data = getCached(data.id);
+    cacheMapping[data.id] = JSON.stringify(data);
+    window.history.replaceState(data.id, data.title, data.url);
+    domCache[data.id] = document.body.cloneNode(true);
+  };
+
+  var cachePush = function () {
+    var id = PUSH.id;
+
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+
+    cacheBackStack.push(id);
+
+    while (cacheForwardStack.length)               delete cacheMapping[cacheForwardStack.shift()];
+    while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()];
+
+    window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var cachePop = function (id, direction) {
+    var forward           = direction == 'forward';
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+    var pushStack         = forward ? cacheBackStack    : cacheForwardStack;
+    var popStack          = forward ? cacheForwardStack : cacheBackStack;
+
+    if (PUSH.id) pushStack.push(PUSH.id);
+    popStack.pop();
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var getCached = function (id) {
+    return JSON.parse(cacheMapping[id] || null) || {};
+  };
+
+  var getTarget = function (e) {
+    var target = findTarget(e.target);
+
+    if (
+      !  target
+      || e.which > 1
+      || e.metaKey
+      || e.ctrlKey
+      || isScrolling
+      || location.protocol !== target.protocol
+      || location.host     !== target.host
+      || !target.hash && /#/.test(target.href)
+      || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '')
+      || target.getAttribute('data-ignore') == 'push'
+    ) return;
+
+    return target;
+  };
+
+
+  // Main event handlers (touchend, popstate)
+  // ==========================================
+
+  var touchend = function (e) {
+    var target = getTarget(e);
+
+    if (!target) return;
+
+    e.preventDefault();
+
+    PUSH({
+      url        : target.href,
+      hash       : target.hash,
+      timeout    : target.getAttribute('data-timeout'),
+      transition : target.getAttribute('data-transition')
+    });
+  };
+
+  var popstate = function (e) {
+    var key;
+    var barElement;
+    var activeObj;
+    var activeDom;
+    var direction;
+    var transition;
+    var transitionFrom;
+    var transitionFromObj;
+    var id = e.state;
+
+    if (!id || !cacheMapping[id]) return;
+
+    direction = PUSH.id < id ? 'forward' : 'back';
+
+    cachePop(id, direction);
+
+    activeObj = getCached(id);
+    activeDom = domCache[id];
+
+    if (activeObj.title) document.title = activeObj.title;
+
+    if (direction == 'back') {
+      transitionFrom    = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
+      transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
+    } else {
+      transitionFromObj = activeObj;
+    }
+
+    if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id;
+
+    transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
+
+    if (!activeDom) {
+      return PUSH({
+        id         : activeObj.id,
+        url        : activeObj.url,
+        title      : activeObj.title,
+        timeout    : activeObj.timeout,
+        transition : transition,
+        ignorePush : true
+      });
+    }
+
+    if (transitionFromObj.transition) {
+      activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
+      for (key in bars) {
+        barElement = document.querySelector(bars[key])
+        if (activeObj[key]) swapContent(activeObj[key], barElement);
+        else if (barElement) barElement.parentNode.removeChild(barElement);
+      }
+    }
+
+    swapContent(
+      (activeObj.contents || activeDom).cloneNode(true),
+      document.querySelector('.content'),
+      transition
+    );
+
+    PUSH.id = id;
+
+    document.body.offsetHeight; // force reflow to prevent scroll
+  };
+
+
+  // Core PUSH functionality
+  // =======================
+
+  var PUSH = function (options) {
+    var key;
+    var data = {};
+    var xhr  = PUSH.xhr;
+
+    options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
+
+    for (key in bars) {
+      options[key] = options[key] || document.querySelector(bars[key]);
+    }
+
+    if (xhr && xhr.readyState < 4) {
+      xhr.onreadystatechange = noop;
+      xhr.abort()
+    }
+
+    xhr = new XMLHttpRequest();
+    xhr.open('GET', options.url, true);
+    xhr.setRequestHeader('X-PUSH', 'true');
+
+    xhr.onreadystatechange = function () {
+      if (options._timeout) clearTimeout(options._timeout);
+      if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url);
+    };
+
+    if (!PUSH.id) {
+      cacheReplace({
+        id         : +new Date,
+        url        : window.location.href,
+        title      : document.title,
+        timeout    : options.timeout,
+        transition : null
+      });
+    }
+
+    if (options.timeout) {
+      options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
+    }
+
+    xhr.send();
+
+    if (xhr.readyState && !options.ignorePush) cachePush();
+  };
+
+
+  // Main XHR handlers
+  // =================
+
+  var success = function (xhr, options) {
+    var key;
+    var barElement;
+    var data = parseXHR(xhr, options);
+
+    if (!data.contents) return locationReplace(options.url);
+
+    if (data.title) document.title = data.title;
+
+    if (options.transition) {
+      for (key in bars) {
+        barElement = document.querySelector(bars[key])
+        if (data[key]) swapContent(data[key], barElement);
+        else if (barElement) barElement.parentNode.removeChild(barElement);
+      }
+    }
+
+    swapContent(data.contents, options.container, options.transition, function () {
+      cacheReplace({
+        id         : options.id || +new Date,
+        url        : data.url,
+        title      : data.title,
+        timeout    : options.timeout,
+        transition : options.transition
+      }, options.id);
+      triggerStateChange();
+    });
+
+    if (!options.ignorePush && window._gaq) _gaq.push(['_trackPageview']) // google analytics
+    if (!options.hash) return;
+  };
+
+  var failure = function (url) {
+    throw new Error('Could not get: ' + url)
+  };
+
+
+  // PUSH helpers
+  // ============
+
+  var swapContent = function (swap, container, transition, complete) {
+    var enter;
+    var containerDirection;
+    var swapDirection;
+
+    if (!transition) {
+      if (container) container.innerHTML = swap.innerHTML;
+      else if (swap.classList.contains('content')) document.body.appendChild(swap);
+      else document.body.insertBefore(swap, document.querySelector('.content'));
+    } else {
+      enter  = /in$/.test(transition);
+
+      if (transition == 'fade') {
+        container.classList.add('in');
+        container.classList.add('fade');
+        swap.classList.add('fade');
+      }
+
+      if (/slide/.test(transition)) {
+        swap.classList.add(enter ? 'right' : 'left');
+        swap.classList.add('slide');
+        container.classList.add('slide');
+      }
+
+      container.parentNode.insertBefore(swap, container);
+    }
+
+    if (!transition) complete && complete();
+
+    if (transition == 'fade') {
+      container.offsetWidth; // force reflow
+      container.classList.remove('in');
+      container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
+
+      function fadeContainerEnd() {
+        container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
+        swap.classList.add('in');
+        swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
+      }
+      function fadeSwapEnd () {
+        swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
+        container.parentNode.removeChild(container);
+        swap.classList.remove('fade');
+        swap.classList.remove('in');
+        complete && complete();
+      }
+    }
+
+    if (/slide/.test(transition)) {
+      container.offsetWidth; // force reflow
+      swapDirection      = enter ? 'right' : 'left'
+      containerDirection = enter ? 'left' : 'right'
+      container.classList.add(containerDirection);
+      swap.classList.remove(swapDirection);
+      swap.addEventListener('webkitTransitionEnd', slideEnd);
+
+      function slideEnd() {
+        swap.removeEventListener('webkitTransitionEnd', slideEnd);
+        swap.classList.remove('slide');
+        swap.classList.remove(swapDirection);
+        container.parentNode.removeChild(container);
+        complete && complete();
+      }
+    }
+  };
+
+  var triggerStateChange = function () {
+    var e = new CustomEvent('push', {
+      detail: { state: getCached(PUSH.id) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    window.dispatchEvent(e);
+  };
+
+  var findTarget = function (target) {
+    var i, toggles = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+    }
+  };
+
+  var locationReplace = function (url) {
+    window.history.replaceState(null, '', '#');
+    window.location.replace(url);
+  };
+
+  var parseURL = function (url) {
+    var a = document.createElement('a'); a.href = url; return a;
+  };
+
+  var extendWithDom = function (obj, fragment, dom) {
+    var i;
+    var result    = {};
+
+    for (i in obj) result[i] = obj[i];
+
+    Object.keys(bars).forEach(function (key) {
+      var el = dom.querySelector(bars[key]);
+      if (el) el.parentNode.removeChild(el);
+      result[key] = el;
+    });
+
+    result.contents = dom.querySelector(fragment);
+
+    return result;
+  };
+
+  var parseXHR = function (xhr, options) {
+    var head;
+    var body;
+    var data = {};
+    var responseText = xhr.responseText;
+
+    data.url = options.url;
+
+    if (!responseText) return data;
+
+    if (/<html/i.test(responseText)) {
+      head           = document.createElement('div');
+      body           = document.createElement('div');
+      head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0]
+      body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]
+    } else {
+      head           = body = document.createElement('div');
+      head.innerHTML = responseText;
+    }
+
+    data.title = head.querySelector('title');
+    data.title = data.title && data.title.innerText.trim();
+
+    if (options.transition) data = extendWithDom(data, '.content', body);
+    else data.contents = body;
+
+    return data;
+  };
+
+
+  // Attach PUSH event handlers
+  // ==========================
+
+  window.addEventListener('touchstart', function () { isScrolling = false; });
+  window.addEventListener('touchmove', function () { isScrolling = true; })
+  window.addEventListener('touchend', touchend);
+  window.addEventListener('click', function (e) { if (getTarget(e)) e.preventDefault(); });
+  window.addEventListener('popstate', popstate);
+
+}();
--- a/lib/js/segmented-controllers.js
+++ b/lib/js/segmented-controllers.js
@ -0,0 +1,47 @@
+/* ----------------------------------
+ * TABS v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  var getTarget = function (target) {
+    var i, popovers = document.querySelectorAll('.segmented-controller li a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+    }
+  };
+
+  window.addEventListener("touchend", function (e) {
+    var activeTab;
+    var activeBody;
+    var targetBody;
+    var targetTab;
+    var className     = 'active';
+    var classSelector = '.' + className;
+    var targetAnchor  = getTarget(e.target);
+
+    if (!targetAnchor) return;
+
+    targetTab = targetAnchor.parentNode;
+    activeTab = targetTab.parentNode.querySelector(classSelector);
+
+    if (activeTab) activeTab.classList.remove(className);
+
+    targetTab.classList.add(className);
+
+    if (!targetAnchor.hash) return;
+
+    targetBody = document.querySelector(targetAnchor.hash);
+
+    if (!targetBody) return;
+
+    activeBody = targetBody.parentNode.querySelector(classSelector);
+
+    if (activeBody) activeBody.classList.remove(className);
+
+    targetBody.classList.add(className)
+  });
+
+  window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });
+}();
--- a/lib/js/sliders.js
+++ b/lib/js/sliders.js
@ -0,0 +1,114 @@
+/* ----------------------------------
+ * SLIDER v1.0.0
+ * Licensed under The MIT License
+ * Adapted from Brad Birdsall's swipe
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var pageX;
+  var pageY;
+  var slider;
+  var deltaX;
+  var deltaY;
+  var offsetX;
+  var lastSlide;
+  var startTime;
+  var resistance;
+  var sliderWidth;
+  var slideNumber;
+  var isScrolling;
+  var scrollableArea;
+
+  var getSlider = function (target) {
+    var i, sliders = document.querySelectorAll('.slider ul');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
+    }
+  }
+
+  var getScroll = function () {
+    var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
+    return parseInt(translate3d ? translate3d[1] : 0)
+  };
+
+  var setSlideNumber = function (offset) {
+    var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
+    slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) );
+    slideNumber += offset;
+    slideNumber = Math.min(slideNumber, 0);
+    slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
+  }
+
+  var onTouchStart = function (e) {
+    slider = getSlider(e.target);
+
+    if (!slider) return;
+
+    var firstItem  = slider.querySelector('li');
+
+    scrollableArea = firstItem.offsetWidth * slider.children.length;
+    isScrolling    = undefined;
+    sliderWidth    = slider.offsetWidth;
+    resistance     = 1;
+    lastSlide      = -(slider.children.length - 1);
+    startTime      = +new Date;
+    pageX          = e.touches[0].pageX;
+    pageY          = e.touches[0].pageY;
+
+    setSlideNumber(0);
+
+    slider.style['-webkit-transition-duration'] = 0;
+  };
+
+  var onTouchMove = function (e) {
+    if (e.touches.length > 1 || !slider) return; // Exit if a pinch || no slider
+
+    deltaX = e.touches[0].pageX - pageX;
+    deltaY = e.touches[0].pageY - pageY;
+    pageX  = e.touches[0].pageX;
+    pageY  = e.touches[0].pageY;
+
+    if (typeof isScrolling == 'undefined') {
+      isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
+    }
+
+    if (isScrolling) return;
+
+    offsetX = (deltaX / resistance) + getScroll();
+
+    e.preventDefault();
+
+    resistance = slideNumber == 0         && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
+                 slideNumber == lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
+
+    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+  };
+
+  var onTouchEnd = function (e) {
+    if (!slider || isScrolling) return;
+
+    setSlideNumber(
+      (+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
+    );
+
+    offsetX = slideNumber * sliderWidth;
+
+    slider.style['-webkit-transition-duration'] = '.2s';
+    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+
+    e = new CustomEvent('slide', {
+      detail: { slideNumber: Math.abs(slideNumber) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    slider.parentNode.dispatchEvent(e);
+  };
+
+  window.addEventListener('touchstart', onTouchStart);
+  window.addEventListener('touchmove', onTouchMove);
+  window.addEventListener('touchend', onTouchEnd);
+
+}();
--- a/lib/js/toggles.js
+++ b/lib/js/toggles.js
@ -0,0 +1,94 @@
+/* ----------------------------------
+ * TOGGLE v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var start     = {};
+  var touchMove = false;
+  var distanceX = false;
+  var toggle    = false;
+
+  var findToggle = function (target) {
+    var i, toggles = document.querySelectorAll('.toggle');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+    }
+  }
+
+  window.addEventListener('touchstart', function (e) {
+    e = e.originalEvent || e;
+
+    toggle = findToggle(e.target);
+
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var toggleWidth = toggle.offsetWidth;
+    var handleWidth = handle.offsetWidth;
+    var offset      = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0;
+
+    start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
+    touchMove = false;
+
+    // todo: probably should be moved to the css
+    toggle.style['-webkit-transition-duration'] = 0;
+  });
+
+  window.addEventListener('touchmove', function (e) {
+    e = e.originalEvent || e;
+
+    if (e.touches.length > 1) return; // Exit if a pinch
+
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var current     = e.touches[0];
+    var toggleWidth = toggle.offsetWidth;
+    var handleWidth = handle.offsetWidth;
+    var offset      = toggleWidth - handleWidth;
+
+    touchMove = true;
+    distanceX = current.pageX - start.pageX;
+
+    if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return;
+
+    e.preventDefault();
+
+    if (distanceX < 0)      return handle.style.webkitTransform = 'translate3d(0,0,0)';
+    if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+
+    handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
+
+    toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active');
+  });
+
+  window.addEventListener('touchend', function (e) {
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var toggleWidth = toggle.offsetWidth;
+    var handleWidth = handle.offsetWidth;
+    var offset      = toggleWidth - handleWidth;
+    var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
+
+    if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+    else handle.style.webkitTransform = 'translate3d(0,0,0)';
+
+    toggle.classList[slideOn ? 'add' : 'remove']('active');
+
+    e = new CustomEvent('toggle', {
+      detail: { isActive: slideOn },
+      bubbles: true,
+      cancelable: true
+    });
+
+    toggle.dispatchEvent(e);
+
+    touchMove = false;
+    toggle    = false;
+  });
+
+}();
--- a/test/app/checkout.html
+++ b/test/app/checkout.html
@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Movie finder</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
+
+    <link rel="stylesheet" href="../../dist/ratchet.css">
+    <link rel="stylesheet" href="css/app.css">
+    <script src="../../dist/ratchet.js"></script>
+    <script src="../../dos/js/fingerblast.js"></script>
+
+  </head>
+  <body>
+  <header class="bar-title">
+    <a class="button-prev" href="choose-theater.html" data-transition="slide-out">
+      Back
+    </a>
+    <h1 class="title">Buy tickets</h1>
+  </header>
+
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item active">
+        <a href="index.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Movies</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="theaters.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Theaters</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="settings.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Settings</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="content">
+    <div class="checkout-form content-padded">
+      <form>
+        <div class="input-group">
+          <div class="input-row">
+            <input type="text" placeholder="Fullname">
+          </div>
+          <div class="input-row">
+            <input type="email" placeholder="Email">
+          </div>
+        </div>
+
+        <div class="input-group">
+          <div class="input-row">
+            <input type="text" placeholder="Name on card">
+          </div>
+          <div class="input-row">
+            <input type="text" placeholder="Credit card number">
+          </div>
+          <div class="input-row">
+            <input type="text" placeholder="Security code">
+          </div>
+        </div>
+
+        <a class="button-positive button-block">Checkout</a>
+      </form>
+    </div>
+  </div>
+
+  </body>
+</html>
--- a/test/app/choose-movie.html
+++ b/test/app/choose-movie.html
@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Movie finder</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
+
+    <link rel="stylesheet" href="../../dist/ratchet.css">
+    <link rel="stylesheet" href="css/app.css">
+    <script src="../../dist/ratchet.js"></script>
+
+  </head>
+  <body>
+
+  <header class="bar-title">
+    <a class="button-prev" href="theaters.html" data-transition="slide-out">
+      Back
+    </a>
+    <h1 class="title">Choose a movie</h1>
+  </header>
+  <nav class="bar-standard bar-header-secondary">
+    <form>
+      <input type="search" placeholder="Search for movies">
+    </form>
+  </nav>
+
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item">
+        <a href="index.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Movies</div>
+        </a>
+      </li>
+      <li class="tab-item active">
+        <a href="theaters.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Theaters</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="settings.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Settings</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="content">
+
+    <ul class="list">
+      <li class="list-divider">Recommended movies</li>
+      <li>
+        <strong>Argo</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Skyfall: 007</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Wreck-it Ralph</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li class="list-divider">Top movies</li>
+      <li>
+        <strong>Movie 4</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 5</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 6</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 7</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 8</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 9</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 10</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 11</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Movie 12</strong>
+        <p>Lorem ipsum dolor sit amet</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+    </ul>
+
+  </div>
+  </body>
+</html>
--- a/test/app/choose-theater.html
+++ b/test/app/choose-theater.html
@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Movie finder</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
+
+    <link rel="stylesheet" href="../../dist/ratchet.css">
+    <link rel="stylesheet" href="css/app.css">
+    <script src="../../dist/ratchet.js"></script>
+    <script src="../../dos/js/fingerblast.js"></script>
+
+  </head>
+  <body>
+
+  <header class="bar-title">
+    <a class="button-prev" href="index.html" data-transition="slide-out">
+      Back
+    </a>
+    <h1 class="title">Argo</h1>
+  </header>
+
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item active">
+        <a href="index.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Movies</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="theaters.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Theaters</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="settings.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Settings</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="content">
+
+    <ul class="list">
+      <li class="list-divider">Theaters nearby</li>
+      <li>
+        <strong>Metreon 16</strong>
+        <p>1.3 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>AMC 5</strong>
+        <p>3.5 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Regal 42</strong>
+        <p>7.3 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>Shorline theater</strong>
+        <p>12.5 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>AMC 16</strong>
+        <p>12.2 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>BW3 16</strong>
+        <p>13.4 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>MC Hammer 16</strong>
+        <p>14.1 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>AMC 3</strong>
+        <p>14.3 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>AMC 2</strong>
+        <p>14.7 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+      <li>
+        <strong>AMC 10</strong>
+        <p>15 miles away</p>
+        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+      </li>
+    </ul>
+  </div>
+
+  </body>
+</html>
--- a/test/app/css/app.css
+++ b/test/app/css/app.css
@ -0,0 +1,12 @@
+.slider {
+  margin-bottom: 0;
+  height: 150px;
+}
+
+.slider li img {
+  width: 100%;
+}
+
+.form-wrapper {
+  padding: 10px;
+}
--- a/test/app/img/argo.png
+++ b/test/app/img/argo.png
--- a/test/app/img/ralph.png
+++ b/test/app/img/ralph.png
--- a/test/app/img/skyfall.png
+++ b/test/app/img/skyfall.png
--- a/test/app/index.html
+++ b/test/app/index.html
@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Movie finder</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
+
+    <link rel="stylesheet" href="../../dist/ratchet.css">
+    <link rel="stylesheet" href="css/app.css">
+    <script src="../../dist/ratchet.js"></script>
+
+  </head>
+  <body>
+
+  <header class="bar-title">
+    <h1 class="title">Movie finder</h1>
+  </header>
+  <nav class="bar-standard bar-header-secondary">
+    <form>
+      <input type="search" placeholder="Search">
+    </form>
+  </nav>
+
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item active">
+        <a href="index.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Movies</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="theaters.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Theaters</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="settings.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Settings</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="content">
+
+    <div class="slider">
+      <ul>
+        <li>
+          <img src="img/argo.png">
+        </li>
+        <li>
+           <img src="img/skyfall.png">
+        </li>
+        <li>
+           <img src="img/ralph.png">
+        </li>
+      </ul>
+    </div>
+
+    <ul class="list">
+      <li class="list-divider">Recommended movies</li>
+      <li>
+        <a href="choose-theater.html">
+          <strong>Argo</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Skyfall: 007</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Wreck-it Ralph</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li class="list-divider">Top movies</li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 4</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 5</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 6</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 7</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 8</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 9</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 10</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 11</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 12</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+    </ul>
+
+  </div>
+  </body>
+</html>
--- a/test/app/settings.html
+++ b/test/app/settings.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Movie finder</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
+
+    <link rel="stylesheet" href="../../dist/ratchet.css">
+    <link rel="stylesheet" href="css/app.css">
+    <script src="../../dist/ratchet.js"></script>
+    <script src="../../dos/js/fingerblast.js"></script>
+
+  </head>
+  <body>
+
+  <header class="bar-title">
+    <h1 class="title">Settings</h1>
+  </header>
+
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item">
+        <a href="index.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Movies</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="theaters.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Theaters</div>
+        </a>
+      </li>
+      <li class="tab-item active">
+        <a href="settings.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Settings</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="content">
+    <div class="form-wrapper">
+      <form>
+    	  <div class="input-group">
+    	    <div class="input-row">
+    	      <label>Full name</label>
+    	      <input type="text" placeholder="Mister Ratchet">
+    	    </div>
+    	    <div class="input-row">
+    	      <label>Email</label>
+    	      <input type="email" placeholder="ratchetframework@gmail.com">
+    	    </div>
+    	    <div class="input-row">
+    	      <label>Username</label>
+    	      <input type="text" placeholder="goRatchet">
+    	    </div>
+    	  </div>
+        <a class="button-block">Save changes</a>
+    	</form>
+    </div>
+	
+  </div>
+
+  </body>
+</html>
--- a/test/app/theaters.html
+++ b/test/app/theaters.html
@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Movie finder</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
+
+    <link rel="stylesheet" href="../../dist/ratchet.css">
+    <link rel="stylesheet" href="css/app.css">
+    <script src="../../dist/ratchet.js"></script>
+
+  </head>
+  <body>
+
+  <header class="bar-title">
+    <h1 class="title">Find a theater</h1>
+  </header>
+  <nav class="bar-standard bar-header-secondary">
+    <form>
+      <input type="search" placeholder="Search">
+    </form>
+  </nav>
+
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item">
+        <a href="index.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Movies</div>
+        </a>
+      </li>
+      <li class="tab-item active">
+        <a href="theaters.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Theaters</div>
+        </a>
+      </li>
+      <li class="tab-item">
+        <a href="settings.html" data-transition="fade">
+          <img class="tab-icon" src="../../docs/img/icon-hamburger.png">
+          <div class="tab-label">Settings</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="content">
+
+    <ul class="list">
+      <li class="list-divider">Theaters nearby</li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>Metreon 16</strong>
+          <p>1.3 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>AMC 5</strong>
+          <p>3.5 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>Regal 42</strong>
+          <p>7.3 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>Shorline theater</strong>
+          <p>12.5 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>AMC 16</strong>
+          <p>12.2 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>BW3 16</strong>
+          <p>13.4 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>MC Hammer 16</strong>
+          <p>14.1 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>AMC 3</strong>
+          <p>14.3 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>AMC 2</strong>
+          <p>14.7 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-movie.html" data-transition="slide-in">
+          <strong>AMC 10</strong>
+          <p>15 miles away</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  </body>
+</html>
--- a/test/components/index.html
+++ b/test/components/index.html
@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Testing</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="stylesheet" href="../../lib/css/base.css">
+    <link rel="stylesheet" href="../../lib/css/bars.css">
+    <link rel="stylesheet" href="../../lib/css/lists.css">
+    <link rel="stylesheet" href="../../lib/css/forms.css">
+    <link rel="stylesheet" href="../../lib/css/buttons.css">
+    <link rel="stylesheet" href="../../lib/css/chevrons.css">
+    <link rel="stylesheet" href="../../lib/css/counts.css">
+    <link rel="stylesheet" href="../../lib/css/segmented-controllers.css">
+    <link rel="stylesheet" href="../../lib/css/popovers.css">
+    <link rel="stylesheet" href="../../lib/css/sliders.css">
+    <link rel="stylesheet" href="../../lib/css/toggles.css">
+    <link rel="stylesheet" href="../../lib/css/push.css">
+    <script src="../../lib/js/push.js"></script>
+    <script src="../../lib/js/toggles.js"></script>
+    <script src="../../lib/js/sliders.js"></script>
+    <script src="../../lib/js/popovers.js"></script>
+    <script src="../../lib/js/segmented-controllers.js"></script>
+
+    <style>
+      [class*="bar"] {
+        position: relative;
+      }
+      .slider,
+      .slider li,
+      .slider li img {
+        width: 100%;
+      }
+    </style>
+
+  </head>
+
+<!-- ontouchstart property makes :active/:hover behaviors work on everything -->
+<body ontouchstart="">
+
+  <div class="content">
+
+  <header class="bar-title">
+    <ul class="segmented-controller">
+      <li class="active">
+        <a href="#item1">Thing one</a>
+      </li>
+      <li>
+        <a href="#item2">Thing two</a>
+      </li>
+    </ul>
+  </header>
+
+  <div>
+    <div id="item1" class="segmented-controller-item active"><p>section #1</p></div>
+    <div id="item2" class="segmented-controller-item"><p>section #2</p></div>
+  </div>
+
+
+  <!-- SLIDER ============================================================ -->
+  <div class="slider">
+    <ul>
+      <li>
+        <img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
+      </li>
+      <li>
+        <img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
+      </li>
+      <li>
+        <img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
+      </li>
+    </ul>
+  </div>
+   <div class="slider">
+    <ul>
+      <li>
+        <img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
+      </li>
+      <li>
+        <img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
+      </li>
+      <li>
+        <img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
+      </li>
+    </ul>
+  </div>
+
+  <!-- POPOVER ============================================================ -->
+  <div id="myPopover" class="popover">
+    <header class="popover-header">
+      <a class="button" href="#">
+        Open
+      </a>
+      <h3 class="title">Popover title</h3>
+      <a class="button" href="#">
+        Filter
+      </a>
+    </header>
+    <ul class="list">
+      <li>Item1</li>
+      <li>Item2</li>
+      <li>Item3</li>
+      <li class="list-divider">With counts</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
+      <li>Item2 <span class="count">1</span></li>
+      <li>Item3 <span class="count">1</span></li>
+      <li class="list-divider">With chevrons</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
+      <li>Item2 <span class="chevron"></span></li>
+      <li>Item3 <span class="chevron"></span></li>
+    </ul>
+  </div>
+
+  <!-- TITLEBAR ============================================================ -->
+
+  <!-- Title-bar left and right buttons -->
+  <header class="bar-title">
+    <a class="button button-prev" href="#">
+      Left
+    </a>
+    <h1 class="title">Title</h1>
+    <a class="button button-next" href="#">
+      Right
+    </a>
+  </header>
+
+  <!-- Title-bar -->
+  <header class="bar-title">
+    <h1 class="title"><a href="#myPopover">Title</a></h1>
+  </header>
+
+  <!-- Title-bar left button -->
+  <header class="bar-title">
+    <a class="button open-shelf" href="#">
+      Open fatty
+    </a>
+    <h1 class="title">Title</h1>
+  </header>
+
+  <!-- Title-bar right button -->
+  <header class="bar-title">
+    <h1 class="title">Title</h1>
+    <a class="button" href="#">
+      Filter
+    </a>
+  </header>
+
+  <div class="test"></div>
+
+  <!-- Title-bar right button -->
+  <header class="bar-title">
+    <ul class="segmented-controller">
+      <li class="active">
+        <a href="#">Thing one</a>
+      </li>
+      <li>
+        <a href="#">Thing two</a>
+      </li>
+      <li>
+        <a href="#">Thing three</a>
+      </li>
+    </ul>
+  </header>
+
+  <!-- Title-bar left button -->
+  <header class="bar-title" id="newshit">
+    <a class="button open-shelf" href="#">
+      Open
+    </a>
+    <ul class="segmented-controller">
+      <li>
+        <a href="#">Thing one</a>
+      </li>
+      <li class="active">
+        <a href="#">Thing two</a>
+      </li>
+    </ul>
+  </header>
+
+  <!-- Title-bar left button -->
+  <header class="bar-title">
+    <ul class="segmented-controller">
+      <li>
+        <a href="#">Thing one</a>
+      </li>
+      <li class="active">
+        <a href="#">Thing two</a>
+      </li>
+    </ul>
+    <a class="button" href="#">
+      Filter
+    </a>
+  </header>
+
+  <!-- Title-bar left button -->
+  <header class="bar-title">
+    <a class="button open-shelf" href="#">
+      Open
+    </a>
+    <ul class="segmented-controller">
+      <li>
+        <a href="#">Thing one</a>
+      </li>
+      <li class="active">
+        <a href="#">Thing two</a>
+      </li>
+    </ul>
+    <a class="button" href="#">
+      Filter
+    </a>
+  </header>
+
+  <!-- BAR-TAB ============================================================ -->
+
+  <!-- Bar-tab 5 -->
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item active">
+        <img class="tab-icon" src="../docs/img/icon-home.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-profile.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-messages.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-hamburger.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-settings.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Bar-tab 4 -->
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item active">
+        <img class="tab-icon" src="../docs/img/icon-home.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-profile.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-messages.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-settings.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Bar-tab 3 -->
+  <nav class="bar-tab">
+    <ul class="tab-inner">
+      <li class="tab-item active">
+        <img class="tab-icon" src="../docs/img/icon-home.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-messages.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+      <li class="tab-item">
+        <img class="tab-icon" src="../docs/img/icon-settings.png" alt="">
+        <div class="tab-label">test</div>
+      </li>
+    </ul>
+  </nav>
+
+
+  <!-- SEARCH BAR ============================================================ -->
+  <!-- Search bar -->
+  <div class="bar-standard">
+    <form>
+      <input type="search" placeholder="Search">
+    </form>
+  </div>
+
+
+  <!-- CONTROLLER BAR ============================================================ -->
+
+  <!-- Segmented controller as a bar -->
+  <nav class="bar-standard">
+    <ul class="segmented-controller">
+      <li>
+        <a href="#">Thing one</a>
+      </li>
+      <li class="active">
+        <a href="#">Thing two</a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Segmented controller as a bar w/ 3 options -->
+  <nav class="bar-standard">
+    <ul class="segmented-controller">
+      <li>
+        <a href="#">Thing one</a>
+      </li>
+      <li class="active">
+        <a href="#">Thing two</a>
+      </li>
+      <li>
+        <a href="#">Thing one</a>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- BUTTON BAR ============================================================ -->
+
+  <!-- Button bar -->
+  <div class="bar-standard">
+    <a class="button-block">Block level button</a>
+  </div>
+
+  <!-- Button bar main -->
+  <div class="bar-standard">
+    <a class="button-main button-block">Block level button</a>
+  </div>
+
+  <!-- Button bar positive -->
+  <div class="bar-standard">
+    <a class="button-positive button-block">Block level button</a>
+  </div>
+
+  <!-- Button bar negative -->
+  <div class="bar-standard">
+    <a class="button-negative button-block">Block level button</a>
+  </div>
+
+  <!-- BUTTONS ============================================================ -->
+
+  <!-- Standard buttons -->
+  <a class="button">Button</a>
+  <a class="button-main">Button</a>
+  <a class="button-positive">Button</a>
+  <a class="button-negative">Button</a>
+
+  <!-- Buttons w/ counts -->
+  <a class="button">Button <span class="count">1</span></a>
+  <a class="button-main">Button <span class="count">1</span></a>
+  <a class="button-positive">Button <span class="count">1</span></a>
+  <a class="button-negative">Button <span class="count">1</span></a>
+
+  <!-- Buttons at block level -->
+  <a class="button-block">Block level button</a>
+  <a class="button-main button-block">Block level button</a>
+  <a class="button-positive button-block">Block level button</a>
+  <a class="button-negative button-block">Block level button</a>
+
+  <!-- Buttons at block level w/ counts -->
+  <a class="button-block">Block level button <span class="count">1</span></a>
+  <a class="button-main button-block">Block level button <span class="count">1</span></a>
+  <a class="button-positive button-block">Block level button <span class="count">1</span></a>
+  <a class="button-negative button-block">Block level button <span class="count">1</span></a>
+
+  <!-- TOGGLE ============================================================ -->
+  <div class="toggle">
+    <div class="toggle-handle"></div>
+  </div>
+
+  <!-- COUNTS ============================================================ -->
+  <span class="count">1</span>
+  <span class="count-main">2</span>
+  <span class="count-positive">3</span>
+  <span class="count-negative">4</span>
+  <span class="count">5</span>
+
+  <!-- LIST ============================================================ -->
+  <ul class="list">
+    <li>Item1</li>
+    <li>Item2</li>
+    <li>Item3</li>
+    <li class="list-divider">With counts</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
+    <li>Item2 <span class="count">1</span></li>
+    <li>Item3 <span class="count">1</span></li>
+    <li class="list-divider">With chevrons</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
+    <li>Item2 <span class="chevron"></span></li>
+    <li>Item3 <span class="chevron"></span></li>
+    <li class="list-divider">With chevrons &amp; counts</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-main">1</span></li>
+    <li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li>
+    <li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
+    <li class="list-divider">With buttons</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
+    <li>Item2 <a class="button-main">Button</a></li>
+    <li>Item3 <a class="button-positive">Button</a></li>
+    <li>Item4 <a class="button-negative">Button</a></li>
+    <li class="list-divider">With a toggle</li>
+    <li>
+      Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
+      <div class="toggle">
+        <div class="toggle-handle"></div>
+      </div>
+    </li>
+    <li>
+      <a href="#">
+        Item2
+      </a>
+      <div class="toggle">
+        <div class="toggle-handle"></div>
+      </div>
+    </li>
+    <li>
+      Item3
+      <div class="toggle">
+        <div class="toggle-handle"></div>
+      </div>
+    </li>
+  </ul>
+
+  <ul class="list inset">
+    <li class="list-divider">Normal</li>
+    <li>Item1</li>
+    <li>Item2</li>
+    <li>Item3</li>
+    <li class="list-divider">With counts</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
+    <li>Item2 <span class="count">1</span></li>
+    <li>Item3 <span class="count">1</span></li>
+    <li class="list-divider">With chevrons</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
+    <li>Item2 <span class="chevron"></span></li>
+    <li>Item3 <span class="chevron"></span></li>
+    <li class="list-divider">With chevrons &amp; counts</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li>
+    <li>Item2 <span class="chevron"></span><span class="count">1</span></li>
+    <li>Item3 <span class="chevron"></span><span class="count">1</span></li>
+    <li class="list-divider">With buttons</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
+    <li>Item2 <a class="button-main">Button</a></li>
+    <li>Item3 <a class="button-positive">Button</a></li>
+    <li>Item4 <a class="button-negative">Button</a></li>
+    <li class="list-divider">With a toggle</li>
+    <li>
+      Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
+      <div class="toggle">
+        <div class="toggle-handle"></div>
+      </div>
+    </li>
+    <li>
+      Item2
+      <div class="toggle">
+        <div class="toggle-handle"></div>
+      </div>
+    </li>
+    <li>
+      Item3
+      <div class="toggle">
+        <div class="toggle-handle"></div>
+      </div>
+    </li>
+    <li class="list-divider">Bottom list-divider test</li>
+  </ul>
+
+  <!-- List with <a>'s -->
+  <ul class="inset list">
+    <li>
+      <a href="#">Item1</a>
+    </li>
+    <li>
+      <a href="#">Item2</a>
+    </li>
+  </ul>
+
+  <!-- SEGMENTED CONTROLLER ============================================================ -->
+
+  <!-- Segmented controller with 2 tabs -->
+  <ul class="segmented-controller">
+    <li><a href="#">Thing one</a></li>
+    <li class="active"><a href="#">Thing two</a></li>
+  </ul>
+
+  <!-- Segmented controller with 3 tabs -->
+  <ul class="segmented-controller">
+    <li><a href="#">Thing one</a></li>
+    <li><a href="#">Thing two</a></li>
+    <li class="active"><a href="#">Thing three</a></li>
+  </ul>
+
+  <!-- Segmented controller with 4 tabs -->
+  <ul class="segmented-controller">
+    <li><a href="#">Thing one</a></li>
+    <li><a href="#">Thing two</a></li>
+    <li class="active"><a href="#">Thing three</a></li>
+    <li><a href="#">Thing four</a></li>
+  </ul>
+
+  <!-- Segmented controller with 5 tabs -->
+  <ul class="segmented-controller">
+    <li><a href="#">Thing one</a></li>
+    <li><a href="#">Thing two</a></li>
+    <li class="active"><a href="#">Thing three</a></li>
+    <li><a href="#">Thing four</a></li>
+    <li><a href="#">Thing five</a></li>
+  </ul>
+
+  <!-- FORMS ============================================================ -->
+
+  <!-- Input -->
+  <form>
+    <input type="text" placeholder="Full name">
+    <input type="search" placeholder="Search">
+    <textarea rows="5"></textarea>
+    <a class="button button-block">Choose existing</a>
+  </form>
+
+  <!-- Input group -->
+  <form class="input-group">
+    <input type="text" placeholder="Full name">
+    <input type="email" placeholder="Email">
+    <input type="text" placeholder="Username">
+  </form>
+
+  <!-- Input group with labels-->
+  <form class="input-group">
+    <div class="input-row">
+      <label>Full name</label>
+      <input type="text" placeholder="Mister Ratchet">
+    </div>
+    <div class="input-row">
+      <label>Email</label>
+      <input type="email" placeholder="ratchetframework@gmail.com">
+    </div>
+    <div class="input-row">
+      <label>Username</label>
+      <input type="text" placeholder="goRatchet">
+    </div>
+  </form>
+
+  </div>
+
+</body>
+</html>
				`@ -0,0 +1 @@`
				.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#999}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:teal}.atv{color:#d14}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}