--- layout: default title: Ratchet ~ Getting Started base_url: "../" ---
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".
3 simple rules for structuring your Ratchet pages
All fixed bars (.bar-nav, .bar-tab, .bar-header-secondary, .bar-footer
) should always be the first thing in the <body>
of the page. This is really important!
.content
Anything that's not a .bar-
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.