Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 7

alright so in this video we're going to start with the showcase area which is going to go directly under the nav bar alright and you can see the content is

smushed under there and that's because that doesn't belong there if you look at this you can see that 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 two sections SCSS alright 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 say background um URL

no repeat top-center now the URL I'm actually going to make a variable as well all right so I'm going to say dot dot because we want to go back one and then actually you know what

we'll only have the image now we'll have the path included as well so we'll say slash and then showcase image think that'll work and then in variables

showcase height which is going to be 400 pixels showcase image is gonna be IMG / I think it's showcase dot 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 jpg

maybe I need quotes around this no you can see that there is an error here as well what it's behind the nav bar – in 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 towards its section we have class showcase there should be

section showcase alright so there's the image alright so that looks good we need to work with this content now that's inside of it and if you remember that has a div class a

class of showcase content so section showcase I'm just going to do some nesting here showcase content and do padding 90 fifteen and we want to text the line to

the center all right the h1 here I want to be the primary color so I'll just say each one

I'm very color all right and I gotta save it all right so it 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 know what we'll create all the main section color classes so we have primary and actually you know what we need to set a default

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 include my background

let's see in color actually my primary color all right and then in mix-ins copy this color

use me and then background we'll be whatever is 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 a white text if it's the light color 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 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 we'll be white

okay so now in the 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 will 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 a good looking 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 inside of modules I'm going to

create a form a forms a CSS file because I forgot that that 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 mane

all right so search box so as 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 column and then the h3 actually we don't we want to do it the Sasse way instead of margin top-20 and a padding top to zero

okay it doesn't look any different yet alright now we want to do the input so we should be able to say input and then using css3 we can actually focus on a certain type which is going to be search

that's the type we used and we'll set water to zero okay height is going to be fifty pixels width width we're going to do 80% because this template is responsive so I

want it to we're going to use a lot of flexible widths so water will be two pixels solid and will be the primary color and then font size see it's quite a bit of styling here 18 pixels

and we'll do padding-left 10 pixels and padding-bottom 5 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 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 negative four pixels and

that's so it does it looks like it's all one unit so you want to get rid of this space okay so that looks good all right so moving along now we're going to do this 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 in this one with the four blocks don't have a background so it looks a little funny because they're they're spaced far apart you know 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 because we know the sections aren't going to have a

background they're going to be white so let's go to modules blocks so we're going to have a core block style and that's going to have padding of 15 pixels and also a margin on the

bottom of 15 pixels okay block h3 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 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 can see how much cleaner this is then 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 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 basically this is too wide all right so what I want to do is create some classes to deal with things

like that so I'm going to go to my normalize file or is it base normalize and I'm going to add a class called No no pad top alright basically I'm just going to set padding top to zero 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 alright so there's a million different ways that you can deal with things like that that's just what I like to do we'll probably add some more of

those kinds of classes just to deal with 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 great place

to put this in this kind of structure so I'm just going to put it in my base file alright so has a class of devices I'm sorry device image actually it should be

the other way around image dot device and I'm going to set the width to a hundred percent that's going to be a hundred percent of its container okay because it's contained in a six column

div so it's shrunk instead of popping out of it okay so for this this list item I'm going to do my list CSS inside of my typography file so all right

so lists we want you l thought feature actually we want you l dot list 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 we'll set margin to 0 padding:0 and with 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 22.2 am instead of border bottom two gray one pixel actually you know what we can use our mixin

at 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 last child border:0 okay 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 lists and go to the icons

and I think I'm going to do that in the next video because I'm running out of time alright so we'll do the icons come back to the list and then we'll move on

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