Build An HTML5 Template With Bootstrap and SASS - Part 2

Key Takeaways

hey guys welcome to part two of our bootstrap and SAS template uh in this video I want to implement bootstrap um and also font awesome for uh our icons all right so our project directory looks like this uh what I'm going to do is go to get [Music] bootstrap.css strap okay so we'll open that up and we're just going to drag some files over all right so basically we want our CSS all I'm going to take from here is bootstrap.css that's all we need all right so fonts uh oh we didn't even create a fonts folder okay so fonts we'll bring over all these um glyphicons even though we're going to be using font awesome for our icons but just in case you wanted to use some of those JavaScript okay we're just going to bring over bootstrap.js and that's all we need from that so we also want jQuery all right so I'm going to save this in the project in the JS folder and I'm just going to rename this just to jquery.js just to simplify things all right next we want font awesome okay so we want to download okay open that up and we want to grab from here fonts excuse me and the CSS file now you can see there are we do have scss files if you want to do that but um I'm not going to do it for this for this project it's it'll just over complicate things so I'm just going to grab the CSS file all right so that's our structure now we need to create an index HTML file all right and just to get some core bootstrap code go to get bootstrap and then getting started go to examples starter template do a control U and we'll just grab all this okay now we'll go back to our index and paste this in and then we'll go through it okay so we have the HTML 5 doc type HTML tag English language uh character set okay we want this we want the viewport because it's going to be responsive um I'm going to get rid of description author and icon and then the title Sky app welcome okay the bootstrap CSS file remember we we only took the bootstrap.css and then here we want to change the path we want to get rid of this because it's just right in our CSS file all right so the starter template here um we're not going to need what we want to include is our font awesome so see CSS SL font awesome. CSS and then we want our main CSS file okay and then these from here to here we can just get rid of all right so the Navar goes from here to here here um container I'm going to get rid of this and then down here for the JavaScript um we have a link to uh that links to the the Google um jQuery index but we could we're just going to include our own so let me get rid of this and we want to go to JavaScript slash jQuery dot oops sorry about that jquery.js and then the bootstrap JavaScript get rid of that and then we can get rid of this all right so if we save that let's see what it looks like all right so basically we have an empty site we have a nav bar and that's it but we have everything included Let's uh check the console make sure there's no errors here nope all right good so now we're ready to start writing our HTML so we'll start with the Navar uh basically we want to keep this we want to keep all these classes um project name Sky app for the links we have a home which will go to index HTML and what else do we want an about page okay that'll go to about. HTML contact we'll go to contact. HTML and we want a couple more pages here okay so we want services and our blog page all right and then we're going to have our login and register link uh so we want to get out of this unordered list and then have a new one all right and we're going to give it a couple classes okay first we want nav we want Navar uh I'm sorry Navar nav okay these are all core bootstrap sty um classes um Navar sub and we want to pull right we want it to float to the right all right we'll have two list items and this one will be register and this one will be login all right so that's it for our navbar um we're going to have a lot of styling to do okay we need to turn this Navar into this okay but I just want to get the HTML done first before we get into that all right let me see okay we'll make sure the responsive menu works all right so under the navigation we're going to start our showcase all right which is this area with the image with this uh this copy in here buttons all right so what I like to do is for format my HTML U pages in sections all right so this will be a section called showcase um and they don't always have to have a class um but what I like to do is create different versions all right so this here with the search bar and this this light blue background this will be a section and we'll call it um section SL light because it has a the light color basically we're going to have a few different color p um color variables we'll have primary which is going to be this blue we'll have secondary which will be the green we'll have light which will be this light blue and then we'll have dark which will be uh like a dark gray all right and then this here is another section okay this will be a section this is a section with the class of section light this will be another section with the class of section primary and then we have our footer all right so that's just my preference uh how I like to build HTML 5 sites um you may already have a kind of a method that you stick to and that's fine um so what we're going to do is add a section so section class is going to be showcase and actually you know what I want to add another scss file uh in layouts uh actually you know what never mind the code for this will put in our sections uh scss file so never mind all right so in our section we're going to have a div with the [Music] class of container and if you use bootstrap at all then you know what container is basically it it takes everything and gives it a width and sets it in the middle so this entire area here you can see how it's set in the middle and we have margin Auto on each side all right so that's a container and I'm also going to um add another class to this called showcase content all right and then in there we'll have our H1 we'll say bootstrap um HTML5 template and then we'll have a paragraph and I want to give it a class of lead which is a boot uh bootstrap class and I'm just going to grab some text paste it in okay so I just have a strong around the bootstrap 3 and we have a line break here to make it two lines so under that we want our buttons so I'm going to create a div with the class of downloads excuse me all right and we're going to have a link that goes nowhere and we'll have two images so this will be around an image and this will be called IMG for our image folder and then BTN Dash oops download.png and we might as well add some alt text just say download all right and then we want another one I'm just going to copy this here and this one is going to be called app store all right so we might as well get the images so in your source files the link is in the the description uh you should find the images basically I'm just going to grab all of them I don't want the PSD and put them inside the images folder uh where are we all right so that's it for the Showcase area next is going to be where that ser search boxes okay the search and this is going to be a section it's going to have a class of section light all right so we want to go right here section class section light and let's see okay we want to container and the reason that the container is on the inside of the section is because we want the background of the section to go across the entire page you know no no matter how how wide you open your browser it should go all the way across if we put a container outside of it then it would only go from here to here all right we want the content to be in the middle inside the container but not the actual section okay so in our container we're going to use the grid system bootstrap grid system uh basically we need to create a class called row and then our columns all right so what I'm going to do with this section is have two six column divs okay one here one here and this is empty but you could put something here if you want maybe social network icons or something like that uh but for now we're just going to have the search bar in one of the columns okay so div class call- md-6 okay and then we want the same thing and then inside here uh is where we want our form our search form okay so form um class search and what do we want to do we want a div and then an input type is going to be search we're going to use the HTML5 um search type and we'll put a placeholder that'll say search our website and products all right and then we want a button uh with a type of submit and a value actually I'm going to leave the value blank and then we want to use an image as the button all right so here we're going to say image SRC um is going to be in the images folder and called search.png and we'll also have an ALT text that'll say search all right oh this should be an equal sign all right so if we save this and take a look now it's not going to look very pretty all right so you can see that it's even under the navigation bar so we're going to have to fix that later uh this image isn't being found button app store oh there's no dash all right there we go all right so let's just keep going with the HTML we have our showcase and our first section or our second section next we want our section with the three column layout so this right here it's going to have three columns with three blocks all right so I want to go out of this left section and um you know what I'm not even going to give this a class because there's no background or anything like that the blocks are going to be styled individually okay so we need a container and then we want a row and then we're going to want um three four column divs so call md4 I'm just going to copy this and then in each column we want our block so div class class okay the first block is going to be that blue that's going to be a primary block so class is going to have block okay all blocks will have the class of block in addition to their styling which in this case is block primary and then inside there we want an H3 and we want an icon so we're going to use Font awesome so we'll have an tag the class when you use Font awesome you always need the fa class and then the icon you want in our case it's going to be fa- check all right and I can show you real quick um all the icons located here there's just a ton of them and if you click on one it'll give you the exact code which is the fa and then the icon name all right so we want the check mark okay now for the H3 text um what do I want sleek and then we want a paragraph and I'm just going to grab some text real quick just some dummy uh lipsum text all right and then we want a read more so hre and let's see this see what this button looks like we're just going to use the default button which is a white button so class you always want to use BTN and then BTN whatever style default BTN default is a bootstrap core style and this is going to say read more okay so what I'm going to do now is copy the block and paste it in these two and then just change the middle one is going to be block secondary and we'll change Sleek to responsive and we'll change this to clean all right so if we save that it's going to look horrible actually it doesn't look too bad you can see we have our columns uh I just want to put a space after the check marks even though we probably will add a margin all right so that's it for the three column section now we want the four column which is this here and I'm going to stop this video here and we'll continue in part three um I just want to keep the videos around 20 25 minutes um so we'll we'll do this in the next part