Welcome back some of us video we got the blog app set up created our blog model and we added the index
template in this video.
We won't actually be adding any new routes just yet.
This will be very quick but we want to add in our header and footer Parshall's.
And then I want to include semantic UI as well.
And then finally we'll add a really simple nav bar at the top.
So let's start we want to create our header and footer that Ejay as files.
And that should be inside if viewed directories.
So we'll do a make directory use slash Parshall's then touch views slash Parshall's slash Hetter that
Ejay us and then touch views slash Parshall's slash footer E.J..
Great.
Now let's open those up.
Let's start with header.
And why didn't the basic skeleton so HD a metal head title.
We'll call it blog app and then we need our body just like that and we'll be moving this to the footer
so we can cut that out for now and then just so that we know it's working.
Let's add in just a paragraph at the top that says from the header file and if we see that on every
page will know that we did it correctly.
Now let's open up footer
paste this in and we can do the same thing from the footer save.
Now we need to link this and let's do it in our index to start.
So at the top we need to have our include and our path is that we're instead of use in the index file
.
So we just want a dot slash Parshall's slash header.
And then the same thing down here Parshall's slash for it.
Let's test it out no problem so far and we get from the header file from the foot or five.
Great.
Now let's add in semantic UI.
So I have this semantic UI web site open semantic Dasch you dot com.
And just like bootstrap we can either download the files or we can include a CDN semantic UI CDN.
Just click on this first example and you'll notice there are a lot of different files that we could
pick from.
And that's because the way that semantic UI is organized the way it's designed is that unlike bootstrap
if all you want is after our section or you only want the forms you can just take that single component
component slash formed us.
SS So you don't need the entire thing which is one of the criticisms of bootstrap is if you only want
a small piece you still have to take the entire library.
But we do want the entire library.
So if you scroll down on all these idioms you want the one that says semantic that CDN which if you
just do a search or semantic got reassess which is right here it's difficult to find if you don't know
or you're looking for but just do a search.
No actually take a minute fied version to make things faster.
So it's semantic that men see assess and we copy that you Erl over and we're going to put it up top
in our header file inside the head.
It's a length tag.
And we want it to be link and then ref equals that right there.
Yes yes.
And we should also add in rel style sheet type equals text slash.
C Ss So now we save and restart the server again.
Take a look at our home page you'll see a few small changes just like when we first install bootstrap
the font changes a little bit.
OK.
So that means that we have it working let's get rid of our paragraphs in the header and footer and instead
let's add in a simple nav bar in the queue.
Now of course are called menus.
So if we go over here click on menu all the different components and we want to find menu which is under
collection's menu.
You can see there are quite a few different types of menus.
There's menu which is what you see here.
There's a Poynting menu there is tabular text vertical magination.
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
get this properly.
Kate does class equal to you.
I fixed and we'll do an inverted menu which just changes the color just like in bootstrapped.
You could say in verse and then inside of there we need another div.
And this one will have class equals you container which is just like bootstrapped container.
And then instead of there I'll have another div and this one will have class equal to Hetter item.
And this is like the nav bar brand on bootstrap.
So all that we want kids blog site or whatever we want our app to be called.
And then after that we'll add an anchor tag for the home page and we'll just call it home and we'll
add in class equal to item and then we'll do the same thing except rather than going to slash it will
go to slash logs slash new which doesn't exist yet and it will be cold New Post or New Blog.
That will be the text that we see.
OK so you aren't fixed inverted menu.
A container instead of that.
And then inside the container we actually should have all of this small mistake on my part.
So we want that to be in there as well.
It's all in the container.
And then we have our header and then we have two items that are anchored Tex.
Let's take a look at that now.
And we get our simple math bar.
Yes we have a problem here with some spacing.
We'll handle that in just a moment but we have a now where it works just fine.
Let's add in a simple icon which in semantic You are just called icons.
There's a bunch of them in the one that I used.
It's called Code.
Try and find it on here and just do a search.
There it is.
But feel free to pick your own if you like comment.
The idea was that it was a code based blog but there might be something else.
I like the idea one as well.
Anyway there's a bunch of them.
What is nice is that they also have a bunch of icons for companies which is useful.
The very bottom I think they have them and we go to tons of different brands and common companies that
you'd have linked to on your application.
OK.
So it's code a name for icon and I'm going to add it right here next to the blogsite header.
So right here had her item and all we need is an eye tag.
And it needs to have a class of code and an icon.
So really simple just the name of the icon and then the class icon save refresh and we have a little
code.
I come there.
Let's make a small change which is to make this icon a little bit bigger.
To do that we could just write a style tag great here but rather than doing that let's use the public
directory that we set up.
We still need to make the directory.
But we set up the fact that it's being served.
So we'll do stylesheets slash and we'll just call it apt C Ss doesn't exist yet.
So we need to do a make directory public and then also make directory public slash style sheets and
finally touch public slash style sheets slash app Dotsie SS which we also want to open up so public
stylesheets Aptos the SS tab completion is definitely your friend there.
And to make all the icons a little bigger.
Well just you actually rather than all icons and stewe icons that have that class of icon just to be
a little more specific and we'll set font size BE2 IEMs just like that double the size of the container
or double size of the parent save.
OK so now we started server back up and we refresh the page.
We should see that the icon gets larger which is just a matter of personal preference.
But I think it looks a little bit better when it's larger.
OK.
Now that we have that done we're done with everything we needed to do in this video.
So I just wanted to set up the nav bar added in the Header Footer files add in our own custom CSSA file
even though it's only one line now we can easily add custom CSSA to every single file every single template
and I wanted to show you how we can include semantic UI.
OK so we'll pick up the next video with new and create so we can actually create new blogs.