A Beginners Guide on How to Style an Ionic 2 Mobile App
Hey guys! In this post I will step by step walk you through the extreme basics on how to style an Ionic 2 application using SCSS.
To make the most of this walkthrough it would be good to have some prior knowledge of CSS and Ionic, but it is not necessary. If you are not familiar with the Ionic 2 framework I suggest checking out the Ionic 2 documentation.
Ionic 2 brings a lot of stuff to the table (If you are not starting from a completely blank scaffold). You get an app, and it is pretty much already styled. But if you want to make changes to it, it becomes little bit tricky if you are a beginner.
In order to install the necessary plugins we need to start working with Ionic we need to download and install NodeJS. After that you can install Cordova and Ionic from your terminal by running this command:
$ npm install -g ionic cordova
We will also need to install Typescript, which is the language Ionic 2 is built with. Run this command:
$ npm install -g typescript
To make this walkthrough focus mainly on styling we will use a pre-made application with a basic design.
Scaffold an Ionic 2 tabs application by running this command in your terminal:
$ ionic start myTabs tabs --v2
You will get a application with tabs so you can navigate between different views. You can test it out in the browser by typing this in your terminal!
$ ionic serve
Change the color theme with $colors
Open the app up in a text editor. (I use WebStorm IDE by Jetbrains btw)
Then start by navigating to this file:
Here you can see that the color theme of the app is set in a variable called $colors, these key/values you can edit as much as you like, even add new ones.
To show you how it works, simply replace the hex color on primary with for example “red”.
It will result in this:
You can easily use these colors in any component. I will now show you how you can do that!
Navigate to this file:
In this file we add page specific SCSS, meaning that the styles you add here will only be applied to the home page.
We are going to change the color of the h2 text “Welcome to Ionic!” to the primary color(red). In order to do that we have to add the h2 tag to page-home and override the color to map-get($colors, primary). This will fetch the variable $colors and the value of the key “primary”.
This is the result of that:
As you now may have figured out you can also use any of the keys in your $colors variable. Try playing around with it a little bit, even add some new ones!
Using $colors is a good way to keep track of all the colors in the app. You can change the colors of a huge chunk of elements at the same time by ease. Instead of having to zoom in to all different components and change the colors manually, as you would have to do if you don’t use SCSS.
Overriding Ionic Variables
In “src/theme/variables.scss” you can change a lot of Ionics pre-made designs. For example, we want to change the color of the toolbar that ionic has designed for us. We can navigate to the Ionic 2 documentation and search for “toolbar”. If you scroll down a little bit you find “toolbar-background”, this is what we need. Here you can see that the default theme color is set to “#f8f8f8”.
We are going to change the color of this toolbar to our primary color. Navigate to your “variables.scss” file and add this:
$toolbar-background: map-get($colors, primary);
and voila, all your toolbar-backgrounds in your app will become our primary color, which we previously set to red!
Hm, but what if you think the toolbar is too small? And want to increase the height of it? You can do that in a very similar way!
Go to the Overriding Variables page in the Ionic 2 documentation and search for toolbar height.
on the bottom you can see $toolbar-ios-height, $toolbar-md-height and $toolbar-wp-height. These are the different toolbar for all the three platforms that you are developing for! ios = Iphone, md = Android and wp = Windows Phone. To test it out, pick iOS toolbar and place it in “variable.scss” and simply set a new value to it, like this:
That will result in this:
As you can see, the toolbar on iOS is now huge. Feel free to experiment with this and try to find more components which you can override the style on. If you don’t know the name of the component you are looking for, you can right click on the component in the browser and look for the class name of the component, and then use that for searching in the Ionic 2 documentation!
You can also poke around in Ionic 2’s github repo for the different components and see which variables they have.
Make use of custom platform specific design
Since you are developing an application for three platform at the same time, it is critical that you can customise your components for each and one of them separately. I mean, material design doesn’t really work well in iOS.
To demonstrate this we are going to change the color of the <p> text on the iOS platform.
Navigate to this file:
Here you can add global SCSS variables. Meaning that the styles you put here will be applied to the whole app.
To make the “<p>” text on iOS green, simply add this SCSS to that file:
That will result in this! :)
This is a very simple example on how you do this. But if you imagine the possibilities! You can basically build one application and make it look super native and different on each platform. Button animations should probably be different for each platform to match with the native animations, right? I hope you understand how much time you are saving by doing this instead of developing three different native applications.
I will end my walkthrough here, and leave you to it! Try to play around as much as you can and there’s a whole lot more to learn about Ionic 2. I have just covered the basics of styling.
But remember, when you understand how to do all of this you will be able combine all the things to create really good looking applications!
I will do similar posts in the future about other aspects of the Ionic 2 framework, like how to consume Api’s, E2E testing and other fun stuff.
I pushed the result of this walkthrough to my Github if you want to check it out!
See you soon!