Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,090 --> 00:00:08,860
Before we start learning about the grid system and how we're going to use that to lay out our content
2
00:00:08,890 --> 00:00:16,180
on the screen let's first just start getting the basic skeleton of the footer set up and then we'll
3
00:00:16,180 --> 00:00:23,800
go in and start filling out the details so let's jump over to our project directory in your code editor
4
00:00:24,070 --> 00:00:28,120
and we'll see where to begin.
5
00:00:28,120 --> 00:00:28,750
All right.
6
00:00:28,750 --> 00:00:30,020
And here we are.
7
00:00:30,040 --> 00:00:36,360
Make sure that your development server is running and we're finally going to get out of our header dot
8
00:00:36,370 --> 00:00:37,430
J.S. file.
9
00:00:37,430 --> 00:00:39,360
We've definitely done enough there.
10
00:00:39,400 --> 00:00:47,800
So let's come over to the UI folder and let's go ahead and make a new file in here called the footer
11
00:00:47,830 --> 00:00:49,250
dot J S.
12
00:00:49,630 --> 00:00:58,570
We'll start by importing react from react and to be able to access our styles we're also going to need
13
00:00:58,570 --> 00:01:10,280
to import make styles from app material dash UI slash core slash styles.
14
00:01:10,690 --> 00:01:15,550
Then let's come down and we will export default.
15
00:01:15,550 --> 00:01:27,160
Our function footer and go ahead and open that up then we'll come up here above to create our constant
16
00:01:27,490 --> 00:01:39,130
use styles which will use our Make styles function to get access to our theme and then return in object
17
00:01:39,220 --> 00:01:42,710
with all of our styles while we're here.
18
00:01:42,720 --> 00:01:48,330
Let's just go ahead and create the first style that we're going to need which is going to be for our
19
00:01:48,330 --> 00:01:49,380
base footer.
20
00:01:49,410 --> 00:01:53,940
So we'll just call it the footer style and we can open this up.
21
00:01:54,000 --> 00:02:04,820
And here I definitely know that I'm going to want the background color to be our theme pallets dot Coleman
22
00:02:05,290 --> 00:02:12,900
dot blue and I actually forgot that we need to be wrapping this so this internal set of brackets makes
23
00:02:12,950 --> 00:02:20,760
sure you get a set of parentheses on there so that we're returning this styles objects but then I also
24
00:02:20,760 --> 00:02:27,050
know the I'm going to want the footer to have a width of 100 percent.
25
00:02:27,060 --> 00:02:36,100
So it's going to span the entire way across our screen just like the header does with these simple styles
26
00:02:36,100 --> 00:02:36,820
in place.
27
00:02:36,820 --> 00:02:43,300
Let's come back down into our function and let's create our constant of classes which is going to take
28
00:02:43,360 --> 00:02:45,520
or use styles hook.
29
00:02:45,520 --> 00:02:57,310
Now to give us access to our styles then we will come down and return a footer with a class name of
30
00:02:57,310 --> 00:03:06,790
our classes DAF footer class and then we can close this up and I'll just put in the text example footer
31
00:03:07,890 --> 00:03:13,730
that way we at least have something to show up on the screen go ahead and save that.
32
00:03:13,740 --> 00:03:21,210
That's enough for our basic look but we actually need to come over into the app dot J.S. file and here
33
00:03:21,330 --> 00:03:27,910
in the same way that we render our header above the switch statement that renders our actual route.
34
00:03:28,050 --> 00:03:36,680
Let's come up here to the top and we're going to import the footer from of one directory components
35
00:03:37,200 --> 00:03:46,670
UI footer and then underneath our switch statement here we will render a footer component.
36
00:03:46,720 --> 00:03:53,740
Let's go ahead and save that and our application will refresh and you can now see we've got an example
37
00:03:53,740 --> 00:04:01,400
footer on the screen now the first problem of course is that it's actually not spanning this fall with
38
00:04:01,790 --> 00:04:06,220
So you see we got a little gap on either the left and right sides.
39
00:04:06,350 --> 00:04:14,330
And if we come in and we inspect that page we can see in the window that we come over to the body.
40
00:04:14,450 --> 00:04:21,560
You can see if we click on this the down here in the little box it shows that there's actually a margin
41
00:04:21,770 --> 00:04:30,390
of eight pixels all the way around our body so to get rid of this let's go ahead and in our public directory
42
00:04:30,810 --> 00:04:38,670
let's open up the index dot each team l file and it will come down to our body tag right underneath
43
00:04:38,670 --> 00:04:42,420
our title underneath the head and on our body tag.
44
00:04:42,540 --> 00:04:50,280
Let's just add a style property and a since this is just a plain HDMI l file we can just set that equal
45
00:04:50,520 --> 00:05:00,760
to a margin of 0 we can actually also come up here and you see this link to the logo 1 9 2.
46
00:05:00,900 --> 00:05:06,110
We had deleted that a while ago as part of the boiler plate cleanup but it looks like we missed that.
47
00:05:06,120 --> 00:05:13,820
So we can go ahead and delete that now and save the file when the page refreshes you can see that our
48
00:05:13,820 --> 00:05:22,600
footer now spans the entire width of the screen you see that the home content now is set all the way
49
00:05:22,600 --> 00:05:25,300
against the edge the screen as well.
50
00:05:25,300 --> 00:05:31,470
And so when we begin creating our actual page content we'll have to keep this in mind.
51
00:05:31,560 --> 00:05:37,380
This is perfect for how we want the footer setup though and now it gives us access to the full width
52
00:05:37,470 --> 00:05:39,210
of the screen.
53
00:05:39,210 --> 00:05:45,180
The other thing that you may be noticing is that our footer is not at the bottom of the screen where
54
00:05:45,180 --> 00:05:46,560
you might expect it.
55
00:05:46,620 --> 00:05:50,070
And that's because we don't have any content on our screen yet.
56
00:05:50,310 --> 00:05:52,700
So we only have this little home text.
57
00:05:52,800 --> 00:05:54,960
So there's nothing really pushing it down.
58
00:05:55,110 --> 00:06:02,250
But if we come into the app not J.S. file where we're rendering our home components this little dummy
59
00:06:02,250 --> 00:06:05,700
component on the path for our home screen.
60
00:06:05,700 --> 00:06:11,680
If we come in onto this div we add a style and this time we're in react.
61
00:06:11,700 --> 00:06:20,350
So we have to make this an object and we'll give it a style set to a height of two thousand pixels.
62
00:06:20,370 --> 00:06:27,060
So when we save this this will give that home component plenty of room to now take up the page.
63
00:06:27,060 --> 00:06:34,960
And if we scroll down you can see our footer all the way down here at the very bottom of the page so
64
00:06:34,960 --> 00:06:41,400
once we go in for all our different pages and add our content the footer will be placed appropriately.
65
00:06:41,410 --> 00:06:42,580
So don't worry about it.
66
00:06:42,580 --> 00:06:49,270
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
67
00:06:49,270 --> 00:06:55,450
that extra height it'll just make it look a little better as we're building we can go ahead and close
68
00:06:55,450 --> 00:06:57,970
out of the app dot J.S. and the index.
69
00:06:57,990 --> 00:07:04,430
Now each team will file and just come back to our footer dot J.S. the last thing that we're going to
70
00:07:04,430 --> 00:07:11,900
do here before we move on to the grid system in the next video is going to be to add that black slash
71
00:07:11,930 --> 00:07:16,360
that we've seen in the design file for our footer.
72
00:07:16,460 --> 00:07:20,900
Now this is actually included in your assets folder already.
73
00:07:20,930 --> 00:07:31,640
So if we come up to the top we can import a footer adorn adornment from up one directory up another
74
00:07:31,640 --> 00:07:42,360
directory assets footer adornment dot S. the G and then we're going to come down here and replace this
75
00:07:42,360 --> 00:07:44,610
with an image tag.
76
00:07:44,610 --> 00:07:57,210
And we're going to set an alt property on this equal to a Black Decker tive deck or two slash with a
77
00:07:57,210 --> 00:08:04,620
source equal to our footer adornment and then we'll make this a self closing image if we go ahead and
78
00:08:04,620 --> 00:08:07,940
save that it'll refactor the code to look a little cleaner.
79
00:08:08,130 --> 00:08:13,640
And if we scroll down you can now see this massive picture on the screen.
80
00:08:13,870 --> 00:08:18,570
We can go ahead and close out of the little window that we had opened up.
81
00:08:18,570 --> 00:08:22,560
But you can see that this definitely is not how we wanted it to look.
82
00:08:22,560 --> 00:08:34,020
So let's go ahead and change the styling of this image by adding a class name equal to classes dot adornment
83
00:08:34,680 --> 00:08:42,550
and of course that means we need to come up to our styles objects and add an adornment style here.
84
00:08:42,560 --> 00:08:53,350
We can say a with for our adornment to 25 m again the M is that responsive unit that makes sure the
85
00:08:53,350 --> 00:08:57,670
adornment will look the same size for any different device.
86
00:08:57,700 --> 00:09:03,940
So if we go ahead and save that we can see that it is now a lot smaller.
87
00:09:03,970 --> 00:09:12,430
Now if you notice at the very very bottom here there is actually a little gap a little gap right here
88
00:09:12,430 --> 00:09:18,880
above my toolbar where the adornment is still sitting above the footer.
89
00:09:19,210 --> 00:09:27,710
So we actually can go and fix this by adding a property to the adornment called vertical alignment.
90
00:09:27,760 --> 00:09:34,800
And this is a property you can use with images to change where on the image it's anchored to the screen
91
00:09:35,110 --> 00:09:39,670
and we'll set this to bottom bottom.
92
00:09:39,670 --> 00:09:44,370
Actually that's just a vertical line not vertical alignment.
93
00:09:44,410 --> 00:09:48,930
So if we go ahead and save that now we'll see the page refresh.
94
00:09:49,030 --> 00:09:55,690
And now our footer adornment is flush against the very bottom of the footer.
95
00:09:55,690 --> 00:10:00,520
This already is looking really good and definitely is coming along pretty quickly.
96
00:10:00,640 --> 00:10:08,260
And if you can see the now if we shrink this down there I just want to kind of make this adornment smaller
97
00:10:08,260 --> 00:10:14,800
for the smaller screen sizes because this size is definitely too large especially down for the mobile
98
00:10:14,800 --> 00:10:15,800
device.
99
00:10:15,850 --> 00:10:27,580
So let's go ahead and actually add a theme breakpoints dot down for medium and we'll set this equal
100
00:10:27,670 --> 00:10:37,900
to a width of just twenty one M and then we can go ahead and copy this and change the medium to extra
101
00:10:37,900 --> 00:10:38,920
small.
102
00:10:38,920 --> 00:10:46,680
And here I want just 15 m so I'll go ahead and resize the window back to full size.
103
00:10:46,750 --> 00:10:53,290
We'll save this and we'll see the page refresh and we still have our 25 m width.
104
00:10:53,290 --> 00:10:59,500
And if we go and shrink the page down now you'll see when the draw appears that it went down to our
105
00:10:59,530 --> 00:11:07,300
twenty one m width and now as we continue to shrink we'll get down to the extra small break point and
106
00:11:07,300 --> 00:11:15,310
we'll hit our just 15 m width and that looks really good for that smaller size definitely way better
107
00:11:15,310 --> 00:11:17,370
than the 25 did.
108
00:11:17,650 --> 00:11:23,240
With those numbers I tried to kind of keep it in line with how this slash in the logo looks at the top.
109
00:11:23,380 --> 00:11:27,510
And I think that does a pretty good job of keeping them in sync.
110
00:11:27,670 --> 00:11:34,240
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
111
00:11:34,240 --> 00:11:38,440
that it's clipped on there the app bar still of course from when we set that up.
112
00:11:38,770 --> 00:11:44,860
But at the bottom you can see here how it kind of just sits over the little slash that we've added.
113
00:11:44,860 --> 00:11:47,990
And honestly I just don't think that that looks very good.
114
00:11:47,980 --> 00:11:51,990
That's kind of jarring almost the way that it sits in clashes there.
115
00:11:52,000 --> 00:12:04,180
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
116
00:12:04,180 --> 00:12:09,340
the same index that we had been using in the header to clip that bar underneath it.
117
00:12:09,490 --> 00:12:16,750
And so applying the same z index here should put our footer on top of the draw as well if we go ahead
118
00:12:16,780 --> 00:12:17,820
and save this.
119
00:12:17,820 --> 00:12:24,430
We'll see the page refresh and if we come over to open the draw up you'll notice it's still sits on
120
00:12:24,430 --> 00:12:25,140
top of it.
121
00:12:25,570 --> 00:12:31,320
And that's because we actually need to set our position to relative.
122
00:12:31,510 --> 00:12:34,810
And it actually just needs to be set explicitly.
123
00:12:34,840 --> 00:12:43,060
So relative is the default here but we need to make sure to set that explicitly for our z index to work.
124
00:12:43,150 --> 00:12:49,330
So if we save this now the page refreshes again and if we come to open this up we can now see that we
125
00:12:49,330 --> 00:12:54,890
get a nice clip to look from both the footer and the header.
126
00:12:54,960 --> 00:12:59,460
This is a really nice feel the really brings the application together.
127
00:12:59,460 --> 00:13:03,480
I feel like and it really looks even better on mobile devices.
128
00:13:03,480 --> 00:13:09,840
So if you have your phone if you're open up your terminal or command line you can see where it says
129
00:13:09,840 --> 00:13:17,470
the local host routes and this is the local host 3000 that you use in the browser.
130
00:13:17,610 --> 00:13:23,030
But if you pull up your phone that is connected to the same Wi-Fi network as your computer that you're
131
00:13:23,040 --> 00:13:30,660
developing on and you go to this local IP address then you'll be able to pull up the project on your
132
00:13:30,660 --> 00:13:38,030
phone and you'll see that the application really is looking great and now has its new footer.
133
00:13:38,130 --> 00:13:43,650
We went pretty quickly with this one because you guys already are familiar with how all this stuff works
134
00:13:43,650 --> 00:13:49,620
from the header but let's start getting into some new information and looking at how we're going to
135
00:13:49,620 --> 00:13:55,140
set up our footer links using the grid component in the next video.
15704
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.