Template for responsive mobile, offline web apps

It can be difficult to create a web app that is responsive to different screen resolutions and works well in mobile environments or environments with spotty network availability.

In order to make it easier, Jason Strimpel and I created a project template, create-responsive-template, that takes care of a few things for you:

• Uses Twitter Bootstrap for a baseline style and responsive UI
• A couple of small JS helpers for AppCache and network events
• A build step that optimizes JS and CSS and generates the AppCache manifest for you

A bonus: the tooling is in JavaScript, run in Node. Some background on that choice.

Here is a video that shows how you can use the template:



The next steps I would like to see for this project template:

• An IndexedDB data layer: A JS helper library that looks like the IndexedDB API, but will use an API shim over Web SQL if IndexedDB is not available. The shim does not have to implement 100% of the IndexedDB API, but something that allows a good start to local data storage. I am looking at Lawnchair at the moment, but open to other ideas.
• An easy way to generate app store manifests for Mozilla Web Apps and Google Chrome Store.

If you have any thoughts on how best to accomplish those steps, open an issue with details, or leave a comment here on the blog post.