Build An HTML5 Template With Bootstrap & SASS

About this course

in this miniseries we're going to build a bootstrap html5 sass template alright so we're going to use bootstrap and sass is a CSS preprocessor and it allows us

to do a lot of different things like use variables mix-ins which are like functions importing style sheets in just a whole bunch of cool stuff so if you don't have

sass installed on your computer or you don't even know what it is then I suggest watching my getting started with sass video which you can find on my youtube page

now this template I'm kind of modeling it after this Skype template all right or the Skype website you see I have kind of the same navigation the big showcase area

not exactly copying it but just used it kind of as a reference you can see there's this very different down here we're just going to have a couple blocks here styled differently

and we're going to use sass because I want to create basically an S CSS file for all the objects on the site for instance blocks okay I call these blocks for the buttons okay we'll have our own

button s CSS file and then we'll combine all those into one style sheet alright so if you go down basically this template is selling a fictional application called sky app alright so we

have an image here and the images I'm just going to excuse me include in the source files I'm not going to go through in Photoshop and show you how I

how I created the screen here in the wander that's just a different tutorial all together so I'll just I'll just include those images okay we have another one here

simple footer a couple unordered lists so that's the home page the about page basically we got rid of the big showcase area we have the search bar up top we have the slogan here which you can

actually make the page name if you want then we have the bootstrap carousel okay really easy to implement we have the bootstrap accordion over here we have a meet the team basically some blocks with

some stock images and names here we have a recent testimonial and I also want to make a s CSS file called sections and we can so that we can have just classes we can punch in and make the background

blue green or or gray services we have the tab want the tab bootstrap widget over here got a quick quote form some more accordions we have this little area where we have icons we're going to be

using font awesome which is a just a great source for icons Blagh okay so the blog you can see each post is formatted like this we have the date the the author the category we have

another tab module over here I have a featured video okay so these these blocks here will be will have their own class that you can just put in and it'll be formatted that way comments over here

and then a contact page which has a Google map we have a quick forum and our location block and I also put the team members in testimonial and these boxes we don't have a register and login page

I might do that later and this template that I'm showing you now is just we're just using bootstrap we're not using sass and I can show you the files here basically we have our HTML files a CSS

folder with the bootstrap and font awesome and custom style sheet fonts images and JavaScript okay where we have our jQuery file in bootstrap JavaScript so we're not going to be building this

exact thing we're going to be implementing sass so the first thing you need to do is install that and like I said I'm not going to go through the installation there's a video called get

started with sass on my YouTube page it'll show you how to install Ruby because because sass runs on the Ruby programming language it'll show you how to install that the dev kit as well as

sass alright so do that and then come back and also we install the program called Scout which is going to help us compile these sass files alright so the first thing I want to do is create a new

project file or project folder and you can create it anywhere I'm going to go write my C Drive in my projects folder all right I'm going to say new folder and I'm going to call it sky out all

right so in this folder we're going to create a few more folders okay we want our FCSS folder which is going to hold all of our sass files okay we want a CSS folder we want in images folder a

JavaScript folder and I'm going to go ahead and open up scout all right so what we want to do is create a new project so you want to

click this little plus sign and go to your project folder sky app select now you want to choose your input folder which is going to be your s where your s CSS files are located or your sass files

output folder is going to be the CSS folder Java scripts images folder all right and we're not going to have a config and then down here for output

modes you can we're going to leave it at development and the biggest difference between development and production is that the development version has all kinds of comments on the production one

does not and we're going to leave it at expanded and then go ahead and click the play button but it's going to give us kind of an error here and the reason it's saying this is that we have nothing

to compile so we didn't create any files yet so we want to go ahead and do that all right so we'll start with our CSS I'm sorry our s CSS folder and we want to create a couple different things here

I'm going to create a folder called base all right and I'm going to create a folder called modules and a folder called layouts okay so basically the base folder is

going to have basically our basic our base styles so if we want to style all the links or all the h1 tags we'll put that in a file actually let's go ahead and create that underscore base dot s

