Grid CSS Responsive Website Layout - "Mobile First" Design

I want to give a huge shot out to today's sponsor male tag male tag is a Chrome extension that allows you to track your emails in real time for free it also lets you track other cool things like link clicks email reopens and even the device that was used to open your emails be sure to check out male tag by clicking the link in the description below hey what's going on guys so I have a really cool project for you guys today I did a grid CSS crash course a few months ago and I've been asked over and over to do some kind of layout or website with the grid system because honestly there's not a lot out there there's some other crash course type videos but nothing where they actually create something especially something that's responsive so we're gonna create this single page layout website for a fictional company called Acme web solutions and it's completely responsive you'll see if I make this smaller once we get around 700 pixels that kicks in and you can see everything is now stacked and looks really nice alright so we're gonna be using a for fractional layout for our grid in fact if I open up my chrome tools here and we hope we look at the source code you'll see the header has a class of grid and then inside the main tag each section here okay section a B and C which are these sections also have a class of grid and you can actually see the outline so basically we're gonna have four different sections or what are called fractional x' if you watch my grid CSS crash course and we're basically gonna span for instance the one that I'm hovering over now we're gonna span the content from two to four so it's in the middle all right so we're not using any containers or anything like that and we're taking a mobile-first approach which means just that we're gonna just we're gonna create the the layout for a mobile site first so it'll be basically just all stacked and then we'll apply the grid system and we'll have these these columns or fractional x' now the one part of the layout we're gonna use flex boxes with these three cards right here these are actually lists items which I gave the class of card like you would see a materialize or bootstrap and we will be using display flex for these okay to align those correctly but all in all it's just it's just a really modern layout and you don't see too many tutorials with with this kind of markup so I figured it was a good idea plus I'm getting requests for it so that's it guys let's go ahead and get into it and let's get started all right so we're gonna be starting from absolute scratch I have vyas code open with an empty folder called CSS grid theme and over here is the final project now as I said we're taking a mobile-first approach so we're gonna be building it like this first before we implement that anything to do with the grid the grid is gonna go inside of a CSS media query for only on screen size is larger than 700 pixels so we're not gonna get to the grid until you know closer to the end but like I said I think I said I like to start from scratch in in my videos just so people aren't lost so they can just you know start fresh so let's go ahead and create two files here index dot HTML and style dot CSS all right and the CSS is coming last so we're gonna do all the markup first it's usually how I like to work so we're gonna put in some markup I'm using Emmet so I can do exclamation tab and that'll give me my head and body tags and all that stuff alright for the title let's change this to Acme I spelled that wrong Acme Webb Acme web solutions and we're gonna put our link tag in here and link to our style dot CSS and I might I'm gonna try to go kind of fast with the markup now I am using I'm gonna save this I am using dev suit live dev server for a visual studio code if you if you want that you can click on this icon here and just search for live server and you just click the green install button that will install it and then what you can do is right click and say open with server and it'll actually open your HTML file on your low host on port 5500 and it also gives you Auto loading capabilities so every time I save it's gonna upload so I don't have to keep our reload so I don't have to keep clicking the reload button alright which is good for videos so that's it for the head now we're going to start on the the markup so basically we're going to start with the header or the showcase which is this area here then we'll move to section a section B is all of these all of these images these cards right here and then section C is our section C is this right here section D is these two boxes and then we have the footer so those are those are the main parts of this layout so let's start with the header I'm gonna put a comment in here and say header showcase so basically we're gonna put in html5 header tag we're gonna give it an ID of showcase and then we're gonna give it a class of grid okay so I'm using Emmet and that's why I'm able to do this so header I'm giving it an ID of showcase a class of grid I hit tab and it gives us the markup alright so I would suggest using Emmet if you're not using vs code you can easily install it as an extension for you know if you're using sublime text or atom or something like that alright now one thing that I want to mention is that for the background it's faded it has an opacity and in order to do that without fading out the text we have to add it to a different element not to the header okay we're not going to add the background image to the header so we're gonna put another div in here with the class of BG image alright we're not going to put anything inside the div but that's what we're going to use to attach the image all the background properties and all that and then we can add some opacity to it all right and then let's see under that we're going to have an h1 and we're just going to say welcome to pack me web solutions and then we'll have a paragraph and let's see we're gonna do lorem 20 okay with Emmet we can say lorem 20 hit tab and it gives us 20 sample text words or dummy text all right and then under that we're gonna have an a tag with the class of BTN okay which is a class that will create our style we'll create and then it's gonna go to hash section - to dupe B section B so when we hit read more it'll just scroll down a little bit all right and then let's put in read more here all right so that's it for the showcase now if I save this and we take a look it's gonna look horrible because we have no CSS yet all right now the rest of the layout is gonna be within a main tag okay so let's say I'm gonna put a comment here we'll say main area so main we'll give it an idea of main as well and then let's put our section with the idea of section a and a class of grid all right now some people ask me why I do section a section B and all that the reason for that is because you never know when you're gonna change things around for instance I may want to take this this here this digital needs and then put that up here all right now if I had named this something like web app dev class and star ID and this something like digital needs as an ID if I go ahead and switch the content that that ID is no longer gonna make sense so this is this is how I like to do it in sections so section ABC and so on alright then that's why I do it and it's all preference if you want to do something else that's fine but that's why I do that so for section a we're gonna have a class of content - wrap all right this we're going to use this class later on with the grid to span our content it's basically going to be kind of used as a container put to push things to the middle let's see and then inside there we're gonna have an h2 with a class of content - title alright and for the title we're gonna say web web and application development okay and then we'll have under that a paragraph and we'll put in let's say 20 alarm 20 tab and actually no we need more text than that I think it was 30 I did lorem 30 nope still not enough alarm 40 tab okay so that looks good and then that's it that's it for section a so if we save it it should look like this so next thing we have is section B which includes all of these cards or these these list items here with the images so let's go right down here actually I'm going to put a comment right here saying that this is section a alright and then we'll do section B okay so for section B we're gonna do section hash section B and it's gonna have a class of grid and let's see inside here we're gonna have our UL so ul will have an Li and then inside the Li we're gonna have a div with the class of card okay so in this card div we'll have our image so this is where our first inline image will go now to get these images I'm gonna go to pixels dot-com p exe LS not pixels and I'm gonna search for let's search for programming oops programming and it's this one right here so this image now if this was production if you're gonna use this you know live on the web you're gonna want to download the image and then you know use it from your your actual file structure but I want to post this on code pen so I don't want to have any actual images downloaded so what I'm gonna do is click on free download and I'm just gonna grab the link all right so you guys can choose what you want to do we're gonna put this right in here all right let's save that and let's take a look and it's gonna be absolutely humongous all right and like I said you know if this is going to be production you're gonna want to download it you're also going to want to resize these because this is huge and it's gonna it's going to take up a lot of files a lot of resources all right now under the image we're gonna put a div just a div with the class of card - content and inside card content we're gonna have an h3 with a class of card title so I kind of formatted this is like materialized in bootstrap they're all using cards now and we're gonna say web development alright and then under that we'll have a paragraph with 20 words will say lorem 20 tab save and then underneath that you guys probably can't even see that because I'm in the way so let me just open up my dev tools so that that moves up alright so we have our text here now what we want to do is we want a couple more of these list items so what I'll do is grab this LI copy it and paste it in two more times let's format that envious code you can do alt shift F and it'll format your can your your markup or whatever let's see we're gonna go to the second list item and we want to change the image so I'm going to go back to pixels close that up and I'm gonna search for I think I search for mobile yeah this one right here click free download and grab the link put that in here and yeah and then we're gonna change this to mobile what was it was it mobile applications yeah mobile applications and then for the last image let's close that we'll go back to pixels we'll search for what was it marketing I think yeah we're gonna grab this image here and you guys can use whatever images you want so we'll grab the link that and then we'll change the title here to tech marketing all right so now if we look at our project we have all of these images with the text underneath mobile applications and tech muggin all right so that's section B now we're going to move to section C so you can see the mark-up is actually pretty simple so section C we're gonna have a section tag with an ID of section - C and a class of grid all right and let's see in here this is gonna be pretty simple we're just gonna have a content wrap inside the content wrap we're gonna have an h2 with a Content title and the title is gonna say we handle all of your digital needs okay and then for the paragraph will say lorem 20 tab and that section C section D is going to be the two boxes so it's going to be the contact us in the about our company so let's go under this section and we'll say section ID section D class grid all right so let's see these are actually going to have a div of box these two right here so we'll say class box and inside the box will have an h2 with a class of content title and this one is going to be contact us we'll have a paragraph with will say LARM 20 and then we'll put another paragraph with the email address which will be sales what I do no contact at Acme web solutions dot test all right so that's that's that box let's do another box underneath that div and for this one it's gonna have an h2 content title and this is gonna say about our company and we'll do a paragraph with 30 words so lorem 30 and that is section d so now we want to do is go outside of the main and we're going to put our footer so let's say footer I'm gonna give it an idea of main - footer and a class of grid all right and then we're gonna have two divs so I'll say div x - with Emmet and the first one I'm just gonna say Acme web solutions and the second one I'm gonna say project by Travis E media and I'm just going to wrap my link around that HTTP whoops HTTP traversing Mediacom check it out if you have a chance shameless plug and we'll also add a target to that a tag so that it goes off the page so it opens a new tab and save all right so let's take a look so let's say we have this right here which is section see these two contact us about these a section D and then the footer okay so it looks horrible but that's because we have no CSS all right so that should be it for our mock-up that's it so let's move on to style dot CSS and we're gonna start with our core styles oops all right so let's start with the body so the body is gonna have zero margin let's give it a font family of arial helvetica sans-serif let's give it a background color of dark grey let's give it a color of white what else font size I'm gonna say 1.1 m let's save that see what it looks like okay that's fine so far line height let's do 1.5 and then I want to align everything to the center okay save that good so that is the body I can get rid of this I'll just try to keep you know keep what I'm focusing on up above myself so in addition to that we're gonna have some core styles for the image okay so basically any image is gonna have a display of block we also want to make the width a hundred percent of its container that's going to shrink down these huge images right here once I save we're also gonna set the height to auto all right so let's save and now we can actually see the damn images alright so for the headings of h1 h2 put some spaces in there so h2 h3 for the headings I'm gonna zero out the margin and then I'm gonna add a padding of 1m on top and zero or one M on the top and bottom zero on the left and right alright and then we also have four paragraphs so paragraphs I'm actually going to zero the margin and set padding to 1m on the top and bottom and zero on the left and right alright so we'll save that not much difference there and that's pretty much it for as far as the core styles I guess we could do the button because that's that's gonna be outside of any other elements as well so let's do dot BTN all right so we want to display the actually let's add a background of 333 let's make the color white let's take away the underline so text-decoration:none let's set the padding to let's do 1 M on the top and bottom 2m on the left and right let's add a border of 1 pixel solid and then the color for that is gonna be what is the color for the border its 666 and save see what that looks like alright so right now it's displayed inline so the it's kind of running into the next element if we were to look at this see how it's like running into the next element so we don't want to display as a block and I'm just explaining this for you you know you guys that are kind of new to CSS if we display as a block it will put everything on on the next line but it also goes all the way across the border the the background I don't want that so we're gonna display it as an inline block which basically takes the best of both worlds and then yeah I think that's good actually we're gonna add a margin as well so just go save margin for the top and bottom will do point 5m and then 0 all right so I also want to add a hover state for the button so BTN : hover so for the hover it'll have a background the background is gonna be a hexadecimal of EA three times and then color of 333 so now if I hover over it we get this lighter color alright so now we can actually start working on the specific areas so we're gonna start with the the showcase or the header so let's go down here I'll put a comment we'll say at our showcase so let's go ahead and say ID showcase now this isn't gonna have too much because remember how I said we're not putting the background image on the actual showcase div we're putting it on the BG image so that we can add some opacity to it so let's set the min height to 450 pixels let's set the color make sure the color of the text is white and then let's set text align to Center even though we really don't have to do that because we added that to the body but that's fine so we'll save and now you can see everything is moved down and has a minimum height of 450 pixels so now we want to deal with the background image so we're gonna say showcase and then we have a class of BG - image okay remember that so you need to make sure that this is positioned absolute okay because it's gonna it's going to go over the showcase div and we want to add the background okay so we're gonna say background first we'll put the color of 333 and then the URL alright so the URL I'm gonna grab from pixels I'm gonna search for programming and it is this where is it this will image right here so we'll go ahead and click free download and we'll grab that link all right we'll stick that in there good and then we need to add some background properties so let's say background background position is going to be Center okay background repeat' is gonna be no-repeat background sighs what took me sure to type it will be cover so let's save that and we're not gonna see anything yet because we haven't added the size the dimensions so we want a width of 100% of its container and then for the height we want to make sure that the height is the same as its parent so the height should be the same as the showcase which is 450 because what we're doing is again we're placing it on top of it okay so if we save and you can see that now it's been placed on top of it literally we can't even see the text anymore so to fix that issue with the text is by using Z index and for those of you that are kind of new to CSS Z index is where the higher it is the closer to you it is all right so right now the Z index for the image is higher than the text which is you know the heading and the button and all that so what we want to do is set the Z index to a negative number so we're gonna say Z - index and set it to negative 1 and save and now you can see everything is now brought forward okay and now the whole reason that I wanted to do this is because I want to fade the image out a little because I think that this is kind of unreadable the image is too it's too prominent and it doesn't look right especially if you were to use a different image that could make it even worse so what we're gonna do is set the opacity of the BG image class to zero point four and save and now you can see that it's faded out okay so that's that's one way to do this and if you want to even more feed it out you could do like 0.2 if you wanted it more more prominent you could do like 0.7 it's all up to you I think four looks good alright so now we want to move this stuff down a little I want to fix this heading so I'm going to say showcase h1 alright so showcase h1 let's add padding to the top I'm just going to do a fixed 100 pixels and then padding-bottom I want to remove okay so there we go now when this is really short or short really thin or small whatever you can see that the the words are right up against the edge and I don't like that so what I'm gonna do if we look at the header if we look at the header it has a content wrap class now this is going to be used later on for our grid to basically the center everything and span the content but I'm also going to use it to add a little bit of padding so it's a showcase showcase dot content - wrap and we're gonna just set padding:0 top and bottom 1.5 M on the sides and that didn't work did it alright guys so I got confused for a minute this isn't working because I didn't add the content wrap on the showcase which I should have because we're gonna need it so we want to put this right below where the BG images right here we want div class content - wrap and we don't want to end it right there we end it down here right before the header all right then we'll just tab that over all right save that now you can see that padding has been applied and we're gonna need that later on as well all right so so that's it for the header that's done now we're gonna move to section a which is this part right here so let's go down and our CSS and say section a okay so that's an ID section - a okay so this is going to have a light background so we're going to say background and it's going to be the that ei color so hexadecimal value ei three times color will be three three three and then I just want to add padding padding I just want to add padding bottom of two and save and there we go so now we have our light section a I also want some padding on the sides for that content wrap I could put that down here but what I'll do is just copy this put a comma here and let's change this to section a go save a couple lines of code all right so that's it for section a now section B is with all these images and these list items so let's say whoops section B all right so section B we want some padding here so padding is gonna be 2 m 1 m and 1 M that's it for the actual just section B now we want the UL we want to remove all the padding and margin see how this is pushed over like that we also want to get rid of these stupid bullet points so let's say section b UL and we'll say list-style:none the default should be without bullets who the hell uses bullet points in you know you eyes so see we also want to margin:0 padding:0 and save and there we go so that looks a lot better now we want to do a couple things to the list items themselves so section - b li and for this we're gonna we're gonna add a margin bottom of 1 m let's add the background to be white let's make the color triple 3 save there we go now this i have a class of card for this whole thing right here and then this part here is card content and i want to add some padding to the card content so we're gonna say the dot card content and the reason I'm not doing Section B card content is because you may decide later on you want to use these cards somewhere else and that won't apply if you add the section B to the beginning so that's why I'm doing it so padding will be 1.5 m there we go all right so that takes care of Section B now we're gonna do section C so I D section C okay and again section C is this part right here it's just this handle all of your digital needs this is very simple we just want it to have a white background and we want it to have a dark text and we wanted to have a padding of two M Save there we go now section D is these two boxes here all right so let's see we're gonna say section D section D itself doesn't have any styles but we want the box alright so for the Box padding 2m color white save okay now this first one here the contact us I want this to have a blue background so what I'm gonna do instead of adding extra classes in the HTML we're gonna use a pseudo class called first child so if we say section D dot box colon first child it's gonna take the first box and then we can add color or not color but background and the color I want to use is hexadecimal it's two six nine zero d4 and save and now we have a blue background all right so the last thing we need to do before we get into the media queries and the grid is the footer all right so we're gonna have ID of main footer and we're gonna add some padding of 2m we're gonna add a background of black we're gonna add a color of white and we're gonna that's it no let's do text-align:center okay now for the link sorry about that so you guys can see this let me move this up the link is purple I don't want a purple link so we're gonna say main footer a color I'm gonna make the color that blue this right here okay I also want to remove the underline so text decoration is gonna be none and that's it save there we go so that's it that's our mobile version of our site now if I were to let's close these up if I were to make this bigger that's not what we want we don't want that for the size it's great for a mobile that's why this is a mobile first approach okay so now we need to deal with the grid and making this you know look good on on bigger screens so what we're gonna need to do is add a media query I'm saying media queries but we really only gonna have one so to do a media query we do the @ symbol and then media and it's formatted like a function okay and we pass in min width and we're gonna do 700 pixels oops the hell is that 700 pixels so basically what this means is that any styles we put inside of here are only going to be in effect if the the width is above 700 pixels so to test this out let's do body will just say body display:none and save so if I take this and I make this bigger once we get to 700 pixels you'll see that the body just disappears so we know that the media query is in fact working so I'm gonna keep it around here while we do our development now yeah so we'll go like that and we'll get rid of that that was just a test now in here we want to apply our grid class okay so let's go ahead and add dot grid so we need to set the display as grid for any elements that have this class let's save now we're not gonna see any difference yet what we want to do is apply the grid template column property so we want grid template columns now I would if you don't nothing about the grid I would suggest watching the grid crash course because I go over this a little better but basically we can split our columns up into whatever we want we could use pixel here so if we said 20 pixels 20 pixels 20 pixels it would give us three columns of 20 pixels but we also have what are called fractional z' they'll take the the space as a whole and divide them into fractions so if we say one F R 1 F R 1 F R 1 F R that will give us for fractional so it'll be basically a four column grid so if I save that it's going to look like this and what it's done is it's taken everything that we applied grid to and it put it it put everything into one into the first column so if I open up my element selector here and I hover over the head or you can see that there are four columns for for fractional z' okay so what we want to do is take the content wrap see how we have a class of content wrap in all of these we want to basically take that content wrap and we want to say we want to span it from two to four so I I wish this would stay when I go up here but basically this first line is to okay and we want to expand it to four which is this line that's going to be right there we want the content to be within that area okay so that's why I said it's gonna kind of work as a container so to do that what we'll do is add our content wrap class and we also we actually also want to do this for our UL and Section B so we're going to put a comma here and say section b UL which I like to put this and put this on a separate line like that and then we're gonna say grid - column and we want to say we want to basically range it from two to four like that so let's save and there we go all right now this still doesn't look right because well let's let's see so you can see it's ranging from two to four but I want that's the two middle this is kind of hard to explain guys the two middle columns I want those to be wider than the ones on the side okay because we don't want it this and you know we want it wider we wanted to come out here so to do that instead of doing just four of these these one fr-s we're gonna replace the middle two with a repeat okay so basically repeat we'll just like if we say repeat one fr twice save save that'll do actually alone was that right no that just went back to normal if we say repeat to one fr and save it's the same thing it's just like saying one fr four times but what we're gonna do is instead of just doing one fr right here we're gonna put in a function called min Max okay min max which we're gonna take and it takes in a min and the max so we're gonna say Auto which is the default so basically if it's smaller than Auto then we want this to be the size 25m okay so this is gonna change the sizing of the middle two so let's try this let's save it and now you can see if I hover over header actually it let's make this a little bigger because you'll be able to see it a little better now you can see that the middle two when the the browser is at a certain size they're going to be 25 m wide all right so both of these two columns in the middle together equal 50 M all right and then you can see the sides are much smaller and it's the smaller that this gets the smaller the side columns get see how small they are now until you get to a certain point where they're basically just not well the mole basically the grid isn't working anymore because we set the grid to only be in effect when it's at 700 pixels or less okay or less than 700 pixels so I hope that made sense and you can see that also worked here and down here if we look at this area this doesn't look right okay so basically what's going on here is these are taking up one column and we need these to span to and what I mean is that the boxes and also the divs in the footer all right if we if I make this bigger and I look at see let's hover over section D I believe this is section D and you can see actually I make it a little bigger so we can see all the columns alright so they're taking up one we need these to span two ok so contact us should come out to here so it should span two and then about should be from here to here okay so that's really easy to fix and same thing with the footer so what we can do is go into our CSS and go down to the media query and we're just going to add our box class and we're gonna add the main - footer div okay make sure you put the div in there and then we're just gonna set what are we gonna set we're gonna set the grid column grid column - - and save I'm sorry grid column span we wanted to span to save and there we go so now that looks correct they're basically each spanning two columns of the four okay same thing with these alright so we are getting there let's see what do we want to do next now up at the top this right here if we look at the original you can see that it's split the paragraph is split into two columns so we want to do that we want that effect so let's go right here and say actually it's an ID section a and then we want content - text and basically for our content text we want to set it to two columns columns to save that didn't work you know what yeah my god I don't add it I forgot to put in the content content text class so in Section A this paragraph right here should be wrapped in a div with the class of content text I forgot all about that sorry guys so that should be wrapped like that all right and then we'll save and now you can see it's separate now we still have some issues here one I want to increase the gap in the middle we can do that with column gap we'll set that to 2m save and then it's also kind of out of whack right here one is higher than the other so what we need to do is take section a content text and then the paragraph and sorry about that we're gonna set the margin is a margin top yeah we're gonna own on margin top padding top sorry so padding top to zero and there we go alright so no matter how much text you put there it's still going to work so it's scalable all right so that's set now basically all we really have left is the the the you ELLs the cards here we want these to span across three so what we're going to do is we're gonna set those is we're going to set the UL to a flex item so I believe it's section be ul and we're gonna set display flex and save alright so just doing that you can see made them all go all aligned horizontally now we want to set the width of the L eyes so we're gonna say section - BL I I'm gonna set the width of these to 31% and save okay and now we just need to justify it so we're gonna say justify content and we want to use space around okay so space around and if you haven't if you don't know what this is I would suggest watching my flex what is it flex box in 20 minutes space around basically is gonna take any extra space you see how there's extra space over here it's gonna put it around the whole thing and in between each each flex item alright so I'll save and you can see that it dispersed that space into where it needed to go around and in between alright so hopefully that makes sense and I think we're done yeah so that's it guys let's just take one more look if we maximize this alright so it looks pretty good pretty simple but you know I think it's it's nice and clean and the mobile view looks good okay once we get down to 700 pixels alright so hopefully you guys like this and hopefully it sheds some light on using grid CSS you know just using a more modern approach and in creating your layouts so if you liked it leave a like leave a thumbs up if you are not subscribed and you like this kind of thing please subscribe follow me on social media join the discord you know check out my courses at traversing mediacom anything you guys can do I appreciate and thanks for watching so I just want to give another shout out to male tag who sponsored this video male tag is a free Chrome browser extension that allows you to track your emails in real time I've been using it myself for about a week now and I can't recommend it enough on top of email tracking mail tag has a bunch of other features like desktop push notifications that alert you when your emails have been opened link click tracking that shows that people have actually clicked on the links in your email and a ton of other cool features again all these features are completely free be sure to check out male tag and click that link in the description

Channel: Traversy Media

Views: 380,194

Keywords: css grid, css grid layout, css grids, css, css3, grid, grid website, flex, flex grid

Id: M3qBpPw77qo

Length: 49min 8sec (2948 seconds)

Published: Fri Nov 10 2017