Build mobile apps with simple HTML‚ CSS‚ and JS components.
Quick start
Quickly get up and running with a Ratchet app.
1. Create your pages
Use the documentation as a reference for all the available components and piece together the pages of your app. Be sure to look at the basic page template and example applications. Make sure to add ratchet-theme-ios.css or ratchet-theme-android.css to your app'shead if you have a specific platform in mind.
2. Connect pages with push.js
Read about push.js 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. Check out this tutorial on emulating touch events in Chrome (or Firefox) if you're not sure how to do that.
3. Save the app to your phone
There are a few ways to do this, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the button and “Add to Home Screen". For Android, check out this guide.
What's included
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.
Precompiled Ratchet
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Ratchet. You'll see something like this:
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
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 (ratchet.*), as well as compiled and minified CSS and JS (ratchet.min.*). The Ratchicon fonts are included, as are the Android and iOS platform themes.
Ratchet source code
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:
ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
The sass/, js/, and fonts/ are the source code for our CSS, JS, and icon fonts (respectively). The dist/ folder includes everything listed in the precompiled download section above. The docs/ folder includes the source code for our documentation, and examples/ of Ratchet usage. Beyond that, any other included file provides support for packages, license information, and development.
Page setup
Three simple rules for structuring your Ratchet pages
1. Fixed bars come first
All fixed bars (.bar) should always be the first thing in the body of the page. This is really important!
2. Everything else goes in .content
Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the body tag. The .content div is what actually scrolls in a Ratchet prototype.
3. Don't forget your meta tags
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.
Basic template
Use this basic template to get your app started.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="ratchet.css" rel="stylesheet">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<p class="content-padded">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:</p>
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="http://goratchet.com">
<strong>Ratchet documentation</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://github.com/twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
<strong>Ratchet Google group</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://twitter.com/goratchet">
<strong>Ratchet on Twitter</strong>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>Browser and OS support
| OS | Browser | Supported? |
|---|---|---|
| Android (minimum version To Be Decided) | Android stock Browser |  |
| Android (minimum version To Be Decided) | Chrome | ✔ |
| Android (minimum version To Be Decided) | Firefox | To Be Decided |
| iOS v7.1+ | Safari | ✔ |
| iOS v7.1+ | Chrome | To Be Decided |
| Windows Phone | IE Mobile | To Be Decided |
| — | Opera Mini | To Be Decided |
| — | Opera Mobile | To Be Decided |
0 Comments