CSS Grids and Flexbox for Responsive Web Design Code Demo: Exercise Solution for Desktop

Transcript from the "Code Demo: Exercise Solution for Desktop" Lesson

[00:00:00]
>> Jen Kramer: We are gonna go ahead and do this together. If you go into chapter three, the flex box grid set of files, and go into the begin folder. Go ahead and open up Flexbox.html and Flexbox.css. Those are gonna be the files that we're working with. And just to get us started, I'll go ahead and open up the page currently in the browser.

[00:00:24] So it looks pretty much the way you might expect. It's the same pies that you saw before, stacked one on top of the other, all right.
>> Jen Kramer: Cool. So we wanna go ahead and start this off in our grid system. So let's just start here with the HTML, what would people recommend as a first move to make in this HTML to set this up as a grid system?

[00:00:57]
>> Jen Kramer: Something that's really obvious we can do immediately.
>> Student: Add the row class?
>> Jen Kramer: Let's add the row class, right, So we have all these divs here, add to that a class of row. So let's go ahead and set those up. So div with a class of row, another div with a class of row, another div with a class of row, and another div with a class of row.

[00:01:24] Okay, so let's write a corresponding style for that. So in our Flexbox.css, this is pretty much what we had before for the floats, at least at our starting point. We have our border box model in place. We have some sort of basic styling for the page. And then down here is our grid system and our media queries.

[00:01:47] So does anybody have suggestion for how we can start the row class? And where am I going to place it on the stylesheet?
>> Student2: Let's put it right where your grid system starts maybe.
>> Jen Kramer: Okay, so we're gonna put the row class right here. So in other words, in the mobile section, outside of a media query, we wanna put the row class, okay.

[00:02:12] And that is reasonable, right? Because we're gonna be using flexbox on all of these dimensions. You have to have a parent and the child. The flexbox container of the flex items. So this needs to be outside of the container. What are the kinds of property-value pairs I'm gonna enter here for my row?

[00:02:31]
>> Jen Kramer: What is one of the first things that I need to put in place? Yes.
>> Student2: Display flex.
>> Jen Kramer: Display flex
>> Jen Kramer: Awesome. Okay, without that we have no flexbox, right. So we gotta have that. What would be the next thing that would follow on after that. Pull out your cheat sheets here, refer to them so you can remember what the properties are.

[00:02:56] What is the next thing we should put in, now that we've got our display flex in place?
>> Student: Flex direction.
>> Jen Kramer: Yeah, so a flex direction and a flex wrap. Or alternatively we could just do a flex flow, which I'm gonna do, a flex flow of row and wrap, okay.

[00:03:17] It's a webpage grid system, we pretty much build these based on rows. So this is probably the values that you want. Let's start with row number 1, here, and let’s work on it for the desktop. So row number 1, we wanna put four boxes all next to each other here at the desktop dimensions.

[00:03:41] So four kinds of pie all next to each other. How would we go about writing? First of all, what should we call this class? How are we going to apply it here in our HTML? And then let's write some CSS for it. So if we call this class, what?

[00:03:58] What would be a good name for this?
>> Jen Kramer: Should we just call it col 1? Col 1, col-1. And we're gonna go ahead and put that col-1 for these first four articles. So line 14, line 20, line 26, and line 32, okay? So there's our four boxes here.

[00:04:30]
>> Jen Kramer: And then let's go ahead and write a style for this at the desktop dimension.
>> Jen Kramer: [COUGH] So what would the style look like? It's gonna be col-1, and what would be the properties that would be associated with this?
>> Student: Flex-basis.
>> Jen Kramer: So maybe a flex-basis would be a good thing to have, okay.

[00:05:03] So if we said flex grow, shrink, and then we need a number for the flex-basis, right. So what would be a reasonable number for that?
>> Student2: Should we keep the same ones that we were using before?
>> Jen Kramer: Sure, that layout worked with the floats, so what might be a reasonable number here to add for the basis?

[00:05:23]
>> Student2: 20%?
>> Jen Kramer: 20%, okay. So instead of calling it width of 20%, we're gonna call it a flex-basis of 20%, okay? So if we were to look at that in our browser right now, how would it look?
>> Jen Kramer: There's row 1. Is that what you want?
>> Jen Kramer: Are you happy?

[00:05:55] Any designers in the room?
>> Student2: We could use more margins.
>> Jen Kramer: Probably use a little margin in there, couldn't we? Okay, so one thing we could do would be, I'm gonna put this outside the media query here. And we can use our fancy attribute selector, class*=,
>> Jen Kramer: col-1, all right?

[00:06:31] Sorry, col, not a hyphen one, cuz we're gonna have other ones. And we could say that the margin would be, let's say 0 on the top and bottom, and 4% on the left and right. So that would match what we had before with the floats. We put the 4% only on the left, here we can sort of do it this way.

[00:06:58]
>> Jen Kramer: All right, so if we did that,
>> Jen Kramer: Let's see what that looks like.
>> Jen Kramer: Okay, I probably put a little bit too much margin on that. So maybe here in my col-1, maybe I want that margin only to be on the left or something.
>> Jen Kramer: Let's say that's margin-left, 4%

[00:07:30]
>> Jen Kramer: Okay, and now when we refresh, it'll all go on one line. There we go.
>> Jen Kramer: And if you want the fancy color, we can add that too. I'll just go ahead and put that here, col-1, background-color, fffc.
>> Jen Kramer: Okay.
>> Jen Kramer: All right. So let me show you the code.

[00:08:09]
>> Jen Kramer: And I'll give you just a second here to catch up with what I did. [COUGH] So once again, we have our row on line 34. We have a display of flex, flex flow over our wrap. So that's setting up our entire sort of flex system. We have a left margin of 4% on all column classes, with one existing so far.

