Responsive Element Items

[00:00:00]
>> Jen Kramer: Did you get the layout done? Maybe the devs weren't going in the right direction yet? We're getting there. One thing at a time. So, what did you wind up doing? Anybody wanna describe what they did? You change something to 8?
>> Speaker 2: The width to 8.
>> Jen Kramer: You change the width to 8?

[00:00:15]
>> Speaker 2: Yeah.
>> Jen Kramer: Okay, what did you do?
>> Speaker 2: I changed the width to 11 and then just moved up the first and main.
>> Jen Kramer: Okay
>> Speaker 2: So I don't have to repeat it
>> Jen Kramer: Changed it to 11, how did you get 11?
>> Speaker 2: 5 and 6.
>> Jen Kramer: 5 and 6, right, 5 and 6, from the top, we know the 11 column layout.

[00:00:33]
Let's move the other two down and make those 11 columns wide, right? So, that's what I have here. And then you're gonna have to rearrange some of your code again. So, here, then main will become a columns of 11, right? First and main are actually the same here.

[00:01:02]
>> Jen Kramer: So we'll just pull those on up, okay? Devs, devs is now gonna be what? I will just copy these up.
>> Jen Kramer: So, devs is going to be 11, right? And resources is going to be 11 also. And do I have them in the right order here or do I need to rechange that, right?

[00:01:25]
I think they swapped again, didn't they? Okay, so we're back to 3 and 4 here. Okay, cool. So, now at this point, then you should have a fully working layout here, all right? So we go from that, to this, to that. We've got stuff stacked up underneath, which is great, okay?

[00:01:50]
And then, finally, we'll go to that. Okay, so somebody had a question online about screen readers. And the answer is we don't know, basically. This technology is so new, I would imagine most screen readers actually haven't even caught up with it yet. So, as always, test with the screen readers to see what's gonna happen.

[00:02:11]
But this is such a powerful technique, they're gonna have to catch up, right? They're totally gonna have to catch up. Okay, so the next thing we need to deal with then are these developers, yeah? Okay, so let's deal with these developers. So the developers need to go somehow.

[00:02:32]
First of all, they need to go horizontal, right when we get we get to this dimension here. Those developers need to go horizontally across the page, right? And then they pretty much need to stay that way for at least a little while. At some point they go to two columns, as I recall.

[00:02:57]
>> Jen Kramer: So, does anyone have any ideas of how we might go about making that work? There.
>> Speaker 2: Might be flex direction.
>> Jen Kramer: Okay, yep, flex direction. So we could go write out a whole thing here, we could turn them into flex box, right, put them on a row, etc,, etc.

[00:03:16]
Could we actually use the code we already wrote to format our developers?
>> Jen Kramer: Sure, why not. Let's use the code we already wrote to format our developers. How would that look? Devs ul, right? If we take a look at our HTML here, these are in figure captions, and so forth, or go up a little further.

[00:03:48]
These are list items, right? We have a ul and an li for each one of those. And then inside of them is the whole figure, right? So, what’s gonna be our flex container? The ul, what’s gonna be our flex item? The li, right? My gosh, we can just supply what we already have, can't we?

[00:04:05]
So, here what we just need to do is say, display, flex, okay? Flex-flow row wrap, justify-content, space-between, okay? And if we take a look at our mobile mockup here, you see that they start off in two columns, right? So let's set our columns to 2.
>> Jen Kramer: Yeah?
>> Jen Kramer: And then for our logic, all we have to do here is say, section, what, devs li.

[00:04:54]
Done. [SOUND] Isn't that amazing?
>> Jen Kramer: Okay, and then probably in addition to that, let's initialize our variables for the devs. So, devs li, we'll have a width of 1, correct?
>> Jen Kramer: Because we wanna have two next to each other, right? So the width is 1, the columns are 2, we wind up with two boxes next to each other, makes sense, okay?

[00:05:34]
So, if we go on ahead and save that, and we scrunch ourselves down to mobile here and refresh the page. And we take a look. Lo and behold, there's our developers, yeah? Nice. All right, so if we scrunch, those developers are down. That doesn't look so bad there on mobile, does it?

[00:06:00]
Not too bad, okay. So, when we get bigger, in our various media queries, now we need to go through and change some values right? Is it just at the last one? Let's see here. So starting at medium, we actually need to put them all in a row. So, how are we going to do that then when we get to our next media query?

[00:06:25]
How are we going to put all of these devs in a row, all going across, just like that? What are we gonna do? First of all, how many columns do we have? Five columns. Each item is one column wide, right? Okay, so let's go on ahead and do that.

[00:06:47]
>> Jen Kramer: Scroll on down here to your 740 pixel media query. So, this is gonna be devs ul, right?
>> Jen Kramer: And our columns.
>> Jen Kramer: Become 5, okay? So,
>> Jen Kramer: Let's see what that's looking like.
>> Jen Kramer: So there's our devs, two columns of them, until we hit our media query.

[00:07:14]
There we go. There they are, all five of them. And then we can just sorta make them bigger. And actually they wind up going back to one on top of each other here because there's just no room for them, right? But for completely sake we can go ahead and put in the revised value for columns, which would be what?

[00:07:45]
>> Jen Kramer: What would that be here for 1200 pixels?
>> Speaker 2: One.
>> Jen Kramer: One column, right? Width is 1.
>> Speaker 2: It's not meant to be columns [COUGH].
>> Jen Kramer: Yes, column, sorry, columns.
>> Jen Kramer: So yeah, there we go.
>> Jen Kramer: All right, now, one other question for you. Are you happy with the gap here between the developers?

[00:08:20]
Let's just make sure that we're happy with that gap.
>> Jen Kramer: So, they get down to looking like that. Are you happy with that?
>> Jen Kramer: What if we wanted a different gap for the developers? What are we gonna do?
>> Jen Kramer: Anyone have any suggestions?
>> Jen Kramer: What is controlling the width of my gap right now?

[00:08:50]
>> Speaker 3: We could either restate the gap property or change the decimal multiplier into its own variable.
>> Jen Kramer: We could change this 0.3% into its own variable, couldn't we? And then we just need to change the gap wherever we go, right? That little constant multiplier number, right? So let's just go ahead and do that.

[00:09:10]
So, I'm gonna add to this then a gap constant, because that's basically what it is right, of 0.3%. Okay, and then all I have to do now is swap out the hardcoded 0.3% here, and just say var.
>> Jen Kramer: Gap constant.
>> Jen Kramer: Okay, so that shoild do exactly the same thing as what I had before.

[00:09:42]
Now, for my developers, I can just change that, right? So if I want a little bit of a fatter gap here, I could just say gap constant is, let's say, 3%.
>> Jen Kramer: Sweet, now it's totally flexible. You can lay out anything using exactly the same logic anywhere you wanna go on your web page.

[00:10:08]
So, now we've laid out the whole logic of the whole web page, we've laid out the developer potion of it,
>> Jen Kramer: That's amazing, and it only takes a few lines of code. Look how dry it is