Constraints Solution

[00:00:00]
>> So I'm gonna unhide just like one possible solution here. As you can see, it does the things I centered one, I have the other one stretch. And I think that in this case they vertically don't stretch, they horizontally stretch, as if I had this one kind of centered with either Flexbox or margin auto, up here and then this one is like a width of maybe 100 inside of a div that's got its own margins or whatever.

[00:00:24]
But they don't grow in height just like they wouldn't in the browser unless I did other crazy stuff. I'm not going to go on a rant about how height 100% and CSS does not mean anything. Does not do it with 100% dozen CSS, that's not a talk that I'm gonna have right now.

[00:00:44]
But how would we implement this? Okay, so let's put out everything the way it was and go up to this top bar. And we're gonna say that for left and right, yeah, bound to that left and right do the same for the bottom. And I can also you can see I can, click on stuff in here, but like I don't have the skills to do that.

[00:01:10]
So let's see. For here we'll say center, and for this one, again, I kept it bound to the top. This one is just for funsies. I'm going to constrain it to the bottom, and we'll have it scale. I don't know what's gonna happen. This one should grow left and right as I go, but it should stick to the bottom.

[00:01:29]
Let's see, let's grab the frame by holding command, getting in there. Cool, so that works as expected. The navbar was not constrained to the bottom now, in this case so let's go ahead and we'll say bottom. So now it follows along the bottom like a footer or something along those lines, but it should stretch.

[00:01:51]
So yeah, if I made this. If grabbed it and I kind of placed it here and here, it might be like the please accept all cookies before continuing banner that we all greatly enjoy as we use the web as well, but yeah, so those are constraints. Again like a relatively simple concept that if you didn't take the time to explore can be maddening cause you're like, why is stuff not moving the way that it would on the web and the way that I want it to just gotta tweak a few little things.

[00:02:26]
Yeah.
>> So once you've gone through the trouble setting up constraints, is there a quick, easy way to say you wanna duplicate the iPhone 1 and make like an iPad 1? Do you just usually duplicate and then drag it up big or is there a quicker way to do that?

[00:02:39]
>> Yes-ish, right? So you have stuff like components, but usually the constraints- so components which we'll get to in a second. The great way think about is like classes and instances. You can have a nav bar and then many instances of that nav bar and then when you change it.

[00:02:54]
However, for most things the constraints don't stick so you still eventually have to for each given setup. Cause you might not always want the same thing, right? Like how you want it to behave like an iPhone might be different than on Chrome, right? So generally speaking there is a way to writ large do what you're asking him but like with constraints, not all not always today, like Transfer over, right?

[00:03:24]
So for a few cases you'll have to kinda set it up yourself. There will be some tricks that will kind of show you how to do that and it depends on very much a use case specific thing cause, never doing it, it's slightly annoying. Always doing it would be really annoying, right?

[00:03:39]
So it's a trade off.