Ratchet

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

Getting Started

• Clone the repo git clone git@github.com:maker/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
• We will have example apps to check out very soon!

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.

Support

Ratchet was developed to support iOS 5+ for iPhone. Questions or discussions about Ratchet should happen in the Google group or hit us up on Twitter @goRatchet.

Reporting bugs & 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" are 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>

Future features

Ratchet is just getting started. Here are some of the immediate features we're thinking about:

• Shelf (exposable left hand navigation a la Path or Facebook)
• Gridviews
• Notifications
• Slide control
• More list views options
• Improved active states (especially for lists)
• Docking list dividers
• Touch library for richer touch events (swipes, long press, etc)
• Autocomplete
• Hiding title bar (hides with scroll)

Even these are just the short-term goals though. We eventually want to extend Ratchet beyond the prototying for iPhone and create HTML/CSS/JS components for iPad and Android devices. Our dream is that Ratchet becomes the best way to create mobile experiences with web standard languages.

Authors

Dave Gamache

• http://twitter.com/dhg
• http://github.com/dhgamache

Connor Sears

• http://twitter.com/connors
• http://github.com/connors

Jacob Thornton

• http://twitter.com/fat
• http://github.com/fat

License

Ratchet is licensed under the MIT License.