CSS Variables

[00:00:00]
>> Jason Pamental: Another couple little details that I have here that you can take a look at is playing around with the coloring version. So this is something that quite often when you switch around that figure group relationship with color. If you don't do anything with text grade, sometimes things can get a little bit harder to read.

[00:00:24]
So, often times by flipping that around you actually want to play around it a little bit with the text grade so that,
>> Jason Pamental: There we go. So when I add the text grading, you can see it sort of increases that contrast just a little bit. And I think I've sort of forced the grade in the inverse mode, because without the text grade then this all can tend to be a little bit spindly.

[00:00:56]
The text doesn't really have enough contrast to stand apart from the background. But that's all stuff that's really easy to change. Let me take a look at what that looks like in the CSS.
>> Jason Pamental: So, that little JavaScript toggle, all it does is add or remove a class of inverse on the HTML element.

[00:01:27]
So what I've done is here, when the inverse class is present it just changes the background color and the text color. But it does a couple of things here, it changes the text grade when I have the inverse class present. And what's also worth pointing out is how this stuff is actually written out.

[00:01:52]
So I wanna actually get into more detail here cuz this is where we start to make good use of CSS variables outside just the calculations for scale. One of the things that I had mentioned early on is when you have the font variation settings, and you write them all out with static values, you have to rewrite the whole string.

[00:02:17]
So if we go back to a slide where I have that,
>> Jason Pamental: Here, so in this slide, my font variations settings would a width an italic value or optical sizing, if you wanna change one of those values, you have to rewrite the whole string. So when you wanna do things like just change the weight.

[00:02:50]
Or like if somebody's hovering something and you want to actually just increase the weight of the text, or something like that, you have to rewrite this whole string every time and that could be really cumbersome. And what I realized was this is another instance where CSS variables can really come into play and be really handy.

[00:03:09]
So the first thing that I do up here,
>> Jason Pamental: When I write these things out. So this looks a little bit crazy. But for any element where I'm gonna change the text size, I create this baseline declaration. Now this typeface, the FF Meta, only has weight and italics.

[00:03:38]
But I just define the font family, font, weight, and style normal, so that way browsers don't try and fake bold a heading. That's something that browsers will do is try to set the size to bold if they think you're suppose to have it even if we're specifying a font weight.

[00:03:54]
And then, set the base font variation settings of weight and italics using those CSS variables. I don't have to do anything else. But now, at any point where I want to change the weight, all I have to do is re-assign the variable and scope it to that selector.

[00:04:12]
So that makes it really easy for me to do things like down here for the heading. All I'm doing is changing text weight, the variable assignment. So, whatever is applied to an h1, just change that one value. So, it makes it much simpler while rewriting much smaller code.

[00:04:35]
And now, if I wanna take that whole stack and change the base weight for everything in a little chunk of code that I put in a widget in a side bar. I could scope sidebar widget font weight change that one value, it'll impact everything that's scoped inside it.

[00:04:57]
So, it really makes it useful and portable, especially in a design system, for you to have all of this stuff encapsulated. And wherever you place that widget you could have some CSS that redefines just that one variable, that one aspect that you wanna change. And it will affect everything that's encapsulated in that one object.

[00:05:17]
So using CSS variables this way is really in a way letting you theme these different elements, and write way less code. Because you don't have to rewrite all of these declarations. All you have to do is just reassign that one thing. So you can see when I get down into some of these things.

[00:05:39]
All I'm doing is setting text italic here further down in some of these other elements, like the block quote. Just changing text weight. So the paragraph inside the block quote gets a difference text weight calculation an Italic value, citation gets something a little different. So again, all I'm doing, I'm never rewriting that font variation settings.

[00:06:07]
I've done that once in the entire file, and just applied all the elements that I want it to be relevant to. And then the whole rest of the file, all I've got to do is just redefine variables. So it really makes it much, much simpler.