0:00:00
Hey, what’s up everybody? Welcome back to the channel. We’re going to kick things off with an oxygen tutorial. And honestly, this is one of the most important tutorials that I’m ever going to record because it has to do with setting up a solid foundation for any website that you’re going to build in oxygen. Namely, we’re going to be dealing with the Oxygen Global Settings panel, setting things like font sizes, section padding, and so on. And I’m going to show you some magic tricks for making this stuff automatically responsive. No classes, no break points, none of that nonsense. We’re going to do a few simple things and all of your headings, all of your section padding, it’s going to be automatically responsive.
0:00:41
You don’t have to know CSS to do this. You don’t have to be super technical. You just have to follow this tutorial. And let me reiterate, this is of critical importance, especially if you are an agency owner, you’re going to be building a lot of sites in oxygen or you’re a freelancer, you’re going to be building a lot of sites in oxygen as well. You need to be able to set up these oxygen installs super clean, super responsive, obviously, and super efficient. And you’re going to love me after you watch this tutorial honestly because it’s going to save you so much time, so much headache, and it’s going to make everything very clean. If you don’t do this right from the beginning, you’re going to have a very messy install, and you’re going to have to do a lot of extra work.
0:01:23
All right? So let’s go ahead and hop into the computer. Let’s check out global settings in oxygen. All right, guys, let’s go ahead and dive right in. This is a brand new WordPress install, fresh copy of oxygen. Everything is currently at the default. So the first thing that we’re going to do, we’re going to go to oxygen, and we’re going to go to templates. And we’re going to hit add new template. And then I want you to name this primary template. We’re going to do this just so that we can actually go and edit a real page. And then we can add some elements to the page. And you can see how the global settings that we’re going to be dealing with affect some of those elements.
0:01:59
All right? So you can just kind of follow along with me on this part. I’m going to do a separate video on what templates are, and how to assign them, and what you can do with them. But for right now, I’m not going to go through all the explanations, just kind of follow along with what I’m doing. So primary template, we’re going to assign this to pages. And that’s pretty much all you have to do. We’re going to hit publish. And then I’m going to edit this template. So we’re going to open the oxygen builder. And we’ll pretty much do all the setup inside of this. And then we’ll probably go edit a page, add some elements, and see what some of our setup settings allowed us to do. Remember, the settings that I’m going to give you are going to make it a super clean, super efficient foundation for building oxygen sites from.
0:02:46
All right, so we’re going to go and hit add, and just type in inner content, and then click the inner content element. So that’s going to dynamically show whatever we put on a page. And then I’m going to go ahead and hit save. Perfect. Now, while we are here, actually, let’s go ahead and jump out of here. I think it would be easier if we just edited a page now. So I have a home page here. I had it set as the front page in WordPress. I’m going to go ahead and hit edit with oxygen. We’re going to open the, and you’ll see if you didn’t do the previous step, if you didn’t do a primary template, and add an inner content element, and you try to go edit your home page, it would say edit template.
0:03:26
Because the template doesn’t have an inner content element, so you can’t actually add anything to pages. So by doing that inner content element, assigned into pages, we can actually edit the home page now. So here I’m going to add a section, and I’m going to add a heading. And then I’m going to duplicate that a few more times. So this one is the H1. This is going to be an H2. This is going to be an H3. This is going to be an H4, and this is going to be an H5. And then we’ll probably just add some body text. I don’t want to add a link. I want to add text. All right, so we’re going to add text there.
0:04:05
So that’s just plain old body text. So we have a bunch of headings. We have text, and then we have a section. And I’m probably going to add a background color to this section so that you can actually see what’s going on. So let’s just do that light gray. That’s cool. All right, not cool. But you get the point. All right, so we’re going to go to the structure panel now. And I usually, by default, I make this bigger, but I forget. I can’t really move it around while we are screen recording. I’ll probably start recording my whole desktop, honestly.
0:04:37
All right, so there in our structure panel, you can see what we’re dealing with, headings and text level elements. All right, let’s go ahead and start setting up our global settings. So we’re going to go to manage. We’re going to go to settings. And we’re going to be primarily working in this global styles section right here. As you would assume by the label, this controls everything globally. So we have colors. We have fonts. We have headings, body text links, width and breakpoint sections and columns, animate on scroll and scripts.
0:05:06
Let’s, for the sake of simplicity, let’s just go ahead and go in order. So under colors, you’re going to see global colors. You can add a color. The only tip, this is very straightforward. The only tip I’m going to give you here is to not name the color, the name of the color. So like if your primary color, like your action color, all of that is pink. Don’t name this like pink. All right, name it primary. And this is especially true if you’re an agency and you’re working with clients. So your freelancer working with clients. Because what happens is they give you a primary color.
0:05:42
And then they’re like, oh, we changed our mind. It’s actually this new color now. And you have a label that you cannot edit that says pink, but then the color’s not pink anymore. So use very generic labels. So I tend to use primary and we’ll just add that. And then I’ll do, actually that wouldn’t be a good primary color. All right, then I use a base. So a base would be like a 333, something like that. And then let’s go back and edit this primary. And let’s say our action color, our primary color is red. So I’ve primary, I have a base. Then I would do a base like ultra light. And then so this would be the 333, but then like a lighter version of that, like a lighter version.
0:06:27
I didn’t actually need to type in 333 there. Let’s just say this is our base ultra light. All right, cool. And then I might have like a base medium, right? This is like between these. So maybe that’s our base medium. And then I might have a primary hover. OK, so I take that same color there and I throw it in. And then I just come up here and make it like a little brighter. All right, so that’s like the, that’s going to be the hover version of the primary. And then you can have base alternates. You can have accent colors. But you just see the naming scheme that I’m using is very generic. So that if these colors ever change, the use case is actually staying the same.
0:07:08
Like this, this color may change. Like maybe they say I want blue, but it’s still going to be the new primary, right? So the label still works regardless of what the actual color is. That’s how you want to work your naming conventions for your global colors. All right, so that’s pretty much all you have to do. Whatever your global colors are, put them in like that. But use that more generic naming convention would be my advice there. Fonts, this is again, it’s whatever site you’re working on. They’re going to have their own fonts. The only thing here is to just make sure you load the weights that you need, right? That’s a little bit of a button that’s a little hidden.
0:07:45
So whenever you choose your font, click on weights and load the weights that you actually need. That’s all we need to talk about there. Headings. All right, now we’re getting into the meat of what you really, really want to know and need to know to set up a really clean oxygen install with a solid responsive foundation. Yes, I said responsive foundation. Here’s why. This is one of the, you’re looking at this panel right here. This is one of the main criticisms of oxygen. If I come in here and I type in 60 pixels as my H1 font size, and we’ll do like 1.2 as the line height, you’re going to see that, well, all of them changed.
0:08:24
Let’s go ahead and do like 50 here for H2, and we’ll do 40. We’ll just work our way down here, 30. And this is not how you set this up, guys. I’m just showing you the problem with oxygen and something that a lot of people have as a criticism. So there’s all of our headings. And you can see the hierarchy here. You can also see that when I work with breakpoints here, these are not responsive. And there’s no controls over here to make any of this responsive. So what has to happen is people will go in, and they’ll make like an H1 class, and an H2 class, and an H3 class. And then they would assign sizes to the class at certain breakpoints to try to make fonts responsive.
0:09:08
You don’t have to do that. You don’t have to do that. I’m going to show you a nice little trick here. But before we do that, let me go ahead and hit save. We need to, we’re not going to be working with pixels. We’re going to be working with rims, and we’re going to be working with the CSS clamp function. And don’t worry if you don’t know CSS. If you don’t know anything about CSS, you can still follow the tutorial. You can still do the setup. And it’s going to work perfectly for you. So don’t freak out, just because I said clamp. I said a word. You may not have heard before.
0:09:39
Don’t freak out. It’s going to be OK. All right, so we need to, just to explain this real quick, we’re going to go to manage, and we’re going to go to style sheets. And again, if you don’t know anything about CSS, it’s cool. We’re going to write one line of code. And I’ll even give it to you so you can copy and paste it. But I’ll explain what we’re going to be doing with this here. So I’m just going to use a label here called base. All right, this is just categorization. That’s not actual code. All right, so we’re going to type in HTML, and then we’re going to have the open, curly bracket, and we’re going to hit enter.
0:10:12
And we’re going to type font size 62.5% and then we’re going to close it. That is the only line of code that you need to write to get started to have this foundation. All right, now here’s why we’re doing that. The normal font size is 16 pixels. We’re going to tell this to say, we want, and that’s the base font size, the default base font size, all right, for all sites. We’re going to tell this site that we actually want the base font size, HTML base font size, to be 62.5% of 16 pixels, which is about 10 pixels. And the reason we’re doing that is because when we use rim units, we want to just be able to multiply the rim unit by 10 and automatically know what that translates to in pixels.
0:11:03
That’s how it works with rim units, all right? So for example, if my rim unit was 2, and I have this default font size set to 10 pixels, then 2 times 10 equals 20 pixels. I’m dealing with about 20 pixels there. It’s not exact, but it’s very, very, very, it’s close enough for government work, all right? You see what I’m saying? So 3-ram equals what? 30 pixels, 3.5-ram equals, let me just write it out. This is not actual code. I’m just visualizing this for you. 35 pixels, all right? So by resetting this default font size, you can multiply whatever rim unit is, whatever the rim unit is by 10 and automatically know that’s roughly the number of pixels that we’re dealing with here.
0:11:46
Now I’m not going to go into rims versus im’s and all these other units. I’m just showing you how to set this up. So this is nice and clean, all right? So HTML font size is 62.5%. Now we can jump out of, we’ll save that, and we can go ahead and jump out and go back into our global settings, OK? All right, cool. So let me just click here so that big panel goes away. All right, so now what we’re going to do is we are going to delete all this. Because again, I was just showing you what the problem is with using pixels. And even if I used rims there, if I used im’s, none of these are going to work for you.
0:12:22
In fact, because none of them are going to work for you, let’s go ahead and select none on all of these. Because we’re going to put in our own code. And we’re going to put in a clamp function. And this clamp function is actually a clamp function. You don’t even have to write for any of these. All right, so I’m going to give you one of my secret weapons here. We’re going to go to my resources, and we’re going to go to this fluid responsive font size calculator. And I’m going to show you how this calculator works. I’m not going to show you how the underlying function works, because it’s insane. But just follow along, and you will love me after this. So on the unit section, we’re setting that to rim.
0:13:03
I just explained that we’re working with rim units primarily. That’s why we reset our base font size and so on. So the selector here does not matter. You can ignore this box completely. You can ignore this box, the property box. You can ignore that completely. I’m going to go down here to this function, and I’m going to just surface level explain what’s going on here. So the weight clamp works is we have clamp, and then you’ll have a value, a value, and a value. Three values. The first value is the minimum size of that element can be. So you’re setting a minimum size. It will never get smaller than this.
0:13:43
All right, simple. This value, the last value, is the maximum size that an element can be. So you’re basically telling the system, don’t make that thing any bigger than this ever. It should never get bigger than this, regardless of what else is happening. Don’t ever make it bigger than this. This middle value is tough to understand. This middle value is like the optimal size of that element. So you’re telling it like, this is like the optimal size for this. This is the max it should ever be. And then this is the min that should ever be. Now, when I was first learning clamp, I always was obvious like, all right, I know I never wanted to get smaller than this.
0:14:26
And I know I never wanted to get bigger than this. But what the heck do I put here? Like, well, I don’t know what’s optimal. OK, so that problem is solved with this calculator. And the way this calculator works is it takes into account a minimum, because by the way, let me go back here and just explain this real quick for any of you who want to know this. So let’s say the minimum was three rim, the value in the middle, the optimal was like five rim. And then we never wanted to be more than like seven rim, right? Well, you don’t have to do this is like a very simple clamp function. You can actually put a calc function in any of those values.
0:15:03
And so you can, and you don’t, again, you don’t have to know anything about calc functions or any of this stuff. I’m just trying to explain how this works a little bit. And so what we’re doing with this calculator is you’ll see here there is a calc function in the middle. And what the calc function is doing is it’s basically taking a viewport size. OK, so here’s the viewport you see browser width. So you tell it what the minimum viewport size is, and what the maximum viewport size is. And then you’re going to put in values, and it’s going to calculate that optimal size. It’s going to give you a min. It’s going to give you a max.
0:15:39
And it’s going to calculate the optimal size for the font, or really the element. This says responsive font size calculator. You can actually use it for lots of things. All right, again, I told you it’s my secret weapon. So in the setup, we want a couple things. It’s very important here. Let me jump back, and we’re going to jump out of the fonts for a second. We’re going to skip to width and breakpoints. Now, I always change this width right here. I typically change it to like 1280, all right? But whatever you want to put there, just remember this number, all right, 1280. So if we divide that by 10, because that’s our base font, right, we get 128.
0:16:20
That would be 128 rim. All right, so if I go back to this calculator, you’re going to see I set that as my max viewport size, 128 rim. And then I set my minimum at 32 rim, which is about 320 pixels. So somewhere around those like kind of minimum mobile sizes. This stuff doesn’t have to be perfect, by the way. All right, so 32 rim is my min. 128 rim is my max. You need to make sure that clamp is checked. This calculator does a lot of different things. All right, we need to make sure, excuse me, that clamp is checked. You can uncheck all of these boxes down here.
0:16:55
All right, so let’s start doing our fonts now. OK, so I’m going to go over to headings, and we need an H1 font size. All right, so cool. Here’s how this works. I know that my minimum I want that H1 to ever be is 32 pixels or 3.2 rim. I want the maximum to be 4.8 rim or 48 pixels. OK, that’s it. It is done. Now, here’s the thing. I only select the actual clamp function. So start at clamp, come all the way down, and get right before that closing bracket. All right, and then you’re going to, so I copied that.
0:17:34
I’m going to come over, make sure this is set to none, or this won’t work. You should see a little dash there, and pop that in. All right, now you’re seeing all of them change, because these don’t have values down here. So I’m going to go ahead and start to go down the scale here. So the minimum on the H2, we’re going to say is 2.8, and then the maximum it can ever be is 3.8 rim. And I’m going to come down, and I’m going to grab the clamp function. Make sure you don’t grab the cowc function, grab the entire clamp function, and come back over and insert that into H2. Now we’re going down to H3. And guys, you can set these numbers right here.
0:18:13
You can set to whatever you want. It’s really based on your design and all of that. So I’m going to go 2.4 and 3.2. And then you can always change this. You can play around with it after the fact. Go ahead and insert that into my H3. And make sure you have a good visual hierarchy here. Like if the hierarchy looks all messed up, you’ve probably done something wrong. So this is going to go to 2.8. And this is going to be our H4. You don’t have to click any of these. It automatically reduz the calculation. So that’s going to be my H4. And then the next one is going to be my H5.
0:18:50
It’s going to be 2.4. These are all probably too big for H5 and H6 level elements, but whatever. I’m just making stuff up right now. And then we’ll do an H6. An H6 maybe is like 18 pixels. And then let’s do 14 as like it’s minimum. All right, cool. So we’re going to copy that. And we’re going to pop that in. Excellent. Now I’m going to throw some line height in for these. Let’s do 1.3. Whoa, definitely don’t do that. Let’s do 1.3 on all of these just for now.
0:19:26
I would recommend not throwing colors in here, because it’s going to be harder to override those with classes on sections and cards and things like that. So use utility classes, which we’ll talk about in the future, to set your colors on stuff. You could set a font weight on this one. And on these, we can do likes. So let’s say we wanted this to be super fat. And then we want these to be not so much. All right, cool. So none of this is really spectacular right here. But you may want to set these. You may want to not set them. It depends on what you’re going to do. But you can see a really nice, clean, pretty good hierarchy here, right?
0:20:08
Now before we do anything else, let’s go ahead and go to body text, because we’re going to do the same thing. Let’s set this to none. I believe this still works, even though we did the override. So I want 1.4 to be the minimum on mobile. And I want 1.8 to be the maximum. It’s actually the same as what I already had for the H6. And we’ll pop that in here. OK, so I’m going to go ahead and hit save. And again, you can remove this color if you want, unless you have a super consistent base font color throughout the entire site. But here we go. See our hierarchy.
0:20:45
Now, I’m not going to show you the magic yet. I’m not going to show you the magic, because we still have one other thing to do. Yeah, pretty much just one other thing to do. So go to sections and columns. And you’re going to see we’re running the same problems here. This 70 pixels default padding that Oxygen gives you is not responsive, and neither is this side. Now, the side doesn’t matter that much. It’s pretty much going to always, I would recommend. It always just stays the same. But we do want it to be rim units and not pixels. And then this columns padding here is just, this is a nightmare waiting to happen.
0:21:18
If you don’t get rid of this, just trust me on this. Because these are super hard to override with classes. You want basically no padding in your default columns. So set it to none. Don’t set it to zero, because that actually is a value. You want it to just not have a value at all. So get rid of all that and set it to none. And on here, guess what we’re going to do? We’re going back to the fluid-responsive font size calculator. So I want the minimum, on the smallest devices, I want the padding to be 80 pixels top and bottom. So what is that? That’s 8 rim. And then I want on at 1280, full width, I want this to be 120 pixels or 12 rim.
0:22:05
So from 8 to 12, and everything else is the same. So I’m just going to go ahead and copy the clamp function. And I’m going to come over here. We’re going to set this to none, set this to none, and then I’m going to remove, remove, and we’re going to paste the clamp. And so you see I have more padding now, because it was 70 pixels, but now it’s going to be 120 pixels. I like a lot of breathing room in my sections. I’m going to set this to rim, and I’m going to set this to rim. And these are going to be like 3.2, which is like 32 pixels somewhere in there. And that’s going to be my left and right. And I said, those don’t really need to be responsive.
0:22:45
All right? So I’m going to go ahead and hit save. Perfect. So now let’s take a look at the magic. Remember before I said we had headings that were a certain size, and they just stayed that size forever, regardless of the viewport. So now when I go in, and remember what I said the solution was, you’ve got to put a class on all those headings, or you have to write custom CSS for all the breakpoints. And you have to manually set all of those styles at all the breakpoints. But you don’t have to do that anymore. So as I change these viewports, you’re going to see that this all scales down perfectly. It all fits.
0:23:24
The same hierarchy is still there. It’s all perfectly responsive. Now this looks like absolute trash, because there’s headings stacked on top of headings, and there’s no spacing between them or anything like that. But you can see that we have responsive fonts. What do you also notice? This section is responsive. So the padding in our sections has changed. Look how big it is here. Look how much room there is between the first element and the top. And now when I come down here, there’s much less room. There’s about, hey, 80 pixels. And here, there’s about 120 pixels.
0:23:58
So I don’t see anything else. I don’t have to put any classes on anything. This is all set from the jump. From the, I told you this is going to change your life. All right? So now in links, I’m just going to run through the rest. That’s the magic, guys. If you want to jump out of here, I’m just going to run through the rest real quick. So links, you have your text links. You can definitely need to set your default text link colors there. Set your all link color there. The link wrapper, I always leave blank. And then under animate on scroll, I always leave all of that blank.
0:24:32
Under scripts, I do, sorry, my dog’s barking. You probably hear. Smooth scroll to hash links. And then I do like 500 milliseconds on that. That is pretty much all you have to do for our setup. So we have responsive fonts. We have responsive section padding. We have all of our defaults set. That is how to set up oxygen perfectly from the jump to make your life easier. When you go start building this website, you are going to see just how much extra work that takes off of your plate. And how much extra nonsense you typically would have to worry about.
0:25:12
You absolutely don’t have to worry about it anymore. And I would say if you do need sizing on anything set with classes, go back to this fluid responsive font size calculator that I’m going to link to it in the description to show you all of that stuff. Go to it and use it anywhere that you feel you might need it if you want something that’s automatically responsive that you don’t have to constantly set breakpoints for. All right, guys, I hope you found this super valuable. Make sure you click the like. Make sure you click a share. Subscribe, hit the bell, leave a comment. If you have any questions, let me know. I’ll be back very soon with another video. Peace.
