Styling a Modal Exercise

[00:00:00]
>> And so we've got our colors, you can see that I can pull those in. We've talked about the arbitrary colors, we're killing it right now, now it's time for you to do some work. We have this very basic alert here, you can kind of click on this link and jump into one of the playgrounds without having to set up or install anything.

[00:00:23]
If you don't get the shades of colors exact, I will find it in my heart to forgive you, right? It's more about the kind of flow of pixel perfect is not super important, but we should go for the high level of the general aesthetic here. I do mostly like to practice some of the basic pieces.

[00:00:42]
And again, you're like but I don't remember what the border one was, well, first of all, what's border, right? And second of all, use the force, do you know what I mean? You try to use the IntelliSense in this case and navigate it like that and see where you get.

[00:01:00]
And again, stuff like we haven't talked about Flexbox yet. We haven't talked about grid, I know, right? We can start with that, but if you wanna just try to explore and get ahead of the curve, that's cool, too. But yeah, take it for a spin and see how close you can get to this little alert box.

[00:01:19]
And then try some other stuff that makes you happy if you get there, but see how close you can get and then we'll do it together. With the base styles that we get out of the box, with that kind of CSS Risa, this is effectively what we get to start with, right?

[00:01:35]
But I think it's also powerful because it shows you how quickly we can kind of begin to put something together. So I think it's a great place to start in that sense. So let's go ahead and let's take it for a spin, let's see what we got. Okay, so there's a few kind of pieces, right now, obviously, divs take up the full width.

[00:02:00]
We probably want this to be a little bit smaller, so we can say class, and there's a bunch of ways to kind of go about doing this. I would just say that the width is 96, I'll actually show you something cool in a second as well. Also, the width is about 96, and that puts it around there, mx-auto to get it in the middle, right?

[00:02:21]
This point, I only need the x-axis margin, right, because I only care about it being the middle of the two in that case, and give it the rounded corners. Let's give it a background color first. Let's give it, let's say it's got bg, looks like it was white, bg-white.

[00:02:42]
You have the shades except for white and black, which are white and black. If you want a off-black, you can go change it in the theme. So we've got white and black in this case, and so now I've got that in place, it needs a little bit of padding.

[00:02:59]
So you say p-4, it's coming together, right? We say rounded, it's medium, we'll give it a border of about 2, which if you're wondering what 2 is, it's in this case 2 pixels. The nice part is you can kinda acquiesce in again, if you need to change this, go ahead.

[00:03:16]
And we want that to be purple. I think I said in the kinda exercise description, I was only really using purple 600 and 400 for the most part. So I think I've got, and this one, I don't have the electric pilot yet. So we want, not the bg, we want the border, but I do wanna point out that, see those squiggly lines?

[00:03:40]
That's the IntelliSense saying you just did two classes that do the same thing. So I actually say the border, and we'll give it a shadow. That seems like probably most of what we have in that case. All right, so then let's see, we've got that h1 appear as well, and we can say, That it's got, and we'll show some other ways to do spacing momentarily, but we'll say it's got a margin along the bottom.

[00:04:09]
That is font is semibold, and the text, again, we'll say purple-600, right? I thnk that's gonna be a little bit bigger, right? So we'll do text, you kinda see that I've got a bunch of different options in here. You'll get the autocomplete for the colors too, but we do the 2xl in that case, all right?

[00:04:35]
Yeah, that seems to be about what I need there. Let's say text is small here. We don't have to get it exact, but it's mostly about getting a feel for styling something. In Sierra, quickly, this is coming together and also the workflow of not doing that thing, where it's like, I need seven monitors.

[00:04:56]
So I can look at my HTML, and my CSS, and my JavaScript at the same time. There's no JavaScript, but yeah, you know what I mean. Great, and so we've got that, again, we can just say this is rounded. And we could make this the base styles for buttons, too, right?

[00:05:14]
We could just say all buttons should have these things. I will say, though, that every time I feel tempted to do that, I tend to regret it, right? Because then you're like, okay, we've got a button in the photo that's maybe bigger and a totally different color, now I'm overriding those styles.

[00:05:33]
And in a lot of cases, if you've ever played the game of where you write your own style sheet, where it's like, I want input fields to have rounded corners. And then you forget that a check box is technically input field and a range is also an input field.

