Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 9

hey guys welcome to I think this is part eight or nine it's taking a little longer than I expected just because we pretty much did the HTML line-by-line so

anyway we have the home page done at least the desktop version we'll move on to the responsive stuff later so what I want to do now is move on to the other pages okay so we have our about page all

right and the first thing that you notice is that this search bar is behind the navigation so we need to deal with that so if we open up let's close the index file and open up

the above alright so we have our header with the navigation and we have section light which is what's giving it this light blue color and I also put a class of top inner and I'm using that class to

push everything down so let's go to I'm actually gonna put this in my normalize file so inside base normalize top inner right basically I'm just going to add some padding all right so for the

top we'll do 90 pixels and the bottom I want 30 pixels and that should take care of that all right so that's good next we have our main content and a sidebar actually you know what no first

we have this slogan area which should have a section primary so let me just check that out okay section primary a we haven't created that yet so let's open up our sections sass file

okay so we have all our regular primary secondary what we're gonna do is say what are we doing section primary a and what I'm gonna do here is extend section primary class section primary all right

and the only thing I'm going to do here is just add a border to the top so I'm going to use our mix in say include add border alright and the border is gonna be four pixels the color is going to be

secondary and we wanted on the top whoa okay what did I do include include add border Oh secondary color

and there we go so now we can use section primary a on any of our sections it'll give us the blue background and it'll also give us this green top border and we can make as many as we want here

all right so we could say section primary B and just change it to a bottom border all right and when I build templates I usually have a bunch of these so that the user can change the

look of it of each section all right so that's good next we have this carousel I want to do a little bit of styling to that alright so that is going to be inside of the components all right so I

believe it's a it's a class of carousel when you just check yeah we have a class of carousel and slide so I'm going to add a margin to the

bottom and then the image I want to give it a border so image adding three pixels and then let's go ahead and add a border one pixel light gray okay what I do include add border

Oh bhaijan bottom I want 20 pixels okay so looks good the above text that looks good let's see actually you know what let's let's add a heading class or a couple of them where

we can change this and the text in the border to a color so the back in typography under headings okay so heading primary is going to give us the color

let's go ahead and add a heading primary a class and extend we'll go ahead and extend heading primary and then just add excuse the mix in clewd

oh wait I start what I want we want to include and let's make this two pixels color will be primary color and I want this on the bottom and then if we go to our bout

page right here class I'm just gonna add to it heading primary a all right

so that looks good and we can actually rally you can do this for the other one the other colors as well so you can see how organized this is if

you need to change a button style or add a button style or blocks or whatever you know just where to go to find that and that's what's great about using something like sass

okay we'll do dark extend dark and this should be extent heading light all right so now we have those we have a

new set of headings all right so this list here is going to be the featured list all right so let's see where are we about and we want to find right here we have our list feature

and you just check our index file because we have that list feature there as well which is right here we want to change I want it to look like the one in the

homepage I think we just need to add these two classes all right I'm just going to add a line break to push the tab module down a little bit

I'm sorry not the tab the accordion all right so if you remember we wrapped some of these words in a class called e/m primary the who what and why so we want

to go to typography and let's see emphasis text much sure if that's how you spell emphasis but it's fine so AM primary we're just gonna say color primary color and then we'll add our

other ones as well so what I'm doing is I'm not actually gonna use like e/m dark or PM light but I'm giving I put it there just in case you know I want to customize it later or

if this is a job for clients so they can change it if they want so I'm not necessarily going to use all of these classes that I'm creating okay and there you go

so that looks good all right so this looks a mess all right basically we need to we need to make these images smaller so we need to go to our block file so modules blocks all right and we have

this wrapped let's see where are we okay so we have block light which gives it the background blocks Center and blocking image all right I think we did lock Center yeah we did you can see how

it's all centered so block image is what we need to do so we just want to set the width to a hundred percent and that should fix that image issue or not

oh we want to do block image image all right and we also want a border so let's go ahead and add another class called bloc border all right and we'll say include ad

