--- /dev/null
+# 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
\ No newline at end of file
--- /dev/null
+# 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** — when a feature of the project has been _identified as
+ broken_.
+
++ **Feature requests** — when you ask for a _new feature_ to be added to a
+ project.
+
++ **Contribution enquiries** — 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** — 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** — the latest `master` or
+ development branch may already contain a fix.
+
+3. **Isolate the demonstrable problem** — 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** — 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.
\ No newline at end of file
--- /dev/null
+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.
\ No newline at end of file
--- /dev/null
+#
+# 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
\ No newline at end of file
--- /dev/null
+# 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).
\ No newline at end of file
--- /dev/null
+/* Base styles
+-------------------------------------------------- */
+
+body {
+ position: static !important; /* Overrides the fixed positioning of body in Ratchet */
+ font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.6;
+ color: #333;
+ background: #fff;
+ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+ -webkit-text-size-adjust: 100%;
+}
+
+
+/* Typography
+-------------------------------------------------- */
+
+em {
+ font-style: italic;
+}
+
+strong {
+ font-weight: bold;
+}
+
+hr {
+ height: 0;
+ margin: 10px 0 30px;
+ border: solid #ddd;
+ border-width: 1px 0 0;
+ clear: both;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-rendering: optimizeLegibility;
+}
+
+
+/* Docs structural styles
+-------------------------------------------------- */
+.docs-outer-wrapper {
+ position: relative;
+}
+
+.docs-inner-wrapper {
+ width: 1000px;
+ margin: 0 auto;
+}
+
+/* Masthead (navigation)
+-------------------------------------------------- */
+
+.docs-masthead {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 100;
+ padding: 10px 0;
+ background-color: #fff;
+ border-bottom: 1px solid #ddd;
+ box-shadow: 0 0 5px rgba(0,0,0,.1);
+}
+
+.docs-masthead .docs-inner-wrapper {
+ line-height: 40px;
+}
+
+.docs-masthead-title {
+ font-weight: 700;
+ font-size: 21px;
+ text-transform: uppercase;
+ letter-spacing: 5px;
+}
+
+.docs-navigation {
+ float: right;
+ font-size: 15px;
+}
+
+.nav-item {
+ position: relative;
+ float: left;
+ margin-right: 30px;
+ list-style: none;
+}
+
+.nav-item:last-child {
+ margin-right: 0;
+}
+
+.nav-item a {
+ position: relative;
+ color: #777;
+ text-decoration: none;
+}
+
+.nav-item a:hover {
+ color: #555;
+}
+
+/* Give the components link a bit more room to fit the caret */
+.nav-item.nav-components {
+ margin-right: 45px;
+}
+
+/* Give the components link a down caret */
+.nav-components-link:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ width: 0;
+ height: 0;
+ top: 8px;
+ right: -15px;
+ margin-left: -4px;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #777;
+ border-left: 4px solid transparent;
+}
+
+/* The components list dropdown */
+.components-list {
+ position: absolute;
+ display: none;
+ top: 45px;
+ left: -20px;
+ z-index: -1;
+ padding: 10px 0;
+ line-height: 1.1;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid rgba(0,0,0,.2);
+ border-radius: 3px;
+ box-shadow: 0 0 8px rgba(0,0,0,.05);
+}
+
+.components-list.active {
+ z-index: 100;
+ display: block;
+}
+
+.components-list:before,
+.components-list:after {
+ content: '';
+ position: absolute;
+ left: 30px;
+ width: 0;
+ height: 0;
+}
+
+.components-list:before {
+ top: -11px;
+ margin-left: -11px;
+ border-right: 11px solid transparent;
+ border-bottom: 11px solid rgba(0,0,0,.3);
+ border-left: 11px solid transparent;
+}
+
+.components-list:after {
+ top: -10px;
+ margin-left: -10px;
+ border-right: 10px solid transparent;
+ border-bottom: 10px solid #fff;
+ border-left: 10px solid transparent;
+}
+
+.components-list li {
+ list-style: none;
+}
+
+.components-list li:last-child {
+ padding-bottom: 0;
+}
+
+.components-list li a {
+ display: block;
+ width: 150px;
+ padding: 10px 20px;
+}
+
+.components-list li a:hover {
+ color: #fff;
+ background-color: #1eb0e9;
+}
+
+/* Jumbo header
+-------------------------------------------------- */
+
+.docs-header {
+ height: 530px;
+ margin-top: 60px;
+ background-color: #02122b;
+ background-image: url(../img/header-bg.jpg);
+ background-size: cover;
+ box-shadow: inset 0 0 10px rgba(0,0,0,.6);
+}
+
+.docs-header-text {
+ position: relative;
+ z-index: 3;
+ top: 140px;
+ width: 800px;
+ margin: 0 auto;
+ color: #fff;
+ text-align: center;
+ text-shadow: 0 0 5px #000;
+ -webkit-animation: fadeintext 2s;
+ -moz-animation: fadeintext 2s;
+}
+
+.docs-header-subtitle {
+ margin-bottom: 35px;
+ font-size: 45px;
+ font-weight: 300;
+ line-height: 55px;
+}
+
+.docs-btn {
+ display: inline-block;
+ padding: 18px 40px;
+ color: #fff;
+ font-size: 24px;
+ font-weight: 700;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+ text-decoration: none;
+ line-height: 1;
+ background-color: #f26629; /* Old browsers */
+ background-image: -moz-linear-gradient(top, #f95e0c 0%, #e53003 100%); /* FF3.6+ */
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#e53003)); /* Chrome,Safari4+ */
+ background-image: -webkit-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* Chrome10+,Safari5.1+ */
+ background-image: -o-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* Opera 11.10+ */
+ background-image: -ms-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* IE10+ */
+ background-image: linear-gradient(to bottom, #f95e0c 0%,#e53003 100%); /* W3C */
+ border-radius: 3px;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 5px rgba(0,0,0,.2);
+}
+
+.docs-btn:hover {
+ color: #fff;
+ background-color: #ff7234; /* Old browsers */
+ background-image: -moz-linear-gradient(top, #f95e0c 0%, #cd2a02 100%); /* FF3.6+ */
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#cd2a02)); /* Chrome,Safari4+ */
+ background-image: -webkit-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* Chrome10+,Safari5.1+ */
+ background-image: -o-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* Opera 11.10+ */
+ background-image: -ms-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* IE10+ */
+ background-image: linear-gradient(to bottom, #f95e0c 0%,#cd2a02 100%); /* W3C */
+}
+
+.docs-btn:active {
+ padding: 19px 40px 17px;
+ background-color: #cd2a02;
+ background-image: none;
+ box-shadow: inset 0 0 5px rgba(0,0,0,.4);
+}
+
+/* Styles for the social media buttons */
+.social {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px 0;
+ background-color: rgba(0,0,0,.3);
+ -webkit-animation: fadeinsocial 2.5s;
+ -moz-animation: fadeinsocial 2.5s;
+}
+
+.social ul {
+ height: 20px;
+ padding-left: 50px;
+ list-style: none;
+ text-align: center;
+}
+
+.social li {
+ display: inline-block;
+ height: 20px;
+ padding: 0;
+ vertical-align: top;
+}
+
+/* Overiding our framework button styles so our social buttons aren't messed up */
+.twitter-follow-button,
+.twitter-follow-button:hover,
+.twitter-follow-button:active,
+.twitter-share-button,
+.twitter-share-button:hover,
+.twitter-share-button:active {
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ background: none;
+ box-shadow: none;
+}
+
+
+/* iPhone previewer
+-------------------------------------------------- */
+
+.iphone {
+ position: relative;
+ top: 50px;
+ float: right;
+ width: 375px;
+ height: 806px;
+ font-family: "Helvetica Neue", sans-serif;
+ background-image: url("../img/iphone.png");
+}
+
+.iphone-fixed,
+.iphone-bottom {
+ left: 50%;
+ margin-left: 125px;
+}
+
+.iphone-fixed {
+ position: fixed;
+ top: 30px;
+}
+
+.iphone-bottom {
+ position: absolute;
+ top: auto;
+ bottom: 130px;
+}
+
+.iphone .iphone-content {
+ position: absolute;
+ top: 147px;
+ left: 27px;
+ width: 320px;
+ height: 548px;
+ overflow: hidden;
+ background-color: white;
+}
+
+.iphone .content,
+.component-example .content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.component-example .content {
+ position: relative;
+}
+
+/* Mad override to avoid it being styled like the block level link */
+.component-example .list a[data-transition="slide-out"],
+.iphone .list a[data-transition="slide-out"] {
+ padding: 0;
+ display: inline;
+ margin: 0;
+ color: #0882f0;
+}
+
+/* Content layout
+-------------------------------------------------- */
+
+.content-section {
+ position: relative;
+ padding-top: 80px;
+}
+
+/* Section header
+-------------------------------------------------- */
+
+.section-header {
+ padding-bottom: 30px;
+ text-align: center;
+ border-bottom: 1px solid #ddd;
+}
+
+.section-title {
+ font-size: 60px;
+ font-weight: 700;
+ line-height: 1;
+ color: #333;
+}
+
+.section-description {
+ font-weight: 300;
+ font-size: 24px;
+ color: #777;
+}
+
+.section-informational {
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ background-color: #fafafa;
+ padding-bottom: 70px;
+}
+
+/* Getting started & page setup
+-------------------------------------------------- */
+
+.steps {
+ overflow: hidden;
+ padding-top: 40px;
+}
+
+.steps .step {
+ float: left;
+ width: 306px;
+ margin-right: 40px;
+ list-style: none;
+}
+
+.step-title {
+ font-size: 18px;
+ font-weight: 700;
+}
+
+.step-description {
+ color: #777;
+ margin-bottom: 10px;
+}
+
+.steps .step:last-child {
+ margin-right: 0;
+}
+
+/* Components
+-------------------------------------------------- */
+
+.section-components {
+ padding-bottom: 350px;
+ background-color: #fff;
+}
+
+.component {
+ position: relative;
+ padding-top: 80px;
+ width: 550px;
+ margin-top: 1px;
+ font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
+ font-weight: 300;
+ opacity: .3; /* Fade content back until the user scrolls to it. */
+ -webkit-transition: opacity .2s ease-in-out;
+}
+
+.component:last-child {
+ margin-bottom: 320px;
+}
+
+/* Active class applied when the specific component is in focus */
+.component.active {
+ opacity: 1;
+}
+
+.component-title {
+ font-size: 28px;
+ font-weight: 300;
+ line-height: 35px;
+}
+
+.component-description {
+ margin-bottom: 13px;
+ color: #777;
+ font-size: 18px;
+ line-height: 26px;
+ font-weight: 300;
+}
+
+.component-note {
+ margin-top: 10px;
+ color: #999;
+ font-size: 14px;
+ line-height: 18px;
+ font-style: italic;
+}
+
+.component-title + .component-example {
+ margin-top: 13px;
+}
+
+.content-section .prettyprint,
+.content-section .instruction-code {
+ margin-top: 10px;
+ padding: 10px;
+ overflow-x: auto;
+ font-size: 13px;
+ font-family: monaco, menlo, monospace;
+ color: #777;
+ background-color: #fafafa;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+}
+
+.prettyprint + .component-description,
+.component-note + .component-description {
+ margin-top: 36px;
+}
+
+/* Content specific styles
+-------------------------------------------------- */
+
+/* Make the example bars stay put in the docs */
+.iphone [class*="bar"] {
+ position: absolute;
+}
+
+/* Component examples on mobile */
+.component-example {
+ position: relative;
+ display: none;
+ margin-bottom: 20px;
+ font-family: "Helvetica Neue", sans-serif;
+ font-weight: normal;
+}
+
+.component-example-fullbleed {
+ margin-right: -20px;
+ margin-left: -20px;
+}
+
+/* Bar examples */
+.component-example [class*="bar"] {
+ position: relative;
+}
+
+.component-example .bar-header-secondary {
+ top: 0;
+}
+
+/* List examples */
+.component-example .list {
+ margin-left: 0;
+ margin-right: 0;
+ background-color: #fff;
+}
+
+.component-example .list li {
+ padding-right: 70px;
+ padding-left: 20px;
+}
+
+.component-example .list.inset {
+ margin: 0;
+}
+
+.iphone .list .segmented-controller-item,
+.component-example .list .segmented-controller-item {
+ border-bottom-width: 0;
+}
+
+.iphone .list {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+/* Button examples */
+#buttons [class*="button"],
+#buttonsCounts [class*="button"],
+#blockButtons [class*="button"] {
+ margin-bottom: 10px;
+}
+
+#buttons [class*="button"]:last-child,
+#buttonsCounts [class*="button"]:last-child,
+#blockButtons [class*="button"]:last-child {
+ margin-bottom: 0;
+}
+
+#blockButtonsInPhone .button-block {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+#push .component-example {
+ height: 108px;
+ overflow: hidden;
+}
+
+#push .component-example .list {
+ border-left: 1px solid rgba(0, 0, 0, .1);
+ border-right: 1px solid rgba(0, 0, 0, .1);
+}
+
+.iphone .btn-section .button {
+ display: block;
+ margin: 0 auto;
+}
+
+.iphone .block-btn-section .block-button {
+ margin-top: 10px;
+}
+
+.iphone .block-btn-section .block-button:first-child {
+ margin-top: 100px;
+}
+
+#buttonsInPhone,
+#buttonsCountsInPhone {
+ text-align: center;
+}
+
+#buttonsInPhone [class*="button"],
+#buttonsCountsInPhone [class*="button"] {
+ margin-top: 10px;
+}
+
+#blockButtonsInPhone [class*="button"] {
+ margin-top: 5px;
+}
+
+/* Counts examples */
+#countsInPhone {
+ text-align: center;
+}
+
+#countsInPhone [class*="count"] {
+ margin-top: 10px;
+}
+
+/* Form examples */
+.component-example form [class*="button"] {
+ margin-bottom: 0;
+}
+
+.component .input-group label {
+ padding: 9px 10px 9px 13px;
+}
+
+/* Toggle examples */
+#toggles .toggle {
+ display: inline-block;
+ margin-right: 10px;
+}
+#togglesInPhone .toggle {
+ margin: 10px auto 0;
+}
+
+/* Popover examples */
+.component-example .popover {
+ position: relative;
+ display: block;
+ top: 0;
+ margin-top: 50px;
+ opacity: 1;
+}
+#popoversInPhone .popover {
+ position: absolute;
+ display: block !important;
+ top: 72px;
+ opacity: 1 !important;
+}
+
+/* Slider examples */
+.component-example-fullbleed .slider,
+.component-example-fullbleed .slider li,
+.component-example-fullbleed .slider li img,
+#slidersInPhone .slider,
+#slidersInPhone .slider li,
+#slidersInPhone .slider li img {
+ width: 100%;
+}
+
+#slidersInPhone .slider {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.slider .slide-text {
+ position: absolute;
+ top: 45%;
+ left: 0;
+ width: 100%;
+ color: #fff;
+ text-align: center;
+ font-size: 24px;
+ font-weight: 300;
+ text-shadow: 0 0 10px rgba(0,0,0,.5);
+}
+
+/* Give inset components in the iphone correct margin */
+.iphone .list.inset,
+#segmentedControllersInPhone .segmented-controller,
+#formsInPhone form,
+#formsWithInputGroupInPhone form,
+#formsWithInputGroupAndLabelsInPhone form {
+ margin: 10px;
+}
+
+#pushInPhone .list {
+ margin-top: 44px;
+}
+
+/* Footer
+-------------------------------------------------- */
+
+.docs-footer {
+ padding-bottom: 100px;
+ overflow: hidden;
+ color: #fff;
+ background-color: #151515;
+}
+
+.docs-footer .docs-inner-wrapper {
+ text-align: center
+}
+
+.docs-footer h3 {
+ font-size: 24px;
+ color: #fefefe;
+ font-weight: 700;
+}
+
+.docs-footer p {
+ font-size: 18px;
+ color: #777;
+}
+
+.avatars {
+ display: block;
+ width: 590px;
+ margin: 30px auto 0;
+}
+
+.avatars li {
+ float: left;
+ height: 170px;
+ width: 170px;
+ margin-right: 40px;
+ list-style: none;
+}
+
+.avatars .avatar {
+ display: block;
+ height: 100%;
+ width: 100%;
+ margin-bottom: 15px;
+ overflow: hidden;
+ border-radius: 100%;
+}
+
+.avatars li:last-child {
+ margin-right: 0;
+}
+
+.avatars img {
+ width: 170px;
+ height: 170px;
+}
+
+/* Banner for Mozilla and IE about component rendering poorly
+------------------------------------------------------------- */
+.notice-banner {
+ cursor: pointer;
+ height: 0;
+ opacity: 0;
+ padding: 0;
+ color: #333;
+ font-size: 16px;
+ text-align: center;
+ background-color: #fff9c4; /* Old browsers */
+ background-image: -moz-linear-gradient(top, #fff9c4 0%, #fff38d 100%); /* FF3.6+ */
+ background-image: -ms-linear-gradient(top, #fff9c4 0%,#fff38d 100%); /* IE10+ */
+ background-image: linear-gradient(to bottom, #fff9c4 0%,#fff38d 100%); /* W3C */
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
+ -moz-animation: shownotice 1s infinite;
+}
+
+/* Media queries
+-------------------------------------------------- */
+
+@media only screen and (max-width: 1039px) {
+ .docs-inner-wrapper {
+ width: 920px;
+ }
+
+ .docs-header-text {
+ width: 700px;
+ }
+
+ .steps .step {
+ width: 280px;
+ }
+
+ .component {
+ width: 500px;
+ }
+
+ .iphone-fixed,
+ .iphone-bottom {
+ margin-left: 85px;
+ }
+}
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+ .docs-header-text,
+ .docs-inner-wrapper {
+ width: 700px;
+ }
+
+ .docs-header {
+ height: 400px;
+ }
+
+ .docs-header-text {
+ top: 75px;
+ }
+
+ .steps .step {
+ width: 205px;
+ }
+
+ .component {
+ width: 300px;
+ }
+
+ .iphone-fixed,
+ .iphone-bottom {
+ margin-left: -25px;
+ }
+}
+@media only screen and (max-width: 767px) {
+ .docs-outer-wrapper,
+ .docs-inner-wrapper,
+ .docs-header-text,
+ .docs-content,
+ .component {
+ width: auto;
+ }
+
+ .docs-inner-wrapper {
+ padding-right: 20px;
+ padding-left: 20px;
+ }
+
+ /* Have the masthead scroll away instead of being fixed */
+ .docs-masthead {
+ position: absolute;
+ padding: 2px 0 1px;
+ }
+
+ .docs-masthead-title {
+ font-size: 18px;
+ text-align: center;
+ }
+
+ /* Hide the navigation on mobile. Scroll away! */
+ .docs-navigation {
+ display: none;
+ }
+
+ .docs-header {
+ height: 320px;
+ margin-top: 44px;
+ }
+
+ .docs-header-text {
+ top: 50px;
+ }
+
+ .docs-header-subtitle {
+ margin-bottom: 18px;
+ font-size: 24px;
+ line-height: 30px;
+ }
+
+ .docs-btn {
+ width: 100%;
+ padding: 15px 0;
+ font-size: 18px;
+ }
+
+ .docs-btn:active {
+ padding: 16px 0 14px;
+ }
+
+ .social ul {
+ height: auto;
+ }
+
+ .social li {
+ padding-bottom: 15px;
+ }
+
+ .social li:last-child {
+ padding-bottom : 0;
+ }
+
+ .content-section {
+ padding-top: 50px;
+ }
+
+ .section-header {
+ padding-bottom: 50px;
+ }
+
+ .section-title {
+ margin-bottom: 5px;
+ font-size: 40px;
+ }
+
+ .section-description {
+ font-size: 18px;
+ line-height: 24px;
+ }
+
+ .section-components {
+ padding-bottom: 0px;
+ }
+
+ .section-informational {
+ padding-bottom: 70px;
+ }
+
+ .steps .step {
+ float: none;
+ width: auto;
+ margin: 0 0 30px 0;
+ }
+
+ .steps .step:last-child {
+ margin: 0;
+ }
+
+ .notice-banner {
+ position: relative;
+ top: 0;
+ font-size: 14px;
+ line-height: 18px;
+ }
+
+ .notice-banner:after {
+ display: none;
+ }
+
+ .component {
+ padding: 50px 20px;
+ margin-left: -20px;
+ margin-right: -20px;
+ opacity: 1;
+ border-bottom: 1px solid #ddd;
+ }
+
+ .component:last-child {
+ margin-bottom: 80px;
+ }
+
+ .component-example {
+ display: block;
+ }
+
+ /* Hacky way to get parent of slider position absolute for smooth sliding */
+ #sliders .slider {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 10000;
+ }
+ #sliders .prettyprint:not(.js) {
+ margin-top: 230px;
+ }
+
+ .avatars {
+ overflow: hidden;
+ width: 280px;
+ margin: 10px auto 0;
+ }
+
+ .avatars li {
+ height: 86px;
+ width: 86px;
+ margin-right: 10px;
+ }
+
+ .avatars li:last-child {
+ margin-right: 0;
+ }
+
+ .avatars img {
+ width: 86px;
+ height: 86px;
+ }
+
+ /* Hide the iPhone on mobile */
+ .iphone {
+ display: none;
+ }
+}
+
+@media only screen and (max-width: 320px) {
+ .docs-header-text {
+ top: 30px;
+ }
+}
+
+/* Animations
+-------------------------------------------------- */
+
+@-webkit-keyframes fadeintext {
+ 0% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ }
+ 50% {
+ opacity: 0;
+ -webkit-transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -webkit-transform: translateY(0);
+ }
+}
+
+@-webkit-keyframes fadeinsocial {
+ 0% {
+ opacity: 0;
+ }
+ 85% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@-moz-keyframes fadeintext {
+ 0% {
+ opacity: 0;
+ -moz-transform: translateY(20px);
+ }
+ 50% {
+ opacity: 0;
+ -moz-transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ -moz-transform: translateY(0);
+ }
+}
+
+@-moz-keyframes fadeinsocial {
+ 0% {
+ opacity: 0;
+ }
+ 85% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@-moz-keyframes shownotice {
+ 0% {
+ min-height: 30px;
+ padding: 20px 0;
+ opacity: 1;
+ }
+ 100% {
+ min-height: 30px;
+ padding: 20px 0;
+ opacity: 1;
+ }
+}
+
+/* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla
+-------------------------------------------------- */
+
+/* Bars.css */
+[class*="bar-"] {
+ -moz-box-sizing: border-box;
+}
+.bar-title,
+.tab-inner {
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+}
+.tab-item {
+ -moz-box-sizing: border-box;
+ -moz-box-flex: 1;
+}
+.bar-title [class*="button"] {
+ -moz-box-flex: 0;
+}
+.bar-title .segmented-controller {
+ -moz-box-flex: 1;
+}
+
+ /* forms.css */
+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 {
+ -moz-box-sizing: border-box;
+}
+
+/* lists.css */
+.list.inset {
+ -moz-box-sizing: border-box;
+}
+
+/* popovers.css */
+.popover-header {
+ display: -moz-box;
+}
+
+/* segmented-controller.css*/
+.segmented-controller {
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+}
+.segmented-controller li {
+ -moz-box-flex: 1;
+}
+
+/* Get tab-bar to look 1/2way decent */
+.iphone .tab-item {
+ min-width: 64px;
+}
\ No newline at end of file
--- /dev/null
+.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}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Ratchet</title>
+ <meta name="description" content="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.">
+ <meta name="author" content="Dave Gamache, Connor Sears, and Jacob Thornton">
+ <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="../dist/ratchet.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>
+
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114x114.png">
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72x72.png">
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/apple-touch-icon-57x57.png">
+
+ <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+ <script src="js/prettify.js"></script>
+ <script src="../dist/ratchet.js"></script>
+ <script src="js/docs.js"></script>
+ <script src="js/fingerblast.js"></script>
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-36050008-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+
+ </head>
+ <body ontouchstart="">
+
+ <!-- Masthead & navigation -->
+ <nav class="docs-outer-wrapper docs-masthead">
+ <div class="docs-inner-wrapper">
+ <ul class="docs-navigation">
+ <li class="nav-item"><a href="#gettingStarted">Getting started</a></li>
+ <li class="nav-item nav-components">
+ <a data-ignore="push" class="nav-components-link" href="">Components</a>
+ <ul class="components-list">
+ <li><a href="#bars">Bars</a></li>
+ <li><a href="#lists">Lists</a></li>
+ <li><a href="#buttons">Buttons</a></li>
+ <li><a href="#segmentedControllers">Segmented controllers</a></li>
+ <li><a href="#counts">Counts</a></li>
+ <li><a href="#forms">Forms</a></li>
+ <li><a href="#toggles">Toggles</a></li>
+ <li><a href="#popovers">Popovers</a></li>
+ <li><a href="#sliders">Sliders</a></li>
+ <li><a href="#push">Push</a></li>
+ </ul>
+ </li>
+ <li class="nav-item"><a href="#pageSetup">Page setup</a></li>
+ <li data-ignore="push" class="nav-item"><a href="http://github.com/maker/ratchet">View on Github</a></li>
+ </ul>
+ <h1 class="docs-masthead-title">Ratchet</h1>
+ </div>
+ </nav>
+
+ <!-- Jumbo header -->
+ <header class="docs-outer-wrapper docs-header">
+ <div class="docs-inner-wrapper">
+ <hgroup class="docs-header-text">
+ <h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS and JS components.</h2>
+ <a data-ignore="push" href="#" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V1.0']);">Download Ratchet</a>
+ </hgroup>
+ </div>
+ <section class="social">
+ <ul>
+ <li>
+ <iframe src="http://ghbtns.com/github-btn.html?user=maker&repo=ratchet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+ </li>
+ <li>
+ <a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://maker.github.com/ratchet/" data-text="Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components." data-via="GoRatchet">Tweet</a>
+ <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+ </li>
+ <li><a data-ignore="push" href="https://twitter.com/GoRatchet" class="twitter-follow-button" data-show-count="true">
+ Follow @GoRatchet</a>
+ <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+ </li>
+ </ul>
+ </section>
+ </header>
+
+ <div class="docs-outer-wrapper docs-content">
+ <section class="content-section section-informational" id="gettingStarted">
+ <div class="docs-inner-wrapper">
+ <div class="section-header">
+ <h2 class="section-title">Getting started</h2>
+ <p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
+ </div>
+
+ <ol class="steps">
+ <li class="step">
+ <h3 class="step-title">1. Create your pages</h3>
+ <p class="step-description">Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own.</p>
+ </li>
+ <li class="step">
+ <h3 class="step-title">2. Connect pages with push.js</h3>
+ <p class="step-description">Read about <a href="#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
+ </li>
+ <li class="step">
+ <h3 class="step-title">3. Save the prototype to your phone</h3>
+ <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <img class="share-icon" src="img/icon-share.png"> button and "Add to Home Screen".</p>
+ </li>
+ </ol>
+ </div>
+ </section>
+
+ <!-- Banner for Mozilla/IE -->
+ <div class="notice-banner">
+ <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
+ </div>
+
+ <!--[if IE]>
+ <div class="notice-banner">
+ <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
+ </div>
+ <![endif]-->
+
+
+ <!-- Components -->
+ <section class="docs-outer-wrapper content-section section-components">
+ <div class="docs-inner-wrapper">
+ <div class="section-header">
+ <h2 class="section-title">Components</h2>
+ <p class="section-description">Design patterns that serve as basic building blocks.</p>
+ </div>
+ <div class="iphone">
+ <div class="iphone-content">
+ <div id="iwindow">
+ <header class="bar-title">
+ <h1 class="title">Title</h1>
+ </header>
+ </div>
+ </div>
+ </div>
+
+ <!-- Bars -->
+ <article class="component active" id="bars">
+ <h3 class="component-title">Title bar</h3>
+ <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <header class="bar-title">
+ <h1 class="title">Title</h1>
+ </header>
+ </div>
+
+<pre class="prettyprint">
+<header class="bar-title">
+ <h1 class="title">Title</h1>
+</header>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">Title bar with buttons</h3>
+ <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <header class="bar-title">
+ <a class="button">
+ Left
+ </a>
+ <h1 class="title">Title</h1>
+ <a class="button">
+ Right
+ </a>
+ </header>
+ </div>
+
+<pre class="prettyprint">
+<header class="bar-title">
+ <a class="button" href="#">
+ Left
+ </a>
+ <h1 class="title">Title</h1>
+ <a class="button" href="#">
+ Right
+ </a>
+</header>
+</pre>
+
+ </article>
+ <article class="component">
+ <h3 class="component-title">Title bar with directional buttons</h3>
+ <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <header class="bar-title">
+ <a class="button-prev">
+ Previous
+ </a>
+ <h1 class="title">Title</h1>
+ <a class="button-next">
+ Next
+ </a>
+ </header>
+ </div>
+
+<pre class="prettyprint">
+<header class="bar-title">
+ <a class="button-prev" href="#">
+ Previous
+ </a>
+ <h1 class="title">Title</h1>
+ <a class="button-next" href="#">
+ Next
+ </a>
+</header>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">Title bar with segmented controller</h3>
+ <p class="component-description">Title bars can also house segmented controllers (with or without accompanying buttons). It all uses flex-box to create perfectly even spacing no matter their labels.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <header class="bar-title">
+ <a class="button">
+ Left
+ </a>
+ <ul class="segmented-controller">
+ <li class="active">
+ <a>One</a>
+ </li>
+ <li>
+ <a>Two</a>
+ </li>
+ <li>
+ <a>Three</a>
+ </li>
+ </ul>
+ <a class="button">
+ Right
+ </a>
+ </header>
+ </div>
+
+<pre class="prettyprint">
+<header class="bar-title">
+ <a class="button" href="#">
+ Left
+ </a>
+ <ul class="segmented-controller">
+ <li class="active">
+ <a href="#">One</a>
+ </li>
+ <li>
+ <a href="#">Two</a>
+ </li>
+ <li>
+ <a href="#">Three</a>
+ </li>
+ </ul>
+ <a class="button" href="#">
+ Right
+ </a>
+</header>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">Tab bar</h3>
+ <p class="component-description">Icons should be around 24px by 18px. The gradient on an icon starts with pure white and goes to #e5e5e5 at the bottom.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <nav class="bar-tab">
+ <ul class="tab-inner">
+ <li class="tab-item active">
+ <a>
+ <img class="tab-icon" src="img/icon-home.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a>
+ <img class="tab-icon" src="img/icon-profile.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a>
+ <img class="tab-icon" src="img/icon-messages.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a>
+ <img class="tab-icon" src="img/icon-hamburger.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a href="http://starwars.com">
+ <img class="tab-icon" src="img/icon-settings.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+
+<pre class="prettyprint">
+<nav class="bar-tab">
+ <ul class="tab-inner">
+ <li class="tab-item active">
+ <a href="">
+ <img class="tab-icon" src="img/icon-home.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a href="">
+ <img class="tab-icon" src="img/icon-profile.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a href="">
+ <img class="tab-icon" src="img/icon-messages.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a href="">
+ <img class="tab-icon" src="img/icon-hamburger.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ <li class="tab-item">
+ <a href="">
+ <img class="tab-icon" src="img/icon-settings.png">
+ <div class="tab-label">Label</div>
+ </a>
+ </li>
+ </ul>
+</nav>
+</pre>
+
+ <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
+ <p class="component-note"><strong>Credit:</strong> Icons by Marc Haumann and Spencer Cohen from The Noun Project</p>
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">Standard bars</h3>
+ <p class="component-description">Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controllers (see following examples).</p>
+
+ <div class="component-example component-example-fullbleed">
+ <!-- Segmented controller in standard bar fixed to top -->
+ <nav class="bar-standard">
+ <ul class="segmented-controller">
+ <li class="active">
+ <a>Thing one</a>
+ </li>
+ <li>
+ <a>Thing two</a>
+ </li>
+ <li>
+ <a>Thing three</a>
+ </li>
+ </ul>
+ </nav>
+
+ <!-- Block button in standard bar fixed below top bar -->
+ <div class="bar-standard bar-header-secondary">
+ <a class="button-block">Block level button</a>
+ </div>
+ </div>
+
+<pre class="prettyprint">
+<!-- Segmented controller in standard bar fixed to top -->
+<nav class="bar-standard">
+ <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>
+</nav>
+<div class="bar-standard bar-header-secondary">
+ <a class="button-block">Block level button</a>
+</div>
+</pre>
+
+ </article>
+
+ <!-- Lists -->
+ <article class="component" id="lists">
+ <h3 class="component-title">Lists</h3>
+ <p class="component-description">Lists can be used for organizing data, showing collections of links or a series of controls.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <ul class="list">
+ <li>List item 1</li>
+ <li>List item 2</li>
+ <li class="list-divider">List Divider</li>
+ <li>List item 3</li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list">
+ <li>List item 1</li>
+ <li>List item 2</li>
+ <li class="list-divider">List Divider</li>
+ <li>List item 3</li>
+</ul>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">List with chevrons</h3>
+ <p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the list item is linked.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <ul class="list">
+ <li>
+ <a>
+ List item 1
+ <span class="chevron"></span>
+ </a>
+ </li>
+ <li>
+ <a>
+ List item 2
+ <span class="chevron"></span>
+ </a>
+ </li>
+ <li>
+ <a>
+ List item 3
+ <span class="chevron"></span>
+ </a>
+ </li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list">
+ <li>
+ <a href="#">
+ List item 1
+ <span class="chevron"></span>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ List item 2
+ <span class="chevron"></span>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ List item 3
+ <span class="chevron"></span>
+ </a>
+ </li>
+</ul>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">List with counts</h3>
+
+ <div class="component-example component-example-fullbleed">
+ <ul class="list">
+ <li>List item 1 <span class="count">4</span></li>
+ <li>List item 2 <span class="count">1</span></li>
+ <li>List item 3 <span class="count">5</span></li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list">
+ <li>List item 1 <span class="count">4</span></li>
+ <li>List item 2 <span class="count">1</span></li>
+ <li>List item 3 <span class="count">5</span></li>
+</ul>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">List with counts and chevrons</h3>
+
+ <div class="component-example component-example-fullbleed">
+ <ul class="list">
+ <li>
+ <a>
+ List item 1
+ <span class="chevron"></span>
+ <span class="count">4</span>
+ </a>
+ </li>
+ <li>
+ <a>
+ List item 2
+ <span class="chevron"></span>
+ <span class="count">1</span>
+ </a>
+ </li>
+ <li>
+ <a>
+ List item 3
+ <span class="chevron"></span>
+ <span class="count">5</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list">
+ <li>
+ <a href="#">
+ List item 1
+ <span class="chevron"></span>
+ <span class="count">4</span>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ List item 2
+ <span class="chevron"></span>
+ <span class="count">1</span>
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ List item 3
+ <span class="chevron"></span>
+ <span class="count">5</span>
+ </a>
+ </li>
+</ul>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">List with buttons</h3>
+
+ <div class="component-example component-example-fullbleed">
+ <ul class="list">
+ <li>List item 1 <a class="button">Button</a></li>
+ <li>List item 2 <a class="button-main">Button</a></li>
+ <li>List item 3 <a class="button-positive">Button</a></li>
+ <li>List item 4 <a class="button-negative">Button</a></li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list">
+ <li>List item 1 <a class="button">Button</a></li>
+ <li>List item 2 <a class="button-main">Button</a></li>
+ <li>List item 3 <a class="button-positive">Button</a></li>
+ <li>List item 4 <a class="button-negative">Button</a></li>
+</ul>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">List with toggles</h3>
+
+ <div class="component-example component-example-fullbleed">
+ <ul class="list">
+ <li>
+ List item 1
+ <div class="toggle">
+ <div class="toggle-handle"></div>
+ </div>
+ </li>
+ <li>
+ List item 2
+ <div class="toggle active">
+ <div class="toggle-handle"></div>
+ </div>
+ </li>
+ <li>
+ List item 3
+ <div class="toggle">
+ <div class="toggle-handle"></div>
+ </div>
+ </li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list">
+ <li>
+ List item 1
+ <div class="toggle">
+ <div class="toggle-handle"></div>
+ </div>
+ </li>
+ <li>
+ List item 2
+ <div class="toggle active">
+ <div class="toggle-handle"></div>
+ </div>
+ </li>
+ <li>
+ List item 3
+ <div class="toggle">
+ <div class="toggle-handle"></div>
+ </div>
+ </li>
+</ul>
+</pre>
+
+ </article>
+
+ <article class="component">
+ <h3 class="component-title">Inset list</h3>
+
+ <div class="component-example">
+ <ul class="list inset">
+ <li>List item 1</li>
+ <li>List item 2</li>
+ <li class="list-divider">List Divider</li>
+ <li>List item 3</li>
+ <li>List item 4</li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="list inset">
+ <li>List item 1</li>
+ <li>List item 2</li>
+ <li class="list-divider">List Divider</li>
+ <li>List item 3</li>
+ <li>List item 4</li>
+</ul>
+</pre>
+
+ </article>
+
+ <!-- Buttons -->
+ <article class="component" id="buttons">
+ <h3 class="component-title">Buttons</h3>
+ <p class="component-description">Buttons come in four flavors and should be used for user actions.</p>
+
+ <div class="component-example">
+ <a class="button">Button</a>
+ <a class="button-main">Button</a>
+ <a class="button-positive">Button</a>
+ <a class="button-negative">Button</a>
+ </div>
+
+<pre class="prettyprint">
+<a class="button">Button</a>
+<a class="button-main">Button</a>
+<a class="button-positive">Button</a>
+<a class="button-negative">Button</a>
+</pre>
+
+ </article>
+
+ <article class="component" id="buttonsCounts">
+ <h3 class="component-title">Buttons with counts</h3>
+
+ <div class="component-example">
+ <a class="button">Count button<span class="count">1</span></a>
+ <a class="button-main">Count button<span class="count">1</span></a>
+ <a class="button-positive">Count button<span class="count">1</span></a>
+ <a class="button-negative">Count button<span class="count">1</span></a>
+ </div>
+
+<pre class="prettyprint">
+<a class="button">Count button<span class="count">1</span></a>
+<a class="button-main">Count button<span class="count">1</span></a>
+<a class="button-positive">Count button<span class="count">1</span></a>
+<a class="button-negative">Count button<span class="count">1</span></a>
+</pre>
+
+ </article>
+
+ <article class="component" id="blockButtons">
+ <h3 class="component-title">Block buttons</h3>
+
+ <div class="component-example">
+ <a class="button-block">Block button</a>
+ <a class="button-main button-block">Block button</a>
+ <a class="button-positive button-block">Block button</a>
+ <a class="button-negative button-block">Block button</a>
+ </div>
+
+<pre class="prettyprint">
+<a class="button-block">Block button</a>
+<a class="button-main button-block">Block button</a>
+<a class="button-positive button-block">Block button</a>
+<a class="button-negative button-block">Block button</a>
+</pre>
+
+ </article>
+
+ <!-- Segmented Controller -->
+ <article class="component" id="segmentedControllers">
+ <h3 class="component-title">Segmented controller</h3>
+ <p class="component-description">Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.</p>
+
+ <div class="component-example">
+ <ul class="segmented-controller">
+ <li class="active">
+ <a href="#item1mobile">Thing one</a>
+ </li>
+ <li>
+ <a href="#item2mobile">Thing two</a>
+ </li>
+ <li>
+ <a href="#item3mobile">Thing three</a>
+ </li>
+ </ul>
+ <ul class="inset list">
+ <li id="item1mobile" class="segmented-controller-item active">
+ Item 1
+ </li>
+ <li id="item2mobile" class="segmented-controller-item">
+ Item 2
+ </li>
+ <li id="item3mobile" class="segmented-controller-item">
+ Item 3
+ </li>
+ </ul>
+ </div>
+
+<pre class="prettyprint">
+<ul class="segmented-controller">
+ <li class="active">
+ <a href="#item1">Thing one</a>
+ </li>
+ <li>
+ <a href="#item2">Thing two</a>
+ </li>
+ <li>
+ <a href="#item3">Thing three</a>
+ </li>
+</ul>
+<ul class="inset list">
+ <li id="item1" class="segmented-controller-item active">
+ Item 1
+ </li>
+ <li id="item2" class="segmented-controller-item">
+ Item 2
+ </li>
+ <li id="item3" class="segmented-controller-item">
+ Item 3
+ </li>
+</ul>
+</pre>
+
+ </article>
+
+ <!-- Counts -->
+ <article class="component" id="counts">
+ <h3 class="component-title">Counts</h3>
+ <p class="component-description">Counts come in four flavors and should be used to indicate "how many" of something there are.</p>
+
+ <div class="component-example">
+ <span class="count">1</span>
+ <span class="count-main">2</span>
+ <span class="count-positive">3</span>
+ <span class="count-negative">4</span>
+ </div>
+
+<pre class="prettyprint">
+<span class="count">1</span>
+<span class="count-main">2</span>
+<span class="count-positive">3</span>
+<span class="count-negative">4</span>
+</pre>
+
+ </article>
+
+ <!-- Forms -->
+ <article class="component" id="forms">
+ <h3 class="component-title">Forms</h3>
+
+ <div class="component-example">
+ <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>
+ </div>
+
+<pre class="prettyprint">
+<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>
+</pre>
+
+ </article>
+
+ <!-- Form with input group -->
+ <article class="component" id="formsWithInputGroup">
+ <h3 class="component-title">Form with input group</h3>
+
+ <div class="component-example">
+ <form class="input-group">
+ <input type="text" placeholder="Full name">
+ <input type="email" placeholder="Email">
+ <input type="text" placeholder="Username">
+ </form>
+ </div>
+
+<pre class="prettyprint">
+<form>
+ <div class="input-group">
+ <input type="text" placeholder="Full name">
+ <input type="email" placeholder="Email">
+ <input type="text" placeholder="Username">
+ </div>
+</form>
+</pre>
+
+ </article>
+
+ <!-- Form with input group and labels -->
+ <article class="component" id="formsWithInputGroupAndLabels">
+ <h3 class="component-title">Form with input group and labels</h3>
+
+ <div class="component-example">
+ <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>
+
+<pre class="prettyprint">
+<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>
+</form>
+</pre>
+
+ </article>
+
+ <!-- Toggle -->
+ <article class="component" id="toggles">
+ <h3 class="component-title">Toggles</h3>
+ <p class="component-description">Toggles can be used by sliding or tapping the control.</p>
+
+ <div class="component-example">
+ <div class="toggle active">
+ <div class="toggle-handle"></div>
+ </div>
+ <div class="toggle">
+ <div class="toggle-handle"></div>
+ </div>
+ </div>
+
+<pre class="prettyprint">
+<div class="toggle active">
+ <div class="toggle-handle"></div>
+</div>
+<div class="toggle">
+ <div class="toggle-handle"></div>
+</div>
+</pre>
+
+ <p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
+
+<pre class="prettyprint js">
+// Only needed if you want to fire a callback
+document
+ .querySelector('#myToggle')
+ .addEventListener('toggle', myFunction)
+</pre>
+
+ </article>
+
+ <!-- Popovers -->
+ <article class="component" id="popovers">
+ <h3 class="component-title">Popovers</h3>
+
+ <div class="component-example">
+ <div id="popover" class="popover">
+ <header class="popover-header">
+ <a class="button">
+ Left
+ </a>
+ <h3 class="title">Popover title</h3>
+ <a class="button">
+ Right
+ </a>
+ </header>
+ <ul class="list">
+ <li>Item1</li>
+ <li>Item2</li>
+ <li>Item3</li>
+ <li>Item4</li>
+ </ul>
+ </div>
+ </div>
+
+<pre class="prettyprint">
+<div id="myPopover" class="popover">
+ <header class="popover-header">
+ <a class="button" href="#">
+ Left
+ </a>
+ <h3 class="title">Popover title</h3>
+ <a class="button" href="#">
+ Right
+ </a>
+ </header>
+ <ul class="list">
+ <li>Item1</li>
+ <li>Item2</li>
+ <li>Item3</li>
+ <li>Item4</li>
+ </ul>
+</div>
+</pre>
+
+ <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
+
+<pre class="prettyprint">
+<header class="bar-title">
+ <a href="#myPopover">
+ <h1 class="title">Title</h1>
+ </a>
+</header>
+</pre>
+
+ </article>
+
+ <!-- Slider -->
+ <article class="component" id="sliders">
+ <h3 class="component-title">Sliders</h3>
+ <p class="component-description">Can be used with any number of slides with any type of content.</p>
+
+ <div class="component-example component-example-fullbleed">
+ <div class="slider" id="mySlider">
+ <ul>
+ <li>
+ <img src="img/slide-1.jpg">
+ <span class="slide-text">← Slide me</span>
+ </li>
+ <li>
+ <img src="img/slide-2.jpg">
+ </li>
+ <li>
+ <img src="img/slide-3.jpg">
+ </li>
+ </ul>
+ </div>
+ </div>
+
+<pre class="prettyprint">
+<div class="slider">
+ <ul>
+ <li>
+ <img src="img/slide-1.jpg">
+ <span class="slide-text">← Slide me</span>
+ </li>
+ <li>
+ <img src="img/slide-2.jpg">
+ </li>
+ <li>
+ <img src="img/slide-3.jpg">
+ </li>
+ </ul>
+</div>
+</pre>
+
+ <p class="component-description">Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
+
+<pre class="prettyprint js">
+// Only needed if you want to fire a callback
+document
+ .querySelector('#mySlider')
+ .addEventListener('slide', myFunction)
+</pre>
+
+ </article>
+
+ <!-- Push docs -->
+ <article class="component" id="push">
+ <h3 class="component-title">Push</h3>
+ <p class="component-description">Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.</p>
+
+<pre class="prettyprint js">
+<!-- A one.html link -->
+<a href="two.html">Two<a>
+</pre>
+
+ <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. It will also update .bar-title and .bar-tab if you have them on both pages.</p>
+
+ <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p>
+
+<pre class="prettyprint js">
+<!-- An one.html link that animates to two.html -->
+<a href="two.html" data-transition="fade">Two<a>
+</pre>
+
+ <p class="component-description">A working version of push:</p>
+
+ <div class="component-example component-example-fullbleed">
+ <header class="bar-title">
+ <h1 class="title">Push</h1>
+ </header>
+ <div class="content">
+ <ul class="list">
+ <li>
+ <a href="two.html" data-transition="slide-in">
+ Load new page with push
+ </a>
+ <span class="chevron"></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+<pre class="prettyprint push-example">
+<header class="bar-title">
+ <h1 class="title">Push</h1>
+</header>
+<div class="content">
+ <ul class="list">
+ <li>
+ <a href="two.html" data-transition="slide-in">
+ Go to page 2
+ </a>
+ <span class="chevron"></span>
+ </li>
+ </ul>
+</div>
+</pre>
+
+ <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>
+
+<pre class="prettyprint js">
+<!-- Use data-ignore="push" to prevent the push.js interception -->
+<a href="http://www.google.com" data-ignore="push">Google<a>
+</pre>
+
+ <p class="component-description">Push.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
+
+<pre class="prettyprint js">
+// Only needed if you want to fire a callback
+window.addEventListener('push', myFunction);
+</pre>
+
+ </article>
+
+ </div>
+ </section>
+
+ <section class="content-section section-informational" id="pageSetup">
+ <div class="docs-inner-wrapper">
+ <div class="section-header">
+ <h2 class="section-title">Page setup</h2>
+ <p class="section-description">3 simple rules for structuring your Ratchet pages</p>
+ </div>
+
+ <ol class="steps">
+ <li class="step">
+ <h3 class="step-title">1. Fixed bars come first</h3>
+ <p class="step-description">Both <code>.bar-title</code> and <code>.bar-tab</code> components should always be the first thing in the <code><body></code> of the page.</p>
+ </li>
+ <li class="step">
+ <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
+ <p class="step-description">Anything that's not a <code>.bar-title</code> or <code>.bar-tab</code> should be put in a div with the class "<code>content</code>". Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
+ </li>
+ <li class="step">
+ <h3 class="step-title">3. Don't forget your meta tags</h3>
+ <p class="step-description">They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.</p>
+ </li>
+ </ol>
+ </div>
+ </section>
+ </div>
+
+ <div class="docs-outer-wrapper docs-footer">
+ <section class="content-section">
+ <div class="docs-inner-wrapper">
+ <h3>License & credit</h3>
+ <p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>. </p>
+ <ul class="avatars">
+ <li>
+ <a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
+ <img src="https://secure.gravatar.com/avatar/14267e25aa6c7ef4f396afc483d6f238?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
+ </a>
+ <a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
+ </li>
+ <li>
+ <a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
+ <img src="https://secure.gravatar.com/avatar/53d633ae4622de17906338910085275a?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
+ </a>
+ <a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
+ </li>
+ <li>
+ <a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
+ <img src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
+ </a>
+ <a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>
+ </li>
+ </ul>
+ </div>
+ </section>
+ </div>
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+$(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'); });
+});
\ No newline at end of file
--- /dev/null
+// 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);
+ }
+ }
+ }
+};
\ No newline at end of file
--- /dev/null
+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"}})();
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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);
+}
\ No newline at end of file
--- /dev/null
+/* 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%);
+}
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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 */
+}
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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);
+}
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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;
+}
\ No newline at end of file
--- /dev/null
+/* 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";
+}
\ No newline at end of file
--- /dev/null
+/* ----------------------------------
+ * 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(); });
+
+}();
--- /dev/null
+/* ----------------------------------
+ * 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);
+
+}();
\ No newline at end of file
--- /dev/null
+/* ----------------------------------
+ * 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(); });
+}();
\ No newline at end of file
--- /dev/null
+/* ----------------------------------
+ * 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);
+
+}();
--- /dev/null
+/* ----------------------------------
+ * 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;
+ });
+
+}();
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+.slider {
+ margin-bottom: 0;
+ height: 150px;
+}
+
+.slider li img {
+ width: 100%;
+}
+
+.form-wrapper {
+ padding: 10px;
+}
\ No newline at end of file
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!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>
\ No newline at end of file
--- /dev/null
+<!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 & 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 & 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>
\ No newline at end of file
projects / ratchet / commitdiff
