Build An HTML5 Template With Bootstrap and SASS - Part 7

Key Takeaways

all right so in this video we're going to start with the Showcase area which is going to go directly under the navbar all right and you can see the content is smooshed under there and that's because that doesn't belong there if you look at this you can see that the the Showcase is supposed to go behind it okay so we're going to do that next and the Showcase is a section so I'm going to go to sections. sccss all right and let's just say sections and what we want is section showcase okay so for this we're going to set a height now I'm going to make this a variable okay so I'm going to make this a variable called showcase height and then for the background save background um you URL no repeat top center now the URL I'm actually going to make a variable as well all right so we're going to say dot dot because we want to go back one and then actually you know what we'll only have the image um no we'll have the path included as well so we'll say slash and then showcase image I think that'll work and then in variables showcase height which is going to be 400 pixels showcase image is going to be um IMG slash I think it's showcase. jpeg let me check yeah so let's see if that works whoa okay so we're getting some kind of error here uh expected selector or at rule was jpeg maybe I need quotes around this no you can see that there is an error here as well but it's behind the nav bar image showcase you know I'm going to do is get rid of that and just have showcase image in there I don't think we can mix like that so in variables I'm just going to change this to the full path and that should work I think okay we're not getting an error but I don't see the image showcase oh we just have the class showcase we get to change that so we have to go into our index HTML page and where is it section we have class showcase this should be section showcase all right so there's the image all right so that looks good we need to work with this content now that's inside of it and if you remember that has a a div CL a class of showcase content so section showcase I'm just going to do some nesting here showcase content going to do padding 90 15 and we want to text Al line to the center all right the H1 here I want to be the primary color so I'll just say H1 primary color all right and got to save it all right so looks good let's move it down a little more so padding let's try 110 all right that looks good all right so we have the the top part of our homepage done now we're going to do this section here which has the input all right so first of all we're going to create the section light actually you know what we'll create all the main main section uh color classes so we have primary and actually you know what we need to set a default um padding for our sections so I'm going to do that up at the top okay just all section tags themselves I want to have 30 pixels padding on the top and bottom all right and then section primary is going to have a background actually I'm going to do a mix in um include add background and let's see color actually wait a minute primary color all right and then in mixins copy this color excuse me and then back background will be whatever's passed in and I also if the if the background is primary section I'm sorry primary secondary or dark then I want to have a white text I want to have white text if it's the light color um obviously we don't want white text so let's do a little conditional here and we'll say if color is equal to primary color then the text will be white secondary actually you know what this is we don't we can shorten this up by saying if the color is light color then we want the color to be let's say dark gray and then we'll just say else color will be white okay so now in these sections include add background primary color Okay so the reason I did that is basically now we don't have to have the text color as well we can just add the background and the text color will change and this one was section secondary okay that'll take the secondary color light and then dark all right okay so now what happened was we added the color for the background for Section light and also we added padding on the top and bottom for all sections so now you can see that they're all spaced out much better all right so we're getting there and just you can see just by that little amount of CSS we' have totally changed this from a mess into uh a good-look template all right so now we want to work on this search area and I wasn't going to but I'm actually going to create uh inside of modules I'm going to create a form a forms scss file CU I forgot that that uh search form is going to have quite a bit of styling so forms and then you just want to make sure that you include it in your main all right so search box so it has a class of search and we're going to set the width to 100% we want it to take up the whole width of its C column and then the H3 actually we don't we we want to do it the SAS way and set a margin top to zero and a padding top to zero okay it doesn't look any different yet all right now we want to do the input so we should be able to say input and then using CSS 3 we can actually focus on a certain type which is going to be search that's the type we used and we'll set border to zero okay height is going to be 50 pixels width width we're going to do 80% because this template is is responsive so I want it to uh we're going to use a lot of flexible width so border will be 2 pixels solid and will be the primary color and then font size you can see it's quite a bit of styling here 18 pixels and we'll do padding left uh 10 pixels and padding bottom five pixels so let's check that out all right that looks good now we need to do the button okay button we want to set border to zero Z we want to set background To None padding to zero and we want a vertical align to the top and then just set a margin left of -4 pixels and that's so it does it looks like it's all one unit uh see we want to get rid of this space okay so that looks good all all right so moving along now we're going to do this uh section with the three blocks um now this is where we need to look at margin and padding because if we look at the finished template this section with the three blocks and this one with the four blocks um don't have a background so it looks a little funny because they're they're uh spaced far apart you know um so what we want to do actually that doesn't look you know what let's come back to that let's do the blocks themselves first and then we'll take a look at the sections all right cuz we know the sections aren't going to have a background they're going to be white so let's go to uh modules blocks so we're going to have a core block style oops and that's going to have padding of 15 pixels and also a margin on the bottom of 15 pixels okay block H3 uh margin top zero padding top zero all right then block primary and this is where I'm going to use another feature I'm going to use the extend feature okay so we're going to say at extend block all right so what this is going to do is take all the properties from block and add it to block primary all right and then we'll just uh include our mix in for the background okay so let's save that and there's our primary blocks okay so we'll do secondary light and dark and you could see how much cleaner this is than if you were to use just regular CSS it's cleaner and it's much more manageable all right so let's see that okay so there's our blocks so next one I want to do is block Center okay so for this we're just going to align to the center and we're going to add an important tag on this as well all right now if we look at the homepage you can see what I was talking about is that this section in this section they have the padding okay but there's no background color to kind of take the place of one of the sections padding if that makes sense uh basically this is too wide all right so what I want to do is create um some classes to deal with things like this so I'm going to go to my normalize file um where is it base normalize and I'm going to add a class called No notepad top all right and basically I'm just going to set padding top to Z all right and then go to my index page and find the four column so I want this here I want this section and I'm going to add a class I'm going to add that class called no pad top okay and then if we reload it moves it up all right so there's a million different ways that you can deal with things like that um that's just what I like to do um we'll probably add some more of those kinds of classes just to deal with uh spacing issues all right so let's go down here and we need to take care of this this image is way too big now for the image there's no uh great place to put this in this kind of structure um so I'm just going to put it in my base file all right so has a class of devices um I'm sorry device image actually it should be the other way around image. device and I'm going to set the width to 100% And that's going to be 100% of its container okay because it's contained in a six column div so it shrunk instead of popping out of it okay so for this this list item um I'm going to do my list CSS inside of my uh typography file so all right so lists we want UL Dot feature uh actually we want ul. list and I'm going to give it a margin bottom of 30 pixels actually we don't need the UL all right and then list feature I'm going to extend list all right and I'm going to set margin to zero padding zero and the width I'm going to set to 80% okay so now we want the LI tags of list feature and to set the line height line height to 2.2 em and setad of Border bottom to gray one pixel actually you know what we can use our mix in add border and the border is going to be one pixel whoops one pixel the color and the position will be bottom okay now I want I don't want the last list item to have a border on the bottom so I'm going to use a pseudo class called last child okay so we can say Li lastchild border zero okay let's see what else do I need here okay so for the span the list has a span of wrapped around the text and actually you know what we need to do these icons the sizing of these so let's actually pause on the on the uh lists and and go to the icons and I think I'm going to do that in the next video because uh we're running out of time all right so we'll do the icons come back to the list and then we'll move on