mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
7 changed files with 1161 additions and 1120 deletions
@ -1,23 +0,0 @@
|
||||
<header class="docs-outer-wrapper docs-header"> |
||||
<div class="docs-inner-wrapper"> |
||||
<hgroup class="docs-header-text"> |
||||
<h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS, and JS components.</h2> |
||||
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V1.0']);">Download Ratchet</a> |
||||
</hgroup> |
||||
</div> |
||||
<section class="social"> |
||||
<ul> |
||||
<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> |
||||
</section> |
||||
</header> |
||||
@ -0,0 +1,66 @@
|
||||
--- |
||||
layout: default |
||||
title: Ratchet ~ Getting Started |
||||
base_url: "../" |
||||
--- |
||||
|
||||
<!-- 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> |
||||
Loading…
Reference in new issue