12.1 Adding blog posts - Video Tutorials & Practice Problems

<v Speaker>All right.</v> Let's get started by making an index page for our blog. This will be following the same basic pattern as the gallery page. Remember that we have the URL that's slash gallery, and then it's automatically looking for index at HTML. And we made that in here. There's a gallery directory and then an index page in there. So we're gonna do the same thing here for our blog. Just make a blog directory and then touch the index page. Okay, take a look at that. And here, my editor is actually trying to get me to open this underscore site slash blog slash index directory. And I wanna show you what happens if you accidentally edit that file. So we're just gonna copy this from the tutorial. There's quite a bit of HTML in here, so let's just copy that and paste it in. So this is in the generated site though. So if I edit the actual file, which is here, then what happens is Jekyll actually builds that, you can see here in the output. So Jekyll just regenerated our site and now it overwrote the thing we pasted it in. So what we want is this. And then if we look at it here, it's the properly generated file. So remember always edit the file in just the regular directory, not in the underscore site directory. This one here. All right, let's go back to our homepage and Lee just talk about the structure of this, what's going on in this file? <v Lee>The structure for our blog index page</v> is similar to the gallery page in that we're gonna be using a flex box column set up, but instead of three columns, we're gonna have two columns. So col two instead of col three. So that's our flex container. And then we've got a flex item here, column aside, and we've got another column over here. That's gonna be our content. And so those will be our flex items. <v Speaker>All right,</v> now what we got here is just like a hard-coded post. We're actually not going to be doing this by hand though. We're gonna be making separate posts and we'll have Jekyll put them together. Also I'm just gonna indent this here. This was de-dented for the purposes of the book, but ordinarily you would wanna indent it. This is just so it wouldn't overflow into the right margin in the book. And now remember what we do with the gallery. We added a link here, so let's do that. That's the nav links. So we can add in a link to the blog. Remember it gets the name here just from the directory name. Because it's called blog. We can automatically link to it like this, and then just put the link text. There we go. So this is this, and let's take a look at it. All right well, it's there (laughs). It clearly needs to be styled, but this is one of those great cases where we've done a lot of work here. This is the kind of thing you would build up, right? Like just piece by piece ordinarily, but it's hard to show all of the different iterations that it takes to get to this. So we're just gonna go through this CSS and show you how a little bit of CSS can just transform something that's pretty raw into something that looks pretty good. <v Lee>Yeah, right.</v> Normally it would be first making the wrappers that have the columns, then putting a little bit of content in there, then deciding on more content and more content. So it'd be a lot of little steps. <v Speaker>Yeah.</v> But we'll break it down here and, and to try to simulate that as closely as possible. <v Lee>So the first thing we're gonna add though,</v> is new styling for our columns to get that sorted. <v Speaker>So this is an RCSS file.</v> And. Is it here? <v Lee>Class, you're looking for the class col.</v> Dot col. There you go. <v Speaker>Ah, there it is.</v> <v Lee>So we're gonna be adding a new col two class</v> that will have a display flex added to it. <v Speaker>Okay like this.</v> And then what goes in here? We want, oh- <v ->Just display flex.</v> <v ->Just by itself.</v> <v Lee>And then we're gonna have another class</v> or another declaration four. <v Speaker>This is similar to the col three, right?</v> Basically, we're building a two col layout, like you said. <v Lee>Right.</v> <v Speaker>Right.</v> <v Lee>And then we're gonna have another</v> declaration here for col two and then targeting the col aside and. <v Speaker>Okay.</v> <v Lee>We're gonna give this a flex</v> of zero, zero and 2m. So it's similar in size or it's the same size based on the basis as the aside that we had in the gallery, only we're not gonna allow it to shrink. <v Speaker>Right, so zero-zero is flex-grow.</v> Zero flex-shrink of zero. And then what was the flex basis you said? <v Lee>20m's.</v> <v Speaker>Okay.</v> So 0 0 20m. Okay. <v Lee>And then last we want our content to expand.</v> So we're gonna do col two and then col content. <v Speaker>Right, so that's here.</v> This is the mock post that we'll fill in later. <v Lee>And we're gonna set this to flex one,</v> which means it's gonna be expanding, or it's gonna be flex-growing flex-shrinking, and have zero flex-basis. <v ->Right so that's 1 1 0 is flex one.</v> That's this here actually. Okay. Let's take a look at what that did. All right. Put them side by side and kind of, it seems like we're prepared now. <v Lee>Yeah.</v> There's another style that we're gonna add. The aside, just to demonstrate the power of the flex box. We actually added the aside before the content for this page. And in the gallery we have the aside coming after the content, but we can add another style to the column aside in our CSS, and the property is called order. And we're gonna give it a value of one. And so this starts at zero. <v Speaker>Okay.</v> <v Lee>So by setting it to one,</v> we're gonna make this the second item in the flex container. So now it'll be on the right hand. <v Speaker>We should reverse and reverse these.</v> So this'll be on the right. <v Lee>So flex box actually allows you</v> to arbitrarily rearrange objects that are inside of a flex container, which is a pretty cool thing. <v Speaker>Yeah, that is cool.</v> <v Lee>Yeah it's really helpful</v> if you want to for some reason, not have flex be applied for mobile or something like that. This way you could have the aside sit on top of the content without needing flex to move stuff around or resize things. <v Speaker>Okay.</v> Now it looks like it's not stretching all the way across. <v Lee>Right.</v> So the issue here is that we wrapped this whole page in a div called page. If we look back at the HTML. Up there, yep. Page and blog index. And that page div is the child of our content container. That is- <v Speaker>All right so in our.</v> <v Lee>Yeah, in our default.</v> And we set that to both be display flex and be a flex item. It's a flex item to push the footer down, but then also display flex for the gallery. And because of that, our page class is being treated like a flex-grow zero flex item. <v Speaker>Cause that's the default.</v> <v Lee>Right.</v> Now we could just set it to flex one and it would flex all the way across the page and fill up the whole page. But for a content page like this, sometimes it's nice to have things be a bit smaller in width than the entire width of the page and center it. So since this is gonna be like a text-based page, you kind of want things the sides of the content to be in, so that your lines of texts don't get too stretched out. So what we're gonna do is we're gonna add a new section to our CSS for page styles. We'll add it after the columns. <v Speaker>Okay.</v> <v Lee>We'll set a width of 85 view width</v> for the page class. <v Speaker>All right.</v> So that's dot page. <v Lee>Yep.</v> <v Speaker>35% Of the view port width.</v> <v Lee>See that it'll stretch.</v> There you go. <v Speaker>Ah, yeah.</v> <v Lee>And now what we're also gonna do though,</v> is we're gonna add a max width of 980 pixels, and then some margin so that we have everything in the center of the page. But then we're also gonna add a little bit of margin to the top and a little margin to the bottom. And this is purely in there to add a little bit of white space so that our content is pushed away from other things on the page, like the header and the footer. Sometimes it's nice to just have a little bit of space. So that your content can breathe. So now when we go back, it's gonna be boom. <v Speaker>Oh yeah.</v> I see. So that's this here, the viewport. <v Lee>Exactly.</v> <v Speaker>Height here 10 and 15.</v> And then auto, remember it's like top right. Bottom left and this is repeated. So it's auto and then also auto here. But we can omit it and that arranges to center it basically? That right? <v Lee>Right.</v> <v Speaker>Okay.</v> And we're sort of just marching down the different elements here. So that's our page here. And then we've got an h1. <v Lee>Yeah, before we do that,</v> let's actually add a new global style for the h4. That's in the. <v Speaker>Oh yeah, where is that?</v> <v Lee>The recent posts.</v> <v Speaker>Okay.</v> <v Lee>Over there, it looks just like normal text.</v> <v Speaker>Oh yeah, it's just normal text.</v> <v Lee>We'll give it a little bit</v> of a little something, something. <v Speaker>Okay.</v> <v Lee>So we're gonna put it after the h2.</v> <v Speaker>Right that makes sense.</v> <v Lee>You can kind of see</v> what the organizational logic of putting all these global styles in one place, so you can find them. So we're gonna make this a light gray color, 999. Make the fonts bold and make it all uppercase. And so the idea by putting these styles in the global section is that we want all of our h4's across the entire site to look this way so. <v Speaker>Okay.</v> <v Lee>Here we go.</v> <v Speaker>Okay, looks nicer.</v> <v Lee>And then we'll do some page styling</v> for our headers on the page. <v Speaker>So do the h1.</v> So that'll be dot page, right? <v Lee>Oh, you forgot the h1.</v> <v Speaker>H1, yeah.</v> <v Lee>So this is just gonna tame</v> the size of the h1 a little bit. It's slightly big (laughs). <v Speaker>Yeah.</v> <v Lee>So this'll make it a little bit</v> more reasonable to use as a title. For our content. <v Speaker>Yeah, yep.</v> <v Lee>So then we're gonna add a margin bottom</v> and align it center so that it's right in the center of the page. And then for both the h2 and the h4 we're gonna add in little margins just to get them away from the content as well. <v Speaker>Okay so it should be centered here.</v> Bottom margin. It's good. What's the reason we skipped the h3? <v Lee>Just hadn't used it somewhere that needed styling.</v> <v Speaker>Okay so the default is fine for that one.</v> Right so we're just adding a little bit of space under this and I mean they're all kind of scrunched up. <v Lee>Yeah.</v> You do a lot of this, of spacing things. <v Speaker>Yeah.</v> Oh, so what design the title of the article? I thought that would, that is an h2. Why didn't that work? <v Lee>You have a period at the beginning of margin.</v> <v Speaker>That explains it,</v> but that that's a good example. It's like that's weird. Remember how tolerant CSS is that it builds the page anyway. It's like I expected there to be some space underneath that, but there was not. Well there we go, get rid of that period and now it should work. Aha, there we go. It's really good to add these things incrementally and just double check that each rule is being applied, 'cus it's really quite subtle sometimes. And it doesn't give you an error message or anything. <v ->No.</v> <v ->It just silently fails.</v> <v Lee>So now that we have that,</v> the idea here is that we're setting the h1, h2, and h4 for use across all pages. So the idea would be that you have any content page, like an about page or a blog post, have the exact same style of headers that you have consistency across it. And then if you wanted something more specific for just like this blog index page, then you'd use that other class that we have added to it, blog index. <v Speaker>Yeah, got it.</v> <v Lee>To target styles to that.</v> <v Speaker>So you put it there</v> just kind of in anticipation of maybe using it someday, even though we might not even use it. <v Lee>Right, exactly.</v> Sometimes it's good to just have the name there so that if someone else looks at your code, you can say, oh, it's contained within the blog index, like just search for blog index class. <v Speaker>Right, got it.</v> <v Lee>Classes like that just help for navigation.</v> <v Speaker>Right, it's useful even</v> if you're not gonna style it or at least not style it right away, but just it's sort of semantic, basically you're saying is okay, well what is this page? Well, it's a page and it's a blog index. <v Lee>Exactly.</v> So now we're gonna add some styles for this blog page. <v Speaker>Okay so these will be blog styles.</v> And this is the kind of thing, we're gonna put it here, but we could put it like under the HERO as well. <v Lee>Well, I mean, I have it-</v> <v Speaker>Some arbitrariness.</v> <v Lee>At the bottom I think don't I?</v> <v Speaker>Oh you do?</v> You have it at the bottom of? Because it seems like this is pretty specific. <v Lee>Yeah, I mean-</v> <v Speaker>So we've got column styles,</v> which is generic to any sort of column- <v Lee>Yeah I have this way down at the bottom (laughs).</v> <v Speaker>Okay because that's what I was thinking is like,</v> well HERO is on multiple pages. And this is very specific. All right well, so let's, let's move this down to the bottom. Yeah no, that'll be good. Right that makes sense. And we've got gallery styles. <v Lee>Yeah, exactly.</v> <v Speaker>And blog styles here.</v> All right and there are a bunch of different styles here. <v Lee>A whole lot.</v> <v ->So we're basically just gonna do this</v> all in one big swoop. <v Speaker>Okay.</v> <v Lee>So the first thing that we're gonna style</v> is the recent list. And we're just gonna align the text right. <v Speaker>Here it is.</v> Yeah, I got it. <v Lee>And then also we're gonna remove list styles.</v> <v Speaker>Okay.</v> <v Lee>And then we'll have some styles</v> that will affect the way that those links are displayed. <v Speaker>Okay.</v> All right so that move this over. Looks nicer. Just gonna get a little space here. So we're just looking at the different classes and saying, okay, well what can we do with this? This is now the list, we're gonna get rid of that dot there. And this is the kind of thing, remember, if you forget offhand how to do it, you can look up something like a reference on the web, that tells you that that's the list style. <v Lee>And we're also gonna remove the padding too.</v> Because there's built-in padding. <v Speaker>Right.</v> Okay. <v Lee>Then we're gonna add a little bit</v> of margin between list elements. There's only one list item that's on there. But if there were multiple links, you'd want a little bit of space between them. <v Speaker>Right.</v> And so here we're gonna do everything after the first one. Is that right? <v Lee>Right, yeah.</v> So we're gonna use the general sibling selector for this one. <v Speaker>General sibling, right.</v> So this won't have any effect right now. This is just for future reference. And it's the kind of thing where we could throw it down. And then if- <v Lee>I mean you can copy and paste</v> another one in there in our little stubbed thing and you can see the effect. <v Speaker>Yeah that's true.</v> It's not a bad idea. So this is a- <v Lee>No up top.</v> <v ->It's,</v> <v ->That whole thing.</v> That li. <v Speaker>Oh it's just an li, yeah's it's true.</v> Why don't we do that? Put in a couple. <v Lee>Now they're separated.</v> <v Speaker>Now we can see what the effect is, right.</v> <v Lee>Yeah it's way too crunched up.</v> And then we're what we're gonna do is we're gonna style the spans that are in there that will go underneath the links, and you can use the span element as kind of like a all-purpose element where if you need to, you can turn it into a block element or if not, you can leave it a inline element. So here we're just showing how you can use something that might not already be a block element as a block element. So we're gonna display block it, change the color to be a nice light gray as well, just to cut down the visibility of the date and time sort of thing. Since that's not the primary information that you want to convey right there. <v Speaker>Right.</v> <v Lee>And then we'll drop the size</v> just a little bit and make it italic. <v Speaker>Is it the font size?</v> <v Lee>Huh?</v> Font size, yeah. We're gonna move it down to 0.8m, make it italic and then give it a little bit of margin top just to push it away from the content. You'll notice- <v Speaker>Font style?</v> <v Lee>Yeah, font style italic.</v> You'll notice there's a lot of margin tweaking in this kind of styling. It's just the way the nature of web design. You're always trying to decide how far things should be from other things. <v Speaker>Right.</v> <v Lee>Yeah, go just a little bit more space</v> makes things a little bit nicer. So that's our sidebar. And so the next thing that we're gonna turn our attention to are the blog posts. We can actually duplicate our stubbed one also, just to make things a little bit clearer. <v Speaker>Yeah so this,</v> is this one, is it down here- <v Lee>No, it ends at blog posts.</v> <v Speaker>Oh, I see, yeah here it is.</v> Is it this? <v Lee>Yeah.</v> <v Speaker>Okay so, actually this is a trick I like,</v> which is to go up to the next one, to here and then I copy and then paste twice. So I paste it over the original and then the second one just magically appears. Let's take a look at this. <v Lee>There we go.</v> So first thing that we're gonna do is a general sibling selector to target all the blog posts that come after the first one. <v Speaker>Okay.</v> <v Lee>And we're gonna give them a nice little</v> border on top to separate each content item from each other. And we're gonna do a margin and padding top that both have the same amount, so that there's an equal amount of space on either side of the border that we're adding. <v Speaker>Okay.</v> <v Lee>And for our border,</v> instead of the solid that we've been using everywhere, we're gonna use for the first time a dotted one. <v Speaker>And we'll have it be partially transparent?</v> <v ->Yeah.</v> <v ->Is that right?</v> Let's take a look at that. We'll see how bad the spacing is, but we'll fix that. So it's quite subtle, but it's right here. And then we'll fix up the padding and margin. <v Lee>Yeah sometimes it's nice</v> to have something that's subtle like that. You don't always want to hit people over the head with a very thick, dark line that draws your attention. It's just there to add like a little bit of reinforcement that this is a separate thing. <v Speaker>Yeah let's take a look.</v> <v Lee>And there we go.</v> <v Speaker>Yeah, it's nice.</v> <v Lee>So now you can just barely see that line,</v> but it's just enough that it's there to move your eyes down and say, oh this is a new thing. <v Speaker>So it's like this.</v> <v ->Right.</v> <v ->Oh no.</v> <v Lee>That's really, it stands out too much.</v> <v Speaker>Right so.</v> <v Lee>Sometimes subtle is good.</v> So then after that what we're gonna do is, style inside of our individual blog posts and we're gonna set the post header. <v Speaker>So that's inside each of these.</v> <v Lee>Yeah.</v> So there's a header section that's inside of this that contains header information about the blog post. <v Speaker>Right.</v> <v Lee>And we're gonna set the font size to 0.8 REM.</v> So we're gonna base it off of the HTML size so that if we drop this little thing, these little blog posts in another section of the site. <v Speaker>Yeah.</v> <v Lee>Font size is static at that point.</v> <v Speaker>Right.</v> Okay. <v Lee>And we're gonna give our post header.</v> <v Speaker>So this is gonna be the header.</v> Is that the title here? <v Lee>Yeah it's all that stuff.</v> <v Speaker>Oh it's everything.</v> Oh, it's really everything in there. <v Lee>And then we're gonna give our post header</v> a margin bottom bottom of 0.5m. So now we're just directly styling that one. <v Speaker>Okay.</v> <v Lee>Oh I'm sorry 1.5m.</v> <v Speaker>Oh 1.5.</v> <v Lee>A little extra.</v> <v Speaker>So that was here?</v> <v Lee>Yes but separating in-</v> <v Speaker>Into the bottom of this.</v> Right, okay. All right. <v Speaker>And then we're gonna style</v> the image and social link and give them a little bit of margin-right. <v Speaker>Okay we'll give it to margin-right.</v> Half an m. <v Lee>And then while we're here we should.</v> <v Speaker>Yeah so this will</v> put some extra space here, right? <v Lee>Yeah.</v> <v Speaker>Yeah.</v> Okay so you said while we're here. <v Lee>We're gonna style the image too.</v> We're gonna make it something about the size of pretty close to the size of the social link. <v Speaker>Okay.</v> <v Lee>And we're gonna make it round.</v> So we're gonna give it a border radius of 99 pixels and we're gonna inline block it so that we can style it. And it will allow us to control a little bit more if we want to. And we're gonna give a height of 2.5m. <v Speaker>That's nice.</v> <v Lee>And we're gonna vertical align middle it,</v> so that it's in the middle of the line of text. Just like the social links are. <v Speaker>Okay.</v> Oh yeah look at that. It's a lot smaller. Reminds me of Twitter's recent redesign. Okay. So that's good. And it looks like there are a couple more styles for post image. <v Lee>So.</v> <v Speaker>Posts image.</v> <v Lee>Post image is insert on the page</v> with a background image. <v Speaker>Oh, I see, yeah.</v> <v Lee>And so right now that</v> doesn't have any styles associated with it, and there's nothing inside of it so it's taking up zero height. So what we're gonna do right now is inflate that by giving it a height. <v Speaker>Okay.</v> <v Lee>And making some changes for the background image.</v> So the idea here is that this is gonna be a preview of like the main image that's on a blog post up at the top. We'll have a HERO for each individual blog post. And so this is just showing that HERO on our blog index page. <v Speaker>So it's background position cover,</v> or sorry, center. <v Lee>Center, yeah.</v> <v Speaker>And it's background size cover.</v> <v Lee>Right.</v> And we're gonna give it a height of 6m's. And a little extra margin bottom. <v Speaker>Okay so let's save that and see what happened.</v> Ah, I see. So there is an image there. Now this is using an inline style. Is this because we wanna be able to have a different background image for different? <v Lee>Right so we can't-</v> <v Speaker>For posts?</v> <v Lee>We can't use Jekyll variables in the CSS.</v> <v Speaker>Ah, okay.</v> <v Lee>So we're gonna replace this background image</v> URL with a Jekyll variable. <v Speaker>So this will, yeah, I got it.</v> <v Lee>Yeah.</v> <v Speaker>So this part in here will probably</v> just will change or maybe the whole thing. <v Lee>Right.</v> <v Speaker>But so that's why we're</v> using this in-line style. We wouldn't ordinarily do this, but it's so much easier to- <v Lee>Well, it's the only way to do it.</v> <v Speaker>Use variables here.</v> <v Lee>If we want to have it</v> build off of something from the front matter. <v Speaker>Okay.</v> So I think that there is technically a way if you put front matter in a CSS file, I think that Jekyll will actually do that. <v Lee>But then you can't then have it pull from the post.</v> <v Speaker>Oh, okay, so, all right well this is</v> actually a useful little detail because it really does show that there's a use case for having these inline styles even when you know how to use a separate file like this. <v Lee>Yeah, absolutely.</v> <v Speaker>That's cool.</v> All right well this is coming together. We've got this sort of stubbed-out version, but so it seems like the next logical step is to figure out how to make these actually dynamic. So let's look into that.