$ git clone <repo-location>
$ cd <project-directory>
I started building pages right in the dist folder, since only prototype. Make sure each page has css/ratchet.min.css and js/ratchet.min.js attached. Some events won't work in browser without a mobile emulation. This is really easy with ChromeDevTools.
You can work in this repo on a webserver, and pull the page down on your phone as an app (I know you can do this in Safari on iOS), or you can run a simple webserver from your directory (just remember to emulate a mobile device if you are testing js):
python -m SimpleHTTPServer <port>
Leaving the below in case we run into anything.
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 tohttp://localhost:<port>
- A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run