Before reading this article, please go through the articles, mentioned below.

Apache Cordova

Apache Cordova is an open source project, which aims to allow the mobile developers to build Applications for all the major mobile platforms , using HTML, CSS and JavaScript technologies.

Ionic Framework

Ionic is a powerful HTML5 SDK, which helps you to build native-feeling mobile apps, using Web technologies like HTML, CSS and JavaScript.

Building Ionic Blank app with different Color classes in Visual Studio 2015

Let's see how Ionic Framework makes use of colors for the different elements (buttons, Header, Footer).

Ionic Framework gives us a set of nine predefined color classes. You can use these colors or you can override it with your own styling.

Following list shows the default set of 9 colors, which are provided by Ionic.

Ionic

Ionic Color Usage

Ionic makes use of different classes for each element. For example, if you set a button, it contains button class.

Create a grey color button we will use button-stable class as follows.

<div class="button button-stable">
...
</div>

You can also use Ionic color class like any other CSS class.

Let’s see how to build color classes with Ionic Blank apps.

Prerequisites

Follow the steps, mentioned below to use the Color classes in Ionic Blank apps, using Ionic Framework.

Step 1

Create an Ionic Blank App

Ionic

Let’s be ready to create a New Project. Thus, open Visual Studio 2015 and click File -> New -> Project Option to create Ionic Blank apps, using Ionic Framework.

Step 2
Giving the Project Name

Thus, New Project Window will open. You can select an Installed -> Template -> JavaScript -> Apache Cordova Apps ->Ionic JavaScript Blank.

Type Project Name ionic-js-ColorApp and click OK button.

Ionic

Step 3

Main screen is shown below.

Ionic

Step 4
Adding Color Classes

Go to the solution bar and choose the index.html. This is the starting screen of your app. We can add our HTML coding, as shown below.

Ionic
  1. <p class="stable">
  2. Welcome C# Corner Viewers-We use stable color class for Gray Color</p>
  4. <br />
  6. <p class="positive">Welcome C# Corner Viewers-We use positive color class for dark Blue Color</p>
  8. <br />
  10. <p class="calm">Welcome C# Corner Viewers-We use calm color class for light Blue Color</p>
  12. <br />
  14. <p class="balanced">Welcome C# Corner Viewers-We use balanced color class for Green Color</p>
  16. <br />
  18. <p class="energized">Welcome C# Corner Viewers-We use energized color class for Yellow Color</p>
  20. <br />
  22. <p class="assertive">Welcome C# Corner Viewers-We use assertive color class for Red Color</p>
  24. <br />
  26. <p class="royal">Welcome C# Corner Viewers-We use royal color class for Violet Color</p>
  28. <br />
  30. <p class="dark">Welcome C# Viewers-We use dark color class for Black Color</p>
  32. <br />
  34. <p class="balanced">Welcome C# Viewers-We use balanced color class for Green Color</p> // This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}
We can also use the color class for each different element. For example, here we apply the color class for the button element.

Ionic

<button class="energized">Welcome to Ionic Framework</button>

Step 5
Customize the color class

Subsequently, we also customize the default color.

Choose www->lib->ionicons->scss->_variables.scss

Ionic

Now, change the default colors.

Ionic

Step 6
Run the Application

Now, we are ready to run our project. Thus, click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).

Ionic

Output of the main screen is shown below.

Ionic

Output 1 is shown below after adding button control

Ionic

Conclusion

I hope, you understood how to use the color classes in the Ionic blank app, using Visual Studio 2015 and how to run it.