Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


Build mobile apps with simple HTML, CSS, and JavaScript components.

Subscribe to updates I use ratchet

Statistics on ratchet

Number of watchers on Github 14297
Number of open issues 226
Average time to close an issue 24 days
Main language CSS
Average time to merge a PR about 2 months
Open pull requests 24+
Closed pull requests 24+
Last commit over 3 years ago
Repo Created about 7 years ago
Repo Last Updated over 1 year ago
Size 16.1 MB
Organization / Authortwbs
Latest Releasev2.0.2
Page Updated
Do you use ratchet? Leave a review!
View open issues (226)
View ratchet activity
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating ratchet for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


GitHub Release Build Status devDependency Status

Build mobile apps with simple HTML, CSS, and JS components.

Table of contents

Getting started

  • Clone the repo with git clone or just download the bundled CSS and JS
  • Read the docs to learn about the components and how to get a prototype on your phone
  • Check out examples

Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the tagged downloads.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:


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 optional Android and iOS platform themes.


Ratchet's documentation is built with Jekyll and publicly hosted on GitHub Pages at The docs may also be run locally.

Running documentation locally

  1. If necessary, install Jekyll (requires v3.0.x).
  2. Install the Ruby-based syntax highlighter, Rouge, with gem install rouge.
  3. From the root /ratchet directory, run jekyll serve in the command line.
  4. Open http://localhost:4000 in your browser, and boom!

Learn more about using Jekyll by reading its documentation.

Documentation for previous releases

Documentation for v1.0.2 has been made available for the time being at while folks transition to Ratchet 2.

Previous releases and their documentation are also available for download.


Questions or discussions about Ratchet should happen in the Google group or hit us up on Twitter @GoRatchet.


Please file a GitHub issue to report a bug. When reporting a bug, be sure to follow the contributor guidelines.


