Chapter 7. Customizing the App

In the previous chapter, we dug deeply into some more advanced features of Ionic like the popover and the modal features. In this chapter, we will be focusing on customizing an Ionic application. The Ionic SDK comes by default with some great tools that make it easy to customize your application to fit the design guides of your brand. This is thanks to its built-in integration of Gulp for your build process needs and SCSS for CSS preprocessing.

Ionic also has a special Angular provider called $ionicConfigProvider. This provider can be used to do a lot of configuration and customization like specifying what type of animations your application should use or even more advanced stuff like specifying how many cache items you want in your cache. The $ionicConfigProvider also lets you specify these configurations on a global level, or on a platform-by-platform basis.

Customizing the look and feel of your app

When you created an Ionic application using one of the Ionic templates, you would have noticed by now that it comes with some built-in default CSS styles. Many times you will want to know how you can add your own colors and styles while keeping some of the built-in Ionic styles.

Ionic styles with SASS

This is well thought out by the Ionic team and for this reason, they actually created all their CSS styles using SCSS. SCSS is an independent technology based on SASS that lets you write CSS in an object-oriented way which then gets compiled into CSS. SCSS is a really cool way to write CSS rules as it allows us to create variables and use them to create our style sheet. If you are completely new to SCSS and you want to see some brief information about SCSS, feel free to visit http://sass-lang.com.

Now, let's have a look at the folder structure of an Ionic project once more with customization of our styles with SCSS in mind.

Ionic SCSS overview

To have an overview of the SCSS structure of Ionic, we are going to create a brand new application using the Ionic blank template. We are going to call this application custom-app. The following is the command to create this new application. Fire up a terminal window on your computer and CD into a directory of your choice and run the following command:

ionic start custom-app blank

After you have created your new custom-app application, open this new project in your favorite IDE to have an overview of the folder structure. You should see something close to what we have in the following screenshot:

There are two folders that you should pay close attention to. The first folder is the scss folder found in the root directory of the project. This folder has a file called ionic.app.scss within it; we will take a look at this in more detail. The following is a screenshot of what this folder looks like:

The second folder is also titled scss, but this folder can be found by navigating...

$ionicConfigProvider

$ionicConfigProvider is a provider that Ionic exposes and which allows us to do some very powerful configurations. We will not be writing any code for this as it is an advanced feature but you should be well aware of its existence.

Some of the features that $ionicConfigProvider lets you do, include the following:

• Specify the transition type for your app

• Set the maximum cache

• Disable/enable animations

• Enable/enable native scrolling

• Specify tabs positions

These and many more are some of the features that $ionicConfigProvider lets you fiddle with. Remember that this feature is a fairly advanced feature and it is very likely possible to completely design your app without it. Most apps most likely do not use its features but if you find yourself ever needing to use it, you can visit the official documentation for $ionicConfigProvider to see its full potential at http://ionicframework.com/docs/api/provider/$ionicConfigProvider/.

Summary

In this chapter, we learned how to customize our application by setting up SCSS for our Ionic app. We also had a brief look at $ionicConfigProvider and saw some of its wonderful features. In the next chapter, we will get to learn how to create a new type of Ionic app based on the tabs template.