• Stars
    star
    14,596
  • Rank 1,962 (Top 0.04 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 12 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Ratchet

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 https://github.com/twbs/ratchet.git 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:

ratchet/
├── css/
│   ├── ratchet.css
│   ├── ratchet.min.css
│   ├── ratchet-theme-android.css
│   ├── ratchet-theme-android.min.css
│   ├── ratchet-theme-ios.css
│   └── ratchet-theme-ios.min.css
├── js/
│   ├── ratchet.js
│   └── ratchet.min.js
└── fonts/
    ├── ratchicons.eot
    ├── ratchicons.svg
    ├── ratchicons.ttf
    └── ratchicons.woff

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.

Documentation

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

Running documentation locally

  1. If necessary, install Jekyll (requires v3.0.x).
  1. Install the Ruby-based syntax highlighter, Rouge, with gem install rouge.
  2. From the root /ratchet directory, run jekyll serve in the command line.
  3. 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 http://goratchet.com/1.0.2/ while folks transition to Ratchet 2.

Previous releases and their documentation are also available for download.

Support

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

Contributing

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

Troubleshooting

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>

Versioning

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:

<major>.<minor>.<patch>

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 http://semver.org/.

Maintainers

Connor Sears

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

License

Ratchet is licensed under the MIT License.

More Repositories

1

bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
JavaScript
167,558
star
2

bootstrap-sass

Official Sass port of Bootstrap 2 and 3.
SCSS
12,614
star
3

icons

Official open source SVG icon library for Bootstrap.
JavaScript
7,211
star
4

rfs

✩ Automates responsive resizing ✩
CSS
3,285
star
5

bootlint

HTML linter for Bootstrap projects
JavaScript
2,398
star
6

bootstrap-rubygem

Bootstrap rubygem for Rails / Sprockets / Hanami / etc
SCSS
2,003
star
7

bootstrap-npm-starter

Starter template for new building with Bootstrap 4 in npm projects.
HTML
1,225
star
8

bootstrap-expo

Beautiful and inspiring uses of Bootstrap.
SCSS
476
star
9

examples

Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!
HTML
297
star
10

blog

Official blog for Bootstrap.
HTML
227
star
11

bootstrap-server

The node server that powers the bootstrap customize page (no longer maintained).
JavaScript
177
star
12

stylelint-config-twbs-bootstrap

Stylelint config for Bootstrap
JavaScript
139
star
13

no-carrier

Tool to auto-close old GitHub issues that were abandoned by their reporter
Scala
132
star
14

release

Bootstrap Release Working Group
111
star
15

rorschach

Bootstrap pull request sanity checker bot
Scala
105
star
16

mq4-hover-shim

A shim for the Media Queries Level 4 `hover` media feature
JavaScript
97
star
17

grunt-bootlint

A Grunt wrapper for Bootlint, the HTML linter for Bootstrap projects
JavaScript
65
star
18

savage

Service to safely run Travis CI tests with heightened permissions on pull requests
Scala
45
star
19

bootstrap-npm

Demo for how to include, customize, and compile Bootstrap's Sass/CSS with npm.
HTML
32
star
20

grunt-css-flip

UNMAINTAINED Grunt plugin for Twitter's css-flip.
JavaScript
23
star
21

gruntworker

Periodically grabs changes, runs build scripts, and pushes built changes back to the Bootstrap git repo
Python
19
star
22

bootlint-server

JavaScript
6
star
23

.github

6
star