0:00:00
What’s up everybody welcome back to the channel really excited about today’s video It’s been a long time coming. I’ve actually taught on this topic in a bunch of different videos and bits and pieces But it is definitely a topic that requires its own video that deserves its own video and this is one of these trainings that is going to be Considered in my book like mandatory if you want to level up your development and design capabilities If you want to be more valuable to your clients if you want to break that that line You know there is a line between good developers and great developers good developers Don’t do a lot of the things that I’m going to show you how to do in this training Great developers do it because great developers care a lot about scalability and maintainability and what we’re going to talk about in this training is Utility classes styling everything with utility classes versus styling everything with custom classes Of course there is talk in here about styling at the ID level and other mistakes that beginner developers make I even see intermediate developers make a lot of these mistakes, but if you’ve been in web design for any length of time You have heard the concept of CSS frameworks utility frameworks and the concept of utility classes and whenever somebody is Introduced to utility frameworks and utility classes and in another case utility variables What they always ask and that’s another reason I’m recording this video because I am the creator of automatic CSS Which right now as we speak is the number one CSS framework for WordPress page builders And I have a lot of people constantly asking me Kevin ACSS automatic CSS is so powerful Why don’t I just why should I just build everything with utility classes in automatic CSS?
0:02:00
Why why is that bad and it is bad and it is something that I don’t recommend automatic CSS is not a utility first framework So what we have to talk about in this training is how do you decide when to use utility classes and when to use Custom classes and if you use custom classes or when you use custom classes, I should say How do you still hook into the framework that you happen to be using? How do you not abandon that framework like for example? How do we make sure that the spacing is still consistent the typography is still consistent in the case of ACSS? We have access to fluid responsive spacing fluid responsive typography a full color system How do we not abandon all of that when we create our own custom classes and style things using the bricks builder or the oxygen builder or whatever builder You may be using hopefully that builder supports classes And if you don’t use a framework. I know I’m talking a lot here to set this up But like I said, it is an involved topic. It is a very important topic Even if you don’t use a framework right now This is a mandatory training for you to watch so that you understand again scalability and maintainability when building websites There is a huge difference between just building a site and building a site that is scalable and maintainable and again That is the line between good developers and great developers So if you want to level up watch every minute of this video now There is going to be a bunch of other golden nuggets sprinkled throughout this training I’m going to go ahead and take my time. I’m not going to worry about the timer I know this is YouTube. This is free But I’m still going to give you the best that I can possibly give you I’m not going to I’m not going to shorten this. I’m not going to You know add in any fluff we are going to get to the goods, okay?
0:03:51
If you like this I want you to hit like right now Hit subscribe and then be ready to drop comments questions anything else that you need as we go through this video Let’s go ahead and dive right in so I’m going to screen share here That was a four-minute intro because like I said this is insanely important probably One of the most important videos that will be on this channel So it we’re we’re going to spend the time, okay? We can we can invest the time if you’re serious about this stuff. We can invest the time all right, so here is the Sample website that I pulled up I was like looking for like what can we mimic here to use? To to bring some of these lessons to the forefront so that I can really teach I wanted something simple something that wasn’t too involved Because I don’t want to worry about all the design aesthetics and all of that I just want to focus on the core principles, okay? So you see we have a basic hero section here We have a two column layout with an image and text and a little list and another element down here We’ve got pretty nice service cards in this area. We’ve got a about our agency overlapping card effect going on here We’ve got a talking points section with some stats We have our about section with our headshot cards. We have a footer call to action section Honestly, I don’t know if we’re going to build this entire page I don’t think it’s necessary to build this entire page in order to teach what I want to teach and get the point across We’ll see as we go how deep we actually need to get into this and how far we need to go But we’re we’re going to start here. We’re going to start with what is the actual premise and what are we trying to accomplish?
0:05:37
Again, when we build a website we’re trying to build a website that is maintainable and scalable It is very possible that you can create elements just fine using utility classes Styling at the ID level. We can take this service card as an example and If you build this card using utility classes, there’s going to be a fundamental problem So you absolutely can build the card with utility classes But there’s going to be a fundamental problem and the fundamental problem is it’s very difficult to edit that card in the future See this padding right here if that padding needs to change we need to have more padding or less padding and this is built with utility classes You’re going to have to go from card to card to card Removing the padding utility class and adding in a different padding utility class If you style this at the ID level same thing You’re going to have to go from card to card to card to change the padding value on all of those cards If you style this with a custom class and I’m also going to show you in this video how to bring BIM BEM block element modifier methodology into your custom classes When you’re using a framework by the way I’m going to show you all of that But if you use custom classes you can change the styling of this one card and the styling of all other cards will update Everywhere else now there are other builders that say hey, you don’t need classes We can create presets and things like this. It’s the same thing if you’re creating presets You’re creating classes. Okay, there’s no difference between a preset and a class For the most part so there are these other builders out there who are like classless builders Of course the builder itself is creating classes behind the scenes you just don’t see them You’re creating presets which is effectively just classes and the thing about it is workflow So they’ll claim that this is easier somehow But what often you’ll find is you’re having to create these presets in a different area and then you save them And then you go to this other area in order to use them and that is a workflow disaster Classes are fundamental to CSS and web design and web development So when you’re adding classes to an element you can style the class right there You don’t have to go anywhere else to style it especially if you’re using a page builder So you can style it right there and then move on with your life You don’t have to go to a separate section create an element make it a global element make it a preset do all this other stuff And then come back to where you were working and add it in you don’t have to do any of that So classes and this is why I Released which I’ll link to below another video called 20 capabilities or 20 features your page builder must have to be considered a professional page builder and Classes is one of them and classes need to be front and center all right So what I think is the best way instead of me rambling on and on is just let’s start building Let’s start building and I’m gonna walk you through the decision-making process of how we decide What can be done with utility classes and what can be done with custom classes?
0:08:48
And I think you understand by now you should not be building an entire site with utility classes That is not the purpose of a framework like automatic CSS. It is not something that I recommend that is a big misconception It is not a utility first framework. Okay, it is a Fundamental framework for consistency for scalability and maintainability Mainly using variables which you’re gonna see and then Utility classes in certain cases, okay, so let’s just go ahead and start building I’m going to open up we’re gonna close that I want to get rid of some of these tabs, okay? Let’s just let’s have two tabs. Let’s have our sample site and let’s have the page that we’re actually working on All right, so I’m going to first add this hero section here and what you’re gonna find is there is a lot of gray area So I want you to watch until the very end don’t miss any of the context don’t miss any of the gray area talk Absorb this entire training because again, it is fundamental. So I need a text element I need a heading and I need a button. So in this container right here I am going to add a text element a heading and a button Next I am going to add the background image here. I am just gonna go ahead and steal these direct URLs So I’m gonna go ahead. I’m not gonna actually upload these to the website. Let’s go ahead and steal this one and in this case This this sample site was built using element or which is not a professional page builder and You’re gonna see a lot of mistakes along with a lot of divception involved in this they use a background image for this I prefer to use real images whenever possible not background images So what I am going to do and thankfully bricks makes this very easy is I’m going to add an image to this first section Just a real full image and then I’m going to pop in that external URL and there is our image right there Now here’s another mistake made because probably they’re using element or I don’t know But they’ve uploaded a darkened image you you really never want to do that because you’re locked in to using that exact Look and feel of that image if you upload just a normal image and then you’re able to use CSS to style it to darken it to do whatever you want to do That is the preferable method right but I’m gonna work with what I’ve been given here Which is a darkened image so that it is it is what it is But I am going to put a class on this section. I am going to put a class on this image for other purposes Because this is a hero section a hero section you should think of as like a globalized element This hero is going to be used on many different pages I don’t know I haven’t looked at the other pages. I mean we can take a look at them real quick and see okay So there’s two types of heroes which is very common for a site like this So you have your little your little hero strip and then you have your Like main home page hero right so what I can do is do like a hero and a hero Large all right, there’s a bunch of different ways to do this But what we need right now is just to put a class of hero on this section right here and then this is gonna be the hero image So I’m gonna do hero double underscore image This is where we bring BIM methodology in for keeping all of our custom classes organized and you see right off the bat We’re starting not with utility classes, but with custom classes and why am I doing that once again?
0:12:16
Because a hero is a globalized element that is used on other pages of the website and if I have five pages using a hero I want to be able to control the spacing in that hero. I want to control the overlay Right, I can’t do it in this case because they gave me an image that already has an overlay baked in But normally you would want to control the overlay style Involved in that hero section you would want to be able to control the heading in that hero the lead text everything right So we need to classify I just big that word up as we go we need to classify this we need to add classes for the hero So I have my hero I have my hero double underscore image so the hero is the block B right BEM methodology Hero is the block images the element E and then we can have modifiers if we need them But modifiers are not required so hero image. I’m gonna put that class on there next. I’m going to do And then here here’s where we get this gets a little interesting and it gets into almost like sub global components here, okay I’m gonna skip over this right here. I’m gonna click on my heading This is gonna be a hero double underscore heading and then we also need or we actually don’t have any lead text here So we have this accent heading a real heading and then a button so the button buttons are another globalized like a sub component right It’s not actually a component of the hero. It’s it’s a component that looks the same everywhere that it’s used So we already have a utility class an automatic CSS for all of our buttons So I’m gonna do button primary and it’s gonna transform it into the look and feel of this button Which we actually need to do a little bit more styling on to to make it exactly match But we’ll get to that in just a second But you see that because this is a sub global component a button It’s not really like related to the hero. It looks like all the other buttons on the website It can just get a utility class because that is a it’s perfectly fine just that way I don’t need to do anything else with it now this heading needs to be an h1 and What I’m gonna do is the new future of architecture and here’s another mistake that they’ve made watch this I’m gonna paste this in I told you a lot of little golden nuggets do not ever do this if you need a heading to be all Caps you do not write it in all caps all right the new Future not feature of our Kitech sure there you go write it like that because now you’re free with hero heading to Style it and I can go to the typography and I can choose to capitalize all of the words to uppercase all of the words To lowercase all of the words you see all these work right now watch this I’m going to grab this I’m going to inject it into the content and then I’m gonna come over here I’m gonna say all right lowercase still still works fine. I actually want to capitalize though. Oh, no Oh, no, I cannot capitalize it. It’s forced to be uppercase because it was input as uppercase CSS can transform it to lowercase, but cannot transform it to capitalization So you have created and if you’ve used uppercase text on all these different pages You’ve screwed the pooch my friends you are you you are up a creek with zero paddles all right you are in Chumpville as we say so we don’t want to do that so we are going to go the I can select it properly the new Future of architecture and I Apparently I’m getting lagged now because I decide to do this one too many times the new future of architecture Let me save and refresh I don’t Something has bugged out in the bricks. Okay, there we go So now I’m okay to go style and I can go to typography and I can go to uppercase now in this case If you look at all the headings they’re all uppercase So it would actually be smarter instead of controlling the uppercase style there for me to go into theme styles Typeography and go to all headings and then do uppercase and now all my headings are uppercase by default whether they have a class or no class It doesn’t matter, right? Okay The next thing is this container right here. So I’m going to do hero double underscore content I’m going to sign that class to this remember it’s the content section of a hero So it’s hero double underscore content and then what this allows me to do is it allows me to control the gap between my content between this Like accent heading this heading and this button now We’re going to pause here and this we’re going to introduce a brand new utility class concept something that I actually have not talked about before But it’s very important. It’s something that I baked into my brand new product frames Which is hands down the best wire framing and pre-design tool for bricks and coming to other page builders as well You can get it at get frames.io It’s a contextual utility class. That’s what I’m calling them contextual utility classes So you see most utility classes lack context if I were to put a margin top of Let’s say M on that heading I would get margin top on that heading But I don’t know where the margin top M class has been used everywhere else on the website and I can never Edit the value of margin top M the reason being well unless I want every instance of margin top M Which could be used on an icon could be used on an image could be used on a heading could be used on text somewhere could be it could be used in a gazillion Number of places very dangerous to edit the value of margin top M So I’m basically these these generic utility classes are locked right now in automatic CSS You can always adjust them globally, but for most intents and purposes you can’t adjust them like you would adjust a custom class For example now there’s a tweener class called a contextual utility class check this out We’re going to create one and it’s going to be called Content gap. So I’m going to do content gap and what this is and I’ve already actually done this on this training site before You see that it has a row gap of our space S which is a automatic CSS spacing variable So even though I created a custom class and I’ll just remove this for a second So now you see there’s we’re back to where we started. I could put anything I want here I could put 10 RAM here. I could put 1M. I could put 20 pixels I of course I would not recommend using pixels. We’ve gone over this many many many times But I’m going to use because I like to stay hooked into the utility system that way all of my spacing Whether it’s a utility class or a custom class or a contextual utility class. They’re all Perfectly consistent. So what I do is I put var space S and that is the content gap the gap between my content So I’m going to use content gap everywhere I possibly can and then I have granularized control Over the gap in my content and I can actually create a class of content gap or What’s actually better? I’m going to back up for a second because we’re still technically doing this wrong Because I’m using a utility class where I have a custom class We don’t want to get those two things mixed up So what I need is actually a variable called content gap So I’m going to quickly show you how to make a new variable So we’re going to hop over to oh, I don’t want to do that. Let me go back in that tab and then let’s go out in this tab We’re going to hop over to WP code box. You can do this anywhere. I’m going to delete all this stuff So we can start from a clean slate. Okay, so the way that you define a variable is by defining it at the root level So you do colon root and I’m going to zoom in for you here and then you do a double dash to define the variable We’re going to define a variable called content gap and then we are going to make this equal to var space S So anywhere I use the variable content gap. It’s like I’m inserting var space S Okay, so now I can go ahead and hit save and that should be available to me here I’m going to Unzoom in zoom out. I guess it’s called and then I’m going to go to row gap and I’m going to do var Content gap and now you see I have my content gap and now I’m doing this at the ID level of course So that’s no good. We’re going to get rid of that and let’s figure out where our I don’t know we lost our class So I’m going to do hero double underscore content and then on hero double underscore content I’m going to do var content gap. So now I have global control over my hero spacing of my content I have global control over my hero in general which means if I need to make the top and bottom padding Bigger or smaller or whatever I now have an image in here that’s globally controlled and this is very important because I’m about I’m about to position this image So what I’m going to do here is click on my hero class style layout make sure this is position relative Because this image right here. I’m going to do style Position absolute and then I’m going to align it top zero Right zero bottom zero left zero and then I’m also just to make sure it perfectly attaches itself To this section I’m going to do a width of 100% and a height of 100% and then I’m going to do an object fit of cover And now it’s going to behave exactly like a background image except I have an alt tag I’ve the ability to use source set. I have a lot of advantages over that being a background image now You do see that we have run into a problem where our image is covering up our content No problem whatsoever. I’m going to go ahead and go to style the index and minus one and now that’s putting that image behind my content I know we’re doing a lot of things right now But where this is this is what you get when you watch someone build a real site who is focused on scalability, maintainability and best practices and by the way if you want more of this type of stuff I have plenty of real Full website build that I do for clients inside of my inner circle. There’s a link below Go join the inner circle aside from full website builds and dev and best practices and all that stuff We’re covering accessibility. We’re covering SEO, PPC, sales, agency growth, getting leads Everything you can imagine for the work that you do is inside the inner circle. All right, so join below just a little a quick plug on that Okay, next thing I need to do is I need to assign classes to all of these elements inside of my block And this is another best practice rule if you’re going to go through the trouble to create a custom class for a block You need to assign classes to every element inside of that block and again use the BIM methodology So what I’m going to do here on this text here this is going to be actually an accent heading So what I want you to see is this is a little accent heading right I’m guessing that in every Big hero like this there’s going to be one of these which means we have to globalize it, okay?
0:23:51
Which means it gets its own custom class Look, here’s another accent heading, but this is a different style of accent heading and that one is used here and it’s used here And it’s used here so you can see the core principle in action and you’re going to hear me say this over and over and over again Practice your principles. Don’t skip out. Don’t cut corners Practice your principles every single minute of every single build if you don’t do this stuff When you need to add to the site when you need to make wholesale changes when you need to edit things You are going to be in a nightmare Scenario and you do not want that to happen and you don’t want to have to face your client and be like Oh, that’s really hard to do because the way we style things You know we kind of got to go with it. You’re gonna have to have this whole conversation like a chump All right with your client because you didn’t follow best practices. You didn’t do things the right way. All right, so let’s get back into it Um, here we are. We are going back and we are assigning our classes. That’s what we’re gonna do All right, so this is a hero heading. We did that We did our button what we didn’t do is this thing right here and the reason we skipped this is this is one of those things It’s like a it’s kind of a subcomponent but not so much and that’s why I was showing you the difference between this accent heading and this accent heading We’re okay to attach this accent heading style to our hero by using BIM So I can come in here and say hero Accent heading just like that because the only time I’m using this accent heading style is in a hero section like this If you notice everywhere else, it’s a different accent heading style So I am good to go with this accent style being attached to my hero and that’s one of the gray areas like Because you’re gonna see when we get to this one we do things a little bit differently, all right?
0:25:40
Okay, so we’ve got all of this good to go now on my hero content I can go ahead and go to typography color and we can choose white for that So that’s gonna make all of that stuff white why is my heading not uppercase? I feel like I must have refreshed without actually saving or something so all headings uppercase Okay, it’s not doing that. Let’s Let’s going on all right hero heading typo. Oh, because this is still stuck on lowercase. Okay Yeah, I believe I refreshed and it saved some of the stuff I didn’t want it to save okay What does that button need to say that needs to say just learn more man? What a boring ask all to action never learn more is one of the worst calls to action you could possibly put So another thing to take note of their little another another golden nugget now because I put a class on this hero heading I can come to style I can go to layout and there’s a few different ways I can do this now I could pick for a width I could pick a random number I could be like 30 CH Which is clearly not enough 20 CH how about 14 CH which by the way is a character unit I can go 12 and that gets me Actually perfect right so that’s 12 CH just a random number or Or if you don’t want to do that if you want to kind of keep things more consistent and not have just random magic numbers for things You can do something like var with L that is a with Utility variable that’s part of automatic CSS you can also do with M Oh look with M actually gets us perfect and because this is attached to a custom class It’s going to be like that for every hero heading that I create so that’s good to go now Let’s tackle the we promise to build all right, so we’re going to do Content I’m going to put this here so that’s out of the way all right So this is going to say we promise to build and then I’m going to style my accent heading What are we going to do here now? This isn’t a real heading number one. It should be a paragraph tag Number two is I need to come down and probably if I had to guess change the font to match this Yeah, I believe so let’s inspect because this isn’t actually a heading It’s not inheriting my heading font Barlow semi condensed so definitely need to do that so Again on your custom class you’re going to go to Barlow condensed There you go all right, and then we are going to uppercase that and then I believe it also has like a 600 font weight It looked like and then it has this underlying effect now. That’s not actually a real underlying That is a pseudo element most likely so what we’re going to do is we are going to Go to layout and I’m going to change this display to well We may not need to do that. Let’s check on that in a second We’re just going to come up here and create an after All right, so on your accent heading I’m creating a pseudo class after For our content it’s going to be just empty quotes basically and then we are going to do a width of 100% We’re going to do a height of two pixels is the only time cases like this where you can use pixels All right, so height of two pixels. We need to give it a background color of Let’s see our primary color I believe it’s that gold, okay?
0:29:03
And do we have anything showing up? No, we don’t have anything showing up yet. Let’s go to layout Display flex Okay, and this is going to cause problems and this is a bug and bricks where you Yeah, you can choose flex, but you can’t choose column or row or anything else and actually Yeah, it’s now it’s lost. It’s not selecting my pseudo element anymore. So I’m going to go back to the after Okay display flex Now you see it and actually okay, thankfully. I don’t need to do any other styling to it I don’t think it looks to be perfect and actually I’ve chosen the wrong color and everything I was just guessing Actually like mine better, but we’re gonna have to go to typography and we’ll choose shade like medium or Yeah light. Yeah shade light and then on our after We’re also going to choose Light as our background color so shade and then we’re gonna choose light and by the way all of these when you’re using automatic CSS are preloaded for you into the builder so you don’t have to worry about managing any of that It’s all ready to go for you. So now we have let’s see if our font size matches. It’s pretty good. It’s pretty good I like it for consistency purposes. I like it Okay, you’ve seen now we’ve built one section We have global control over all of this because it’s a hero now We’re gonna do something fundamentally different in the next section because that’s how these website builds go And that’s how following best practices works in this context So I’m gonna add my next section down below and it we’re gonna work on this section where it’s two columns And then we have this stuff going on over here and what you’re gonna find is that we can use utility classes for some things here But not for everything all right, so let’s go ahead and walk through it I can use utility classes for this two column grid because I’m not gonna use I may use this exact kind of layout in On another page However, it’s such a basic layout and I want to be able to change things around This isn’t it’s not a globalized component type of situation. All right. It’s more flexible than that So what I’m gonna do is I’m gonna go in you’re you’re much safer not You’re safe enough. I should say you’re safe enough using utility classes here And again the benefit of utility classes is consistency of course We have the utility variables too so that when we use custom classes we can hook into that consistency But you also have speed right utility classes do make things a lot faster So now what I can do is say grid two to make a two column grid grid L1 to make one column at the L Breakpoint I can do a gap of L to make a L gap between the two columns and then I can do a stretch class to make the columns equal height And now you can see just like that. I’ve whipped up a responsive two column grid Now what I can do is I can put in two blocks the bang bang. There’s my two blocks and I can put an image inside of this block and I don’t need any classes on this image or anything else I’m gonna go ahead and steal the URL for it We’ll just open that in a new tab and steal it and then come back and Let’s close that inspector. Okay now I am going to go to content put in the external URL So there’s my image right? I don’t need to worry about custom classes for any of this. I can come over here this gap actually I do need Well one we want to put the figure tag on this but I do want to go with like a hundred percent width and Then we’re good there. Okay, it wasn’t taking up the full container. So I want to take up the full container All right, so I’m gonna go ahead and hit save there to save our work Next thing that we’re gonna do is we’re gonna put these things in so I need effectively a text a heading text text and Then a div well, we’ll handle this in just a second. So text heading text text. Let’s start with that So I am going to go to text and then I’m gonna go to heading and then I’m gonna go to text white Okay, there they are and let’s just let’s just deal with that for right now. So this is gonna be an H2 and I don’t need a custom class on this. It’s just an H2 heading. That’s all it is, right?
0:33:25
So I am free to just grab the content. Oh, I can’t copy the content because it’s uppercase so most experienced builders architects and designers All right, wow. What a mouthful the most experienced architects and designers something like that Okay, perfect next I am going to go with Welcome to our agency. So this is welcome to our agency and then we are going to we actually can grab this text down here And we will put it on dude. I’m the king of clicking on the wrong tab, okay? So I know it’s gonna start to bother you trust me it bothers the shit out of me But for some reason my brain has to do it. It has to click on the wrong tab to get to the right tab. So here we are Couple things Let’s take a look at what we’ve got going on We know that this is a globalized subcomponent this accent heading so we cannot style this with utility classes ladies and gentlemen We have to use a custom class for this. This is it. Okay. Good to go. This looks kind of like that styled and There’s a very good chance that I may use that kind of styling on this type of thing somewhere else So even though I’m not creating a full global component out of this whole thing I am creating little sub components all right, so this is going to be called an accent heading This is just a normal little paragraph. So that’s fine and let’s go ahead and make sure that we are semantically accurate while we do this so I’m putting a p tag on this I’m putting a p tag on this we don’t want just Dives floating around. Okay. These are paragraphs. So let’s make them paragraphs, right?
0:35:07
Okay, so welcome to our agency is going to get a class of accent heading So I’m going to put that in and then this is going to get another class of Accent I’m just call this an accent lead because a lot of times what I do is I call these lead paragraphs and And this would be an accent lead right it’s like the lead before the lead Or it could be like an accent subheading almost like I don’t know what is the context of it like we’re building everything you always need in Architecture. I mean well first of all they don’t even speak proper English But we’re building everything you always need in architect. It’s kind of like a subheading. It’s kind of like a subheading So this would be like a heading isn’t that accent heading this is like a subheading. Let’s call it a subheading So I’m going to I’m going to call this and this is the greatest thing about bricks just edit the class just edit the name It’s going to keep all the styling and all its references, right? So we’ll call this Accent subheading just like that. So we’ve an accent heading and we’ve an accent subheading. I think that makes perfect sense now What did we do up here? I created my bar content gap. So what what should I do here guys? I should just use my utility class of Content gap Bam now I’ve got equal spacing there and here, right? I’m putting a gap between my content. It’s contextual Utility classes, all right now the next thing I need to do is style my little accent subheading here So what we need is just to make it a talic and and the primary color all right?
0:36:43
So I’m going to style I’m going to go to typography. I’m going to go to a talic and then I’m going to go to color Global and choose my primary color There we go now do I need to change the font weight on it? It looks like it’s a little thicker a little thicker You know what I’m saying? So let’s go to 600 how about 500? What’s the difference between five and four there’s a difference all right? So we’re gonna go with 500 Okay, so now we’ve got a Semi-global component here. We’re gonna style our accent heading now Okay, now could I be moving faster if I was just purely using utility classes or Siling at the ID level even absolutely I will be the first to admit that I will be the first to tell you It’s not a race Okay, look me right in the face. It’s not a race and you’re gonna see people. Oh Side-by-side comparison who’s the fastest developer? Which is the fastest page builder how fast can I build a page in this one versus that one? None of that shit matters none of that shit matters because you know what?
0:37:54
Pro developers don’t grade on speed They grade on doing shit the right way they grade on scalability They grade on maintainability they grade on best practices. I could fly through this thing I could fly through this thing doing everything wrong not scalable not maintainable It would look pixel perfect, but it would be a nightmare to maintain in a nightmare to build upon off into the future You don’t want to be that guy. You don’t want to be a chump, okay? So we’re taking extra time to do it the right way and then here’s the thing It actually as you continue through a website build and again you go in the inner circle you watch my full website builds You’re gonna see that it takes a lot of time in the beginning to get started But once the ball’s rolling and you’ve got all these globalized components already pre-configured It just it goes so fast and then You’re not like a chump going copy based copy based copy based no none of that stuff It’s just done it’s done the right way and it just works and it’s not a nightmare scenario It’s a joy to work on the website when it’s been built properly, okay? All right. Let’s get off the let’s get off the high horse Let’s keep going with this so I’m styling my accent heading. What does it need to look like all uppercase smaller text medium gray and a top bar, okay?
0:39:18
So let’s go over here. We’re gonna go font size Hooking in to automatic CSS bar text s. I want to hook into my small text size right there I want to uppercase this. I want to bold it, okay? I want to maybe a 600 on that I want to assign it a different color varsade Medium, okay? Just like that. I want to add a before element to it of Content blank with is gonna be 100% height is gonna be two pixels and then we are going to Color it where’s my background background of Global primary, okay? And then I also need to probably display this as flex and I believe you see it right there. Yes, you do but I did make a mistake on my before I do not want it to be a hundred percent I want it to be more like a 25% so we’re gonna do 25% there Let’s take a look. Let’s go the front-end refresh. Okay. There’s our little accent heading and And you see there’s a bigger space between Their bar and text and our bar and text so I’m gonna go to my before I’m gonna go to margin bottom and here’s an example guys Where you don’t always have to hook into automatic CSS or whatever framework you’re using if your framework even allows you to hook into it Some of those frameworks are jumps right and so they don’t give you the variables, but ACSS Okay, we’re gonna keep moving so what we do is we add a little margin bottom You can go point five and on this you don’t have to use a variable. You don’t have to get fancy You can go off road, right? You can go your own path. You could do whatever you want to All right, go all Bob Ross on this shit. Just you know add little things here there But I want to I want to get you to try being creative on canvas just To take your time and and sit down have nothing in mind when you start Just have good feeling and be happy and and in love with life and your world and and set down and begin playing And if you feel good about yourself and the world it’ll show in your painting and all these little things will happen And there is a little bit of a Text let’s see we’ll go here and then I don’t I don’t want to make this perfect because it’s not like you know That’s not the goal here Let’s do like point 0 to 5m and just space that text out just a little bit. Okay, next thing we want to add We’ve got to tackle this list guys. It’s another Little sub globalized component because a checklist can be used anywhere not just in this section We may very well want this checklist other places and you know what?
0:42:06
Checklists are a bit of a pain in the ass So if you’re gonna build one you better build it right see you don’t have to Fonegal it the wrong way the rest of your freaking life So what we’re gonna do here is I’m gonna show you how to properly build a list from scratch in bricks So again more golden nuggets for you. I’m gonna go ahead and hit plus we’re gonna add a div and Then I’m going to add I’m gonna make this div we’re gonna give it a class first of checklist Okay, because it’s a checklist got it all right So we’re adding a class of checklist, but we’re gonna switch the HTML tag not to address don’t do that To you out okay, this is an unordered list and then what we’re gonna do is we’re gonna add a div inside of that and That div right there is gonna be a checklist double underscore list item Okay, so it’s a list item attached to our checklist block block Element and then modify if you need one okay all right, so there we go with our list item I’m gonna make this a checklist over here. I’m not even gonna fix that. I’m gonna make this a list item Okay, perfect and then what I’m gonna do is add an icon and I’m gonna add text as well. Okay, my icon is guess what a checklist say it with me icon and then on our text guess what that is checklist double underscore say it with me Oh, oh dear. All right. I hit the wrong I hit a short code for switching tabs checklist text all right perfect now What I’m able to do is I can grab my checklist and make sure I’m on my class and then we’re gonna go to Layout padding left zero because any not 4,000 bricks. I want zero Okay, checklist always add default padding and builders like this So we want to get rid of that we want to make sure that this is a display of flex and we want to make sure that it is a row Okay Why hang on one second?
0:44:08
Why is that not oh? Okay, never mind. Sorry my brain ignore everything. I just said this does not matter So let’s we want to do that on our list item have a little brain fart there Okay, so on our list item We’re gonna make sure our class is selected this gets changed to flex and then we are on row and then we want to align Items to the center and then we want to grab our Content so this is just warm if some nonsense, but we’ll just throw that in Put that in there awesome this icon. We need to change to an actual check mark Okay, so we’re gonna grow our font awesome solid here and then on my size There’s another area where you can you know, you’re fine to do pixels, but I’ll also give you a little quick tip Automatic CSS make it the exact same size as your text. Oh just like that. They’re both equal I don’t even need to know what the values are. I just need to know that they’re both medium size, okay? All right, so next thing we’re gonna do is in our list item We are going to add a column gap again. We’re not gonna use a variable here 0.5m Just good enough right now. I think it styled a little bit more so our check marks are Primary color and then I the text is just normal text, okay?
0:45:30
So we’re gonna say that this checklist color is Primary and let me just show you something. Let’s say we didn’t even realize that was supposed to be primary I take my list item and I duplicate it and I build out my entire list, right? And then I come over to my checklist and I say you know what we need to space those out So we’re gonna go var space s something like that and then this needs to be a flex item for those to work of column Okay, so now space those out they actually need to be XS All right, so something like that and then I’m like oh no, I forgot these need to be gold Well, if you style these at the ID level you’d be going one by one Switching all those to gold right or to primary color But all I have to do is make sure my class is selected and then I can go to global and I can go to primary No copy paste copy paste like some people will want you to do will ask you to do and I just say no not doing that I’m doing the right way. All right, so I’m gonna hit save Awesome, so I’ve got my little list now. Guess what? I can use this checklist Anywhere I want on the website. It’s always gonna look like that any change I make to it’s gonna show up everywhere It’s gonna be absolutely perfect. So you see the power in setting this stuff up right from the beginning And by the way guys this is taking even longer than it would because I’m sitting here talking you through it Right if I was to zip in through this it really wouldn’t be all that much extra work Especially as you practice your principles you get really good at it, okay? All right, so Where is my design? All right, here we go. So now I need this little thing right here You know what to me that seems like another little sub global component I would not want to use utility classes for this I want to make a new little component out of it and we’re gonna call it a signature card a signature card Okay, so what I’m gonna do here is I’m gonna add a div and I’m gonna call this Signature card and then I’m gonna look at it and what it is is a flex row with an image on the left and then it’s gonna have Another div over here to stack this content on top of itself, okay?
0:47:40
So I’m gonna add an image a div inside the div is gonna be is this an image or is this like a new font that they loaded? Okay, that’s just a font so text text so image text text all right you ready for this? We’re gonna go over here into our builder the king of clicking the wrong tabs image boom and then I’m also gonna do a div and Then inside of that div we are going Text text so two texts awesome and you see it looks like we just have a a bunch of nonsense going on here, right? Let me get this ecam live window out of the way all right, so I’m gonna select my Div so this is my signature card and we’re gonna go display flex Horizontal so now I can do my image thing. Let’s go ahead and grab this steal this URL thank you, okay and Inserted here nope not like that inserted with external URL perfect figure object fit cover and that oh no we’re already doing things wrong We don’t want to hit object fit cover yet. We want to give this a class So we are and this is why typically I recommend you know not going one element of time do all of your classes Then do all of your styling right so this is signature card double underscore I would say headshot because it provides it more context for what’s going on here and then this is gonna be signature card double underscore signature This is gonna be double underscore signature card double underscore what even is it?
0:49:19
Oh title, okay, it’s like the person’s role. They’re title in the company all right, so her title is co-founder Okay, and now because I’m creating a globalized component like this I can use it anywhere on the site. I can use it in a query loop. I can use it in dynamic data on a blog post I can use this anywhere right. It’s very very powerful So Christine Eve is her name, so we’re gonna do a Christine Eve Perfect and then on this class. We’re gonna do object fit cover. We’re gonna do no caption We don’t need to do all text right now normally you would do that. I’m not gonna worry about that kind of stuff Style we’re gonna do a width of oh Man, let’s do 12 rim How big oh, it’s much smaller than that six rim Something like that. Okay, and now what we want to do is on our signature card We want to apply a column gap of like 1m just to space those out maybe even like 0.75m and then what we’d like to do also there is center everything horizontally and then on her name This is where we need to figure out what font they used so I’m gonna go to computed font family is St. Delafield never heard of it. Don’t even know if it’s a Google font. Don’t even know if we can load it Let’s go to typography font del Feel oh, it’s right there. Oh, yep, there it is look at that my friends. Okay, var text L On our font size. Why is it not?
0:51:02
Why is it not changing? Vart I just do like 80 pixels. Oh, that works. What’s going on with our var? Var text L. No, it did change it. Okay, XL just not getting big enough font line height 1 and Then on the line height here of signature card title. I also want one I don’t want a lot of line height messin with stuff. I believe this is gonna have to go much bolder Oh, there’s only one font weight So I cannot really do that bolded effect that they did there So whatever we’re good. We’re good enough. I think you get the point right so co-founder. We’re gonna do uppercase This is on the title so uppercase font size var text S I’m hooking into the small text size and automatic CSS. I’m gonna do a shade medium on that. Yes Absolutely, I’m gonna do a little bit more on our font weight 500 and I just lost the color again. I don’t know what is going on with that today in bricks save Refresh look at where we’re at. Okay, and I’ve got this globalized. I’ve got this globalized checklist I can use everywhere. I’ve got this card. I can use everywhere. Let’s go back and go to border radius here and I can just do a radius of 50% on all sides and that’s gonna make it a circle. Oh but Because it’s a figure I’ve run into this problem before When you make it a fit you’ve got to do some extra work if you want to make it a figure and make it rounded So I’m just going to we’re just gonna do it like this without the figure for right now because I’m not about the extra work in this video Next thing I want to do is I want to align this all down and guess what this is not a full globalized component I can go back to using utility classes so I can do align items Actually, I’ll just do an easier one center left right center left will get me to the left with centered horizontally All right, so we’re gonna save and Look at that. Let’s go view this on the front end. There is our section So we’ve got a nice globalized hero. We’ve got a nice intro about section with partially globalized content, but a lot of other stuff was done using utility classes We are perfectly responsive everything’s looking good. Okay, set that right there doesn’t look so great We’re gonna have to come back and check on why that’s why that width is getting a little out of control I’m guessing it’s a max width issue. We can easily fix that all right, so let’s just keep going I think we’re doing well. Let me check on our time here Where is my recording time? Okay, we’re in an hour. I said I wasn’t gonna worry too much about it We’re gonna keep moving. I think at some point you’re all gonna realize what’s going on here, right?
0:53:51
Wind use the utility classes wind use custom classes how to integrate the variables and you understand the point of why we’re doing all this I’m gonna do let’s do one more section at minimum because there is something important about this section very important about this grid Very important about two different things going on in here. You’re not gonna want to miss this So do not click out thinking hey, I’ve got it all figured out. Okay, we’re gonna do some stuff You haven’t seen yet. All right, very important stuff. So what I’m gonna do is I’m gonna add a new section and then I am going to Make a a new globalized component because look at this see this intro. I call these intros It is also used here. It is also used I bet on gazillions of other pages across this website as this website gets bigger and bigger So do I want global control over this kind of intro section? Absolutely this must be a globalized component. So what I’m gonna do is king and clicking into the wrong tab I’m gonna call this section Intro and if you have multiple types of section intros you can do section intro alpha section intro and you can even do it with modifiers stacked There’s a lot of different ones you can do. Okay, I’m just gonna do section intro with the only one we see so far and And Aside from this which is kind of like didn’t even need one So our services of text heading all right, so I’m gonna come in and we’re gonna do text and we’re gonna do a heading Perfect and I am going to say that this is a section intro double underscore. Oh actually No, let’s look at it That’s an axe well Hmm Okay, so this is interesting you see how these are centered and our bar needs to be centered and Sometimes it’s left and sometimes it’s centered and we only have one accent heading So we need something called an accent heading centered Hmm and I and I wonder if Section okay some of this does take a little bit of extra thought all right, so we’re gonna call this accent heading Double dash centered why because I’m modifying our other accent heading that we created so the real way to do this would be to put our Other accent heading on there and then for accent so it’s really gonna need two classes and this is typically how these Modifiers work, okay? So on accent heading that gives it our main style. Is that a flex item?
0:56:37
It’s not but I can make it a flex item and then I can make it a vertical flex item Which this is the bug and bricks you can’t actually stack the flex item in this context So I’m gonna go to CSS root and I’m gonna say flex direction It’s column and that’s gonna reset it back to the way it was But what this is gonna give me the ability to do check this out Layout I’m gonna line everything to the left on that axis and then on my centered all I should have to do is align it to The center Ha ha ha ha look at that my friends Okay, now what I also want to do on my centered class is I want to go centered text All right perfect this needs to be a heading to This is gonna be our section intro heading Yeah, Lee come on section Intro heading perfect and then what I’m gonna do with my section intro is I’m gonna align everything to the center I’m gonna make sure that all of our typography is centered and then at the in break point I actually want all this to go back to the left automatically So then on mobile everything is nice and left aligned. So I’m gonna do text align left. I’m gonna do Where is layout no I’m gonna go back to the content tab and I’m gonna align everything to the left here and Then on our accent heading centered I’m gonna style this bringing everything back to the left again and And so it’s it’s gonna all take care of itself perfectly now section intro what I’m gonna do here Guess what is probably used my var content gap that I created right so we can get a nice Content gap in there Where yeah, there you go. All right. We’re getting a little lag. I’m gonna go ahead and save refresh Okay, let’s check out where we’re at where we’re at. Okay, perfect. It did not get our var content gap Var content gap. Okay, there we go. Let’s save our work. All right. What is our heading here? What we’re offering?
0:58:49
So I’m gonna go what we’re offering Guys if you’re getting value from this like if you have not hit like yet if you have not Subscribed to this channel. I don’t know what to tell you like you know you you’re heading You’ve got a one way ticket to chumpville. Okay, you’ve got to be subscribed to this channel and you got to be hitting the thumbs up So there’s a globalized component call and then here’s another tip for you right here What I’m gonna do is close all these panels we’re gonna do we’re gonna grab this container Call it a section intro and then you need to be doing this guys look you need to go Save as template and then template type is a section and then you can bundle it if you want to you don’t even have to do that Look it right there. I have a section intro the next time I create a section watch this I go section I’m like you know what I need one of my intros there. I hit templates insert section intro There it is right there I can drag it in and I’m off to the races I don’t have to go copy it from here and paste it if I’m on a brand new page Well one doesn’t even exist in order to copy it. I can just add it from my library Amazing I said I wasn’t gonna worry about the time. I do my family’s gonna be home soon. It’s bedtime I got to help okay, so we’re gonna start to close this up So what I’m gonna do is I’m gonna tackle this service card grid and there’s some very important things here Number one this needs to be in another container, all right?
1:00:11
So what I’m gonna do king of clicking the wrong tab I’m gonna add a container and you’re gonna notice these containers are right next to each other You know what I would like? I would like a contextual utility class that gives me control over all of my container spacing throughout the entire website Contextual utility class, right? So we’re gonna create something called container If I can spell it right container. Yeah, okay now I’ve already created that on this I don’t think we used it yet. Yeah, we have it So I’ve already created that on this training site and what you’ll notice is that it has a variable of var space L so it’s putting L spacing between all of my containers anytime. I use it. I also have a variable for container gap. All right That’s one thing. So another contextual Utility class use case now. I’m gonna talk about this grid You could here’s the mistake. I think a lot of people would make and I’ve done this in past trainings just being fast doing things on the fly But really this is not just a random three column grid of content This is a service card grid and it is very likely that you will use this service card grid on other pages of this website So what you need to do is actually create a custom class for this grid Because you may need to change this from three columns to two columns or two columns to four columns or You may need to change the gap in between and if you build this with utility classes and then this service card grid is in Five different pages of the website or 15 different pages of the website. Guess what?
1:01:49
You’re gonna be the chump going page to page to page grid to grid to grid removing classes adding classes removing classes Adding classes or if you’re in those other page builders You’re gonna be going copy paste copy paste copy paste because you didn’t create a Single source of truth for the design of this service grid You knew you were very likely to be using this other places on the site and still you didn’t create a Globalized component out of it. That’s on you, okay? So you need to be telling yourself man. I’m a chump if you’re doing that if you’re doing copy paste game If you’re doing the Remove utility classes add utility classes game you should be recognizing your chump status as you do that I’m just saying I’m just saying okay. All right, so here we go We are calling this a services grid and then what we’re going to do this is so unfortunate Bricks does not have a grid builder And this is why a lot of you or probably you would use utility classes or even worse You would use the columns element? Okay, we won’t go there. I’ve done a video on that all right go back and find the video columns versus grid if you don’t know I’m you know don’t know what I’m talking about but here we go services grid. We’re gonna have to write some CSS I’m sorry, but this is gonna be a very very good learning experience. All right, so what we’re gonna do is We’re gonna target our services grid and We’re gonna open up and by the way, I’m writing in SAS. So it’s like amplified CSS CSS was superpowers if you will Fantastic, you know, I’m teaching it as much as possible in my tutorials So I want you to start experimenting with it if you haven’t already and what we’re gonna do one thing I want you to notice Let me put let me just put three objects in here. Let me do div and just for for right now What we’re gonna do is and actually I can use blocks. Let’s not confuse everybody. Let’s just use a book You know, I wanted to be a flex element anyway All right keyboards going crazy. All right, so we added a block and two three see how they’re stacked on top of each other That’s actually what we want at like that device size right there, okay? So 767 we want them to stack You could even do it here, but I think that’s a little too small So it’s 767 we want them to stack so it’s only above 767 do we want them to actually appear as a grid?
1:04:21
So to be efficient as possible and this is why I love SAS you can nest things even media queries So I’m gonna do at media and I’m going to do sorry brain fart min with 767 Pixels cannot type today whatsoever display grid Grid template columns you just do first you say hey, we’re gonna display this as a grid Next you define the column structure so you want to start to memorize things like this repeat 3 so it’s a 3 column grid repeating and Each grid cell needs to be one fractional unit, which means they’re all gonna be exactly the same all right So repeat 3 1 FR that’s a classic grid structure you want to memorize that in your brain You can do repeat to FR for a 2 column grid 4 FR for a 4 column grid you get it’s very easy So once you’ve done it’s like riding a bike, okay? It’s gonna get easier and easier display grid grid template columns Gap we wanted to find a gap between these items of I’m just gonna do one info right now because we’re gonna come back to this very important Now another sub lesson another golden nugget all right then what we’re gonna do is we’re gonna do align Items to stretch because we want them all to be equal height all right now that’s only gonna happen Above 767 all right, where’s my grid?
1:05:45
So I still have a grid there. I go to 7677. I no longer have a grid. They’re stacking on top But I still I’m gonna cheat a little bit. I still want that kind of display as a grid because I still want the gap I just wanted to be like a one column grid so cheat code Display grid up here outside of your media query gap of 1M and You’re still gonna have a stacked stacked content, but you’re gonna have a nice gap still between your cards That exactly matches the gap that you have at these breakpoints So you see what I’ve done is I’ve created a responsive grid all right just like that very You know not a ton of CSS here Good to go now we have to do one more thing one more smart thing look right here Remember I created this utility this contextual utility class before called content gap Very likely guys very likely that you want the grid spacing on a lot of your grids across the site to be exactly the same And you don’t want to have to remember that I use gap M that I use gap L that I use gap XL gap S Which one was it right you don’t have to know you just have to know that you used grid gap So we’re gonna make a contextual utility class called grid gap and the value of this is gonna be space in Okay, so medium spacing and now what I can do is for my gap and I can do I wonder if I have multi Oh, I don’t have multi cursor editing in here. Okay, so var grid gap and then I’ll just copy that and put it right there Okay, so now I’m referencing var grid gap here and then if I want to I can also while I’m here Just create a grid gap utility class so I’ve access to that and we’re gonna say that the gap is var grid gap Just like that. Okay, so I am going to go back to the front end We see that we still have my gap nice perfect. Okay, it’s a little bit aggressive of a gap So what I’m actually gonna do is come up here and change it to space S and now my cards are gonna be a little bit closer together Okay, so I like that so that now I’ve Globalized my grid for my services card now what I want to do is actually create our service card So I’m gonna give that a class of service card you know you know right you are not going chump mode and Let me zoom out on these zoom out zoom out, okay You are not not not not not not gonna gonna build this with utility classes. We already know that right?
1:08:11
Okay, so what I need is image heading text text image heading text text all right, so we’re gonna go back to the builder. We’re gonna go image heading text text Perfect now I’m gonna steal the image from right here now normally. I’ll give you another little hint, okay? Normally you would be grab this Copy image address you would be creating these out of custom post types and you would be querying them onto the page with a query loop If you were a pro, all right I’m not gonna go through all that right now because it’s not the point of this particular training But that’s what you normally would be doing and you’d be inserting all this with dynamic content All right, so I’m gonna grab this put that image in there We’re gonna give this a class of service card image and then we’re going to give this a class of Remember I said do all your classes first service card heading and then do your styling Okay service card text and we’re gonna do service card Link all right good now A lot of times what I what you would see me do I’ve done a how to build a card properly in in in bricks. I’ve done one in oxygen If you want to know how to build cards properly for accessibility and really good semantic HTML and all of that And I want you to go watch those trainings I’m not gonna go into all that detail here because it’s not again. It’s not the point of this particular training All right, so what I’m gonna do is I’m going to first make this service card image another tip right here When you’re using icons like this, they’re not always symmetrical So if you use width to control their size They’re gonna be different heights and then your content is gonna be off alignment So if you use height to control these this is one of those areas where you actually want to use height instead of width And you’re gonna be much better off all right, so I am going to go to layout and then we’re gonna go to height And I’m gonna do like eight eight rim and that looks Looks Maybe like six rim That looks about right. Okay on my service card. I am going to align everything to the center. I am going to go to typography And I’m gonna center everything there and then guess what I’m gonna do. I am going to one of two options here I can do var content gap but content gap might be too big for For cards in certain situations so you could create a new variable We could go over here and say you know what I want a card gap So this is the gap between the content in your cards and you could say that this is space excess maybe or maybe if this was Um up here you could do S down here. I’m just gonna do S which is gonna be exactly the same but Content gap if you want bigger gaps in your content that you can change without affecting your cards now See how this works. Okay, contextual utility classes. All right space S So we’re gonna go ahead and hit save and then I can change this to card gap and you see I still have the same gap So everything is working nicely. Let’s go ahead and drop some content in here. Can you click on the wrong tab interior design?
1:11:34
And then I am going to grab let’s get out of this. Let’s grab this text and I need to we’ll do that in just a second So I’m gonna grab this card heading style font weight 500 and then Our learn more button. That’s when you take care of so this is gonna be Learn more again terrible call to action style uppercase font size var text S I’m starting to my voice. I’m starting to feel it guys. All right var. I’m not gonna last much longer text S And then what we want to do is we’re gonna I’m just hopping around a little bit So on our layout are padding. We’re gonna hook in again space XL because I’m noticing that there’s a lot on the top and the bottom a little bit less on the sides so Big spacing on the top and the bottom and then var space. Let’s do like M on the side. Let’s you L on the side Okay, we’ve XL top and bottom. We have L on the sides and I’m actually I actually want to go to XXL top and bottom Okay, that looks really really clean to me. Okay, so this link needs to be font weight 600 We need to add an after element Okay, so we need to underline it and that’s not a real underlying so we’re gonna go to after and We’re going to go color is gonna be global primary and Then our layout our width is gonna be a hundred percent Wow, come on bricks 100% our height is gonna be two pixels and our Display is gonna be flex and Our what are we missing? Oh our content Okay, empty content do we have a line? Oh, we don’t have a line. So what’s going on? Oh, I know what it is We didn’t give it a color where I thought I did but maybe it That’s there. Okay, geez Louise. I feel like I already did that roll the tape back. Did I do that? I’m pretty sure I did that All right, let’s refresh Okay, you know, we don’t have one thing we don’t have is a ooh, but I want to prove something to you, okay?
1:13:57
So we’re gonna delete these other cards These other blocks that are just empty and because I’ve got classes on everything guys I can just duplicate this two more times all right. We still got our gap here We do need to put in this little background. So what I’m gonna do here I am going to use a I haven’t used utility classes here. I’m not up there though. Let’s do it right here and we’re gonna do BG BG shade ultra light That’s gonna give us that light nice light gray and then I’m gonna do a pseudo overlap technique, okay? There’s a couple of different ways to do this I’ve done other videos on this in the past I I’m a big fan of the in set box shadow pseudo overlap technique, okay? So what I’m gonna do is and I’m gonna do this I’m Gonna make a class for this I’m gonna make a class for this called pseudo overlap pseudo overlap just like that and I’m gonna do an in set box shadow So we’re gonna tack on in set the x axis is gonna be minus no no no no no the y axis sorry x is 0 200 pixels minus 200 pixels blur of zero spread of I might have to do a spread sorry. Let me let me think about this for a second. Nope. Nope. We’re good. We’re good. Okay How high does that need to go? Oh much higher so this needs to be more like 300 400 Minus 350 There you go. So if you look it goes right through actually goes right through like where the icon is So something like that. All right, that’s perfect now what I’m gonna do is our card or service card See how I forgot a background color and I forgot a box shadow But because I use classes on everything I can do this without being a copy paste chump and I could just add a background color to the class And then I can go down to box shadow and I can say 2 2 40 minus 5 shade ultra dark tree that’s 20 and No, that’s there you go. That’s 20 and Then that’s 10. So I’m just deciding where I want 20 or 10. I probably want 20 Okay, that’s looking good now we do have this little background image that we got to put in So I’m gonna do that real quick and then I think we’re gonna close this out. We’re gonna call it a day I think you’ve learned enough Again if you haven’t hit like if you haven’t subscribed yet, please go ahead and do that Let’s go ahead and position this background image. This is div section. So I got to figure out exactly where this thing is All right save image actually just copy image address and And on my service card what I want to do. I’m actually assigning this background image to the class Because I want it to be the same on every single card look at here It’s the same exact one on every single card. So that means it needs to be assigned to the class So I’m gonna go to style background select image note don’t select image External URL and then what we’re gonna have to do is go no repeat Background size we’re gonna have to do a manual background size Why can’t I click this? Okay custom and I’m just gonna guess like 400 pixels or so I had perfect. Oh Did I hit the nail on the head look the tip comes down to like interior design? Oh?
1:17:34
My gosh, it’s like I could go like 380 to really make it perfect But I mean out of the out of the gate Top left is good no repeat all right So we have got our service card notice that it applied to all of them automatically because you know We did the right thing we created our custom classes we followed best practices We made a scalable maintainable section and an scalable maintainable card element all right So I am going to save here And man, I think I think that’s gonna be the end did we miss anything? Let me look here again. No, I don’t I don’t think we missed anything all right guys Let me go back to camera here That was a lot. I’m losing my voice I Really do hope you you that it clicked for you that’s that’s really what I want is by the end of the video I wanted this stuff to click because this again. I’ll reiterate it’s a question that I get asked over and over and over Again, it’s one of the biggest points of confusion when using utility frameworks whether to use Utility class or custom class how to hook in with variables even if you don’t use a utility framework I’ll say it again. You’re creating your own custom classes versus when do I when can I style at the ID level or make my own Utility class when do I use a custom class? How do I name the custom class?
1:18:57
How do I organize my custom classes all of that stuff was answered for you in this video? So if you’ve got value hit like hit subscribe if you want in-depth trainings like this There’s a gazillion of them inside my inner circle link to join is down below And along with a bunch of other stuff that’s not even dev related agency growth SEO PPC Sales getting leads Accessibility we’re covering everything and it’s an amazing community over 800 active Members absolutely fantastic, so I want to see you inside. We’ve got masterminds in there We’ve got a lot of cool stuff going on. So I will see you guys soon I really appreciate the fact that you stayed till the very very end you are an OG my friend I love you and I can’t wait to provide more content for you. Cheers
