2.5 Basic Layout and Background Color

Hey, welcome back to XD to code with Avocode 3. This is gonna be the last stage of our basics and preparation portion of the course. And we're gonna be setting up the main side background, so that's represented by this background rectangle here. And we're also gonna be setting up the site wrapper, which is this section here. So let's jump into our code and do some basics first. The first thing that we need to do is just a little bit of setup on the HTML and body elements. So we're going to add in the selector for our HTML element and in here we're going to set the width and height to 100%. So that we make sure that our site fills up all the space that it has available to it. In the body, the first thing that we need to do is set the margin to 0. So that we can overwrite the default margin that's automatically applied to the body usually. And while we're at it, we're also going to set the width and height to 100%, just like we did with our HTML element. Now we want to apply our background color that we have here to our body element. So we're gonna select the site background. Then over here, we can just click on this line. We don't need to highlight, we can just click on the line. And it's gonna copy the whole line of code over for us, and then we can just paste it right in. So let's save and check out the results so far. All right, so there is our background color. So far so good. And the next thing that we're gonna do in the body element is add a little spacing around the sides. So that when we start to collapse down the layout, the window doesn't end up flush down with the side of our main site area. We are already gonna be using 20 pixels along the top here, which we defined as our spacing small variable. So what we're going to do is use that same variable in our body as well, so we're gonna set up some padding. We don't need any padding at the top because we're gonna be putting a margin on our site wrapper a little later. But we will put some padding left and right. So we're just gonna say var, and then we'll grab our spacing_small variable, and paste that in here. And now to make sure that the padding in our body element gets calculated correctly, we're gonna set box-sizing: border-box. So that will make sure that the padding doesn't push out our body wider than the actual view port. So let's save that out, and now we want to add in some HTML to represent our site wrapper. So we're gonna use a main element, and we're gonna give it the class main.site_wrapper. And this is the shorthand that you can use if you're using Emmet, and then hit Tab. So now that is going to hold all the main content of our site. Save that, and now let's set up the style for this class. If we look at atom, and we select our site wrapper, you can see that we've got a width of 75 rem, a box shadow, and a background color. We're not actually gonna keep this height, because the height needs to be fluid. But seeing as we need three out of four of these lines, we're just gonna hit copy all, and grab the whole lot, and we'll just paste it right in. We don't need this comment. We'll get rid of the height. That's automatically gonna set up our box-shadow and our background color, and we're gonna make a little tweak to this width as well. Instead of it giving a fixed width of 75 rem, we're gonna give it a max width of 75 rem, and we're going to set the actual width property to 100%. So this means that when the view port is wider than 75 rem, our site wrapper is never gonna get any wider than that amount, so it doesn't end up too wide. But if the view port is narrower than 75 rem, then it's gonna go to 100% of the available space. That just gets our responsive functionality up and running from the word go, and we're also gonna need to put in some margins, for two reasons. One, because we need to center our site wrapper, and the other because we need a little spacing at the top and bottom of our site wrapper. So add in margin, and we know we want our top wrapper to use this spacing small variable, so we'll just copy it from where we used it on the body selector. And we'll add that in there, so that covers our top and bottom margins. And then in the second location here, which covers our left and right margins, we'll set that to auto, and that is going to horizontally center our site wrapper. And now because we don't have any content inside our site wrapper yet, but we want to actually make sure that this in fact is working. We're gonna temporarily put a minimum height in. And we'll set that minimum height to 100%. Okay, so there we go, that's all up and running. We've got our 20 pixels of spacing at the bottom and at the top, and our site wrapper is aligned. We've got the correct colors coming in from our design, and we also have a nice little drop shadow around the side wrapper. So that's all our basics done. We've got our images exported, our variables set up, our basic files, the foundation of our code, and our site wrapper. So now we have all of that stuff done, we're ready to start putting in the content of the site. And the first thing that we're gonna do is put together this top panel of the site, panel one. There's a few things we need to do, so we're gonna do this across a couple of lessons. And the first thing we're gonna do is set up this panel, so that it retains a 16 by 9 aspect ratio, no matter what width it has to work with. So it's gonna automatically update its height, depending on how much width it has. So we're gonna get that in place in the next lesson. I'll see you there.