Ratchet wants you to build mobile apps with simple HTML, CSS, and JS components

By Deepanker in CSS. Updated on September 28, 2015.

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.

Use of the this is very easy. Just download the files and unzip the folders to see the structure. It concludes CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. Include the CSS and JS files and then start developing.

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.

Github: https://github.com/twbs/ratchet

Website: http://goratchet.com/

Deepanker

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

0 Comments

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.