Once you've downloaded Ratchet, here's what to do next.
+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.
+Read about push.js 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).
+There are a few ways to do this, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the 
button and "Add to Home Screen".
Design patterns that serve as basic building blocks.
+Title bars are full width and docked to the top of the viewport.
+ ++<header class="bar-title"> + <h1 class="title">Title</h1> +</header> ++ +
Buttons in a title bar are left or right aligned and should be used for actions.
+ + + ++<header class="bar-title"> + <a class="button" href="#"> + Left + </a> + <h1 class="title">Title</h1> + <a class="button" href="#"> + Right + </a> +</header> ++ +
Directional buttons in a title bar should be used for navigational purposes.
+ ++<header class="bar-title"> + <a class="button-prev" href="#"> + Previous + </a> + <h1 class="title">Title</h1> + <a class="button-next" href="#"> + Next + </a> +</header> ++ +
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.
+ + + ++<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> ++ +
Icons should be around 24px by 18px. The gradient on an icon starts with pure white and goes to #e5e5e5 at the bottom.
+ ++<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> ++ +
Note: Use push.js to actually change content.
+Credit: Icons by Marc Haumann and Spencer Cohen from The Noun Project
+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).
+ ++<!-- 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> ++ +
Lists can be used for organizing data, showing collections of links or a series of controls.
+ ++<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> ++ +
Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the list item is linked.
+ ++<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> ++ +
+<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> ++ +
+<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> ++ +
+<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> ++ +
+<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> ++ +
+<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> ++ +
Buttons come in four flavors and should be used for user actions.
+ + + ++<a class="button">Button</a> +<a class="button-main">Button</a> +<a class="button-positive">Button</a> +<a class="button-negative">Button</a> ++ +
+<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> ++ +
+<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> ++ +
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.
+ ++<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> ++ +
Counts come in four flavors and should be used to indicate "how many" of something there are.
+ ++<span class="count">1</span> +<span class="count-main">2</span> +<span class="count-positive">3</span> +<span class="count-negative">4</span> ++ +
+<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> ++ +
+<form> + <div class="input-group"> + <input type="text" placeholder="Full name"> + <input type="email" placeholder="Email"> + <input type="text" placeholder="Username"> + </div> +</form> ++ +
+<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> ++ +
Toggles can be used by sliding or tapping the control.
+ ++<div class="toggle active"> + <div class="toggle-handle"></div> +</div> +<div class="toggle"> + <div class="toggle-handle"></div> +</div> ++ +
Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.
+ +
+// Only needed if you want to fire a callback
+document
+ .querySelector('#myToggle')
+ .addEventListener('toggle', myFunction)
+
+
+ +<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> ++ +
Popovers are designed to only fire from title bars. Set the value of the title href to the id of a popover, like so:
+ ++<header class="bar-title"> + <a href="#myPopover"> + <h1 class="title">Title</h1> + </a> +</header> ++ +
Can be used with any number of slides with any type of content.
+ +
+
+ 
+ 
+ +<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> ++ +
Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.
+ +
+// Only needed if you want to fire a callback
+document
+ .querySelector('#mySlider')
+ .addEventListener('slide', myFunction)
+
+
+ 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.
+ ++<!-- A one.html link --> +<a href="two.html">Two<a> ++ +
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.
+ +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: fade, slide-in, or slide-out.
+<!-- An one.html link that animates to two.html --> +<a href="two.html" data-transition="fade">Two<a> ++ +
A working version of push:
+ ++<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> ++ +
Have a link you don't want to intercepted by push? Try this:
+ ++<!-- Use data-ignore="push" to prevent the push.js interception --> +<a href="http://www.google.com" data-ignore="push">Google<a> ++ +
Push.js binds an event to the document that returns a detail object and can be used to fire a callback.
+ +
+// Only needed if you want to fire a callback
+window.addEventListener('push', myFunction);
+
+
+ 3 simple rules for structuring your Ratchet pages
+Both .bar-title and .bar-tab components should always be the first thing in the <body> of the page.
.contentAnything that's not a .bar-title or .bar-tab should be put in a div with the class "content". Put this div after the bars in the <body> tag. The .content div is what actually scrolls in a Ratchet prototype.
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.
+Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by Dave Gamache, Connor Sears, and Jacob Thornton.
+
+
+ Follow @dhg
+ 
+
+ Follow @connors
+ 
+
+ Follow @fat
+ Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +Lorem ipsum dolor sit amet
+ Buy Tickets +1.3 miles away
+ Buy Tickets +3.5 miles away
+ Buy Tickets +7.3 miles away
+ Buy Tickets +12.5 miles away
+ Buy Tickets +12.2 miles away
+ Buy Tickets +13.4 miles away
+ Buy Tickets +14.1 miles away
+ Buy Tickets +14.3 miles away
+ Buy Tickets +14.7 miles away
+ Buy Tickets +15 miles away
+ Buy Tickets +
+ 
+ 
+ Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +Lorem ipsum dolor sit amet
+ + +1.3 miles away
+ + +3.5 miles away
+ + +7.3 miles away
+ + +12.5 miles away
+ + +12.2 miles away
+ + +13.4 miles away
+ + +14.1 miles away
+ + +14.3 miles away
+ + +14.7 miles away
+ + +15 miles away
+ + +section #1
section #2
+ 
+ 
+
+
+
+