Vuetify Tutorial #4 - Text & Colours

Key Takeaways

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 dot view 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 alarm 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 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 - 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 - or double - 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 plushes you can barely see the text 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 lightining 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 light in 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 dark and high for the four or three instead of whiten when it comes to text we can't just say light in 4 or dark and 4 we have to say text then double - then either lighten or darken we're going to darken it and we're gonna do it by 4 steps so text - darken for if this was dark and one it would darken it just a little bit dark and 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 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 and 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 dark and want to give us this color dark and 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 key words that we can use as CSS classes to display our text differently 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 a 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 and then - 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 will do small display and then I'm gonna give this a class equal to display - 1 so display ranges from 1 to 4 for being the biggest one 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 is display 3 right here - and this is display 1 which we used as well 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 sub heading and I'm gonna give this a class of sub heading as well this class equals sub heading 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 fun 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 and capitalized just capitalizes the first letter like this of each word 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