1
00:00:00,390 --> 00:00:05,960
Welcome back some of us video we got the blog app set up created our blog model and we added the index

2
00:00:06,210 --> 00:00:07,540
template in this video.

3
00:00:07,560 --> 00:00:10,070
We won't actually be adding any new routes just yet.

4
00:00:10,090 --> 00:00:13,590
This will be very quick but we want to add in our header and footer Parshall's.

5
00:00:13,680 --> 00:00:16,030
And then I want to include semantic UI as well.

6
00:00:16,040 --> 00:00:18,980
And then finally we'll add a really simple nav bar at the top.

7
00:00:19,380 --> 00:00:23,990
So let's start we want to create our header and footer that Ejay as files.

8
00:00:24,660 --> 00:00:26,810
And that should be inside if viewed directories.

9
00:00:26,820 --> 00:00:34,200
So we'll do a make directory use slash Parshall's then touch views slash Parshall's slash Hetter that

10
00:00:34,200 --> 00:00:40,990
Ejay us and then touch views slash Parshall's slash footer E.J..

11
00:00:41,430 --> 00:00:42,060
Great.

12
00:00:42,060 --> 00:00:45,990
Now let's open those up.

13
00:00:46,290 --> 00:00:47,960
Let's start with header.

14
00:00:48,570 --> 00:00:54,990
And why didn't the basic skeleton so HD a metal head title.

15
00:00:55,470 --> 00:01:02,540
We'll call it blog app and then we need our body just like that and we'll be moving this to the footer

16
00:01:02,790 --> 00:01:07,010
so we can cut that out for now and then just so that we know it's working.

17
00:01:07,140 --> 00:01:14,310
Let's add in just a paragraph at the top that says from the header file and if we see that on every

18
00:01:14,310 --> 00:01:16,710
page will know that we did it correctly.

19
00:01:16,710 --> 00:01:18,060
Now let's open up footer

20
00:01:22,980 --> 00:01:30,110
paste this in and we can do the same thing from the footer save.

21
00:01:30,450 --> 00:01:33,890
Now we need to link this and let's do it in our index to start.

22
00:01:34,140 --> 00:01:42,360
So at the top we need to have our include and our path is that we're instead of use in the index file

23
00:01:42,380 --> 00:01:42,600
.

24
00:01:42,780 --> 00:01:47,780
So we just want a dot slash Parshall's slash header.

25
00:01:48,240 --> 00:01:53,280
And then the same thing down here Parshall's slash for it.

26
00:01:53,700 --> 00:02:02,130
Let's test it out no problem so far and we get from the header file from the foot or five.

27
00:02:02,430 --> 00:02:02,990
Great.

28
00:02:03,180 --> 00:02:05,530
Now let's add in semantic UI.

29
00:02:05,880 --> 00:02:10,590
So I have this semantic UI web site open semantic Dasch you dot com.

30
00:02:10,620 --> 00:02:18,080
And just like bootstrap we can either download the files or we can include a CDN semantic UI CDN.

31
00:02:18,530 --> 00:02:23,790
Just click on this first example and you'll notice there are a lot of different files that we could

32
00:02:23,790 --> 00:02:24,630
pick from.

33
00:02:24,810 --> 00:02:30,120
And that's because the way that semantic UI is organized the way it's designed is that unlike bootstrap

34
00:02:30,300 --> 00:02:37,200
if all you want is after our section or you only want the forms you can just take that single component

35
00:02:37,560 --> 00:02:39,000
component slash formed us.

36
00:02:39,000 --> 00:02:43,770
SS So you don't need the entire thing which is one of the criticisms of bootstrap is if you only want

37
00:02:43,770 --> 00:02:46,510
a small piece you still have to take the entire library.

38
00:02:46,770 --> 00:02:48,420
But we do want the entire library.

39
00:02:48,420 --> 00:02:55,920
So if you scroll down on all these idioms you want the one that says semantic that CDN which if you

40
00:02:55,920 --> 00:03:04,190
just do a search or semantic got reassess which is right here it's difficult to find if you don't know

41
00:03:04,190 --> 00:03:05,920
or you're looking for but just do a search.

