<pclass="lead">Quickly get up and running with a Ratchet prototype.</p>
<pclass="step-description">Use the <ahref="/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 <ahref="#pageLayout">basic page template</a> and <ahref="/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>
</li>
<liclass="step">
<h3class="step-title">2. Connect pages with push.js</h3>
<pclass="step-description">Read about <ahref="/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>
</li>
<liclass="step">
<h3class="step-title">3. Save the prototype to your phone</h3>
<pclass="step-description">There are <ahref="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 <spanclass="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <ahref="https://developers.google.com/chrome/mobile/docs/installtohomescreen"data-ignore="push">this guide</a>.</p>
</li>
</ol>
<hr>
<h3>1. Create your pages</h3>
<p>Use the <ahref="/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 <ahref="#pageLayout">basic page template</a> and <ahref="/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 <ahref="/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 <ahref="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 <spanclass="icon icon-share"></span> button and "Add to Home Screen". For Android, check out <ahref="https://developers.google.com/chrome/mobile/docs/installtohomescreen"data-ignore="push">this guide</a>.</p>
</div>
<h2class="section-heading">Page setup</h2>
<pclass="section-lead">Three simple rules for structuring your Ratchet pages</p>
<olclass="docs-steps">
<liclass="step">
<h3class="step-title">1. Fixed bars come first</h3>
<pclass="step-description">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>
</li>
<liclass="step">
<h3class="step-title">2. Everything else goes in <code>.content</code></h3>
<pclass="step-description">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>
</li>
<liclass="step">
<h3class="step-title">3. Don't forget your meta tags</h3>
<pclass="step-description">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>
</li>
</ol>
<hr>
<divclass="docs-section">
<h2>Page setup</h2>
<pclass="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>
<pclass="section-lead">Use this basic template to get your app started.</p>
<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>
<divclass="docs-section">
<h2id="pageLayout">Basic template</h2>
<pclass="lead">Use this basic template to get your app started.</p>
{% highlight html %}
{% highlight html %}
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
@ -79,7 +74,6 @@ title: Getting started · Ratchet
<!-- Include the compiled Ratchet JS -->
<!-- Include the compiled Ratchet JS -->
<scriptsrc="ratchet.js"></script>
<scriptsrc="ratchet.js"></script>
</head>
</head>
<body>
<body>
@ -120,9 +114,13 @@ title: Getting started · Ratchet
</body>
</body>
</html>
</html>
{% endhighlight %}
{% endhighlight %}
</div>
<h2class="section-heading">Community</h2>
<pclass="section-lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<divclass="docs-section">
<h2>Community</h2>
<pclass="lead">Stay up to date on the development of Ratchet and reach out to the community with these helpful resources.</p>
<ol>
<ol>
<li>
<li>
<p>Read and subscribe to <ahref="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
<p>Read and subscribe to <ahref="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a> (which includes Ratchet releases and news).</p>
@ -136,6 +134,7 @@ title: Getting started · Ratchet
</ol>
</ol>
<p>You can also follow <ahref="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
<p>You can also follow <ahref="https://twitter.com/goratchet">@goratchet</a> on Twitter for the latest news.</p>
Mark Otto
11 years ago