Style Guide: Colors

[00:00:00]
>> Then we've got our fancy text. And I'm going to show you this article here. So I gave you a link to this article inside of the web page that talks to you about creating so-called low highlight text. And this is a way that you can, and I'm just gonna scroll real fast on down here.

[00:00:24]
Different kinds of highlights here you can put on your text. So here's an example of putting one up high, here's an example of putting one down low, right? So if you just copy these values from here, And we gonna set up our fancy-text class, and we paste in that, that'll get you that pink background there.

[00:00:55]
So what we have going on, we have a generalized background, which is a gradient. So this is a linear gradient, there's a bunch of different kinds of gradients that are possible in CSS. The linear gradient goes from one side to the other. In this case, it's going at a 120 degree angle with some colors associated with it.

[00:01:15]
We're not gonna repeat that background, we can set the size of that background, and the position of that background to line it up here on the page. So the article is where we start from in terms of getting that in place, and then we can just make a few changes to the colors and the values here.

[00:01:33]
So instead of 120 degrees, I set this to 135 degrees. Instead of the pink color that we have to start with, you can call your variables. So var(--mocha), and that's gonna go from 0. See how it's changing already? And then var(--tan) to 100%. So see how that already is looking a little bit better there, okay?

[00:02:07]
We're going to leave it at no-repeat. The size, you can play around with. What I wanted to do was line up that background with the E in guide. And I found that 35% was a good place to put that. [LAUGH] You, of course, can make that narrower by making that second number smaller, that will make it less tall.

[00:02:30]
So if I said 3%, then we just have a very thin line. If I said 30%, we get a little bit of gap there between the line and the E. See that? Was kind of unsightly, so we changed it to 35 to fill it in, okay? And the background position of 0 and 90% worked for me.

[00:02:51]
So that's how we put that in place. And now, we have a class of fancy-text that we can apply this anywhere we wanna use it later on, super fun. Okay, then the last part is our color boxes. So we're gonna start with our .colors. So we have a div with a class of colors, and then we have a bunch of divs inside of this, right?

[00:03:23]
So we can say .colors, and we could say div. So for all divs inside of a class of colors, that would select everything. You could also do, one of my favorite selectors is, the greater than and a star. So this says, for all of the immediate children of colors, no matter what they are, whether they're divs or something else, we wanna style them in the following way.

[00:03:53]
And what we're gonna do is we're gonna give it a width, 5rem, we're gonna give it a height, 4rem, and display, inline-block. Good, inline block puts them all together in a row. You don't have to work with Flexbox, you don't have to work with grid. We just pile them all up in a row really super easy like that.

[00:04:16]
And then we can say text-align: center, we can say padding: 1rem 0, and a margin of 1rem. So that gives us just boxes that are there on the page. You'll have to trust me that those are all there, that we could say also border: 1pixel solid, var(--coffee), and you'll see that all the boxes are there.

[00:04:47]
Now, all we have to do is assign them the colors. So .white is background-color of var(--white).
>> I'm so sorry, what was the nifty little thing that didn't need flex? Excellent, no inline block, great.
>> Inline block, display of inline block. This is how we used to make vertical, sorry, horizontal nav bars before we had Flexbox and grid.

[00:05:19]
We'd use inline block to put all of our elements together there on a navbar. So it's an oldie but a goodie. Still works great, especially for something like this, it's really simple.
>> It still do but we used to too?
>> Yes, well, people tend to think we have to have Flexbox or grid to do it now.

[00:05:39]
Okay, so now, we can set up all of the rest of our colors, green with a background color of green. And if our text doesn't show, then we can add to that a color of var, whatever, vanilla, or white, or something. Here we go. And then we can copy-paste, so the next one's coffee.

[00:06:07]
Background-color is coffee. And the next one is vanilla, which is kind of already all set. In fact, I'm gonna leave it there, because this is the same thing over and over again to fill in the colors for all the rest of the boxes, okay? Yes.
>> So the greater than sign specifically changed it from all descendants to all immediate children?

[00:06:35]
>> All immediate children, yes. So the greater than sign, it's an indicator of the parent-child relationship. It has no impact on specificity or on the cascade. It's indicating the relationship between the two elements. In this case, between colors and all of its children. So we're saying, for all of those, do these things.

[00:06:57]
Questions on our style guide? Yes.
>> Looking at the screenshot, it seemed like the vanilla box was the only one that ended up with a border, cuz it's the same color as the background.
>> Right.
>> It also seems to be changing the size of that box by adding a border to it.

[00:07:12]
>> It shouldn't, it shouldn't. If you have up here, I didn't talk about. But if you have border-box sizing applied to the page, which is this little bit of code here, okay, so what we say is the box-sizing is set to quote border-box. I'll explain what that is in a moment.

[00:07:32]
And then we tell everything in the universe plus everything before it and after it, we're going to inherit that box-sizing. Because once again, of course, box-sizing is a box model property, it doesn't inherit, so we have to tell it to inherit. What is a border-box? Anybody have any idea what a border-box is?

[00:07:52]
>> Is it the border, the window, the screen that the user is seeing?
>> Kind of sort of, so this has to do with how we calculate widths inside of CSS, okay? So by default, your width is just the width of the content itself, that is all. So if you say width is 400 pixels, that is the width of the content, period.

[00:08:21]
If you then add to it, let's say, 50 pixels of padding, that's gonna put 50 pixels on all four sides. What is the effective width of that item now?
>> It's 100 pixels, 500.
>> 500 pixels, right? And if we add 50 pixels of margin on all four sides, what is its width now effectively?

[00:08:42]
>> 600.
>> 600 pixels, because we add to the actual width property, which is the content. We add to it the padding, the border, and the margin, all of that. Border-box says, ignore the width of the padding, ignore the width of the border. When I say the width is 400 pixels, and I have 50 pixels of padding and 1 pixel of border, the whole thing when I'm done is 400 pixels wide.

[00:09:10]
Makes math so much easier. So the only thing we have to worry about is the margin. So I think you'll find most people are putting this in by default these days. That's what that little bit of code is for.