mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
7.6 KiB
177 lines
7.6 KiB
11 years ago
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
<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">
|
||
|
|
||
|
<!-- Google Web Fonts -->
|
||
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans: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">Examples</h2>
|
||
|
<p class="page-description">Take a look at some of these example apps built on Ratchet.</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-examples docs-content">
|
||
|
|
||
|
<p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
|
||
|
|
||
|
<div class="column-group">
|
||
|
<div class="column lg-units-4">
|
||
|
<div class="example-wrap">
|
||
|
<a class="example" href="/examples/app-movies" data-ignore="push">
|
||
|
<img src="/assets/img/example.png" alt="Movie finder app example" width="640" height="480">
|
||
|
</a>
|
||
|
<h4 class="example-title">Movie finder</h4>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="column lg-units-4">
|
||
|
<div class="example-wrap">
|
||
|
<a class="example" href="/examples/app-ios-mail" data-ignore="push">
|
||
|
<img src="/assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
|
||
|
</a>
|
||
|
<h4 class="example-title">iOS mail app</h4>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="column lg-units-4">
|
||
|
<div class="example-wrap">
|
||
|
<a class="example" href="/examples/app-android-notes" data-ignore="push">
|
||
|
<img src="/assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
|
||
|
</a>
|
||
|
<h4 class="example-title">Android notes app</h4>
|
||
|
</div>
|
||
|
</div> <!-- .column-group -->
|
||
|
</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.1/ratchet-2.0.1-dist.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1-dist']);">Download Ratchet</a>
|
||
|
<p class="version">Currently v2.0.1</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.1.zip" class="btn btn-block btn-primary" data-ignore="push" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0.1']);">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.1</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.0/jquery.min.js"></script>
|
||
|
<script src="/dist/js/ratchet.min.js"></script>
|
||
|
<script src="/assets/js/docs.min.js"></script>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</body>
|
||
|
</html>
|