[00:05:46]
Now, you have a weird shadow around your range, so on and so forth, right? With the components you make, using any kind of framework, sure. But I feel like every time that I think that I'm supposed to go and do a bunch of base styles for stuff, I realize that the Web is terrible, and I suffer for it.

[00:06:04]
So we've got that in place, we've got the border-2, we can say, again, border-purple. And you can decide at one point that we do have a class, is just a border, which is our default border color with our default border thickness, right? At a certain point, the patterns emerge but my caution to you is not to early optimize, because it's usually the early optimizing where you're like brand new code base.

[00:06:28]
I'm gonna do everything perfect where you make the mistakes that you tend to regret because you don't actually know the reality of the situation just yet. px-2, px-1, great, py-1, see? Those sensor really helped me there, the IntelliSense is really helping me there. There we go. I can talk, and then bg-purple-400, I also get to cheat because I do this all the time.

[00:07:04]
So it is well deep in my psyche at this point, rounded border-2. Great, and then yeah, so some of these, I might break it out into a component class, I'll actually show you how to do that in a second. px-1, yeah, px-2, see, there's some advantages, right? px-1, I zoomed my screen in a little bit to make my font bigger, but generally speaking, I think that is very, very close to what we had in there as well.

[00:07:42]
Mark, you have a question from the Internet.
>> Is there any special sorting in that playground?
>> Yes.
>> When it comes to the classes?
>> Yep, it uses recommended Tailwind sorting algorithm. I would love to tell you that I could totally do it from memory, but if you watch, there's an algorithm at one point.

[00:08:07]
If I put the two patterns away from each other, and I hit Save, or that Tidy button, unless I got a boo-boo in my mark, this cancel. Now, this gotta be a button, I had a boo-boo in my markup, you can see that, it will then move them all into the right place.

[00:08:25]
So yeah, if I move that, if I move this py somewhere else, It kind of goes and tries to put them all in a sensible arrangement. We've got some of the basic shape, followed by the colors, followed by the spacing, yeah.
>> Does Tailwind have any sort of form of reset?

[00:08:47]
Does it reset the styles?
>> So that preflight that took all the styles away from my button that we saw it towards the beginning. [SOUND] Out of the box, that's what a button looks like, right? And so it has got a very aggressive set of a reset. So in the very beginning, you are somewhat on the hook for at least laying the foundation for some of these pieces, right?

[00:09:16]
Like I said, both from the official documentation that I didn't take seriously in the very beginning, they were like, don't overoptimize too soon, and I went and did it, I have learned to agree with that. But if there are things like, listen, I know the general shape of my buttons are always gonna be the same, you can begin to break that stuff out.

[00:09:38]
I would just say, when it gets to the point that you definitely need it, and if you find yourself using React, Svelte, Vue, what have you, you probably have a button component, right? You don't need to put this in two places. But let's talk about where, if we did need to say, okay, I wanna have this idea of maybe a primary and a secondary button, right, that seems totally reasonable.

[00:10:03]
We could, and maybe I don't put the color information in there, right, it's up to you. I'll show you both, but let's talk about if I did wanna add reusable components on just a CSS level, right? And there are various reasons, if you're just using a frontend framework of some choice, right, you might just put it in your component.

[00:10:21]
For us, there are a bunch of these that we do pull out into styles because our marketing website is next and our core application is Svelte. And guess what works in both places, CSS, right? So I would say, it's not that you have, I would not rush to do this, I would not over-optimize, I have done this and I have paid the cost.

[00:10:40]
But there are absolutely practical use cases, where you might choose to eventually break it out into a plugin, where you might choose to kind of extend that component layer. And let's do that real quick, let's talk about extending the component layer cuz I think it's worthwhile to see as a thing that we could do.

[00:10:59]
So we go into the CSS, and a lot of times, your CSS file might just be these three lines, right? But I have two options here, I could change the base style of what a button is, I'm gonna regret that I promise you, right? Because eventually, I will then have to override a bunch of the stuff for a very special and different button I'd rather start with the tabula rasa and build on top of it.

[00:11:25]
But I could go ahead and open up that components layer, which are supposed to be those kind of more reusable pieces. So I could say, layer components, And I could say .button. And I forget what we had about the button, no need to go look back and forth too much.

