Once you've downloaded Ratchet, here's what to do next.
Use the documentation as a reference for all the available components and piece together the pages of your app. Be sure to look at the basic page template and example applications. Make sure to add ratchet-theme-ios.css or ratchet-theme-android.css to your app's <head> if you have a specific platform in mind.
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". For Android, check out this guide.
Three simple rules for structuring your Ratchet pages
All fixed bars (.bar) should always be the first thing in the <body> of the page. This is really important!
.contentAnything 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.
Use this basic template to get your app started.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="ratchet.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<p class="content-padded">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="http://goratchet.com">
<strong>Ratchet documentation</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://www.github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="http://www.twitter.com/GoRatchet">
<strong>Ratchet on Twitter</strong>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
If you haven't already, download the cource code for Ratchet.
Download RatchetCurrently v2.0.0