Build An HTML5 Template With Bootstrap and SASS - Part 10

Key Takeaways

okay so we're almost there guys um what we're going to do in this video is the blog okay we're going to do the blog and the contact page all right um so what I want to do is add another scss file uh in the layouts folder called blog and that's where we'll put our blog stuff okay so let's open up the blog HTML page as well okay we'll close up these for now all right so if we go down to our posts we have a div with the class of blog post and then a div with the class of post meta all right so let's start with the blog post okay so blog post um I want to add a border to the top the right and the left all right so let's go ahead and include add border so we're going to have one pixel of light gray on let me just see I think it's left right um not variables mixins Okay add border um position is right left all right so right left and then I also want to do one for the top okay and then padding will be 15 pixels okay this doesn't look like it's reading blog post huh blog post oh we didn't in we need to include our our blog file in our main scss file so down here blog all right there we go so the image uh the blog image let's see image class okay the class has uh blog featured so let's do that um let me set the width to 100% is that not sure if that's what I want no I actually want it to float let's float to the left and then give it a margin right of 15 pixels all right so for the size uh if we look at the HTML we gave it a class of image SM for image small so what I want to do is uh create some image size classes and I'm going to do that in my normalized file okay so we'll do imgm we have a width of 200 pixels and you can create some other ones okay I like to do xsm for 100 pixels and image large we'll do 400 image extra large we'll say I don't know 700 all right so there we go so now I want to do the post meta which is this down here so I'm going to go back to my blog scss and do Post meta and give it a background of a light gray color padding do 10 on the top 10 five and 10 and then we want it to add a border of one pixel um gray and then a margin bottom of 20 pixels all right so let's see what that looks like all right so that looks good I don't like how this heading is pushed down so what it's page header is what's controlling that um so let me just inside a blog post we'll say h two page header um what was it a padding or margin margin top say margin top 5 pixels and we should put an important tag all right there we go so that looks really good uh but I do want to add some padding to the bottom here and also we need to read more link so in the HTML let's go ahead and add a link so in the post meta and I want this link to float to the right so I'm going to add a class of Pole right which is a bootstrap class and let's just add it to all the posts all right and then just let's add a little padding to the bottom in the post meta so top right bottom all right so that's good so over here um I want the tab to have uh a class of tab light to give it that light blue color all right so back in modules components going to copy this and we just want to change this to light change all instances of primary to light all right and there we go we might as well do that for the other colors as well all right and then this one will be dark okay so next we have this featured video all right so we're going to um let me see if I gave it a class it obviously has the primary head class okay both of these do but I want to make uh a class called Block video that's going to contain the video inside of the block and let me just check and see if I added it already Okay so tabs right here so we have block primary head with no padding and actually all we need to do is is grab the I frame and give it a width so what do I want to do that I want to do that in blocks so inside of this block class let's do iframe with 100% all right that didn't work actually I'll just change the size of the video yeah okay so right here this iframe let's change it to 200 208 all right and then the height we'll say 175 maybe a little higher 200 make it basically make it even all right so that's good recent comments uh we want these images to be contained I think this has a class of list comments yeah UL list comments so we'll do this in the typography under this lists so list comments image I'm going to do a width of 100 pixels for the list items we'll do a padding and we want to add uh border bottom all right we don't want the last one to have a border though so we'll use the pseudo class last child okay let's check it out and looks like our UL is getting some padding or margin so we need to just zero that out there we go all right so that looks good uh down here we have these icons that we need to fix like we did with the other pages so we just want to change it to fa6 and also add fa border all right so that's it for the blog page okay so last thing we need to do is the contact page all right we already have actually we already did it yeah we already did it but we need to um change these icons so contact there we go all right so that looks good we just want to um in blog and contact we want to change the active link okay so in contact we want to take uh class active off of the homepage and put it on the contact all right and then on the blog page put it onto the blog link okay blog contact good all right so looks pretty good so what I want to do next is just um it is responsive bootstrap is responsive at its core um but there's just some minor changes that we'll need to do to make it look good on a mobile device so we'll do that in the last video