How to Customize Ionic Styles in MobileFirst Platform/Ionic Hybrid Application

Before getting started, I would like to give the credit to my teammate Jeff Tennenbaum, who figured out how to get this working.

When building hybrid mobile applications using MobileFirst Platform (MFP), part of the process is to choose a JavaScript framework to speed up the development of mobile applications (e.g., Ionic, jQuery Mobile, Dojo, etc.). In this blog, we will use Ionic for our hybrid application. One of the common things developers do is to add their custom styles. The recommended way of working with custom styles in Ionic is by using Sass, a powerful CSS language extension.

Before being able to use Sass, you will need to set it up. In this blog, we will take advantage of the new feature in MFP v7.1. One of the major enhancements in MFP v7.1 is the new development model based on Apache Cordova. In the past, it was difficult to add any third-party plugins to your MFP applications. In MFP v7.1, you can now create a Cordova application using MFP Command Line Interface (CLI). In this model, MFP SDK is packaged as a plug-in for Cordova. Because you create a Cordova application with MFP as a plug-in, you can now easily add any third-party plugins to your application and work with it like a normal Cordova application. This means, Ionic commands (including the command to set up Sass) will work in such application.

Now, let’s get started. First, we need to create a Cordova project and integrate with Ionic. Then, we can work on our customization and test the result.

Create Cordova Project

In order to use Ionic in MFP, there are manual steps that can be performed in order for it to work. However, IBM’s Carlos Santana has created a set of starter templates that you can use in order to automate the process.

You should already downloaded the Ionic templates to your local file system in order to continue with the steps outlined below. In this blog, it is under the labs/ionic/mfp-ionic-templates directory. You will be using the tabs template. You will also be adding 2 platforms: iOS and Android.

Run the following CLI commands in order to create the application using the tabs template:

$ cd ~/Documents/labs/ionic/
$ mfp cordova create myapp -p ios,android -t ~/Documents/labs/ionic/mfp-ionic-templates/tabs
$ cd myapp
$ npm install
$ mfp cordova emulate

The npm install will take care of running bower install this will download all the js dependencies in www/js/lib/

While the emulator is loading, you can examine the file structure of your application.
missing_alt

Note: You can create a plain Ionic project by using the ionic start command as described in the Ionic Getting Started Tutorial.

When prompted for what platform to run on, choose ios.
missing_alt
When prompted for target device, choose iPhone-6.
missing_alt
You can see the result running in iPhone 6 emulator, as depicted below.
missing_alt
This is an out of the box MFP/Ionic application using the tab template. Let’s proceed now with a simple customization.

Add Customization

Before starting on customizations, you need to make sure that Sass has been setup for your project. You can setup Sass by typing this command in the myapp directory.

$ ionic setup sass

Once the setup has been successfully completed, open myapp/scss/ionic.app.scss with your text editor of choice and start making modifications. For example, in order to overwrite the header’s bar-stable class, add the following line to the file and save it.

$stable: #CBBEB5 !default;

Your completed myapp/scss/ionic.app.scss file should look similar to the following.

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Add customization
$stable: #CBBEB5 !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

Run the mfp cordova emulate command again to see the changes. Your emulator should look similar to the screenshot below.
missing_alt
Congratulations! You have successfully customized the look and feel of an MFP/Ionic hybrid application. This is a very simple customization to get you started. For more information, you can check out this tutorial from the Ionic website on how to write a Sass theme.

Last modified on May 01, 2016
Share this post: