Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 6

hey guys alright we're finally to the CSS part of this series I realize that the HTML took quite a bit of time you know I could have just copy and pasted

but I kind of just want to go through it line by line just so you can see exactly what's going on alright so what we're going to do is start our CSS and we're going to work inside of our sass files

or our s CSS files okay so I want to start with the actual body and some of the base styles alright so what I want to do is open up actually just start over with this so if

you go to your S CSS folder and then base and then base dot CS CSS that's what we're going to start and start with the body alright so font family we're going to

use this I'm not exactly sure how to pronounce it it's SC g OE UI so c go say go I'm not sure how you say it alright and then we're going to also include SE goe WP

and also regular all right and then sans-serif okay so that's our font I want to set the font size now I should mention right now I'm not going to I'm not going to do the variables yet

we're just going to do our just our regular CSS and then we'll work in the variables after all right because I'm going to have a variable for the font size maybe even for the font family but

right now I'm just going to just put it right in line height will do 1.7 m and then the color on the base color will be great okay so let's just see if that pain any

difference okay you can see the font change the color changed and remember we're not in the CSS file we're in our s CSS file now you need to have Scout going okay your project should have this

little square stop icon all right if you don't have this going it's not going to compile into the CSS file all right so links I just want to set a color and that's going to be that bluish

color or the primary color which is zero zero a FF zero all right lists okay list I want to set I don't want any bullets so with style none

and CEO else I want to set actually I'm also going to open the normalize because I want to set my headings to not have any margin on the

top h2 h3 h4 all right and let me just show you the CSS file because it gets generated whenever we save the s CSS file alright so you can

see we have our H ones from our normalize s CSS file and then the body is from the base and you can see it has the comments and the line numbers alright and that's because we have it on

development mode if we change it to production mode we won't get that all right so next let's do one else do I have here inputs I want to set the border-radius

to zero okay I don't want rounded edges on the forms and stuff so input also text area and buttons order radius zero actually you know what I think I will do the variables and the mix-ins and all

that because it might be too much of a pain to go back after and look for where we need to put them so let's do that all right so in the SCSS ace folder I want to open up variables in mix-ins

okay so variables let's set like font colors we'll have um background colors all right so flaunt colors

we'll say base font okay now when you use variables you need to use a dollar sign in the beginning all right base font size I'm sorry it shouldn't be in equals you should have a colon will

be 15 pixels all right so now we should be able to go to base and then instead of having 15 pixels here we'll say base font size okay so let's check that out

and just to make sure that it's definitely working let's try and change it to 25 all right so you can see now it's working all right so that's the base

font size let's do base font family and I'm just going to grab this try that all right is that right those that the color is at

the right font we try changing this okay all right right all right so we get font size font family I think that's good you know I

mean I don't like to have too many variables not really any reason for that but some of it I just think that some developers is just unneeded to have you know lines and lines of variables

especially when you when you know you're not going to be changing it the base color font color I want to do these font color all right so for the background let's do

primary color okay and that's going to be this here so I can just replace this here with primary color okay so we'll do a secondary color and

that's going to be that greenish color so I'll paste that hexadecimal value in alright light color that's going to be that light light blue and then we'll do a dark color and I'll

set that to really dark gray all right so that looks good so now you can you can use these variables throughout your site and if you ever want to change the

theme colors you just change them here and they'll iterate through your entire website all right so that's definitely one of the best things about using a preprocessor

all right so mix-ins we're not going to have very many I do want to have one for border-radius because when you do this when you are setup border-radius you should always

use the prefix at least for Mozilla and Chrome for WebKit so you'd say Moz order radius zero and also WebKit order radius zero all right so I instead of doing this

will create a mix in so let me just copy this I'll actually I'll cut it go to mix-ins and what we need to do is say at mixing in the name of it I'm just going to call

it border-radius all right and then it's going to take a parameter which is going to be the number of pixels or the radius and then I'm going to paste this code in and just

change this here to radius so it works just like a function all right so now back in my base I can just say include whoops yeah border-radius and we can just slip we can just throw

in here zero pixels all right so let's make sure we have no errors all right so when you have an error it'll actually show you in the browser all right which is kind of cool to have a CSS error

handler all right so moving on for bass like that's pretty good for normalized I just want to add a margin top for page headers page header say margin top 30 pixels okay so save that

so for now I'm going to get out of the base file and move on to the navbar so we want to go in layouts nav all right so for the core navbar class we're going

to overwrite a lot of the bootstrap styles all right so we're going to set a width of 90 percent margin Auto and we'll get what get into nesting here as well which is another great feature of

sass margin Auto we're going to set a border right and actually I like to use a mixin for borders so let's do that and put a little comment up here all your CSS from all these files gets

thrown in the main dot CSS file so you want to have you want to have a commented as best as you can let's see so we'll do mixin add border and this will take let's see

we'll say size size color and position and we're going to use some if statements here some if-else statements okay so we're going to say if actually you know what we don't need parentheses

here we're just going to say if position is equal to all then say border sighs oops sighs solid color now you could also add

the border style in the parameters but I'm not going to do that because we're pretty much only using solids so sighs solid color all right and then we're going to say else if position equals

top we're top size solid color alright so basically I'm going to do that for the all the positions bottom

if position is bottom then we're going to say border bottom position is right left left and you could keep going and say

top bottom actually you know what we are going to do that say if position equals top bottom because we're going to do that with some of the sections I think

actually I'll just copy this and then for this will say if position is right left and it will just change this all right so I think that takes care of

all situations so now we want to what do we want to do you want a border on the right and the left of the navbar so we'll say include ad border and the first one is going to be size so we'll

say one pixel okay next is going to be color in this case I'm just going to use a grayish all right and then the position which is going to be right left

okay I'm going to change the minimum height by default I think it's 50 I'm going to sync change it to 60 and background is going to be white and

we want to give it a margin bottom of 30 pixels all right so something isn't right did we include the nav in the main file

layouts huh in valid CSS after else–if expected okay so we have an error in our code it's in the mix-ins line 13 house if

position equals top ah oh you know what we need to have an @ symbol for all these else ifs alright let's see if that works

all right there we go so our navigation does look different okay we have this this black border at the bottom excuse me I want to change that color so I think I can just say

border color here we go all right so that's the navbar itself now we're going to do the links now this is where we can use nesting normally you would say navbar

a-alright which is going to cover the links in the navbar class but with sass you can go right into the navbar class and just say a-all right and this is going to give us the same result as this

which is really cool because this is how it's structured in the HTML okay so we're going to change the color the color of the links is going to be the primary color

odd size I'm going to do a letter spacing of negative 0.5 pixels and padding-bottom we'll do 24 and padding-top we'll do 20

all right save all right now I also want to do the hover actually you know what

I want to grab I'm going to do an f12 to see to use Chrome tools and just check out this right here I need this class well I'm sorry these classes and I should be able to put these

actually I want these out of this and I'm going to change the background to the primary color and then the actual color will be white okay so this is my hover colors this

active one I also want to change that oh so I'm going to grab all this then as well save look

there we go alright so now we have that blue hover so my links aren't reading some of these styles it's not overriding the default bootstrap CSS so we need to add some

important tags okay so for the color just add important and we're gonna do it for the padding as well because it doesn't look like it's taking

all right there we go this color here is a little messed up okay I also want to add important to these there we go

all right so I think I'm going to stop here and in the next part we will work on the showcase and you can see that the content goes behind the nav bar and it's supposed to

do that if you look at the finished product you can see that the area goes behind it on the homepage of the showcase alright so that's why it does that so

that's what we'll do next is this this showcase area

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