0:00:00
In this lesson, we’re gonna talk about tokenized CSS and dry development principles. It piggybacks perfectly off the concepts in the last lesson where you learned about things like automatic responsiveness. The mark of a true professional is scalability, maintainability, best practices, all of the things that you are learning throughout this course. And between last lesson and this lesson, these are some of the most important principles for you to master.
0:00:31
I will tell you that CSS variables and the tokenization of CSS accounts for about 80% of my workflow, at least when I’m building websites. So what you’re learning in this lesson right here is of critical importance. I wanna make sure that you are paying very close attention. Let’s go ahead and get into it. Okay, so I’m going to present you with a situation and I’m going to show you how tokenized CSS accounts for this situation, solves this situation, empowers you to keep a website scalable and maintainable given circumstances like this, and then we’re going to go ahead and we’re going to tokenize some of the work that we have already done.
0:01:16
All right, so I want you to consider a situation where we have images across a website. Now, I understand fully that these things are just sitting in one section right here in front of us, but I want you to put on your imagination cap for a minute, and I’m pretty sure you can imagine that images exist across an entire website. Let’s say that this is a 30 page website. So we’ve got these images that are all over the place, you know, there’s images everywhere on the site. Of course, there’s buttons, calls to action, all these buttons are everywhere on all these pages. We have cards for various things like features and services and you get the picture, right?
0:01:54
You know what a website is, you know how complex websites get and how elements are spread out across all of these different pages. Well, on this particular website, we are in a situation where we want the border radius on all of these elements to be exactly the same. So the question is, how do we really approach that? What’s a good way to approach it? Well, I’ll tell you what the highest level chump would do.
0:02:25
We’re talking about, we can have the highest level professional and then we can have the highest level chump. The highest level chump just adds elements to a page and then assigns values to them, styles them up individually, and they just do that throughout the entire website. So for example, they go and select an image, they go down here to border, they open the border radius area, and let’s say we’re gonna do one rim of border radius across all of these elements.
0:02:52
So they assign that one rim border radius, you can see it right there. And then they add another image, right? And so when they add that other image, they go down here to border and they put in the one rim. And they just remember in the back of their mind, I guess, that we’re using one rim of border radius across the entire website. And they continue to do this on every image, on every button, on every card.
0:03:18
And they don’t, I guess they don’t think that this is a problem, I don’t know. I’ve even heard some page builder developers say that, this is kind of how it should be done. They’re like, what, are you insane? Are you actually insane? This is insanity. Let’s say we do this, 30 pages, all of these elements, and then Bev in accounting comes along. Guys, you know, we all have a Bev in accounting, okay?
0:03:45
We’ve all met Bev in accounting. She has fantastic ideas about things that need to change on the website. And she comes along and says, yeah, you know, but you know, that border radius, I feel like it should be a little more rounded, right? She always wants more border radius. Sometimes she wants no border radius. She always wants the logo bigger. We all know a Bev in accounting, right?
0:04:07
She’s got her fantastic ideas. So we’re in a situation where we need to change that border radius. Do you know in this situation, if this is the life you live, high level chump, you’ve got to go to every individual element and change the border radius again? Are you serious right now? No, no, no, no, no. Now, most of you already have caught on to the fact, I talked about a class first workflow and all this, you’ve caught on to the fact that that is not the life that you wanna live.
0:04:39
And it’s not the life I want you to live, right? That’s why we’re doing page building 101. So the next question is, what can we do? And you might say, right, Kevin, well, you teach BIM, Kevin, you teach a class first workflow, we should be adding classes to these things, right? Okay, so what are the classes that we’re going to add? Are we going to add a border radius class to everything? That kind of solves the problem, but it’s also fairly inefficient, right? You’ve got to literally go to every element on the website that needs a border radius and you’ve got to give it a class. That’s kind of inefficient.
0:05:16
And so you say, well, Kevin, you know, use BEM, all of these, you know, all of these associated components can have their own BEM class. And then instead of adding border radius to every individual element, you just make sure you add the same border radius to every set of BEM classes that you do. So for example, I click on this image, I add an image class like this. I’m gonna have to add this to every single image. Of course, if you forget, you know, to add this, then, you know, it’s not gonna have the border radius of the styles that you want. But now I can come in and style this class. I can go to border, let’s put our one rim on there.
0:05:54
And now, yes, it is better because all of them take effect at the same exact time. Then I would have to come to my buttons. Of course, the buttons have a button class. And so really, we just have to do the exact same thing. We come down to borders, and we do one rim. All right, and then we go to these cards, which, hey, they have a BIM class on them, right? They have a feature card class. So that means all of them can be styled very quickly.
0:06:17
So I’m going to go to border, one rim. And this is what I would call like half chump, OK? You’re not a full chump, but you’re still kind of a half chump in this situation. It’s not awful, but you’re not all the way to where you need to be, okay? You’re not elevating that thinking to the next level. Because here, let me just show the problem if you haven’t seen it. Let me just make sure we’re all on the same page here.
0:06:41
Bevan Accounting comes along and says, that actually needs to be two REM, right? And so you come in and you, okay, two REM. Now these changed, but these did not, because they’re all disconnected from each other. So I have to come in, I got to change this to two rem. And yes, it is much, much, much faster, right, than going element by element by element. But you have to remember, what groups of classes got border radius? And you got to go to each group and change the class, change the border radius on the class, okay? There is a better way. And this is where the tokenization of CSS really, really comes in handy.
0:07:19
We need a way for all of these different elements to reference the same contextual value. And so what I’m gonna do to solve this problem, I’m gonna go in and get rid of that border on that class, get rid of the border on that class. We’re gonna start fresh from the beginning, okay? We are still going to use this BIM like approach or this class first workflow But we’re going to use it with tokenized CSS let’s go down here and take a look at the CSS variables. They’re also called custom properties They’re actually technically called custom properties, but more or less everybody refers to them as variables They allow us to assign values to placeholders. I call those placeholders tokens. Okay? They can be named whatever we want. So you more or less, you can name a variable, whatever you want. You’re going to see this in live practice in just a second. Tokens greatly increase scalability and maintainability because they give you a single source of truth for a reusable value. They can be used in math functions. They can reference other variables. There are two types of variables, globally scoped variables and locally scoped variables.
0:08:30
We could make this lesson a little bit more confusing by covering both of them. We’re not going to do that. I’m only going to cover globally scoped variables in this lesson. We will tackle locally scoped variables in a future lesson. Now, here’s the rub and why I came down here to talk about this. Many page builders don’t allow you to use variables and If they do allow you to use variables, they don’t allow you they don’t really have a good workflow for creating them And so I’m gonna show you a workflow that doesn’t rely on the page builder You’re using all you have to make sure of is that you’re using a page builder that allows you to use variables in input fields. Bricks obviously allows you to use variables. Oxygen allows you to use variables. I believe Webflow allows you to use variables. Generate blocks at the current time of this recording does not allow you to use variables. For me, and again I said 80% of my workflow involves the use of variables. So if a page builder doesn’t allow you to use variables, gone, gone, immediately, immediately.
0:09:44
This is a, to me, this is a felony situation. This is prison time. This is, we’re not even, no more consideration at this point, okay? They’re getting locked away, they’re getting locked away until they can rehabilitate, you know what I’m saying? Okay, so if it doesn’t allow you to use variables, it’s just a wrap, it’s done. So let’s talk about, assuming you are using a page builder that allows you to use variables, let’s go ahead and talk about how to create them.
0:10:12
So now we’re gonna go back up here. What does the workflow look like? And it’s quite simple. If you are scared right now, there is no reason to be scared, my friend. This is as easy as it can possibly get, and you are going to absolutely love it. If you’re not used to a tokenized workflow, this is enlightenment for you. You are going to absolutely fall in love with this because of the power that it gives you.
0:10:43
Let’s go ahead and jump out of the builder in this tab, and we’re going to go back into the admin here. I’m going to go to a plugin called WP Codebox. I install this on every single website. What I’m gonna do is I’m going to create a, actually I already have one right here, a global style sheet. This is basically a code editor that allows you to add any kind of code you want. So if I go to new snippet right here, I can go to type, I can add PHP, CSS, SAS, LESS, JavaScript, HTML, whatever I wanna add to this website, I can add it through WP code box.
0:11:19
Now I have a global style sheet right here. I’m gonna go ahead and minimize this tab so that we can get a little bit more space on our screen. And we are going to create our first variable. All right, here’s how we do it. Now again, I’m talking global variables. Locally scope variables are different. We’re gonna cover those in a future lesson. We’re talking global variables. If you want to create global variables, you create them at the website’s root. So you write a colon, you write the word root. Fairly simple so far, right? Colon root, all right? We’re going to open our curlies.
0:11:55
This is where we can put our variables. Now how do we start to define a variable? Well, we use a double dash. Then we can just put the name of our variable. Whatever we want our variable to be called, I am going to create one called radius. And this is gonna be the radius for all of the elements on our website. Now, I know when we’re naming things, there’s always the question in people’s mind, like, is that an official name of some sort?
0:12:23
Can you really name it anything you want? Yes, you can name it whatever you want. If you want it to be element radius, if that makes more sense to your brain, you can name it element radius. You can name these whatever you want. What you should not do is use some weird abbreviation, name that doesn’t have any context, because we always have to talk about the three month rule. What is the three month rule?
0:12:46
If you leave this website, you finish this website, you leave for three months, and then you come back, are you gonna be able to look at the names of things and understand exactly what that means, exactly what it does? If you use abbreviations and poor naming conventions and things like that, you’re gonna get lost in your own code, and you’re defeating the purpose of all of this stuff, okay? So use plain language, use well-named, contextual names for things, and your life will be much easier.
0:13:16
So here we go with radius. What was the radius? Two rim. It can be whatever we want as you’re going to see in just a second, but we’re going to put the value of two rim guys safe. I’ve created a variable. My first variable is created. It is done. Do you see how easy this is? Now watch the power that it gives you. Where these elements, they’re all different elements, they all have their own classes going on, they’re all disconnected from each other, this variable in the context of border radius connects all of these things together. So I’m going to go in here, now I would still not do this image class thing.
0:13:57
What I would do is say, hey you want all images on your website to have the same radius? Well, let’s just target the image element with CSS. So I would also come in here outside of my root and I would just target my image elements on my website. And then I’m gonna add the border radius to them. Notice here’s what people get confused on. They’re like, I wanna create a token for border radius. And they come in here and try to, they try to like radius border radius, like they’re trying to set the actual instruction in C.
0:14:28
No, no, no, no. Tokens are for values. They’re not for CSS instructions, okay? They’re only to capture a value in a placeholder, all right? So here’s to-rim. We come down here, we say, now we’re doing the instruction. So we’re targeting an element, which could be a class, an ID, in this case it’s an HTML element, and we are giving it a border radius of what? Well we’re not gonna write to rim right? What we’re gonna write is the placeholder. So what we need for a variable is the variable function. So the variable function is var and then open close parentheses. It’s as simple as that and then all you do is slap your placeholder, your token, right in the middle of that. So we do our double dash because that’s how it is right right here. Sorry, my face is trying to eat my tongue for some reason. All right, so radius, border radius is var radius. Guys, we’re done. We’re done. I’m going to I’m going to hop over here. Look at that instant update. That’s another great thing about WP Codebox. If you look at the settings for my snippet right here, auto reload changes. I don’t even have to reload the page, guys. It just I automatically see my CSS happen as soon as I write it.
0:15:40
Alright so we saw that that was very easy now what should I do? Well I’m gonna go to my button classes. I’m gonna go down to border and here we are in a builder using a variable. So I’m not gonna put to rim like we did before. I’m gonna write var radius and then I’m going to link that to all sides. Look at that now. Let’s go down and border radius. Here is for our feature cards also getting our radius our shared token save now the moment of truth here comes Bev here comes Bev marching down that hallway and she’s like we got to go to one rim all our border radius is what she didn’t even know what a rim is she’s up well our border radius is we got to make a more boxy right whatever she’s gonna say. So we’re gonna take them back to OneRim.
0:16:28
Look at this, I don’t have to remember what elements have the border radius, I don’t have to go to classes, I don’t have to do anything. I know that I’ve tokenized my CSS and I have a variable sitting right here. And the minute I change this two to a one and hit save, all of the border radiuses on my website update immediately and now Bev don’t piss you off so much right? Bev needs a little change, hey it’s not a big deal. If you did all that at the ID level, element by element by element by element, you would absolutely hate your life.
0:17:03
But when you tokenize your CSS, I mean, like I said, you are going to fall in love with tokenized CSS. Now let’s scroll down. Oh, I should probably tell you what DRY development is, okay? We’re talking about DRY development principles. DRY is an acronym and it stands for don’t repeat yourself. If you ever find yourself in a situation where you’re repeating the same code over and over and over again, a little red flag should pop up and say, oh, I should probably be tokenizing this. I should probably be making this more scalable and maintainable and efficient, right?
0:17:44
So there’s a lot of ways to follow dry development principles. Guys, a class first workflow is the fundamental way to follow dry development principles. Instead of repeating the same styling element by element by element, you create a class and then you apply those styles to the class and simply give every element the same class. That is dry development principles like first level. Next level dry development principles as we can see here is tokenization of CSS so that we’re using variables and we can share variables among various elements. That is yet another tool in our tool bag for following dry development principles. What we don’t want to do is constantly repeat ourselves, constantly duplicate our code, very inefficient in terms of just underlying code quality, very inefficient in terms of scalability and maintainability. In fact if you don’t follow dry development principles you’re more or less breaking scalability and maintainability of the websites that you build. You don’t want to do that.
0:18:53
It makes your life harder, it makes things more expensive for the client, and it’s not hard to follow dry development principles. Like once you have ingrained this stuff into your brain and you go to a site where you haven’t followed these principles, you will literally hate yourself. Like that version of yourself, you’re like, oh my God, what a disaster, what a disaster. Okay, all right, I think you guys understand it. So that’s what dry means, do not repeat yourself.
0:19:25
So once you’ve created a variable, you need to commit to it. You need to commit 100% to the variable. I created a radius variable. I should not start to go off and add a random radius value over here and a random radius value over here and neglect the radius variable that I’ve been using in other places because you’re now creating that disconnection. All right let’s go down and let’s talk about creating a variable for our section padding so that we can replace our clamp functions. I think I said in that last training I don’t have clamp functions floating everywhere on my website.
0:20:03
This is a, an absolute nightmare. That’s not something that you want. So what I’m going to do is I’m going to go back to settings, theme styles. I’m going to go to section and there they are. Those clamp functions just sitting there, man. So ugly, right? I also want to point out, I did build for you guys. Cause I felt like that other clamp calculator was a little bit like over engineered, a little bit more complicated than it needed to be, I built you guys one. I built you guys a clamp calculator. So you can go to gary.co slash clamp calculator and just use mine and it’s got way less options and it does exactly what you need.
0:20:39
And it’s actually gonna give you a cleaner clamp function. So just wanted to make sure that you guys were aware of that. I did link to it in the last video. All right, so here we go with our clamps. Now, I’m gonna grab that clamp function right there. I’m gonna go to WP CodeBox, and I’m just gonna put another line in, right? You can create as many of these tokens as you want. You can even comment them, right?
0:21:01
So a comment in CSS is a text that does not influence the code and is not really output. Well, there’s two types of comments in CSS. There’s a comment that looks like this. Okay, so it’s a forward slash then a star and then you can say like border radius for all elements and then a star and then another forward slash and This kind of comment will get output on the front end in the style sheet But it does not affect the code. So it and it’s basically a note. It’s a way to You know notate your CSS. Now there’s a second type. If you’re using SAS, which I am, where I could say border radius for all elements, and that does not get output on the front end.
0:21:48
It’s literally can only be seen in the SAS style sheet. But again, it’s a way to notate your CSS so you can let, and this is great if you work on teams, like so somebody else comes along and they’re like, what is that radius variable for? You know, if it’s not obvious by the name, there’s a little note next to it, which is a good practice to follow. Okay. So I’m going to create one called section block padding. All right. Now again, you can name this whatever you want, whatever you think makes the most sense.
0:22:20
I’m going to paste in the clamp function. I’m going to come down here. Remember our inline padding is different from our block padding. So we’re going to do section inline padding and then I’m going to go over here and I’m going to grab that clamp function right there and I’m going to paste that in. Perfect. And then I’m going to go ahead and hit save. Now we’re going to come over and I’m going to replace these clamp functions with our tokens, with our variables. So I’m going to write a var function and I’m going to say section block padding and then I’m going to drop that in down there and then I’m going to put Another actually I’ll just paste this in and I’ll come over here and I’ll change the word block to inline I’ll paste I’ll change the word block to inline and now let’s go check on the front end Do our sections still work is everything still responsive?
0:23:10
So let’s open get a mobile mode here, drop this size down. Let’s inspect our section. Okay, so we’re going to watch that white space. It is shrinking, shrinking, shrinking. It is nice and fluid responsive. The only difference is we now have a variable in that input field instead of a nice, long, ugly, convoluted clip function, okay? And now we have the ability to reference our section padding, which if you remember back to the last lesson and those overlapping thing that I showed you, I think you can see now where this is going to come in a little bit handy.
0:23:47
And we need to talk about creating unbreakable situations, which we’ll do in just a minute. All right, so we did our section padding. What about those heading sizes that we included in our global styling. Those had clamp functions too. Should we be tokenizing our heading sizes? Well, yes, I think we should. We don’t want to repeat ourselves and you’re gonna find that we do have to repeat ourselves. Let me demonstrate here, okay? There’s this question. Can we easily swap one heading size for another?
0:24:23
So if I go to typography, remember this is an H2. Let’s say I want to make this heading the same size as my H1 headings. How would I approach that? Well, I would just give you a little note. What you absolutely do not ever do, this is ultimate Chumpville, okay? Is you take your H2 and change it to an H1, you’re like, did it, did it, there it is, same size as my H1.
0:24:46
No, no, no, no, no, no, no, no, no, no, you can’t do that. You’ve semantically changed the value of that heading. Right, remember it’s changing the tag in the HTML from H2 to H1, this is not an H1 heading, it’s a section heading, it’s an H2, semantically. So it’s gotta stay in H2, you can’t do that. That is a massive violation, again, that’s felony situation, prison time, okay, we’re not doing that.
0:25:09
So what we need to do is we need to be able to put in whatever the size of our H1 is in this font size field but you’re using clamp functions and you’re not using tokens i mean what like what are we doing here i mean this is ultimate chump level look you’re gonna have to come up here go to theme styles every time you want to do this typography h1 grab the clamp go back here go typography, H1, let’s say you slap in a new clamp function. You’re like, now I want to change all my H1s. Well, guess what? This particular heading is not going to get that new instruction because it has a raw clamp function sitting here from your old H1 heading size.
0:25:57
You see what I’m talking about? This disconnection, this violation of DRY principles right there. Don’t repeat yourself. You’re repeating this font size instruction in multiple places. If it changes in one place, it’s not going to change in all of the others. You’re creating massive disconnections across your entire website. So how do we fix this?
0:26:19
Well, we go over here, theme styles, typography, heading one. We grab this clamp function right here, we hop into WP code box, we come down and say h1 and then we pop that clamp function in, we hit save, we go back, we replace this with a variable h1, okay, and then we save. Perfect. Now we come down here, where is that heading that we wanted to change the size of? Right here. So I grab that heading, typography, no. Get rid of this dumb clamp function. Why is it dumb? It’s dumb because it’s raw.
0:26:55
It’s not based on a token. It’s not tokenized. We have no global control over it. And now watch how easy this is. I don’t need to know what the clamp function is. I don’t need to know what the value is. All I need to know is the name of my token. And say, you know what? Here’s an H2 heading, and I want to make it the size of an H1. So I go to font size and I say var H1 and now it’s the size of an H1 and if that H1 ever needs to change it’s gonna change everywhere I’ve used this token. So scalability, maintainability, a hundred percent protected. We’re creating unbreakable situations in our website. Okay now I go down and it says can you use a calc to adjust a heading size on the fly? Well, yes we can. Let me go up here Let’s finish tokenizing this. Okay, so I’m gonna go to typography Here’s our h2 which is a has a clamp function in it. We know that’s no good Let’s drop in an h2 variable hit save. Let’s see if we did our h3s as well So there’s a clamp function for our h3. So while we’re here, let’s go ahead and define an H3 variable. And then let’s come over here, var H3. So we’ve got our H2s. We got to put that in here. H2. And I’m going to go ahead and hit save. So now our heading one, heading two, heading three, not only are they fluid responsive, they are also tokenized. And so this is fantastic. This is the life that we wanna live, my friends.
0:28:28
So now the question becomes, can you use a calc to adjust the heading size on the fly? Well, remember what I said up here, can be used in math functions, all right? So we’re gonna come down and we’re gonna see, I’m gonna grab this right here, and I’m gonna say, you know what? I don’t want this to be the size of my H1. I want it to be the H2 size, but 10% bigger. I wanna go up 10% from where we’re at right now. So what I’m going to do is put in a calc. Then I’m going to put my var h2 inside of the calc function. This is an h2. I want it to be the size of an h2, just 10% bigger. So I’m using a calc var h2 times 1.1. So let’s go ahead and hop over and inspect. Now this is an h2 right here. So we need to get what was the size of an h2 to begin with I’m going to inspect it We’re going to go to the computed tab scroll down. We need our font size the calculated font size 36 pixels is the size of our h2 on a desktop, so I’m going to open this Calculator let’s go ahead and open a calculator, so we can all see the exact same thing 36 times 1.1 is 39.6.
0:29:41
That’s what we should be seeing in our adjusted heading size. This is the heading size that had the calc times 1.1. So I inspect, guys, look at that computed value right there, 39.6, because a variable can be used in a math function. This is really what makes them have superpowers above and beyond just being referenceable and all of that other stuff. Being able to use them inside of math functions is mission critical. I didn’t have to go generate a new clamp function that had the values, the bottom and top values at 10% higher.
0:30:17
I just popped in the variable and then I’d multiply the variable by 1.1 and I got exactly what I wanted. It’s still fluid responsive. Everything exists the way that it did before, it’s just both values are 10% bigger. Okay, so we can adjust heading sizes on the fly using variables and calc functions. Now let’s tackle this last question and this will be the end of the training. This won’t be, you know, this is kind of a short and sweet training compared to some of the others. Can we use variables in the overlapping div scenario from the last lesson to make the overlap effect unbreakable? Well let’s go ahead and find out. So let me give you a refresher and if you didn’t watch the last one, what we did is we created this hero section and the hard part was, the hard part was it has an overlapping card that overlaps part of that section container.
0:31:11
So I’m going to go into style, layout and in our section padding, the bottom padding, you’re going to see that we use the calc. And the calc has the section padding clamp which is really ugly and dirty and all of that, plus this offset value. So we, if I click on the card and I activate that class, we can see there’s a negative 8 rim that is creating this overlap. So I use negative margin to pull that card up so that it overlaps over the section above it. Standard way to do an overlap like this. The problem is that’s a dumb value because it’s a raw value. The other problem is in this section padding. We’re using a raw clamp function for our section padding. What if our section padding ever needs to change? This calc formula is immediately going to break, okay? Because it’s not tokenized. What if our overlap ever needs to change?
0:32:06
Once again, our stuff is not tokenized, therefore it is going to break. So we need to tokenize this situation. This is another one where I even, I think said in the video, I was like, my gosh, I wish I could be using variables right now because this is insane. Variables make this so clean, so easy, so unbreakable. It’s absolutely fantastic. Okay. So what we’re going to do is we’re going to number one, get rid of this clamp function right here. What are we going to replace? Remember that clamp function was the section padding. So what are we going to replace it with? Well, we’re going to replace it with our variable block section block padding, right?
0:32:42
So I do a var function. I do a double dash section block padding. Look at that guys. It’s back. Hey, but we don’t have this super dirty clamp function in there And when my section padding global section section padding ever changes This is gonna update automatically with it because it’s referencing that value now We need to take care of this overlap right here now. I will say disclaimer This is an area where locally scoped variables would probably be better than globally scoped variables, but we’re not getting into locally scoped territory yet. So I am going to do this with a globally scoped variable. So what I’m going to do is create a variable called CTA card overlap.
0:33:24
Okay. I’m going to go back into code, into code box here, and I’m going to do CTA card overlap and then, or you could do offset, right? You could do offset overlap. Again, like I said, you can name this whatever you want, and we’re gonna make it minus eight rim, just like that. I’m gonna go ahead and hit save, and then I’m going to come in, and I’m going to do this in two separate places. Now, the trick, the thing that you might be worried about in the back of your mind, and if you’re really, really, really paying attention, you’re like, Kevin, the problem is, this is a negative number in the margin field to create the offset, but in the section padding field, it needs to be positive. What in the world are you going to do with one single variable? And that’s actually a really good question. What I’m actually going to do is I’m going to make this a positive value. So the value is 8rem. Positive. Positive value. You can still do this with one variable. Why? Because variables can be used in math functions and I’m going to show you how to turn this into a negative number.
0:34:29
Okay, so we’re gonna go over here, and we’re going to put in our offset. VAR CTA card offset. Notice it does it. Now I’m gonna save. It should be giving me, oh, I didn’t save the sheet. It should be giving me a positive value, but I didn’t hit save, so it didn’t get that change. Now I go back, and look, it’s got a positive offset value. That’s kind of a problem, right?
0:34:53
We wanted to go the other direction. So here’s what we do. We take that variable, remember they can be used in math functions, calc it, offset times negative one. Now it’s a negative number. So now I can take this value and I can manipulate it in various ways. I don’t have to create multiple tokens. One token can then be manipulated with math functions.
0:35:15
Okay, guys, I told you math functions was serious. Like you’re gonna use these all the time, especially when you’re using tokenized CSS and you’re going to love your life because of how easy and unbreakable this makes things. Okay, now I’m gonna go in here. I still have this raw offset value right here. Gotta get rid of that. That’s breaking dry principles, right? I’m repeating myself over and over again so VAR, CTA, card, offset, now all of this watch this I need my look at how I did this on purpose in the last training I didn’t create a super clean overlap where it’s like half and half so I actually want this overlap to be larger than 8 rim so I’m gonna change the overlap now and I want you to see why I say these are unbreakable situations.
0:36:07
Okay. Now, if I did not create tokens, when I change this overlap, I would also have to come in here and manually change this calc. But because I’ve created tokens with CSS variables, I only have to change my offset and this section padding will recalculate itself for me. So I’m going to go in and I’m going to say we actually want a 10 rim offset. I’m going to save, hop back over. Now it’s almost there, almost there. Maybe we need an 11 rim offset. And now it’s like almost perfect halfway between the CTA card. And look guys my section padding is still perfectly balanced top and bottom because it’s recalculating based on the offset every time I change the offset.
0:36:53
This is the power of tokenized CSS. And remember, this is one small, small example. You are going to run into situation after situation after situation, let me go back to camera, where you are going to find yourself needing these variables, needing these math functions, and they are going to make your life tremendously easy. So I want you, if you didn’t quite grasp everything that we talked about in the last lesson, and if you’re still trying to digest, because I remember, I’m hitting you with fire hoses right in the face, okay?
0:37:29
I said most course creators would not be introducing stuff this early, but in my estimation, we can’t just go off showing you how to page build without teaching you these principles because you’re going to do it all wrong and then we got to come back and say all right all that stuff we we showed you that was actually kind of wrong now we’re going to go back and do it again the right way no we’re just going to do it the right way from the beginning that’s what we’re doing with these lessons right here so if you have any questions if you do feel lost if you’re like kevin just having a little trouble digesting, right? Drop comments below. I will jump into the comments and I will help you. We will, and other people can jump in and help you as well. And if you really, really want a lot of help, I, of course I have my inner circle, gary.co slash inner circle. You can get information on that. Uh, so that’s it for this lesson. We’re moving on. We’re going to, you, you see speed is picking up. You are going to be page building very very very soon. I know we haven’t done a lot in the page building realm yet We’re still learning Philosophy and principles, but the minute we start page building all of this stuff is going to come together very quickly It’s all gonna start to feel very easy for you. You’re gonna see the same concept Oh, I saw okay now when he taught that I see it in practice here And you are going to be able to make websites that are far, far, far above in terms of quality, scalability, maintainability, everything, the work that you were previously doing. All right.
0:39:01
So until the next episode, I am out peace.
