ratchet/index.html

---
layout: default
title: Ratchet
base_url: "./"
---

<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="http://maker.github.com/ratchet/ratchet.zip" 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>

<!-- Getting started -->
<div class="docs-outer-wrapper docs-content">
  <section class="content-section section-informational" id="gettingStarted">
    <div class="docs-inner-wrapper">
      <ol class="steps">
        <li class="step">
          <div class="step-icon">
            <span class="icon icon-pages"></span>
          </div>
          <h3 class="step-title">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">
          <div class="step-icon">
            <span class="icon icon-refresh"></span>
          </div>
          <h3 class="step-title">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">
          <div class="step-icon">
            <span class="icon icon-share"></span>
          </div>
          <h3 class="step-title">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 <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
        </li>
      </ol>
    </div>
  </section>
</div>