Styling a Form Exercise

[00:00:00]
>> So now, we've got a set of these. We've got some basic ideas, but these input fields are not great, right? What we'd love to do is have something where we can have, the required or disabled field is styled a little bit differently than a regular one. Maybe we've got the disabled button.

[00:00:20]
You have terms and conditions, so on and so forth, with the checkbox. But we wanna take kind of this other basic one, we're gonna then build on top of it, but getting our hands dirty with some of these various variants. And feel free to, you want to see what the outer range one does, you can modify the HTML, go put a range slider on there.

[00:00:41]
You wanna try out different ones, go for it, do some of the basics, but then I think take a few minutes after that and see what other weird mad science you can kind of do with some of these. And then I will then also take us on a ride and add a little bit more UX niceties as well.

[00:01:06]
So let's take a look at what we got here. So we wanna just add some basic styling here based on a lot of these variants, and we'll kind of play around with some as well here. So we've got this idea of some basic styling for any given field, right?

[00:01:28]
And, yes, if there's a piece of you going, should I make that a component class, maybe, right? I feel like input fields and the borders on them, I feel a lot safer about than I feel some other places, right? There's nothing stopping you from doing this. I'm not saying you can't do it, I'm just saying I have done it and I have lived to tell the tale.

[00:01:47]
And I still do it, [LAUGH] right, I'm just giving you the cautionary tale as a level of responsibility in this case. Okay, so with that preamble aside we can do something like, border-2, border-purple. I don't even know, 600 seems good. That was for the label, we don't want that, and so we'll put that on the input field.

[00:02:19]
Cool. Don't exactly know what I used last time, but this all seems pretty good to me. Maybe I used something a little lighter if I look at it. All right, so we've got that in place, and we'll play around with some other ones in a little bit. For the disabled one, we saw that before as well.

[00:02:50]
And so we can do class, we'll do the basics in here. And the nice part is we can actually, if we did make a composable class, we can say disabled. We can say bg- I don't know, purple-50, that seems good. And that border of 2, right? The nice part is, this pseudo class, this disabled, right?

[00:03:14]
We don't have to know that it's disabled. This is making that pseudo selector. I can put this one on. This can be one of the reusable ones because it's not gonna match on that other one, right? Cuz this one is the required one. It's not disabled and so I can have all the different states.

[00:03:32]
Like I said before, input fields are definitely the ones that I tend to add to either the base styles or the components. And you can have the whole stack of everything you might possibly want in there, invalid, disabled, focused, so on and so forth. We can put all of that in there as well and they will only apply when those pseudo-selectors match, right?

[00:03:53]
So there's no harm, no foul in doing that. And again, either it can go into your base styles, it can go into those component cells, or if you have a component library that can just manually put these classes on it. I tend to prefer that cuz then when I'm opening up my button.jsx or button.svelte or whatever, or input, I see them all in that same kind of context.

[00:04:14]
Rather than jumping back to, what did I call .input again or .btn or what have you? I don't want to do that. And so I've got some of that kind of stuff in place. We've got all of that here as well. And there's the things that I would do in just regular HTML that I wouldn't have to do if I was doing it in Svelte.

[00:04:33]
And so you choose your own mileage on that one. Cool, and so we can bring that down for this other input field as well. Awesome, and then we just have the buttons, right? And so this disabled one, I think this screen is looking a little bit different. Do I have it disabled probably, maybe it was 100, right, as well.

[00:04:58]
And this is where I don't necessarily agree, could I multi-cursor both of these? Yes, as I have in one of the tutorials, sure, that seems like a stretch in my opinion. So I could theoretically make that button that we saw before. Let's do that because I think it just shows the point in either direction.

[00:05:15]
So if we wanted to do what we saw in the previous one, you can ignore my little experiment while we were on break, I can even say, if I wanted to do the base button in this case, I could say something along the lines of. Components if I'm gonna make a class I'm gonna use, base if I actually wanna take one of the base styles like an h1 or a button.

[00:05:34]
I showed you component before, so I'll show you the base in this case. We can say button and we could say, @apply border-2 rounded-md. Border, we're gonna say is the current color, that way I still have that in place. Cool, that's coming together, and there is no current color set at this point.

[00:06:00]
And I could even say that by default, That the text should be purple as well. And 500 seems good, maybe a little darker than that, 700, fine. px-2, py-1, looks pretty good. And what's cool about this is, because it's a base one, I'm pretty sure what I can do is if I really wanted to, I could say something like, let's say reset was supposed to be dangerous, right?

[00:06:39]
I could say, Right, and because it's using that current, it is gonna override the purple, right? Because this has got higher specificity and it's coming later as a class applied over the base style, but current for the border, we'll figure everything else out in this case as well.

[00:07:03]
And if I really wanted to show off, which of course, I really wanna show off, right, I could do something like. We could say bg is current and I'm pretty sure, yeah, see this slash? This is opacity. So I could also then take the current as well. Why are you angry at me?

[00:07:38]
That's interesting. It's definitely auto completing it, but it doesn't, cuz it comes later. It's not in that layer. I have to use it as a component, which is where I normally do it. So I'll show you. Let's do @layer. Components, and here we'll say, it's for our .btn-primary.

[00:08:04]
That should be maybe the one with the background. And we could say @apply. And here we'll say, And so now we've got the idea of a button. I could even say, Cool, so we've got all of those in place, that's disabled. I could actually say that on the button and that's just gonna happen for free.

[00:08:47]
So we'll say disabled, and we'll say, what do I want to say disabled one would look like? We'll just say it had the opacity of, Like we did before, 50 or something along those lines. Great, I can do hover states as well. You kind of get the point.

[00:09:08]
But the nice part is now if I said, Did it say dangerous or danger before?
>> Dangerous.
>> Dangerous. Sweet. Now I see [INAUDIBLE], let's make that a little darker. Cool, and this one I can say, .btn-primary, and that's going to, [SOUND] it's very angry about this. I think that might have to go all the way to a utility.

[00:09:51]
Because with the CSS layers, they're not defined until those later layers. It's not like CSS, which is effectively hoisting everything. For something that's auto-suggested something that I never thought I would do before with the current, it's very angry with me? So we're gonna ignore that. I was like, it auto-suggested it, it seemed great.

[00:10:11]
I was like, let's live code, it'll be fun together. Not so much. So we've got the dangerous one, we can do something else. We can say, .btn-primary. We're not gonna do that fun opacity thing we saw, cuz it's very angry about that even though it suggested it. Turns out computers might be a bad thing.

[00:10:40]
So we can say current, we've got the, let's make it purple. So we've got a primary one, we've got a dangerous one. If you think that is the point where you're like, it's cool to do that, I would say go for it. But then it's about do you need it too, right, which is worth thinking about.

[00:10:58]
And they all just become styles you can apply. I'm now newly curious about that auto suggestion of a class I never thought to use before that it blew up on me about, so we'll figure that out later. But you can kind of begin to compose these things. You can have all the variants in here, right, the ones that aren't disabled won't get it, so on and so forth, and you have all of those different options.