Welcome to the 6. lesson of the Ionic Crash Course!

Today we will make our app look more like an actual Star Wars app. Although the out of the box styling of Ionic is great and really helps to get started faster, we want of course our own touch of colors!

Therefore we take a look at 2 different parts of the styling: Applying some general styling though SASS and a more granular styling with CSS variables used in Ionic.

1. Places to change the UI

First of all, in general we can style our app through all kinds of CSS and also SASS.

You might have noticed that each new generated page comes with its own SASS file, so those files are used to directly style one specific page.

Additional we got the theme folder right next to our app folder. This is a place to override Ionic variables(more on this in the next section) and to import e.g. custom fonts or more individual styling files.

Finally we also got another SASS file at app/global.scss where we can apply some global styling to our app.

These 3 are the areas where we can add styling, and of course we need to work with our HTML to apply CSS classes to different objects.

2. Overriding Ionic Variables

We have already used the Ionic styling at some points, you might have noticed expressions like this:

If you have asked yourself where that blue color came from, the answer to the question is the colors definition inside src/theme/variables.scss.

You can either change the values by hand, or what I would recommend, use the amazing color generator to create the whole file with new colors!

Ionic uses these CSS variables and a special colors map internally to allow faster styling directly on components! If you would use those variables throughout your application all the time, you could change the whole color scheme within minutes (or even seconds).

In our case, we can also make use of it as we have used the primary color a few times, so I’ve played around with the color generator and the result could be this:

All these variables will be added to the root element of our app so all components get those values.

These colors can also be used in custom SCSS files for each page, but more on that later.

This change already changes a bit of the appearance, but we want more!

What we can do additional is to override more Ionic CSS Variables. There are a bunch of variables (in fact almost everything) that we can directly override to make our app look like we want it to.

Of course you can’t know the names of all these variables, but the documentation has a search bar so try to search for the element you want to change the style for and give it a try.

Caution: At the time of writing this the docs are not yet ready so you have to find out the names on your own, but we’ll also take a look at how to do this inside the last day of the course.

For now we add these override statements above the colors map from before (still inside :root):

Now we have set the values that Ionic internally uses to style the components to some other values, and we have used the CSS var() function to retrieve other values directly from the previously defined colors – something you can do from all your SASS files inside the project!

If you run your app now it looks already a lot more like a Star Wars app!

3. Custom CSS

While we have previously changed big parts of our app, we now want to only target a specific page. Of course you can’t make all the styling global, because at some point you will break your stuff and everything goes down.

In our case we build out our FilmDetailsPage a bit more to include a few more information and also use more of our better defined colors map. We can use the keywords from that map directly inside the HTML, and to all other items that need special treatment we assign their own CSS class.

Open your pages/film-details/film-details.page.html and change it to:

Besides a few more classes and keyword nothing really fancy. Every web developer should feel right at home!

Of course we now need to define the classes, and this can be done in the according Sass file that was initially already created for us, so replace everything inside pages/film-details/film-details.page.scss with:

As you can see, we can make use of the colors map again.

If you want to keep your styling as flexible as possible, try to have your main colors inside that map and simply use the function to load them in the other pages styling files!

If you run your app now your result should look like below.

4. Next Steps

Congratulations on finishing the 6. lesson!

You are now almost an Ionic pro. Well..but you can build apps somehow! And that’s good news.

Styling your Ionic app really comes down to basic CSS skills. Of course there is less space and you shouldn’t work too much with absolute positions due to the different sizes of devices, but in general it’s CSS!

If you can make a web app look good, you can do the same with Ionic. If you’re coming from a native language, this might also be a bit more relaxing and easy than what you have known before.

Tomorrow we will take a final look at debugging because I don’t want to let you out in the wild without knowing about the appropriate tools to fix your bugs!

But of course you can always find help here as a member inside the Ionic Academy!