The Responsive Split Design Pattern in Flexbox

[00:00 - 00:05] Okay, welcome back everybody. So we have this split component.

[00:06 - 00:11] It's working great. Except for when we get to these lower screen sizes, it looks horrible.

[00:12 - 00:39] What we would like to do is take advantage of the flex properties and have some intrinsic rules that when we hit certain widths that we move to a stacking layout so that the layout looks a lot better on smaller screens. First thing we're going to do is we're going to define some rules so that way if we can, both sides cannot maintain at least 50% that we're going to stack.

[00:40 - 00:46] So first thing we're going to do is we're going to say flex wrap. We're also going to calculate the largest width.

[00:47 - 00:58] And what this is basically 100% of the containing box that it's in minus whatever gutter size we choose here. We can take advantage of this is the first child.

[00:59 - 01:07] We're going to set the basis of this first child, this first panel to be 50% of this largest width. That's pretty much what we were doing before.

[01:08 - 01:19] But the second child, we're actually going to say the basis is zero, meaning we 're not going to try to get any width by default. We're just going to let it have it's own intrinsic size.

[01:20 - 01:36] And then we're going to also say the minimum size that it has to be is at least 50% of the largest width. And then we're going to set it to grow at a rate of 999 or basically we just want it to grow more dominant than this one.

[01:37 - 01:50] So that's allows us to if we want to do the quarter split, we just have to set the first item to be one quarter and the second item is going to grow. At this size, if we can't maintain both items can't be at least 50% it's going to wrap to the next row.

[01:51 - 02:06] And the same is going to be true if we for let's take the one quarter, if we can't maintain at least 50% is going to wrap to the next row. So that's a good default.

[02:07 - 02:26] So that way intrinsically, we're also going to stack a smaller container says if we can't maintain at least 50% on both in both of these elements. Now the next thing we're going to do is we want to be able to set the minimum item width of both of these items here.

[02:27 - 02:42] Let's say we we come in here to this hero and we want to set each panel to be at least 40 characters wide to do that. Let's go ahead and copy and paste some code here.

[02:43 - 03:06] And this pretty much what we just did except for when we're adding a new custom property here called min item width. And we're setting this flag spaces to be the largest of either the minimum item width or that 50% split or if we wanted to be a quarter split, we would do 25% or one third split, 33% and so on.

[03:07 - 03:12] Let's go back to that 50% split. And we still have like grow on that flag space is set to zero.

[03:13 - 03:39] In this case, we want either that 50% split or the minimum item width, which is if it's not said it's going to be zero or 100% whichever smaller. So if we if for some reason we set the minimum item width has 500 pixels, but the actual container is 400 pixels, we want to be 400 pixels.

[03:40 - 04:00] So that's one calculation, whichever of the smaller of these two, we're going to take that value and compare it to this value and whichever is larger, we're going to take that how you make that the minimum width. That way, we can come in here and at 40 characters, we can say, oh, we need to go to the next row.

[04:01 - 04:14] Now the final version, the final tweak we're going to make here is being able to define a size that we want to switch the split panel to a stacking layout. So a switch at property.

[04:15 - 04:25] So let me first add that code and we'll go into how that works. So we've added a new property called switch at and we're doing the same check here.

[04:26 - 04:46] We're doing the flag spaces is either the minimum item width of zero or 50% so that doesn't change, but what did change is the flex basis, we are no longer just assuming zero here. So what we're going to do is we're going to calculate the flex basis differently.

[04:47 - 05:06] So we're going to say this flex basis is going to be the maximum value of either the switch at value or whatever the largest width, whichever is larger. So let's say this is 200 pixels and the largest width is one 300 pixels.

[05:07 - 05:23] This will be larger. If this is not defined, so zero pixels, the largest, this largest width is going to be what's larger or in the case of maybe this is 300 pixels, but the largest width is actually 200 pixels.

[05:24 - 05:34] We're going to go with the switch at and then we're going to take that and subtract that from the largest width. And then whatever we get there, we're going times it by 99.

[05:35 - 05:48] So let's show that in action. Let's say our switch at is equal to 300 pixels and our largest width currently 1500 pixels.

[05:49 - 06:00] In fact, let's change this list just to make this math this hot really easy. So the largest pixels is 1500 pixels and the switch property is 1200 pixels.

[06:01 - 06:11] And because currently the largest width is 1500 pixels, we're going to take 1500 pixels minus 1500 pixels, which is zero times 99. So ultimately that's zero.

[06:12 - 06:22] These larger widths, the flex basis is going to be zero. Once we get down below 1200 pixels, let's say we're around 1100 pixels.

[06:23 - 06:32] How the largest width is about 1100 pixels. We'll just say now the switch at is the larger value and not the largest width.

[06:33 - 06:43] So we're going to take this 1200 pixels and 1200 minus the largest width is going to be 100 pixels, right? Okay, that's fine.

[06:44 - 06:50] But we're going to multiply that by 999. So now that's going to be 999 hundred pixels.

[06:51 - 06:58] Obviously, we're never, it's not going to actually stretch it out to that larger pixels. It's never going to go over 100%.

[06:59 - 07:21] Basically choosing a really large number so that this second panel is going to be 100%. That's what was happening here is by setting this flex basis using this calculation, we're saying once we get our largest width below our switch at value, this calculation is going to go to some extremely large number.

[07:22 - 07:31] But given that flex basis will never be larger than 100%, it's effectively saying, let's just make it 100%. Why would we do something like this?

[07:32 - 07:43] We do this if we're like, I want a two panel split, but once we get to 1200 pixels in this case, it doesn't look good anymore. We want it to force it to a stacking layout.

[07:44 - 07:58] This allows us to define that without having to use media queries, we can just go ahead and say, hey, with this split panel, we want you to just be at least this size. So the next question is how do we implement that for the other fractions?

[07:59 - 08:18] I'm going to give this code and I'm not going to go into death, but this is basically how the other fractions are calculated. I'm going to share this code, let you look at it and see how it's calculated, but basically for the one quarter, one third, one half split, we are doing a variation of this calculation up here.

[08:19 - 08:34] And for the two thirds and three quarter, that's that we're doing that same calculation, but we're doing it for the second child. Now in the case of the one fourth, one third and one half, the second child is going to be that same calculation.

[08:35 - 08:50] But we got to do a slightly different one for this first child of the third quarters and the two thirds split. We just have to do a slightly different minimum in line size, but essentially, but it's just to do exactly the same thing.

[08:51 - 09:07] So we're going to share this code, you can look at it and analyze it in more depth, but that's responsive version of the split component. It's a little bit more complicated, it's a little bit hairy to look at, but the upside is we have much more capability, much more freedom to do different things because of that.

[09:08 - 09:21] Okay, let's go ahead and practice what we just learned. In this practice, I don't need you to mess with this app file because already lay that way I want what I want you to work on is our card file.

[09:22 - 09:38] And what we want is we want each of these cards to work differently depending on their context. When they're wider, I want it to be split, but once the card gets narrower, I want it to go ahead and stack.

[09:39 - 09:47] So that way you can you get this effect. So go ahead and pause the video, implement it, and then you can come and see how I implemented it.

[09:48 - 10:06] So what we have here is we have a fraction of one quarter, but we've set it to switch at 60 characters. And that way now the product card, once we get to certain layouts, it's going to split depending on what available space it has.

[10:07 - 10:12] So that's the responsive split. So I'll see you on the next lesson where we'll talk about the next design pattern.