A JG Boilerplate template for Material Design

JG Boilerplate Material

A JoomGap starter project to create a hybrid mobile app for Joomla! CMS, powered by AngularJS, Ionic Framework, Ionic Material and Material Design.

This project is the product of many years of iterative development and combined community knowledge from open source projects. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.

Choose one of the following options:

  1. Download the latest stable release from joomgap.com.
  2. Clone the git repo — git clone https://github.com/JoomGap/JGBoilerplate.git - and checkout the tagged release you'd like to use.
  3. Create a new App in PhoneGap build.
  4. Build and download APK (Android) or IPA (iOS) file.
  5. Copy the file to your mobile phone and install it.
  6. Have fun!

Ionic Material is a great extension for Ionic SDK. It pours material design into your Ionic hybrid apps for all the sexy and no complexity. Now unlock the depth, motion & ink specs of Google's material design with easy-to-add-on classes.

These are the command to enable Ionic Material in a project:

   bower install ion-md-input

   bower install ionic-material

   bower install robotodraft

JG Boilerplate includes JoomGap Simple Library to integrate Joomla! CMS.

A call to Joomla! can be simply implemented in this way:

q = JgSimpleResource.get(url, params).$promise;

q.then(function(response) {
    if ( (response) && (response.success) ) {

Even though JG Simple Library is included to open a connect to Joomla! CMS, it still requires a server-side service, with an API, to access and provide any functionality. For instance, JG JEDStarter implements a similar app based on JED's "Install from Web" service.

  • Cordoba/PhoneGap mobile application.
  • Includes:
    • Cordoba/PhoneGap project
    • PhoneGap (iOS / Android / Windows)
    • PhoneGap build-ready configuration
    • AngularJS
    • AngularJS Animate
    • AngularJS Resource
    • AngularJS Sanitize
    • AngularJS UI Router
    • JoomGap Simple Library
    • Ionic Framework
    • ngCordova

Start a local development server for app dev/testing.

ionic serve 

Compile Saas to build stylesheets.


Updating Ionic. Update bower.json, driftyco/ionic-bower#....

gulp install

  • Android 5 and 6
  • Apple iOS 8 and 9

This doesn't mean that it cannot be used in older OS, just that we'll ensure compatibility with the ones mentioned above.

Welcome screen - Android

Material Design - Menu - Android

Material Design - More color - Android

Material Design - Material Buttons - Android

Material Design - Ionic Buttons - Android

Material Design - Headers - Android

Material Design - Footers and Tabs - Android

Material Design - Buttons Bars and Plain List - Android

Material Design - Icon List and Button List - Android

Material Design - Avatar List and Thumbnail List - Android

Material Design - Inset List and Cards - Android

Material Design - Forms - Android

Material Design - Ionic Extensions - Android

Material Design - List Motions - Android

Material Design - Motion Elements - Android

Material Design - Inks - Android

The code is available under the GNU GENERAL PUBLIC LICENSE Version 3.

We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.