Medium Design Desktop Layout Exercise

[00:00:00]
>> So the last thing we have to do then is getting our desktop layout in place. So let's do a quick check of that. Okay, we did not finish the desktop layout. Let me find you the desktop layout here. Okay, so the desktop layout will wind up looking like this.

[00:00:24]
Remember, it's still gonna have the gradient on it. The screenshot doesn't have it because it'll look really ugly if it does, just the way the screenshotting software works. So what we wanna do is we wanna put our reviews over here in a column by themselves. In the middle, we're going to have our album and our audio player.

[00:00:41]
And then on the right hand side, we're going to have our new album and we're going to have our tracklist. And then down here at the bottom of all that, we'll have our footer and of course on the top of all that we will have our navigation. Okay, sounds good.

[00:00:59]
Should I give you guys a chance to see if you can make this happen on your own? I think at this point you should be able to do this on your own. All the code is written. What is our approach here? Does anybody have a suggested approach for this?

[00:01:11]
>> Grid.
>> Grid.
>> Probably grid, right? So, if we're gonna do grid, we have an outside wrapper, right? Which is our wrapper, inside we have our elements, yeah? So, we can set up grid and we can tell everything where to go and it should just work, right?

[00:01:34]
Okay, So we're starting from this state. Go through a detail, a more detailed answer. We're starting from this state, right? This works great. Looks good on mobile, looks good on tablet, perfect. So now what we need to do is we need to get this into the columns. So we need to have the reviews on that left-hand side, the album, and the audio in the middle, everything else on the right-hand side, and of course, the footer across the bottom.

[00:02:08]
So how do we go about doing all of that? By the way, pro tip, many of you forgot to copy over your JavaScript for the audio player. So if you forgot to do that, you'll know because your audio player, the button here will just be a green circle.

[00:02:25]
It actually won't have the triangle in it. That indicates that there's something wrong with your JavaScript, I've noticed with this particular little bit of code. So make sure you've copied over your JavaScript so that you still have the ability to play this track. Okay, so then let us go to work here on our CSS.

[00:02:44]
So I'm just gonna flatten down all my layers here got a bunch of layers. Okay, and what I'm going to do here is the first thing that we need to do of course is evaluate that design and think about what needs to change. So we have a header that goes across the top, we need to take the reviews which are kind of in the middle of things pull them over to the left hand side then we'll put the audio in the middle and then we'll put the other content here on the right hand side.

[00:03:17]
But the header goes across the top and the footer goes across the bottom. So you could do something as we've done many times before with grid, where you could have the wrapper be your grid container, and you could have, big layers for layers with a grid area associated with them.

[00:03:35]
That will stretch all the way across the top and the bottom. That's one approach to this. Or you could put in a little bit of extra HTML and group those particular elements together. So remember our HTML is looking like this. Okay, and so what I'm going to do, just to kind of continue to mix it up and show you there's all kinds of approaches to this stuff, we will add a div with a class of main-grid.

[00:04:11]
And I'm gonna end that just after the unnamed section. And the whole purpose of that div with a class of main-grid is to make our layout work just a little bit more easily, okay? So now all I have to do is put the cover in the middle, the reviews on the left and the album and the table will fall in on the right.

[00:04:35]
Make sense? Okay, so then I can make a corresponding layer at layer, main grid, because that's what we're going to put here. And then inside of this we need to figure out what our media queries are going to be. And you may have come up with all kinds of different media queries for what you're doing.

[00:04:59]
I'll just give you what numbers I had found worked okay for me. So I had and at media with a max width of 700 pixels. And for this, We'll see. I had a wrapper class here which will have a mean width of 325 pixels and a max width of 700 pixels.

[00:05:35]
And a padding of 01 rim to keep it off the edges of the webpage. So of course that's gonna impact very small sizes here. So when we get to mobile, right? We'll have a little bit of space on either side, just like that, and we'll get no smaller than 325.

