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

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.

Instructor: [00:01] in this sample ionic application, I have two header tags and a paragraph. For the first header, I want this text to be centered, so I add the Text Centered directive to it. For the second header, I want this to be aligned to the right, so I will add the Text Right to the tag. Finally, for the paragraph, I want this text to be justified.

[00:24] This is done by adding a Text Justified directive. When I save the file and the app is rebuilt, we will see my text now aligned correctly. Another modification that is quite common is the adjustment of the case of the text. Ionic also provides directive for changing the text case to all uppercase, which I'll add to the first header.

[00:47] I want the second header to be all lowercase, so I'll add the Text Lowercase to that tag. Saving again, we can see the changes. Ionic also includes a directive to capitalize the text by using Text Capitalize. I'll change the second header to use this. Each of the modifiers can be further controlled by adding responsive break points to the directive.

[01:11] If we want the first header tag to only be centered when the minimum width is 576 pixels, I can change the directive to Text-Sm-Center. Now, only when that breakpoint is met will the directive be applied...

Course

Style and Theme Ionic v3 Applications

Align and Size Text with Ionic v3 CSS Utilities

Share this video with your friends