How to Theme Ionic Apps - Chapter 2 | Grant Klimaytys | Skillshare

How to Theme Ionic Apps - Chapter 2

Grant Klimaytys, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (43m)
    • 1. 1 Introduction to How to Easily Theme an Ionic 2 App

      1:24
    • 2. 2 The Core of Ionic 2 Themes SASS Syntactically Awesome Style Sheets

      9:18
    • 3. 3 Choosing a Color Theme for an App Quick Version

      3:13
    • 4. 4 Theming an Ionic 2 Page Forms Buttons and CSS

      11:31
    • 5. 5 Theming an Ionic 2 Page Nav Bars and Nav Bar Buttons

      5:40
    • 6. 6 Theming an Ionic 2 Page SASS Variables Really Handy

      5:39
    • 7. 7 Homework SASS Up Your Name and Password Inputs

      0:39
    • 8. 8 Solution SASS Up Your Name and Password Inputs

      4:16
    • 9. 9 Summary of How to Easily Theme an Ionic 2 App

      1:03

About This Class

Learn how to create iOS and Android apps with Ionic 2 - Part 2. This module is all about theming your Ionic 2 apps.

Please click here to take part 1 first.

NO EXPERIENCE NECESSARY!

Ionic 2 is the latest and best ap development framework It is simple to understand and use. Far, far simpler than traditional coding!

Enrol now to learn how to create your app visions and release them on all the app stores!

Transcripts

