1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Getting started · Ratchet</title>
<meta name="description" content="Ratchet: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="Connor Sears">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Google Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700%7COpen+Sans:400,300">
<link rel="stylesheet" href="/dist/css/ratchet.min.css">
<link rel="stylesheet" href="/assets/css/docs.min.css">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/apple-touch-icon-114x114.png">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36050008-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body ontouchstart="">
<!--[if lt IE 9]>
<div class="bs-callout bs-callout-danger">
<h4>Attention!</h4>
<p>
Looks like your current browser is old and doesn't support many features used in this page.
Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
</p>
</div>
<![endif]-->
<div class="docs-sub-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column">
<h1 class="docs-title">
<a href="/" data-ignore="push">Ratchet</a>
</h1>
<nav class="docs-nav clearfix">
<a class="docs-nav-trigger icon icon-bars pull-right js-docs-nav-trigger" href="#"></a>
<div class="docs-nav-group">
<a class="docs-nav-item" href="/" data-ignore="push">Home</a>
<a class="docs-nav-item" href="/getting-started" data-ignore="push">Getting started</a>
<a class="docs-nav-item" href="/components" data-ignore="push">Components</a>
<a class="docs-nav-item" href="/examples" data-ignore="push">Examples</a>
<a class="docs-nav-item" href="/about" data-ignore="push">About</a>
<a class="docs-nav-item" href="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<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 id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
</div>
<div class="container">
<div class="column-group">
<div class="column lg-units-8 docs-content">
<div class="docs-section">
<h2>Quick start</h2>
<p class="lead">Quickly get up and running with a Ratchet app.</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 app that feels like a real app when you save it to your phone. Make sure that you have a server running, and that your browser is emulating touch events. <a href="https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events" data-ignore="push">Check out this tutorial on emulating touch events in Chrome</a> (<a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View" data-ignore="push">or Firefox</a>) if you're not sure how to do that.</p>
<h3>3. Save the app 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>What's included</h2>
<p class="lead">Ratchet is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
<h3>Precompiled Ratchet</h3>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:</p>
<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
<div class="highlight"><pre><code class="language-bash" data-lang="bash">ratchet/
├── css/
│ ├── ratchet.css
│ ├── ratchet.min.css
│ ├── ratchet-theme-android.css
│ ├── ratchet-theme-android.min.css
│ ├── ratchet-theme-ios.css
│ ├── ratchet-theme-ios.min.css
├── js/
│ ├── ratchet.js
│ └── ratchet.min.js
└── fonts/
├── ratchicons.eot
├── ratchicons.svg
├── ratchicons.ttf
└── ratchicons.woff</code></pre></div>
<p>This is the most basic form of Ratchet: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>ratchet.*</code>), as well as compiled and minified CSS and JS (<code>ratchet.min.*</code>). The Ratchicon fonts are included, as are the Android and iOS platform themes.</p>
<h3>Ratchet source code</h3>
<p>The Ratchet source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash">ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/</code></pre></div>
<p>The <code>sass/</code>, <code>js/</code>, and <code>fonts/</code> are the source code for our CSS, JS, and icon fonts (respectively). The <code>dist/</code> folder includes everything listed in the precompiled download section above. The <code>docs/</code> folder includes the source code for our documentation, and <code>examples/</code> of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.</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 for Ratchet to work just right.</p>
</div>
<div class="docs-section">
<h2 id="pageLayout">Basic template</h2>
<p class="lead">Use this basic template to get your app started.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><title></span>Ratchet template page<span class="nt"></title></span>
<span class="c"><!-- Sets initial viewport load and disables zooming --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"initial-scale=1, maximum-scale=1"</span><span class="nt">></span>
<span class="c"><!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"apple-mobile-web-app-capable"</span> <span class="na">content=</span><span class="s">"yes"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"apple-mobile-web-app-status-bar-style"</span> <span class="na">content=</span><span class="s">"black"</span><span class="nt">></span>
<span class="c"><!-- Include the compiled Ratchet CSS --></span>
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"ratchet.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
<span class="c"><!-- Include the compiled Ratchet JS --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"ratchet.js"</span><span class="nt">></script></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="c"><!-- Make sure all your bars are the first things in your <body> --></span>
<span class="nt"><header</span> <span class="na">class=</span><span class="s">"bar bar-nav"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>Ratchet<span class="nt"></h1></span>
<span class="nt"></header></span>
<span class="c"><!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"content-padded"</span><span class="nt">></span>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:<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"table-view"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"http://goratchet.com"</span><span class="nt">></span>
<span class="nt"><strong></span>Ratchet documentation<span class="nt"></strong></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://github.com/twbs/ratchet/"</span><span class="nt">></span>
<span class="nt"><strong></span>Ratchet on Github<span class="nt"></strong></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://groups.google.com/forum/#!forum/goratchet"</span><span class="nt">></span>
<span class="nt"><strong></span>Ratchet Google group<span class="nt"></strong></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"table-view-cell"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"push-right"</span> <span class="na">href=</span><span class="s">"https://twitter.com/goratchet"</span><span class="nt">></span>
<span class="nt"><strong></span>Ratchet on Twitter<span class="nt"></strong></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre></div>
</div>
<div class="docs-section">
<h2>Community</h2>
<p class="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> (which includes Ratchet releases and news).</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 class="docs-section">
<h2>Browser and OS support</h2>
<table class="browser-support-table">
<thead>
<tr>
<th scope="col">OS</th>
<th scope="col">Browser</th>
<th scope="col" class="text-center">Supported?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Android (minimum version To Be Decided)</td>
<td>Android stock Browser</td>
<td class="text-center browser-support-yes"><span class="icon icon-check"></span></td>
</tr>
<tr>
<td>Android (minimum version To Be Decided)</td>
<td>Chrome</td>
<td class="text-center browser-support-yes"><span class="icon icon-check"></span></td>
</tr>
<tr>
<td>Android (minimum version To Be Decided)</td>
<td>Firefox</td>
<td class="text-center browser-support-maybe">To Be Decided</td>
</tr>
<tr>
<td>iOS v7.1+</td>
<td>Safari</td>
<td class="text-center browser-support-yes"><span class="icon icon-check"></span></td>
</tr>
<tr>
<td>iOS v7.1+</td>
<td>Chrome</td>
<td class="text-center browser-support-maybe">To Be Decided</td>
</tr>
<tr>
<td>Windows Phone</td>
<td>IE Mobile</td>
<td class="text-center browser-support-maybe">To Be Decided</td>
</tr>
<tr>
<td>—</td>
<td>Opera Mini</td>
<td class="text-center browser-support-maybe">To Be Decided</td>
</tr>
<tr>
<td>—</td>
<td>Opera Mobile</td>
<td class="text-center browser-support-maybe">To Be Decided</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="column lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Ratchet</h4>
<p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
<a href="https://github.com/twbs/ratchet/releases/download/v2.0.2/ratchet-2.0.2-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2-dist']);">Download Ratchet</a>
<p class="version">Currently v2.0.2</p>
</div>
<div class="docs-module">
<h4 class="docs-module-title">Source code</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.2.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.2']);">Download source</a>
</div>
</div>
</div>
<div class="column">
<!-- Footer -->
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=ratchet&type=watch&count=true" width="100" height="20"></iframe>
</li>
<li>
<a data-ignore="push" href="https://twitter.com/share" class="twitter-share-button" data-url="http://goratchet.com" data-text="Ratchet – Build mobile apps with simple HTML, CSS, and JS components." data-via="GoRatchet">Tweet</a>
</li>
<li><a data-ignore="push" href="https://twitter.com/goratchet" class="twitter-follow-button" data-show-count="true">
Follow @GoRatchet</a>
</li>
</ul>
<p class="docs-footer-text">Code licensed under the <a href="https://github.com/twbs/ratchet/blob/master/LICENSE" data-ignore="push">MIT License</a> and the docs are licensed under <a href="https://github.com/twbs/ratchet/blob/master/docs/LICENSE" data-ignore="push">CC BY 3.0</a>. Ratchet was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
<ul class="docs-footer-links">
<li>Currently v2.0.2</li>
<li>·</li>
<li><a href="https://github.com/twbs/ratchet/issues" data-ignore="push">Issues</a></li>
<li>·</li>
<li><a href="https://github.com/twbs/ratchet/releases" data-ignore="push">Releases</a></li>
<li>·</li>
<li><a href="http://goratchet.com/1.0.2/" data-ignore="push">Legacy v1.0.2 Docs</a></li>
</ul>
</div>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/dist/js/ratchet.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
</div>
</div>
</body>
</html>
|
