0:00:00
Welcome back, my friend. You made it through the last lesson. I know I apologized a few times. That content is a little bit tedious. I like to teach in a very practical sense. Like, let me show you the practical real world reason for why I’m teaching you XYZ technique, and that’s just not possible with CSS units. Like, you either know they exist and know how they work or you don’t. And so I’m glad you got through it. I know I apologized a few times that was mainly just to support you mentally and emotionally to help you get to the end of that lesson and get on to this one. And I know I said that this lesson might be a little bit more of the same but it’s actually not. This lesson is extremely practical. It’s going to open your eyes to the true value of a course like this, the true practicality of a course like this. What I’m about to show you in this lesson is going to teach you how to build what are called fluid responsive websites.
0:00:58
These are websites that are automatically responsive. I’m gonna show you the difference. I’m gonna show you what most people using page builders do. And then I’m gonna show you my method, this method. It’s not my method, but a couple of years ago I started teaching these principles and practices. And that was before literally I had not seen anybody else in the page builder world teaching this kind of stuff. So now you’re gonna see it more and more and more but you know two years ago when I started teaching these concepts really I didn’t see anybody doing it and it just it fundamentally changes how you approach web design and makes your life insanely easier. So that’s enough intro let’s just let’s just hop right in. So we are going to be talking about some math functions today.
0:01:44
And I alluded in the last lesson to the fact that I don’t really use like pure rim values for a lot of things or pure VW, VA, all these units that we talked about. I don’t just use them by themselves. I often use them in a math function. Now sometimes I do use them by themselves but like I said often I use them in a math function and we’re going to talk about some situations that affect your entire website where we are in fact going to use these math functions and it is going to make your life so much easier. So let’s go ahead and dive into the first math function which is called clamp. Now clamp sets a minimum, a maximum, and a preferred range. And what it does is it scales the item fluidly between the minimum and the maximum. Now what is the preferred range? We’re going to talk about that in just a second, but I’m going to show you what a clamp function looks like. So this is how I would write a clamp function. So I would write clamp and then you always are using parentheses with your functions and then you need three different values. You’re going to have a min value, comma, a preferred value, comma, and a max value. And so it will go from the min to the max. Now what is the preferred value? So for fluid responsive design, this is actually calculated based on your website’s width and the device width and so on and so forth.
0:03:21
And it’s a very, it’s not an easy calculation. And so, rather than doing this all manually, I’m going to direct you to a fluid responsive font size calculator. You should ignore the word font size. We are going to use them for font size, but they can be used outside of the realm of font size as well. So you really just need to ignore this font size label in the calculator. And we’re going to come down here and we’re going to talk about creating our first function. Now, our first clamp function is going to be for our section padding. So before we create it, I want to refresh you on what is going on with our section padding. And I want to show you what most people, aka chumps, have to do to manage their section padding across their website. So we’re going to go to the settings and we’re going to go to theme styles and we are going to go to element section. These are the global styles for my section padding. Now what did we learn in the last lesson?
0:04:28
We learned that we should not be using pixels. I was initially using pixels because that was the only unit that you knew about within the realm or the context of this course. Now, you know better. You know we should not be using pixels. So what do we need to use here? Well, we can easily swap out our pixels with rims. So I can do eight rim, eight rim, and then on the sides 6rem and 6rem.
0:04:53
Okay, perfect. So now I’m not using pixels. That’s fantastic. But this is not responsive. So 8rem on desktop is going to be 8rem on tablet, 8rem on a horizontal phone, and 8rem on a vertical phone. And as you can see, this padding, though it was, you know, perfect for desktop devices, actually I would even maybe argue a little small.
0:05:20
Like what if we want to do something like 10 REM in our sections. Sections, you don’t want everything on your website to feel cramped. You want to have a little bit of breathing room. So this is how we’re creating this breathing room. So I effectively have 100 pixels of top and bottom padding, but on a vertical mobile device, that’s a lot of padding. But you don’t really need that much.
0:05:41
So what most people do, aka chumps, OK, just saying what most people do is they go 10 RAM on desktop, then they come over here and they’re like, all right. Um, so on this one, I actually want it to be like eight RAM. All right. So eight RAM and eight RAM. All right, good. And then they come down to this breakpoint and they’re like, oh, let’s make this like six rim. And they’re like dialing this stuff in breakpoint by breakpoint.
0:06:09
And they’re like, all right, that’s starting to look pretty good. Maybe on this mobile device, we’ll do five rim. We’ll just kind of make it a little bit smaller. And that’s how I want my sections to be. Okay, so we save, we go to the front end, we check this out on mobile, and you’re gonna notice that it’s basically we’ll have, there you go. You see the jump. Oh, it jumped. Okay. Let’s keep going. As I get to the next break point. Oh, it jumped again.
0:06:37
Look at that. It jumped down. So the padding, you should be watching this white space right here. Watch. It’s going to jump up down. Okay. And there’s going to be one right there. One more little jump. Okay. So number one, it’s a little bit janky, but number two, we’re just throwing random values out here and number three I just had to make four different decisions at four different breakpoints And if I ever decide that those were not good decisions I have to go back to every single breakpoint and make those decisions yet again And this is what I call the life of a chump This is what you want to avoid in web design.
0:07:15
If you can make things automatic, you should make things automatic, right? That makes sense. Okay. So what can we do instead? Because this is not what we do, right? Page building 101 people don’t do this. They know better. They have a better strategy, a better method. So what I want to do is I want to take these values out. Like we messed up.
0:07:37
We don’t want to go that route so let’s go ahead and delete and here we are back at our original section padding it’s not responsive but we’re about to fix that and we’re gonna fix that with a math function called clamp and what we’re gonna do is go over to this fluid responsive font size calculator so if you remember what we did we had our very last breakpoint was 10 REM. So what we really need is our section padding to move fluidly between five REM and 10 REM. And that’s gonna be done with one function that we’re gonna put in our padding box. So watch how we do this.
0:08:20
First of all, when you come to this calculator, very, very important, it’s gonna be on pixels by default. And you already know, that’s not what we’re doing. Okay, so we got to hit rim. We’re going to select rim and then we’re going to be asked a range. Okay, so the range is from 5 rim to 10 rim. We just had this discussion 10 on desktop 5 on mobile. So it needs to scale from 5 to 10. That’s 50 pixels to 100 pixels. Okay, now it’s going to ask you your viewport. This is the browser width, or really the device width. It’s the width that you want your website to be displayed at, but it’s a range.
0:09:01
So what’s the smallest device, and what’s the largest device? Where do you want the scaling to stop? Well, our scaling needs to stop at our website’s width, not like, oh, well, on a 32-inch screen, it’s just gonna keep going it’s gonna hey 64 inch screen it’s gonna keep scaling no no no no no at the scaling of this value needs to stop at our website’s maximum width which on my site is 1366 pixels. Okay. Now what is the minimum device size?
0:09:42
Whatever you want it to be. But I typically use 32, which is 320 pixels. There’s not many devices that people are going to be viewing the websites on that are smaller than that. Okay. So 32 to 136.6 is the viewport. And now you choose clamp. Okay. I don’t think it’s on clamp by default. It’s on like minmax or inquiry or one of these, right? Select clamp, uncheck all of these options down here, and then you’re going to come down here to the generated CSS. You are going to ignore the font size. All you want is the raw clamp function, and you can see right here this middle value, the preferred value, is quite a complex calculation.
0:10:28
And so, you know, we don’t want to tangle with that right now. What we want to do is just grab our clamp function. Don’t grab the little semicolon down there. Okay, copy this, come on over, and then you’re going to replace the 10 rem, which is a dumb value. It’s not a smart value. A smart value is a dumb value. Not to say that it’s bad, dumb, right? Sometimes you use a dumb value, but a lot of times, like in this situation, you want to use a smart value with this, which is a math function. And I’m just going to hit paste. And that entire clamp function right there has been pasted in. Now I’m going to come down here and I’m going to paste in that, that same exact, cause we want the same padding, top and bottom.
0:11:10
We already talked about that. You want even padding in your sections. I’m going to leave the gutter alone for right now but you’re going to see where the value comes in in terms of the gutter as well. Okay so I’m going to hit save here we’re going to go back to the front end and now what I want you to see all right is that it’s going to fluidly oh look at that no jumps but as we go down in device size our remember what are you watching you’re watching the white space. Get your eyes on the white space. Get your eyes on the white space. Okay, watch the white space. So it’s gonna start shrinking, right there.
0:11:45
You can start to see it shrink, shrink, shrink, shrink, shrink, shrink, shrink, it’s shrinking down. And I can prove this to you. Look, I’m gonna inspect this. We’re gonna go to over here. I gotta dock this on the left-hand side. I’m gonna dock this on the left-hand side. All right, I’ve selected my section. I’m under the computed tab, and we’re gonna look at our padding.
0:12:03
So here is padding bottom, a hundred pixels, padding top, a hundred pixels. Watch as I drag this in, look at this number right here. Look at how it’s fluidly shrinking down to where on a mobile device, it looks exactly the way I want it to be. In fact, it looks exactly the way I want at every device automatically. I don’t ever have to touch a breakpoint for my section padding ever again. That is the value of using these fluid clamp functions for something like padding. Ok now let’s talk about our gutter that inline padding. What do we want those values to be? Those are going to be different values my friend. 6-Rim is what I have it right now at desktop but that’s too big for mobile devices. What I would like maybe is like 24 pixels, maybe 20 pixels, something like that. So actually very narrow gutter. Let’s do 2.4 to show you that you can do absolutely decimals if you want to. These don’t have to be whole numbers. So I want 2.4 to 6 right there. I come down here, I grab my clamp function just like that, and then I’m going to paste it in place of the six rim and in place of the six rim.
0:13:19
Now you’re going to see that entire clamp function is in there. The entire clamp function is in over here. And now what I want you to do is watch on the front end. So here we are at our desktop size. I am going to refresh. I am going to inspect this section. I want you to pay attention to the left and the right values now. These two right here, as we do, oh, they’re all changing now. Oh, this is gorgeous. Look at how our gutter has shrank on mobile devices. Every device, it gets a little bit smaller, right? On desktop, got a nice healthy gutter over there. Coming down, much, much, much smaller gutter.
0:14:04
No worrying about break points ever again. This is what a clamp function does for you. It solves major, major problems with your, not problems, but challenges with your website. Responsive design is a big, big, big challenge. This is like removing dozens and dozens of decisions that you are gonna be making throughout the course of a web design. This is why when I created Automatic CSS, my CSS framework, it hinged on math functions like this, and doing all this work for people, all of this work when you use Automatic CSS is already done for you.
0:14:43
All of your headings, all of your spacings, all of your everything, everything follows mathematical ratios. It’s all perfect, and it’s all user adjustable. You can adjust all of these things. It’s fantastic, right? But this isn’t a sales pitch. So what we’re gonna do is continue on and show you where else these clamp functions can be used. All right, so what we’re gonna do is we’re gonna scroll down a little bit.
0:15:06
We talked about clamp for section padding. Fantastic, right? I think you guys are, you’re probably excited, right? Sitting behind that computer screen right now. You’re probably like, okay, all right, I’m here for it. I’m here for it, Kevin. So now we’re gonna do clamp for headings. This is an H2 heading. If I go into Bricks, let’s just look at, what are the chumps?
0:15:26
What does their life look like in web design? So we’re gonna go to, we’re gonna go back to theme styles. We’re gonna go to typography, and I’m gonna look at my global heading two panel. Let’s say I want my heading twos to be 4.8 rim okay so 4.8 rim that’s fairly good. A little bit big for an h2 but I just want to prove a point here all right so I’m gonna go back to theme styles here typography there’s my h2 okay so perfect. Now keep in mind keep in mind a lot of page builders number one if you get this clamp function and you go to insert it in your page builder and your page builder doesn’t accept a clamp function as a value, immediate dismissal, immediate dismissal, major red, that’s beyond red flag.
0:16:13
That’s a straight up violation. That’s prison time, okay? So you’re cutting out the page builder at that point. But now go into your page builder and go to your global theme styles and you’re gonna see that it allows you to set a value like this for your heading. But does it allow you to actually change that value of breakpoints? Because what a lot of chumps have to do is they have to come in here and say, all right, well, and see, I got to even open the panel again. My God, this is not the life you want to live. So 4.8 rem on desktop.
0:16:40
But at this break point, I want it to be four rem and at this break point I want it to be maybe three rem. And at this break point, I want it to be like 2.4 rem, maybe even 2.2 rem. And you’re like, the chumps, they’re like eyeballing it. And look, I’m just poking fun, okay? I don’t, you get it, right? Don’t be soft. Okay, so 2.2 rem is like my final value. But on desktop, I want it to look like this. See, that’s a big difference, right?
0:17:09
But what did I have to do to get this to happen? I had to go break point by break point. These are just the decisions that I’m making for one heading size, my H2, right? A lot of decisions when you’re setting up a website across all of these break points to get responsive design. Or, or, or, you can work smarter, not harder, and you can use math functions. So what I’m gonna do is I’m gonna delete that, go to this break point, delete that, go to this break point, delete that. We don’t want to be living this life. We know that clamp functions exist and we know we can use clamp functions.
0:17:47
So what we’re going to do is we’re going to sit right here and now you still have to decide what are what’s my low end, what’s my high end, how do you make that decision? Well I recommend basing them on math skills. That’s like I said I created automatic CSS. Everything is based on math scales, which means, for example, your H2 is 1.33 times higher than your H3, and your H3 is 1.33 times higher than your H4, and so on. That’s one way to do it, okay? This is up to you. I’m not gonna tell you what all your values need to be in all of this.
0:18:17
I’m teaching math functions, okay? And I’m just opening the door to automatic responsive design, fluid responsive design. So I said 2.2 on that heading example was the low end and on the high end shoot I don’t even remember what it was 4.8 let’s just do 5 rim let’s do 6 let’s just make it obvious so 60 pixels to 22 pixels. Now I’m going to come down here I’m going to grab this little clamp function and I’m going to copy it and I am going to paste it in okay so we’re going to open this up, delete that 4.8 rim. There we go. Paste it in. So yeah, it’s a little big. It’s a little big, but I’m going to go ahead and hit save. And all we’re doing here is proving a point. So now look, I inspect, check out this computed font size, computed font size, 60 pixels, right there. Just like I told you, right? 60 pixels.
0:19:06
Now watch that number and watch this text right here. No breakpoints, no breakpoints. Here we go. Look at it scale down. Look at the problems this solves. My gosh, work smarter, not harder. That is a thing of beauty, right? Okay, so we’ve got our clamp functions for our spacing. We’ve got our clamp functions for our padding. What about, I’m sorry, I said spacing twice. I just used two different words.
0:19:36
Clamp functions for our heading. What about for our body text? This is very common as well I’m on a 32 inch monitor my friends, right? I think text should be a little bit bigger for me and you should plan on this So what we’re gonna do is we’re gonna add basic text right here and this is a paragraph text, right? So we’re gonna select a paragraph. Okay, how does this text scale? All right. Now we’re gonna go to theme styles and we’re gonna go to typography. We’re just going to body right here. Here’s our font size set to 20 pixels. Oh gosh, we don’t want 20 pixels.
0:20:08
We could do something like two rim, right? But what I don’t want, I don’t want this to be two rim all the way through. I’d want it to drop to something like maybe 1.6 rim on a mobile device. So 1.6 is going to be my maximum or my minimum and two is going to be my maximum and sure this is a very very you know small range but still I don’t want to deal with breakpoints I just want this to happen automatically so let’s do 1.6 to 2 all right so I’m going to come down here I’m going to grab that clamp function just like that I’m going to come back up and I’m going to paste this in BAM I’m going to go ahead and hit save we’re going to check this out on the front end.
0:20:50
There is my text. Let’s inspect it. My paragraph, and we’re going to see the computed font size at 19.7475. All right. Now, and that’s because we weren’t viewing the full desktop. So there it is at 20 pixels. Now watch that text. You can’t really, you’re not going to see a ton of movement here.
0:21:10
But if you look at our computed value, I mean, it’s getting 100 percent, it’s getting smaller, right? Of course it is. It’s in a clamp function. Now look at where we’re at on This device down here remember 320 pixels was our device minimum so at 320 What do we see it is now 16 pixels? so it’s exactly what I asked for between those different device sizes full width and The smallest device it went from 20 down to 16 again with zero breakpoints. This is intelligent development. This is fluid responsive development. Padding, margins, gaps, headings, text, lots and lots and lots of things can benefit from these clamp functions. Now I do want to talk about fallbacks for a minute. It used to be the case in automatic CSS when I developed it, I had to put two different layers of fallbacks in.
0:22:05
Why? Because modern browsers, some of them supported clamp and some of them did not really support clamp. And so what you can do, I’m going to teach you about this site right here, because not every CSS technique can be used in the real world. In fact, they’re constantly developing new CSS techniques and we have to know when are we allowed to use those and when are we not really supposed to be using those? So I’m gonna go to caniuse.com, and this is a really good resource for looking up how many browsers support a specific technique.
0:22:34
So I’m gonna put in Clamp, okay, just like this. And you’re gonna see CSS math functions, Min, Max, and Clamp. And we are well over 93% usage now, which is very, very, very safe. So it used to be in the 80s, right? When I started developing automatic CSS, it was at like 88 or something like that. And I say anything under 90, be very cautious of. Anything under 80, I don’t even really start using. But if it’s in the 80s, you can use it, but you got to be cautious, put in your fallbacks, things like that. Over 90%, you’re pretty much good to go. But if you do need to add fallbacks, you can always do that, but you have to switch everything to CSS because I have not seen a builder yet at this point that allows you to set a value and then set a fallback value for things, right?
0:23:26
There’s just no input fields for that. So you’re gonna need to be comfortable moving over to a style sheet effectively. You gotta write your own CSS. I will show you really quick how to do that. I will show you one layer of fallback, all right? So let’s open up CodePen right here, and here’s what it would look like. So you have your H1, and you say my heading, right? Perfect, and then we’re gonna come over here and style our H1, and so this is creating a default style for all of your H1 headings.
0:23:57
I’m not targeting a class, I’m not targeting an ID, I’m targeting an actual HTML element. That means every H1 is going to look like this. And what you do is you write your font size, you come over to your clamp calculator, you grab what you want it to be. So I think we were at 2.4 and like 5 or 6 or something like that. So I’m gonna grab this clamp function and I am going to come paste it over here in this code pen.
0:24:23
Bam, there’s your clamp function right there. And then what you do is right above that that clamp function font size directive You write another font size And then this is going to be whatever the minimum was is a good idea to go with so just say 2.4 Rim, and this is setting a fallback, okay? So if the browser does not support this clamp function it will fall back to this instruction Automatically okay, so anytime you declare two things like this, this is basically how you declare fallbacks. This is why a framework like Automatic CSS is like it does all of this for you.
0:25:00
So you don’t have to worry about any of this, you’re just up and running out of the gate, okay? And that’s not all it does, it does way more than that obviously, but it does take care of all of this stuff for you. Let’s move on. We’re gonna talk about two new math functions. Number one is min, number two is max. Okay, so what does min do? And notice there’s a lot of bullets here, right? Many more bullets than when I was talking about clamp. Clamp actually, for as complex as it looks, is actually easier to understand. We can understand minimum, maximum, fluid, between. Okay, we come down here and it’s a little bit more difficult.
0:25:39
So the min selects the minimum calculated value that you give it. Now, it behaves, this is like the confusion part, it behaves as if you are setting a maximum value. So it’s selecting the minimum, which behaves in the real world as if you set a maximum. And I’ll show you how that works in just a second. It does support mixed units, which is absolutely fantastic By the way clamp supports mixed units as well if we look at this Clamp function right here. This is a math function inside of the clamp and you can see it’s adding 2.4 rem to 1 VW Remember that unit right to minus 0.32 rem times a whole number it’s doing like you can put calculations in here and you can use mixed units which is really really really helpful. Okay so let’s go back and let’s look at min. Supports mixed units, supports nested calculations we just saw that, accepts two or three values but most commonly you’re gonna see two values defined. It gets a little bit whoo inception-y when you got three values going on.
0:26:51
Understanding just conceptually like what is it actually, how is this going to behave? And then here’s a statement, cuz a lot of people ask me, well, when would I use this? Well, you use it anytime you find yourself saying this. I need this element to be sized dynamically, but it should never get larger than x value. Then you need a min function. Now, let’s come down to max then we’re going to see how they both work. Max is the opposite of min so it selects the maximum calculated value. It behaves as if you’re setting a minimum value. It supports mixed units just like min. It supports nested calculations as a value just like min. It accepts two or three values but most commonly two values. When do you use it?
0:27:38
When you find yourself saying, I need this element to be sized dynamically, but it should never get smaller than X value. Okay, so let’s take a look. I’ve removed this section’s gutter, and I’ve instructed the inner container to be min 1366 pixels, 100 VW minus 12 rim. And I’m going to walk you through all of this right now. Okay. Before I do that, though, what we have to do is undo one little thing that we’ve done. So I’m going to go to theme styles. Just bear with me for a second, because now that our section padding is fluid responsive, it’s not really going to match up with what I’m showing you here.
0:28:19
So I’m going to set our section padding back to what it was before. We’re going to grab this clamp and just let it sit up there for right now. Okay, so I’m going to put this back to 6rem and 6rem. What is, pop quiz, pop quiz, what is 6 plus 6? I know you got this, you got this. 12. Good, good, good job. Okay, 6rem plus 6rem is 12rem. There is 12rem of total padding. Okay, what I’ve done is I’ve come down here to this min function. I’m gonna select the section I’m gonna go to style and I’m gonna show you that I’ve removed the gutter I have removed six from the left six from the right. I’ve removed 12 rim of total padding There is no gutter in this section Then what I did is I grabbed this container right here the inner container in the section. And look what I’ve done with the width and the max width. I’ve said min 1366, 100 VW minus 12 rem.
0:29:26
Now let me show you how to read this. What does the min do? It selects the minimum calculated value, which basically says you can’t get bigger than one of these numbers right here. Okay? So, on a desktop, it is going to be 1,366, because that is actually the smallest of the two numbers. So 1,366 is the smaller of the two numbers. Let’s look at how this is on desktop. Notice it looks like a normal section. It looks exactly like this one down here, looks exactly like this one here.
0:29:59
It is, I’m gonna give you the calculated size right now let’s get it out of mobile responsive mode here’s our container computed width is 1333 that’s because this stupid thing is in the way now it’s 1366 you can see it right there okay so it is using the 1366 value here but watch what happens remember there is no gutter in this section. Zero, none, whatsoever. Now I’m going to put it in mobile mode and let’s just come down and see. Look at this. It’s in perfect alignment. It is in perfect alignment. How is that possible? Let me prove to you that there is no, look at this, padding right, zero, padding left, zero, no gutter, no padding inside of this container whatsoever. It is the width. So let’s read this. 1366 was the min value on desktop.
0:30:56
But the minute mobile happens, this value becomes the minimum. 100 VW minus 12 rim. So 100 VW, remember from last lesson, is 100% of the viewport. Minus 12 rim, which is six on one side and 6 on the other for a centered element. I have basically created virtualized a virtualized gutter. I’m not using padding to create my gutter. I’m using a dynamic width to this container to set what is effectively the same exact gutter that I was using with my padding. Now some people would be like well why don’t you always do that? Why do you use padding in your sections?
0:31:38
Because one, padding in your sections is way easier to manage. Two, I don’t want to rely on having an inner container, because remember I said I could put content outside of the container, and I still want to gutter in those situations, right? And number three, you see that what I had to do with our padding here, I had to put it back to a fixed value to make this really easy on the mind. When I had this clamp function in here, which I’m going to steal back from my browser bar right here. Now it kind of throws that out the window, okay? So I’m going to hit save and now you’re going to see, okay, this is behaving differently than these sections. Because I want that gutter to be fluid. I don’t want that gutter to be fixed. So, you know, it’s just easier to put the padding in the sections.
0:32:19
Stick with what exactly what I taught you when we talked about gutters and sections and all of that. You don’t need to change any of that. That is the best practice. But I wanted to show you how a min function works. Very dynamic, but it basically says you cannot get bigger than XYZ, okay? Now let’s go down to max. You can see that max works exactly the opposite of min. It is going to choose the maximum value, which behaves as if you are setting a minimum. Like hey, you can’t get smaller than this, but you can go up from there, okay?
0:32:58
Now, I’m not gonna give you a practical example here. There are plenty of practical examples that you’re going to run into. I wanna move on to calc because you’re gonna use calc much, much, much, much, much more often. But I gave you this statement right here. And I gave you this statement right here. So you can always look this back up when you need to, but if you ever run into a situation where you’re thinking to yourself, I need this element to be dynamically sized, but it should never get smaller than X, you need a max function.
0:33:26
If you’re ever thinking to yourself, I need this element to be sized dynamically, but it should never get larger than X, you need a min function, okay? Now you have those in your back pocket, you have those in your tool bag, okay, let’s go. So we’ve got a calc. Calcs can perform basic or advanced math calculations. They support mixed units and I’m going to show you in just a minute a very, very practical example of this. It supports color functions, which we’re going to see in just a second as well. It is insanely helpful when using variables, which according to the context of this course, you don’t even know what a variable is yet, but you’re gonna know next lesson because we cannot just be throwing clamp functions everywhere, trust me.
0:34:08
You’re gonna rush into your builder and like, ooh, can I do it, can I do it, can I do it? That’s fine, but just know, I don’t, you look at one of my sites, there ain’t clamp functions floating everywhere, okay? We have to tokenize our CSS, and that’s what you’re gonna learn in the next lesson. Like I said, this is not, this, I, yeah, I said it’s a 101 course and you were like, hey, I’ll do a 101 course.
0:34:30
You’re going to know a lot more. You’re going to know a lot more than 101, my friend. All right, so insanely helpful when using variables and is critical for creating unbreakable situations. You’re going to see an example of an unbreakable situation in just a minute, okay? Now this sections min height, right? Is set to calc 100 VW minus six rem. That section goes from here down to here. So here’s one very simple practical example of a calc function.
0:34:58
You know when you wanna create a full height section. So let’s look at what I’ve done here. I’m gonna come down to this calc. We’re gonna go to layout. Look at this min height is set to calc 100 VH. What is 100 VH do? Think in your mind, pop quiz. What does it do? V H V H viewport height, a hundred percent of the viewport height, but I don’t want it to be the full 100%. I want people to get a little sneak of the content that is down here, a little peek at it so that they know they can scroll down and see more stuff.
0:35:31
Right? Very practical situation. So I say, Hey, be a hundred VH, But then take away 6-Rim or take away 10-Rim. Take away whatever you want, right? So this is an example of using mixed units. And again, practicality saying, you know, I want something to be, let’s start at 100VH, but then I want to back it off a little bit. Now, could you come in here and say, well, I want to do 96VH.
0:36:00
Yes, of course you could do 96 VH, but you don’t know what that gap, that 4 VH that is taking off is actually going to calculate to. That actually depends on the device that is being viewed on. So on some devices, large devices, that 4 VH is going to be worth a lot more than on a small device. So what we can do that’s actually better to use a calc, because we can say look, start at 100 VH, but then take away a fixed amount of spacing. I know that 6 rem on a desktop is 6 rem on a mobile device, okay? It’s basically taking away 60 pixels of space. So this is an example where you wouldn’t want to use a pure dynamic value like VH, you want to use a dynamic value as a starting point, and then make it, turn it into effectively a fixed value, or you’re taking away a fixed amount of space, okay?
0:37:00
Hopefully, you know, you understood that explanation. All right, so that’s an example of a very, very simple calc. Now, let’s look at how calcs can be used within colors, because it’s like, whoa, calcs and colors? Like, what exactly is going on here? So if you use something called an HSL string or an RGB string, RGB in color stands for red, green, blue. HSL stands for hue, saturation, lightness. These are just ways to define colors but they use values, number values. 145 is the degree on a color wheel, okay? The 60% is H, this is the H, that’s the hue, which is in degrees, you don’t have to write D-E-G, you can, but you don’t have to.
0:37:44
So 145 is the degrees on the color wheel, and then you have 60%, which is the saturation, so it’s 60% saturated, and then you have the lightness, it’s 60% lightness. These two range from zero to 100, zero to 100, and this goes all the way around the wheel. Now I want to I just gave us a scenario where it’s like all right I have a color I want the complementary version of that color. So you could absolutely you know sample this color go you know go to google what’s the complementary color of this it’s going to give you a or or you could just use a math function okay. So watch this we’re gonna calc it and in HSL if you add a hundred and eighty It’s gonna go to the opposite side of the color wheel and it’s gonna give you automatically the complementary color So I’m just showing you there’s a lot of things you can do here. You can create variables to decrease saturation You can create variables to increase lightness of colors. You can do a lot of stuff with math functions inside of color functions.
0:38:50
HSL is a color function. So that’s just another example, practical example. But now what I want to do with calcs is I want to build a hero section with an overlapping CTA. And you’re going to see as we overlap this, wow, this math kind of really, really comes in handy here. So now we’re going to add a section element. Now I’m going to go a little bit slow because we’re starting to put lots of things together that we’re learning throughout this course. So I’ve added my section. My section I already know has fluid responsive padding, so it’s going to look great at every breakpoint by default. Now what I’m going to do is I am going to create a two column grid. I want a heading text and a button on the left, and I want an image on the right. Now I haven’t taught you about grid yet, so you’re just going to have to hang in there while I do this but it’s good to see these things over and over and over again. So we’re gonna go to display grid. I’m going to put a grid template columns of repeat and we’re gonna go to min max 0 1fr. Okay now I’m gonna go to grid template rows. This is gonna be 1fr. My gap is going to be let’s say 4 rem. Now can I use a clamp function in my gap? Absolutely. In fact let’s do that simply because we’re talking about that in this lesson. So I want my gap to be 2.4 to 4. Okay not a huge range but I do want it to tighten up a little bit on mobile devices. So I’m going to grab that. I’m going to come in here. Let’s go ahead and close this we don’t need that anymore close this we don’t need that anymore and let’s replace for rim with a clamp function okay so now my gap is going to get smaller and smaller as my break points go down in size okay so now on this left-hand side we’re gonna go ahead and actually just put two blocks in here this could be divs it doesn’t really matter there’s my one two I effectively have two columns now that I’m working with, right?
0:40:51
And I am going to go heading, if I can type, heading text button. All right, now this is gonna be an H1 heading like I mentioned, and this is gonna be our hero heading. I’m gonna go to website ipsum, I’m gonna grab all of this content right here. This is gonna be my little paragraph of text, perfect. And I’m just gonna cut it off like right there. Now, I need to space this pop quiz, pop quiz, I need to space this content out. What should I use? What should I use?
0:41:24
Should I use margin on all these items? Padding on all these items? Oh, you said gap? Yes, I should use a gap. So I’m gonna come in here and I am going to come down to row gap and I am going to grab that same clamp function that I used on my gap, because I mean, it’s good enough for gap there, it’s good enough for gap here.
0:41:41
Where is it? Right here, copy. This is annoying too, by the way, like constantly, you know, getting these clamp functions, like what if this clamp function never needs to change? We’re gonna fix all of this for you. That gap is actually way too big. So what I’m gonna do is I am going to make a different clamp function, and we’re gonna say that this is going to go from 2 to 3.
0:42:03
Okay, very simple, like 20 pixels to 30 pixels. Alright, so we’re going to go back to our builder and we’re going to put in that clamp function for our row gap. So now, our row gap is going to tighten up a little bit as the devices get smaller. It’s all going to happen automatically. This is absolutely fantastic. And don’t worry, like I said, we’re going to tokenize all of these so you don’t have clamp functions floating around everywhere.
0:42:26
Okay. So I’ve got this here now I need my image on the right hand side. I mean, look how quickly this stuff comes together. Insert. Perfect. Now I need to align all of this content so that it’s centered with this image. Now you guys have not seen flex alignments yet, so just bear with me. I’m going to align that to the center. We’re going to explain all of this in a future lesson, and I’m going to go ahead and hit save. And then the next thing I’m going to do is give this a little bit of a background color. We talked about that in our sections one, right? So let’s just do a light blue like this, and let’s drop that transparency down somewhere in that range right there. And I’m going to go ahead and just view what we’ve got so far.
0:43:09
Man, this hero section is coming along, isn’t it? Okay now let’s view this on mobile before we get any further and let’s see what a problem is with our grid. Oh we got a bit of a problem here with our grid. So what I actually want to do and by the way you can create automatic grids that are just like your automatic fluid responsive heading and just like your automatic fluid responsive section padding and everything can be automatic but you know that’s that’s a lot to chew on right? So what I’m going to do is I’m going to select my grid right here and I’m going to grab this Repeat this grid template columns. I’m going to come down to this breakpoint right here and decide you know what? Actually, I’m going to do it at this breakpoint right here I’m going to decide that that becomes a one instead of a two Okay, and now let’s check out this on our front end now. We’re coming down coming down coming down and boom we get a nice change of layout.
0:44:03
So everything is nice and responsive with our grid, that is fantastic. Okay, now what I want to do is add another section. Why? Because I’m changing topics. And what I’m gonna do is I’m gonna create a call to action strip, little card down here. And I’m going to do this with classes, a class first workflow. Cause even though I haven’t taught you about the strong use of classes yet, we haven’t talked about BIM organization of our classes yet.
0:44:33
Like I said, it’s important to watch this stuff, even if you haven’t been introduced to it, cause you’re going to get introduced to it later. And then your brain’s going to be like, Ooh, I saw him doing that a while back. Now it’s all coming together. Right. Okay. It helps. So what we’re going to do is we’re going to call this a CTA dash card, a CTA card. And what I’m going to do is actually turn this into a grid as well. All right, so what I’m going to do is I’m going to display grid right here.
0:45:00
I’m going to use a min max function and this is going to be zero. Let’s do three FR and then over here this is going to be one FR just like this. All right, one FR for our grid template rows and then our gap is going to be our grid gap. So I’m going to steal that clamp function right there. I’m going to come down here and paste that in there. I’m going to save. You can see what my grid looks like down here. I’m going to drop two blocks in. Perfect. Now this block I’m going to go ahead and put a heading in there. This is going to be an h3 heading. No, let’s do an h2 heading. But I actually want to change the font size of this. So what I’m going to do because I again I want it to be fluid responsive. For those of you who use automatic CSS you’re like now I see why automatic CSS is so freaking handy. So what I want to do is say that this is going to be 20 pixels to 32 pixels something like that. Let’s just see if that looks decent. So I’m going to grab that clamp function right here and I am going to paste it in the typography field.
0:46:06
First I’m going to give this a class. So this is going to be CTA card heading, just like that. I’m going to put this in here. I know this is a lot. You are getting blasted in the face with a fire hose right now. Totally understand. Okay. We’re going to call this CTA card text. And then our text is already the size that we want. It’s already normal text size.
0:46:26
Okay. I do need to make this a paragraph though it’s not a div it is a paragraph just like this is not a div it is a paragraph let’s cross T’s dot I’s all right and then I need a gap here well I’m going to steal my clamp function from right here that was I was using for my gap and I’m going to use that here as well but first I need to give this a class because this is a component that I’m going to be using again and again and again and it’s very important to use classes. So it’s gonna be CTA card double underscore content wrapper. And then I’m gonna come down here and there is my gap there, perfect.
0:46:59
This is gonna be CTA card button or, you know, you could say, yeah, let’s just do button wrapper because that’s exactly what we’re gonna put in here. We’re gonna put a button in here. And then this is gonna be CTA card button, but I’m not even gonna worry about styling this right now. So in that button wrapper, I am going to align that button in the center. Okay. Now I’m going to grab the entire CTA card container. I want to use the background field for this. So that light color right there, but darken it with the lightness. So that is nice. Same color family, right?
0:47:31
I’m just darkening it. This uses HSL. You can see it right there. Hue, saturation, lightness, transparency. Okay now I’m going to come into typography and I’m going to make that text all white just like that and I’m doing that on the class. All right then I’m going to add padding to this card as well. What kind of padding are we going to use? Well I’d like to use clamp actually or let’s dig into let’s just see how we can maybe use M’s for example from our last training. So on the top I’ll do 2M. Let’s see how that looks and then we’ll do 2M on the bottom. See how that looks. Let’s do 1.5 and now let’s just maybe 2M on all sides.
0:48:10
Just keep it nice and simple. There we go. I think that’s fine. Now what we’re going to do is give it a little border radius here. I’m just introducing some new concepts. Look 1M of border radius, right? We’re not using pixels. Let’s just use some Ms here. All right, that is a nice little looking border radius.
0:48:31
Let’s get some dummy content in there and let’s make it a little bit shorter dummy content. There we go. So we’ve got a nice CTA card spanning across there. What I wanna do is overlap the CTA card on this section right here. So I’m gonna grab the section and what I wanna do is, and I know these are concepts you have not been taught yet, and we’re not even, we’re trying to work our way to the math function that I’m going to need, okay?
0:48:56
So I’m going to get rid of our padding top, the start of the section padding, the block start, that’s what it’s called. I’m getting rid of that. So that is becoming zero, and now you can see my card is touching the section above. Let’s view this on the front end so you can see what we’ve got so far. Now what I need to do is I need to move it up a certain amount to where I like it to where I want the overlap to be. And in order to do that I’m going to use negative margin. Like I said, you can use negative margin on containers, divs, blocks, whatever, just don’t use them on sections. I am not selecting this section and doing a negative margin. I’m selecting the card that I created and we’re doing a negative margin on that.
0:49:39
So let’s do minus five rem and see, why am I using rems? Because I want it to be more or less a static value. It is a relative unit, but it’s more or less a static value. Five rem is five rem is five rem. Ms respond to other things, Vw’s, Vh’s, all these things respond much more dynamically than rems do. Okay? So I’m using minus five rim, maybe minus eight rims, something like that. Okay. So let’s look at what our overlap is looking like. Now we created our overlap, but obviously we have a very, very big problem. All of this is now really, really, really cramped. So this is where you find yourself and you’re like, okay, well just change the bottom padding, Kevin on that, on that section.
0:50:23
All right. So what I’m going to do is I’m going to go to layout and I’m going to look at this section padding and Oh gosh, but that section padding is controlled by a clamp. Right. And so what, what do I need to do here? And this is actually where like variables would come in insanely handy. And I really, really, really want to create some variables right now. Like I’m itching to create a variable because that’s how you should be doing this. But I’m like, I haven’t taught him variables yet. I’m teaching them variables in the next lesson.
0:50:49
So this is much more messier and harder because variables don’t exist in the context of this course yet. So what we’re gonna do is we’re just gonna kind of do it the static way. So what I actually need is, if I take the padding that’s here and I add this offset to it, right? The amount of space that this card is taking up in this section, I will get back to even padding in my section.
0:51:14
That’s where I will arrive. The only way to do that is by using a calc function. This is going to actually be a really good example because it’s going to show you how complex calc functions can actually be in CSS and still work. What I’m going to do is go get my section padding. I’m going to go into my global styles. This is my section padding right here. Then what I’m gonna do is I’m gonna come into this section right here. This is my hero section.
0:51:41
Remember what I’m trying to do. I wanna take the normal section padding and add this overlap to it. So what I’m gonna do is calc and open, paste my clamp function. It’s gonna take this entire clamp function, right? And then I’m going to add my offset. What was my offset? I’m gonna grab it right here, minus eight rem. So I’m gonna come back over here.
0:52:07
I’m gonna go to the end of my calc, plus eight rem, and fan-freaking-tastic, look at this. Back to camera. I know, you might feel like there’s three fire hoses hitting you in the face right now. I get it, I get it, but what you have to acknowledge is that what you just learned in this lesson solves some pretty big issues with responsive design in web development. And the value of using these things that you just learned cannot be overstated, cannot.
0:52:45
I use them day in and day out, and it’s going to become second nature to you especially, especially when I introduce you to variables in the next lesson because variables make all of this way easier, way easier because you don’t need to deal with all of these big strings and clamps and all this other stuff. It’s going to make all that go away and it’s like you’re just building websites with keywords, right? It’s like here’s my keyword plus my other keyword and then it’s just, it makes it so much easier. And I want to remind you that if you are in the camp of like, man, this seems, there’s a lot to do, there’s a lot to remember, there’s a lot to learn, by the end of this course, number one, this is all going to be easy.
0:53:27
Number two, you are going to be above 95% of people who are using page builders to build websites, if not more than 95% okay. So remember that is my promise to you and you have to know that I am leading you to the promised land. I had fun in this episode we’re gonna have even more fun in the next episode and we’re gonna continue having more and more and more fun and you are gonna be putting together websites that are way way way way way above your previous standard very very soon. So I will see you in the next lesson. Peace.