CSS all right now the underscore is important because if you don't include that then Scout or whatever your compiler is is going to go ahead and create a base CSS file and we don't want

that all right all we want is a main dot CSS file so in this root directory of the CS CSS folder I'm going to create a new file and call it main dot s CSS okay no

underscore so basically it's going to generate a main dot CSS file all right so back in our base I also like to create a file called normalized dot s CSS and this is basically a reset file

if I sometimes I'll set margin and padding classes for instance margin 10 top so that you can just throw that in where you want to top margin of 10 pixels a lot of developers don't really

like that way of doing things but it's just easier for me and I prefer to do to do it that way regardless so in base what else do we need here variables okay so we want to file we

want to file that will store all of our variables and these will be this will be things like primarycolour secondarycolour margin values whatever you want all right and then the last one

we're going to create here is the mix-ins fold file so mix-ins dot a CSS mix-ins are basically functions so we can have blocks of code and we can just insert it very easily into our CSS

alright so that's it for the base directory next for layouts I'm going to create a header dot F CSS so if you have code that is our CSS that's specific to your header you can put it there put a

and I'm also going to put my navigation file here so nav all right so that's four that's the layouts now modules is usually where you have the most file well where I usually

have most of my files and that's because I want to break things up too into objects all right so I'm going to create a file called buttons okay you'll create one called blocks

topography and this will be like headings paragraphs things like that and sections alright oops sorry about that we need an

s CSS and also create one called components components will hold basically anything that's not going to fit into any of these for instance the accordion if we

need some CSS for our Gordian module or the tabs we can put it in here alert things like that all right so that looks good normally with a with a production

template I'll have more I'll have a lot more than this I'll even have maybe forms and tables dot s CSS but we're not going to have I mean we're going to have basically one form so we don't need to

do that the form Styles we can actually we could put it in components or we could put it in base alright so that looks good to me for now alright so what I want to do now is open up the main

file and do all of our includes alright so basically I like to just put a comment at the top here and we'll call this guy app bootstrap sass theme and then put the

author and the version all right so now we'll do our imports the first batch of files will be our base say base base styles variables mix ins etc all right now to import if

you're familiar with CSS then this should look pretty familiar because it's the same way that you can import using standard CSS the difference here is when we import it through SAS we're not we're

not making an additional HTTP request for every CSS file okay we're making one for the actual CSS file that gets generated or however many that you want generated so it's alright to have you

know to include 10s CSS files without perfect without affecting performance so base underscore variables dot F CSS alright so variables mix-ins

normalise in base all right so that's good for the base files next we'll have modules individual sites components

all right so this is going to be import modules navigation okay what else do we have okay so navigation oh no no navigation

is in layouts alright so let's do blocks buttons what else components actually want sections and then components

and actually typography should go at the top alright alright so now our layouts excuse me page layout styles okay so we have navigation header and

footer you could also do a sidebar here if you want alright so that looks good let's go ahead and save that and now we want to go back to our Scout and let's see if you'll go to our CSS directory

you can see that there's nothing there if we go ahead and press the play button you can see that it's now created a CSS file alright now if we didn't have underscores on our other s CSS files it

would have generated all those as well all right now if we open this up take a look at it basically we don't have anything in it except comments all right so that's all we see all right but as we

add CSS to our files it'll compile and all the Styles will be added now in the next video we're going to be implementing bootstrap and font awesome for icons and one thing I should mention

is a lot of times people will in their scss folder create a folder called vendors and put the bootstrap in the font awesome and whatever other third-party services that you're using

in that vendors folder and then basically include them in your in your main s CSS file I don't like to do that I like to actually keep it keep it separate just because I don't want my

main dot CSS file to be all cluttered with bootstrap code and all that so I just like to just download bootstrap put it right in the CSS folder and just leave it separate from my from my sass

generated files and bootstrap does have sass and less functionality but I'm not going to get into that because it's a little more complicated this is kind of geared towards beginners so in the next

video or in the next part we'll grab bootstrap will grab fun awesome and we'll create our index.html file