Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A collection of Open Web App templates

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 mortar-app-stub @ 714abee
Octocat-spinner-32 mortar-game-stub @ 8a12e79
Octocat-spinner-32 mortar-list-detail @ 0060b7a
Octocat-spinner-32 mortar-tab-view @ f96dd4f
Octocat-spinner-32 .gitmodules
Octocat-spinner-32 README.md
README.md

Open Web App Templates

This is a meta-repo that tracks all the templates that Mozilla is offering for Open Web Apps. Check out the README of each template for usage instructions.

The following templates are available:

  • mortar-app-stub: a blank template that comes only with the basic things required to get started
  • mortar-game-stub: a minimal web game template that handles input and a render loop
  • mortar-list-detail: comes with a layouts library and sets up a list-detail layout for you
  • mortar-tab-view, which is similar to mortar-list-detail but the initial layout has tabs at the button which let you switch between screens.

You can view more documentation here.

Usage

You can simply git clone any of the above templates, or use volo to create an app from one of them. If you have node installed, simply run npm install -g volo to get volo. Examples:

  • Using git: git clone <template-github-url> myapp
  • Using volo: volo create myapp mozilla/<template-name>

Each template has documentation in its README specific to what it provides, but there are a few things that all of them provide.

All of them come with an initial project structure, a volo configuration file, initial css and js files, require.js, a basic manifest.webapp, and more. These are all very useful for developing webapps.

You can use volo to fire up a development server, add javascript dependencies, and deploy you app. View this documentation for more details.

require.js is a module system for javascript, and it makes it easy to manage javascript dependencies. Using this, we can easily minify and concatenate all your javascript without any extra work. It also organizes your javascript into a clean structure. Read more about it here.

The rest of the project is simply a starting point for all your HTML, CSS, and javascript.

Something went wrong with that request. Please try again.