42
00:03:06,000 --> 00:03:09,320
No actually take a minute fied version to make things faster.

43
00:03:09,360 --> 00:03:16,950
So it's semantic that men see assess and we copy that you Erl over and we're going to put it up top

44
00:03:17,340 --> 00:03:20,040
in our header file inside the head.

45
00:03:20,490 --> 00:03:22,300
It's a length tag.

46
00:03:22,950 --> 00:03:29,030
And we want it to be link and then ref equals that right there.

47
00:03:29,120 --> 00:03:30,260
Yes yes.

48
00:03:30,420 --> 00:03:34,900
And we should also add in rel style sheet type equals text slash.

49
00:03:34,940 --> 00:03:40,500
C Ss So now we save and restart the server again.

50
00:03:41,640 --> 00:03:47,160
Take a look at our home page you'll see a few small changes just like when we first install bootstrap

51
00:03:47,250 --> 00:03:49,070
the font changes a little bit.

52
00:03:49,560 --> 00:03:49,830
OK.

53
00:03:49,830 --> 00:03:57,720
So that means that we have it working let's get rid of our paragraphs in the header and footer and instead

54
00:03:57,870 --> 00:04:01,180
let's add in a simple nav bar in the queue.

55
00:04:01,230 --> 00:04:03,740
Now of course are called menus.

56
00:04:03,990 --> 00:04:12,810
So if we go over here click on menu all the different components and we want to find menu which is under

57
00:04:12,810 --> 00:04:16,170
collection's menu.

58
00:04:16,170 --> 00:04:18,630
You can see there are quite a few different types of menus.

59
00:04:18,860 --> 00:04:22,190
There's menu which is what you see here.

60
00:04:22,500 --> 00:04:32,090
There's a Poynting menu there is tabular text vertical magination.

61
00:04:32,470 --> 00:04:40,450
And there's quite a few more all that we need though is to make the top of our body a div and let's

62
00:04:40,590 --> 00:04:43,170
get this properly.

63
00:04:43,170 --> 00:04:46,340
Kate does class equal to you.

64
00:04:46,340 --> 00:04:52,170
I fixed and we'll do an inverted menu which just changes the color just like in bootstrapped.

65
00:04:52,170 --> 00:04:57,410
You could say in verse and then inside of there we need another div.

66
00:04:58,020 --> 00:05:03,830
And this one will have class equals you container which is just like bootstrapped container.

67
00:05:04,260 --> 00:05:10,030
And then instead of there I'll have another div and this one will have class equal to Hetter item.

68
00:05:10,320 --> 00:05:13,550
And this is like the nav bar brand on bootstrap.

69
00:05:13,560 --> 00:05:18,920
So all that we want kids blog site or whatever we want our app to be called.

70
00:05:19,050 --> 00:05:28,830
And then after that we'll add an anchor tag for the home page and we'll just call it home and we'll

71
00:05:28,860 --> 00:05:37,140
add in class equal to item and then we'll do the same thing except rather than going to slash it will

72
00:05:37,140 --> 00:05:45,350
go to slash logs slash new which doesn't exist yet and it will be cold New Post or New Blog.

73
00:05:45,410 --> 00:05:47,470
That will be the text that we see.

74
00:05:48,350 --> 00:05:51,760
OK so you aren't fixed inverted menu.

75
00:05:51,900 --> 00:05:53,460
A container instead of that.

76
00:05:53,670 --> 00:06:00,010
And then inside the container we actually should have all of this small mistake on my part.

77
00:06:00,060 --> 00:06:02,670
So we want that to be in there as well.

78
00:06:03,360 --> 00:06:04,850
It's all in the container.

79
00:06:05,160 --> 00:06:10,250
And then we have our header and then we have two items that are anchored Tex.

80
00:06:10,260 --> 00:06:12,200
Let's take a look at that now.

81
00:06:13,500 --> 00:06:15,200
And we get our simple math bar.

82
00:06:15,520 --> 00:06:17,720
Yes we have a problem here with some spacing.

83
00:06:17,730 --> 00:06:21,450
We'll handle that in just a moment but we have a now where it works just fine.

