Build An HTML5 Template With Bootstrap and SASS - Part 1

Key Takeaways

in this miniseries we're going to build a bootstrap HTML 5 SAS template all right so we're going to use bootstrap and SAS is a CSS pre-processor and it allows us to do a lot of different things like use variables uh mixins which are like functions um importing style sheets and just a whole bunch of cool stuff so uh if you don't have SAS installed on your computer or uh you don't even know what it is then I suggest watching my um getting started with SAS uh 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 um not exactly copying it but just used it kind of as a reference um you can see there is is very different down here uh we're just going to have a couple blocks here styled differently um and we're going to use SAS because I want to create um basically uh an scss file for all the objects on the site for instance blocks okay I call these blocks um for the buttons okay we'll have our own button scss file and then we'll combine all those into one stylesheet all right so if you go down basically this template uh is selling a fictional uh application called Sky app all right so we have an image here and the images I'm just going to excuse me include in the source files um I'm not going to go through in Photoshop and show you how I how I created the screen here and the monitor uh that's just a different uh tutorial Al together so I'll just I'll just include those images okay we have another one here simple footer couple uh unordered lists so that's the homepage the about page um basically we got rid of the big showcase area uh we have the search bar up the top we have this slogan here which you can actually make the page name if you want um then we have the bootstrap Carousel okay really easy to implement um we have the bootstrap accordion over here um we have a meet the team basically some blocks with some uh stock images and names here we have a a recent testimonial and I also want to make a scss file called sections and we can so that we can have uh just classes we can punch in and make the background blue or green or or gray um Services we have the tab mod the tab uh bootstrap widget over here got a uh quick quote form some more uh accordians we have this little area where we have uh icons we're going to be using font awesome uh which is a uh just a great source for um icons uh blog 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 um I have a featured video okay so these these blocks here will be um will have their own class you can just put in and it'll it'll be formatted that way uh comments over here and then a contact page which has uh a Google map we have a quick form and our location block and I also put the uh team members and testimonial in 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 um is just we're just using bootstrap we're not using SAS 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 stylesheet uh 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 uh implementing SAS so the first thing you need to do is install that and like I said uh I'm not going to go through the installation uh there's a video called get started with SAS on my YouTube page uh it'll show you how to install Ruby because because SAS runs on the Ruby programming language it'll show you how to install the the dev kit um as well as SAS all right so do that and then come back and uh oh also we we installed a program called Scout which is going to help us compile these SAS files all right 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 right in my C drive in my projects folder all right I'm going to say new folder and I'm going to call it Sky all right so in this folder we're going to create a few more folders okay we want our scss folder which is going to hold all of our SAS 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 scss files are located or your SAS files output folder is going to be the CSS folder javascripts images folder all right and we're not going to have a config and then down here for output modes um 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 uh 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 uh 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 uh I'm sorry our scss 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 layout outs okay so basically the base folder is going to have um basically our basic our base style so if we want to style all the links or all the H1 tags uh we'll put that in a file actually let's go ahead and create that uh underscore b. sccss 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.css file so in this um root directory of the C scss folder I'm going to create a new file and call it main.css okay no underscore so basically it's going to generate a main.css file all right so back in our base uh I also like to create a file called normalize.css and this is basically a reset file um if I sometimes I'll set margin and padding classes for instance margin 10 top so that you can just uh throw that in where you want a top margin of 10 pixels uh a lot of developers don't really like that way of doing things but uh it's just easier for me and I prefer to do do do it that way uh regardless so in base what else do we need here variables okay so we want a file we want a file that will store all of our variables and these will be this will be things like um primary color secondary color um margin values whatever you want all right and then the last one we're going to create here is the mixins fold uh file so mixins do scss mixins are basically functions so we can have um blocks of code and we can just insert it very easily into our CSS all right so that's it for the base directory next for layout I'm going to create a header. sccss so if you have code that is or css that's specific spefic to your header you can put it there footer and I'm also going to put my navigation uh file here so nav all right so that's for the 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 cuz I want to break things up into objects all right so I'm going to create a file called buttons okay we'll create one called blocks uh typography and this will be like um headings paragraphs things like that and uh sections all right uh oops sorry about that we need uh an scss and I'll also create one called component components will hold um basically anything that's not going to fit into any of these um for instance the accordion if we need some CSS for our accordion module or the tabs we can put it in here um alerts things like that all right so that looks good uh normally with a with a uh production template I'll have more I'll have a lot more than this um I'll even have maybe forms and tables. sccss 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 um the form Styles we can actually uh we could put it in components or we could put it in uh base all right so that looks good to me for now all right so what I want to do now is is open up the main file and do all of our includes all right so basically I like to just uh put a comment at the top here and we'll call this um Sky app bootstrap SAS theme and then to 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 mixins Etc all right now to import uh if you're familiar with CSS then this should look pretty familiar because it's the same way that you could import uh using standard CSS the difference here is when we import it through SAS we're not we're not making uh an additional HTTP request for every scss file okay we're making one for the actual CSS file that gets generated uh or however many that you want generated um so it's all right to have you know to include 10 uh scss files without per without uh affecting performance uh so basore variables. sccss all right so variables mixins normalize and base all right so so that's good for the base files next we'll have modules individual site components all right so this is going to be import modules um our navigation okay what else did we have okay so navigation oh no no no navigation is in layouts all right so let's do blocks buttons what else components actually I want sections and then then components and actually typography should go at the top all right all right so now our layouts excuse me page layout out Styles okay so we have navigation header and footer you could also do a sidebar here if you want all right so that looks good let's go ahead and save that and now we want to go back to to our Scout and let's see if we go to our CSS directory you can see that there's nothing there and if we go ahead and press the play button you can see that it's now created a CSS file all right now if we didn't have underscores on our other scss files it would have generated all those as well all right now if we open this up take a look at it basically we we don't have it 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 um and font awesome for icons and one thing that I should mention is uh 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 the third party um services that you're using in that vendors folder uh and then basically include them in your in your main scss file uh I don't like to do that I like to actually keep it keep it separate um just because I don't want my main CSS file to be all cluttered with bootstrap code and um all that so I just like to uh just download bootstrap put it right in the CSS folder and just leave it separate from my um from my SAS generated files and bootstrap does have um SAS and less functionality um but I'm not going to get into that because it's a it's a little more complicated um this is kind of geared towards beginners so in the next video or in the next part we'll grab bootstrap we'll grab font awesome and we'll create our our um index HTML file