Responsive Components Exercise

[00:00:00]
>> All right, your job, is there are two kinds of completed examples here. You can choose whichever one makes you happier or you can do your own design. You do whatever you want. But we've got this version, which is effectively the same or we've got this other kind of approach where you can see that the date kinda goes from horizontal to vertical.

[00:00:21]
But you get that nice like the Instagram postcard. Or if you have your own idea where you wanna combine the two, go for it. I did the first one and then decided I wanna do the second one for fancies. You can implement your own design as well or you can try out to try to match one of these.

[00:00:38]
The fun part too is you can also like peek at them and take a look as well and kick the tires on them. So our mission is let's go with this one coz this seems more fun. Unless someone wants to make a strong case to do the other one, I don't really care.

[00:01:00]
Let's go for it real quick. So let's, we'll drag in a hold option drag some copies around. The time, the date are different and yeah let's do, That, all right, so what do I wanna do here? I might actually try to this is where I get myself in trouble where I decided to like what if I do neither plan and just wing it and try something different where I kinda want This effect but I still wanted to go on the side like this one when I was just having fun.

[00:01:44]
The date collapses, but it doesn't do, I want kind of a combination of the two effects. Let's see this, how could this possibly end poorly for me? So let's play around this, so I'm thinking this is a frame. This is already kind of its own thing as well.

[00:02:09]
So let's go ahead and then I'm gonna make, I'm gonna make this a frame as well and it's currently 263 and about like, almost the smallest it can get. So I'm gonna say that it's, Make this an auto layout and we're gonna say that it's mean width is let's say 270, right?

[00:02:45]
And so we've got that. And we'll go ahead, we'll make that an auto layout. And let's have that one wrap too with a horizontal gap of 16. 16 looks good and so at its smallest, does it ever flip? Doesn't really flip. So you know what we're gonna do, we're gonna simulate that, but you're just making the font bigger.

[00:03:24]
Cool, and so we've got this frame here that we're gonna say that it can fill the container so that it does now flip over. Like we had in the other one, and let's say that one, we wanna center align it, and we're gonna say it's auto in this direction and eight in this direction.

[00:03:49]
So now if I look at this one, it'll kind of flip like that as well, cool. This let's go wrap this all in now in auto frame here, and so give it a frame and then we will auto frame it. And we're gonna say that this one also wraps, let's say 32 here.

[00:04:19]
And we'll give this one a min width of, it should never get smaller than it is now, that's the smallest should ever be. And now let's actually say that this one does. Fill its container going that way. So let's see how close did I get, okay. All right, I don't hate it.

[00:05:01]
Now I can't give the entire thing padding, coz I want that kind of cool effect right for the border radius. So at this point we'll only give this one some padding. And I mostly think I only care about it horizontally at first so let's try that out We can have questions about whether or not that's enough padding on that side or if I should double it.

[00:05:34]
But like, let's worry about the responsive pieces rather than the little things we can tweak afterwards. So okay this also needs some kind of man width of its own So now I can go big like that and get smaller as well. Do I love this added effect that I did?

[00:05:54]
I don't but it's fine. Coz it's really easy to fix if I decide you know what the wrapping is kind of obnoxious and I don't wanna do it anymore. I can go up to this frame and I can just change it to a column and it's not that hard to implement.

[00:06:11]
Here we wanna say, interesting I don't wanna add the horizontal padding again to the entire thing. And now since this has its own padding, we can argue that there shouldn't be a gap at all here, right? And maybe, no, what do we think? I don't like that. What do we think about this?

[00:06:45]
I don't know if we like it but we'll try it. I don't hate it, it's a design choice. I don't, we got the point of the nested layers here, but like we can kind of get to the point where we can have that all in place. So now we'll give this overall frame a fill of white and we'll give it those rounded edges that I like so much.

[00:07:08]
And let's go ahead and just give it a drop shadow. And so now we've got that effect, yeah. Just-
>> Thinking the clip content.
>> Yeah, it couldn't tell coz it was like the color was so close to the background, I had to zoom in and get a sense there as well.

[00:07:31]
So now I've got this cool little card that maybe the breakpoints need to change slightly, but the overall effect is a responsive car that we can kinda see both ways as well. And so, it's a super powerful tool for complicated layouts.