MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Ratchet Framework: The Starter Guide to Build Mobile Web Apps

Published on 08 September 14
Mostly, developers prefer to use responsive web design to build websites, but in some cases, they need to provide custom-tailored web experience to their clients. In addition, there are many apps - such as a geo-location based application - that might be better viewed on mobile devices.

In this article, Iâm going to explore Ratchet framework through which youâll have the ability to build native mobile applications with ease. Hopefully, this article would prove to be quite useful for those developers who prefer to rapidly prototype their apps using standard web languages: HTML, CSS and JavaScript.

Letâs get started!
About Ratchet
Ratchet is an open-source front-end framework that helps you build highly interactive mobile web apps using simple and mobile-optimized HTMLâ CSSâ and JavaScript components. This framework was lovingly crafted by Connor Sears, Dave Gamache, and Jacob Thornton: creators of popular Bootstrap framework. Currently, itâs a part of the Bootstrap family on GitHub.

Previously, Ratchet was used by Twitter to prototype iPhone app layout using HTML/CSS, but later, when its developers realized that this was the fastest and effective way to build native mobile apps, they converted Ratchet into a fully fledged framework. Following that initial launch, a new and improved version of Ratchet, called Ratchet 2.0, was recently released. No matter your target is Android, iOS, or both, Ratchet 2.0 is now ready for the job.
What's New in Ratchet 2.0?
Ratchet 2.0 got tons of new and useful features. Few of them are presented below:

  • New themes for Android and iOS: Ratchet 2.0 is shipped with two pre-made themes for iOS and Android. Means, now your mobile web app will look great on both platforms.
  • New Ratchicons: Ratchet 2.0 has introduced its own icon font, named Ratcheticon, which supports both iOS and Android.
  • New Card Wrapper: With Ratchet 2.0, any content or Ratchet component can be wrapped in a padded element using the .card class.
  • Updated class names for badges, buttons, and more in order to match the Bootstrap terminology.
  • Renovation of Docs to run on Jekyll.
  • Revised CSS to take advantage of Sass.
  • Enhanced table views now have support for lists featuring icons and images.
Getting Started with Ratchet 2.0
You can quickly get up and running with your new Ratchet app in just a few steps given below:

Download Ratchet:
First of all, you need to head over to and download the Latest Version of Ratchet. Simply click the big download button and you're done.

Start a Server:
The next thing youâve to do is starting a server. Even if Ratchet is a front-end framework, it still requires a web server running for Push.js to function properly. If you're using Windows, the simplest way is to start up a local server using WAMP.

Otherwise, if youâre on Mac OS X, you can start a Python server in a few dead simple steps. Launch the Terminal app and navigate to the Ratchet project folder using the cd (change-directory) command. You need to simply change the path from current directory to your project directory: $ cd ~/dev/MyRatchetProject.

As Python comes pre-installed on Mac OS X, itâs quite easy for you to start a server. Just type $ python -m SimpleHTTPServer command and hit enter. This should print the following message:

Serving HTTP on port 8000 ...

Means, youâve successfully started an HTTP server on port 8000 that is the default port. Now type http://localhost:8000 in your desktop browser and youâre good to go.

Emulate Touch Events:
Because Ratchet doesnât work properly with default desktop browser settings, you need to create a development environment. The simplest method is to emulate touch events either in Chrome or Firefox. Alternatively, you can develop your Ratchet app using a using a mobile device simulator. If youâre on Mac OS X, I recommend you to install XCode and make use of the iPhone simulator to see how your site will be rendered in the mobile version of Safari.

Another option is to use a real mobile device, for example iPhone. If your iPhone and Mac are connected to the same wireless connection, enter your Mac's IP address along with the default port (which is 8000) into Safari. The complete address would look like this: Keep in mind, the IP address and port will vary according to your development machine.

Check Out Examples:
To get your app started, check out example applications and use the basic template. Make sure to include ratchet-theme-android.css or ratchet-theme-ios.css in the <head> of your application, if youâre targeting a specific platform.
Basic Structure of a Ratchet App
In terms of structure, a Ratchet page is quite similar to a normal web page that can be linked to another web page. To structure you Ratchet pages, keep these three simple rules in your mind:

  1. Fixed bar is the first thing :- If youâre going to include a fixed bar (.bar class) in your Ratchet page, it must be the first thing inside the <body>.
  2. Everything else will go in .content :- Anything that is not contained in the .bar class should always be put inside a div with the .content class.
  3. Meta tags are crucial :- Donât forget to add proper <meta> tags, as they play a vital role in the proper working of the Ratchet app.