1. 1 Introduction to How to Easily Theme an Ionic 2 App: welcome to this module on female your Ionic, too. And themes, of course, are very important because they convey a sense of professionalism to your user. And they can even invoke emotions depending on what color schemes you go for. So in this module, we're going to learn first about sets sent tactically awesome style sheets. These are similar to CSS, but you can think of them as a cut above that, and they allow us to do a lot of powerful things within Ionic, too. Then I'm going to give you a very short lecture with just some hints and tips on how to choose colors and color schemes for your APs. Well, look at CSS forms and buttons, including input elements and how to style those. Finally, we will look at how to style navigation bars, and I've saved the best thing for last. That is this concept off SAS variables. These allow you to use a variable AP wide, for example, a color or a size relative to the size of the screen, and they are so, so useful when it comes to theme ing. So let's begin 2. 2 The Core of Ionic 2 Themes SASS Syntactically Awesome Style Sheets: Let's look at using sense, sent tactically awesome style sheets in order to write the styling or the female off the elements. And indeed, the overall look off our app. Now I've just pulled up the Web site off the inventors of sets, and this is SAS dash lang dot com if you want to go there and they'll tell you all about what it is, and it is effectively a CSS extension language, and their tagline is CSS with superpowers, which is somewhat true. And if you scroll down, they have a whole session or sections where they can tell you exactly what this is all about. And I can say you will not regret learning this. It is fantastic, right? Let's begin by creating a brand new project to start this module off with. So open your terminal or command line CD to your projects folder or wherever you wish to put your app and let's go without now. Familiar Ionic Start and let's call this my seemed or whatever you like, and I'm going to give this a blank dash, Dash it version to, of course, and let I on it. Go ahead and do its thing once complete, go ahead and add your IOS or android platforms, depending on what it has or has it included Platform and Android. In my case, Oops, I forgot to CD into my app, which is my seemed up. And then here's a handy shortcut for you. If you just hit up or down on your keypad, it gives you the last commands that you typed in. Now open up your visual studio code and navigate to that folder. So file open and we have my seemed at. I'll just full screen this so you can see what is going on. We have our usual folders at pages theme, etcetera. So now I'm just going to expand this theme folder, which is contained inside off, and we'll go through these files one by one. The 1st 1 we're going to look at or the 1st 2 is I us and M D. These stand obviously for IOS. Your apple devices and MD is material design, so these are sort of global settings for material design and IOS. I think generally these aren't files that you will really touch. If we look inside these files, it tells us that's where are we shared SAS variables go in the app variables dot s c ss. So let's click on that one and notice down at the bottom. We have an array off colors. Now these colors are defining our APS colors, things like a button tents. So you may wonder why buttons come out blue or green or whatever they do. It's probably because off this section, so this file app dot variables dot s CSS is where we store those. Now what happens when we compile our act? Well, these files get translated to CSS, which there and get put in the build directory so you never want to directly edit the CSS files. You always want to edit the S CSS files because if you edit just plain CSS, they'll just get over written next time you build your app. We have another file app dot WP, and this is for windows phone. If you choose to develop for that now, the next file is app dot core dot s CSS, and this is used to declare any styles that are going to be used globally throughout the app. It's also responsible for importing the style sheets for other components So at the moment we're not going to touch that. And as we go through this module, we're going to edit one or two of these things in these files so you'll get a much better understanding off what's going on inside of these files and where to do what Now There's one of a place will find s CSS files. If we look in pages home will notice there's a home doctor s CSS with its own little home function in there. Now, in here, obviously, I think, is where you store all of the styles for that particular page. So everything belonging toa home. But where possible, you were going to store it inside off the theme folder. You can imagine if you start a color inside home, that s CSS. And then you needed to copy that to 10 other pages. That would be a pain. And when you want to change it, you'd have to change it 10 times. So where possible? Try and change things in the theme folder. Now let's begin styling open our home dot html and let's drop in a button somewhere inside of our card that exists there. It really doesn't matter where you put it simply hit button. We don't need any handlers right now and let's call this. Click me and close off your tag. And if you're dyslexic, like me, clearly you can't spell click. Here we go. So I'm going to save that. And then I'm going to sever my project with the Dash Dash lab function. So we get the IOS and Android versions and let's see what that looks like. Now that button is going to have a particular color associated to it, and that color is actually stored inside one of the S CSS files. And in this case, it happens to be Balu. But now let's go over to our app and inside of our button. Let's put a space inside of the button tag and let's type secondary, save that and see what happens when our app comes back. Now we have a green color. Let's see what happens if I put danger in Save that it's red red for danger. So what's happening? Well, open up your app Variables. That s CSS from the theme folder. And if you remember I told you about these colors and there you'll find primary secondary danger like dark and favorite. Now these colors are going to form the basis off your APS color scheme. So this is absolutely where you start when you are seeming your app. If you notice if I change secondary and I give this, for example and F f color code and then, of course, I need to change my danger back to secondary. Now it goes to a yellow color. But if I delete that it will default to the primary color and we have blue, you'll also notice the text Color is changing according to the darkness off the button behind it. So that's just one thing to watch out for right, so that is basically steaming. In a nutshell, that is really all of theme is it's a bunch of colors judiciously applied to give your app a consistent look or theme. Never forget. That's where the word theme ing comes from. A theme. Okay, in the next couple of lectures were going to go into color theory and how to choose a color theme for Europe. Then we're going to dive a little bit deeper, and we're going to learn how to theme individual items like forms, buttons and input elements 3. 3 Choosing a Color Theme for an App Quick Version: Let's talk about color before we carry on with this course. Color is extremely important. Colors are what unify your brand and tell your user that you have a professionally made product. So your first step, when creating an at is to choose an appropriate color theme. I've just pulled up a random page because these pages are all over the incident off some great color schemes. I do like the 1st 1 a lot. There are also websites called color lovers dot com, for example, that show you pallets that other users have created. Now, by picking one of thes and implementing them inside of your app, especially inside of this colors section of it, you can really communicate a sense off quality to your end. User colors also invoke emotion. So if you look up psychological properties of colors, you'll see things like red give you courage, strength, warmth or defiance and aggression on the negative side, so colors don't necessarily invoke one single emotion. Bacon invoke actually opposite emotions, depending on how they're used and where they used, and also who they are being used for, right, So your process with your naps is to start by choosing a color that screams the emotion that you want to associate with your brand, be it personal or business. So something like safety you might choose green, perhaps a deep green or a deep purple. And as a matter of fact, I've put together a quick article on my website, the link to which is on screen now. If you go over there, I give you a rundown. A very quick rundown off all of the emotional experiences you get from colors. The final part I will leave you with here is the adobe color wheel. If you go to color dot adobe dot com, you have this color wheel. This allows you to select color schemes based on rules so you can have analogous, which are all close together. Monochromatic triad, which is exactly as it sounds. It takes colors from different three point sections off a three point stuff. We have complementary compound shades, and you can do fine. You're right, so this color wheel is actually a fantastic tool for choosing the colors you want to have inside of Europe. So please do use it in summary colors matter to make sure you choose the correct ones 4. 4 Theming an Ionic 2 Page Forms Buttons and CSS: let's begin by adding some female colors and styles to our app. But festival. I want to address why you would do this by looking at some current APS. So first I have AC you ever for the iPhone, and I'm just on the APP store and I'm looking at it, and to me, it's kind of clotted, and there isn't really a consistent theme. Sometimes there's orange, which is the AK you ever sort of logo. But there's also a different color orange on the screen, which doesn't quite seem to fit. So maybe they should have used the adobe color wheel like I recommended. What else have we got? We have BBC weather. Now. You can see here that clearly there is a color scheme going on. The colors do not clash. They're somewhat complementary to each other, and it makes for a very easy and relaxed viewing experience. And you can see that by the number of customer ratings that they've got and they're sitting at for and 1/2 stars. Despite all of the people out there that seem to spend their lives giving people one star. Trust me, you'll come across them. Finally, however, there is also this Yahoo weather, which looks fantastic to me. I mean, they've used color very judiciously. It's mostly white, and they've only used color to denote sunshine and rain. Really, everything else is plain white and laid out well, and I really, really like the look of this out. So that was just a quick reminder to you as to why styling and teeming are so important. So it's worth spending quite a lot of time here. Let's create a basic app that includes a locking name, entry, password entry and a submit button. And once we've created these JIA y elements will move on to feeding them along the way. We're obviously going to learn all about a few more G Y elements as well as the theme ing side. So open up your editor and I'm using the project we created at the start of this module. Go to your home dot html and let's get rid off this ion card. We don't need this anymore. Now we are going to create a small list off items, so let's start with the ion dash list component and let's close the tag off. Then let's create some space between these two and in Dent, this in because I like looking at neat code, so this creates a list of things, stacks them one on top of it in another. Let's create an ion dash item, and this is going to be an input text. But first I'm going to close my tag and then create some space for that one. And this eye on item is going to be an input. So let's create ion dash input and what are we going to input? Well, it's a type off text. We're going to input a name into this box. We can assign a placeholder to this so we can have placeholder and we don't want Aria. We just want plain old placeholder, and this is sort of a grade out text that displays in the background, hinting at what we want our user to put in. So this would be something like user name. Then we close off that tag and close off the closing tag. Then let's create another item. I on dash item rose off the tag, and this item is actually going to be a password entry. For example, if a user was logging in somewhere, So this is something you are definitely going to do. At some point, I own input, and this type is going to be equal to pass sweat and you'll notice there are different types here. These restrict what the input box does. So in passwords case, it puts asterisks instead of showing everyone around what your password is. If we put something like telephone, it would give us the number, pad or number. For example, email would give us the email keyboard from the phone, but we weren't password. And obviously we want a placeholder, which is equal to ha sweat. And let's close off our eye on input, right? We have our list of items. Let's add a button at the bottom of that list, and you should be used to doing this. Now. Create the butts in we create our click event, which is equal to log in. We haven't yet created this and sorry that log in should be in quotes, but of course we are going to create that in a little bit if we have to. And then we need to give this a name, which would obviously be something like log in right So we've created our button and entry . Let's see what that looks like. That actually looks pretty nice to me. I like this user name and password thing and watch what happens if I type in a name. We get plain text, but a password you cannot see. And it's the same on both platforms, right? So that is that part done, but rather annoyingly, this button to log in isn't scented. And that that really annoys me. I've got a bit of o C. D. When it comes to that kind of thing. So let's use our styles to send to that button. Now Centering is a hot topic amongst Web developers is always billions of ways to do things , and centering seems to be no exception to that rule. So I'm going to center this button by actually placing it outside of this list. I'm going to cut it worse, great to select it, going to control or command exit and just put it below there. Then I'm going to surround it with a div. So let's create a div and this Dave is going to have a class which is equal to button dash center, so I know what that class is definitely going to do. And then, of course, don't forget to close off our button without slash div. So let's say that And obviously when this reloads, it won't be sent it because we haven't created that class. So for now, let's put this. But in center inside our home dot s C s s so underneath home, let's have a dot but in dash center, open our curly brace and let's give it some style. Let's have a margin off, zero at the top and bottom and auto at the sides that this will center it. Then let's have a text align which will be center. Save that Go back over and there we go. We have our element inside of the DIV aligned to the center, and that center will be the center off the containing Dave, which is in essence, the screen for us. Now we can add a wit to this button to make it look a little bit better, so inside of that class. Or rather not that class. Let's create a button class so I can override that by typing button open my braces, and I can give that a width off 70% for example, and that should expand it nicely. So now it looks a little more modern and a little more user friendly. Okay, so I'm not going to create any button click events for this. I just want to concentrate on the theme ing, and there we can see it. Now, the reason I've put these inside of this home is because they're things I'm not likely to use outside of this. I wouldn't want all of my buttons to be 70% with because I'm going to vary them wherever I am. In my app, I also wouldn't want all of them to be centered. However, this button center is something you might store outside of here. So where would I put this if I wanted to access it everywhere? Well, I'm going to cut this away from here, save this file, and then put it into my theme AP Doctor core dot s CSS. And I'm going to have a dot button center and I'm not going to save this yet. We're going to go over and look and notice how the button has defaulted over there because this Boston Center doesn't exist I'm going to save this. Watch this reload and our button should pick it up eventually. Perhaps there we go. And it has sent it itself. So a button centering or an element centering I might want to include in a global manner. And of course, it goes without saying if you're a Web developer, all the traditional CSS still applies here. Okay, I'll just summarize what we have done in this lesson. First, we created some new elements in our home HTML. We created a list with some items that allowed input. We also created are familiar class of a button. And then inside of our home s CSS, we created some of these button variables, or CSS classes that we overrode and changed a width of our buttons. We finally centred our button by using a global CSS class Inside the app core fire 5. 5 Theming an Ionic 2 Page Nav Bars and Nav Bar Buttons: so far, we have a nicely themed AP, where we're allowing our users to log in. It's just a pseudo log in screen, so let's look at one of the most common areas people want to change. And that's the color and style off that top bar known as the Navigation Bar or the toolbar . If you're on Android selects, extend our theme up there. Open up your project. Go to your home dot html or whichever page is the home page and at the top, you'll notice we have this nab our component, the eye on NAFTA. Inside of there we have title now title displaced differently on IOS and Android and IOS. It centers on Android. It goes over to the left, and these are just default behaviors. I wouldn't advise change these because they're what each platform user expects. A pet peeve of mine is when people try to make android apps that look like IOS ones. There's just no need for it, and it annoys people because they don't know how to use it in an android manner. Right? So we have our title. We can leave that as it is, but let's give our nab our a color. Now the NAB our color would be part off the color seem off your app, so you would choose it from that array of colors that are defined inside your APP. Variables. Let's give this the secondary color. Save it and we should have a yellowish nafaa. Let's try primary because you're much more likely to have a primary color as your Nabaa back. Right? So we have blue, but you'll notice if I undo that again. We have secondary. I say that Let's see what color the text is. It is still black. Let's change our secondary color in the variables to be something quite dark. So what's dark? Maybe 23. 65? 34. Safe that Let's see what color that comes out with. There we go. So again, if you recall with the buttons, bionic would change the colors off the text on the buttons, depending on the darkness off the background. And it's doing the same to these now bars or tool bars. Right? Just before we finish this lecture, I'll give you one more tip, and that is how to add buttons to these Nabbous. So let's go over to our home dot html and after the title section, we are going to have some buttons. Let's have my own dash buttons on these. I mean, it's not completing for me. I own buttons it might complete for you. Then we have to give it a tag as to where these buttons sit. Well, I want these to sit at the end of my Na'Abba and then I'm going to close off this ion dash buttons. And between here is where I'll start to insert buttons. Let's have button. Let's make it a primary color if or actually let's do you? Let's leave it at primary. Why not? Let's get some clashing going on. And let's call this something like and because typically that is where you would put an ad button, right? So we have thes add buttons, and we're starting to see some divergence between the platforms on IOS. We have white colors on Android. We have thes blue colors, so I o. S seems to be ignoring the fact we asked for the primary color, which is blue in this case, IOS tad nab Our buttons do tend to ignore efforts at changing them. It's quite a complicated subject, and native developers like me are endlessly annoyed by it. However, that's by the by Android allows you to set things as you like. So what happens if we remove this primary color? Now we have just a classic white color inside the NAFTA, and strangely, my buttons are slightly out of alignment on the sides here. Now, I'm not sure if yours are going to do these, because when I practice this earlier on my other Mac, this was absolutely fine. And just in that cut past couple seconds, I took a break, tried it on another computer, and again it was fine. So if this isn't working for you, then by all means do let me know in the comments or by a message, and I will update this lecture to fix it. But I suspect that this is just perhaps something that's gone wrong with the framework or the compilation. So again, if it goes wrong for you, do let me know and I'll do my best to fix it. 6. 6 Theming an Ionic 2 Page SASS Variables Really Handy: we're getting a little more used to this idea of female rap and where to put the theme ing and styles. Now we're going to look at a very important topic called SAS Variables. These are very, very useful because sometimes in CSS, we might want a global variable, and at the moment we actually have one. So if we open our project and we look over at variables, this colors array is actually a global variable. But of course, we can add our Oh, now you want to be careful here because there are an absolute ton of these that you can override inside of the Ionic to framework itself. So you have to be careful with how your name things. One example of these overrides is the background color for lists. And if you remember currently, this user name and password is actually inside of a list. So let's change the background off that we start the global variables with a dollar sign. So the PHP developers out they will be happy with that. And this is list dash, background color, and they should be a dash between background and color. And then we define it in the usual sort of CSS way with a hash character and then something like and f f I don't know 45 45 a pinkish red. Now, Clearly, this is a terrible color scheme, but I'm just show you what you shouldn't do. I'll say this Apple reload, and we have the background off our list. That has changed. Now, if you go onto the ionic framework dot com and look at their documentation, they have a massive list off all of these SAS variables that you can change for Europe, Right? Let's create our own at variable that will let us change things now because there is a huge list of existing variables. I want to be careful of clashing, especially in the future when new ones would come out. So I like to creep ends the names of my variables with the name of my app. Let's have something like dollar. And what if we called this out my themed app when I would call this M T A. From my theme at Let's have dash small dash button dash with and then we can set this as Let's have 60 now the units for this If we left this as it is off, we put 60 pixels would be pixels, as the Web browser understands it. So in eye on it, you don't really have to worry about retina screens or low density screens because everything is based in a browser, which means that the browser system will take care of the display for use. That's quite handy in that manner. But sometimes we want to display things as a percentage off its view port, and we can use the view with which is a V W and end it with our semi colon. So save that. And now let's look at how we use this global variable. So I'll just copy this variables name because it's kind of difficult to remember. It's quite long, and then we are going to use it inside of our home module and our home, the S CSS file. Now we have our button class here with a width, and I'm going to remove this percentage value. I don't get to substitute it with my dollar variable, my empty a small button with And now when I say that and re compile, the button will get slightly shorter so that terrible is global now. We can use it anywhere we like, but that's not all. We can also perform arithmetic on these values so I can multiply this by, for example, 1.2. When that compiles, the button gets a bit wider. Of course, I can also divide it, buy something ridiculous like 10 and mess up before matting off. Maya. So there's quite a lot of power there. And with great power comes great responsibility, as they say. Well, so the court take away for this is store your global variables that you will use everywhere not just colors, but wits and relative wits inside of this app variables file and then reference them inside of the appropriate classes you create in the S CSS folders. I'm just going to change this back because it looks ridiculous. Okay, thanks for watching this lesson. 7. 7 Homework SASS Up Your Name and Password Inputs: All righty. Here's a little homework for you to test out your theme ing and s CSS skills. I would like you to use cess variables in order to make these labels, for example, user name, 90% off the available screen with and roughly 55 screen points or pixels high. Be careful with that last one. I'd like you to remember to use global variables to do this solution in the next lecture, so good luck. 8. 8 Solution SASS Up Your Name and Password Inputs: in the last lecture, I sent you a little bit of homework, and that was to use, um, SAS global variables to set up the width off these labels we see on screen to 90% and the height of them to roughly 55 screen points or pixels. If you're an old school thinker. So let's look at the solution for that, or at least how I would do it. It's not necessarily right. It's just one way of doing it. Let's open up our APP variables dot s CSS and down there somewhere. And what I would do at this point, as we start to add more variables, is actually comment them in. I would have things like size, variables and then end size variables. And this just gives me Is the developer a clue as to what each section does? No doubt, if you're a Web Dev, you would do this kind of thing anyway, right? Let's create a dollar variable four Mt. A, which is my pre pending and let's have an input dash with to set the width of our input box , and I will make this roughly 90% off my available view with You can also have you height if you wish, but we're using view with here. Then I'm also going to have my empty A dash input dash height, and this is simply going to be 55 pixels because the browser translates those pixels for us into the relevant number off screen points. So it kind of takes care of all the retina goodness that's going around these days. So let's save this, and I can tell you from harsh experience that developing natively, I would have to calculate this value carefully. You have to be very careful when you're doing these native, But that's the great thing about Ionic. You don't have to worry about that now. Our input items are inside our home dot html and where are we? They? How are part of the ion input class? So let's have opened up the home s CSS because this is particular to this page only, And let's override or add some items to the ion input. Of course, we could create another class if we wanted and assign it to these inputs to make things a bit neater. But this weighs equally relevant. Let's have a width and then let's have dollar empty a dash and I can never remember these off my heart. Let me save this file. It's input with an input height dash, input the ash with and then we need our height, which is dolar empty, a dash input height or dash height. And then I'm going to save that. Let's see and look at how those labels expand for us, and we have our android and our IOS. But be careful when you're changing. The height of these input box is because watch what happens if I crank this up to a ridiculous amount like 85. See how the heights change and it doesn't really center the items. So sometimes it's actually better to leave the system as it is, because it knows what size input boxes should really be in order to be usable. Okay, so that's just a little gotcha that could get you. That concludes the homer to this module 9. 9 Summary of How to Easily Theme an Ionic 2 App: congratulations on completing this module all about seeming your ionic to app. We learned some key concepts, the first of which was all about sen tactically awesome style sheets, or SAS. For short. You learned how to choose colors and how to pick colors that fit together and don't clash, which brings across a professional look for your app. You learned how to style forms, buttons, input elements using CSS and cess. You also learned how to style navigation bars, one of the most common requests when theme ing ionic to APS. And finally we looked at SAS variables, allowing us to assign a single variable that can be accessed over the entire yeah, which is so, so useful when it comes time to change anything. So once again, well done for completing this module.