0:00:00
In this lesson, we’re gonna take a deeper look at actually styling the pages that you are building, but in order to do that, we have to talk about color, background color, text color, border color, transparencies, gradients, how to name colors in web design, the tokens that need to be created for proper color management. Not proper color management, but I guess I should say flexible color management, scalable color management.
0:00:26
There’s a lot to talk about. And the message Lee website, unfortunately does not have a lot of color. It doesn’t really give us a lot to talk about when it comes to color. So what I did is I found a new landing page that we can create and mimic. And this one does have a lot of different color going on. We have this vibrant yellow color here. If we scroll down, we can see a dark base background color. We’ve got this purple color that they’re using as well. This little blur back here is almost like a radial gradient kind of thing which blends the purple and the yellow together.
0:01:02
We’ve got these cards that have transparency applied to them. There’s a lot that we can do here with color. And if you know anything about me, I love to make sure that you’re seeing the same concepts over and over and over again so instead of building all this page out ahead of time and then just applying color to it so that we can talk about color we’re gonna do everything we’re gonna do everything from scratch so that you can once again see how flex and grid and all of our spacing techniques and tokens and you know text size tokens everything that we’ve talked about so far throughout this course is going to come together in this particular training.
0:01:46
And we’re gonna do this over and over and over again because the more you see these concepts and the more you’re introduced to them, the more they sink in to your brain and they become second nature. You’re gonna see BIM, you’re gonna see everything that we’ve been talking about come together once again. The only difference is two differences. One, remember I said this is a fresh install. I’m not creating all those tokens again and all those clamp functions. That’s a waste of time. So what I’ve done is I’ve installed automatic CSS simply for the purposes of having our spacing and typography tokens taken care of for us. Everything is taken care of from a typography and spacing standpoint. I’m not going to use anything else from automatic CSS. I’m not using buttons. I’m not using the color palette I’ve turned off everything to do with colors in automatic CSS is turned off I’m not going to use any of the other parts of the libraries I’m just doing it for spacing and for typography so that we don’t have to repeat that work over again Okay, so that’s number one number two is I’m gonna speed up a little bit So I’m still going to talk about everything I’m doing I’m still going to walk you through everything I’m doing, but on the stuff that we’ve already discussed, I’m just going to tell you what I’m doing rather than explain what I’m doing.
0:02:59
So we are going to move faster through this build, and our goal, once again, is to get to the discussion on color as quickly as possible. So the first thing I need to do is figure out how many sections I need. One is for the header, two right here for that video as well, three for this process. This is not gonna be its own section, just an image in there. Four is gonna be for our highlights, five is gonna be for testimonials, and six is going to be for this little footer CTA.
0:03:30
I’m not gonna build the footer. We’re gonna talk about headers and footers in a different lesson. So what I need is six sections. So we’re gonna go one, two, three, four, five, six. This top section is going to be a header. This next one is going to be our hero. This next one is going to be the process. The next one is going to be highlights, which really are features, but they’re calling them highlights. Then it was testimonials. And then there was that footer CTA. Okay. So I’ve got my sections all organized out. My main boxes are on the page.
0:04:05
The next thing that I’m going to do is I am going to add, let’s go back here and we’re going to take care of this little header situation right here. And this notice is actually not one logo file right here. This is just text. And then this is the logo icon. And so what we need is a box to put these two items in. So the first thing I’m going to do here is I’m going to add a div and we’re going to give that div a class of Logo, then I’m going to put a icon in there Which is going to be just an image element and then we’ll do text as well And this text is going to say clocky. I think that’s how you think that’s how you spell it Clocky for Mac and then let’s go ahead and grab their icon. So I’m going to wrap this in a figure tag I’m going to make sure that the caption type is no caption right here.
0:04:49
And then we’re going to see BIM right off the bat. This is going to be logo double underscore icon. This is going to be logo double underscore. Let’s just say text. OK. And then what I need to do for this logo is we need to display that a flex so that it can be in a row. And we need to align the axis to the center. OK. And then what I’m going to do is space it out. So we’re gonna use a little gap here.
0:05:19
For column gap, I’m just gonna say 0.5 M and that’s looking pretty good right there. Okay, so the next thing I’m gonna do is I’m gonna add another div. This is gonna be the grouped content for our links and our header. So this is gonna be header links like that. Really, ideally it would be a real nav and all of that, but like I said, we’re going to do a whole header tutorial, so we’re just going to try to fly through this. I’m going to display this as flex as well, make sure it is displaying as a row. Let’s go ahead and put two text elements in there for our text links. This is going to say support, and the other one is going to say purchase.
0:05:58
Perfect. And what we need to do is we need to label these in our structure panel as well. So this is gonna be links. They’re not gonna be real links because they’re just for demonstration purposes. But I do need to space my links out right now. They’re kind of touching each other, which is absolutely no good. So I’m just gonna use a content gap on here. So our content gap token to space those out should work just fine.
0:06:22
All right, the next thing I’m gonna do is give my header a class here called header and then I’m going to give this a class called header inner and then I’m going to set this as a flex row item as well. So flex and row that’s going to put those two things on the same axis. Then I’m going to align and see how these icons don’t represent the axes properly because the axes have actually flipped. That’s why I kind of dislike page builders a lot of times. A lot of them do this. But now you can see when I align to the cross axis, everything is in perfect alignment. Next thing I’m going to do is add a physical gap between those two containers right there.
0:07:06
So that’s going to be a column gap. And we’re going to use probably like grid. Grid gap would be a suitable kind of contextual token for this area. And then once I’ve given them a physical gap, I can give them a virtual gap of space between, which is going to send them to opposite sides of the container. And just like that, we’ve got our header almost down. The only thing here is this header is a header, not a section.
0:07:35
So what I need to do is change the HTML tag from section to header and you’re going to see that it loses the default section spacing because it’s no longer a section. So what I’m going to do is in the header come in with style and I’m going to go to layout and our padding we’re going to use a space M token on the top and the bottom and that is going to give us exactly what we need for a header type. Well it is it’s a legit header cause I changed the tag on it. Next thing I’m going to do on logo icon is control the size of this icon. We’re going to try something like four rem on the width and the actually we don’t even need height for this. We’ll just do four rem on the width. Maybe, maybe five rem on the width will do. Okay.
0:08:19
That’s going to be our logo text. I think we’re, we’re good. Let’s view this on the front end and just see how we’re doing so far. I need a heading and I need text in my next section which is right here. So I’m gonna go ahead and add a heading and we’re gonna make sure that this is an h1 heading. I am then going to add paragraph text. We will make sure that this has the tag of paragraph. I’m gonna copy this text right here and paste that in. I’m gonna copy this text right here for our heading and I’m going to paste, nope I put that in the wrong spot. I’m gonna paste that in right here. Absolutely perfect. Okay now I can come in and use automatic CSS utility classes to center all this stuff very easily but like I said I’m not gonna I’m not gonna use the rest of automatic CSS for this.
0:09:06
I’m just gonna I’m only using it for typography and spacing for the most part. So I’m gonna come in and at the ID level because this is the hero section, it’s not, heroes aren’t the same on every single website, okay, we’re gonna align all of this stuff to the center, we’re gonna go to typography and center all of our typography, and then what I wanna do is I just wanna control the width of this container a little bit better, in fact, the entire container is a lot narrower than what we’re working with on this website, so I need to go up here to our theme styles and go to container.
0:09:40
And if we look, we can actually measure this very easily on Clocky. And we’ll just inspect this, hover over it. And it’s saying 940 is our website width. So I’m going to change this to 940. And now you see that our text and everything is starting to really, you know, break with the same exact line breaks that were happening on clocky and again this font is not an exact match So it is going to be a little bit different What I definitely need to do inside of this container here is space out this content I’m just going to use a content gap utility class to make that happen Okay, see that this text is still it feels a little bit too wide. I’m just going to go in here with the layout Obviously utility classes would work really good here for this kind of thing, but I’m just gonna say hey make this 30 CH How about?
0:10:28
Nope, 38 CH. In fact, I’ll just make a utility class for our our lead width Basically, so let’s go to 44. That looks that looks pretty good 45 Let’s just do 45 CH. I’m gonna get rid of that, make a utility class called lead width, just like that. And so anything that’s like a basically a lead paragraph more or less is gonna be capped at 45 CH. All right, gonna go ahead and save on that. And there we go. Let’s look at how we’re looking. Hey, I mean, that’s very, very, very, very similar.
0:11:08
I’m noticing one thing that this text is a little bit bigger so I’m gonna come in and text L that and make it a bit bigger. Perfect. And then our lead width, is that still two lines? Yes, it is. Okay. So that, that’s good. Now I need my button, but this is actually a button group. Ooh, and it’s an icon button. So I’m just going to add a div. This is going to be our button group right here. I’m just going to call this div button. Actually, this is our, our button group, so We’ll call it a see yeah, we’ll call it a button group. How about that button group?
0:11:43
Just like that and I need a div in there for our button So I’m going to call this div button and then under that button. I’m going to put some text That’s going to be that little bit of like 14 day trial text right here, so I’m going to paste that in. Here’s our actual button. In our button needs to be an icon and then text for our button label. And what does our button say? Try for free. Try for free. Okay, so here we go with our, we’re just gonna call this button, all right?
0:12:16
We’re just gonna make a button right there. And in fact, I can say button and then, do they all have icons? That’s what I’m asking. That’s my question right now. They don’t all have icons. Okay, so we need to say button Double dash icon. So this is an icon style button, right? I’m Modifying the style of this button I’m gonna put all my global styles on here and then anything that applies to only a button icon Gets put on this class right here. Okay, so our button icon needs to be display flex and it needs to be in a row and it needs to align everything to the cross axis center.
0:12:59
And then it needs a column gap of 0.5 M, kind of just like we did with our logo. And that’s looking really, really, really, really good. Okay. The next thing that I need to do is for our button class, we need to center everything on that. We need to center everything to the center as well. We need to put a background color on here which for right now, because we haven’t talked about color yet, is just going to be black. So background, I just want to be able to see something. We’re going to create a new palette in here called clocky and we’re going to create and then we’re going to go in here and we’re going to make clocky our default color palette. So I’m just going to say that this is black and then of course my text color is going to be white. Alright the next thing I want to do is put padding on my button. So I’m gonna do let’s try 1M. No that’s gonna be way too much. 0.5M all around to start out with. I also want to put a border radius on our buttons. And so I’m just gonna use radius M like medium radius.
0:14:03
So there’s a token for that, radius M. And I’m going to apply that to every side. So now our button has a border radius. And then here’s our button icon, right? So button double underscore icon. And what is our icon? It’s a down icon. So I’m just going to choose an icon. This is going to be down. And let’s do it from font awesome.
0:14:23
Font awesome solid is what it should probably be. That is exactly what we want right there. And maybe that’s 28 pixels now. Let’s just see. Looks to be maybe 26, something in that range. That’s pretty good. All right, the next thing that we need to tackle is the width of this button because it says, set the display flex. It’s taking up the entire width of the button group box that it’s in.
0:14:49
And I actually just want it to be its own width. So what I’m actually going to do here is use a width of something called max content. And now it’s going to be the width of my actual content. I’m going to go ahead and put a hundred percent on our max width there while we’re here. And then I can see my button group, which I need to have a class on like that button group, that needs to have Flexbox centering everything. So I’m gonna say display flex on my button group, set it to column, and then we are going to center on both axes.
0:15:25
And then we’re going to do a row gap of 0.5 M. And there you go. We’ve got our little button group going. So those two containers need to be spaced out. I’m gonna use container gap to space those apart from each other. And guys, we’re getting really, really, really close to having our hero done already. I’m gonna drop a video in here. This video actually needs to be, it looks like, inside of our main container because this video clearly too wide.
0:15:53
So I’m gonna delete that. So I’m gonna select my section, add a container, video inside of that container, and you know what? We need to just grab the link to that video right there. Okay let’s hop back over select the video here’s the video ID I just need to grab that ID off of the end and it’s going to render that video exactly as we see it on the clocky page. Now we’re ready to tackle our next section this is going to be the heading for that section and then we need a grid of three process cards. Okay. All right. Let’s go in here. So we are going to add a heading. It’s going to be an H2 heading my friends. And then we need another container. We’re just going to put the heading in its own container and then put that grid in its own separate container. So for this heading what I’m going to do is I’m going to center this. We’re going to do typography of center as well. That is perfect. And then we’re going to create our little grid. Let’s put a container gap in here.
0:16:52
Perfect. And we need a three column grid. So all we have to do is our grid three class, right? We have some utility classes for grid three. I’m gonna go ahead and put a block in here. That’s gonna be our first card. We’re gonna call this a process card. Not a process car, a process card. There we go. And our process card needs a step and it needs a, uh, it needs text.
0:17:19
Okay. So we’re going to just basically do two text items. Bang, bang. All right. This is going to say number one, and then this is going to be our text item right here. Now you can actually auto count your process cards. I’m not going to go into all of that right now. We’re just trying to whip through this, but it is possible to auto count your cards so that you don’t have to manually write one and two and three and So on and so forth. Okay. All right, so let’s do our BIM class. It’s gonna be process card Number and then this is going to be process card text Double underscore text. Okay, that is absolutely perfect. And then process card I need to flex row this so we can put these things next to each other. I do not want to reverse them. Our column gap needs to be about one M, something like that.
0:18:10
Let’s see, yeah, that looks about right, okay? And then I need to style up this little number right here. This is actually gonna be a span. This is gonna be a paragraph tag. Always make sure you’re crossing your Ts, dotting your Is with your HTML elements, just like I made this a P down here. Ooh, look, that’s still a div. We need to make that a P tag as well. All right, and one thing that I think would actually make it easier to style this up is to add another div, and we’re gonna call this a step wrapper, and we’re gonna put our step inside of our step wrapper.
0:18:44
That way I can style that div independently from this actual label right here. So I’m going to call this step wrapper. All right and for step wrapper what I’m going to do is give that a background color of black. I’m going to give it a text color of white. We haven’t done anything with color yet but we’re going to get there as quickly as we can. I’m just going to use a fixed width on here. We’re going to start with something like 5 rim and a height of 5 rim and then I’m going to use flexbox to align everything to the center of that container. I’m going to go to border and give it a border radius. If you wanna turn a box into a circle, 50% border radius on all sides is the fastest way to do that.
0:19:23
Let’s go ahead and review. Obviously that’s not a circle. Let’s try this. Let’s go in and flex grow zero. Here it is. Flex shrink. I do not want this item to be able to shrink inside of this flex box. I want it to be exactly the width that I’ve told it to be. So I’m going to set that from one to zero and look at that.
0:19:44
It is no longer shrinking either height wise or width wise. It is exactly being the width and the height that I asked it to be. So I’m going to go in and I’m seeing now that it’s actually too much. So I’m going to do four rim and save. And I think that’s going to be, wow, that’s like really, really, really, really close. Okay, so I think we’re good there. This is process card text. I think I’ve done everything for my process cards that I need to do in order to duplicate them.
0:20:12
And now what you’re seeing is in my little grid here, I’m gonna need a gap. So we’re gonna do a grid gap utility class, and that’s gonna get us our perfect grid gap spacing. Okay, next thing that we need to do, put in our heading text. We’re gonna style this up in just a minute. I just wanna get everything in there first. Let’s tackle this image right here, which just needs to be, honestly, guys, in a div.
0:20:37
This is not its own section. So I am just going to add a div to the overall page. So let’s add a div. It’s gonna put it way down here. I’m gonna drag it up so that it’s right underneath the process section. Okay if Bricks will let me drag that’d be fantastic. There’s my div right here. I’m just gonna slap an image in here and we’re gonna see how this works. So let’s select the image. I think it’s this one and we’ll just go with that. So there we are. Oh and look they put a yellow background image in here. I would not recommend that. You can only use this image on a yellow background now.
0:21:17
When we talk about images, we’re gonna do a whole lesson on images. This is the kind of chump nonsense that you are gonna learn not to do. I am noticing though that it is much bigger. So let’s go ahead and put a width on here of, let’s inspect this and just see what they’ve done. So it looks like the width is 1480. Okay, so let’s see what happens when I put a width of 1480 on there. Hey, look at that, we get more or less the exact same thing. So that’s kind of existing in between our sections just in a nice clean div because semantically this is not a new section of content. It’s just kind of, it’s just an image. That’s all it is. But I am going to wrap this image in a figure tag and I am going to go to caption type of no caption. Now let’s look, we need a dark background section but we’re not doing anything with with colors yet. So really what I need is a intro which is a heading and lead text and then I need a grid, another three column grid. So in this container right here I’m gonna do a heading, I’m gonna do text and then I’m going to make this a three column grid and this is also going to have my grid gap utility class I’m gonna slap a card in here and I’m thinking to myself you know what guys we need to maybe BIM this out when in doubt BIM it out obviously we could use these feature grids anywhere on the website okay we’re gonna pretend that there’s could be a hundred pages on this website so this actually needs to be its own thing. We’re going to call it a highlights grid.
0:22:52
So I’m going to get rid of my utility classes, call it a highlights grid. All right. This is the grid of our highlights right here. Display this as a grid, make it a grid three using a token, make it a grid gap using a token. Same exact outcome, but we are now BIMified, which is fantastic. This is going to be called a highlight card, just like that. And then we’re gonna see what’s in our highlight card. Icon, heading, text, okay? So we’re gonna add an icon, we are going to add a heading, and we are going to add text. That’s already in H3, which is fantastic. And then guys, we’re gonna talk about another step of making this even more scalable when we talk about loops.
0:23:33
We’re gonna talk about query loops and all that good stuff. We’re not gonna handle that right now. Okay. We need an icon in there, which is going to be a custom icon, an SVG, lightning bolt, lightning bolt, lightning bolt. There it is. Insert our lightning bolt. Absolutely perfect. Let’s get our content right here. And then what I’m going to do is we’ll finish styling this up and then I’m going to just pause the video so I can get all this content in. You don’t want to watch me copy and paste content all day. So I’m gonna get that content in and then we’re gonna move forward.
0:24:04
But first things first, on our highlight card, I need to give it a little bit of a gap. So we’re gonna do, how about card gap, which I think on my install is frcardgap. And then we need some padding, obviously, on this card. Let’s look, remember our box has some breathing room in it. Looks to be very, very, very little breathing room though. So I’m gonna do space S. So we want small spacing on all sides, which is, that’s, looks to be exactly what we’re working with here.
0:24:37
And then once I give it a background color, we can take care of border radius and all that good stuff. And then we also need this to be BEMified. So we’re gonna say highlight card, highlight card double underscore heading and then this is going to be highlight card double underscore icon perfect and then this text now we can go typography and say text s and we can make it really really really small and we’re gonna go ahead and save because why because it’s really really really small on here as well all right now that I’ve BEMified my entire card, and I’m going to call this HighlightCard. Perfect. I can duplicate. One, two, and what we need is, I believe, nine of them, right?
0:25:23
So that was three, four, five, six, seven, eight, nine. There is all of our cards right there in the grid. Let’s not even worry about content yet. Let’s continue going down, and we’ll finish, we’ll get this area going right here, and then we’ll come up and I’ll insert the content and we’ll be ready to colorify all of this. So I need a group for these little star icons right here, heading and then lead text. All right, so I’m gonna come down to this section, we’re gonna add a div, that’s gonna contain our cards right there, or our stars, all right, so we’ll say stars wrapper, just like that.
0:26:02
And then underneath that is going to be a heading and then it’s going to be text. Perfect. This is going to be an h2 heading. This is going to be a paragraph tag. And then I’m going to go ahead and drop a star in here. This is going to be an icon. And I want it to be probably a font awesome star. Solid star. There is one right there. Perfect. And I’m going to call this stars wrapper double underscore star, just like that. And then that is going to be a 24. Actually, it does let you use variables here. I’m just going to use a variable, a text variable. So we’ll just do text M. There we go. So now we are good to go. All right, let’s duplicate that. One, two, that’s two, three, four, and it’s a five star rating. Absolutely perfect. Just like that. And then I need to space these out a little bit, so I need to flex row them Right our stars wrapper is flex row and let’s give them a column gap of 0.25 in just to give them a little bit of Spacing okay. All right. What do we got here? What people are saying?
0:27:05
What people are saying and let’s row gap it with content gap. Perfect. Looking good. This needs to be widthified. So just I need to come in here and make a quick adjustment to the width of this. We’ll try something like 24 characters. How about 34 characters? Awesome. And then we need to make sure that our typography is all centered. That’s looking really, really, really good. All right, we’re now able to tackle this little grid right here, which this is needing to be a card, right? We’re gonna call this a Twitter card because these are all, looks like Twitter reviews, okay?
0:27:50
So we’re gonna call this a Twitter card. I’m gonna make a new container. That’s gonna house my little grid. I’m gonna put a container gap in to space out those containers. And this is gonna be called our Twitter grid. So Twitter grid and then our Twitter grid is going to have a Twitter card in it. So we’re going to call this Twitter grid. We’re going to call this, wait, did I, Oh, that’s an image. I did not mean to add an image. Let’s add a block. Okay. The block is going to be called Twitter card, and then we’re going to give that the class of Twitter card.
0:28:27
Just like that. Okay, absolutely perfect. Now, in my Twitter card, what do I need? I need an icon, the little birdie, right? Little Twitter icon. So, icon, text, and then text again for the name. All right, so we’re gonna go three elements. We’re gonna do an icon, we’re gonna do text, and then we’re gonna do another text for the name. I’m gonna copy this right here. We’re gonna talk about some more semantic HTML tags We’re gonna grab Dave McNally drop him in right there Perfect. Make sure there’s no extra spacing in there. Let’s get this to actually be a Twitter icon So we’re gonna go icon. No, I need fun awesome brands Twitter right there. Absolutely perfect This is gonna be a Twitter card double underscore icon This is gonna be underscore icon.
0:29:13
This is gonna be Twitter card double underscore quote. This is gonna be Twitter card double underscore name, just like that. And then let’s talk about this. Dave McNally, you are a paragraph tag. This right here guys is a block quote, okay? And notice it’s gonna have a bunch of default nonsense styling that comes along with it that the browser puts in or the builder puts in or whatever and we want to get rid of all of that. So this is going to go back to text S as a variable. Okay so actually no it needs to be M.
0:29:52
What size is it? M, L, I don’t know let’s let’s go with M for now. It’s got let me show you this on the front end guys. So we’re going to scroll down. It’s got a border on the left. My gosh, it’s got padding on the left. Let’s get rid of all of that. Okay, so let’s just go to border and make sure that border is set to none. So the border is gone. Let’s go to layout and make sure our padding is set to none on all sides. We don’t need any padding on that block quote box that we’ve put in. And now we’re pretty good.
0:30:25
On my Twitter card, I need a card gap. So fr card gap, awesome, gives me a gap in my card. Do these cards have any padding? Yes, they do. Okay, so what I’m gonna do is, let’s check our padding up here on our highlight card. We used space S on that. So what I would normally do is have a contextual utility class for my card padding. So I’m gonna do fr card padding, and then I’m gonna apply that to all sides.
0:30:55
Now I have a utility class that I can use on all of my cards, so all of my cards are going to be consistent. You didn’t see me make that class because it’s already available in automatic CSS and frames. Little cheat code right there, but nonetheless, you can make this token if you want to, okay? Card gap, nope, not card gap, card padding. There is a card gap, but I’m not going to use it right here. Okay, so now that one has the proper padding in there.
0:31:23
And I’m wondering if these should be blocks or divs. Let’s just see if I duplicate this, how this is going to play out. I will tell you right now, you cannot use grid for this, because you see how the rows are not actually in grid-like rows? That tells you this is not grid. This is actually, this would be very hard to pull off with Flexbox as well, honestly. This is probably a really good use for CSS columns, which we talked about in one of our early lessons. And so what I’m gonna do is on this Twitter grid, we’re gonna just set the display of this to block.
0:31:57
And that’s gonna allow me to use CSS columns. I’m gonna come down here and under CSS, we’re going to write, I’m going to zoom in for you. We’re going to write a root and we’re going to do column count 2. Now, immediately you see that we are into a column format. Now, unfortunately, I cannot use GAP with CSS columns. So what we’re going to have to do is we’re going to have to select every child element and add a margin bottom to it. So how do we do that, guys? Well, we take the element we’re on, the parent container, and we select all direct children with the universal selector and the direct child selector. Okay? And now what we’re going to say is all of you get a margin bottom of grid gap, my grid gap variable. So it’s like I have a gap, but really it’s being done with margin on every child.
0:32:50
So I’m going to go ahead and save there. Then let’s just take out some content here. Let me zoom back to normal zoom. What happens if we make some of these shorter and some of these longer? Does everything break? How does it work? What we can do here is on Twitter card, go to background and black and just see. Look at our grid guys, look at our grid.
0:33:13
It was so easy. Little CSS columns magic. And we’ve got the exact same effect that they’re using right there. Let’s continue going down. Let’s tackle this little footer card. So we’re going to say footer CTA, just like that. And that needs a heading. It needs a group for our buttons. And then each button needs to be in a group, but we already have a group component for this. We’re going to copy and paste it from above. Okay. So I need a heading going into this card. That’s going to be an H2 in a minute. And then I need a block for my group, which could be a div, doesn’t really matter.
0:33:52
All right, footer CTA. I need to space out, gap out my content. That’s going to have a content gap in there. And then we need a bunch of padding. It looks, well, not a bunch of padding, just a little bit of padding. Our card padding. I guess our card padding would work here. So let’s go to our padding section and do fr card padding. And then we’re going to apply that to all sides just like that. We need to center everything in this box. We need to typography center all of our text as well. What does this heading need to say, we welcome you to be a part of the Cloaky family.
0:34:28
Content, paste that in, make it an H2, this all looks really good. All right, we need a button group in here. Okay, so this is gonna be footer CTA buttons, just like that, buttons. And then I’m gonna grab our button group, which is like its own little thing here. And I’m going to paste it, and I actually don’t think I can paste because I’m not on HTTPS. So I’m gonna duplicate this and I’m just gonna drag it and see if we can drag it all the way down and drop it in that container. We can but I want it to be inside that other container which now it is and then I’m gonna duplicate that and then I’m gonna put those two things side by side with Flexbox, flex row, align everything to the center.
0:35:17
That’s fantastic. I need another object in there, which is this little or right there. So I am going to go my footer CTA. Let’s collapse all this. You guys can see everything. Footer CTA, container, block. This is the inner right here, or this is the buttons wrapper. Okay, there’s our button group and our button group.
0:35:36
I need to stick a text element in there and that text is going to say or and or and I need to put this in here so it’s in between and then my Footer CTA Button divider footer CTA button divider, that’s what we’re gonna call that and It needs to be a perfect square. And this is going to be a little bit tough. Typography, line height, I’m going to set to one. So that line height is not influencing the size of this box. We’re going to try to do this exactly the same way that we did our little numbering up here, but we have two characters instead of one character.
0:36:18
We’re just going to make this kind of interesting. So for rim, for rim, I’m going to go background color of black here and we’re gonna do a typography color of white and then we’re gonna use flexbox again let’s go Pete there’s gonna be a paragraph tag we’re gonna display this as flex remember it’s a box right even though it’s text it’s a box so we’re gonna Center Center everything guys we’re off to a really good start here Center Center okay and then I just need to go into our border radius 50%. We’re gonna have a circle, right? Bam, bam, bam, bam, bam, thank you ma’am. Right there, we probably need to make this text a little bit smaller, little text S action there.
0:37:03
Oh, that text is actually much smaller. Let’s go XS, that’s gonna help there. And then I’m wondering if we want these buttons in a button group to be 100% wide. Button group. Let’s do this. I can do root. Let me zoom in so you guys can see what I’m doing. I’m referencing button group, and I’m saying to, if there’s a button in button group, then I want you to be 100%.
0:37:30
I want that button to be 100% width, just like that. I think that’s gonna be the best way to handle this. What we need to do is add a physical gap between those buttons, a column gap of, let’s try content gap. I think that’s gonna work really, really, really nice. We’re also gonna line everything to the center. But if you notice here, the or is actually between the buttons and not completely centered in this container.
0:37:53
So what I’m gonna do there is I can use maybe margin bottom. Let’s just put 1M on there. Okay. Not 12M. No, no, no, no, no. Not 12M. So 1M, 1.5M, 1.6. I’m just gonna start going up and find the center. More or less. It’s not like the best, best, best, best, best way to do it. There’s probably some fancy math we could have done, but I’m not even gonna worry about it right now. I’m just trying to fly through this. And that is getting us to exactly where we need to be. Okay, and then, oh, we need an icon to be in there as well. All right, so let’s grab our card and let’s drop in and we’ll just make this an image.
0:38:40
It’s gonna be an SVG anyway, so it doesn’t really matter. And then let’s grab, this is gonna be footer, CTA double underscore icon. Let’s go ahead and select the necessary icon, which is this one. And let’s make sure it’s at the top of the card. And then it definitely needs to control its height. It’s yeah, yeah, it needs, we need to control the height here. So we’re gonna go with the eight rem. And let’s do 12 rem maybe. That looks about right. So let’s time pause right here. I’m going to put content in. I will be right back. All right guys, we’re back by the magic of editing. I put all the content in and I just want to review with you real quick. Here is what we’ve got so far.
0:39:25
We need to start styling now and we need to talk about colors. So here we are. We have arrived at the discussion on colors. So I’m going to hop out of here and I’m going to go back and I’m going to open WP code box and I’m going to go into my global CSS right here. And we are going to once again define some tokens at the root level, but this time we’re really only focusing on colors. And the first thing that I want to talk with you about in this lesson is naming your colors. OK, so let’s hop over and look at me. Bring the clocky website back in here. So there are, let’s count the colors. Yellow is one, purple is two. We’ve got this dark base color right here, that’s three.
0:40:14
White is gonna be white, we’re not really counting that as a color. So really we have three colors to choose from. Now, the biggest mistake that most people make is they name the color what it actually is, like yellow. They say, all right, there’s a yellow, there’s purple, blah, blah, blah, blah, blah. And if you think about it, it’s like, just ask yourself the question, do brands change their color scheme from time to time? Is that plausible? Yes, absolutely plausible. So if the yellow changes to something else and everything that is called yellow in your website, you got a big problem on your hands. Now the names are not contextually accurate.
0:40:52
They don’t match the actual visual output. So I use different names and lots of designers use different names. I tend to use things like action. So what is the website’s action color? Well, you can see right here, the website’s action color is purple. But then we’re gonna need a hover, like a variant, right? We’re gonna need a name for this yellow color. Well, I use, aside from action, I, well, let’s actually scroll down here and talk about this dark base color first.
0:41:25
And I just said it, right? I call the darkest color on the website, the base color. And when I create shades, I can actually make light versions of the base color. We’re gonna talk about color management in just a second. So, but I start with a dark base. Like what is the darkest color on the website? You see it right here in this card. This is just another shade of this right here. And so we need a dark base color.
0:41:47
I call that base, all right? So I have base, I have action, then I go into primary and secondary. This yellow is what I would call a primary color. It’s the next most used color on the website. And then it’s like, is there even a secondary at that point? The purple is the action, this dark is the base, and then we have yellow as a primary. Now there could be a secondary, there could be an accent, right, there could be other names.
0:42:18
But in this particular website, we don’t need any more. We need three, action, base, primary, or action, primary, base. We’ll put base last so immediately what I’m going to do is come in and define an action color And I’m just going to put null for a second I’m going to define a primary color as My token and I am going to define a base color as my token now the next mistake What a lot of people would do is they would just go off and get the hex codes for these colors So primary and they would say well primary is equal to this, okay? And then what is my action color equal to?
0:42:54
Well, let’s find this purple. Here’s the purple right here. I think that’s the same color. Let’s go ahead and see if we can sample this. And guys, if you don’t have a sampler thing, you can also just, you know, inspect one of these elements. So I’ll inspect the button and it’s background color right there. And as you can see, Clocky has done it wrong as well. Clocky is using pure hex codes. We’re going to talk about why you don’t want to do this in just a second, but I’m going to put in that purple as my action color. All right? And then I need the base color. So Clocky, give me your base color. I’m going to come down here and inspect the background color of this section. Oh, that’s… I have the image selected. I need the… I need the whole section selected. I thought that’s what I got. Okay. It’s probably this one right here, even though that wasn’t the background color, but it’s the same one.
0:43:39
All right, I’m gonna come into WP CodeBox and base is there. And now watch this. We can actually go up here and I’m gonna create utility classes that map to these colors. So, and you could do that in WP CodeBox right here, like this. In fact, why don’t we just do that? And then you can just use them in the builder.
0:43:59
So we’re gonna say bgprimary going to do guys? It’s going to change the background color to var primary, the token that we just made. Okay, save. Then I’m going to do the same thing for base and then I’m going to do the same thing for action. I’m going to go back now, let’s save, let’s refresh, let’s zoom out and let’s use our utility class a BG primary right here BAM we got a yellow background. I’ve got to use it on this section to BG primary and then I’ve got to use it on this div as well BG Primary, okay save go view this on the front end. Hey Look at that and then our text color thankfully in this section, oh, no, check this out. This is a little dimmer than this right here.
0:44:57
So we’re gonna inspect and see, did they do this with opacity? Did they actually create a different color? And I can see right here, this RGBA string, and this.7 means that it’s that color at 70% opacity Now let’s talk about how to do this and we got to get further into some color aspects of CSS So you can write color like this A hex code let me get a hex code right here So that’s a primary color and let me let me go ahead and comment all of this out Okay, so that we’re not actually putting code in here And I’m going to zoom in real big like so you guys can see this.
0:45:39
So there’s a hex code, right? You guys are probably familiar with hex codes. There’s also RGB strings and they look like this. RGB and then we’ll have a value and then a value and then a value and then you can even have a transparency on the end like that. are HSL strings, which start like this, val, val, val, and same thing. You can have like a.7 on the end. Now, should you use hex? Should you use RGB? Should you use HSL? Personally, for me, I use HSL, and I’m gonna make this very easy to understand.
0:46:21
Hex code is out the door automatically. Why? Because let’s say I want to create a transparent version of that hex code right there. You can’t do any of this. You can’t attach like a 0.7 to it or anything like that. There’s nothing you can do with this hex code. You can’t create a shade from it, right? What are you going to change these numbers to that are going to make any sense to your human brain? So this is useless to us. This is like a dumb… it’s like using pixels. So no, we’re not using hex codes anymore. Now, should we use RGB or should we use HSL? Well, an RGB, let’s get the RGB value of this color right here. So I’m gonna go ahead and if you just Google the color, it’s gonna give you the RGB.
0:47:04
So I’m gonna grab the RGB values. Let’s come down here and let’s drop them in. All right, so there is the RGB of that color right here, which we’re working with our action color guys okay so this is our action color here’s the hex here’s the RGB now I’m going to go over here and get the HSL values and I’m going to drop these in all right and you’re going to see a big difference here so here’s 274 100 percent 57 percent point seven now they look a little bit different let me tell you this, in RGB this value right here is the red value for the red channel. This is the green value, this is the blue value. If you’re not up to speed yet, RGB stands for red, green, blue.
0:47:51
This is the opacity value of the color. With HSL, this is the hue. That you know, think about color, hue, oh, okay, I know what a hue is. This next one is the S, that stands for saturation. And then this is the lightness value, okay? That’s what HSL is, hue, saturation, lightness. Both of these colors will basically output the exact same thing. So I’m gonna prove that to you right now. I’m gonna go grab this RGB string, and we’re gonna replace the hex code for action, which we haven’t used our action color anywhere yet.
0:48:29
So let me actually undo that. Let’s go use our action color. What we’re gonna do is go to our button class right here, and we’re gonna give that a background color of instead of black, var action, and it’s gonna turn purple, look at that. And then we’re gonna save that to our clocky color palette, okay? So I’m gonna go ahead and hit save let’s view that on the front end and now all of our buttons guys All of our buttons turned our action color. Here’s the big kicker. Oh first. Let me let me put the RGB back RGB you’re back. Okay RGB right here. I need to make this color lighter. I need a lighter shade of this color Which one of these values are you going to change?
0:49:14
Oh, by the way, we don’t want 0.7 on our actual color. Let’s go back. Let’s get our real clocky color. There we go. Which one of those numbers are you going to change? Answer, you have no idea. You have zero clue and so do I. I don’t know what color to change either to make this a lighter color. Now, let’s swap in the HSL. We’re going to swap in the HSL. Bam, let’s get rid of the 0.7. Okay, so it’s just a purple color. I want to make that a lighter shade. Watch this. 67. It’s now 10% lighter.
0:49:49
77. It’s going up, right? The higher that number goes, the lighter the color gets. You can see it in the swatch right here. Okay, let me save. Let me go to the front end. Look, we now have a lighter purple color right there. Do I want to make it darker? 47, 37, 27, 24, 24.5. I can dial it in. I can do whatever I want to do with the lightness of that color, right? So what was it at? 57 before? Perfect. And now we’re back to our normal clocky purple. So that is what makes HSL so powerful. Let’s say I want to desaturate it by half. I can go 50%. It’s going to desaturate that color. I can manipulate color on the fly When I use HSL, and I cannot do that. What was that at before 100% I? Cannot do that with RGB so immediately I realized I don’t want to use hex I don’t want to use RGB. I’m going to use HSL so what we’re going to do is we’re going to replace all these colors. Let me get rid of all this now We’re going to replace these colors with HSL strings so all I have to do is Google them if somebody gives you hex codes just Google the hex code and Steal the RG the HSL value From Google so now I have a base a primary and an action H, which is the hue value of my action color, an action S, which is the saturation value of my action color, and an L.
0:51:27
Why do you need this? So that you can manipulate colors on the fly, in the builder, and you can change transparency on the fly, saturation on the fly, you can use calcs, you can do a lot of different stuff. Now the last thing you probably want is an action HSL, which is the full string of action H, action S, and action L. So that’s action H, var action S, and var action L. Oh, it put two vars. Let me go ahead and get rid of that, get rid of that.
0:52:03
Now we should be good to go. Okay, now what we want to do is actually take that variable right there and put it inside of our main action string. And this is a little side lesson for you. We didn’t talk about this in tokens, but guys, tokens can reference other tokens, which makes them even more powerful than you probably thought they already were. And so now we have our action token, which references our action HSL string, our action HSL string, which references each of these partials individually.
0:52:39
And so now if I wanna change my action color, I can put in a new hue, a new saturation, and a new lightness, and that’s gonna change color everywhere. I wanna demonstrate that for you really fast. So let’s say, hey, Bev comes along, all right? So here’s Bev, Bev’s like, you know what? We’re not using purple anymore. We’re going pink. We’re going this pink right here. So the new values are 337, 82, 56.
0:53:04
337, 82, 56. Save, let’s go look at the front end. Our new color, everywhere we were using our buttons, right? Our action color is that new color. And all of our, anywhere we’ve created shades, transparencies, all of this is going to automatically update to reflect the change in these three values right here, which is going to be absolutely fantastic. This is scalable color management. So what I’m going to do is come down and say that this is my action color. I’m going to come down after action and we’re going to say that our primary is going to go in here and then our base is going to go in here and I just realized these three utility classes right here are not referencing their correct color so I’m going to make those changes right there. Okay so I need to take everything that I’ve done right here and I need to drop it down for primary.
0:54:03
And look at this, in WP CodeBox, Command D will auto select, watch this, this is called multi-cursor editing. This is why you wanna use a really good code editor like WP CodeBox. So I’m just gonna write primary, every single one of those just updated. Now, I’m gonna come down here, select D, D, D, D, D, D, and base. And now I have all of those created right there.
0:54:28
We just need to make sure that our color, so this needs to be primary right here. And then I’m going to have to get, because we did some work ahead of ourselves here. This needs to be base HSL. Okay, I need to get the values again. All right, so let’s take care of background color first. Now that we’ve got our colors mostly kind of set up, at least a starting point, let’s go ahead and get our background colors taken care of. So our header up here needs the background color of primary. So I’m going to select that on the class, primary background color. I’m going to scroll down. That’s got primary. That’s got primary. That’s got primary. We already did the base color on this.
0:55:14
So we’re going to do BG base on this. All right, so that’s going to make that dark. And that matches. I believe that’s dark as well. Yep, that’s dark behind our footer. So we’re going to do BG base there. And that’s going to be dark as well. All right, the next thing I want to look at is the background color of these cards. Because I want you to notice a small but very, very important detail. There is a blurred ball kind of thing back here right kind of like a radial gradient honestly and it’s purple and it’s actually a mix between purple and a little bit of the yellow and it is actually showing through these cards which means these cards have transparency and if we inspect here you can see that they are the base color, right?
0:56:02
Here’s the HSL string. They’re the base color, but at 95.3% lightness and then 10% opacity. So you’re gonna see why we created our partials and how easy this is for color management now. So on highlight card, what I’m gonna do is come into the raw and I’m gonna write my own HSL string. And what I’m gonna do is reference my base hue with base H. Then I’m gonna come in and reference my base S, the saturation.
0:56:30
Then I’m gonna put in my own lightness value. So this is my base color at 95% lightness. And then I can do a forward slash and then point one or point two, this is the transparency. Now let’s talk about this for a second. There’s no commas in here and there’s a forward slash. What is going on? So let’s pause for a second. We’re going to go back here.
0:56:52
I just want to show you something. HSL. Remember we did Val, Val, Val,.2? Watch this. Val, Val, Val, no commas, forward slash,.2. These are the exact same thing. Both of these are valid HSL strings. So you might see this version sometimes. They’re exactly the same thing. This is the more modern version. This is the older school version. You might even see this, HSL-A.
0:57:24
In order to get transparency in the old days, you had to say that this is going to include an alpha channel. But modern HSL doesn’t require you to do that. You can literally just write HSL, val, val, val, no commas, forward slash 0.2. That’s the modern way of writing, but both of them give you the exact same conclusion. So what I’ve done is I’ve created a brand new color here with 0.2% opacity, and I actually don’t really want to do this inside of Bricks because again, I can’t label them very well.
0:57:55
I can’t do anything. I’m going to come into our base. There’s base. I want base light trans 20, right? This is a 20% transparency, and I’m gonna paste in that string, and there’s my base light trans 20. That’s how I arrive at these naming conventions. And I’m just gonna build this out for whatever I need. So there’s my, let’s do var.
0:58:19
If I could write today, base light trans 20, I’m gonna go ahead and save that. And now I’ve got exactly what I want. And let’s look at how it looks here. Now it’s going to look a little different because we don’t have this colored blur that’s showing through here, but we are getting pretty much exactly what we want. Now our text color for all of our typography needs to be white. So I’m just going to add a white in here and I’m going to go ahead and hit save. Now all of the text is white. I’m going to make the border radius on these cards rounded. I’m just gonna come in with radius M, put it on all sides, there we go.
0:58:55
So now I’ve got rounded corners on our cards and we’re looking pretty good. I need to grab this heading right here. We’re gonna shrink this typography down. That’s an H3, but I wanna see what my H4 size is. That is more in line with what we are seeing on Clocky. Okay, and we just don’t have a stick of a font. So I’m gonna say that you’re 500, do we have a 600 on this font? Yes, we do, okay.
0:59:20
Let’s do a 600 on that font, and let’s see how we’re looking now. So we come down, hey, looking much, much, much, much, much better. Where’s our heading at? Okay, we’re gonna come up here with our typography. Let’s make all of that white. That’s looking really good. Is it white on clocky? Oh, it’s not. What we need is a text primary class that anytime we need a primary colored heading, we can quickly and easily change that color. So I’m going to come down here and say text primary and anything that gets the text primary class changes to our primary like that. Bam! Just like that. Okay, so I’m going to refresh our builder here.
1:00:06
I’m going to come down. Here’s our highlights. Look at this. Text primary. Pop it in. There it is. It is now the primary color. Oh, what is this? What’s going on here? We’ve got like a light gray thing going on. We need like a base medium color, don’t we? Okay, so what we’re going to do is create a base medium color. So we’re going to come up here with our base and we’re actually going to choose this string right here. And we’re going to say that this is base medium and we’re going to give that an HSL. HSL and then what we want for our medium is a new value for our lightness. So if we look here our base lightness is 6% maybe like 15% would work really well. Remember as the number goes higher it’s going to get lighter. So I’m just going to make a text base medium and let’s see text base medium just like this and I can even see I can create the utility class over here. So I can say text base medium. It doesn’t matter where you create the class as long as it has the correct instruction and the correct value.
1:01:24
So this is going to be our base medium token. And then I’m going to go into our builder. And we can see that that is definitely not light enough. So let’s do 55% on the lightness and see what we get. That is getting closer. That is much better. And that is probably larger text as well. So we’ll do text L on that. Make it larger. Perfect. Perfect. Save. Let’s look at our clocky. Look at that. Oh yeah. We’re looking really good. We’re looking really good. Okay. So we’ve got a nice base medium. So, ooh, look at this. Look at this right here. So we need to figure out what the color of this is going to be. I don’t know if base medium is going to work for this. We’re going to see. So let’s come in here and say var base medium.
1:02:13
It kind of does. So let’s create a base light. I think that’s what we’re going to do. Now if I had all these available to me, this would be a lot easier, wouldn’t it? Let me go 75% and call this base light. Just like that. And now I can come in and we can do base light. There we go. That’s looking a lot better. Let’s go ahead and save that. Save. Perfect. Okay. So I’m just making the colors that I need as I go. What else do I need to do? Let’s come down here. Oh, we need a primary color on our heading. We need this base medium again. Here’s our heading right here. So we’re going to call this text primary and this is gonna be text base medium.
1:02:54
Perfect, save. See these utility classes really coming into play here. Now let’s get our stars. Okay, let me collapse all of this. So we’re under testimonials, container, stars, wrapper, star, and I’ve got a class for star. I can just choose our primary color and now all of our stars are colored primary. Look at that. Looking really, really, really, really good.
1:03:22
Let’s style these cards up right here. So for clocky, ooh, look at this. We need a, sometimes we need a purple transparent background sometimes we need, or what I should call an action colored transparent background, a primary color transparent background. Okay, and I definitely need to make that little tweeter, this little bird right here, a lot smaller. So we’re gonna go in here and say that you’re a 24. That looks pretty good.
1:03:46
And let’s create, we need to create some modifier classes. This is a perfect case for BEM modifier classes. So we have Twitter card, we’re gonna say, you are Twitter card, and then double dash primary. And then we need to be, some need to be action, some need to be primary. So the next one down is Twitter card, Twitter card double dash action, right? And so what is our action gonna be? Well, we need the transparent versions.
1:04:16
We’re gonna try 10% or 20%, we’ll try that first. So let’s go in, we’re going to go backgrounds, backgrounds color, and we’re going to go to raw, and we’re going to go to HSL. I need to reference my action hue. I need to reference my action saturation, and then my action lightness. That gives me my action color, right? Now I need forward slash 0.1. Now remember there’s another thing at play here, which is this blur that’s back here. And that’s showing through. And so we’re not gonna be able to create an exact match on these cards until we get this blur going back there. So we’ve got that in.
1:04:58
I don’t know, I think 10% works really, really, really well. All right, so what I’m gonna do is actually steal that HSL string and I’m gonna come back here. And we’re gonna call this action, action light trans 10. Trans 10 Okay, drop in my age my HSL string and now I have that as an official variable Now in the builder I can just say var Action light trans 10 and it gives me exactly what I want. I can go ahead and add that to my available colors Okay. Now we need to do the effectively the same thing but for primary so I’m going to grab that come down here, primary light trans 10, and then I’m just gonna select those three things at the same time and change them to primary.
1:05:48
And then I can come in here on Twitter card primary, my modifier class, raw var primary light trans 10. Perfect, okay. Okay, and actually it shouldn’t be primary light trans 10. These are wrong. I’m sorry, I made a mistake. They should be primary trans 10 because I didn’t change the lightness of them. I did on this base light one. That’s what got me confused. Okay, so this is just primary trans 10 and action trans 10. This is still base light trans 10 for sure. Alright, those are good. Action trans 10, primary trans 10. So we’re gonna go back here and we’re gonna save our primary trans 10 and then we’re gonna save that to our palette and then we are going to come down here, background color, action trans 10, save that to our palette.
1:06:44
That is perfect. And now what we’re gonna do is make sure the rest get them, right? So Twitter card, double dash primary, and then this one. Now, oh, okay, hold on, hold on, we gotta stop. We gotta stop. This is a chump way of doing this, isn’t it? My friends, doesn’t this not feel chumpy? I’m like, oh, manually go here and out of class, manually go here and out of class.
1:07:08
I’m just alternating. This is an even, odd situation. Even, odd, style the even ones one way style the odd ones another way let’s pause chump break chump break let’s take this out right here BAM remove all these modif we don’t even need these modifier classes we’re gonna do this a better way we’re gonna select the Twitter grid parent wrapper we’re gonna come down here and we are gonna be smart about this root select all children but, in child even, only select the even ones. What are we gonna do with those ones? Well, we’re gonna do a border check first.
1:07:49
Border five pixels solid red just to see, did we get the even ones? Yes, we did, we got the even ones. So now what we’re gonna do is backgrounds color and we’re gonna go var. So our even ones are gonna be, and this is why the tokens are so freaking helpful, primary trans 10 is going to make the even ones our 10% primary trans color. Awesome. And then what I’m going to do is just copy that, paste this, select the odd ones, and make those action trans 10. Guys, hey, wow, look at that. Fantastic, isn’t it? So what else do we need to do these cards? We need to round their corners a little bit So I’m gonna grab my Twitter card. We’re gonna go to border. We’re gonna go to radius radius M Perfect, and we are going to apply that to all sides. This is looking really really really good. Oh We also need to change the text. Well good thing we Selected the even and odd ones and we don’t have to do a chump life situation right now.
1:08:50
So let me go back to my parent. Let me go back down. Here’s even, here’s odd. I also need to change, is it all the color needing to change? No, just of the actual quote, right? Good thing I used BIM. Seems like that makes this very easy, doesn’t it? All right, so what I’m gonna do is I am going to target this again.
1:09:11
So I’m gonna do the root in child even but I’m going to do another step of targeting here and I’m going to say the twitter card quote I believe it was called twitter card double underscore quote yep see it’s getting the background color but I don’t want to change the background color of it just want to change the color of it and I just want to change the color to primary okay Okay, now it’s primary. Now what I can do is select that, come down here and say, hey, odd, this is gonna be action. Guys, look at this. Absolutely fantastic.
1:09:52
What else are we missing? We just need the name to be our medium text color, whatever color that was that we chose a minute ago. So, baselight, yep, that was it. Base light. Refresh. Look at that. And oh, this font has gotten out of whack because of the block quote. So we’re going to go to CSS. And what we’re going to do is tell this to inherit the website’s font. So we’re going to go here, font family, inherit. And now it’s going to correctly grab Work Sans. We need to also drop the line height on that just a little bit.
1:10:24
So our line height needs to go to 1.4, 1.3, somewhere around there. That’s looking good. We don’t need to be all zoomed in. All right, so for the footer, scroll down. We need, first of all, we need BG base down here. We never even got there. Let’s do BG base. What is the background color of this card? It is primary. So my footer CTA background is primary and we’re right like very very close to where we need to be. It needs to have a border radius so we’re gonna go radius M all of our all of our stuff has the same exact radius on it. I need to unlink these sides and just take away the top padding and then I need to move this icon up and the way that I’m gonna do that is with negative margin. So oh and you know what I’m going to do?
1:11:14
I want it to be half of the amount of the icon. So what is the icon height? We’re going to do a little math right here. You guys have seen some of this before. I’m going to take the width off of this icon because I need to know its height in order to calculate properly. So its height is going to be 8 rim and width of 8 rim. Is it a perfect square? It is. Okay.
1:11:37
All right. So 12 and 12. So what I need to do is go half of its height, but I’m actually going to do this on the parent. Okay, so root icon height 12 rim. I’m going to go into here, right? Notice I made this on a class. I’m making a variable. You’ve only seen me make variables at the root level of the document. I am now making a variable inside of a class called footer CTA and it is going to set the height of that icon right there. So now I’m going to go to this icon and for its height I’m going to say var icon height. Look at that it doesn’t change right it retains the the same exact height but what this affords me now is I can go up to margin and I can say go negative the icon height. Watch what happens. Okay. So I’m going to do a calc var icon height times negative one. And that’s going to give me a negative number. Right.
1:12:38
Which, do I want it to be the full icon height? No, I don’t. I want it to be half of the icon height. So we’re going to put parentheses around icon height and divide that by two perfect centering right there. And if the icon height ever needs to change, I will never have to update the centering ever again. Okay. So I’m going to prove this to you right now. I’m going to go to the parent. I’m going to go to icon height. So let’s go to our little variable. Watch this. Let’s do two rim. Okay. Which the width, I need to make one adjustment. Okay. We’re going to go back to the icon right here. The width and the height need to always be equal, right?
1:13:16
So I’m gonna take that variable, pop it in there. Look at that, automatically centered. It doesn’t matter what this icon size ever needs to be in the future. I’m gonna go down again. Let’s just play around with it. Five rim, look at that, perfectly centered. Six rim, perfectly centered. Seven rim, eight rim, nine rim, doesn’t matter how big it gets, it’s always perfectly positioned in my box.
1:13:38
Look at that, my friends. I love their font is obviously way better than our font. That’s why you pay $350 for a font family. So they’re looking a little bit sexier right now because they have a little bit sexier font. All right, the next thing I want to do is I want to handle this button because obviously this is a much different color from the other button that we’ve been using across the site. So what I want to do is make this my base color, but I need to make it an outline button as well.
1:14:06
So what I’m going to do is come in and give a new class here of button base outline like this. And for the background color, I actually want this to be transparent. You can write the word transparent. That’s why we’re talking about colors today, right? So now, you know, you can write the word transparent and it’s going to create a transparent colored background. That’s how, remember button had a background on it. And sometimes we were like, how do I override that with no background? Cause no background is no instruction whatsoever. Well, there is a specific transparent value that you can put in.
1:14:40
And then what we’re going to do is because it’s an outline, but we’re going to add a border and it’s going to be one pixel solid on all sides and actually probably two pixels solid on all sides. Alright, so for the border color, what I actually need to do is make a base trans 20. OK, so we’re going to take base light trans 20. We’re just going to make base trans 20 and this is going to be var base L. And then just leaving the 20% opacity right there. So we have base trans 20 and let’s see if this gets us.
1:15:13
Let’s save that in there. Let’s see if that gets us the color that we’re looking for. There you go, and it does, perfect, okay? So if we look at clocky, we look at this, obviously our buttons are bolder, so I’m gonna take care of that right now. Let’s just grab our main button class, typography font-weight 600. That’s gonna bold those buttons. And now we are looking pretty good.
1:15:39
Let’s look at what we’ve got over here. We need to do this Blurred little blob back there, and I want to see I want to see how they did it. Okay, so let’s inspect and Oh No, hold on I have a sound for that they’ve used a transparent PNG that is purple circle. Oh no no no no no look it’s 554 kilobytes of a file size just to get that purple circle in the background. Oh my gosh. Guys we can do this with pure CSS. What we’re going to create, I haven’t taught you about pseudo elements yet, but we’re going to go ahead and I think we’re going to make a pseudo element here.
1:16:35
We are going to do a lesson on pseudo elements. So right now it’s just a watch, it’s just a watch, don’t even worry about taking notes, just watch, just watch, that’s all you have to do. But I’m going to say BG blur, and I’m going to go root before and content is going to be blank. Okay. And then I want to position this absolute and I want to go Z index of five cause I just want to see it on the page. I want to make sure I see it. I want its background color to be red. I want its width to be a 50 pixels and its height to be 50 pixels. These are just numbers to get stuff on the screen. See my red block right there?
1:17:22
Perfect. I can also change all these to logical properties. So this is going to be inline size. This is going to be block size. We got to do a logical properties thing as well at some point. All right, so I want the border radius to be 50%. Remember I said it’s very important to know how to write CSS is just to get boxes and circles and shapes on a screen, right? Because there’s so much you can do with them. You’re going to see the magic unfold here, right? So instead of a background color of red, I want it to be action trans 10. You can still see it back there a little bit. I actually need trans 20 probably, which I don’t have. So I’m gonna come over here, action trans 10. We’re gonna create a new one called action trans 20.
1:18:14
Save, and now you’re gonna immediately see the big purple circle. Actually, it’d be much bigger than that. Let’s do, yeah, yeah, it needs to be something like that. Or almost like 800. Okay, that’s starting to look much better. If you look at this, you see where I’m going with this, right? I’m treating this almost like it’s Photoshop. So 800 pixels.
1:18:35
This is really, really, really good. The Z index of five is what’s putting on top of everything. So I actually want it to be a Z index of minus one, which you’re not gonna see it anymore. And the reason you’re not going to see it is because on my parent, it’s actually going behind the background color of this section. So there’s another special technique that I can do called isolation of isolate. And now it is going to be back there and you are going to see it through the card because these cards are transparent, remember. But if you look at the text, the text is clearly on top now. Okay.
1:19:16
So I know this is all very advanced. Okay. We haven’t talked about any of this yet. Just hold on to your seats, right? Hold on to your hats. As they say in terrible old Western films, I think. All right. So now what are we going to do? Where’s the magic going to come in, Kevin? Where is the magic right here?
1:19:29
Right here. Filter blur. Oh, do I need a 500 kilobyte PNG transparent PNG file that I can never ever change the color of? No, no, I want something I can, I can add on the fly that I can add with a simple class. Watch this. Anytime I need that background, that background blur effect, I just pop on that class and I get it. It’s so amazing. Okay.
1:20:01
Refresh. Here we go. Look at that. Okay, let’s see if it’s, no, this one is clearly like much, much, much, much, much bigger. We also need to give this positioning coordinates. So I’m gonna say top and I’m gonna say left of, let me zoom back in for you guys, left of 50%. This also needs to be, we haven’t talked about relative and absolute positioning yet, so that’s why you’re you’re not trying to follow along really and take notes you’re just watching okay so this is gonna be position relative and then on the left 50% I need to also transform translate this on the x-axis sorry on the x-axis minus 50% that’s gonna put it right back in the center and now on the top I actually want to move this up.
1:20:52
Let’s say 20%. There you go. And it’s gonna make it look like it’s in the next section above, even though it really isn’t, because that’s what’s happening right here. It’s in this area as well. And I still think it needs to get way, way, way, way, way bigger. So let’s go 1,200 and 1,200 and save. And then let’s refresh here and let’s see what we’ve got going on. Yes, sir Yes, sir And now look how these have brightened up now because they’re they’re using the color of that blur that is back there This is absolutely fantastic Okay, and you could actually create this so you can change the color on the fly with locally scoped variables But like I said, I don’t want to go too crazy All right guys. I think we’re I think we’ve done a really, really, really good job with that.
1:21:41
All right, that’s going to be the end of this tutorial. We’ve done a lot with colors, a lot with colors. Let’s go back to WP CodeBox. Look at all this stuff we’ve done. With tokenization of different colors, we’re talking about transparencies, you’ve learned about color partials. You know more about color management and color naming and color tokenization than 95% of people using page builders. It’s gonna take a little bit of practice to get used to this stuff, but once you unlock the power of doing it this way, you are never going to want to do color management any other way on any other website ever again.
1:22:18
And I do wanna remind you, because it is my job to remind you, and it is my job to try to help you save time and make your life easier and not have to do all this manual work yourself. Automatic CSS does all this for you. All these tokens, all these partials, everything, every transparency you could need, every shade you could need already pre-configured for you. And then you can go edit it from a dashboard.
1:22:39
I mean, I’ll just go show you real quick. So like palette, turn on action color, here’s all your shades. You can adjust the values of all of your shades. You can adjust your color right here on the fly. All of your transparencies are automatically generated on the back end, so all your tokens already exist. Light shades, dark shades, transparencies from 10% to 90%, it’s all done for you, right? So it saves a ton of time. But this is not a sales pitch. But guys, this was your color tutorial. This has been really, really fun. I hope you got a lot out of this. And if you have any questions, drop them down below and let me know. All right, peace.
