Constraints

[00:00:00]
>> So real quick, let's just talk a little bit about constraints. And these are super useful. They're more useful when we get to layout grids as well, but they are also useful in this case. And they're term differently if you do iOS development, you have constraints in the UI builder.

[00:00:22]
In CSS, we don't necessarily have them as much. We have similar concepts, especially when we're absolute positioning a div, which we don't do that much, but they're pretty easy to wrap your head around once you get the kind of basics in place. So by default, if we go in here and we look at Design, you can see that there's this Constraints section over here.

[00:00:45]
On average, generally speaking, unless you've done something special, everything is constrained to the top and left. What does that mean? So if I grab this frame, and I move it like this, yeah, that behaves the way I expected it to. If I grab it from the top left, you can see that that box follows the top left corner, right?

[00:01:09]
Its constraint is top into the left, so if the top and left moves, it moves relative to the top and to the left, right? At first, you probably didn't even notice anything even though we've resized stuff before because that's just kind of what you would expect. What would happen if I change this to Right and Bottom?

[00:01:30]
And now, I grabbed this frame. And now, it stays when I move the top and left. But if I move right, it slides along with the right edge, if I move down, it slides down, right? So you can be like, cool, I'm making something where those little things that sit down here that then eventually open up a little.

[00:01:50]
Would you help buying whatever you're buying kind of thing, right, if that should always be in the lower right corner. Let's say you're changed in the viewpoint. All right, did the iPhone 13 mock up, now I'm gonna do the iPad Mini or what have you, but it should always be in the lower right hand corner.

[00:02:09]
You can just make the constraint like that, now it'll follow that piece as well, right? But there's a few other kinds of nuances here as well, which is, let's say hypothetically, you're making a design that had, I don't know, a top bar, or navigation menu, or those things along the bottom, right?

[00:02:30]
Any other things that we normally see even if you look over on the course page that we've played around with before, right? What I would love to have happen is that not happen, right? That's not what happens when I implemented myself and CSS, that bar should take 100% width.

[00:02:49]
And as I expand the viewport, it should also expand, and I do not want to have to manually adjust all these things every time I change the size of the frame. So let's see how we might do that. We go back here. Let's imagine for a second this was a top bar.

[00:03:09]
I'll make it a top bar, check this out. [SOUND] Now it's a top bar. And what I would like to happen is that not to happen. So we know how to do top and left, we know right and bottom, everything's good so far. What about left and right?

[00:03:30]
[SOUND] Now it will actually change this width relative to the frame. It's bound to the left and the right edge of the frame and it will change. Grabber, I don't want the whole frame, I just want that. And let's give it a width of, I don't know, 100.

[00:03:54]
Unbound those for a second, also make it 100 there as well. You also have the ability to center something, so it should always stay in the center, right? Those of us who have been doing CSS for a long time know that vertically centering the div was not fun for a while.

[00:04:12]
But so we can hit Center for both the vertical and horizontal axes. And now it will, oops, I selected both. That went down to the bottom, so we'll say that just stay with the top. This should be the center. And now, that one kind of goes with, this one will always stay in the middle somehow somewhere.

[00:04:36]
Exercise to the reader, you can hit Scale. And now, it will grow and shrink along with the frame that it's in, right? So depending on what you're trying to do, these constraints will allow you to have, in CSS ,or HTML, or the web platform writ large, we would loosely use the word responsive for, right?

[00:04:56]
Take up 100% of the width of your container. There's some other ways to do this when we see auto layouts and stuff along those lines. But generally speaking, this is kind of a way in your designs to have stuff the way that you want it, right, for all sorts of different kinds of UI pieces that you might be building.