How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid

Key Takeaways

welcome to the next video in my series I'm building a responsive website from A to Z for my whole workflow everything in there in this video we are going to be fixing up this promote your app section to look like that in this something that looks like this in doing this we're also going to have to set up the whole grid system so things actually start working properly I've started doing grid a little bit but this is really where the grid is going to take on its full-form and it's not too complicated to do and we're going to be doing all of that with flexbox so the first thing you'll have noticed obviously is promote your app is here and these are all sort of nudged up against there and if we look in here the reason for that is my grid is set to display flex and because my grid is set to display flex it just makes everything sort of pile up next to each other now I want these three columns to actually be next to each other obviously and I've made all of those columns so we have column column column so that's great the problem is over here with my h1 that shouldn't be a column that should actually be taking up the full space so to fix this what I'm going to do is I'm going to jump into my grid here where I haven't really done anything yet except for say that my grid is a display flex now the thing that I want to do is at the desktop screen size I do want that to become a three grid system but on my mobile display which is what we're worrying about the most right now if I have three columns they're going to be awfully small they're gonna be really really narrow so I actually want my columns that the small screen size is just a stack one on top of each other a lot like what bootstrap does so the simplest way to do that is to say that my columns by default are a flex zero zero 100% what that means is and the Flex is shorthand for the Flex shrink the Flex grow and the Flex basis so zero zero is just making sure that they're not shrinking or growing and the 100% is saying that they should be taking up the full size their default setup is a hundred percent of the screen so I'm gonna hit save and you can see I only have one icon now the only problem is by putting that to 100% what's actually happened is staying next to each other the way fluxbox works is their columns it squeezes everything in next to each other but when you force the width on something it will stay next to each other and now all the tappet is I have a 300% width section which is obviously not very good so to prevent things like that from happening what I want to do is I want to come back to my grid and I just want to do a flex wrap and the default is no wrap meaning things you get side-scrolling sometimes and I want to switch that over just a regular wrap and now we'll notice that they stack one on top of each other which is perfect it's exactly what I wanted I wanted them to stack on top of each other instead of being next to one another because they're taking up the full space just so you can see if I give these a background color background of pink you can see they're taking up the the full width and they're inside a container right now and now the next thing I want to do is just add the the text that I need underneath those so I'm going to just jump into my indexes I forgot to do this originally so let's go find my Photoshop design responsive design easy to set up and great results let's see if I can remember all that well it's easy it's right there responsive design easy to set up and great results and I can just paste in my lower arm Epsom text that I have right there paste paste and paste so we'll save that and let's go see what it looks like on the screen there we go I have my text I want all of this to be centered and actually I probably should have done this originally on my drew my base when it's on my small screen sizes I just want all my text to be centered text-align:center I think that's just going to make our life much much much easier now the one part that's still busted sort of is this promote your app and the reason for that is my promote my app it's flexing as well and that flexing is causing a bit of an issue it's forcing these we have a bit of work to do on this that's ok so it's forcing when you flex something you remove it's a block level element it's sort of like if you position something absolute it loses its width and all of that and it shrinks down so my h1 there let's just take a look really fast my h1 h1 whoops has a background of blue so it's even though it's a block level element because it's flexing it doesn't have that full size that a block level element normally would so my text-align:center isn't working on that but that's ok because when I get to my larger screen sizes these are going to turn back into regular columns and I don't want that weird problem happening with it wrapping around anymore so I'm actually going to turn my h1 into a column as well but it's going to be a different type of column it's going to have a class of column full so double L and this is important i whoops column column full so the reason I'm doing this is I want it to be a column and you can see right now it's working but when it gets to the full screen size I don't want it to be all of a sudden turning into a regular column and going next to these so I have my column full which is always going to be a grid my column and then I'm going to have a column column full double L and my column full is just going to be the same thing for now and it's going to stay that way so the big difference between my regular column and my column full is my column full will always be like this it's always going to take up the full amount of space whereas this column different screen sizes will adjust and work a little bit differently now one thing I'd clearly need to do is create some spacing on the top and the bottom of this one so that luckily is nice and easy to do I want to have equal spacing throughout the entire site now let's go just look at my HTML really fast sales points is fine there's my title whoops title box those down there hmm I don't actually a lot of sites I do I usually have equal spacing on a lot of the different things that I'm creating in this case I'm not going to have that equal spacing is each sections a little bit different from the other one so that's okay let's then do this is my section class promo so in let's make a new file and my SAS layout um because I'm creating a single page site I was I'm just going to save it in my layout here I probably should have done that with my hero to where it would get its own folder um actually you know what I'll do I'll just do a home home promo dot SAS just it it's usually a good idea to should I have a pages folder I don't want to make a pages folder in my SAS sometimes I have a pages folder and each page would get its own SAS file so I'm just instead of doing that for this one I'm just going to do it underscore home for all the different sections on the home page because I'm only building the home page but technically this site would be built out further so be one way just to name the files in a convenient way so it's easy to know what they're for my hero I probably should have done the same so home promo will go over super and we'll go over to my main sass @import layout home promo and we can now get into their home promo so I just want to put the spacing on the top and the bottom it's on my phone it would probably be something let's just do it in iPhone 6 let's say some of this so we can just go to 100% just to get an idea okay the other spit actually the spacing there's our nice okay so home promo all I really need for this one is a padding top are just your padding and vertical height zero and I said vertical height be view port height and that clearly didn't work it is promo right promo oh I'm not in promo in sales points why am I looking at promo on here okay well that's a little embarrassing okay let's just do the same thing actually I'll leave this here we might need to change that but I'm going to need that file later on anyway and we'll call this one home sales points this will get changed to sales points and before I save that we'll go back to my main and bring that in there copy paste home sales points save that one save this one there we go some spacing there the reason that I put V H instead of say five Ram 10 Ram you know it's going to correspond to if the person flips it you can see it's getting a little bit smaller so it's really going to adjust itself accord to the size of the screen if somebody is on a iPad it will you know have a nice big space there but if they rotate it it shrinks down a little bit so it adjusts according to their screen a bit which is nice so if they're on a shorter screen it won't fill the whole space with this big empty space and I think that's kind of neat even here you can see you'll see a scroll up right there you should be able to see there it's getting smaller and smaller and smaller and bigger and bigger and bigger so I like doing that okay so that's all good and dandy I also need space between my sales points I'm just trying to think so that would be a sales point because each one of I have my sales points is the entire let's go take a look sales points is the entire thing and then each one of those is a separate sales point so each sales point will have a margin bottom of 5m2 big WOW to em that looks better 2.5 mm 3.5 m I want a little bit of space there and the only thing is I don't want this bottom one to have a margin so I will add sales point not last yeah not last child will get a margin bottom of zero and when I save that this should move up just a tad of course everything last oh I did that wrong all of them got it except my last one whoops I shouldn't I don't I just do last child don't want that there there we go did that wrong before so if I take this off see how there's a big space there that I'm getting rid of right there because there was this big extra margin on this one that I don't want to be there which would cause problems so the last child doesn't get any of that margin on the bottom there's too much sorry I kept making it bigger and bigger and bigger and now I think it's too much I bring them a little bit tighter together that looks nicer okay there we go I'd like a little bit more space on that one too actually on the top so that will get a first child I'll have a margin top of say 1.5 m and that should actually be first of type because the first it's not the first child and that's just to create a bit more space here I found it was too close I don't like that it was you know nudging right up against it um and more or less guys that's it I think that looks pretty nice on mobile devices that's looking pretty sweet so for that video that's it it's a nice and short one today which is great I hope you liked it if you again if you have any questions any comments please leave a comment down below if you liked the video hit the like if you haven't already subscribed please subscribe to the video because I have lots more of these coming we still got a lot of work to do in it and if you're wondering why I haven't built it into the three columns yet I am going to get there but I'm going to do that all the way at the end once I finish the whole site in this view I'm going to go over and rework the whole thing to work on large screens again I hope you liked the video and I'll see you guys in the next one