Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 8

hey guys welcome back in this video I want to do a few things first of all what I want to do is make these icons bigger all right before we get into

styling these blocks so we're going to create a couple classes that will allow us to have the icons vary in size all right so I'm gonna go to my typography s CSS file and we're going to create some

classes all right so FA – and now for these icons you want to use font size all right so FA – we'll say – actually we'll do it by pixels we'll do 18 pixels for

FA – and then I'm just going to copy this okay so we'll have FA 3 which will be 24 if a four will do twenty-seven fa5 let's say 35 and then fa 6 I'll do

40 alright now if we go back to the the index page and we want the four column layout which is right here we already put this the class of FA 4 all right so let's check that out

alright there's still too small let's try fa5 we'll just check one of them out first are still too small let's try FA six

all right so that's good because we're actually going to add some more styling we want to have a border we're going to change the color and stuff so I'm just going to change all these to FA six

oops all right and they also have a class of FA primary so we want to create that all right so for this we're going to have the color is gonna be the primary

color okay we're going to have a border with the primary color actually we'll just use our mixin say include pad border and that will be one pixel and the color will be primary and then we

want it to be all we want it on all sides and let's set the border radius we can use our mixin for that as well so include border-radius and we just want to punch in five pixels

all right and then finally we want some padding I will do 1350 all right so let's check that out see what that looks like alright something is not right here

color include only another D here okay so that looks better I want to decrease the padding a little bit so you know what let's set a width start with

50 pixels okay let's try 80 pixels because I want them all to be the same with that's a little too much let's try 70

all right that's good so I also actually going to do a little margin bottom to it to margin bottom 10 pixels and I want the the headings here to be

the primary color as well those it's so those are H threes so h3 let's go ahead we're going to create a class called heading primary alright so I'm going to copy that class

I want to put that here here and here alright now it's not gonna do anything yet we're gonna create that class so what we want to do is go to typography and let me just add some

comments here so headings and icons and lists all right so headings we want heading primary and we want to change the back I'm sorry just the color about the background so

color is going to be primary and we might as well create our other versions as well secondary light and dark okay this will be lights all right

all right so that looks good so now we can move on to this area we want to do the list the list we need to change the color and size of the icon alright so for the size I'm gonna just

use one of the FA classes that we created all right so we have FA check and we'll change it to FA 6 let me just see what that looks like alright so that's good so we want to add

that class to all of these all right we also want to change the color to all right you know what eff a primary I

don't want that class to take care of the border because I want to be able to use it without the border so what I'm gonna do is create another class called FA border all right and then I'm going

to take this this the width and Marge basically everything except for the color and put that in there that way we can use F a primary anywhere since we did that we're going

to lose our styling that we just did so for these we want to go and just add that border class to them okay so a PA will say F a border because you wanted you want to make it

so that you can reuse your classes all right so there we go that's all set and then for these we can now add F a primary oops

all right good so now let's do the text here which is wrapped in a span you can see right here we have a span tag around there so that's what we'll use to do the CSS for

those for the words okay so let's go up to list okay we have a list off feature let's go in there and just say span and what we're going to do is vertical align look vertical align to the top and

padding top we're going to do nine pixels and then font size we are going to use a percentage so we're going to say home 20% okay

I do want to push the text actually you know what we're gonna grab the icon for the list feature so inside of still nested inside the list feature we want to just put in

hi and I'm going to set a margin top to negative nine pixels and then a margin right to five pixels hmm let's try and change the slide height I

see what that does let's try changing to much larger all right that looks good okay so that's good for the list for the list feature now we want the button if

we look at the original the button looks like this okay so this is going to be a primary button I don't think that we created any buttons yet we didn't so let's go ahead and do that just say

button actually put some comment here okay we want a button primary so we're going to set that color to primary color and let's add a white border to it so we can use our mix in we want you to

include add border and we'll say two pixels and the color is going to be white and we want it all around all right now we'll go back into index and go to that button oh we already have

