Hello, everyone, and welcome back to our course.
In the previous lecture, we built out our main grid item, and in this lecture we're going to style
the typography here.
So we have to make the title a bit larger and we have to change the position of this text as well.
So let's jump back into our main grid item, dodgiest file, where we'll get started first on this typography
component for the title.
We can apply the style immediately right here inside of the component if we want.
For example, we could change the component type to each one or two if we already have an H1 on the
page.
And typically you won't want to have an H1 again.
And we can also have a variant.
For example, you have a variant B H four.
So the component is what the actual component is supposed to be, but the variant is the style on it.
So then if I go to my browser here, we can see here we have coding the text.
It's a lot larger now because we made it into that different style and we can make it even smaller to
having five.
And then in our browser there, it's a bit smaller now because we want to make sure it is smaller than
our company name, unless, of course, we want to bring into a really small.
That would be fine as well.
OK, let's leave it here as a heading five.
That's fine.
Next up, what about this rest of the text?
Well, that is just body text so we can set its variant to body one and it's not going to change anything.
But we could have body two, for example, as well.
We can have any type of variant we want to see.
Body two is smaller so we can do that.
There are other variant types as well that you can see in the documentation.
You can see a whole list if you're interested, just look at the typography component documentation.
We can also specify that we want it to be a paragraph and that will apply padding here, as you can
see.
And there we go.
OK, so that is some style directly applied on the components, but we can also as well with this grid
item, we can change the position of the typography components via our style.
So all I have to do is give this grid item a class name.
I'll give it the name of classes, dot main item, OK?
And then inside of my use styles, I'm going to create that main item class and this is where I will
position my text.
All right.
So I can add position type padding, for example, themed spacing of three will apply padding around
the two items together.
So reply's padding inside of the grid item.
So we can see that looks a lot better now.
We can also align all of our text as well so we can set its position and its alignment to the left hand
side to align my text on the left hand side.
Well, first off, I can put it to the left hand side and also have it take up only half of my width.
And for that I can just directly inside of the component here, set an M d to six.
So you'll see here now the page or the grid item.
It only takes up half of its width of the window because we set RMD to equal six, which is half of
twelve.
And this is very commonly done.
You'll see here you'll have some text on the left hand side.
Now, if we change the screen size, we can test that out as well.
Well, once we get to a midpoint or smaller, the width of the text is 100 again or 12.
That's because if it only took up half the screen to be harder to read on a mid-sized screen or smaller.
All right, great.
Next up, we can also align our text to the left instead of being centered.
And for that, I'm going to go into main item here and I will set text a line to the string left.
And there we go now in our browser that is going to align all the text to the left.
I'm also going to just apply more padding.
I'm going to apply a padding of to six here.
There we go.
Just to give it a bit more space to put this content into the center, we can use display flex and that
is going to put the two children inside of the grid item into a flex container.
And then you can change the direction to column and then justify the content to be in the center.
So justify content refers to a lining on the Y axis.
So what we'll do in order to be able to use justify content here and set it to center, we have to first
set display to flex and the flex direction to column.
Then we can enable this justify content to equal center.
Awesome.
OK, there we go.
So that is what our website looks like now.
Great.
So we have been able to change the size of our text and also change its position and alignment.
Great.
OK, next up, we're going to continue on and work on the second row and we will populate the second
row of items.
We're going to do that by creating another component type and this time will be a regular grid item
instead of a main grid item.
So join me in the next lecture where we will work on that.