Build An HTML5 Template With Bootstrap & SASS

Build An HTML5 Template With Bootstrap and SASS – Part 11

alright guys so this template is just about done we just need to add a couple things – to the responsive version so what we need to do is create some media

queries so what I'm going to do is create an another SCSS file inside of layouts and I'm going to create a new file and I'm gonna call it underscore mobile SDSS alright and in there we're

gonna create a couple media queries actually basically rolling we only need one and it's gonna be for tablets and under okay so the screen size of a tablet and under most tablets range

around 768 pixels alright so we're going to say media and so max with is gonna be 768 all right so let's just check this out and don't forget to

add that to your main file all right so let's make this smaller so the menu is good okay the the showcase looks good this

search bar I would like to Center in the middle so it has a class of search and what I'm going to do is change the display to inline block and then text-align:center

alright let's see if that does anything all right so now that's in the middle the blocks look good the list I'd like to put a little margin underneath to separate it from that image so we'll say

list actually just list itself margin bottom 20 pixels actually you know what we don't we want it for the button shoot you know what let's do it for the image

we'll give the image of margin-top so device margin taught all right and let's see

okay so for this for this image here we need to make it smaller and we need to change the the negative margin that we have so it had a class of device small and we'll set margin bottom to 20 pixels

and let's make that important and I want these to be aligned to the center so for the device class I'm going to display block and set margin to auto actually we need margin top 20 so let me

just say 20 Auto Oh all right so that's in the center and then for the for our list I guess we could just put some margin underneath so

what our main you L we want to say margin-bottom 20 pixels okay we could even text-align:center

and for the h3s as well I think those are h3 I say we should be nesting these maybe there H force all right

all right so that looks good to me go to the about page carousel looks good works tabs accordion the images for the team full screen our full width testimonial looks good blocks footer alright so

everything seems to look good services tabs Blagh these here comments we need to just add a clear class in the

HTML so if we go to blog and we want to find the comments and then here we'll just say div class equals clear fix and just put those in between the list items and that will clear the float okay

and then we'll just go to s CSS base and we'll put it in the normalize okay we can just say clear both and also ad to those list items we want to add an

overflow so let me just go to modules list not list typography and I'm just going to set it for all list items so overflow audible that's not doing it

this comments overflow:auto importance there we go okay contact map form looks good boxes all right so

that's it I realized that that took quite a bit of time to build actually home one more thing here we have this login link on their mind all right so looks good I hope you

enjoyed this series and hopefully you learned a lot and you can take some of these take some of what you've learned and incorporate them into your development so thank you for watching

and don't forget to subscribe

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