Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Theming Ionic applications is a topic that is often left undiscussed. Ionic has a robust API to theme your application so you don't have to settle with the default styles.

This course will show you how Ionic’s theming system works so that your application can have its unique look. It will explore the built-in utilities, which you can leverage directly.

You'll be introduced to the built-in CSS utilities that Ionic provides, Ionics grid system, and Ionic configuration settings to create a custom look and feel to your App.

The goal of this course is to introduce you to all the various touch-points where your can style your Ionic application. Beginning Ionic developers are often overwhelmed by the myriad of SASS options, configuration parameters, and more.

You will learn how to perform simple styling of an Ionic application, how to style a specific page, and how to use the Ionic configuration settings to create your custom Ionic application.

I will also show you the built-in CSS utilities that can save you time and effort to do common styling tasks. Finally, I will introduce you to Ionic's grid system, perfect to use for more complex layouts.

Course Overview: Style and Theme Ionic v3 Applications

This lesson shows you how to adjust the core colors of the theme by setting the color map values. It also demonstrates how to extend this color map for more control and options.

Customize Ionic v3 Default Theme Colors

Learn how to inspect your component to discover how the CSS is being applied, then see how to properly override the default values using Ionic's SASS variables.

Override Global SASS Variables in Ionic v3 Applications

In addition to the various SASS variables that can be adjusted to apply your theme to your Ionic application, there are several other properties that can be set to further define your app’s look and feel. By leveraging the config properties, you can quickly adjust many global parameters that define the theming and user experience of your Ionic application.

Set Ionic v3 Config Parameters

Learn how to style an Ionic Component on a single page. Also, see how to inspect and then override a CSS value for an existing Ionic component.

Style an Ionic v3 Component on a Single Page

The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when styling your application. Instead of writing your own CSS for each component's text alignment we can use the prebuilt ones.

Align and Size Text with Ionic v3 CSS Utilities

Learn how to use the Ionic Grid component to layout more advanced user interfaces. See how to use the built-in responsive breakpoints to have different layouts for different screen sizes.

Structure an Application UI with Ionic v3 Grid

The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when styling your application. Instead of writing your own CSS for each component's padding or margins we can use the prebuilt ones.

Lay Out Content with Ionic v3 CSS Utilities

Since Ionic's grid system is built on top CSS's flexbox, we can use the same alignment system it uses. We'll use a three-column grid in a template, along with some content in each column.

You'll learn how to use the Ionic Grid's Flexbox roots to quickly align rows and columns.

Align Elements with Ionic v3 Grid

The upcoming release of Ionic 4 brings some new and welcomed changes to how we theme our Ionic application. This lesson introduces you to three of the main changes: new Theme colors, CSS scoping, and CSS variables.

Style and Theme Ionic v3 Applications

Chris Griffith

Course Content