Flexbox Nav Layout Exercise

[00:00:00]
>> Steve Kinney: So let's actually look at a challenge that we're going to try out. So I'm gonna toss it over to you first and then we'll kind of do it together. Is if we go down here, we've got. Which one do we want to do? Let's have you do the navigation, right.

[00:00:20]
And so, navigation is a pretty common pattern in this case. So we can go down here and we've got what we would like to be a navigation bar at some point. Right now, I don't think it fits the mark. This does not look like a navigation bar to me that I've seen on any site ever.

[00:00:41]
And so what we want to do is see, can we lay this out in a way with a certain amount of flex and we'll go for a little victory lap with some of the styling and see what we can do in that case as well. But can we begin to start applying a flexbox where we'll immediately see some of the pieces go into a horizontal line and get looking at a little bit of dealer's choice on how exactly far we want to take it.

[00:01:06]
But this is not a navigation bar I've ever seen in my life. So we want to begin to lay it out. We'll give it a little bit of flex. I'll come back and show you in about 10 minutes and then we'll take it for a spin. Our challenge is to make this very simple nav look like a nav.

[00:01:30]
The only special thing here is we just reuse the same linked item so I don't have to write the same class 42 times. Like I said before, Tailwind does work under the assumption that you have some kind of component system that could be anything, that could be server generated.

[00:01:48]
But the idea that if you were just editing a vanilla HTML page, you will find yourself either getting very good at multi cursor support in your editor or coming up with some kind of repeatable way of doing things. This starts out, we're allowed to change anything as we go along.

[00:02:06]
We're going to probably switch back and forth a little bit because this one's a little wide and I need my screen real estate. But we'll take a look. So just to remind ourselves of the starting position, that is not a navigation bar, right? So the first thing we're gonna do is exactly what we saw in the previous section.

[00:02:24]
We'll say class is flex. And. Okay, that gets me some of the way there. Looks like the actual list also needs to be a flex, right? All right, slowly but surely, we're at least headed in the right direction. Now. We probably want to put some spacing between things so we can start even just on those various menu items there.

[00:03:03]
We can give it a gap of whatever feels right. 8. I'm gonna start out with here. Okay. Like, those are good. There is some space here, though. Now what we probably want is, like, the, like, company name over here on this side, and maybe we'll push the rest of the stuff.

[00:03:23]
We can play around with some different options in a second. So that's where some of those justify and alignments come in as well. So what we could do here is we could say flex, and we're gonna say justify-between, which is, if you look over that space-between. I don't listen to Dave Matthews, but it always makes me think of that Dave Matthews song that I don't like, which will then kind of take the elements and kind of push them off to each side or put space in between each one.

[00:03:57]
If you had three or four, it would kind of equal spacing in between each one. All right, now it looks like we're kinda getting there, so becoming more and more like a navigation bar, right? And on the flex level, we basically have it. But we can do a few more things here where we can say that this has got a class of, I don't know, font bold.

[00:04:20]
We've even used bold before, extra bold. Cool, cool, cool. And let's say we wanted to make that a different size as well. We can do something like that. Let's say xl. All right, so now we've got kind of that in place as well. For these links, what we could do is say.

[00:04:51]
Now. We know how to do a border, but that's not gonna give us what we want, that's gross. What we might wanna do is say, we only want a border on the bottom. And we saw this before in the very beginning of the workshop with stuff like padding and margin, where we can do border bottom.

[00:05:09]
And let's give it a border-bottom of 4. So that works like that. I could put on the link too, which I might choose to do as well. And let's mix some other things in there where we could say something like that each one of these is a group, and should they hover at all.

[00:05:38]
Group hover. We'll say that the background should be. Wes, what's our company color? Red. Red. I mean, I asked, so I gotta go with it. Right.
>> Speaker 2: Oracle red.
>> Steve Kinney: Oracle red. Twilio red. Right, so you could say, if they're group-hover. I might actually want to make the whole thing background red, though.

[00:06:13]
Let's give these all a little bit of padding too. That's too much, we'll give it x of 4, py of 2.
>> Steve Kinney: Only if they hover, though, we can begin to lay some stuff out. Now what you'll see here though is things are a little wonky, especially if I either A, use the developer tools or B, just make more backgrounds.

[00:06:46]
We can kind of see. But the developer tools are really handy here, which is if you look at Unicorn Corp, right, it's kind of like up towards the top while everything else is, you know, because these take up. More height than the actual kind of company logo in this case.

[00:07:08]
So we have a few options here. We could center it, which is just simply we can do item center. And now you can see it's kind of in the middle. Or if you wanted it at the bottom, you can do items end. And now it will sit along the baseline.

[00:07:30]
Looking at this, I think that I like in the center. And we can even do like a. Do a bottom border here too, if we wanted to, just to make a point, say border. I don't like those on there anymore. Now we're getting to stylistic things. But yeah, we can tweak it as much as we want.

[00:08:08]
But yeah, we can lay stuff out incredibly quickly without a lot of context switching. And there is a lot more that you could do with flexbox. So let's also kinda take a tour of some of that. But if we look at it real quick, very quickly, we got a.

