Webapp-Boilerplate

Simple boilerplate for small webapps.

This includes responsive design via SASS & Compass. For extending the CSS in this project you will need to download both of them. It also uses Google Webfonts and Font Awesome, but you can safely remove these libraries.

There is an Apple Touch Icon & a special icon for Firefox OS.

To build your app, this boilerplate is configured to use jQuery 2.1.0, but you may replace it with any other Javascript library (e.g. Zepto).

For deployment as an offline app a cache manifest and a Mozilla App Manifest has been added.

And there is also some basic support for The Open Graph Protocol.

So all the cool stuff is here. :)

Setup

Use git submodule update --init for fetching required submodules
Replace "Flashy application name" in all files with the name of your app.
Replace "Flashy description" in all files with the description of your app.
Replace "Flashy company" with your name.
Replace "http://flashy-domain" with the domain-part your URL.
Replace "/flashy-path/" with the path-part your URL.
Replace favicon.ico (32×32px), firefox-os-icon.png(60×60px), apple-touch-icon.png (152×152px), favicon.png (196×196px) and tile.png (310×310px) with your icon. You may want to use IconSpring for generating all your icons.
Optional: Replace "en" with your desired locale.
Start coding!
Activate caching in index.html by commenting line 2 & uncommenting line 3.

Remember: Firefox OS allows only one app per domain.

You may also want to use Grunt:

Run npm install
Rename all variables above by modiying Gruntfile.js and calling grunt replace
Create new favicons by putting an image at images/logo.png and calling grunt favicon
Activate Grunt watcher via grunt watch

Extended setup

If you want to hack a small application with this template:

Move index.html to views folder, copy .htaccess from app folder to views folder.
Create logic in app folder.
Place controller in base directory, e.g. index.php. Let it require the logic from app folder and HTML template from views folder.

If you want to use this template with any kind of MVC framework:

Move the whole project to your public folder.
Move the index.html to your views folder.

Updating

Because your app will be cached locally on the device or browser, you will have to at least update the version string in manifests/manifest.appcache and manifests/manifest.webapp. Just replace "version": "1.0" in both files by incrementing this version number in some meaningful way.

You may also want to check the JS stub in js/main.js for updating the local cache via Javascript.

Things you may want to do

Understand HTTP compression for your webserver.
Download Font Awesome locally to /css/vendor, replacing it in index.html and manifest.appcache.
Download jQuery 2.1.0 locally to /js/vendor, replacing it in index.html and manifest.appcache.
Add some touch gesture support (e.g. via jQuery.event.swipe).
You may also want to take a look at all the new Javascript APIs
…and HTML5 local storage
…and Websockets.
Build a web tile for Windows 8.
Understand the more complex features of offline-first web apps.

Version

Version: 1.0.1 (2014-09-08)

Webbapp-Boilerplate legal stuff

Author: Frank Boës