Card Layout Exercise

[00:00:00]
>> Steve Kinney: It's time to give you a little bit of a challenge, which is this is a little bit of choice time here. We're gonna kinda go into the Card section and we're gonna try to kind of begin to lay out a card. So if we look right now, it's just these are interpolated in again, if that stresses you out, you can delete the script tag and just put in some hard coded values later.

[00:00:25]
I wanted to use more than one card and I wanted them to say something different. What we'd like to do is kind of get to this again. If we look at the card right now, we can see it's not much to look at. What we want to do is apply some of what we just saw with borders.

[00:00:40]
I think a border is appropriate for the card, a background color to it. The part I haven't shown you yet that you're just going to explore a little bit on your own is the typography. The hint that I will give you is text and font. Makes sense, right?

[00:00:59]
You'll see some options in there as well and your choice on how exactly you wanna style it, but let's go take a run at adding some kind of. Cuz we use this card to lay out a whole bunch of other stuff later. So let's get a card that we feel good about that we would like to use at various points in our time together.

[00:01:18]
So try to apply things at your disposal. Borders, background colors, text colors, text dash, you'll see some text sizing stuff, font, you can change the font if you want to, so on and so forth. But let's get the kind of basics of one of these cards that we're gonna tweak and play around with a little bit.

[00:01:35]
But apply some of these ideas and then we'll kind of do it together and then add a bunch of cards together to see how to lay stuff. So our mission is to apply some of the things we were playing with the button to just something that's not a button, honestly.

[00:01:54]
And like I feel like the button is my hello world of every time I'm trying to either build a design system or play with some styling tool. And then like the like next one is like some kind of like card like thing. Right. So really the only real big change here is now we have more than one element, yay.

[00:02:13]
But we can kind of see how quickly that kind of rapid prototyping piece comes together, right? And if you've got other things that you did, yell them out or like interject and we'll do those too. But I'm just gonna kind of like vibe, not that version of Vibe coding, but just kind of like go with the kind of piece of how I would normally approach it.

[00:02:35]
So I'd probably give it some kind of border. I like border two. Feels like with my screen zoomed in, Border two now feels egregious, But I feel like at a normal viewport, it's probably fine, but now I feel self conscious. So border one and border are the same thing.

[00:02:54]
As you can see, that is the default in there as well. Feeling a little tight. So at this point, instead of doing that like PX and py, I think this is a great opportunity for just a little bit of padding evenly throughout the entire thing. Are we feeling rounded in this case?

[00:03:10]
Are we feeling square rounded? Rounded. Especially because someone from the chat said rounded earlier, I feel like this is a rounded crowd. On the temporal ui, we actually just did the great de rounding of everything. I didn't realize that roundedness was controversial. So we can give a rounded, again, the nice part is, okay, you can look at that.

[00:03:33]
You can also just like look at the regular rounded. Whichever one makes you happier, go for it. You don't have to have the exact same thing I have. And you can give it also just like a subtle background if you want. So, a lot of times the 50, which might actually be my background color for the page, you can give it like a subtle little background in this case.

[00:03:52]
Same with the border, you can say, border is I like slate. If you like gray, use gray. If you want a different color, go for that too. I don't care. Live your best life. Okay, I like that. And so now we've got very quickly, I can just kind of type in these classes immediately.

[00:04:10]
I'm not jumping back and forth between files, adding the class here, going to another CSS file. I'm kind of just doing it in line and getting the sense here as well. So for the h2, I don't like, now you're just learning my personal styling preferences, which is not what you signed up for.

[00:04:28]
I like semibold, somewhere in between. So you do font semi bold. There's probably a rhyme or reason that is better than I can articulate right now. You do get the sense of which ones are under font and which ones are under text. I'm gonna say that it's text like lg, just a little bit bigger.

[00:04:52]
Base is what you get to begin with. So if you wanted to see base is going to be that one rem, right? For the rest, everything is based on 1 rem. So base is 16 pixels. You can see this is 1.25 rem, which is 18 pixels, right? How many font sizes are there?

[00:05:12]
You could check the docs. You could also just start typing. There is a little bit of a science to getting auto complete to kick in. It's gotta go after the last one text and you can kinda get a sense of obviously numbers happen first in alphabetical order, but one could scroll through and find the rest of them hiding out in here as well, xl, xs, so on, so forth.

[00:05:37]
Cool. So we've got that in place. I will show you this next one simply because I don't know if we need it right now or not. But like we talked about padding, would anyone like to venture a guess? If P is padding, what margin is M M M so he's a MT1 or something like that.

[00:05:58]
And I'll just kind of put a margin top on that paragraph. We will talk about other ways to space things like literally in five minutes, but that is one way to do it. There are also a few other things you do in terms of line spacing and character spacing as well.

[00:06:18]
Most of the things in CSS are possible here as well. I don't know. I don't have strong opinions on that. If anyone does, we can do it in a second, but I feel pretty good about this card right now.