Styling a Button

[00:00:00]
>> Steve Kinney: Okay, so here we have. That's the markup that's giving me that beautiful button. What we want to do is start to style this button a little bit with tailwind. And the nice part is because I am using some kind of component system, I can now import button from whatever file.

[00:00:14]
Again, this is felt. As long as you understand where to put a class in your framework of choice, it'll work. Could be react, could be anything you want it to. So here we can do class. And as you see, I got that Tailwind IntelliSense set up, right? You get a sense of some of the things that are happening.

[00:00:33]
So if I do BG, you can kind of see that IntelliSense is giving me a bunch of fun stuff. What color do we want this button to be? Blue Seems good. I used to work at Twilio where their brand color was red and they made all their primary buttons red and then had to walk that one back because red means things, right?

[00:00:56]
How do you have a dangerous button? So they have a very beautiful design system now called Paste. So I can only tease because that is a now solved problem. All right, let's give it. The nice part about the IntelliSense plugin too is you can see the shades, right?

[00:01:11]
And the heuristic here is the higher the number, the darker it is. You're like, I don't like these numbers. That's just in the default theme. You can override the default theme. You can just make three. Like I said before, light and dark. You will regret that when dark mode support comes, so don't do that.

[00:01:34]
When I was at Temporal the designer working on the design system, I almost broke into tears trying to come up with some names for colors we tried subtle and strong. So that way dark mode still worked. Nothing, no naming of colors that I have ever tried has ever made me happy.

[00:01:52]
I can't solve that one for you, but I can at least tell you that it's a known problem. As you can see, applying that utility class does what we think it ought to do, which is give it a blue background. Still button still leaves a little bit to be desired, right?

[00:02:16]
We could say text is white. All right, slowly but surely we are getting there. Other fun fact is, with the IntelliSense plugin, you can then hover over any of these classes and see what the resulting CSS is. This technique is how I learned JavaScript 12 years ago, which is I was a Ruby developer and so I would write CoffeeScript and then look at the compiled output and figure out how to reverse engineer it.

[00:02:55]
So you can also get some sense about how stuff is working under the hood by hovering over this. There's nothing particularly. These are fairly easy classes. But you can also see that using the CSS variable out of the box, you can kinda see what's happening. Other than the act of compiling this style sheet for you, there's not necessarily a lot of magic in Tailwind.

[00:03:17]
There's some magic, we'll talk about it, and we'll kinda hover over the time. So what else does this button need? What do we need to do to feel good about this button? We like this button. This is what happens when we have a bunch of engineers. If I had designers in the room, they'd be like, I got opinions, right?

[00:03:35]
We should have one designer in the room to like.
>> Audience 1: You need a little padding on the left and right.
>> Steve Kinney: Let's get a little padding on the left and right. I like that. So here you can say P for padding, X for left and right, X axis.

[00:03:49]
For those of you who did not, those of us who have taken 10th grade geometry, not everyone in this room has. And let's see, you can also get a sense even as you go through what these are. Now, the kind of base here is really four, which is one REM.

[00:04:09]
This is all based on REMs. The nice part is for those of you who do not speak rem, they put comments in there with what that means in pixels as well. So you can see where they talk about that rapid prototyping piece is as I hit Save, I don't hate that.

[00:04:26]
That feels a little much right. Now, we all know that in a large enough design system, you don't just have button, you have button large and button small, and button medium and button extra small maybe. So, you know, you can tweak any of these and have multiple versions.

[00:04:44]
4. We can do 3. As you can see, it's just a little bit less, Dustin.
>> Dustin: Daniel would like some subtle rounding as well.
>> Steve Kinney: I will 100% subtle rounding. We're not going full like Microsoft on this one. Don't worry. I think IBM is a lot of square stuff too.

[00:05:04]
So we can also, if we wanted to see what it's like on the top, we can say like 1.5 here as well. Whatever we want. If you wanted, like if this was like let's say a card and not necessarily a button, you could do something like. And that is going to be both top, bottom, left, right.

[00:05:32]
You can also do P. Like there's definitely. I think it's IBM's design system where it's like longer on one side than it is on the other or something like that. So you can do like PL4PR6, and that's just left and right. Let's do some subtle rounding. Let's stop going down that route.