border one pixel and for the color I'm just going to do a light gray and stream i doing hall all right we need to add that class to those blocks

save all right that looks good and let's just put a heading above here it says meet our team so the section I'm going to put it right under the row class and we'll

give this a class of page header and let's also do heading I will do the heading secondary a save all right there we go

so the testimonial is that wrapped all right so we need to add a class to that and I'm gonna add class section primary B and we didn't do that yet did we because

I want the blue background with a bottom border I thought we did that let me check so section section primary be include add border oh I didn't save that there we go

all right Oh for these blocks here we have to make them like we did on the home page primary f4 I think we had F a 6f a six and it's an F eight water let me just

check the index file so index where are we yeah we had FA 6f8 water all right so that is our boat page looks

good so services alright good a couple things to do here this looks good this copy let's just change the heading to a primary a and then this tab we want to

be primary we want the the active tab and that's content to have a blue background all right so let's close up the about page and open up services all right and go to

our heading right here you know I'm just gonna add heading primary a okay and then the tabs we already have tab primary so we just need to create that and I'm going to put that inside of the

components file all right so tab primary we want to add a background so include add background primary color and I think there's some of the other classes we

need to include shoot actually you know what we don't want to do that we want just the active tab so let me just check out this HTML all right so Li active

what I want to do is I need all these classes here so I'm gonna copy these all right and then we just want to add tab primary in front of these in front of that this one

and right here and let's just try that okay so we have the tab the active tab is blue we want this content

so tab pain so let's add a class to this tab primary tabbed pane all right so that looks good now I want to just edit the actual tab pain class

itself and give some padding and also border radius so up here tab pain will say padding 20 pixels by 10 pixels we want to add the background actually no I might want to do that we want the border

radius five pixels and then just add a margin bottom alright okay so that looks good okay so this I'm just going to keep the

default styling for the for the accordion so the quick quote okay so let's find that which is right here so we have a block primary head all

right I actually want to change this into block primary a and let me just make sure we don't already have that class actually you know what I don't want to

do that we'll keep the head because did that the background color isn't going to be primary so we can't really extend it so we'll just keep it as is and we'll create this class inside blocks so we

want lock primary head and basically we don't want to style the actual that class we want the block content actually we want the heading we want to style the heading and then the

block content because if you remember if we look at it if we look at the HTML we have a 8 heading and then a block content all right so for this for the heading I want to do some padding

and a background of primary color and a margin of 0 and font size we'll do 18 pixels alright let's take a look all right so we'll take care of that after that

spacing issue so the block content I want a border of one pixels primary color all and you'll see padding 10 pixels let's try adding some padding on the

title here on the bottom so h3 top right bottom actually we'll make it 15 all right there we go so this we need to take care of this

what we do so we gave these each one of these a class of block icon all right so we need to create that class inside of blocks so block icon

actually block icon itself isn't going to have any styling we want to do the h3 actually you know what these I want to nest so what I want to do is say block primary head h3 and then this I'm just

going to grab this and nest it inside of here and let's just make sure that that still looks right which it does not oh the h3 doesn't have an ending curly

brace all right so there we go so back to the block icon so we want to style the heading I just want to give it a padding in the margin of zero

and we have icon content and icon alright so I'll just show you real quick so we have the block icon class and then in it we have a class of icon and then a class of icon content and we just want

to float icon to the left an icon content will be to the right so icon float left and we're gonna set the width to 20% and give it a margin top of 10 pixels icon content

we're also going to float:left and it'll have a width of 70% all right and now we just need to add the size classes to this and these down here so services okay right now we have FA 3

let's try a face 6 all right so that that's good enough so we just want to change all these to a six and then down here at the four column

divs we're going to change those to a six and also add a fade border okay looks good so we have the above actually we want to

make sure that the correct menu item is highlighted so unserviceable take class active off of the homepage put it on services and then same thing with about

all right so we're just we're almost there okay so next we're gonna do the blog and the contact page and we should be all set

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