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

<div class="docs-header">
  <div class="container column-group">
    <div class="column units-2">
      <header class="docs-nav">
        <h1 class="docs-title">Ratchet</h1>
        <a class="icon icon-list" href="/components" data-ignore="push"></a>
        <a class="version" href="https://github.com/maker/ratchet" data-ignore="push">v2.0.0</a>
      </header>
    </div>
  </div>

  <div class="docs-header-content">
    <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>  
    <a data-ignore="push" href="/components" class="button button-outlined">View the docs</a>
    <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
  </div>
</div>

<!-- Social links -->
<ul class="social">
  <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>

<!-- Benefits -->
<section class="docs-benefits docs-section">
  <div class="container column-group">
    <div class="section-header column units-2">
      <h2 class="section-heading">Getting started</h2>
      <p class="section-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
    <div class="column units-1 lg-units-6">
      <div class="benefit-icon">
        <span class="icon icon-refresh"></span>
      </div>
      <h3 class="benefit-heading">Simple web technology</h3>
      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="column units-1 lg-units-6">
      <div class="benefit-icon">
        <span class="icon icon-refresh"></span>
      </div>
      <h3 class="benefit-heading">Simple web technology</h3>
      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>

  <div class="container column-group">
    <div class="column units-1 lg-units-6">
      <div class="benefit-icon">
        <span class="icon icon-refresh"></span>
      </div>
      <h3 class="benefit-heading">Simple web technology</h3>
      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="column units-1 lg-units-6"> 
      <div class="benefit-icon">
        <span class="icon icon-refresh"></span>
      </div>
      <h3 class="benefit-heading">Simple web technology</h3>
      <p class="benefit-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</section>

<section class="docs-contribute docs-section">
  <div class="container column-group">
    <div class="column units-2 lg-units-4">
      <h3 class="contribute-heading">Contribute code</h3>
      <p class="contribute-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
      <a class="link" href="#">GitHub project</a>
    </div>
    <div class="column units-2 lg-units-4">
      <h3 class="contribute-heading">Submit an issue</h3>
      <p class="contribute-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
      <a class="link" href="#">GitHub issues</a>
    </div>
    <div class="column units-2 lg-units-4">
      <h3 class="contribute-heading">Ask a question</h3>
      <p class="contribute-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</p>
      <a class="link" href="#">Google group</a>
    </div>
  </div>
</section>

<footer class="docs-footer docs-section">
  <div class="container column-group">
    <div class="column units-2">
      <p class="footer-content">Code licensed under the MIT license. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
    </div>
  </div>
</footer>