[00:05:56]
We'll start scrolling off the screen when we hit 325, and we'll stay at this mobile dimension until we hit 700 pixels. And when we hit 700 pixels, we'll actually know because we'll see the tablet, I mean, sorry, we'll see the blue border appear around the album. There, so that's where we leave that particular media query, okay.

[00:06:22]
So then for our desktop layout, we can add ourselves an add media. And this time I'm going to do a min-width of 1025 pixels. And, by the way, we kind of have some starting kind of stuff down here at the bottom. We can get rid of this. So we can get rid of this, these other media queries that were here.

[00:06:53]
This one? Yeah, we'll just get rid of that too. Okay, get rid of those. And then in here we're gonna have a wrapper, a glass of wrapper. We're gonna have a max width of 1440 pixels. So we're gonna make it for up to a really big screen. And as always, you can put a border on it.

[00:07:25]
That will help. It never fails to help, 1 pixel solid white. We can get rid of it later. That's a debugging border that shows us what's going on here with our wrapper. Hopefully my screen can get big enough. Anybody getting a border show up? Mine is, okay, good.

[00:07:57]
Okay, then, for main grid itself, notice main grid hasn't been styled at anywhere along the way. We haven't styled it for mobile, we didn't style it for tablet, we're only gonna style it here for desktop. And so here we can say display grid. And we can say our grid template columns.

[00:08:21]
And often we use that flexible fr unit of measure, but sometimes you may want to mix it up a bit. So here what I wanna do is make my left column, 200 pixels wide. Remember we designed specifically for 200 pixels wide for that left column, right? When we worked on those reviews auto, and then 350 pixels.

[00:08:51]
So, what this is going to do is it's going to give us a fixed width left column, a fixed width right column, and all of the extra space goes to the middle of the design. Make sense? So, that middle of the design can expand and contract as needed, but those two columns will stay a fixed width because, that track list doesn't look particularly good when it gets overly wide.

[00:09:14]
And we don't want the reviews to get too wide cuz then they'll turn into their tablet format, right? So this is an approach that we can use to make that happen. And then, of course, we can give it a gap. Let's do 2rem. Okay, so if we take a look at it so far, I must have something wrong in my code somewhere.

[00:09:35]
Maybe a query. Look at that. [LAUGH] Okay, so I never close my first media query. Let me close that real quick. So there's one media query, here's the second media query. And then in theory, There we go. All right, so this tends to give us errors for these layer things here in CodePen.

[00:10:09]
This is a shortcoming of CodePen. Don't worry about it. Everything is fine. We'll Save and Refresh. Not working yet. Ha, finally. Okay, here we go. I don't know what it was, but now it's working. Okay, continuing on. [LAUGH] All right, so let me collapse everything up here. There we go.

[00:10:37]
Playlist, okay, so here inside of our main grid, we're working on our desktop media query. And so now I have my three columns and grid will assign those three columns in the order of the HTML source, right? So we wind up with our cover over here on the left side, we have our reviews in the middle, and then we have this new album thing over here on the side.

[00:11:02]
And it looks like maybe I do have some sort of HTML, problem because this rap down here underneath.
>> Those two are separate sections, right?
>> They're separate sections. And so it's grid is doing what grid does, right? It's put it down here in the next column. So that's what's going on.

[00:11:22]
Now what about this? It was all a dream. What is going on here? We didn't, certainly didn't style it this way with this grapey, huge, long column. What is happening there? Ready now?
>> There needs to be a deliver on that. And there's something around that in the tracklist.

[00:11:42]
>> Yeah, so somehow we need to group the it was all a dream and the tracklist and then that border will resolve itself. It'll fix. Because what happens with grid is this is gonna stretch all the way down automatically, and so if you don't want this effect you'll have to do something to fix it.

