ratchet/docs/getting-started.html

---
layout: default
title: Getting started &middot; Ratchet
---

<div class="docs-sub-header">
  {% include masthead.html %}
  <div class="container">
    <div class="column-group">
      <div class="column units-2">
        <div class="docs-sub-content">
          <h2 class="page-title">Getting started</h2>
          <p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>
        </div>
      </div>
    </div>
    {% include ad.html %}
  </div>
</div>

<div class="container">
  <div class="column-group">
    <div class="column units-2 lg-units-8 docs-content">
      <div class="docs-section">
        <h2>Quick start</h2>
        <p class="lead">Quickly get up and running with a Ratchet prototype.</p>

        <h3>1. Create your pages</h3>
        <p>Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code>&lt;head&gt;</code> if you have a specific platform in mind.</p>

        <h3>2. Connect pages with push.js</h3>
        <p>Read about <a href="/components/#push" data-ignore="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>

        <h3>3. Save the prototype to your phone</h3>
        <p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">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". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p>
      </div>


      <div class="docs-section">
        <h2>Page setup</h2>
        <p class="lead">Three simple rules for structuring your Ratchet pages</p>
        <h3>1. Fixed bars come first</h3>
        <p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>

        <h3>2. Everything else goes in <code>.content</code></h3>
        <p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>

        <h3>3. Don't forget your meta tags</h3>
        <p>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.</p>
      </div>


      <div class="compontent">
        <h2 id="pageLayout">Basic template</h2>
        <p class="lead">Use this basic template to get your app started.</p>
{% highlight html %}
<!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>
{% endhighlight %}
      </div>

      <div class="docs-section">
        <h2 class="section-heading">Community</h2>
        <p class="section-lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
        <ol>
          <li>
            <p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</p>
          </li>
          <li>
            <p>For help using Ratchet, ask on  <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>
          </li>
          <li>
            <p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>
          </li>
        </ol>
        <p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
      </div>
    </div>

    <div class="column units-2 lg-units-4">
      {% include download-module.html %}
    </div>
  </div>

  <div class="column units-2">
    <!-- Footer -->
    {% include footer.html %}
  </div>
</div>
Reorganizing the docs files and breaking things. 11 years ago			`---`
			`layout: default`
patch up the getting started pages 11 years ago			`title: Getting started · Ratchet`
Reorganizing the docs files and breaking things. 11 years ago			`---`

fixing some more docs, adding icons, adding pages 11 years ago			`<div class="docs-sub-header">`
			`{% include masthead.html %}`
			`<div class="container">`
			`<div class="column-group">`
			`<div class="column units-2">`
			`<div class="docs-sub-content">`
			`<h2 class="page-title">Getting started</h2>`
			`<p class="page-description">Once you've downloaded Ratchet, here's what to do next.</p>`
			`</div>`
Reorganizing the docs files and breaking things. 11 years ago			`</div>`
fixing some more docs, adding icons, adding pages 11 years ago			`</div>`
			`{% include ad.html %}`
			`</div>`
			`</div>`
Reorganizing the docs files and breaking things. 11 years ago
fixing some more docs, adding icons, adding pages 11 years ago			`<div class="container">`
			`<div class="column-group">`
refactor all the things, switch to open sans 11 years ago			`<div class="column units-2 lg-units-8 docs-content">`
			`<div class="docs-section">`
			`<h2>Quick start</h2>`
			`<p class="lead">Quickly get up and running with a Ratchet prototype.</p>`

			`<h3>1. Create your pages</h3>`
			`<p>Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Make sure to add <code>ratchet-theme-ios.css</code> or <code>ratchet-theme-android.css</code> to your app's <code><head></code> if you have a specific platform in mind.</p>`

			`<h3>2. Connect pages with push.js</h3>`
			`<p>Read about <a href="/components/#push" data-ignore="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>`

			`<h3>3. Save the prototype to your phone</h3>`
			`<p>There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">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". For Android, check out <a href="https://developers.google.com/chrome/mobile/docs/installtohomescreen" data-ignore="push">this guide</a>.</p>`
			`</div>`



			`<div class="docs-section">`
			`<h2>Page setup</h2>`
			`<p class="lead">Three simple rules for structuring your Ratchet pages</p>`
			`<h3>1. Fixed bars come first</h3>`
			`<p>All fixed bars (<code>.bar</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>`

			`<h3>2. Everything else goes in <code>.content</code></h3>`
			`<p>Anything that's not a <code>.bar</code> should be put in a div with the class <code>.content</code>. Put this div after the bars in the <code><body></code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>`

			`<h3>3. Don't forget your meta tags</h3>`
			`<p>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.</p>`
			`</div>`



			`<div class="compontent">`
			`<h2 id="pageLayout">Basic template</h2>`
			`<p class="lead">Use this basic template to get your app started.</p>`
fixing some more docs, adding icons, adding pages 11 years ago			`{% highlight html %}`
			`<!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">`
update links 11 years ago			`<a class="push-right" href="http://goratchet.com">`
fixing some more docs, adding icons, adding pages 11 years ago			`<strong>Ratchet documentation</strong>`
			`</a>`
			`</li>`
			`<li class="table-view-cell">`
moar links 11 years ago			`<a class="push-right" href="https://www.github.com/twbs/ratchet/">`
fixing some more docs, adding icons, adding pages 11 years ago			`<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>`
			`{% endhighlight %}`
fixing the page layout 11 years ago			`</div>`
adding a Community section to the getting started section of the docs. Fixes #274. 11 years ago
fixing the page layout 11 years ago			`<div class="docs-section">`
			`<h2 class="section-heading">Community</h2>`
			`<p class="section-lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>`
			`<ol>`
			`<li>`
			`<p>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</p>`
			`</li>`
			`<li>`
tag name conflict 11 years ago			`<p>For help using Ratchet, ask on <a href="http://stackoverflow.com/questions/tagged/ratchet-2">StackOverflow using the tag <code>ratchet-2</code></a>.</p>`
fixing the page layout 11 years ago			`</li>`
			`<li>`
			`<p>Start a discussion on the <a href="https://groups.google.com/forum/#!forum/goratchet">Ratchet Google group</a>.</p>`
			`</li>`
			`</ol>`
			`<p>You can also follow <a href="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>`
			`</div>`
fixing some more docs, adding icons, adding pages 11 years ago			`</div>`
patch up the getting started pages 11 years ago
			`<div class="column units-2 lg-units-4">`
spelling 11 years ago			`{% include download-module.html %}`
patch up the getting started pages 11 years ago			`</div>`
fixing some more docs, adding icons, adding pages 11 years ago			`</div>`
patch up the getting started pages 11 years ago
fixing some more docs, adding icons, adding pages 11 years ago			`<div class="column units-2">`
			`<!-- Footer -->`
			`{% include footer.html %}`
Reorganizing the docs files and breaking things. 11 years ago			`</div>`
fixing some more docs, adding icons, adding pages 11 years ago			`</div>`