CSS Grids and Flexbox for Responsive Web Design Mondrian Painting 2 Exercise Solution

Transcript from the "Mondrian Painting 2 Exercise Solution" Lesson

[00:00:00]
>> Jen: So we had our painting here, and while I was working on this for the answer I started to put this together, and then it was only later that I realized the d is actually slightly shorter than b is. Did anybody else get tripped up by that? b and d are not exactly the same height, so there's an extra row in there perhaps that you might not have factored in.

[00:00:26] That was sort of the one tricky thing that I found about this, so I did manage to get mine looking like this, maybe yours is somewhat close to that.
>> Jen: No, Casey's shaking her head, no.
>> Casey: Not yet.
>> Jen: Not yet, okay. Casey needs some more time, and she's totally gonna get it.

[00:00:48] I know Brady got it, Jackie, you got it. Has anybody else get it? Amy got it, Peter?
>> Peter: I was pretty close.
>> Jen: Pretty close?
>> Peter: Yeah.
>> Jen: Awesome. Okay, so here is what the answer looked like here. The HTML, basically nothing changed. And then in the CSS here, so it's basically the same thing that I already showed you previously in terms of the formulas to what types of properties that I have in here.

[00:01:21] The values are obviously different for this particular painting. So I gave you the width and the height for the wrapper. I made the font size nice and big, and then we have our display grid. These were the measurements that I came up with for the grid template rows and the grid template columns, and your measurements may be slightly different.

[00:01:42] I don't profess to be super extra careful as I made those measurements, but they are pretty close. The grid gap is about five pixels in this case, and I set the background color to black eventually. And then, for each one of my grid columns, in this case it did go through.

[00:02:01] I take my little eye dropper, and figure out exactly the shade of red, blue, and yellow that I had here, so those values are reflected here. If you just said red, blue, or yellow is your color keyword, that's totally fine. So you'll see here how I set up my grid rows on my grid columns, pretty much as you might expect, all right?

[00:02:26] So probably you all would have gotten it with just a little bit more time. It's really nice to know that you now have this in your back pocket, that you can create some really wacked-out lay out with Grid, that's pretty amazing. I think in my solution here that my end statement for number nine, let me just check this real quick before I start talking.

[00:02:51] I did. One of the things I did here for number nine, [COUGH] and I'm gonna point this out as an interesting problem. So I'm gonna go back to chapter 9, which was the painting that we coded together.
>> Jen: If I show that in the browser, that was the answer that we got earlier.

[00:03:10] I actually wrote some media queries to go along with this. And so with my Harvard students, when we do this, we actually take the painting and flip it upside down, and code it upside down on a different media query. Here's an interesting thing that I've noticed about this when working here in my browser.

[00:03:31] As I start to narrow things down, it doesn't look like there's any responsiveness at all in this particular painting. What I actually wind up having to do, and I'm here in Firefox, you have to right click somewhere and you go to Inspect Element. And then, what I wind up having to do is showing the mobile dimensions like this, and then you can see the media queries.

[00:03:57] I'm not sure why this is, but it seems to be the way things are. And so for this media query I flipped the painting upside down, I made the background color green to show you that I actually did that. So I'll just point that out to you in the CSS.

[00:04:13]
>> Jen: So outside of the media query here, and this, again, is chapter 9, we're back to painting.css in the end state. Outside the media query is sort of the default desktop values, so this is not a mobile-first design. Use the desktop values that we have here. Then you have a media query here where I've actually flipped this over, and so you can see I've just coded different locations for those boxes in the media query.

[00:04:40] And then, when I get down here to the bottom,
>> Jen: The very bottom of this, notice what I've done here. All I did for my media query, for the small dimension, was this, I just said, display: block. In other words I just disabled display: grid altogether, so I'll just have these boxes stacked on top of each other, so we're no longer dealing with grid at all.

[00:05:04] And the background color in this case, is orange, just to show you that it works. And if I change the dimensions here in this view in Firefox, and you can see that in fact that's what happens, we just have the boxes stack on top of each other, okay?

[00:05:21] So this might be something to keep in mind, that you may have to come in here in order to test your various grid layouts, okay?
>> Speaker 4: Question from Josiah.
>> Jen: Yes.
>> Speaker 4: Is there any reason to not use a span?
>> Jen: There's absolutely no reason not to use a span.

[00:05:39] So one of the alternative syntaxes for the grid template, sorry, for the grid rows and the grid columns, is to use the keyword span, so 1 / span 2 or something like that. You can totally do it that way instead of specifying the two numbers. From my perspective they do pretty much the same thing, and I'm lazy, and would prefer not to type all those extra letters.

[00:06:01] But if you prefer that type of syntax, you're more than welcome to use it. My teaching philosophy on this has always been that I can really confuse everybody in the room by throwing everything at you at once. I'd rather have you focus on one syntax and get to know it really well, and then at a later point in time you can pick up the other syntaxes really easily.

[00:06:24]
>> Speaker 4: Stacy said, just a comment, she said, I put the maximum column row value as a note about each div selector, that seemed to help, because counting is hard.
>> Jen: Okay, counting is hard, and so she did some commenting for that. That's awesome, comments are always welcome. I've never heard from any developer that code is not commented enough, and I believe we're all guilty of not commenting enough.

[00:06:51] [LAUGH]
>> Speaker 4: Julian's asking, why did she use the min device width in the media queries?
>> Jen: The minimum device width in the media queries.
>> Speaker 4: That's why the resizing doesn't work normal, I guess.
>> Jen: Is that why the resizing doesn't work? That could very well be.
>> Speaker 4: Instead of just min what?

[00:07:14]
>> Jen: So just take out the device, and then it's gonna work again, is what he's suggesting?
>> Speaker 4: Yeah.
>> Jen: Okay, so let's try that.
>> Jen: Oops, get the HTML.
>> Jen: Cool, thanks for that tip, I didn't know that. Awesome, thank you very much.