Transcript from the "Button Color & Size" Lesson
[00:00:00]
>> Jen Kramer: Okay, so what did we get?
>> Jen Kramer: Background-color,
>> Jen Kramer: And the color, what did you guys get for these, background-color?
>> Speaker 2: Light gray?
>> Jen Kramer: Light gray, is that what is said in the spec? It did?
>> Speaker 2: Yeah.
>> Jen Kramer: It did? No, it said light grey and then it had code here next to it, right?
[00:00:30]
That's the code you should use, that one right there, D eight, D nine, DB. That's gonna be our background color.
>> Jen Kramer: And then our text color is just black.
>> Jen Kramer: Okay, take a peek at what's going on here so far. Whoo, we got like Windows three point one buttons, sweet.
[00:01:05]
Those Windows three point one buttons are kinda like very 80s looking. So let's see what we can do about making them look a little better. Anyone having any suggestions?
>> Speaker 3: Border none.
>> Jen Kramer: How about border none?
>> Jen Kramer: Get rid of that border.
>> Jen Kramer: I'm also gonna make the font-size nice and big.
[00:01:28]
How about we make it 40 pixels to match what we had before? It looks like in our spec that all those font-sizes are more or less the same. So, I'm gonna go ahead and set my font-size here to 40 pixels once again.
>> Jen Kramer: Let's see how it's looking now.
[00:01:46]
>> Jen Kramer: Better? Getting better and better.
>> Jen Kramer: Now, one of the problems that we have here with this calculator at the moment is that those lovely buttons,
>> Jen Kramer: In the calculator, they're as wide as their content, right. And they're kind of as tall as their content. Whereas in our spec, there is like a ton of space around these.
[00:02:14]
And there's a lot of ways to accomplish this. My first choice would probably be to go ahead and do some stuff with padding on this. But what Brian has done instead, which in the case of a calculator is legit, we're never gonna add any more content to those particular containers, right?
[00:02:31]
So, what he has done here as he has said that we're going to give this a height of 100 pixels.
>> Jen Kramer: And we're working in flex box, so there's actually no width, right? There's just a flex basis. And the flex basis is gonna be 24.5%. In other words this is not quite 25%.
[00:03:02]
We have just a little bit left over, and that's because we wanna have that little bit of space shining through between those buttons, make sense? Okay, so if we go ahead and save that,
>> Jen Kramer: And look at our code, ooh. Suddenly, we got a calculator that actually looks like a calculator.
[00:03:25]
>> Jen Kramer: Sweet? So, the way we made that magic happen was we added a, we made our font size kind of big, we added a height of 100 pixels, and a flex-basis of 24.5, not quite. Obviously, times for that doesn't quite add to 100%. That gives us a little bit of extra space.
[00:03:43]
And that's distributed as called four in the row and space between, so we wind up with a little bit of space in between those buttons. And we achieve of that effect that kind of looks like a black border in between them, make sense? It's a wrapper that's black, the buttons are on top.
[00:04:03]
So we kind of have a mostly done look to this already, nice? So I went ahead and got rid of my lovely blue borders on the rows. I don't think we need those anymore, so I just deleted that. And so now when we refresh it. It'll look a little bit more buttony, little bit.
[00:04:25]
So we've got the lines in between the buttons, but we don't actually have the lines going horizontally, right? So, we can add a little bit of margin here on our row. Margin-bottom, 0.5%. If you actually do the math with this flex basis of 24.5%, right, that gives you two percent lift over, divide that all up, that’s about half a percent per line.
[00:04:55]
Okay, so we're gonna do the same thing here. If we had a margin bottom of 0.5% on the row, that's gonna bring in our lines on the bottom.
>> Speaker 4: So while I was just playing around, I did a margin-top of two pixels on the calc buttons. I mean, is it-
[00:05:16]
>> Jen Kramer: That would work, too.
>> Speaker 4: It's fine to do it that way?
>> Jen Kramer: Many different ways of doing these things, yep.