[00:11:47]
We'll say it was what? A px-2 and a py-1, and a border-2, and I might choose not to put the color information in there, right? I might just choose to say, well, that's what a button is, and don't worry about it, past that. And then let's go ahead and put that back in my HTML here.

[00:12:12]
So now I could theoretically, it was rounded as well as do that. Rounded, and now what we'll do is we'll just swap, put in btn, you can call it button if you want, I just get confused. Right, btn, and we can take out those paddings. And now, I've got this idea of a reusable button, I could then theoretically make the idea of a primary and a secondary button, so on and so forth, right, yeah.

[00:12:47]
>> There's a cool community solution in chat?
>> So yeah, you can see that they did some additional things in here, where we've got the idea of a gradient. Who amongst you has written a gradient in regular CSS and enjoyed it? Of course, he writes vanilla JavaScript and makes his own frameworks.

[00:13:10]
But let's look at the end, we'll do a deeper dive in this little bit. The utility says super interesting, at least don't worry about like, I don't totally grok the gradient, we'll talk about gradients later. But I just wanna point out the power of the utility classes in this case, which is we've got a background gradient, to-r, which is to right, right?

[00:13:33]
And then from-green-500, and that one, they don't actually have, they don't say to what. But I couldn't say to, let's find something absolutely ridiculous, to-pink-500, and that's all it took to make a gradient, right? And with the IntelliSense, think about the compounding interest of the time you save, not really looking at the MBN docs on how to do a gradient, so on ans so forth.

[00:14:06]
Anything else that we should kinda, any other interesting tasting notes in here? Yeah, but a gradient is simply a set of utility classes that you can kind of write on the fly, compose it all together. And again, you could theoretically pull this out as well into your theme or something along those lines as well.

[00:14:27]
But yeah, cool, is there anything in the one that we're doing that we wanna play around with or see? I do wanna show you one other thing that's kind of cool as well. And this is mostly just a regular CSS kinda thing, which is right now my button color is black, or yeah, I think it's black in this case.

[00:14:48]
The other thing that I can do that's super cool is, let's say that the text color of these is, text color is, I'm writing regular CSS at this point, text or writing what I'm talking about, right? We'll say text is, we'll say, purple-600, right? Cool, maybe it's not the best contrast in the world, but we'll turn this down to maybe 300.

[00:15:27]
And what I can do then is I can actually say that the border should just be current. You can do that here as well. And the cool part about this is I can actually move this over into the button style, and you'll see what I get for free out of this, which is super neat.

[00:15:49]
Put the border-current in there with the border-2, so we can take all that out. And now if I change the text color to green, you can see that the border color changes as well, right, which is super awesome. Because now, yeah, I have to do maybe something with the background, but if you look at that secondary button, which is not even as, we'll say cyan.

[00:16:16]
You can see that the border and the test hole are now synced, so I can start to pull out some of those things. And that's why I say, use your own, do the tedious bit first and then figure out what you wanna optimize. But you can kind of begin to find out what patterns make a ton of sense in this case, and allow you to kind of have a lot of flexibility along the way as well, awesome.

[00:16:38]
>> So what are some gotchas that you ran into by over-optimizing?
>> Just like I have a button and then I find out, do you think that design is only gonna have that kind of button? And the design decides that this other place is a very different kind of button.

[00:16:51]
And now, you're doing things to override those styles into the boilerplate in there a little bit too soon. You know what I mean? If you know for a fact that there is only one kind of button, that they're all rounded the same way, yeah, go for it, right?

[00:17:05]
But when the other button shows up, [LAUGH] right, versus having just those classes in there makes a ton of sense. And you figure out what parts you can pull out, all of our border radiuses are roughly the same. And it's super interesting because of these utility classes. At a certain point, you have teched it and you have designed it, right?

[00:17:27]
Designers have new ideas, certain things drift. One of the really interesting things we were able to do a few months ago was, in the same way that they use the PurgeCSS to pull out all the styles, I basically just wrote a parser. And I could say what colors and what border widths we were using, where in the app.

[00:17:44]
And like hundreds of designers and saying like, hey, we're using one different color of yellow over here. Cuz it was all very clear in the markup and down to what component it was in, right, and what file was all there. I just wrote a script and I was able to produce a spreadsheet, and I were able to figure out what are the primitives in our design system and what do we need to think about.