button primary so reload and it didn't change let's try it try adding an important tag oh whoa we need to do the background not the actual text color so backgrounds

actually let's just use our mix in so we'll say and include include add background primary color there we go so the hover state I want to change that

primary once you primary hover now I'm going to show you another great feature of sass and that is that we can we can lighten or darken the current color or any color

all right so we can actually say background and then you can do lighten and then we just want to surround the color we want to lighten which will be primary color and we have to put in a

percentage as well so we'll say 10% so if we reload you can see when we hover the color gets brighter let's actually change that border as well we'll just keep the same white border

all right so that's all it's a really nice feature to be able to do that and you can also darken all right so that that that can be really really

helpful let's put it let's actually give you know what let's just put a line break in there under the list okay now I want to add the padding class to this because I want this to be I want

a little more padding on the top and bottom we have 30 pixels as the default for a section if we go to sections or is it you can see a section has 30 pixels on the top and bottom so I want to just

go to normalize all right and I want a class called extra pad all right and what that's gonna do is just add just do forty pixels instead of 30

so padding bottom forty pixels all right and then if we go into index and just add that to the section all right so that looks a little better okay now for this this section here

we need to make this image smaller what we want to do is set the width to a hundred percent so it only takes up its container alright so see what do we want to do this alright let's do it here

image dot device with 100% it actually should already be done imageclass device I phone huh

with a hundred percent all right I'm actually going to set this image less than 100 percent so let's give it a unique class so we'll still have device

and then we'll have let's just say device small all right and then we'll go to base image dot device small and I'm going to set the width to 70%

all right and now I want to have a negative margin at the bottom so that I can bring this down and make it look like it's coming out of where this the section ends all right so

I'm going to do margin-bottom negative let me see 34 pixels ah let's to actually know what I want to add the extra padding on this section as

well so in the index file we have this it's right here we're going to add extra hat all right so I need to actually go down a little more here so let's try negative

where are we let's try negative 36 No 38 nope 40 all right good perfect and this actually

looks good over here we don't really need to do anything to this the text all right so that looks good our home page is just about done we just need to do the footer so let's do that and what I'm

gonna close some of these I know I'm probably confusing you with all these open files I apologize I'll just gonna close them all and then open up what we need

all right so we want our index HTML and our s CSS we want to go to layouts and then footer alright so this is where I'm gonna put all the footer code one second all right so our footer

our footer has a class a footer main alright so what I want to do here is set the background to our dark color and let me just open the variables up variables as CSS and

for our dot color I'm going to change it to a kind of dark greenish color okay so for our footer will be dark color and text color will be white actually we don't we don't need to do that if we use

our mixin so let's do that all right so add background you need to say include add background and next let's do a border I want to add a border to the top with the secondary color so

we'll say include add border and we want this to be what do I want this to be five pixels color will be secondary color and then we want this on the top all right I'm going to set a minimum

height on the footer to 200 pixels padding 30 pixels on the top and bottom and let's say I want to set the z-index which isn't really necessary because we have the the phone image cut off right

here but just in case it went down further we want the footer to have a higher Z index than this image all right so I'm just going to set the Z index to 100

and that should be good let's check that out all right I want to change the links the color too I want to change it to white actually we

want to do we can nest right here so a color is going to be white all right I'm going to take away the margin and padding of the list so it's kind of so it's flush with the header so

you will there we go and I'm going to change the line height of the list items make it a little bigger so line Heights I will say 1.8

and just to make sure we have list-style:none all right so it looks pretty good our home page is now done so in the next video

we will move on to the other pages and after that we want to make sure that the template is totally responsive right now it should look pretty good if we shrink this all right so our menu okay a

responsive menu is good that looks good showcase this will probably Center these boxes look good probably Center this too and you can see the image is just placed under all this

we'll have to deal with as well probably Center it and move it up and footer I don't know maybe add some spacing between these lists all right and then we should be done so I will see

you in the next 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