What's new in version 1.12:
Youtube support for both username and channel ID based URLs. Slide menu remains open on wide screens.

What's new in version 1.11:
Fixes and update to Ionic 1.3.

What's new in version 1.10:
Ionic library update, native scrolling, minor fixes and obfuscation of code.

Feature request

Help us improve this app in a way that absolutely makes sense. Suggest the next feature you would like to see implemented. We are taking suggestions very seriously.

Introduction

Barebone Ionic Material is the Material Design you need in order to build your next extremely modular Ionic application. It is a well structured, well organised and implemented, full working app that comes with all the ingredients a modern application needs. Best practices, proven techniques and experienced software architecture are packed with a well crafted integration of Material design principles.

At a glance

• Slide menu navigation
• Master/Details display of remote JSON data
• Image Galleries based on remote JSON data
• Infinite Scroll
• Push notification
• Plethora of Form Elements Samples
• Grunt based build system
• Extremely Modular Architecture
• 3rd party APIs integration
• Share articles to social media and any other defined service
• WordPress
• Drupal
• YouTube
• Vimeo
• Facebook (Authentication, User's Albums
• Instagram
• Google Charts
• Native calls
• Make a phone call
• Prepare and email and open the native mailer app
• Open Map application with a predefined marker
• Send a URL to a native browser window
• Watch and display the current position of the device (location service)

Demo

Android .APK

• Android APK v1.12

Preview on iOS and Android - Ionic View

• Download the Ionic View app (http://view.ionic.io)
• Use the App ID 72a8da18

Note: Some features are not fully functional for preview on Ionic View. Especially, those that need to launch another application of the device such as "Get Directions" which launches device's Google Maps application. Other examples are "Calls us", "Send us an email", "Rate this app" features.

Features

Navigation

The application follows the modern trends of the “Slide menu”.

Remote data

The News, Products and Galleries, listing windows are fetching data from online sources by using the JSON protocol. The source URLs for these listings are set in the application’s configuration file. Images, Galleries, texts and whole entries can be updated by adjusting the remote sources. Nevertheless, rebuilding and re-distributing the application are not required for constant updates.

The same applies for the pins in the live map too. The users are able to add and configure the pin points just by adjusting the remote source.

Articles and products listing

Two different content types are used and demonstrated in Barebone Ionic Material. The application provides the ability of forming Articles by adding a unique photo in any of them. Products are similar to Articles but are supporting an unlimited number of accompanying images. An Image Slider is created by using them.

Gallery integration

Barebone Ionic Material comes with an Image Gallery already integrated. All the images are controlled by a remote JSON structure. Unlimited number of Galleries is supported and displayed by using three different views: Galleries Feed, Gallery’s thumbnail, Images View (slide).

Wordpress

Barebone Ionic Material provides Wordpress support that is going to facilitate you to fetch and display the posts of a Wordpress website by simply replacing a single line of the code with the desired JSON feed source.

Drupal

Barebone Ionic Material ensures an easy way to fetch and display the articles you choose from a Drupal website in a very smart and rapid manner just by placing your JSON feed of the articles only in one line of the code.

RSS

Atom, RSS, or Media RSS feed could be consumed by using the Google Feed API which is already integrated into the app. A Working example where articles are consumed for the RSS Feeds of the Wired magazine is provided

YouTube

Youtube playlists is fast and easy to be fed into the application. You only need to do two simple steps: 1. Provide the Youtube account username and 2. Provide your API key in a single code line

All the complexity behind the communication with the Youtube API is taken care for you already.

Vimeo

Vimeo playlists is fast and easy to be fed into the application. You only need to do two simple steps: 1. Provide the Vimeo account username and 2. Provide your API key in a single code line

All the complexity behind the communication with the Vimeo API is taken care for you already.

Infinite Scroll

Infinite Scroll, a technique that loads paginated data automatically while you are scrolling is demonstrated. Best practices regarding its implementation are available in the Vimeo videos listing screens. Infinite Scroll, ensures that the user enjoys a truly responsive experience without having to wait for pages to preload.

Facebook

A fully working example of the Facebook Graph API is integrated into the application. By exploiting all the potentials of Facebook Graph API, the application authenticates the user and displays their full name and email address Facebook keeps in its records without the need to provide those information to the app on their own.

Instagram

A fully working example of the Instagram API is integrated into the application which displays the user’s recent posts on Instagram. Firstly, the application authenticates the user when they login to their Instagram account. Then, displaying their recent posts is as simple as that by keeping things easy and uncomplicated for the user.

Google Charts

A Charts module is part of the Barebone Ionic Material application. The module is making use of Google Charts and integrates their API. It uses the Chart engine the service of Google is providing and makes any chart available in the mobile device. The data that are used for the charts are handled completely by the application.

Location Service / Device's Location

A full working Location module demonstrates the location service. It is watching and gets and displays the current position of the device. Move the device and the location data will be updated.

Plethora of Forms Samples

A plethora of Sample screens where all the available by the platform form elements and form layouts are demonstrated.

See a Video Demonstration ...

Push notification

A full working Push notification example is integrated into the application. It comes also with detailed instructions on how to configure everything in your end and have your application ready to send and receive Push Notifications.

Architecture

Yeoman Ionic Framework Generator powered

Yeoman Ionic Framework Generator combines the best practices and features for scaffolding a hybrid application. It makes building of a mobile app easy and quickly since Yeoman is integrated with Ionic Framework and Cordova plugin. Also, the included Grunt build system optimizes and automates some important tasks of your workflow.

Modularity

Barebone Ionic’s extremely modular architecture is going to eliminate any unnecessary complexity. Its code is clean and well-organised into modules to make configuration even easier. A configuration file is responsible for each feature of the application such as:

• The RSS feeds
• The News
• The Galleries
• The URLs for the remote data

Therefore, the configuration of all of the features is done through the services by which they are accompanied.

Ionic Material design

Barebone Ionic Material includes all Ionic components closely themed to the Google Material Design by integrating the Ionic Material library. As a result, there is no need to change the way you develop your Ionic hybrid app but you are able to unlock the best depth, motion and ink representations of Google’s material design with a single add-on library. Ionic Material is seamlessly themable and, also, it provides more color options as it builds on Ionic’s color naming conventions and provides 3 variations based on Google’s color style guide.Therefore, all that innovative material design principles using shadows, transitions and surfaces are available for your app with practically no effort.

Ionic design

Barebone Ionic Material utilizes Ionic Material to incorporate material design experience. Since Ionic Material is an extension library of Ionic Framework, you will find no difficulty in integrating it with Ionic directives and, as a result, it will fit seamlessly into your Ionic app development flow. Ionic Material sits atop of Ionic and complies with the conventions of the Ionic Framework without causing any conflicts with Ionic’s behavior and styles. Consequently, Ionic’s UI elements will continue to provide a pleasant and appealing user experience. Ionic Framework comes with a detailed and impressive CSS framework for layout styling. Furthermore, it handles header elements in a very similar way to existing libraries you may have used. Headers are available in many different default color options. Adding a footer element is as easy as adding a header. Moreover, Ionic comes with its own icon library built in which contains almost everything you should need.

Documentation

The documentation which is coming with, describes in details everything that is needed in order to get started with the app and personalize it.

Multilingual support

Are you interesting in having multiple languages packed with this application? Check our I18N Ionic Application and learn how you can make it happen.

Change log

1.12 - Oct 25, 2016
- Slide menu remains open on tablets and wide screens
- Support for Youtube channel URLs based on both username and channel IDs

1.11 - May 06, 2016

Ionic update to v1.3.0
Fix on showing a pin and setting the destination on Android's maps app
Fix of the ionic keyboard plugin id

1.10 - February 09, 2016

Ionic update to v1.2.4 as Ionic 1.2 uses native scrolling by default.
Ionic CLI update to v1.7.13
Addition of task in Gruntfile to minify and obfuscate CSS, HTML and Javascript files
Email composer fix for Android 6

1.9 - December 22, 2015

Fix on ConnectionType returning Connection.UNKNOWN (Android)
Ionic update to v1.1.1
Cordova CLI update to v5.4.1
Ionic CLI update to v1.7.12
ngCordova update to v0.1.23-alpha
Support of android versions back to 4.0
Plugins update
Update of ionic-material library to its latest release
Improved installation process for Win/Linux/MacOS
README.md update with improved instructions on how to install, run, build the app.

1.8 - Nov 5, 2015

Internet Connectivity check. Notifies user when internet connection problem occurs on fetching remote data.
README.md update with improved instructions on how to install, run, build the app

1.7 - Oct 17, 2015

Fix issue related with the bouncing view

1.6 - Sep 30, 2015

Ionic updated to v1.1.0
Cordova CLI update to v5.3.3
Use of transport-security plugin. This plugin allows 'Arbitrary Loads' by adding a declaration to the Info.plist file to bypass the iOS 9 App Transport Security

1.5 - Aug 18, 2015

Fix the "grunt serve" issue duo to version 1.0.1 of the "grunt-concurrent" module.

1.4 - July 31, 2015

Cordova white list plugin added. This fixes network issues reported for android devices
Ionic, Ionic CLI and Cordova references have been updated to their latest versions: 1.0.1, 1.6.3 and 5.1.1 respectively.

1.3 - June 22, 2015

Minor fixes

1.2 - June 20, 2015

Sharing article to Facebook, Twitter, Email and any other defined in the device service.

1.1 - June 15, 2015

Location Screen which demonstrates the location service. It is watching and gets and displays the current location of the device.
Sample screens demonstrating all the Form Elements and Layouts
Sample screens demonstrating Tabs and all their available styles.

1.0 - June 10, 2015

Initial release