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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples · Ratchet</title>
<meta name="description" content="Ratchet: Prototype 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, user-scalable=no, minimal-ui">
<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">
<link rel="stylesheet" href="../dist/ratchet.css">
<link rel="stylesheet" href="../assets/css/docs.css">
<link rel="stylesheet" href="../assets/css/pygments.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/img/apple-touch-icon-114x114.png">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="../dist/ratchet.js"></script>
<script src="../assets/js/docs.js"></script>
<script src="../assets/js/fingerblast.js"></script>
<!-- Typekit -->
<script type="text/javascript" src="//use.typekit.net/asj6ttm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- Roboto -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<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);
})();
// Remove once I add back in the docs.js
// $(function() {
// $(window).on('load', function () { new FingerBlast('.body'); });
// });
</script>
</head>
<body ontouchstart="">
<div class="docs-sub-header">
<header class="docs-masthead clearfix">
<div class="container">
<div class="column units-2">
<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="https://github.com/twbs/ratchet" data-ignore="push">GitHub project</a>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="column-group">
<div class="column units-2">
<div class="docs-sub-content">
<h2 class="page-title">Examples</h2>
<p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
</div>
</div>
</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 units-2 lg-units-8 docs-examples">
<p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
<div class="docs-example-group">
<div class="example-wrap">
<a class="example" href="../examples/app-movies" data-ignore="push">
<img src="../assets/img/example.png">
</a>
<h5>Movie finder</h5>
</div>
<div class="example-wrap">
<a class="example" href="../examples/app-ios-mail" data-ignore="push">
<img src="../assets/img/example-ios.png">
</a>
<h5>iOS mail app</h5>
</div>
<div class="example-wrap">
<a class="example" href="../examples/app-android-notes" data-ignore="push">
<img src="../assets/img/example-android.png">
</a>
<h5>Android notes app</h5>
</div>
</div>
</div>
<div class="column units-2 lg-units-4">
<div class="docs-module">
<h4 class="docs-module-title">Download Ratchet</h4>
<p>If you haven't already, download the source code for Ratchet.</p>
<a href="https://github.com/twbs/ratchet/archive/v2.0.0.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</div>
</div>
</div>
<div class="column units-2">
<!-- Footer -->
<div class="docs-footer">
<!-- Social links -->
<ul class="social">
<li>
<iframe src="http://ghbtns.com/github-btn.html?user=twbs&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://goratchet.com" data-text="Ratchet – Build mobile 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>
<p class="docs-footer-content">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
</div>
</div>
</div>
</body>
</html>
|
