Book Image

Hybrid Mobile Development with Ionic

By : Gaurav Saini
Book Image

Hybrid Mobile Development with Ionic

By: Gaurav Saini

Overview of this book

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps. This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application. By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.
Table of Contents (9 chapters)

Theming up SASS

Ionic has support for SASS (CSS extension language) to create, customize, and maintain CSS. It eases the process of customizing the existing colors and themes of Ionic for specific platforms. Ionic 3 as a default has SASS setup and you will find that inside the theme folder there will be an variable.scss file. In this file we will be doing custom color changes and overriding platform variables.
Earlier in Ionic 1x, the application was hooked to the Ionic's precompiled files, which you can find at the www/lib/ionic/css directory, and file resources and paths are linked in index.html. Previously, in Ionic 1x, we used to set up SASS using CLI:

    $ ionic setup sass

This used to automatically remove other file paths and uncomment the files used for SASS styling inside index.html. Now with Ionic 3 we don't have to set up SASS, it comes by default when we start or create an application.


Now the basic setup is ready for SASS and also while running ionic serve you will add all custom styling and SASS related changes in all different files for each of the components or pages. Let's start with changing one of the color variables by default present in the variable.scss file:

To customize the look and feel of
Ionic, you can override the variables

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

$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B,
twitter: #53ACEB,
github: #000000,
instagram: #235D8D

// Fastest way to change the theme of
your Ionic app is to set new value
for primary color

You can see that we have added custom colors such as Twitter and GitHub. We can further customize it by supplying base and contrast properties:

    $colors: (
base: #3b5998,
contrast: #ffffff

You can now use this color key as a property to many components, such as buttons:

<button facebook>Share on Facebook</button>

SASS is really powerful and it speeds up the CSS development process. It acts as a Swiss army knife for CSS, where we can do multiple things with minimum lines of code and then with just some changes we can easily change the entire look and feel of the application. There are so many examples of how we can use SASS, but as we are more into Ionic development, I recommend going through some good SASS documentation and Ionic 3 theming docs once so that detailed information will be provided.