--- layout: default title: Ratchet · Getting Started ---

Getting started

Once you've downloaded Ratchet, here's what to do next.

  1. Create your pages

    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.

  2. Connect pages with push.js

    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).

  3. Save the prototype to your phone

    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".

Page setup

3 simple rules for structuring your Ratchet pages

  1. 1. Fixed bars come first

    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!

  2. 2. Everything else goes in .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.

  3. 3. Don't forget your meta tags

    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.