Lay Out Content with Ionic v3 CSS Utilities
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.
Instructor: [00:01] In this sample Ionic application, I have several elements that I want to adjust in our layout by changing their float values. Instead of writing the CSS myself, I can leverage the built-in directives. The non-floated version of this page is already shown on my browser.
[00:18] For the image, I want it to be floated to the left, I'll add the float-left directive to the image. Saving the file, we can see the results. Now, as you would suspect, if you need to float an image to the right, you would use float-right.
[00:35] To control when this float is applied, we can modify the direction only to be triggered at a specific breakpoint. Changing the directive to float-md-left, we can cause the image only to be floated when the minimum width is 768 pixels. If my application supports right-to-left languages, I can use the float-start or float-end to achieve the same layout as a float-left or float-right.
[01:08] I can also quickly adjust an element's padding. You have already seen this directive as it's applied to the body tag for each of the three Ionic Starter Templates. To apply padding to a specific direction, you add padding then the direction.
[01:24] For the image, I want the padding to be on the right and the bottom. Saving again, now, there are 16 pixels of padding applied to the right and bottom of my image. When I change that amount, I can override the SASS variable that defines it. Let's do that.
[01:43] Switching to the variable set SCSS file in the theme directory, I will set the content padding variable to 32 pixels. Saving again, we can see our padding around our image has now doubled.
[01:58] In addition to adding padding via specific direction, we can also use the padding vertical, or padding horizontal directives to set the padding for a specific axis.
[02:10] In addition to an element's padding, we have the same control with the margins. We can set the margin of our paragraph tag by adding a margin directive. Saving again, and now, we can see that our margins have been added.
[02:24] These directives give you easy solutions to control your content spacing and layout within your Ionic application.