Welcome to Part 5 of this review of the Pluralsight course “Building Mobile Apps with the Ionic Framework and Angular JS” by Steve Michelotti.

Steve is a Microsoft ASP.NET MVP and holds MCSD, MCPD, and MCT certifications. He has produced a total of 7 courses for Pluralsight and is working on more.

Also in this series

Part 1 – Getting Started with the Ionic Framework.

Part 2 – Navigating and Routing

Part 3 – Ionic Components

Part 4 – Mapping

Part 5 – Customizing Ionic

Part 6 – ngCordova

Customizing Ionic

Overview

This module begins with a custom Angular directive for using Markdown for client-side formatting and display

Custom Markdown Directive

Steve shows us how to install and add our reference to Showdown, which is the most common library for dealing with Markdown

See a live demo here: http://showdownjs.github.io/demo/

Next we see how to create a custom Angular directive to execute Markdown code.

Customizing the CSS

Steve adds an allow-bullets CSS rule which correctly displays the bullet points on the screen

SASS Overview

Ionic CSS is built on SASS, which is a CSS preprocessor. If you aren’t at all familiar with it, you have a few options:

You can check out the Using SASS module of Shawn Wildermuth’s “A Better CSS: LESS and SASS”

or see Jason Roberts “Simplifying CSS in Visual Studio With Sass”

or see Gary Simon’s “Speeding up Your CSS Workflow with Sass and Compass”

Having said all of that, Steve gives you a high level overview here and you should be able to follow along anyway. And as Steve says, there’s also good documentation at sass-lang.com

Installing SASS

You can see official Ionic documentation on SASS here

To install SASS see http://sass-lang.com/install

Steve uses Ruby gems to install sass

Implementing SASS Changes

Steve gives a quick demo to show that it’s easy to customize the Ionic SASS in your app.

App Metadata and Icons

The default home screen icon shows the generic Cordova image and “HelloCordova” as the title. This is due to these being the defaults in config.xml

Fortunately these are trivial to update.

Steve says he made his icon images at makeiconapp.com – I couldn’t find this website but I did find https://makeappicon.com/ which does the same thing, and I found this pretty easy to use.

Steve also shows some of the parts that you might want to update in AndroidManifest.xml

Continue to Part 6 – ngCordova