ratchet/index.html

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

<div class="docs-header">
  <div class="container column-group">
    <div class="column units-2">
      <header class="docs-nav">
        <a class="icon icon-list pull-right" href="/components" data-ignore="push"></a>
        <h1 class="docs-title">Ratchet</h1>
      </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">
  <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>