Build An HTML5 Template With Bootstrap and SASS - Part 8

Key Takeaways

hey guys welcome back uh 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 uh that will allow us to um have the icons vary in size all right so I'm going to go to my typography scss file and we're going to create some classes all right so fa 2 and now for these icons you want to use font size all right so fa2 will'll say uh two actually we'll do it by pixels um we'll do 18 pixels for fa2 and then I'm just going to copy this okay so we'll have fa3 which will be 24 fa A4 uh we'll do 27 fa5 uh let's say 35 and then fa6 we'll do to uh 40 all right now if we go back to the the index page and we want the four column layout which is right here uh we already put this the class of fa4 all right so let's check that out all right they're still too small um let's try fa5 we'll just check one of them out first uh still too small let's try fa6 all right so that's good uh 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 um so I'm just going to change all these to fa6 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 going to be the primary color okay we're going to have a border with the primary color actually we'll just use our our mix in say include add border and that will be uh 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 mix in for that as well so include order radius and we just want to punch in five pixels all right and then finally we want some padding uh we'll do 13 15 all right so let's check that out see what that looks like all right something is not right here color include oh we need another D here okay so that looks better um I want to I'm going to decrease the padding a little bit actually you know what let's set a width we'll start with 50 pixels okay let's try 80 pixels because I want them all to be the same width uh that's a little too much let's try 70 all right that's good so I also actually I'm going to do a little margin bottom to it too say margin bottom 10 pixels and I want the the headings here to be the primary color as well those so those are h3s so H3 let's go ahead we're going to create a class called heading primary all right so I'm going to copy that class I want to put that here here and here all right now it's not going to do anything yet we're going to create that class so what we want to do is go to typography and let me just add some comments here say 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 not 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 light all right all right so that looks good so now we can move on to uh this area uh we want to do the list uh the list we need to change the color and size of the icon all right so for the size I'm going to just uh use one of the fa classes that we created all right so so we have fa check and we'll change it to fa6 let me just see what that looks like all right 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 um all right you know what fa 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 going to do is create another class called uh fa border all right and then I'm going to take this this uh the width and margin basically everything except for the color and put that in there that way we can use fa primary anywhere um since we did that we're going to lose our styling that we just did so for these uh we want to go and just add that border class to them okay so up here we'll say fa border cuz you want it 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 fa primary oops all right good so now let's do the uh 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 um do the CSS for those for the words okay so let's go up to list okay we have list. feature let's go in there and just say span and what we're going to do is vertical align vertical align to the top and padding top we're going to do 9 pixels and then font size we are going to use a percentage so we're going to say 120% okay I do want to push the text um actually you know what we're going to grab the icon for the list feature so inside of still nested inside the list feature we want to just put an i and I'm going to set a margin top to 9 pixels and then a margin right to five pixels H uh let's try and change this line height me see what that does let's try changing it to much larger all right that looks good okay so that's good for the L for the list feature now we want the button if we look at the original uh 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 we'll say button actually let me 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 um what we want to do 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 let's try adding an important tag oh oh oh we need to do the background not the actual text color so background actually let's just use our mix in so we'll say and include uh include add background primary color there we go so the hover State I want to change that primary I want to do primary hover now I'm going to show you another uh great feature of SAS and that is that we can we can lighten or darken the current color or or any color all right so we can actually say background and then we can do lighten and then we just want to surround the 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 our it's a really nice feature um to be able to do that and you can also darken all right so that that that can be really really helpful um 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 um add add the uh padding class to this because I want this to be I want a little more padding on the top and bottom um we have 30 pixels as the default for a section if we go to sections where is it you can see a section has 30 pixels on the top and bottom um so I want to just go to normalize all right and I want a class called extra pad all right and what that's going to do is just add uh just do 40 pixels instead of 30 so padding bottom 40 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 100% so it only takes up its container all right so let's see what do we want to do this all right let's do it here image. device with 100% it actually should already be done image class device iPhone huh with 100% all right I'm actually going to set this image less than 100% 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. 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 uh where this the section ends all right so um we're going to do margin bottom negative um let me see 34 pixels uh let's do actually you 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 pad all right so I need to actually go down a little more here so let's try negative where are we let's try 36 nope 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 homepage is just about done we just need to do the footer so let's do that and what I'm going to close some of these I know I'm probably confusing you with all these open files I apologize I'm just going to close them all and then open up what we need all right so we want our index HTML and our scss we want to go to layouts and then footer all right so this is where we're going to put all the footer code one second all right so our footer our footer has a class of footer Main all right so what I want to do here is set the background to our dark color and let me just open the variables up variables scss 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 uh text color will be white actually we don't we don't need to do that if we use our mix in so let's do that all right so add background we 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 um padding 30 pixels on the top and bottom and uh let's see I want to set the zindex which isn't really necessary because we have the the phone image cut off right here but just in case it it went down further uh 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 um I want to change the links the color to 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 um 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 UL okay there we go and I'm going to change the line height of the list items make it a little bigger so line height uh we'll say 1.8 and just to make sure we have list style none all right so that looks pretty good our homepage is now done so in the next video um we will move on to the other pages and after that we want to make sure that the template is totally responsive um right now it should look pretty good if we shrink this all right so our menu okay our responsive menu is good that looks good showcase this will probably Center these boxes look good probably Center this too uh and you can see the image is just placed under oh this we'll have to deal with as well um 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