Ratchet
A small set of HTML, CSS and JavaScript components for building mobile-style web apps.
- Stars
- 14.7k
- Forks
- 1.4k
- Licence
- MIT
- Language
- CSS
- Last update
- 1.6 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
Ratchet is a front-end toolkit of ready-made HTML, CSS and JavaScript components meant for building mobile app interfaces. It ships as compiled CSS and JS files, with optional Android and iOS themes. Developers use it to prototype how a web app would look and feel on a phone.
- Build a mobile-style prototype of a web app's screens
- Use the bundled Android or iOS theme CSS to match a platform look
- Load Ratchet's CSS and JS into a static HTML page and navigate between pages with its push behavior
Great for
- Developers prototyping a mobile-style web interface with plain HTML, CSS and JS
- Designers who want to see mobile UI components in a browser
- Teams maintaining an existing Ratchet 1.x or 2.x project
Not ideal for
- Projects that need a framework-based setup such as React or Vue, since the README describes only plain HTML, CSS and JS files
- Anyone wanting a native iOS or Android app, since it builds web pages rather than native apps
- Projects needing active updates, because the README's latest push and release status should be checked before relying on it
How to get it
- 1
Download the app
Clone the repository
git clone https://github.com/twbs/ratchet.git - 2
Run it
- Download the bundled CSS and JS from the releases page, or clone the repository.
- Link ratchet.css and ratchet.js in an HTML page.
- Serve the folder with a local web server, because Ratchet does not work when opened as a file.
- Open the page in a browser or on a phone to see the components.
- 3
Get the most out of it
- Use the Android or iOS theme CSS files to match a target platform's look
- Use the minified files (ratchet.min.css and ratchet.min.js) for production-sized downloads
- Follow the README's guidance on document-level event delegation when attaching handlers across pages loaded with push.js
- Read the documentation at goratchet.com for component examples
Downloads
Strengths
- Simple to start: download the bundled CSS and JS and link them in a page
- Includes both compiled and minified files plus optional Android and iOS themes
- MIT licensed, so it can be used in commercial and personal projects
Trade-offs
- The README mentions the docs use Jekyll and a Ruby-based setup, which adds steps for local documentation
- Pages opened directly from the file system do not work; a local web server is required
- Touch behavior is tuned for phones, so desktop testing needs extra steps such as touch emulation
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| ratchet (this) | 14.7k | Library | beginner | 1.6 years ago | Developers prototyping a mobile-style web interface with plain HTML, CSS and JS |
| framework7 | 18.8k | Framework | intermediate | 6 days ago | Developers who already know HTML, CSS and JavaScript and want to build mobile-style apps |
| ionic-framework | 52.7k | Library | intermediate | 4 days ago | Web developers who want to build mobile apps using existing web skills |
| bootstrap | 175k | Library | beginner | 4 days ago | Developers building responsive websites or web app interfaces quickly |
| bulma | 50k | Library | beginner | 2 months ago | Developers who want a quick, consistent styling baseline for a web page |
| layui | 30.6k | Library | beginner | 4 days ago | Developers maintaining existing sites or admin panels built on Layui |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.