0:00:00
Hey, what’s up everybody? Welcome back to the channel. We have a new style of content for you today and I want to know if you like it. So drop a comment down below if you find this valuable or insightful or what have you. I have Mark Zemanski on the channel. He is a creator, has his own YouTube channel. I will link to it down below and effectively Mark is a Elementor refugee. He’s coming from the Elementor ecosystem and we’re not picking on Elementor. It could be Divi, it could be Beaver Builder, but basically
0:00:28
going from one of those kind of like beginner level page builders to a more professional page builder like Bricks or Oxygen or Quickly, you know, rest in peace. And so he’s got a lot of questions, he’s got a lot of challenges that he’s running into, you know, new concepts like a class first workflow and BIM and using a framework like automatic CSS for the first time. It just presents a lot of questions and challenges. And I was watching him work through on his channel some of his stuff, running into these challenges and having these questions.
0:01:02
So I invited him on the channel and I said, hey, let’s just do this together. I think it would be very helpful for lots of people. And he was down for it. And so here we are. Watch, enjoy. And if you find this valuable and want to see more of it, maybe if you want us to do a little series out of this, let me know down below.
0:01:21
Here we go. All right, I’m here with Mark, and we’re gonna go ahead and get started. What’s first on the list, Mark? What are we gonna tackle first?
0:01:30
Oh, man, it’s a big list. Well, I appreciate you doing this, Kevin. Thank you so much, man. I think it’s gonna be great for, definitely gonna be great for me. Hopefully it’s great for your viewers as well. So I mean, yeah, short blurb about me though. As you mentioned in the live stream the other day
0:01:44
and all that, I’m coming from Elementor. So like I’ve been using Elementor since like 2018, watched a lot of your content, watched a lot of other creators’ content, realized that in order to scale a little bit, I wanna go bricks and obviously have ACSS and frames in my stack now. Watch PB 101, fantastic.
0:02:01
Can’t thank you enough for that.
0:02:02
And now I’m kind of just like, you know, with this chat with you is kind of just kind of, I think the biggest thing that I want to, I think would be great here is to kind of double down and understand the efficiency of your workflow and how certain things kind of operate and all that sort of stuff. And, again, I’m just kind of still a noob, so I think there’s a lot to kind of be learned there. I mean, if you want to just dive into it, I mean, just kind of like a general like overview and visualization of like BEM,
0:02:33
I think would be like a really good place to start perhaps. I know it’s block element modifier methodology and everything like that. But at a high level, when I’m building a page out and I’m using like sections, containers, blocks, divs, I think just kind of best practices on like when to use, obviously sections make sense, but containers, blocks, and then when you’re actually
0:02:53
naming them, like that BEM methodology, to summarize, you make it seem so simple to get to the point where you click the auto BEM button and I’m just like kind of lost there in that workflow. So that’s a lot there, but I think that’s kind of a good place to kind of start.
0:03:09
Cool. All right, so I think it’s best when people, because I show examples where it’s very abstract and it’s kind of like, here’s this thing that I made and sometimes it is a simple little card, right? But then what happens is people get into a real project and the project, the page is a little bit more complicated than what I showed in the example in the video, right?
0:03:32
And that’s where they get stuck and lost and all of that. So I saw you were working on a real project dashboard the other day on video. So if you want to like pull that up as an example and then we can go like, maybe you can show me part of the page where it was like, all right, this is where I got stuck, like naming this thing.
0:03:49
And how does it work here?
0:03:52
For sure, okay, can you see this?
0:03:54
Yeah.
0:03:54
Cool, okay, so yeah, this is just simple dashboard design. And I think you had even made a comment on this because in the video when I was displaying this, I had some like the spacing issues. And there’s some other questions we could probably tackle as we go through this. So for instance, like right off the bat though,
0:04:09
in kind of like a setup of ACSS and everything, I noticed that you have videos where you’re going over different things and then you’re, you know, like you said, you’re making cards and all that. Like a stupid simple question is, do you ever use the contextual spacing? Like the auto spacing and everything like that between grids,
0:04:27
between containers, between contents, like, is there a reason to use that? Is there when and not to use that? Like, cause that messes me up just because.
0:04:34
Yeah.
0:04:34
Automatic spacing.
0:04:35
I have turned on on every build. So every project has auto spacing on, uh, and what you’re going to find is that it’s, so you, you combine smart spacing with auto spacing. So when you go into the ACS dashboard, you turn on smart spacing. And what that does is effectively it gets rid of all default spacing. So like browsers will auto space, like they’ll add margins to headings and paragraphs and things like that. And a lot of times in like those card layouts that you were showing, yeah,
0:05:06
if you go to, yeah, scroll down and you’ll, you’ll find smart spacing. It’s under typography is smart spacing Click the typography tab and scroll down Gotcha, so you tore you normally turn this on turn that on for sure okay? Yeah, that’s a super important thing to turn on Especially if now go back to your layout Okay So those kinds of cards like that you typically want even spacing and even if you don’t want fully even spacing. Maybe some people like the button to have a little bit
0:05:40
more space above it than the other things. But for the most part, it’s even spacing. What you don’t want is, you don’t want to add a gap to the card, which is gonna basically create space between every element, and then also have the browser, like, well, that’s a paragraph, so I’m gonna add even more, and that’s a heading, so I’m gonna add even different one to that.
0:06:00
So the browser’s trying to do all this stuff, and it’s like, no, no, no, no, no, thank you. Like I will dictate my spacing. And so when you turn on smart spacing, it’s going to remove all those user agent styles and basically put everything at zero. And so everything will touch each other. And then if you add a gap,
0:06:15
the gap will make even spacing between all items. So that’s super helpful, very, very handy. And then you can still use margins within there. So if you need something to be uneven, you can always make it uneven. It doesn’t stop you from having uneven spacing, but it gives you even spacing out of the box if you want it, right?
0:06:35
Now, when you add auto-spacing on that, it’s just you don’t have to do the step of constantly adding spacing at every turn. Now, in Bricks, we stopped at blocks, okay? So a section will have an auto-gap between all the containers in the section. And then inside of those containers, there will be auto gaps between the content. But if you add a block in the container, then we don’t auto space that yet.
0:07:03
But we are going to add a switch for that because I do think it’s, we, when we initially added auto-spacing, we’re like, how far should we take it? And we actually didn’t, we were trying to be safe and trying to be careful. And so we didn’t take it far enough. Now we’ve realized, oh yeah, we can actually, let’s go further with that. Uh, so there will be auto spacing in blocks.
0:07:22
That is exactly the thing. When I was learning, first learning about ACSS when I was even more of a noob, I, the first thing that I realized was I went in here and I went to spacing and I turned all these on and it, it seems like it gives you kind of like a little, you know, like you said, like, you know, automatically add the contextual spacing so you don’t have to have, you know, you don’t have to mess with that as much. Yes. And then immediately I was like, well, wait a minute.
0:07:47
And I think that even happens like on this project. Like if we go to, like, you know, you go section, whole thing’s a section currently, and then you go container and then you go block. And so this is a block here. And I was like, immediately I was having an issue where I want to add this spacing and I want it to kind of be automatic, but what I did in the Bricks templates, or I’m sorry, in like the Bricks theme styles, for a while I put in block, I put a minimum, I put a variable in column and row gap of like, I think it was content
0:08:18
gap if that’s the one that makes sense. Or just like, I feel like, is that kind of the same thing?
0:08:24
It’s yeah. So you can, you can do that. Unfortunately, Bricks uses too much specificity to do that. So all of our automatic spacing uses zero specificity, so you can override it with anything. Utility class, like, you know, the order of the style sheets doesn’t matter. Um, but Bricks adds specificity when you do that. So I believe if you put like content gap variable in your blocks by default, and then you try to use
0:08:52
like a grid gap utility class from automatic CSS or something like that, or even like gap none or something like that to get rid of the gap, they’re not gonna work. Bricks is gonna override the utility classes because there’s too much specificity. So I avoid that. I don’t use hardly, the only thing I do in here
0:09:10
is the element container, setting it to the content width of the website. Yeah, just like you do. Literally the only thing I do. I don’t do anything else in there.
0:09:19
Do you do fonts and stuff too or whatever?
0:09:22
I just do fonts, yes, but not, yeah. Like the actual font families, but none of the font styling or anything like that.
0:09:28
Right, right, right, yeah, yeah.
0:09:29
So another random question as we go through this is this is something that I struggle with, especially from coming from a just pure ID, styling, workflow, and Elementor and all that, is every time I’ve watched you, watched a ton of your content, every time I’ve watched you create cards or page layouts or anything,
0:09:47
you are doing this where you drop in all the elements and you get the structure, I feel like, kind of laid out, but you’re not styling the structure, you’re not putting the grid and all that on there, you’re just getting literally heading, text, button, icon, whatever. And then you go, and that point you hit the auto Venn button because all of your stuff is in there
0:10:08
and everything’s labeled and then you do that. So I wanna talk about that process. But before we talk about that,
0:10:12
I don’t know if I’ve ever seen you style anything
0:10:15
without it having a custom class on. Would you recommend that? Is there ever a time where you should not have a custom class on something?
0:10:27
It’s a matter of like, do you really need to have a custom class on something? So for example, if you are building a header and you’re in your header template, you know, you could make an argument and say, well, we don’t need to use classes here. The reason why we don’t need to use classes here is because we’re working within a templated component,
0:10:45
right, where we’re gonna apply this thing to every page, but there’s only one instance of it, right? That one instance is the source of truth for all the other instances. And that’s really what a class is doing, is it’s creating a singular instance of styling that applies to a gazillion different elements, right? Well, if you already have some other functionality
0:11:08
that creates the multiple instances, in this case, like a header template or a footer template, you don’t necessarily need the classes. But in page building 101, like the principle when I was talking about BIM is when in doubt, BIM it out, right? So you can’t go wrong by adding custom classes and then styling the custom classes.
0:11:26
You just, you’d maybe did a little extra work, but with AutoBIM, how much extra work did you really do? Like it’s just a couple of clicks. So there’s really no downside to using custom classes. And what I found is beginners, especially, they will think like, ooh, I probably don’t need a custom, but they really aren’t like, they don’t have enough experience to realize,
0:11:47
no, you really do need custom classes there. So if they just follow a process of like, I’m gonna add a custom class to everything, they’re not really gonna go wrong, right? Unless they’re just naming everything wrong. But it is a good practice to just do it by default. And then as you gain experience, you’ll run into scenarios where you’re like,
0:12:04
I know for sure I don’t have to use a custom class here, because I’m working within a template or whatever. When components come to Bricks, this is another situation where perhaps we can start to move away from BIMifying everything. There’s also, I’m actually gonna do a video on this, there’s something called Scope coming to CSS. Scope is actually going to potentially just fully replace the need for BIM and make life a
0:12:29
lot easier. So I’ll let people wait for the video on that, but short answer is you can’t go wrong by adding the custom classes.
0:12:37
Let’s talk about then that all makes sense. There’s a lot of clarity there. Like, I guess, I guess maybe some of the times the thing that might end up happening with me is that I feel like I’m, and maybe I’m overcomplicating, I’m getting like stuck between seeing this maybe on a design and then getting to the point where I can feel confident about like, okay, I’ve got all my pieces in here. I can hit the auto BIM button.
0:12:58
Cause I feel like I’m almost, I feel like in the past I’ve wanted to start styling too early because it was all at the ID level. And now it’s just a different workflow. And I would like to be as efficient as possible.
0:13:10
So auto BIM 2.0, you’re going to be able to style everything at the ID level. So you can just play around. It’s like, let me just add things, let me just play around with it. And then when you auto-bend it and create the classes, it’ll just pull those styles from the ID and assign them to the classes on that element, right?
0:13:28
So you can kind of get the best of both worlds. You can play at the ID level, which is super fast, and you don’t have to worry about naming anything, and you don’t have to worry about really much of anything other than what you’re building and what it looks like and how it’s structured and then when you auto BEM it it’s just going to take all that mess and organize it in custom classes and it’s going to copy those styles over seamlessly so that’s going to be fun and exciting. Now if you if you’re doing it
0:13:54
in the world we exist in now where that feature doesn’t exist let’s for example let’s just build that hello Mark Zmanski card, right?
0:14:02
So do you wanna just redo this one or you wanna try to redo this thing as a section? There’s two.
0:14:08
Yeah, let’s do that whole container. So literally both of those cards. And what I would call that thing on the right is a CTA card, which you’re asking somebody to apply to something. And that’s a very common pattern, this icon, heading, text button card situation. So you would want something called a CTA card
0:14:26
on your website that allows you to put any content in there, but it’s styled exactly like that, right? So this is a situation though, being that we’re working in a dashboard and it’s a template, I guess, all we have to do is use for the grid aspect, you can just use a utility class. You can just use your grid two on the container.
0:14:44
That’s gonna put those side by side.
0:14:46
We’ll look past my microphone like you always have to do.
0:14:50
Yes, yes, yes.
0:14:51
There we go.
0:14:52
Okay.
0:14:53
Okay. And so on the left, we’re going to, and I do highly recommend that like before people make classes, and this is actually what is good about AutoBIM. Before you make any classes, organize, label everything in the structure panel. You should just do that. And even if you’re not using BIM, you’re not using classes, like you should just organize your structure panel. Um, so let’s just call that, um, you know, a, a hello card or a person
0:15:18
card or a bio card or like whatever you want to call it. Um, and then we’ll call that a CTA card.
0:15:23
Yeah.
0:15:24
Okay, perfect. So in our hello card, what we’re going to, I, you know, I just teach people to think in boxes, right? So you have effectively what is, looks like a header, like the hello, and then your name are grouped together in like a what we’ll call a header right so we’ll put a block in for that and the reason I’m doing block instead of div here is because the block is already set to display flex and it’s already going to be a hundred percent wide so it’s just a
0:15:54
little bit of a shortcut you could absolutely use a div but then you’re gonna have to set it to flex you know yourself and yada yada yada. Okay then you have the contact info section that’s gonna be another block in itself so that’s two grouped items at minimum two grouped items and then you’re gonna have the websites at the bottom so we’ll add a block for that and then I would just name these right so the the top block you can name header and then the second block you can name. I would probably use something generic, so just use body wrapper or something.
0:16:33
Yeah, I mean, talk me through that real quick because one of the things in my notes was I am absolutely atrocious at naming, labeling all these things. I mean, does that just come with time? Like, how are you actually making these decisions?
0:16:44
That’s just an experience thing. And then sometimes you’ll be like, man, that’s a shitty name. And then you’ll wanna redo it. And thankfully a page builder like Bricks allows you to rename classes, which not a lot of builders do. Like Oxygen, you can’t rename classes in Oxygen.
0:17:00
So you’re stuck with your shitty decision unless you wanna make the new class, copy styles from the old, like you gotta do a bunch of manual jumping through hoops. Bricks makes it very easy to just correct your mistakes. So it doesn’t have to be perfect, right? And then that one, I would just call the website wrapper or something.
0:17:19
Okay, and then you’re gonna go up to your header and now we’re just gonna drop the two things that we need in there, which is text and a heading. And I would, the only thing I do is I just put the heading first, right? So heading and then text, all right.
0:17:33
And how do you ever decide on,
0:17:34
I mean, I know what the difference between basic and rich is,
0:17:40
but how do you ever decide?
0:17:41
Single line or single paragraph can be basic text. If it’s ever going to be more than one paragraph,
0:17:49
it’s gotta be rich.
0:17:51
Got it. Okay. Okay, so then I would call the basic text thing, the intro, it seems like the hello, that’s just like an intro thing. Then the heading, the heading can be the heading, the heading can be the person’s name, you know, it could be whatever you want. Then in the body wrapper, we are going to, now this is where you make a decision, right? So that
0:18:12
pencil, that pencil thing, you know, what are we going to do with that? We could put an icon element in. We could also use a pseudo element for that icon. That’s not a selectable thing, it’s not, there’s no real accessibility stuff at play here In fact, we we probably don’t want a screen reader to read that because it’s just decorative right? It’s just a cute little thing Well, I actually made it I made it a clickable thing that they could go. Oh, it’s a clickable. Oh that one Okay. Well, okay. Well that now that raises a whole new can of worms. Okay, we can make it simpler for the Episode one. I don’t know. We need to make it we need to make it clickable because this presents the, uh, now we have to do it a certain way for the most
0:18:53
part.
0:18:53
Okay.
0:18:54
All right.
0:18:54
So what we’re going to do is we are going to put in another div. We’re going to, we can just use a div this time. Uh, cause I’ll just, just for shits and giggles, we’ll just show people the
0:19:02
difference.
0:19:03
So you can put a div in and inside that div. You don’t even have to, don’t even worry about naming it right now. We’ll name it in a minute. Uh, put in text and then an icon. And in fact, what we’re going to want to do now, we could do this one of two ways. So that icon, an icon that is a link, cannot just exist by itself because that’s not accessible.
0:19:27
Because the screen reader has no idea what that thing is, right? So you need either an ARIA label attached to that, which is going to describe what the link is to a screen reader, or you need hidden text inside that’s going to basically be grouped with that icon inside the link and we’re gonna hide that text to visible like users and the sighted users and then for screen readers it’s going to announce that hidden text. So in order to do that what
0:19:55
you’re gonna want to do is right-click your icon that you’ve added now in the structure panels well I guess you do it either way and wrap it with a div.
0:20:04
Okay.
0:20:05
Div.
0:20:07
Yep. And that div is going to effectively be your link. So we’re going to turn that into the link by going to HTML tag right there and choosing A.
0:20:16
Okay, right now?
0:20:17
Yep. A link, there we go.
0:20:20
Yep. And then it’s going to ask you for your destination. So in that drop down up there, external URL, just put a pound sign for right now, that’s fine. That makes it a real link. But now that you’ve wrapped it and that you’ve created that link, so the link is in, or the icon is inside of a link,
0:20:37
you can now hit the plus sign and add a text element in there. So I’ll show you how to do hidden text.
0:20:43
Okay, right here?
0:20:44
Yeah, yeah, yeah. And just add a text element, basic text. Yeah, and then, so where does that pencil go? What does that like edit, edit the contact info or something?
0:20:54
Yeah, it’s a WooCommerce site, so it just goes like my account basically. And so they can edit this piece.
0:20:59
So type in edit account info in that. Like we’re just going to describe what this link is doing. Okay. And then you can make that a span. Okay. And now put the class hidden accessible on it.
0:21:11
Up here.
0:21:14
And this is a ACSS class.
0:21:16
What does that do though?
0:21:17
Does it just do what it did? Like just hides it and makes it? It does, yeah.
0:21:22
It hides it to anybody who is just viewing the page as normal. Nobody’s gonna know that that text is there. But if you go look in the DOM, like you go look in the code, that text is sitting right next to that icon inside the wrapper. And so just naturally when you use a keyboard
0:21:36
to focus on the link or a screen reader reads the link, it’s going to read the text inside of that link, right? And so now people using a screen reader know exactly what that icon is going to do. If that text is not there, if we didn’t do that step, it’s not going to, they’re not going to know what that link does or anything about it, right? Now Automatic CSS puts that little A there to let you know that there’s hidden accessibility text so that you in the builder can see it, but when we go the front end you’re not going to see anything. And then we can start, let’s go
0:22:08
close that div, okay. So under that div, we are, which is still within our other div, we are going to put the second line which is actually your email address or the person’s email address, because it is what it is. So that one’s easy. Okay, now let’s go into the websites wrapper. We’ll come back to that div in just a minute that we didn’t label.
0:22:37
So this one is going to be just three text lines, more or less. So just text, text, text.
0:22:42
Okay, and technically, this is, like I had this as basic, and then this is actually, those are actually queried from the thing. So I mean, it’s like a relationship query. But you know how-
0:22:55
You would probably just need one of them and then loop them.
0:22:58
Yeah.
0:22:58
So yeah, you can just put one for now, it’s fine.
0:23:01
All right.
0:23:02
And then so the, I would do a heading, that basic text, call that a heading, but we’ll talk this through in just a minute when we auto-bend it. Because I want to, because this is how people are probably going to do it and then we’ll see the issue they run into.
0:23:17
Okay.
0:23:18
Uh, then that’s just gonna be called website address or just, yeah, just say website or you, I would just say URL.
0:23:23
Actually.
0:23:24
It’s like the shortest way to name that.
0:23:26
Okay.
0:23:26
All right. Um, so what you’ve just done is just going through it.
0:23:29
Like, it looks like an absolute mess up there, but what you’ve done is put every actual element that you need inside that box. And so now you’re ready to style, but before you style anything, you should just auto-bend it. And the good news is we did almost all of the auto-bend work already by just naming things properly in your structure panel with one caveat, right? So go click auto-bend on hello card up there.
0:23:59
Got it.
0:24:00
Okay.
0:24:01
So we’ll do this.
0:24:02
All right, good. So now at this point, you wanna check your classes because you are gonna run into issues. See how you have Hello Card header? And then you, well, you’ve effectively named this other thing name, right? Hello Card name, but that was actually a heading. Let’s say you had put a heading on that too.
0:24:18
You would have Hello Card heading there. And if you scroll down, there’s another Hello Card heading, right? And this is where you can make mistakes with them So you want to you want to make sure you’ve named things correctly, so I’ll kind of show you Let’s start at the top and let’s go through it So name is fine intro is fine. Those are unique elements. The body wrapper is fine That’s a unique element now. We have this div that we didn’t name. We definitely need to name that
0:24:45
And it was the that is the wrapper on your contact info, right? So you have your body wrapper, you have your div, and the basic text, and then the div next to that, and then the email address under that, okay? So I would call that div, let’s just say contact wrapper.
0:25:06
This one here?
0:25:07
Yeah.
0:25:08
And then a dash, right?
0:25:09
Yep.
0:25:10
And then that text basic, let’s call that contact info. And then the div right there is the wrapper for your icons.
0:25:18
Just call that like icon wrapper.
0:25:19
Is there ever a reason why you would, why you, like instead of just, like this is contact wrapper,
0:25:26
but instead of saying contact info, you just say info? Is there like a reason you’d choose to say kind of like the?
0:25:41
Yeah, because you want a clue as to the context of where this thing is. Like in fact, this icon wrapper that we just did is not gonna be a good name, because if you look down by your websites, you have another icon down there. And now there’s two different kinds of icons in this card, so we need to know which one is which.
0:26:01
So I would call this the contact icon wrapper. Because it’s within the contact wrapper so it makes sense that it’s the contact icon wrapper. Then the next thing down is the contact icon. So it’s not a bad idea to repeat the contact. Right, yeah, no you want to because that’s what all BIM is. Like that’s why the whole STEM, the whole original block class is being repeated. Hello card, hello card. Because these all belong to hello card. So you use the same concept within, because there’s no multi-level BIM.
0:26:31
There’s no hello card, double underscore, contact wrapper, double underscore. There’s no elements of elements of elements, right? So the way that you do that is just right by repeating the name of the element in the actual element class. So hello card contact icon, hello card contact label, and you, or you can say contact icon label.
0:26:51
You would never write this as, these are the class names, obviously. And we’re talking specifically about the element portion of the class name, because the first part is the block. But would you ever write, when we were doing all that stuff though, would you ever say contact icon label, or is that just too much going on here as a label?
0:27:11
No, what we’re actually going to do, because we have sync labels down there, these changes that we’re making right now are actually going to get carried over to our structure panel for us automatically.
0:27:22
Okay, that’s awesome.
0:27:23
Yeah, so we kind of did the bulk of the work initially, but now we’re refining what we did and when we refine it, it’s going to carry over. So now, hello card, email address is fine, because there’s only one email address in the thing. So everybody knows what that is. Um, the websites wrapper. And then I would say the, uh, that’s a, uh, websites wrapper, a website heading.
0:27:46
Okay.
0:27:47
And then you had a URL, which we’re going to need a URL icon for as well,
0:27:51
but I would say website URL, let’s call that a website URL.
0:27:53
Okay.
0:27:54
So it’s kind of, um, it’s almost like SEO, right? SEO is better when you’re specific with your keywords versus when you’re super generic. Same thing with BIM. If you’re just specific with your names, it tends to work out better than if you’re too generic with your names. So like website URL, better than just URL, right?
0:28:22
Okay, so now we’re having sync labels and we’re going to apply classes. Um, and then when you hit apply, it’s going to map that to the side over there.
0:28:31
Cool. Thanks.
0:28:32
So yeah, there it fixed our structure panel for us.
0:28:34
Everything is more specifically named. Uh, and then, you know, there’s, you can obviously, there’s going to be personal preference and how all of this stuff is named. The important part is that everything has a unique class. Everything is perfect. It’s like within the B E M methodology. Right. And so now all of our styling can be done and we’re safe and we
0:28:57
have one single source of truth. Whether we really, really, really like the name we chose or don’t really like that, that’s the least of our concerns at this point, because remember people are coming from ID level styling on everything, they have no global control of anything like the fact that, you know, we use a plural instead of singular and the name like that’s just, you know, nitpicking at that point, right? Uh, we’ve done the bulk of the work. So now we can, we can actually start styling that thing.
0:29:23
Um, and so in your notice, you know, I would go, I would start the block level. So I’d go up to hello card and just start there. And the first thing that I, well, actually what I would do is with content because I hate seeing the, here goes your text and all of that. It doesn’t, it’s hard to start to visualize how this comes together. So I would put hello in that first one.
0:29:44
Well, technically this one, right?
0:29:45
Yeah, that one right there, yep. And then put your name in the actual heading.
0:29:50
And then just, I’ll just let you, yeah,
0:29:51
just fill in all of the actual content.
0:29:55
Cool.
0:29:56
So the next thing we wanna do is get our HTML tags fixed up before we go on. So the URL, are those going to be linked up
0:30:06
or are they just printed URLs? They don’t, yeah, they don’t have a link. They’re just, well, yeah, that’s fine.
0:30:11
Just make them spans then. We don’t want everything to be a div, especially just text. Typically it’s just going to be, it’s either going to be a paragraph or a span. A URL is not really a paragraph, so I would go with span.
0:30:22
How do you decide on that? Because this is again something that I know totally different over there.
0:30:28
I wouldn’t say there’s like a completely black and white distinction, right? But I just use it in the context of like a book, you know? We know what paragraphs of content are in a book and then we know what like little aside kind of things are. And I just use spans on those. A span basically doesn’t have any real semantic value.
0:30:50
And on every text you set that, every single text you set either span or paragraph?
0:30:56
Yeah, a div technically is a container, right? So it’s something that things go in. So to me, it doesn’t make sense that text is using a container tag. So a span is, and then you could get into a situation where we’re talking about inline tags versus block tags and that kind of stuff. Like a div is a block tag, a span is an inline tag.
0:31:15
So it’s more appropriate for text to have span tags on it, in my opinion.
0:31:19
Okay.
0:31:20
Okay, so then we’re going to, same thing on go to websites heading, which is not really a heading, but it’s the heading to the URLs here. You can change that to span. Okay, and then the email address, not gonna be linked up or is going to be linked up?
0:31:39
Probably not.
0:31:39
Yeah.
0:31:40
Okay.
0:31:40
So that can be a span.
0:31:41
The contact info next to the pin that can be a span. That already is cool. The hello at the top can probably be a span. I mean, there’s not really, there you go. Okay. If you put like a little intro for the person in there or like a little bio snippet or something like that. That’s an obvious like paragraph situation.
0:32:05
Okay.
0:32:06
Uh, what’s the heading level on the, on your name? Got H3. Yeah, currently H3.
0:32:10
Yeah.
0:32:11
I don’t know if the technical name.
0:32:12
And we’re, we’re working. Well, we’re working within a section, right? So a section has to have a H2 in it. Um, now it’s, are you going to put a heading above the cards? If you’re not, then these need to be H2s, but if you are, then these become H3s. Okay, so now we’re ready to rock and roll with any other styling.
0:32:34
Now we could stop here if we don’t want to just do the basic styling, the sub if you have other questions, but we did the general structure of like, all right, here’s how we add everything, here’s how we name everything, here’s how we auto-bend it. It’s up to you if you want to continue with the actual styling portion of it, or if there’s another question you wanna move on to.
0:32:53
I’m just looking down here as an example. So we kinda have our blocks, like we have this, this is our finished product, right? So this was a block up here that we created, this is a block, this is a block. Are we putting, can’t remember how I did it down here, are we putting gapping? Because I think that’s kind of what I did
0:33:10
was like auto-gapping or something somehow, I don’t even 100% know, but like how are you creating the gaps like kind of in that piece?
0:33:18
So since we did effectively group, group, group, all you have to do is click Hello Card and put whatever gap you want. Now activate the class at the top before you do it.
0:33:29
Always good to do that.
0:33:30
Yep. And then row gap is, now that looks a little bit more than content gap. So you could use a calc for sure.
0:33:43
Then I don’t know like 1.5 maybe or something.
0:33:51
Mm-hmm.
0:33:53
Yep.
0:33:54
Okay so then you’ve got go click on your middle group there because those things are next to each other. It’ll help us visualize if they’re actually below each other. So click on the contact wrapper portion of it. Some of these we made, we use divs, yep. And see how the display is set to block. This is a tricky thing with like page builders where Bricks sets everything to flex by default,
0:34:19
except for divs. So if you use a div, it’s gonna be display block. And that’s gonna be the only thing that’s display block. Well, it turns out that elements inside flex containers behave differently than they typically would in their normal behavior is. And so we’re seeing these things go side by side because they’re spans. So they’re inline elements, whereas down below there, the spans did not go side by side because they’re in a flex container.
0:34:46
So just set this to display flex. That’s really, that’s like probably is what is most confusing to beginners with flex box stuff. And then set the direction to column.
0:34:56
Yep.
0:34:57
Okay.
0:34:58
And then you could set, you don’t really have to set
0:35:00
the width at that point. Now there’s a contact, there’s another container in there with contact info in it, I believe. Contact info, okay. That heading right there, let me see down here, okay. So you had your link next to it. Let’s make that icon smaller too, because I hate the fact that it’s a giant star and that’s nothing like what we have down below.
0:35:28
So we can change it, I’ll change it real quick to this pencil as well. That’s good.
0:35:33
There you go. And then, so… Here’s the thing with icons. Let’s talk through this. This is only because Bricks didn’t do this properly. So this is not like how you would normally have to do this. And I’m sure Bricks will fix this at some point. So somebody watching in the future, this may not be necessary anymore, but Bricks does not respect classes on icons, okay?
0:35:57
It treats them all like you’re styling at the ID level. So there’s a workaround for this, right? So activate the class and click on the, okay we’re using an icon library, that’s another thing is SVGs are gonna behave differently versus icon library icons. But size we’re gonna replace with what’s called a locally scoped variable and that’s gonna be called icon size. So we’re just gonna go double dash icon size, hit enter, that’ll auto var it. Dash size. Yep. And then go to the color and let’s make sure that just choose any color just want to make sure it’s actually because okay good so replace that var black with icon color. Icon dash color. Okay and then what we’re
0:36:46
up there and go to custom CSS. And we’re going to do the root selector and then we’re going to define
0:36:52
those locally scoped variables.
0:36:53
Um, by the way, a little shortcut, you can, um, yeah, delete that real quick. Always seen you do this. I’m excited to hear. Yeah. It’s, uh, I do it by like, I don’t even do it by memory.
0:37:04
It’s like, uh, my muscle memory, R tab, sorry, R tab.
0:37:07
R tab.
0:37:16
There you go.
0:37:16
I was always wondering how did you type root that fast? Apparently it wasn’t.
0:37:19
So just do double dash and then icon size, icon dash size. And then now you can put whatever you want as the value. So you could use like this if you want that icon to be the same size of the text maybe try text M and see if that works. Okay is it double dash text M and then do the semicolon once you have the double dashes in there. Got it just like this? Yeah perfect. All right now just do one for icon color and it looks like that’s your action color, which is going to stay that anyway, but we still need to make these.
0:38:05
So, double dash action, yep.
0:38:08
Okay.
0:38:09
Now, I would hit save and like commit all of that.
0:38:13
Alright.
0:38:14
Now, we need to get the contact pencil next to the contact info up there and yes, we need it to be… So the contact info actually… Click on contact wrapper here.
0:38:36
Okay.
0:38:37
We’re one wrapper short. So we need to wrap contact info with a block. You saw the extra work we had to do with div to change it to flex and all that. That’s why I use blocks primarily.
0:38:50
Is there a reason then that you would, I mean obviously there’s a million reasons, but like, do you mainly use blocks then?
0:38:59
Yes, yes, I mainly use blocks. And I probably would recommend the beginners stick to blocks because the div thing not being flex is gonna throw them off like a ton. So I would just, if you stick to blocks, they’re gonna behave the same in all scenarios and it’s gonna be a lot easier for you. Okay, so the contact info, the contact icon wrapper
0:39:24
needs to be in that block with the contact info.
0:39:27
Oh, we gotta put this?
0:39:28
Yeah, drag that in right at the same level as contact info. Yeah. And that should put those side by side. Go to that block right there. Good. And display. So the flex is column by default. We’re just gonna wanna switch this to row,
0:39:46
but we’re gonna need to add a class to it real quick cause we forgot it initially. Yeah, this is another thing. Yeah, so like this is a good example. So we thought we had all our structure, obviously, you know, happens. So yeah, what is the absolute best workflow for this? So the absolute best workflow is don’t go back
0:40:04
to Auto BIM territory, don’t go just literally write the class right there. So just go hello card double underscore or yeah first you can name it instructor panel that’s fine whatever you want to do first. Okay. So I would call this so we name the other one contact info down there and click on that contact info, that’s like the label. Yeah, so I would change that to contact info label. So here’s how we can edit our little mistake here, right? Contact info label, now edit the name of that class to contact info label.
0:40:38
Right here. Yep, this is what’s great about Bricks, is being able to make these adjustments after the fact. And now that new block that we made is the contact info block.
0:40:50
Got it.
0:40:51
And now there’s going to be no conflicts because we already renamed the other class. So the class we’re about to give it no longer exists. So this is going to be hello card double underscore. And this is going to be contact info. Which you can verify right there. See it’s not auto suggesting it, does not exist. Even though it used to exist, it doesn’t anymore. Now you can put it on this thing safely.
0:41:16
Boom. And now Flex Row is going to put those things next to each other. Love it. And then you do a little gap and here’s the thing you need, you need like a barely there gap. You know, you don’t have to over-engineer this by going with content gaps or anything like that. Just go like 0.5 M, you know, like half an M.
0:41:33
Like if that does the trick, Hey, that’s all we need. You know, we don’t have to use tokens for everything. And then same thing as in that contact wrapper now or in contact info, whatever the, yeah, right there. You could put a little gap in there. Now here’s what I would recommend people think about too in these kinds of scenarios. There is margins that can obviously contribute to spacing.
0:41:59
There’s paddings that can contribute to spacing, there’s gaps that can contribute to spacing. The one thing that contributes to spacing that beginners always forget is line height, okay? And this is a situation where none of these lines need line height, none of them. But they all have it by default because they’re all body text,
0:42:21
they all have line height by default. So what I would do to be the most efficient way to do this possible is click on the parent element. So hello card. Even though all those things are in their own little containers and wrappers, line height is something that inherits down through any other child containers.
0:42:39
So yeah, you can just apply line height of like one here and see how everything just heightens up. Now, when you go put gaps in, you’re putting true gaps because there’s nothing else contributing to the spacing. Whereas LineHeight was just contributing invisible spacing that we didn’t even really notice. So now I would go into your header and now you’re free to use your gap
0:43:01
to get the perfect spacing that you want in here. Do you find though that like,
0:43:06
like you just said, there’s a lot of things contributing to that. Is there any, like what, what value does line height bring in most circumstances though, like as an example here?
0:43:18
Oh, so yeah. Well, in this example, it contributes nothing like, but problems. Right. It just contributes extra spacing that you can’t get rid of. There’s no, like, you can’t go negative gap. Like if the line height is creating space and you don’t want, you just, you have to get rid of the line height. That’s what’s, that’s the thing that’s contributing it.
0:43:34
Right.
0:43:34
So you look at a scenario like this and go, we don’t need any line height in this scenario. I want to control the spacing with purely with gaps, right? Or if somebody wants, the reason you wouldn’t want to do it with margin is because you have to apply a margin either programmatically or you have to apply a margin to every single element gap is far more efficient, right? So you get rid of the line height. Now you’re free to use the gaps. But if you’re in a multi paragraph or multi-line text situation, now you need the line height.
0:44:03
Because that’s what’s gonna be the space between lines of items. In a scenario where GAP cannot reach into that, a GAP can’t reach inside a paragraph, right? Only line height can do that. So that’s where you want the line height. In this situation, these are all individual elements, you don’t need the line height here.
0:44:21
Got it. And again, here, what can we do? I mean, you could do content gap divided by two, you could do 0.5 M, it’s really up to you at this point. If you want everything tied into the content spacing system, then I would just do a content gap divided by two. And the easiest way to do it is like, if you select the token, you can copy,
0:44:39
then you can write a calc and all this other stuff. Or actually just, let’s see if it works. Just put a slash two after that. Without, do it without spaces.
0:44:50
Without spaces?
0:44:52
Yeah.
0:44:53
I’m sorry, with spaces. That’s my dyslexia going. There you go. Now you have the calculator.
0:44:59
Love that.
0:45:00
Alright, so now I would do the exact… Let’s put your order one, or order minus one on the hello. Okay.
0:45:07
Hello there.
0:45:09
And on the class, we got a… That’s the, some people are like, what I would actually prefer is for Bricks to realize, hey, if there’s only one class on this element, let’s just select that class by default.
0:45:25
Yeah, I would, I would upload that.
0:45:27
Yeah, if there’s multiple classes, then it obviously doesn’t know which one we’re gonna want, but, and then, okay, just select the ID. But if there’s only one class there, let’s just go ahead and auto select that for the user. Okay then the contact wrapper or contact info whichever one is actually wrapping those okay just throw I would throw the same gap on on there. There you go and then the next one now there’s another way that you could do this programmatically once, so you don’t have to do it on every single item, but it’s probably, unless you want to go there and we can, we
0:46:10
can go there, but.
0:46:11
I don’t know how much time you got Kevin, I’m down for whatever, man.
0:46:17
All right, cool.
0:46:18
So now let’s just do the whole padding border situation and I think we’re, we’re where we need to be. So yeah, this is just a normal token situation. So go to style padding and select your token.
0:46:31
It’s medium. I would go L. L, okay.
0:46:34
Yeah, I like a little bit more breathing room.
0:46:37
And then let’s go to border. Now I know down here you made a utility class for your border, right? I did, that’s probably not the right way to put it. Is the concept that it’s like pretty much everything on the site is going to have the same border style?
0:46:59
I mean, at least on a dashboard, but yeah, I mean, I’m not a designer, so I figured like, yeah, that’s stupidly simple to just do that. So if I had those types of things.
0:47:08
This is what we’ve been contemplating in ACSS adding, because you know, we’ve added like BG dark, BG light, these contextual kind of like things. I think there needs to be one for border. Like a lot of sites just have a border style that they stick to, and they use it for pretty much everything, right? Or you could have a border light, border dark situation, where we would probably call this like a border dark
0:47:29
because it’s a dark color. So the way that I would tend to approach this is, is Bricks lacks a global CSS thing. And I’m about to say like, well, ACSS 3.0 fixes this for you. You know, but nobody knows that exists yet. So what I would, what you’re gonna need to do, Bricks, and this is why Bricks, all page builders make this a little bit frustrating. We’re gonna have to save what we’re doing here.
0:47:56
And we’re gonna have to go to a magic area. Okay, so I would in a new tab, just go to admin of this site. And then go to appearance. And this is, you know, if you don’t want to add a WP code box type situation or wherever, go to theme file editor.
0:48:15
Okay, yeah.
0:48:16
We’re just going to go to the child theme.
0:48:19
Yeah. Does this, what’s the difference between like doing this in the child theme here on the style versus doing their, isn’t there like a custom code section in this Bricks?
0:48:31
It’s only page level. It’s not global. So you can write CSS for that page, like custom CSS, or you’re talking about this section right here. Oh, custom CSS. Yeah, you could do it here as well, but this is not a code editor. I hear you.
0:48:46
I mean, neither is the other one. So both of them suck, right?
0:48:51
But this one is global.
0:48:54
Effectively you could do it here though, yes.
0:48:55
Theme style, obviously in the theme editor is global, but I know what you’re talking about. You’re talking about if you go here and you go up top. That’s just the page, okay, got it.
0:49:04
Yes. Perfect. I prefer down here, because this is actually a style sheet. It’s not being injected anywhere, and kind of like what it’s for. So now you’re going to do colon root and then you’re going to open your brackets after that. And there’s really two ways to do this you can it’s how
0:49:23
granular do you want to be but you could literally just write double dash border colon and put the entire border style that you want. So let’s say 1.5 pixels solid and then let’s choose a token. So let’s go var and I look like you had let’s go like neutral Trans 30 or something. We can always adjust this. Okay, really rough on this here
0:49:48
Dash before bar. No. No, you’re good. It’s a bar and then parentheses
0:49:52
Yep, and then in there neutral that neutral dash Trans dash and we’ll just start with 30 and see what that does. And then semi-colon on the end. And so now you’ve just created a token that basically houses, basically doing what your utility class did, but the difference is this is something we can assign to a custom class where that utility class is just being littered all throughout your website. This token is going to be assigned to any custom class that needs it, right?
0:50:25
So now that we’ve saved, we can actually go back to the builder. You’re gonna have to refresh the builder so it has access to that style sheet.
0:50:32
And let’s just try using the token.
0:50:33
So now you’re literally gonna go to the border and I think OA, see if Bricks complicates this. Border, border, good. It does complicate it because they give you all these granular inputs and we have like one actually there’s, I think there’s a workaround for this. Uh, there’s a little, there’s a little back door. Okay.
0:51:00
Click on color.
0:51:01
Oh, okay.
0:51:02
It’s a stupid, it’s a stupid thing to click, click raw.
0:51:05
Oh, I see.
0:51:08
And then just type border and it’s going to inject that where we need it.
0:51:12
With this, just like this?
0:51:13
Yeah, hit enter to wrap it.
0:51:15
There you go.
0:51:16
And save and refresh and see if we get what we want. This works for box shadows. I’ve actually never tried it with border, but I would think. I think I’ve seen you do it before, yeah. Yeah, I don’t know. Okay, it doesn’t look, let’s try it in custom CSS and just see if it’s working.
0:51:30
See if our token’s working. So just go root and then border, you know, border colon var border.
0:51:46
Look at that, I’m learning. There we go, and then close it.
0:51:53
And save.
0:51:54
And let’s refresh on the front end. You have to refresh because it’s pulling from the kind of like the external thing normally?
0:52:04
No, it should, I don’t know why it’s not working. You don’t have any caching or anything, right?
0:52:08
No, I don’t think so.
0:52:11
If caching could be a problem
0:52:13
with that child theme style sheet.
0:52:15
Let me share real quick. I’ll stop your sharing, let me go. We’ll just do a quick test on does this concept even work? So we’ll go to share screen desktop one. Okay. Here we go. I want just gonna quickly go like 300 pixels and 300 pixels we have a box and We’ll say box Okay, and then we’ll try this this way first. So let’s go to page settings. Let’s go to custom code Awesome. Let’s go to root
0:52:53
Go to border one pixel solid red. Okay, so we should have a token called border that we can use I’m gonna start in custom CSS root border This border. Okay, save refresh not there. Oh, no, it is there, okay. So inspect, there’s our border and it’s mapped to that value right there. And now what we’re gonna do is we’re gonna take it and now we’ll actually, yeah,
0:53:27
now I wanna test this out too. I wanna go to this border area and I wanna see if we can get it to work through the back door. Border, save, refresh.
0:53:41
Backdoor is not working.
0:53:42
Okay. Box, box.
0:53:46
Here we go.
0:53:46
Got to do it down here.
0:53:47
Order is equal to order. Save.
0:53:50
There it is.
0:53:50
Okay.
0:53:51
So I’m going to let you share again.
0:53:52
So I’ve, we’ve proven the concept of the token itself. Okay.
0:53:56
So I’m gonna let you share again. So I’ve we’ve proven the concept of the token itself Okay, is there just semantic question? Is there a difference between? variables and tokens
0:54:05
Now it’s um, they’re actually neither neither term is correct
0:54:10
They’re called custom properties in CSS And so custom properties is two words and it’s long And then nobody knows what they are like you like it’s like, okay, I don’t, I don’t get it. Everybody knows what a variable is across, you know, JavaScript, PHP, CSS, like a variable is a variable. And then a token is just a cute name for it. Like we’re tokenizing something. I use I use tokens, though, because non coders, I feel like, you know, the name makes sense to them a little bit better.
0:54:47
Certainly. Okay. Yeah, I mean, I don’t know what else you want to necessarily cover, but I do have one other random question, which may be, I don’t know, deeper or not, but I’ve seen attributes. I think I know you’ve talked about them. We’ve talked about them, everything, but like, how does this start to play into different things? And this says attributes, but again, the whole naming convention thing is a big deal, like we just talked about.
0:55:13
I’ve heard the term data attributes. I know you just said custom properties, like, I don’t know, high level, unlike when and if it makes sense to use like literally just this section of Bricks and kind of like, that is.
0:55:26
Yeah, well, actually, it’s like to help people understand, you know, like every, there’s a lot of things that you’ve already done or attributes, right? Like classes, for example. Like go add, just in that other box over there to the right-hand side, yeah, throw a text element in there. We’ll just play around a little bit here. Okay, go to add attribute, add attribute class,
0:55:50
and then the value, do your little border thing that, what was it called, thin border? That utility class you made, and then hit save and go to the front end.
0:56:03
Oh, cool. It’s got your thin border, right? So why would we do that? Right? Like what’s you?
0:56:07
Well, you wouldn’t want to but like go back to the front end and inspect it just to show
0:56:11
people what it did.
0:56:12
And this will actually help when you’re like maybe when you start to get into like, you know, JavaScript and things like that understanding what’s going on here. So that div has a class of thin border, just like you had applied it in the class area, right? Because that because the class that is an attribute. So now there’s, there’s different types of attributes, right? So now go go back to the text in the builder. And add another attribute. We’ll what it’s doing to build the HTML. So do aria-label and do you know test-label or something. Okay save, go back, inspect on the front end. And now we’ll see right over there div class equals thin border aria-label equals test-label.
0:57:04
And so anything that we put in there, now we can do a data attribute, for example. So go back and do a data, do data label color. And you can just make these, some you can make up and some you can’t make up. Class you can’t make up, like classes, it’s a fixed attribute, right? ARIA label, fixed attribute. Data label color, I just made it up. So make it red. Okay.
0:57:39
Now go to, yeah. Uh, go to custom CSS. Okay. Oops.
0:57:43
And do, uh, now we’re going to use brackets.
0:57:46
So open a square bracket, data label color equals, uh, inside.
0:57:57
Yeah.
0:57:57
Inside. Yep.
0:57:58
Equals quote red.
0:58:07
Single or double?
0:58:08
Double.
0:58:09
Okay, and then outside now, open your normal curly brackets and color red. Now the confusing part for beginners is, and we’ll see if this works on the front end, hit save and go on the front end and check it out. Okay, so it’s another way to target things. And then data attributes can accept dynamic data, right? So you can, if you’re doing something with custom fields and you need to pass that value into a data attribute and then do something with it,
0:58:46
like setting brand colors on things, um, like different cards. I did one a while back where the client wanted, uh, it was an e-commerce site and they were selling vapes or whatever. And it’s like, if this brand of vapes, we want the cards to be green and this band brand of vapes.
0:59:04
Okay.
0:59:04
So I passed the brand name to the cards in a data attribute. And then I did that statement that we just did, right. Targeting the data attribute. And I just set the background color based on those. Um, so it gives you a lot of flexibility. JavaScript uses data attributes to target things a lot. Uh, so it’s important to know that these things exist and that we can use them, but it also, you know, I, I think most people, most beginners don’t know that
0:59:28
like class, for example, is an attribute, right? So, um, they just look at things like ARIA labels and maybe data attributes and stuff like that. But really all those things in the line, the ID, all that stuff is an attribute.
0:59:40
Okay, that makes sense.
0:59:42
So then there’s particular use cases where like, I mean, you could, I guess, technically then do a lot of this stuff, like you said, with attributes, but there’s just no reason to, because it’s already. Yeah, because the current UI makes it easier
0:59:56
to do it another way. But this is kind of a backdoor. If you need something in the HTML, like, and you need an attribute that the builder doesn’t offer you, but the builder offers custom attributes, you can literally do anything you want.
1:00:10
Right.
1:00:10
Um, so it’s, it’s, uh, and that that’s, that’s another reason why it would be critical of something like, uh, Gutenberg, for example, like there’s no attributes. You can’t add attributes to elements in Gutenberg. So like, if I need to add those ARIA labels, what are we gonna do here? Now I gotta custom code my own block and all that other stuff, right? I don’t know that Elementor,
1:00:33
I haven’t been spending enough time with it. I don’t know if Elementor allows you to add custom attributes to things.
1:00:37
Yeah, I didn’t even really know what a custom attribute was back then, so I’m not 100% sure, but it does seem like if you were building a page builder, it’s kind of like a, at least a way to, like you said, give people the option to be able to do anything. Like if you’re, like literally,
1:00:54
if you just launched one tomorrow, like you could have only 20% of the UI complete, not complete, but you know, 20% of the options. And then as long as you have custom attributes, it’s like, yeah, it’s not easy, but at least you can do it, you know, through that. It’s kind of the way that I’m understanding it to some degree.
1:01:09
Yeah, well, and you know, with this, a lot of people I think will watch this and be like, I’m never gonna do any of that. And it’s like, well, actually you are. Like as you progress and get better and better, you are gonna do, like, just like I said, with the example of they wanted different brand colors on the different vape products or whatever, right?
1:01:27
There’s other ways to do that, but they’re really like janky ways. It’s like a, you know, duct tape together, a bunch of nonsense that people will do when they really should have used the data attribute. They should have known what a data attribute was, pass that value dynamically, where’s my phone, there we go, turn that off, pass that value dynamically into the data attribute and use the data attribute to target and style.
1:01:50
That’s what should have been done there, but because they don’t know about data attributes or they’re using a builder that doesn’t let them, they got to do some insane, crazy, juggling, you know, flaming hoops workaround that ends up being a maintainability nightmare later on.
1:02:05
Anything else you think we should cover? I think we covered a lot of my…
1:02:07
I think that’s it for I think episode number one and then maybe we’ll do… we’ll see what people think, you know, how helpful they feel this was and maybe we’ll do some follow-up episodes. I think it’s a lot of little stuff that like I can’t… you can’t cover in videos very well, like specific videos for things. It’s just a lot of helpful kind of random stuff, I feel.
1:02:31
Yeah, well, I’m obviously a noob, so I appreciate it, Kevin. Hopefully that my perspective on this, kind of like the back and forth, hopefully it helps some people because I know I got a lot of value out of it. So thank you again, man.
1:02:42
Sure. How are you liking the transition from Elementor thus far?
1:02:47
Oh man, I mean, I’m pretty involved with the community and it’s, it’s, there’s, there’s a lot there. I mean, just the last six months, it’s been, it’s been fun. It’s, you know, watch your content, watch everybody else’s and getting involved. Um, the transition itself, I think, uh, at least for me, uh, a hundred percent, no regrets whatsoever. And like I said, uh, maybe off camera, um, or off the call here to you earlier, it makes me feel more like a developer.
1:03:10
I really enjoy like understanding how all this works. It can be definitely overwhelming. I understand that. But if you understand sections, containers, blocks, divs, I mean, this is a bit of a stretch, but I feel like if you got that down, you could be a software developer, like an actual, like a, like an actual traditional web developer. So it kind of, to me, takes away the need. I’m still going to use page builders because like the same reason you do it’s
1:03:32
faster, it’s more efficient, but you actually understand the fundamentals. And if you understand the fundamentals, then that’s extremely transferable to other things. It’s learning buttons and whatever people decide to call other stuff, it’s a conversation for a different time. But it’s your, I don’t know, I like the knowledge. I really enjoy it, so it’s been great.
1:03:53
Awesome, all right, well this was fun. We’ll put it up, we’ll see what people think and we’ll go from there.
1:03:57
Sweet, appreciate it Kevin again. Thank you so much.
1:03:59
Thank you. Thank you.
1:04:00
See you guys.