[00:08:22]
We could argue we can tweak some of the colors and style, I'm not a designer. But the general layout with very little typing just by having these utility classes ready to go. So we hover any given one of these, they're all kind of adding the different pieces as we go.

[00:08:37]
And if these were in normal css, we might make a class called Navigation. Or just on the nav, where we would put a property flex or display flex, justify-content space-between, item-center. And we, again, put another flex and we'd have, again, repeating ourselves in the properties. We can kind of take these utility classes, pick and choose the pieces that we need, and assemble our own lightsaber incredibly quickly as well.

[00:09:06]
>> Speaker 3: Yeah, I did SpaceX 4 versus GAT 4 and they basically kind of look the same to me. However, if I hover over them, SpaceX 4 is a lot more complicated.
>> Steve Kinney: Let's see, where did you put the spaceX 4?
>> Speaker 3: You know how you have Gap 4?

[00:09:24]
>> Steve Kinney: Yes.
>> Speaker 3: Or you did have Gap 4. I did SpaceX. Yeah. Yeah. You have Gap 8. Space X 8, maybe.
>> Steve Kinney: Yeah, those are 8. I mean, both work for Flexbox since that is a Flex property. Cuz if you look at this, I mean it visually looks like.

[00:09:44]
But like where it might get squirrely over time is right. They have these margins versus, you can kinda see that they take up the full space and have these margins versus if we got a gap 8 and we take a look at the developer tools-
>> Speaker 3: What I did is I just hovered over that and in there it seems to show me the CSS that gets generated.

[00:10:08]
Is that what you do too?
>> Steve Kinney: Yeah.
>> Speaker 3: Okay, okay, yeah.
>> Steve Kinney: Yeah, I think since this gap is a flexbox property, I would probably just stick to all the flexbox or all the grid properties instead of mixing and matching. But there's probably a use case for both.

[00:10:22]
But I would probably, if I'm already using Flex, I'll probably stick with the Flex properties. Even this is a nested flexbox, and so kinda keeping that probably makes sense in this case. Let's go take a look at some of the other kind of like flexboxy things. So just a way to kind of see some of the properties in this case.

[00:10:47]
So out of the box, if we just say something, these are all the kind of flex defaults, right? And let's make the container height a little smaller so I can fit everything on screen. So this is what you get by default out of a flexbox kind of situation.

[00:11:11]
So we had that flex direction we saw before, we did row. We can do column, which point they go become a column like that Column reverse, which point they go in the opposite order. Row reverse. You get 2, 1, 0, right? So normally I think unless you have a very special use case, a lot of the times what you will tend to see is probably like Flex row or Flex column.

[00:11:40]
And again, these all map to CSS properties out of the box by default you will get a Flex row. If you define nothing, you'll see that there is no difference between the Automatic default of OttawaFlexBoxes and Flex Row because the automatic default is Flex row column being the other very popular one in this case.

[00:12:00]
Cool. Then that justify content at the beginning it is usually the default is start. So nothing changes. If we want to start it at the end. That works. The normal ones we see a lot of times is we saw center earlier and in the nav bar we did that between where it Puts an even space in between all of them.

[00:12:25]
What's great is as stuff changes, those will automatically be flexible. And it will just keep flexible space in between all of them. There's also like justify around which will also put some space start and after what other fun ones evenly and some ones that I've never used before in my life.

[00:12:52]
Then we have that kind of those align-items where we can do all the items up towards the beginning. You can see the default is to kinda stretch them all the items towards the end. The one that I use all the time is center them for me, right? And so if you did item center and you did.

[00:13:11]
We saw before justify center, you get that nice vertically and horizontally centered piece as well. So you can kind of like mix and match these as one does. We can change that gap, you know, gap four puts a little bit of space in between them no matter what, even if they are next to each other, 14.

[00:13:30]
It's just how many REMs you want at a certain point, like built in, you can go all the way up to 96, which is bigger than we need for this case. Yeah, so you can begin to kind of get a sense of all these. Most of the time it's usually item center for me, justify.

[00:13:45]
I'm either centering or space between. Flex direction is either row or column. That will get you. It's an 80-20 principle. Like those like 3, 4 properties will get you 90% of the way there most of the time and give you a lot of like power in that sense as well.

[00:14:07]
And again, you can use these basically anywhere for like larger layout things or just aligning like, hey, I want the label to be centered with a input field that got a little bit bigger, so on and so forth. Right. Like, I'll kind of show you real quick in that input we were playing with earlier, you know, we did that stacked look, which I think is pretty good.

[00:14:29]
But if I wanted to have them like, let's go take a look at it. If I wanted this to be more like to have the label to the right or label to the left and the input to the right, I could do something like that where I could just say Instead of space Y1, we'll say flex.

[00:14:57]
And now you can see that they are next to each other. Now if I didn't want the words to break, I can actually change that as well. I can just say whitespace-nowrap, and now that won't wrap at all. And I can give this a little bit of a gap too.

[00:15:20]
Now, if you look, though, at this, you can kind of see that there is some interesting padding and stuff like that. So we could point this where I would play around with that item center as well, and so on and so forth. But I did also a bunch of other squirrely stuff here.

[00:15:40]
But usually item center will kind of get it a little more aligned. So you can kind of see that it's, like, centered along that axis that goes across the Flexbox, just like that.