[00:08:33] And then we're putting in our individual sizes using flex-basis on the desktop. Okay, so how about row 2?
>> Jen Kramer: What are we gonna call these boxes?
>> Jen Kramer: We add article class to these and call them col-2, cuz we're super creative people.
>> Jen Kramer: Okay.
>> Jen Kramer: And now that we've got that, what should we do here with our grid system this time?

[00:09:15]
>> Jen Kramer: So we just created a class of col-2.
>> Jen Kramer: What did we want col-2 to look like?
>> Student2: Twice as big as col-1?
>> Jen Kramer: Twice as big as col-1, right? We want two columns, each of which is two columns wide. So our class for this,
>> Jen Kramer: col-2, what are we gonna put in here this time?

[00:09:45]
>> Student2: Flex.
>> Jen Kramer: Flex: 0 0
>> Jen Kramer: Anybody know? If you take a look at your float code, you might have some hints in there.
>> Student2: Is it 44?
>> Jen Kramer: Yeah, how about 44%. Do you guys know how I get these numbers?
>> Student: It's out of 97.
>> Jen Kramer: Let me put back up the PowerPoint slide here

[00:10:15]
>> Jen Kramer: This handy, handy item here. Okay, so if we've got 4%, right, on the left, right, 4, 8, 12, 16. We don’t specially call out 4% here, but it works out to be that, right? That’s sort of the leftover margin, because each of these is 20%, right? 2, 4, 6, 8, add to that to the 16 of margin, we have 96% total.

[00:10:41] So the remaining 4% winds up over here on the right, right? So far, so good. If we wanna go to two, two of two, right, then we're going to take our 20% plus our 20% and what?
>> Student2: The margin between them?
>> Jen Kramer: The previous margin that was between them, which was 4%, and that becomes 44%, right?

[00:11:07] Okay, so what's the number for three wide? Somebody do the math here, and figure out what three wide is?
>> Student2: 68.
>> Jen Kramer: 68, correct. So 2, 4, 6, plus the 4, 8, right, 68. And then the total width, if I said it's totally going to take up the full width, but of course I still want the margin so it all lines up and looks pretty, what would that full-width number be?

[00:11:43]
>> Jen Kramer: [LAUGH]
>> Student2: 92.
>> Jen Kramer: Yeah, Peter's the one who's doing the math in here. So 2, 4, 6, 8, okay, 80%, plus the 4, 8, 12. So 80 plus 12, 92. Or you could just say 100 minus 8%, right, 4 and 4 over here. Does that help, where those numbers come from?

[00:12:10] Okay, so let's go on ahead and add these. Then we can just assume that we're gonna have a col-3. And we assume that we're gonna have a col-4.
>> Jen Kramer: And go on ahead and drop in those flex values then for those properties.
>> Jen Kramer: Okay.
>> Student2: Well, I'm not sure the context exactly matches, but why not use justify-contents space-around in the row in order to give us the margins?

[00:13:10]
>> Jen Kramer: Use a my content space?
>> Student2: Justify-content space-around.
>> Jen Kramer: Why not just use justify-content for these rows? Because we're working with flexbox, so in order to get a grid system that works, that's sort of locked into place and is reliably displaying across different screen sizes and doesn't do weird things, the margins here are more rigid and less flexible.

[00:13:40] So basically what we've done here is we've broken, believe it or not, we've broken all of those justify-content properties in favor of working with margin here, because now I can specifically say I always want 4%. Otherwise what's gonna happen is, you'll wind up with several rows. And then, depending on what content you have inside of that, your boxes may or may not line up exactly so.

[00:14:04] And so you'll wind up with stuff all over the page, and the designers will have a fit, right. So we're using margin, which is very firm in the context of this grid system, okay. We'll come back to things like justify-content and so forth when we get into flexbox the right way [LAUGH].

[00:14:24] Okay, everybody else doing all right so far?
>> Student2: Yeah, similar question around where we were border boxing, why not just set it to 50% and set padding and do away with the pesky margins? But like you said, we're taking control here and-
>> Jen Kramer: Exactly, yeah. Some people prefer to work with that padding model, and if you wanted to do that, you could go ahead and give it a try.

[00:14:52] Most of the grid systems, if you take a look at them, most of them are doing it this way. They're working with the margin instead of working with the padding. So I would say experiment and see what works best for your particular situation. That would be our desktop CSS.

[00:15:08] Let's go ahead and apply it in our HTML. So we have our call tos are in place. And then in the first row 4, I apologize for that, a little typo there, it should be row 3, line 55 should be row 3, we'll go on ahead and set our first article here to a class of col-1, and our second article to a class of col-3.

[00:15:38] And then in our last column, we can set our article here to a class of col-4.
>> Jen Kramer: [COUGH] Which is exactly the same HTML that we had with our floats, by the way. Except for the tweak that we're gonna wind up having to make with those one column wide boxes we'll come to in just a second.

[00:16:09]
>> Jen Kramer: Okay, and then on the CSS side of this, if you wanna add more of the fabulous colors,
>> Jen Kramer: For column 2, 3, and 4, I find these helpful because then it helps me identify visually at least where these started and what their classes are. And so we'll go ahead and set these up.

[00:16:36] col-2 would be ccf, col-3 would be fcf, and col-4 would be cff. All web safe, actually, if those things still exist, which they don't. All right, and if you go on ahead and save all of that and take a look at this at a desktop dimension,
>> Jen Kramer: You should wind up with something that looks kinda shockingly familiar, right?

[00:17:12] So we've got four, we've got our two and two, our one and three, and our four down here at the bottom.