Spacing & Dividing Exercise

[00:00:00]
>> So, yeah, we saw it with the horizontal spacing. So why don't you just take a few minutes and I'm gonna give you two of these at once. We've got space and then it's got its friend, divide, and they are semantically basically the same. Divide is almost exactly like space, except for the fact that it puts a border.

[00:00:20]
So if you had a sidebar with a bunch of dividers, divide, right, in between them, is the same as space but it puts a border bottom for all except the last in this case. And so, we'll go through and just add a border to separate them instead of space.

[00:00:42]
They effectively do the same thing. So I'll show you both of them. And then in that space section, go ahead and just kinda try them out, see can separate these very close together menu items to kind of have them a little bit more spread out? All right, so again, we're just kind of playing around with some of these space and utilities.

[00:01:07]
We'll open this up and go put where I can edit it, we've got some of the basics in here. One, I'm, over a course of time I've tried to sneak a few little extra like utility classes in there that maybe don't necessarily warrant their own their own discussion, but this is basically the max width for the content, it's going down to a CSS class.

[00:01:36]
Again, at any given point, you can hover over, you can see the CSS class as well. Text center does what you think it does as well. Nothing else special and new in this case. So we could do something like space y 10 like we saw earlier. How do we want x actually, x we can do let's start with divide, you'll kind of see the difference in this case There's not as many options, so this puts a border in there and you kind of see it.

[00:02:22]
The way the padding works is a little iffy like this was the spacing exercise, we can see kind of both in this case, I do need to define what it looks like in that sense. You can't combine space and divide though. So that's the only issue you got to think about.

[00:02:35]
So I can do a border color of, let's say, Cyan 300, all right? You can see it looking a little crazy there. All right, so we've got all that, we've got the divide in there. The other thing that I did wanna show you real quick is, I don't know if this is the best, I'll do it another div here.

[00:03:02]
You kind of saw it in the auto complete a second ago. Take a look where I can say, let's say class BG, I don't know if I can call that, it's not gray, it's a lot of them. All right, and we'll say that the width is, And the height is 10, just a box, make it a little bit bigger than that, 96 and 96.

[00:03:35]
What happens if you need a negative amount? There's an easy shorthand for that as well. And so we'll just make another one, we'll say it's got a height of 20, width of 20. And we'll give this one a background color of blue. If I give it a margin of 20, right, it gets a margin of 20.

[00:04:06]
We see mx in this case, give this one padding instead. Height, width, okay, cool. What is that? Height and width, we'll say I can do negative, and these will just be a negative margin, right? So if you ever need a negative value, you just put a subtraction sign in front of it, you will get the negative version of that value.

[00:04:34]
So now it's the margin of -1.25 rem. So, I mostly saw that as we were looking at the other thing, figured I'd mention it, negative values. Also if you've ever find yourself truly need important, you can just put an exclamation point before it. So there is little nuances to the short hand as we go through everything as well, and cool.

[00:05:00]
The only thing I suddenly mess up before I tried to call it a border is actually a divide of the color that I want as well. So, we can go put that in place as well over here, we'll see what that actually turns out to be. We'll just say divide, and we'll make it cyan, just so it's absolutely ridiculous looking.

[00:05:24]
We'll get rid of that giant red box that we made, right? And you can see that it's a border color, but it's doing some extra like fun stuff in there as well to like show it correctly. And we could add the padding in here and get effectively divider in between each every one of them.

[00:05:39]
You can kinda see it better in this example here. I tend to use it for those like sidebars where you might have a bunch of menu items in this case. But both of work and I use space a lot more than I use divide because I just don't need it as much.

[00:05:55]
But I find myself needing to space things out a lot more often than I find myself needing to put dividers between them. But they are both super helpful utility methods that, again, are doing a little bit of tomfoolery with CSS, you just get for free because they are kind of a reusable pattern.