Intrinsic Design Patterns

[00:00:00]
>> Kevin Powell: Now I talked about intrinsic design, we're going to be talking about intrinsic patterns. I've been throwing around that word a lot. We saw it with flexbox. Before we get into more patterns using intrinsic stuff, I want to talk about three values that we have just to better understand what I even mean when I say the word intrinsic. So I'm going to open up this example right here. And the first thing is, let's go back to the basics.

[00:00:22]
With auto, we don't declare a width, you just let it do its own thing, so you don't need to declare this. This is what every element is without a declaration on the width. And this could also be, I mean, you know, inline size to use the logical property. This is amazing. This is the best behavior ever. It tries to be as wide as it can get, and as the parent gets smaller, it will shrink down to fit the space, and as we talked about, then the height grows.

[00:00:50]
A lot of the time this is what you want, and we don't actually need to declare something there, especially when we start using grid and flexbox where the element is fitting into the cells, we're defining the sizes we need somewhere else. But sometimes you do need a size. One thing I see a lot of people do is say a width 100%. Instead, they just feel the need to declare something. So I see this declaration a lot.

[00:01:14]
Not only is it kind of useless, it can actually get in the way. Because if you add a margin to something, it will start overflowing, make that a bit bigger to make it more obvious. And so you can cause overflows if you are doing that, not something that will come up often, but I've seen a lot of people body width 100%, just it's this idea of I have to declare everything. There's these underlying behaviors that we, you know, they're already there, they're already working.

[00:01:39]
Only make a change if you see something not working and you need it to be different, would be my first thing to say. Now, that's not really about intrinsic design though. Intrinsic sizes are these three here. We have min-content. A width of min-content means get as small as you can possibly get based on the content that's inside of you. So this guy shrinks down to the smallest it can get, which is this word consecutor down at the bottom.

[00:02:08]
If we changed that word or made it shorter, let's make it longer first. And then, now that's the minimum size. It won't cause any word breaks. If you have word break on there, or some weird stuff might happen. I'm not actually sure. And if we make this shorter like this, now it is able to get smaller. That's our min-content, get as small as you can possibly get. Next up, we have max-content. Max-content, you would think means get as big as you can get, but we can see that's not what it's actually doing.

[00:02:42]
Max-content is as big as the content. Yes, and that means if it's text, it won't wrap the text. So max-content right there will cause overflows. Then there's the cool one, the one that I tend to use if I'm using any of these, which is fit-content. And fit-content looks like max-content with a big difference of match the size of the content, but when we get to smaller sizes, you're allowed to wrap.

[00:03:07]
So it won't actually cause any overflows or any issues. They are kind of niche properties in a sense, but I did want to talk about them because it's important that when we talk about intrinsic design, a lot of it is based on the content having an impact on the layout. And as we can see here, the browser is aware of the content that is in these elements and how big or small that content is, and it can make decisions based on that because of that awareness.

[00:03:30]
Now I do want to show one use case for these because it can seem like looking at those in a silly demo like that can be like, I'm never going to use one of those properties. So back to our classic nav here. I want to run through this again just because it's such a common pattern that we all use. So first we can turn off our list styling. Then we can do a display: flex with a gap of one rem or whatever size you want and.

[00:04:00]
Maybe we don't actually want these to go next to each other now. We want them to be centered. And with them centered, I don't want my navigation to be this big thing. I want the whole navigation to be centered on the top of the screen. Oh, how can I figure out how big that content is? I don't want to, you know, measure it and then set a specific size, that sounds like a nightmare. We can rely on the intrinsic sizing.

[00:04:27]
So for the entire nav, my header here, let's come in. I'll use the logical property this time, inline size: fit-content and like magic, it fits the content, and like we've seen, margin inline: auto. We can set it up, so it is, oh, ha, order. Glad I made that mistake. I have a margin of one rem here. This is a longhand, well, it's a shorthand, but it's also, it's doing only two sides, and then here I have a margin of one rem.

[00:04:57]
These are the types of mistakes in that early lesson that I mentioned will happen, I guarantee you, and it took me a minute to see it. If you don't spot that, I just want to show devtools is your best friend all the time. You come in, you find your element. We looked at this a bit before, but I see here, I'm setting the fit-content inline size, here, margin, actually, it's not even crossing it off.

[00:05:21]
Look at that. That's kind of annoying, but we can see the double margin declaration at least. Hmm, that's interesting here that it's not crossing it off. It should be, it's probably because I'm using a logical property here, and I'm not using, as I mentioned, the margin shorthand is the physical sides. I'm wondering if that's causing a conflict in the dev tools, but something to look out for then, where, if something's not working, look for typos.

[00:05:45]
If there's no typos, look to see if some you already declared something that's getting in the way. So we'll take that margin off for now. There we go, and we have a nice center div at the top, and then I can just come in with a text-align: center. Center it there, and just for a little bonus, this is kind of ugly, so let's come on that list, add a flex-wrap of wrap and now when they get smaller, it will wrap around, except it'd be nice if when they wrapped, they'd actually be centered.

[00:06:24]
Is there a way that we can do that? Yes. Align-item center. I remember. Yeah, let's try it, align-items: center. We can try it and we can see if it worked and it didn't work. No, just justify, justify-content: center. There, there we go. One of those things, flexbox, it's align-items justify-content. Most of like 99% of the time, you try one, if it didn't work, you try the other one. And now we have this nice intrinsic navigation at the top of our page that's centered.

[00:06:56]
I'm a little confused on the difference between auto and fit-content. Yeah, for sure. So auto, they're actually very similar, so auto just means get as big as you can get, but always match the size of whatever you're inside of. So in this case, my orange box is setting the total size, and then so the gray box inside of it is matching that and just getting as big as it can possibly get. If instead we use the fit-content, it's going to behave, it's going to shrink and match the content if there's space here.

[00:07:28]
So it matches the width of the content if it can. If there's not enough room, then it works exactly like auto did, and it sort of becomes auto at the smaller sizes. Now, we've already seen the intrinsic layouts of flexbox here, so just throwing our flex wrap with a display flex and a gap on there. I sort of said that wrong, but we have a display flex with a flex-wrap of wrap, a gap, and we end up with intrinsic layouts.

[00:07:52]
So this is an example I actually gave for a talk with a Dutch company, which is why everything's in Dutch. But the other thing I'm going to say, just to reiterate, I don't want to spend too much time on it, but if you can't see things, I mentioned it before, always put borders on things so you understand what's actually happening. And then on that product info, I can come in with a display: flex. They all become the size they need to be.

[00:08:18]
I'm saying this over and over again because I want to hammer this home for everybody who's listening. This is so important with flex, the items become the size they have to be. Two different things will become two different sizes, really doesn't matter. And then we need to add a flex wrap if you need it. You will not always declare a flex wrap. I've been doing it a lot for these examples. Sometimes you may not need one, so just to keep that out there and then the two items might wrap differently.

[00:08:43]
The layouts are figuring themselves out. Same layout, different content, it's going to behave a little differently. That's what we actually want to be happening when we're using flexbox. This really, a really fast example here too, just of the exact same thing going on. But we've mentioned the flex-grow, so I just wanted to show, sometimes you might get some nice layouts using the flex-grow of one on these as well.

[00:09:14]
So once it wraps, you can't do it on the element, the flex-grow has to go on the items themselves, so each one of those is inside of that. I don't have a grid container here. We can do our .flex-container direct child combinator, select everything inside of it, and say they all have a flex-grow of one, just so we can get a little bit of a different style of layout coming there. So, it depends what you need.

[00:09:27]
In different situations you might want to grow, in other situations you don't want it completely dependent on the situation.