To better understand what should go in the <body> of the page, go through the code snippet of the basic template.
Ratchet Components
Ratchet 2.0 comes with a huge variety of ready-to-use components, which are in the form of CSS classes. For the complete list of Ratchet components, I suggest you to go through the official Ratchet documentation. Some of the useful components are explained below:

Like every front-end framework, Ratchet also has good default typography. So you just need to use headings and paragraphs for title and description in your application. In addition, if you want to give the content space around the edges, you can wrap elements with the .content-padded class.

Ratchet Framework: The Starter Guide to Build Mobile Web Apps - Image 1

<div class="content-padded">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

Table Views:
Table views can be used to organize data, show a series of controls or collections of links. You can create a table view by adding the .table-view class to an unordered list and the .table-view-cell class to each list item.
Ratchet Framework: The Starter Guide to Build Mobile Web Apps - Image 2

<ul class="table-view">
<li class="table-view-cell">Item 1</li>
<li class="table-view-cell table-view-cell">Item 2</li>
<li class="table-view-divider">Divider</li>
<li class="table-view-cell">Item 3</li>

To help inform interactions in your application, Ratchet offers you more than 80 font icons that also work inside buttons.

<div class="content-padded">
<span class="icon icon-back"></span>
<span class="icon icon-bars"></span>
<span class="icon icon-caret"></span>
<span class="icon icon-check"></span>
<span class="icon icon-close"></span>
<span class="icon icon-code"></span>
<span class="icon icon-compose"></span>
<span class="icon icon-download"></span>
<span class="icon icon-edit"></span>
<span class="icon icon-forward"></span>
<span class="icon icon-gear"></span>
<span class="icon icon-home"></span>
<span class="icon icon-info"></span>
<span class="icon icon-list"></span>
<span class="icon icon-more-vertical"></span>
<span class="icon icon-more"></span>
<span class="icon icon-pages"></span>
<span class="icon icon-pause"></span>
<span class="icon icon-person"></span>
<span class="icon icon-play"></span>
<span class="icon icon-plus"></span>
<span class="icon icon-refresh"></span>
<span class="icon icon-search"></span>
<span class="icon icon-share"></span>
<span class="icon icon-sound"></span>
<span class="icon icon-sound2"></span>
<span class="icon icon-sound3"></span>
<span class="icon icon-sound4"></span>
<span class="icon icon-star-filled"></span>
<span class="icon icon-star"></span>
<span class="icon icon-stop"></span>
<span class="icon icon-trash"></span>
<span class="icon icon-up-nav"></span>
<span class="icon icon-up"></span>
<span class="icon icon-right-nav"></span>
<span class="icon icon-right"></span>
<span class="icon icon-down-nav"></span>
<span class="icon icon-down"></span>
<span class="icon icon-left-nav"></span>
<span class="icon icon-left"></span>
Ratchet Framework: The Starter Guide to Build Mobile Web Apps - Image 3
Block Buttons:
Ratchet features a number of different button styles including Block buttons, Buttons with icons, Buttons with badges, and more. The Block buttons style generates nice big buttons that extent to the full width of the parent container. Below is the example code with the screenshot of Block buttons.

<div class="content">
<div class="content-padded">
<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>
<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
Ratchet Framework: The Starter Guide to Build Mobile Web Apps - Image 4
Ratchet comes with a built-in image slider component that supports swipe gestures. Using several CSS classes, you can build a slider containing as many slides as you want.
Ratchet Framework: The Starter Guide to Build Mobile Web Apps - Image 5

<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
Page Transitions (Push.js):
Push.js is a JavaScript engine that establishes a connection between various Ratchet pages through AJAX. It listens to all clicks on a page and applies transitions automatically. To add a transition, you simply need to add a custom attribute data-transition, which takes any one of these three transitions: fade, slide-in, or slide-out, to the <a> element. For example, you can make a page fade by adding fade transition to the link, as shown below:
<a href="three.html" data-transition="fade">Three</a>
This blog is listed under Open Source , Development & Implementations , Digital Media & Games and Mobility Community

Post a Comment

Please notify me the replies via email.

  • We hope the conversations that take place on will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url