[00:05:54]
All right, looking slightly more button like. So the request was subtle rounding. I have a bunch of rounded classes that I can pull in, we'll talk about them in a second. But let's just go with my personal favorite, which is rounded md. All right, all right, I feel good about this so far.

[00:06:14]
Let's just look at some of the other ones for funsies. There is a base rounded, which is a little bit more subtle. Whichever one you want, I don't care. And if you want the base rounded to be a little bit like the other one, you just tweak the CSS variable, right?

[00:06:32]
At any given point, that one's kind of built. That one didn't see the CSS variable. But we can define a CSS variable and tweak any of these along the way. Do we like this rounded or we like rounded md more? Editing is going to be fun for this one.

[00:06:48]
So we all sit here and think about it. I like md. We're going to go with md. The other one that is useful is rounded full, which is definitely a hack that will give you a pill like shape. Or if this thing was symmetrical, a circle, right? Which is useful for stuff like avatars and badges.

[00:07:09]
Using a fun CSS hack of calc, infinity times one pixel will get you that. Previous versions of Tailwind, it was actually just border radius, like 999,000 pixels or something along those lines. I don't remember. But you can get to a full one. I'm gonna go md. What else does button need?

[00:07:31]
I think it could use a subtle shadow, right? [INAUDIBLE] So we can do this shadow md. And it's subtle. It's there. What's cool about this is I don't know about the rest of you all, but I have never in my life. There's a few things that I still don't know how to do.

[00:07:49]
One is I never remember the actual HTML tag for bringing a CSS file because I do it once a project. I do know at this point, but that's not fair. Also, I have never remembered the syntax for a box shadow. And now I don't have to. I just know the shadow MD will work for the most part, which, you know and you can do as you can see at any point.

[00:08:08]
Like, what other shadows are there? I'm glad you asked. Right. There's all sorts. You can even change the color of the shadow as well. I don't want to, but we can give it a shadow of 2 XL, which is going to be a little bit more extreme. It doesn't look all that extreme, let's see.

[00:08:25]
Maybe refresh or is it just simply that the contrast on my screen isn't great? So, yeah, let's go back to md. You can kinda see all that in place and very subtle shadow there. So now that looks like a button, right? We can even do. Let's see, let's try shadow.

[00:08:48]
Dustin's looking at me like, I don't know if there's a shadow there. We're all gonna find out together. It was just a very subtle shadow, right? If I make it some more egregious color, we can see our shadow. In fact, I don't even like the MD at that point.

[00:09:01]
I'm gonna make it a small shadow. I just think that I made this background color slightly off white. So it's very subtle. I think the background's like slate 50 or something like that. Okay, so we've got a nice little subtle shadow there. Now you'll be like, okay, yeah, but I've used this CSS and JS stuff before.

[00:09:22]
What about pseudo elements? What about pseudo selectors? Where am I gonna have to do that? I'm gonna put it inline style, aren't I? No, no, no. That is where those variants come from. So now we could do something like hover and we'll say hover BG blue, make it slightly lighter.

[00:09:41]
So if we look at that, you can kinda see what it's doing, right? It's defining a new class where it is kinda escaping that colon so that is valid CSS. It's saying .hover:blue 500. It's basically saying make the media query or the pseudo selector of hover, so on and so forth, and does some other modern CSS stuff.

[00:10:04]
But now we can kinda go over. And when we hover over it, we've got a button that interacts, right? And anything else we need to do this button. Do we feel good about this button? Any other changes? I feel good about this button. Dustin,
>> Dustin: The reordering of the classes that's happening on Save, is that prettier doing that or is that the tailwind plugin?

[00:10:28]
>> Steve Kinney: That's a great question. I'm glad you asked it. I believe it's the. I think on save. It's both. Possibly cuz I have prettier running on save, I think that the IntelliSense plugin will also do it. It will read the prettier settings. I both have prettier running on save as well as the intellisense plugin.

[00:10:48]
I am pretty sure they both do it. But then also you have one as a pre commit hook too for that person who didn't install it on your team so they don't ruin everything. You know who that person is. Cool. So we've got a button.