Ratchet wants you to build mobile apps with simple HTML, CSS, and JS components
Now the world is moving to mobile apps from websites. So, various web developers are also thinking to learn app development. But for Android, one will have to learn Java and for iOS, one will have to learn objective C or Swift. This will take time and effort both. But as a web developer, you already know HTML, CSS and JS. So, why don’t you use these skills to develop app? Yes,you can create mobile apps with HTML, CSS, and JS by using Ratchet framework. This framework is very easy to learn and use. You will be using it in the same way, you use any design framework.
Ratchet helps you in building apps with simple HTML‚ CSS‚ and JS components
You will only need to learn the basic structure of the app. For example, static top bar will be the first thing soon after the <body> tag and static bar will have .bar class. Every other thing except static bar will be under .content class.
There are various components like buttons, lists, headings, sliders and other things are also there. You only need to learn how to use these components. You can check this page for Ratchet components. Components page also demonstrates how the specific component will look in the iOS or Android device.
This is the basic code
<!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">This is the basic app code.</p> </div> </body> </html>
Download the Ratchet from the links below.