65 строки
3.3 KiB
HTML
65 строки
3.3 KiB
HTML
|
---
|
||
|
|
layout: default
|
||
|
|
title: Ratchet · Getting Started
|
||
|
|
---
|
||
|
|
|
||
|
|
<!-- Getting started -->
|
||
|
|
<div class="docs-outer-wrapper docs-content">
|
||
|
|
<section class="content-section section-informational" id="gettingStarted">
|
||
|
|
<div class="docs-inner-wrapper">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">Getting started</h2>
|
||
|
|
<p class="section-description">Once you've downloaded Ratchet, here's what to do next.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ol class="steps">
|
||
|
|
<li class="step">
|
||
|
|
<div class="step-icon">
|
||
|
|
<span class="icon icon-pages"></span>
|
||
|
|
</div>
|
||
|
|
<h3 class="step-title">Create your pages</h3>
|
||
|
|
<p class="step-description">Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own.</p>
|
||
|
|
</li>
|
||
|
|
<li class="step">
|
||
|
|
<div class="step-icon">
|
||
|
|
<span class="icon icon-refresh"></span>
|
||
|
|
</div>
|
||
|
|
<h3 class="step-title">Connect pages with push.js</h3>
|
||
|
|
<p class="step-description">Read about <a href="#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>
|
||
|
|
<li class="step">
|
||
|
|
<div class="step-icon">
|
||
|
|
<span class="icon icon-share"></span>
|
||
|
|
</div>
|
||
|
|
<h3 class="step-title">Save the prototype to your phone</h3>
|
||
|
|
<p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">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".</p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Page setup -->
|
||
|
|
<section class="content-section section-informational" id="pageSetup">
|
||
|
|
<div class="docs-inner-wrapper">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2 class="section-title">Page setup</h2>
|
||
|
|
<p class="section-description">3 simple rules for structuring your Ratchet pages</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ol class="steps">
|
||
|
|
<li class="step">
|
||
|
|
<h3 class="step-title">1. Fixed bars come first</h3>
|
||
|
|
<p class="step-description">All fixed bars (<code>.bar-nav, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code><body></code> of the page. This is really important!</p>
|
||
|
|
</li>
|
||
|
|
<li class="step">
|
||
|
|
<h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
|
||
|
|
<p class="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>
|
||
|
|
<li class="step">
|
||
|
|
<h3 class="step-title">3. Don't forget your meta tags</h3>
|
||
|
|
<p class="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>
|
||
|
|
</div>
|
||
|
|
</section>
|