9.10 A footer and includes in includes - Video Tutorials & Practice Problems

<v Instructor>All right, now that we've fixed up</v> this header here that we factored into a separate include, let's take a look at the other side of the site, which is the footer here. This is another common part of the web design that we looked at before. Let's take a look. So we've got our logo and navigation, which is now actually implemented, and so now we're gonna make a page footer as well. So we'll get into the details about what the design looks like. <v Lee>But notice there's a lot of things</v> that it shares with the header. <v Instructor>Yeah, yeah.</v> That's one thing that's especially useful here to note is that we do have the logo here on the diagram, I don't think we end up with that in the real design though, do we, Lee? <v Lee>No, 'cause we use a slightly different</v> implementation of it but we do have navigational stuff. <v Instructor>Right, we do have the navigation links,</v> and so that's gonna be a good example of how to avoid repeating yourself, because we're gonna use exactly the same nav links and Jekyll's gonna let us include this without having to just copy and paste. <v Lee>Right and theoretically,</v> it would be possible to do the same logo in all of that, but you just have to make decisions at some point. <v Instructor>Yeah.</v> <v Lee>And so in this case it was easier to just style</v> a slightly different version of the footer logo. <v Instructor>Yeah, all right.</v> So let's get started with a footer. Remember it goes in the includes directory. Take a look here. We've got header and a footer. And so, now we can do this here. Move this over to the front and to the far left, and just like the header uses the header tag, there's also a footer tag, and we're gonna give it as we did here, like with the header class we'll give it a footer class. So in sublime text I can do footer.footer, and this will give us a footer tag with a footer class. And then what do we do here with the logo? Oh, we actually do have the logo. It's just a slightly different design, so. <v Lee>Right, exactly yeah.</v> It's the same image but different class and all that. So theoretically, that's what I was saying we could make an include that just has the the logo image in it, but at that point it's getting a little too partialed out. <v Instructor>What does that mean, partialed out?</v> <v Lee>Just chopped up.</v> <v ->Okay.</v> <v ->Into little partial pieces.</v> <v Instructor>Yeah, so let's make a link to the home page,</v> which is the usual convention that we used with the logo and the upper left and then have the logo, and then we're gonna put a header as well or like a, a heading, I should say. Just have an h3, and we're gonna put this in a span. I don't recall why we do this. <v Lee>We're gonna do a slightly different</v> styling treatment for the, to Be Dangerous. <v Instructor>Okay.</v> And a span will let us just target the stuff in here. So you might recall the spans are basically inline versions of divs. They're just like some generic tag that is a way of separating this content from the stuff that's around it. <v Lee>Okay.</v> <v Instructor>By the way,</v> we've gone the opposite direction here before we included the header first and then made the header and this time it just felt more natural to make the footer first. So let's go down here, it's exactly the same syntax, we're gonna include footer.html down at the bottom and we'll do it right before the end of the body tag, so right here. Okay, and see if that worked. Okay, well, it's something's down here. (Lee laughing) <v ->I can see this-</v> <v ->You can see the image.</v> <v Instructor>I can see it,</v> but boy, it sure Isn't very visible, so. <v Lee>Yeah, if we've changed</v> the footer background to black, we'll be able to see the image. <v Instructor>So we don't have any CSS for that.</v> <v ->No.</v> <v ->Do we?</v> <v ->So we'll have to</v> <v ->Yeah, let's do that.</v> <v Lee>We'll have to do that.</v> So good place to put this would be right after the header. <v Instructor>Right, header.</v> So header styles now, footer styles. And what are some of the styles? Well, let's do a background color. Aha, oh, that's- <v ->There we go.</v> <v Instructor>That's that's a lot nicer, look at that.</v> So this whole area is the footer. <v Lee>Yep.</v> <v Instructor>Got it.</v> <v Lee>And because of the border on the side</v> of the site kind of fits into it. <v Instructor>Yeah.</v> Okay, and we're gonna put in some padding and again, this is the kind of thing there's just a bit of trial and error. Just fiddle around with it. And we have a hundred... Sorry, 10 VH. This is 10% of the view port height. <v Lee>Mm-hmm.</v> <v Instructor>Zero and 15% on the bottom.</v> <v Lee>Mm-hmm.</v> <v Instructor>And then also zero,</v> but we can leave that implicit using the shorthand. Okay, that's interesting. <v Lee>Yeah, moves it down a bit.</v> <v Instructor>Wow, look at that, yeah.</v> So this is the padding here. <v Lee>Yep.</v> <v Instructor>And here.</v> Got it. <v Lee>And just, mention this once before</v> just to reiterate. A lot of times throughout this tutorial, we're using a variety of different units. Just to show that you can use a variety of different units. <v Instructor>Yeah.</v> <v Lee>So you might not always want it to be 10 view height</v> cause that'll change with the size of the browser. You might want it to be 30 pixels or 40 pixels, something that's static and remains the same across. It just depends on how you're gonna use this through the whole development cycle and across different devices and all of that. In this case, we're gonna be doing a mobile thing with this later. And by using something that's based on view heights, I kind of have an idea of how this is gonna end up looking on a mobile screen and on the other one, so. <v ->Okay.</v> <v ->Or on the desktop.</v> <v Instructor>All right, well let's center that logo.</v> Remember it's an inline element, so we can do this. Right, and then let's style the image itself and we'll constrain it to width, to 50 pixels. Yeah, makes it a little smaller. And then let's take care of that h3 we put in right here, which I'm really not a hundred percent sure where it is. (Lee laughing) Is it just black? Is that the issue? <v Lee>Yeah, the text is taking the default font color</v> which is black. <v Instructor>Right, so it's somewhere here.</v> Actually, we could probably highlight it. <v Lee>Yeah, we can highlight it.</v> Absolutely, definitely. <v Instructor>Ah, there it is.</v> Ha-ha, well, let's refresh it. There it is. <v Lee>Aye.</v> <v Instructor>All right, it's a miracle.</v> Let's give it some padding to separate it from the logo. Again this 1.5 em just comes from fiddling around with it and it'll look nice if we make it upper case. Yeah, looks good. Oh, and here's the use of the span, so we can use a selector here. <v Lee>Exactly.</v> Without needing to add a separate class for it. So again, this is another very subjective thing. <v Instructor>Right.</v> <v Lee>Some people might say,</v> don't do this we're three deep. <v Instructor>Right.</v> <v Lee>You know, so add a class</v> and you could just directly target that spans class. In this case, just did it to show that you can easily target a selector like that as long as you know that there's not gonna be any other content in there, no harm, no foul. <v Instructor>Yep.</v> All right, so you can see it's a gray now, it's the aaa here, so it's learn enough to be dangerous. (Lee laughing) All right, we saw on the diagram before, that one of the conventions is sometimes to have the navigation links repeated in the footer, so let's do that without actually repeating ourselves using a Jekyll include. And what we're gonna do in order to make that happen is to make an include called nav-links. That's right here. And we can look at our header, that's where the nav-links exist now. And so what we're gonna do is just cut these out. And notice here, there's a class header nav, we might wanna style these differently based on whether they appear in the header or the footer. So what we're gonna do is just cut these out. Is that right? <v Lee>Yep. We're gonna-</v> <v Instructor>So.</v> <v Lee>Because that's the part</v> that's always gonna be the same. <v Instructor>Right.</v> <v Lee>We're gonna put that in its own include,</v> and then that way, when we insert it on a page we can just wrap the little bit of liquid. <v Instructor>Yeah.</v> <v Lee>With a UL that has a different class on it</v> and that's an easy way to reformat the way that the whole thing looks. <v Instructor>Cool.</v> <v Lee>There are more complicated ways to do this.</v> There are ways to pass variables through in the includes, but this is a low tech way of doing it. <v Instructor>Yeah and one of the things</v> that Lee came up with here was to add an extra class. Just to make sure that we have ways to style the header and nav-links separately, because we're also gonna include this in the footer until we'll have footer nav and nav links, right? <v Lee>Right.</v> So up to this point, we have all the styling for the navigational links under that header nav. But we're gonna want those links to look the same. Even if they're laid out a little bit differently, we want the actual text of the link to look the same, because it's nice to have consistency across the whole site. So adding this nav-links class will let us style those links and make them the same between the header and the footer. <v Instructor>Okay, so I'm just gonna copy</v> all of the nav here, save that. And then we'll paste it into the footer here, right above the h3. And then instead of header-nav, it'll just be footer-nav. But it's the same nav links and so if we refresh this, we should see the same nav-links up here at the top and that should appear at the bottom. We'll style them in a second, but... There we go, look at that. So up here, they're exactly the same and now they appear and we just need to add some footer-nav styles. That's great. So, this is the kind of thing that you really can't do without a static site builder or a full blown web framework like, Ruby on Rails. So you need some sort of programmatic way of assembling a webpage, doing this by hand is impossible. <v Lee>Right, you wouldn't want those to...</v> You wouldn't wanna have to do that. <v Instructor>Yeah, 'cause then keeping them</v> in sync is just... <v ->Inevitably,</v> when you need to make a change to the link or link text, you'd have to edit it in a bunch of different places and that would be a giant nightmare. <v Instructor>Yep.</v> So we're gonna in the CSS, factor out the nav-link styling. So where was this? This was in... Where was the nav? Here's header-nav. So we have header-nav a, right here. <v Lee>Mm-hmm.</v> <v Instructor>And we can put all of this stuff...</v> Is this right? All of this stuff is gonna go in the nav-links. <v Lee>Exactly.</v> <v Instructor>'Cause this is common</v> to the header and the footer, like that. <v Lee>Right.</v> <v Instructor>And then we can do this.</v> <v Lee>There we go.</v> And we're gonna style the nav-links in the footer, to be slightly different color, so that- <v Instructor>Okay.</v> <v Lee>Just so you can see what this buys us</v> by splitting things up this way. <v Instructor>Right, and so we can copy this.</v> Basically, we're just gonna go down to the footer styles and have something that looks like this. Right, and then we'll style it separately. So let me just comment this out and we'll see how it... It shouldn't change anything, right? We've just refactored it. <v Lee>Right.</v> <v Instructor>So, because we added in this extra class</v> and then we factored the CSS into that class, we just moved it here. It shouldn't change. But it's good to check 'cause you never know. (both chuckling) Okay, so that's good. And now we've got footer-nav a and the color that you came up with- <v Lee>Ccc, yeah.</v> <v Instructor>Was a gray sort of a medium gray, like that.</v> <v Lee>Yep, just something to change it a little bit.</v> <v Instructor>Yep.</v> <v Lee>But they're not in a line.</v> <v Instructor>Right.</v> <v Lee>So we can change that too.</v> We could change the nav-links, use our new nav links class to target the li's to put them in a row by using the inline block the same way that we're doing in the header. <v Instructor>Right, but then if-</v> <v Lee>And we could make that universal.</v> <v Instructor>Lowers our flexibility though, right?</v> <v Lee>Right, so a lot of times in a footer</v> you might want the links to be vertical in the footer, but horizontal on the nav. In this case, we're gonna make them horizontal but this actually gives us the flexibility of deciding whether or not they're gonna be horizontal. <v Instructor>Right.</v> So these are the footer nav li's and we will make them inline block. <v Lee>And we'll give them their own margin too.</v> <v Instructor>Right.</v> So that's top right, bottom left. So zero and then one, so, the left is 1em to match this. <v Lee>And this pushes the links away</v> from each other and also from the logo. <v Instructor>Ah, there we go.</v> Look at that, that's nice. So we don't have any design affordances on these. Is that okay in a footer? <v Lee>It is, it isn't.</v> I mean, we can add one. <v Instructor>What do you think, you wanna add one?</v> <v Lee>Yeah, let's add one.</v> Let's, let's make them the same orange rollover. <v Instructor>Okay.</v> So should we put that in- <v Lee>I'd put that in-</v> <v Instructor>Nav-links?</v> <v Lee>Yeah, exactly.</v> So where we have header-nav hovering, let's change that to nav-links. <v Instructor>Oh, here.</v> <v Lee>Mm-hmm.</v> And there we go. I mean I don't know why you wouldn't want to have them, but- <v ->Yeah.</v> <v Lee>I guess maybe for some reason</v> you wouldn't want interactions on the footer. I don't know, that's good though. <v Instructor>I like that.</v> And so does it still work on these guys? <v Lee>Mm-hmm.</v> It works across. The only thing is that we aren't adding in the first link, first-child, orange. <v Instructor>Yeah. No, I think that's good though for the-</v> <v Lee>Right, we don't really need that</v> in every single place that the home is. It's kind of a call out for attention in the header, but down in the footer, it's more of like secondary links down there, so. <v ->Cool, yeah, so I do like the idea that</v> we have it highlighted here, but not down here because it's a little bit too distracting. And this is kind of a secondary location, right? <v Lee>Right, that's a secondary location for navigation.</v> <v Instructor>Right.</v> All right, well, we've now sliced up our site. We've got our header and our footer. We've done a bunch of different design. And so, this is a good stopping point. Let's add everything to our project and push it up to GitHub. So, I'm looking at the status here, and you'll note that there are some untracked files, so we'll have to add these. We can't just do git commit-am, we actually have to add them. There's something else here too, which is this DS_Store. This is a little thing that happens in Mac OS when you open things like this. If you open the directory, it has this extra file. And like, I don't even really know what it does, but I know I don't want it in my repository. So, I'm gonna add .DS_Store to a good ignore file. We don't have one right now, do we? <v Lee>No.</v> <v Instructor>Okay, so we can just do this,</v> and then reduce the status now, you can see that .gitignore has been added but now the DS_Store is no longer mentioned. So, of course, this is covered in, "Learn Enough Git to Be Dangerous." All right, let's add everything, -A. All right, let's make a commit now, and we'll push it up. We can do -M or -am, it doesn't really matter. Sometimes I just do this out of habit, and push it up, and something really cool is going to happen. So this is a Jekyll site now, but GitHub Pages is Jekyll aware. So once it has a chance to build this, it will actually show us the Jekyll generated site. And there we go. Looking good. Well, it's not looking great yet, but we're off to a great start.