Original subtitles

Before we start learning about the grid system and how we're going to use that to lay out our content

on the screen let's first just start getting the basic skeleton of the footer set up and then we'll

go in and start filling out the details so let's jump over to our project directory in your code editor

and we'll see where to begin.

All right.

And here we are.

Make sure that your development server is running and we're finally going to get out of our header dot

J.S. file.

We've definitely done enough there.

So let's come over to the UI folder and let's go ahead and make a new file in here called the footer

dot J S.

We'll start by importing react from react and to be able to access our styles we're also going to need

to import make styles from app material dash UI slash core slash styles.

Then let's come down and we will export default.

Our function footer and go ahead and open that up then we'll come up here above to create our constant

use styles which will use our Make styles function to get access to our theme and then return in object

with all of our styles while we're here.

Let's just go ahead and create the first style that we're going to need which is going to be for our

base footer.

So we'll just call it the footer style and we can open this up.

And here I definitely know that I'm going to want the background color to be our theme pallets dot Coleman

dot blue and I actually forgot that we need to be wrapping this so this internal set of brackets makes

sure you get a set of parentheses on there so that we're returning this styles objects but then I also

know the I'm going to want the footer to have a width of 100 percent.

So it's going to span the entire way across our screen just like the header does with these simple styles

in place.

Let's come back down into our function and let's create our constant of classes which is going to take

or use styles hook.

Now to give us access to our styles then we will come down and return a footer with a class name of

our classes DAF footer class and then we can close this up and I'll just put in the text example footer

that way we at least have something to show up on the screen go ahead and save that.

That's enough for our basic look but we actually need to come over into the app dot J.S. file and here

in the same way that we render our header above the switch statement that renders our actual route.

Let's come up here to the top and we're going to import the footer from of one directory components

UI footer and then underneath our switch statement here we will render a footer component.

Let's go ahead and save that and our application will refresh and you can now see we've got an example

footer on the screen now the first problem of course is that it's actually not spanning this fall with

So you see we got a little gap on either the left and right sides.

And if we come in and we inspect that page we can see in the window that we come over to the body.

You can see if we click on this the down here in the little box it shows that there's actually a margin

of eight pixels all the way around our body so to get rid of this let's go ahead and in our public directory

let's open up the index dot each team l file and it will come down to our body tag right underneath

our title underneath the head and on our body tag.

Let's just add a style property and a since this is just a plain HDMI l file we can just set that equal

to a margin of 0 we can actually also come up here and you see this link to the logo 1 9 2.

We had deleted that a while ago as part of the boiler plate cleanup but it looks like we missed that.

So we can go ahead and delete that now and save the file when the page refreshes you can see that our

footer now spans the entire width of the screen you see that the home content now is set all the way

against the edge the screen as well.

And so when we begin creating our actual page content we'll have to keep this in mind.

This is perfect for how we want the footer setup though and now it gives us access to the full width

of the screen.

The other thing that you may be noticing is that our footer is not at the bottom of the screen where

you might expect it.

And that's because we don't have any content on our screen yet.

So we only have this little home text.

So there's nothing really pushing it down.

But if we come into the app not J.S. file where we're rendering our home components this little dummy

component on the path for our home screen.

If we come in onto this div we add a style and this time we're in react.

So we have to make this an object and we'll give it a style set to a height of two thousand pixels.

So when we save this this will give that home component plenty of room to now take up the page.

And if we scroll down you can see our footer all the way down here at the very bottom of the page so

once we go in for all our different pages and add our content the footer will be placed appropriately.

So don't worry about it.

Now if on some of the other pages you'll see a will still be up here but on the home page since we set

that extra height it'll just make it look a little better as we're building we can go ahead and close

out of the app dot J.S. and the index.

Now each team will file and just come back to our footer dot J.S. the last thing that we're going to

do here before we move on to the grid system in the next video is going to be to add that black slash

that we've seen in the design file for our footer.

Now this is actually included in your assets folder already.

So if we come up to the top we can import a footer adorn adornment from up one directory up another

directory assets footer adornment dot S. the G and then we're going to come down here and replace this

with an image tag.

And we're going to set an alt property on this equal to a Black Decker tive deck or two slash with a

source equal to our footer adornment and then we'll make this a self closing image if we go ahead and

save that it'll refactor the code to look a little cleaner.

And if we scroll down you can now see this massive picture on the screen.

We can go ahead and close out of the little window that we had opened up.

But you can see that this definitely is not how we wanted it to look.

So let's go ahead and change the styling of this image by adding a class name equal to classes dot adornment

and of course that means we need to come up to our styles objects and add an adornment style here.

We can say a with for our adornment to 25 m again the M is that responsive unit that makes sure the

adornment will look the same size for any different device.

So if we go ahead and save that we can see that it is now a lot smaller.

Now if you notice at the very very bottom here there is actually a little gap a little gap right here

above my toolbar where the adornment is still sitting above the footer.

So we actually can go and fix this by adding a property to the adornment called vertical alignment.

And this is a property you can use with images to change where on the image it's anchored to the screen

and we'll set this to bottom bottom.

Actually that's just a vertical line not vertical alignment.

So if we go ahead and save that now we'll see the page refresh.

And now our footer adornment is flush against the very bottom of the footer.

This already is looking really good and definitely is coming along pretty quickly.

And if you can see the now if we shrink this down there I just want to kind of make this adornment smaller

for the smaller screen sizes because this size is definitely too large especially down for the mobile

device.

So let's go ahead and actually add a theme breakpoints dot down for medium and we'll set this equal

to a width of just twenty one M and then we can go ahead and copy this and change the medium to extra

small.

And here I want just 15 m so I'll go ahead and resize the window back to full size.

We'll save this and we'll see the page refresh and we still have our 25 m width.

And if we go and shrink the page down now you'll see when the draw appears that it went down to our

twenty one m width and now as we continue to shrink we'll get down to the extra small break point and

we'll hit our just 15 m width and that looks really good for that smaller size definitely way better

than the 25 did.

With those numbers I tried to kind of keep it in line with how this slash in the logo looks at the top.

And I think that does a pretty good job of keeping them in sync.

There is one last thing I'd like to show you for the footer and if we open up our draw we can see here

that it's clipped on there the app bar still of course from when we set that up.

But at the bottom you can see here how it kind of just sits over the little slash that we've added.

And honestly I just don't think that that looks very good.

That's kind of jarring almost the way that it sits in clashes there.

So I'd like to come and on our footer let's come up here and let's add a z index of 13 0 2 which is

the same index that we had been using in the header to clip that bar underneath it.

And so applying the same z index here should put our footer on top of the draw as well if we go ahead

and save this.

We'll see the page refresh and if we come over to open the draw up you'll notice it's still sits on

top of it.

And that's because we actually need to set our position to relative.

And it actually just needs to be set explicitly.

So relative is the default here but we need to make sure to set that explicitly for our z index to work.

So if we save this now the page refreshes again and if we come to open this up we can now see that we

get a nice clip to look from both the footer and the header.

This is a really nice feel the really brings the application together.

I feel like and it really looks even better on mobile devices.

So if you have your phone if you're open up your terminal or command line you can see where it says

the local host routes and this is the local host 3000 that you use in the browser.

But if you pull up your phone that is connected to the same Wi-Fi network as your computer that you're

developing on and you go to this local IP address then you'll be able to pull up the project on your

phone and you'll see that the application really is looking great and now has its new footer.

We went pretty quickly with this one because you guys already are familiar with how all this stuff works

from the header but let's start getting into some new information and looking at how we're going to

set up our footer links using the grid component in the next video.