Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 10

okay so we're almost there guys we're going to do in this video is the blog okay I'm going to do the blog and the contact page alright so what I want to

do is add another s CSS file in the layouts folder called blog and that's what 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 it div with the class of post meta alright so let's start with

the blog post okay so blog post I want to add a border to the top the right in the left alright so let's go ahead and include that border so we're gonna have one pixel of

light gray on let me just say I think it's left right about variables mix-ins okay add water

position is right left all right so right left and then I'm 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 blog post oh we didn't include we need to include our our blog file in our main s CSS file so down here block all right

here we go so the image the blog image let's see image class okay the class has a blog featured so let's do that

we set the width to a hundred percent is that not sure if that's what I want No I actually wanted to float let's float to the left and then give it

a margin right of 15 pixels all right so for the size if we look at the HTML we gave it a class of image SM for image small so what I want to do is create some image size classes and I'm

going to do that in my normalize file okay so we'll do i am g sm will have a width of 200 pixels and you can create some other ones okay I like to do x sm for 100 pixels and image large will do

400 image extra-large will say oh 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 we give it a background of a light gray color patting do 10 on the top 10 5 and 10 and then we want to add a border of one

pixel 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 its page header is what's controlling that so let me just inside a blog post will say h2 page header was it a padding or

margin margin top say margin top five pixels and we should put an important act all right there we go so that looks really good

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 hold right which is a bootstrap class 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 I want the tab to have a class of tab light to give it that light blue color alright so back in modules

components 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 alright so we're going to 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 a class called bloc 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 he needs to do is is grab the iframe and give it a width so what do I want to do that I'm going to do that in blocks

so inside of this block class let's do i frame with 100% all right that didn't work actually I'll just change the size of the video

yeah okay so right here this I frame let's change it to 200 208 all right and in 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 we want these images to be contained I think this has a class of list comments

yeah ul list comments so do this in the typography under this lists so this comments image I'm going to do a width of 100 pixels for the list items

do padding and we want to add 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 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 FA six and also add FA order

all right so that's it for the blog page okay so last thing we need to do is the contact page alright we already have actually already did it yeah we already did it but we need to change these icons

so contact there you go all right so that looks good you just want to in blog and contact we want to change the active link okay so

in contact we want to take class active off of the homepage and put it on the contact all right and then in a blog page put it on to the blog link okay blog

contact good all right so looks pretty good so what I want to do next is just it is responsive bootstrap is responsive at its core 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

In this mini-series we will build a complete HTML5 Bootstrap template with SASS. It is a bit long but that is because it is from scratch and typed out line by line.

—————————————————————————————

Project Files – https://github.com/bradtraversy/skyapp_bootstrap

For video courses like this check out – http://codeskillet.com