<!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: 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, user-scalable=no, minimal-ui" >
< link rel = "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" > 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.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.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 >
