Course Overview: Style and Theme Ionic v3 Applications

Customize Ionic v3 Default Theme Colors

Override Global SASS Variables in Ionic v3 Applications

Set Ionic v3 Config Parameters

Style an Ionic v3 Component on a Single Page

Align and Size Text with Ionic v3 CSS Utilities

Structure an Application UI with Ionic v3 Grid

Lay Out Content with Ionic v3 CSS Utilities

Align Elements with Ionic v3 Grid

First Look: Theming Ionic 4 applications

Style and Theme Ionic v3 Applications

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.

Instructor: [00:00] When styling Ionic components, it's best to see if there is an existing SASS variable that you can set directly. Here, we have the basics of a login form. Two inputs and a login button. As you can see, the alignment of the two inputs does not match the left edge of the button. Let's fix that.

[00:18] To move the inputs over, we need to understand what is causing them to be shifted to the right. Opening Chrome's dev tools and using the elements inspector, we can select each of the DOM elements until we find it's the Ion item that is introducing the padding left that is shifting our inputs over.

[00:37] Now, we could directly override these values, but I want to change this value globally in my application. To do this, first I'm going to see if the Ionic framework has exposed a SASS variable for this attribute.

[00:50] If you go to the API section for that component, there is a listing of some of the SASS variable to use for that component. Since I do not see anything about padding or margins, I'm going to navigate over to the overriding SASS variables page.

[01:05] This page contains a listing of all the SASS variables used in Ionic. I'm going to search on item-md. This list new filters the variables for us. There's the exact name of the SASS variable we need, item-md-padding-left. The iOS-specific value would be item-ios-padding-left.

[01:34] We can also see the default value is 16 pixels, the same value we saw when we were inspecting the DOM. As you can tell, the naming scheme is pretty straightforward. We probably could have guessed the name of this variable if we really tried.

[01:49] Let's switch back to our code. We can set these two values in our variables.scss file. Saving them, and now, our two inputs are aligned to the left of the button. Ionic has exposed almost all their styling elements as SASS variables, making it fairly easy to apply custom styling to any of your components.

Course

Style and Theme Ionic v3 Applications

Override Global SASS Variables in Ionic v3 Applications

Share this video with your friends