When styling Ionic 2 applications, there are several different methods available to you. You can use Ionic’s built in utility attributes, you can overwrite SASS variables or create your own, and you can also define your own custom CSS rules. It can be hard to understand what to use and when, though.
In this video tutorial, I walk through some of the different ways to theme an Ionic 2 application. There was no particular plan for the video, I just wanted to jump in and show you some of the steps I would usually take when theming an application, and the methods I prefer to use. Rather than being about the high-level theory, this video should hopefully show a realistic scenario of hacking away at an application.
If you would like a more in-depth blog post about theming an Ionic 2 application, you should read A Guide to Styling an Ionic 2 Application.
Here’s the video:
If you want to build the application we are using in the video, you can read Filtering, Mapping, and Reducing Arrays in Ionic 2.
Video Notes
Use
!importantas little as possibleMake use of nesting selectors
Be aware of specificity – more specific CSS styles provided by Ionic will overwrite your own
Be aware that the HTML rendered to the DOM (Document Object Model) is not the same as what is contained in your template files
Make use of the ‘Elements’ tab to help theme your application
Make use of SASS variables where appropriate, and especially make use of the
$colorsmap