84
00:06:21,660 --> 00:06:27,450
Let's add in a simple icon which in semantic You are just called icons.

85
00:06:28,070 --> 00:06:30,690
There's a bunch of them in the one that I used.

86
00:06:30,720 --> 00:06:32,960
It's called Code.

87
00:06:33,120 --> 00:06:35,500
Try and find it on here and just do a search.

88
00:06:35,550 --> 00:06:36,310
There it is.

89
00:06:36,480 --> 00:06:39,760
But feel free to pick your own if you like comment.

90
00:06:39,810 --> 00:06:43,560
The idea was that it was a code based blog but there might be something else.

91
00:06:43,560 --> 00:06:44,900
I like the idea one as well.

92
00:06:44,920 --> 00:06:46,190
Anyway there's a bunch of them.

93
00:06:46,350 --> 00:06:51,980
What is nice is that they also have a bunch of icons for companies which is useful.

94
00:06:52,020 --> 00:06:56,610
The very bottom I think they have them and we go to tons of different brands and common companies that

95
00:06:56,610 --> 00:06:59,100
you'd have linked to on your application.

96
00:06:59,430 --> 00:07:00,070
OK.

97
00:07:00,300 --> 00:07:07,160
So it's code a name for icon and I'm going to add it right here next to the blogsite header.

98
00:07:07,470 --> 00:07:11,190
So right here had her item and all we need is an eye tag.

99
00:07:11,670 --> 00:07:17,400
And it needs to have a class of code and an icon.

100
00:07:17,400 --> 00:07:26,040
So really simple just the name of the icon and then the class icon save refresh and we have a little

101
00:07:26,040 --> 00:07:26,290
code.

102
00:07:26,280 --> 00:07:27,340
I come there.

103
00:07:27,660 --> 00:07:31,830
Let's make a small change which is to make this icon a little bit bigger.

104
00:07:31,860 --> 00:07:38,730
To do that we could just write a style tag great here but rather than doing that let's use the public

105
00:07:38,730 --> 00:07:40,630
directory that we set up.

106
00:07:40,680 --> 00:07:41,930
We still need to make the directory.

107
00:07:41,940 --> 00:07:44,570
But we set up the fact that it's being served.

108
00:07:44,700 --> 00:07:51,340
So we'll do stylesheets slash and we'll just call it apt C Ss doesn't exist yet.

109
00:07:51,690 --> 00:08:03,330
So we need to do a make directory public and then also make directory public slash style sheets and

110
00:08:03,330 --> 00:08:11,490
finally touch public slash style sheets slash app Dotsie SS which we also want to open up so public

111
00:08:11,730 --> 00:08:16,710
stylesheets Aptos the SS tab completion is definitely your friend there.

112
00:08:16,740 --> 00:08:19,990
And to make all the icons a little bigger.

113
00:08:20,400 --> 00:08:26,370
Well just you actually rather than all icons and stewe icons that have that class of icon just to be

114
00:08:26,370 --> 00:08:35,940
a little more specific and we'll set font size BE2 IEMs just like that double the size of the container

115
00:08:36,600 --> 00:08:39,250
or double size of the parent save.

116
00:08:39,560 --> 00:08:45,180
OK so now we started server back up and we refresh the page.

117
00:08:45,180 --> 00:08:49,530
We should see that the icon gets larger which is just a matter of personal preference.

118
00:08:49,530 --> 00:08:52,340
But I think it looks a little bit better when it's larger.

119
00:08:52,710 --> 00:08:52,940
OK.

120
00:08:52,950 --> 00:08:56,850
Now that we have that done we're done with everything we needed to do in this video.

121
00:08:56,850 --> 00:09:03,210
So I just wanted to set up the nav bar added in the Header Footer files add in our own custom CSSA file

122
00:09:03,300 --> 00:09:09,810
even though it's only one line now we can easily add custom CSSA to every single file every single template

123
00:09:10,500 --> 00:09:13,580
and I wanted to show you how we can include semantic UI.

124
00:09:13,860 --> 00:09:19,420
OK so we'll pick up the next video with new and create so we can actually create new blogs.