explaingit

twbs/ratchet

Analysis updated 2026-06-24

14,658CSSAudience · designerComplexity · 2/5LicenseSetup · easy

TLDR

Small HTML, CSS, and JavaScript toolkit from the Bootstrap team for prototyping mobile-app interfaces with iOS and Android themes and an icon font.

Mindmap

mindmap
  root((ratchet))
    Inputs
      HTML markup
      Ratchet CSS
      Ratchet JS
    Outputs
      Mobile UI
      iOS theme
      Android theme
      Icon glyphs
    Use Cases
      Prototype a phone app
      Mock iOS or Android UI
      Build hybrid app shell
    Tech Stack
      HTML
      CSS
      JavaScript
      Jekyll
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Prototype the screens of a phone app using only HTML and CSS

USE CASE 2

Mock up iOS and Android styled UIs to share with stakeholders

USE CASE 3

Build the shell of a hybrid mobile web app with push-style page transitions

USE CASE 4

Use the Ratchicons icon font in a mobile-styled web view

What is it built with?

HTMLCSSJavaScriptJekyll

How does it compare?

twbs/ratchetchriskempson/tomorrow-themecodebyzach/pace
Stars14,65813,97215,616
LanguageCSSCSSCSS
Setup difficultyeasyeasyeasy
Complexity2/51/52/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Pages use XHR via push.js, so the project must be served from a local HTTP server rather than opened as a file URL.

MIT lets you use, modify, and ship this in commercial products as long as you keep the copyright notice.

In plain English

Ratchet is a small toolkit from the Bootstrap team for building mobile apps using only HTML, CSS, and JavaScript. The idea, as stated in the README, is that someone can put together a prototype of a phone app using regular web-page building blocks instead of native iOS or Android tools. The project lives at goratchet.com, where the docs and examples are hosted. To start, you either clone the Git repository or download a bundled zip. Inside the download you get a folder with three groups of files: a css folder containing the main Ratchet stylesheet plus optional Android and iOS themes, a js folder containing the Ratchet JavaScript, and a fonts folder containing an icon font called Ratchicons. Each CSS and JS file ships in both a normal and a minified version. The README warns that the master branch is active development and recommends grabbing a tagged release for stable use. The documentation is written with Jekyll and published on GitHub Pages. You can also run the docs locally by installing Jekyll, installing a Ruby syntax highlighter called Rouge, then running jekyll serve from the project root and opening localhost:4000 in a browser. There are notes about where to find docs for older releases. A troubleshooting section flags a few practical gotchas. Ratchet is built around touch events, so on a desktop browser the mouse will not trigger them unless you enable touch emulation or use a helper library. Inline script tags do not run on pages loaded by Ratchet's push.js page loader, so event handlers should be attached at the document level. And because Ratchet fetches additional pages via XHR, opening the files directly from the file system fails on modern browsers, so the README suggests serving the folder from a simple local HTTP server. The rest of the README covers semantic versioning, the maintainers (Connor Sears, with original credit to Dave Gamache and Jacob Thornton), and an MIT license notice.

Copy-paste prompts

Prompt 1
Give me a 5-minute setup guide that serves a Ratchet prototype from a local HTTP server
Prompt 2
Show me a Ratchet HTML page that uses the iOS theme with a top bar, list view, and tab bar
Prompt 3
Walk me through swapping the iOS theme for the Android theme in a Ratchet project
Prompt 4
How do I attach a click handler on a Ratchet page loaded via push.js so it actually fires
Prompt 5
Build a Jekyll setup so I can run the Ratchet docs locally with jekyll serve

Frequently asked questions

What is ratchet?

Small HTML, CSS, and JavaScript toolkit from the Bootstrap team for prototyping mobile-app interfaces with iOS and Android themes and an icon font.

What language is ratchet written in?

Mainly CSS. The stack also includes HTML, CSS, JavaScript.

What license does ratchet use?

MIT lets you use, modify, and ship this in commercial products as long as you keep the copyright notice.

How hard is ratchet to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is ratchet for?

Mainly designer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.