<pclass="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
<pclass="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
<pclass="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
<pclass="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</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>
<divclass="docs-section">
</li>
<h2>Quick start</h2>
<liclass="step">
<pclass="lead">Quickly get up and running with a Ratchet prototype.</p>
<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>
<h3>1. Create your pages</h3>
</li>
<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>
<liclass="step">
<h3class="step-title">3. Save the prototype to your phone</h3>
<h3>2. Connect pages with push.js</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>
<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>
</li>
</ol>
<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>
<hr>
</div>
<h2class="section-heading">Page setup</h2>
<pclass="section-lead">Three simple rules for structuring your Ratchet pages</p>
<olclass="docs-steps">
<divclass="docs-section">
<liclass="step">
<h2>Page setup</h2>
<h3class="step-title">1. Fixed bars come first</h3>
<pclass="lead">Three simple rules for structuring your Ratchet pages</p>
<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>
<h3>1. Fixed bars come first</h3>
</li>
<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>
<liclass="step">
<h3class="step-title">2. Everything else goes in <code>.content</code></h3>
<h3>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>
<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>
</li>
<liclass="step">
<h3>3. Don't forget your meta tags</h3>
<h3class="step-title">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>
<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>
</div>
</li>
</ol>
<divclass="compontent">
<hr>
<h2id="pageLayout">Basic template</h2>
<pclass="lead">Use this basic template to get your app started.</p>
Mark Otto
11 years ago