A small list of gotchas is provided below for designers and developers starting to work with Ratchet.

  • Ratchet is designed to respond to touch events from a mobile device. In order to use mouse click events (for desktop browsing and testing), you have a few options:
    • Enable touch event emulation in Chrome (found in the overrides tab in the web inspector preferences)
    • Use a JavaScript library like fingerblast.js to emulate touch events (ideally only loaded from desktop devices)
  • Script tags containing JavaScript will not be executed on pages that are loaded with push.js. If you would like to attach event handlers to elements on other pages, document-level event delegation is a common solution.
  • Ratchet uses XHR requests to fetch additional pages inside the application. Due to security concerns, modern browsers prevent XHR requests when opening files locally (aka using the file:// protocol); consequently, Ratchet does not work when opened directly as a file.
    • A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run python -m SimpleHTTPServer <port> to serve up the files in the current directory to http://localhost:<port>


For transparency into our release cycle and in striving to maintain backward compatibility, Ratchet is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.

Releases will be numbered with the following format:


And constructed with the following guidelines:

  • Breaking backward compatibility bumps the major while resetting minor and patch
  • New additions without breaking backward compatibility bumps the minor while resetting the patch
  • Bug fixes and misc changes bumps only the patch

For more information on SemVer, please visit


Connor Sears

Created by Connor Sears, Dave Gamache, and Jacob Thornton.


Ratchet is licensed under the MIT License.

ratchet open issues Ask a question     (View All Issues)
  • almost 3 years Can AnyOne explain what is push.js file exactly ? is that the same file come with phonegap or Cordova project ?
  • almost 3 years Social Sites Icons
  • almost 3 years Drop down menu
  • about 3 years Toggle switches are broken within segmented controls
  • about 3 years Accessibility support - WAI-ARIA spec - voice over support
  • about 3 years Will an app work fine with Vuejs?
  • about 3 years Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' Using ratchet js in a apache cordova example
  • over 3 years Should reset the height of .input-row to 40px
  • over 3 years icon font problem in ratchet.min.css
  • over 3 years Long touch in iOS result sometime in new Safari window opening
  • over 3 years How to perform load js code pages after pages in push
  • over 3 years ARIA accessibility
  • over 3 years Push.js and handlebars.js - transitions on DOM content changes
  • over 3 years links to web pages do not works
  • over 3 years Link in docs is not working
  • over 3 years About Ratchet platform version support
  • almost 4 years Tabs with sliders
  • almost 4 years finger slide fail on safari(ios9)
  • almost 4 years is ratchet any test on iOS9?
  • almost 4 years Misbehaving a href with btn class
  • about 4 years modal issue
  • about 4 years Periodically refreshing a page
  • about 4 years Is this project DEAD?!
  • about 4 years when the hash like '/#/main/sub' style, ratchet.js can't work
  • about 4 years Ratchet 2.0.2 Android Themes broken
  • about 4 years Modal title bar/close hidden on iOS
  • about 4 years Bottom content hidden
  • about 4 years Bar styles after push
  • about 4 years Push.js & Rails Form not submitting
  • about 4 years Can't navigate modal
ratchet open pull requests (View All Pulls)
  • Suppress firing toggle event, if toggle status is not changed
  • Adding "btn-inline-group" and "btn-inline". A row of buttons that can…
  • Emulate transition end event
  • fixed file:// urls on some webkit based systems
  • Specify modal selector in data attribute with backward compatibility.
  • By backdrop, it is correct to stop the event (touchend) to basePage.(popover.js)
  • Added ability to toggle the Popover
  • Filter children to slides only when determining number of slides
  • Allow non-pjax page updates.
  • Fixes #539: Integrate grunt-scss-lint from #613
  • Prevent modal from triggering while scrolling
  • Fixes #620: scroll problem
  • modalToggle.hash add check contains slash
  • Allow non-slides in the .slide-group.
  • New "side-menus" component.
  • fix data-transition="fade"
  • Always load Google Font over HTTPS
  • Add a jQuery CDN fallback
  • Removes repeated class table-view-cell from code example
  • Fixed "active" class bug with toggle within a segmented control body
  • Added Support to disable the toggle
  • fix URL
  • Update readme
  • update components.html (<a> tag was not closed correctly.
ratchet questions on Stackoverflow (View All Questions)
  • Ratchet websocket server without shell
  • How to run both Laravel build in server and ratchet chat server at the same time?
  • Laravel Ratchet socket Auth
  • Ratchet PHP - interval in ws server
  • Ratchet is not receiving WebSocket packet from browser?
  • PHP Ratchet WebSockets Security
  • PHP SSE vs PHP WebSockets(Ratchet)
  • Ratchet Websocket not working in https mode in apache server
  • Issues with Ratchet WAMP Component
  • Which Ratchet Component to Use
  • Ratchet http server howto
  • Ratchet Modal closing not appeating
  • Fatal error: Interface 'Ratchet\Wamp\WampServerInterface' not found in C:\wamp\www\myRatchetTutorial\src\MyApp\Pusher.php on line 6
  • how to rectify [PHP Fatal error: Interface 'Ratchet\MessageComponentInterface' not found ] in ratchet
  • Ratchet Websockets - Instillation problems
  • Using PHP Pthreads with Ratchet Websocket
  • Laravel command set ratchet periodic timer
  • PHP Ratchet Function without MessageInterface get $this->clients
  • Laravel Queue with Ratchet serialization of 'closure'
  • Ratchet remove/add data-ignore="push"
  • ambiguity to understand Ratchet php library
  • PHP Ratchet Wamp Broadcast to subscribers on publish event
  • Lock wait timeout Symfony2 Ratchet with PdoSessionHandler
  • Something wrong with the Modal of Ratchet
  • Using ratchet and web sockets in Laravel 5.1
  • Ratchet PHP memory leak
  • Are Ratchet 2 Popovers working?
  • Ratchet PHP vs PHP Sockets
  • is Ratchet suitable for any formatted data through socket?
  • Use individual ratchet icon as inline css
ratchet list of languages used
ratchet latest release notes
v2.0.2 v2.0.2

General bug fix and documentation release.


  • #441 Fixing general docs errors
  • #443 Cleanup fingerblast
  • #446 Fix fingerblaster to use new custom event objects
  • #450 Fix device images being off by 1px.
  • #451 Fix toggle's cursor.
  • #463 Fix @keyframes in docs
  • #480 Specify cursor: grab for slide.
  • #494 Use correct relative URLs.
  • #505 Remove borders from components
  • #508 Add the minimal-ui property to the basic template
  • #511 Clarify need for touch event emulation in browser.
  • #527 Header gradient works in more browsers.
  • #530 Correct the positioning of the components jump navigation
  • #531 Widen the homepage ad
  • #533 Reordered icons in docs


  • #440 .content is now positioned absolutely
  • #445 Popover no longer triggers after it's already active.
  • #471 Add !default to scss variables
  • #482 Remove border-bottom from the last input of an input-group.
  • #489 Fixed sliders transition duration.
  • #494 Use the right relative URLs.
  • #499 Remove padding from pre code.
  • #503 Add missing blank line
  • #517 No need to remove border-bottom from inputs
  • #519 Update normalize.css to v3.0.1.
  • #528 Fix the padding on table-views in the android theme
  • #529 Make input and input row have a consistent height.
  • #532 Prevent blue text on table-view-cell active state
  • #534 Property order refinements
  • #535 Added linear and directional gradient mixins
  • #536 Bars in modals shouldn't disappear any longer
  • #537 Adjusted the form inputs and input-rows in the android theme


  • #506 Fix one letter typo.

Build tools

  • #431 Add CSSLint and CSSComb support.
  • #435 Clean dist folders when building.
  • #436 Add JSCS support
  • #455 Minify .jshintrc indent
  • #456 bower.json: ignore .travis.yml
  • #457 Remove ./ from package.json paths
  • #459 Remove eqnull relaxing option.
  • #469 Enable disallowMultipleVarDecl JSCS check
  • #478 Sass 3.3 compatibility
  • #493 Improve bower.json and package.json
  • #502 Update _config.yml description
  • #514 Update to Jekyll ~>1.5.0.
  • #518 Use textContent when innerText is not available
  • #522 Enable clean-css's advanced optimizations
  • #523 Gruntfile.js: remove unneeded target.


  • #437 Add sitemap.xml and robots.txt
  • #510 Missing comma in bower.json
v2.0.1 v2.0.1

General bug fix and documentation release.


  • #262: Typo in docs.
  • #266: Import Jekyll-on-Windows instructions from Bootstrap's README.
  • #294: Hyperlink licenses in docs footer
  • #295: Copy SemVer explanation from Bootstrap's README.
  • #296 & #290: Add current version to download buttons in docs.
  • #315: Update html5shiv CDN URL
  • #329: Improved readme
  • #330 & #331: Update template.html
  • #341: Cleaned up the version text under our download buttons.
  • #349: Reorganized docs.css
  • #359: Drop Adelle Sans for Open Sans.
  • #360: Reduce the file size on slider images.
  • #361: Use a sprite for device images.
  • #363 & #364: Fixing typos in the docs.
  • #366: Use <button> for the button examples.
  • #367: Update the compose modal in the Android example app
  • #369: Add a community section to the docs under getting started.
  • #370: Fixed minor spacing issues on the homepage
  • #399: Remove unused Typekit code. Speed increases.
  • #403: Document project's directory structure
  • #404: Removed unneeded css and markup from the docs.
  • #416: Switch to using protocol relative URLs.
  • #421: Adding an about page
  • #428: Added the /dist only download option.


  • #320: Fix a couple of CSS issues.
  • #335: Removed cursor: default; from icons
  • #362: Deprecating push-{right,left} for navigate-{right,left}
  • #366: Adds width: 100% to .btn-block
  • #392: Correct padding given to .content when using Android .tab-bar
  • #424: Added correct box-shadow to the iOS .bar-footer

Build tools

  • #279: Add licensing header to Gruntfile.
  • #284: Use load-grunt-tasks.
  • #286: Use strict in Gruntfile and force Unix newlines.
  • #287: Use /*! comment for attribution banner so it survives minification.
  • #289: Add cssmin & uglify Grunt tasks.
  • #291: Add HTML5 validation Grunt task.
  • #299: Update bower.json per latest changes
  • #301: Improve _config.yml
  • #373: Minify docs CSS
  • #378: Minify docs JS
  • #379: Add JSHint support and enable strict mode
  • #388: Updated package.json meta data
  • #394: Add initial Travis CI support.
  • #396: Adjusted advanced optimizations
  • #401: Improved minification
  • #405: Cleaned up /dist folder


  • #321: Enforce Unix line endings.
  • #328: Insert final newline in CNAME
  • #339: Added link to project website in banner comments
  • #393: Moved Ratchicons to the /fonts
v2.0.0 v2.0.0
  • Completely rewritten in SASS
  • Jekyll docs
  • New Ratchicons! An icon font dedicated to Ratchet, with support for both iOS and Android.
  • New themes for iOS and Android! That's right, Ratchet has a brand new base coat with optional themes for iOS and Android. Now your app can look right at home on either platform.
  • New card wrapper. Wrap any content or Ratchet component in a card for that classic inset card look.
  • Improved table views, now with support for lists featuring images and icons.
  • Updated class names for buttons, badges, and more to match the Bootstrap nomenclature.
Other projects in CSS