Instructor: To finish this section
let's now build a typical web application layout
and this is going to be a great learning project.
So let's get started.
And so here is the layout that we're gonna build
throughout this lecture and the next one.
So it's not very styled and it's not very detailed,
but what matters here is the layout itself.
So basically we have some site navigation bar here.
So this would be for things like the image
and maybe some profile menu or things like that.
Then here in the top we have a menu bar.
So basically for actions
for this application, and what we're making here
is basically a fake email application.
And so these menu items here are related to emails.
So new email, reply forwards, mark as unread
and then also all the way here
to the right site in red, this trash button.
Then here we have this section where
we have different emails,
so where we can see all the emails in some inbox
and then notice how we can actually scroll here.
So that's really nice feature
and it's actually very easy to do.
Then here in the middle
this is kind of the main part of the fake application,
but then also here is like this sidebar
which has some additional information on this email.
And this whole application layout is of course
exactly the height and the size of this view port here.
All right, so this looks like fun, I hope
and so let's now actually get started.
So let's just review the main elements that we
need are this navigation here, then this menu bar,
then we have this section right here,
then this one, and then this one.
All right, so let's give ourselves
yet another new file here.
So zero six
app layout dot html.
Then we will again start from scratch here.
So exclamation mark, and then tap or enter
and then let's get started.
And our HTML here is actually very simple
so we have a nav element, and here I'm simply
gonna write nav, actually, let's use lowercase.
Then after that we have that menu bar.
And so here is a new HTML element,
which is exactly called menu.
So what's the difference between nav and menu
you might ask?
Well, the nav element is for a typical navigation of a site.
So a navigation which contains a bunch of links
which then points to other places in the application.
Menu here, on the other hand, is actually
for like menu buttons in an actual web application.
So we use nav all the time.
So it's a very commonly used element, but menu not so much.
It's only used when we build a web application,
but that's the case right here.
And so now we need this element.
Here for now, I'm just writing menu.
Then here for this inbox view
I'm gonna use a section element.
Then for the main email view
I will use the main element because this one,
remember is really used to display the main piece
of content of the document.
So the most important one
and so in this case, that is basically the email itself.
Then that additional information is exactly
the main use case for the aside element.
So additional info, and for now, that's actually it.
These are the four parts
or actually five parts of our application layout.
So give it a save, and then let's go back here
removing this part here, and then here is the app layout.
And there we go.
So you see that actually for the menu,
HTML automatically applies some default margin
or padding here, but that's not a problem because
of course we're gonna get rid of all of that right now.
So again, doing everything in the same file here.
Let's start with our global reset margin zero
and padding zero, and of course, box sizing, border box.
Nice. Then let's start with some visual styles.
As always.
Now in this case
I'm actually not going to include any third party font
and instead just go with this one.
Now the color,
well, let's actually use the one from before
or this one here,
and let's also give everything
a nice font size of 24 pixels.
Okay, and now let's just style our different pieces here
with some background color as always
because that always makes it a lot easier
to see what is actually going on.
So this navigation bar had this color,
then the menu has that nice violet color
and let's actually get that from open colors again.
So violet is one of these colors that I really like
for UI design, and while this one here looks nice.
I think that's the one I am using.
Then of course the color needs to be white in this one.
And then also the aside
and the section have some different background colors.
So background color, and let's go get that gray color again.
So I think this is the one that we have been using.
And actually the same also for the section.
Let's put a section here first.
And all right.
So that's it for the visual styles, right?
And so now we're actually ready to build that layout itself.
So let's analyze our original layout so
that we can think a little bit how we will do this.
So this layout here is very clearly
a two dimensional layout, right?
And so therefore of course,
we're going to use CSS grid to build it.
Now, how many columns and rows do we need?
Well, let's easily count them.
So one column right here.
Then next one here, the inbox, another column.
The email view, another column
and this one here, yet another column.
So that looks like four columns.
And then as for the rows, we have this one and this one.
So just two rows.
Now let's just see what happens when we make this smaller.
So you see that this column
and this column stays the same, and this one
in the middle basically occupies
the remaining space here, right?
And so with this I think we have enough information
to build our layout with CSS grid.
And which is actually the parent element of all of this.
So all of these, or in other words,
what do we want to be our grid container?
Well, we can simply use the body, right?
That's not a problem at all.
So this display grid and now grid template columns
and that first column, so that navigation bar basically,
let's make it 80 pixels.
Then that inbox is the second column.
I will make that 400 pixels.
And as always, these values are kind of random.
Then the third column, remember is the main view.
So the email view.
And this one is supposed to occupy all the remaining space
and that means when it comes
to CSS grid that it should be one fr, right?
And then finally the fourth column
which is the additional info, has also a fixed width.
And so let's choose 250 for that.
All right?
And now the grid template rows,
which sometimes we do actually not define, remember?
But in this case, since we want to fill the entire screen
we will basically do it here automatically in the rows.
So the first one is fixed, again
80 pixels for that menu bar.
And then here, the second row
we wanted to go all the way to the end.
Or in other words
we wanted to occupy all the remaining space, alright?
However, this is not yet going to work as we expect.
So let's see that.
And well first of all, of course
these elements are not yet in the right position,
but also the second row is actually not going all the way
to the end here, right?
Now, why do you think that is?
And let's actually inspect this
'cause we will be able to find the answer there.
So here we have the body element, and you see
that it does indeed end right here after this element.
So the height of the body is in fact only 136 pixels.
So just like any other element, the body element
does not magically occupy this entire space here, alright?
It only occupies well,
the place that it needs for its content.
And so that's only until here.
So what if we want actually
for this row here to go all the way to the end?
In that case,
we need the body to be as high as the view port, right?
Well luckily for us,
we already learned how to do that, right?
So the solution is to set the height
to 100 view port height units now, okay?
And there we go.
So now it occupies the entire space
and we see that our body is now 503 pixels high.
And of course if we make it higher and lower,
then this value changes. Okay?
But now let's actually place all these five items
in the correct position.
So first, this navigation here, it goes all the way
from the first row to the end of the second row.
So it spans across all of this.
Then also the menu spans
across this column and this one and this one, right?
So the grid lines here are
one, two, three, four, and five.
But well, why not actually show it to you?
So yeah,
this is the one.
So here we see the grid lines, right?
And so this one here will go
from two all the way to the end, right?
So let's do that.
So we want to span
across multiple rows here in the nav, right?
And so we say grid row
from the first all the way to the end.
And let's actually not specify that manually,
but instead we can do it automatically with minus one.
Remember that?
And so if for some reason we were to add another row,
then this navigation would still go all the way
until the end.
All right?
Then we have the menu here
which we want to span across multiple columns
and so we use grid column.
So this starts in the second and again
goes all the way to the end.
And so this is where our minus one trick
gets really handy, okay?
And then the other ones should be
automatically placed, and indeed they are. Great.
So let's see what happens if we make our view port smaller
and then that's exactly as expected.
Beautiful.
Now let's just style this here a little bit nicer.
So the color might be white.
Then let's also center the text in all of the elements
and for that we can actually set it in the body,
because text align does actually get inherited.
And let's also make the font weight bold
which again will get inherited
and so usually we don't put these things on the body,
but since we have such an easy page and such an easy layout,
well we can simply put it here
and then it will get inherited.
Now let's just add some padding here
to all of these elements.
So the nav menu section main and aside.
So basically all of them.
Let's give them some padding at the top of 24 pixels,
but this is really just a small cosmetic change.
All right, beautiful.
So we already did all our layout
so that's a pretty nice already.
So this looks already almost the same,
but now we're just missing two things.
So two a little bit more detailed things,
which is this menu bar with these buttons
and then also this kind of inbox view here, right?
And so let's do these two things
in the next and final lecture of this section.