[00:12:00]
Make sense? Okay, great, so phew, let's group together our two sections here. We don't actually even need a class for this or anything. We can just say div and /div. The whole purpose is just to group them for grids for grid and we don't have to tell grid to do anything.

[00:12:25]
So, just by putting that div in place, then those two items wind up here in that column all together, exactly as they should. Yeah? Make sense? Okay, so, now with we need to do a swap here for ordering, right? So we can say our .cover. And that of course comes from our HTML.

[00:12:50]
Inside of our main grid, we have a section with a class of cover that includes the album cover plus the audio player. We'll just say that that is going to go to order two, and what will happen is where is this gonna go when I make the screen bigger?

[00:13:10]
Is it gonna go to column one, to column two, or column three? How many people say it's going to column one? How many people say it's going to column two? How many people say it's going to column three? One person says it's going to column three, one person says it's going to column two, and the rest of you didn't vote, cowards.

[00:13:29]
Cowards all of you, okay? So the answer is, it will go to column three, why is that? We said order two, but I went to column three, why did that happen?
>> Because it's the only thing that has order, and thus it's going to be positioned based on the fact that the others are by default order one.

[00:13:49]
>> Exactly, exactly. So the other things don't have an order yet. So it goes over to the very end. All right, so that means we have to assign something else so we can say our. Let's see, actually I wrote this style, main grid aside. Aside, I don't have an aside anymore, I have a div.

[00:14:22]
Div last child [LAUGH] Why did I write that? Basically, I'm targeting this div right here, which is this is the last child in the main grid. So that will we'll put that as an order three, okay? So cover, that's the cover with the audio, is now order two, that the track list is now order three, and the reviews have no order.

[00:14:59]
So in what order are those going to display? Reviews is gonna be in what position? We haven't assigned an order to it, so it will show up in the first position, right? On the left. The album cover will show up where? In the second position, in the middle.

[00:15:21]
And where will the track list show up? Over on the right hand side. That's our theory. We're sticking to it. Hey, there we go. Okay, looking good. And there's our border here on the outside. So we have a couple little clean up things to do. First of all we wanna have these all evenly to the top of the page, what's going on here?

[00:15:47]
Why isn't this even with the other two?
>> We assigned a margin to it.
>> We did assign a margin to it, didn't we? We assigned a margin to this thing in an earlier style somewhere. You can dig into it and find it eventually. So I'll spare you that trouble.

[00:16:03]
It's called .album is the class for that. And we can just say margin top of 0. Okay? So now, they're all the same height. For the navigation, we may want to play around with, continue to play around with this a little bit more. We may wanna push our navigation in a little bit.

[00:16:34]
So these are all now tiny tweaks, right? Everything is generally in the right spot, so now we just do a couple little tiny tweaks. And so I can take out my border on the wrapper for my navigation. We'll see. Actually, that's top. We might do something like a max width of 850 pixels and a margin of four REM auto and that will push this in.

[00:17:09]
When we get here to desktop, yeah. So it's not quite all the way to the edges of the page, that's up to the designer if that's the look they want, well, we can give it to them, right? And then of course you could do something like with your rapper we currently set it to 1440 bands a little big maybe we actually want it more like 1200 pixels.

[00:17:34]
And then that way, my screen won't expand any larger than 1,206, [LAUGH] But in that way we can reduce how wide it's expanding, and you can stick some whatever, a margin on that or whatever. So you could say something like margin. Let's say two REM zero. So we're gonna put margin on the two sides and then that way our images won't be cut off on the edge of the page if you can make your window big enough.

[00:18:14]
And right now I can't make my window big enough, unfortunately. Actually I've got those numbers backwards, don't I? I do should be zero to REM. Sorry, zero to REM. Let's try that one more time. Like that. Cool? Probably one of the more complicated pages some of you have ever made, true?

[00:18:46]
Yeah? Nice, so, congratulations everybody, you did it, you survived, you made the medium design. [APPLAUSE] Fantastic work everyone