Intro and project setup
Or rather gang, so now we know the basics and we have a little project set up ready to use here. Before we dive into all the juicy stuff and use some of the different beautifying components, first of all I want to show you some of the different utility classes, the CSS classes that we can use on our elements as well. Okay, so I'd like to talk a little bit about text and colors.
So right now I'm on the whole page right here, Home.vue, and all I'm going to do is a series of different paragraphs or headings etc. So first of all if I do a P tag and just type in some lorem here. And by the way inside VS Code if you type in lorem and then tab it creates a paragraph of lorem ipsum for you. If I save this now and view it in a browser then we go to the home page we should see that paragraph and already we should see some nicer styling than default browser styles. It's a different font family, it's Roboto, and it just looks a little nicer. We have some different spacing going on etc.
Applying basic color classes
So what I'd like to do now is apply some different utility classes to this paragraph. So first of all let's talk about color. We've seen in the last tutorial that we can give a class of a certain color to an element and that will color the background. So for example if I say class is equal to red then this should color the background red like so. Okay, now we can also color the text, so I could say something like white, and then to color the text we say --text. So the color first then double-dash then text. If I save this then we can see now we get white text. And I could say instead if I wanted blue text like so, and we see blue text. That doesn't look as good so I'm going to go back to white like so, save that, and that looks a bit better.
Okay, so let's do another example. I'm going to create now another P tag right here and inside I'm going to say lorem and tab to create that lorem ipsum. And over here again let's give this a different class, and this time I'll say class is equal to and it's going to be pink for a pink background and I'm gonna say red--text to give this red text. Now if I save this now and view this in a browser it should look something like that. Now at the minute this flushes, you can barely see the text.
Lighten and darken modifiers
Now instead of using different colors what we can do is lighten the background and darken the text color so the way we do that, if we want to lighten the background we can give this a class of lighten- and then whatever strength of lightening we want. So this could be 1, 2, 3, or 4. If we do 1 it's going to lighten it a little bit. Save that in preview and you can barely notice the difference. If we do 4 then it's going to lighten the background quite a lot and you can see the difference right there. So that's looking better already, but also I'd like to darken the text to make it stand out even more.
So how do we lighten or darken the text? By the way if we want to darken the background we just say darken-4 or -3 instead of lighten. When it comes to text we can't just say lighten-4 or darken-4; we have to say text then double-dash then either lighten or darken. We're going to darken it and we're gonna do it by 4 steps, so text--darken-4. If this was darken-1 it would darken it just a little bit; darken-4 means we're gonna darken it quite a lot. So save that and we can see over here now this is quite dark. This text okay, so now that stands out and it's more readable.
Where to find Vuetify color utilities
So that's colors for you, and if you want to see all of the different color classes we can use like red, pink, or white etc then go to the docs. Just search for color right here and go to Colors. If you scroll down you're gonna see a massive color palette, all these different things right here, and they all have different keyword names. So indigo for example or deep purple, and you can see we can apply darken and lighten to give us this color, darken-3 to give us this color, etc. Alright, and the same is for text only: we put text in front of the darken or lighten, or we'd say cyan--text to get this color for the text. Alright, so there's a lot of color keywords that we can use as CSS classes to display our text differently.
Font sizes and display classes
So as colors, now I want to talk about different font sizes and font weights as well. So let us now come down here and this time I'm gonna do an h1. Inside I'll just say 'massive display.' Now if I save this and preview as is then it's gonna look something like this in a browser. So h1 not a massive text size, just a slightly larger text size. Now if we want to make this bigger we can apply some different classes to this. So what I'm going to do is apply a class right here equal to display-4. So this is the largest text that we can have; display-4 gives us the largest text and that is a massive display text.
Now in contrast I'm gonna do another one down here, only this time I'll do h4. Inside we'll do 'small display' and then I'm gonna give this a class equal to display-1. So display ranges from 1 to 4, 4 being the biggest and 1 being the smallest of the display fonts. So now we can see this is a smaller display even though it's still bigger than the original h1 right here. Okay, so these are the different display texts we can use, and by the way again if you want to search these you can go to Fonts over here, go to Font Sizes and this is where I'm getting all of the different—if we scroll up a little—all of the different classes from. So we used display for this, display-3 right here, and this is display-1 which we used as well.
Headlines, captions, weights, and text transforms
Let's do a couple of the others as well. So back over here I'm gonna do a paragraph tag again and inside I'll just say 'this is a headline' and then we'll give this a class equal to headline. Save it and preview this in a browser and you can see a little bit smaller. Okay, let's do just a couple more. I'm gonna say P and then we'll say 'this is a subheading' and I'm gonna give this a class of subheading as well. This class equals subheading, save that here in the browser and we can see we're getting smaller again. And then finally I'm gonna do a tiny one which is caption. So P and then give this a class of caption, tab, and then this is a caption, and we typically use this underneath diagrams or drawings etc and we can see that is a tiny font right there.
Okay, so again if you want to see all of the different classes just go to this page, search for text and you're going to see text size. You'll also see the font weights here as well, so we can apply different font weights to our different paragraphs or different elements. So for example if I get this one right here, font-weight: bold, and if I apply this now to the subheading like so, save it and preview this in a browser, then we're gonna see that this is now bold. All right, so we have these different font weight classes as well that we can use and we have font-italic for italic fonts. And if we scroll right down we can see the text transforms as well, so either capitalized something, lowercase something, or uppercase something. Capitalized just capitalizes the first letter of each word like this. Uppercase makes it all into uppercase. Lowercase makes it all into lowercase. So these are the different color and text classes that we have access to inside our project and they just come in handy when we want to style our different elements a little bit more.
