WDD LIVE 055: ACSS & Frames OPEN Q&A & Live Tutorials

0:00:00
Hello, everybody. Good morning or good afternoon, depending on where you are at today. Let’s see, got some good people in the house.

0:00:14
What’s up?

0:00:15
What’s up?

0:00:16
What’s up?

0:00:17
So this is, let’s go over the agenda for today. This is a pure Q&A live tutorial thing. We had a ton. If you weren’t here last week, we had, I think our peak viewers for that 3.0 live stream was 895, which is a new personal record of PR as they say, okay. But yeah, it’s just absolutely fantastic. We have a lot of new people interested in the automatic CSS and frames workflow. I’m getting lots of emails, I’m getting lots of messages. So I thought a good follow-up to that would be

0:00:52
to do a Q&A. I do a lot of these on the Automatic CSS channel, but I figured, you know, that’s mainly, I mean, if you’re subscribed to the Automatic CSS channel, you’re either probably a user or like very close to being a user. If you’re, you know, so if we do something over there, essentially, it gets less eyeballs

0:01:12
from the general public, right? And so every now and again, I think it would be a good idea to do a ACSS and frames related Q&A demo slash whatever on this channel. The way I do these Q&A is somebody can ask a question. And I mean, if I can just answer it, I’ll probably just answer it. But more often than not, I’ll actually demonstrate it.

0:01:34
I’ll show exactly how to do it. So if you are not a user of automatic CSS and frames, this is your opportunity to ask whatever questions you have about the products, the workflow, all of that. If you are a user and you’re new, this is a good opportunity to get whatever questions you have answered. And if you’re an existing user that’s been around for a while and you’re more intermediate advanced and you have an intermediate or advanced question, you can feel free to ask those also. It’s kind of a free for all.

0:02:05
It’s for everybody. The only thing I ask is that you use hashtag Q or hashtag question. That way I can keep them all organized and sorted. If you don’t put hashtag Q or question, it’s probably going to get lost. It’s probably going to get lost in the chat and it will not get answered. Let’s start out by giving a nice thumbs up on the stream. If you haven’t said hello in the chat yet, definitely say hello. You can start putting questions in right now.

0:02:35
We don’t have a lot of announcements or I do have one thing that I want to talk about regarding upgrades from existing versions of ACSS to 3.0. But other than that, we don’t have a lot of announcements. This whole thing is going to be based on your questions. Let’s get this in the right spot. Hello, hello, hello. Okay, is that good? All right, I think we’re good. All right. Hey from Florida, excited for ACSS 3.0, says Chris Mapes. Good to have you, Chris. We’ve got Calisthenics Ireland in the house, Maddy is in the house, Ross Vulkan Velocity Technology Solutions.

0:03:14
Grant is here. Team Keeley. Oh, that’s a good question. Somebody mentioned something about Generate and other platforms. I think, so I have a 2.8 version pulled up, I have a 3.0 demo pulled up, and I have a 3.0 dev that’s hooked

0:03:32
to the latest branch pulled up. I believe I can pull up some generate some oxygen, some breakdance even. So you know depending on the builder you use, I should have an environment that we could potentially use. I don’t have 3.0 and all those environments but definitely we can pull up some sort of environment and discuss what’s going on there. All right, Travis says hi from San Diego. Mark, here’s an example of a question that doesn’t have a hashtag, so I see it right now, but this needs to be hashtag Q, okay?

0:04:11
Otherwise it’s gonna get lost. But since I saw this one come up, I’ll just go ahead and answer it. Do you have a recommendation on a learning path someone should follow to start from scratch to learn ACSS, Frames, Bricks, et cetera, besides PB101? Besides PB101 is ACSS 101, which is starting roughly on April 22nd. I was a little bit aggressive with that date, but we’re gonna do our best to hit it. But

0:04:32
you can go to automaticcss.com slash 101 dash course and sign up for ACSS 101. There should be a banner at the top of the screen when you get to that site as well. Definitely, definitely, definitely sign up for that. Okay I’m gonna hop over and we’re just gonna we’re just gonna dive in with questions. These can be feature questions, they can be workflow questions, they can be builder questions, they can be specific frames questions like give me the name of a frame. Hey I’m trying to use hero echo or whatever and you know I can’t figure this out. It can be as specific as that or you can do general high level type questions.

0:05:16
It’s a free for all. It’s whatever you want it to be. Okay. Don’t be afraid to ask. Go ahead and get your questions in. If we are building a new site right now, is there anything to take into consideration for the new 3.0 global radius feature and deprecation of S, M, and L? I would use radius m, probably use radius m for everything and you should have a nice

0:05:48
streamlined switch over to 3.0. Now if you’re using, so just to be clear on an existing install and it would actually be good if I, let’s go ahead and we’ll start sharing because if I forget to share that will that will not be good. Okay so I am going to open this and let’s just go over to borders and dividers borders so right here you’re gonna see the border radius input and of course there is a border radius input in 2.8. Now if you go to additional radius options you’re gonna see the generate extra radius sizes. So how is this going to work? If you install 3.0 on a clean install, this is the first time you’ve ever installed automatic CSS,

0:06:36
this check, this toggle will be off the way that you see it right now. If you upgrade any existing website from 2.x to 3.0, this will be on by default. So the sizes are not just going to go away on you like if you’re upgrading a website. So if you’ve used L or XL or whatever it’s going to work. It’s all going to work. It’s going to be fine. It’s only going to be off if it’s a fresh install. So if you don’t want to use, if you’re like I’m on board

0:07:07
with just having radius that’s it. I’m on board with that. Then all you have to do is use radius M and then when you upgrade to 3.0 radius M will still work Even if you have the other even if you want to turn off the other sizes I think that’s how we’re setting it up. I think that’s how I set it up I will double check it, but I’m pretty sure that’s how it’s going to work and then If you want to just start using radius without the M at that point you can just use radius by itself as well Okay, hopefully that answers that question New generate press generate blocks user. How do I use a CSS there? Okay

0:07:42
Good question. This is where we’re going to see if we can get a generate install going which I need to Probably switch branches. Let me all right. I’ve got two screens so you can’t see what I’m doing over here So I’m not awkwardly just not doing anything. Let me fix this. All right. I have to switch branches and we’re gonna go to, let’s try build stable.

0:08:15
See what that does.

0:08:16
Okay, now let’s open generate and see what happens. Okay, so what is this? This should be 2.8.

0:08:26
Yeah, I got to get this other Ecamm live window off my screen.

0:08:29
Okay, so this is 2.82. What’s on this site? Okay, all right, good. So essentially what you see here is Gutenberg and there’s a bunch of nonsense on here. We’ll just start with this group which appears to be a heading, a paragraph, and a button. Actually that’s not even a generate thing. Let’s just go in here. Let’s add a container from generate and, oh god, I just love Gutenberg. We’re right off the bat. We’re just getting started with Gutenberg. Now one of these adds the container. There we go. Add the inner container, right? And

0:09:03
then if you switch this tag to section, you’re going to see that you get your default section padding. Now as we all know I would like it if generate would have an actual section element that would save a lot of hassle and time. Okay, but essentially when you install automatic CSS and generate press, generate blocks, you are going to have a very similar experience with page building. And I’ll say that there’s one caveat here. You’re going to want to take advantage of the new features in Generate, Blocks, Beta with the new class first workflow, 100%.

0:09:48
If you use that class first workflow, you’re essentially, everything that I teach in Bricks, it translates right over to Generate. Now without that class first workflow, you’re stuck using utility classes and variables for a lot of stuff. So you can come over here, for example, and by the way, you’ll get the class first workflow like the pseudo class first workflow from automatic CSS because we take that CSS box that’s in Gutenberg by default and we move it to the top of the block panel. So it’s easy to get to and when you right-click it you’ll have the context menus

0:10:23
available to you and you’ll have live preview right so I only have the action and base colors and all that but as you can see there’s live preview of all of your colors so if I wanted to say BG action I just put that on and now BG action has been put in that input box and I have a action colored background and so you just start using utility classes because if you don’t have the new beta that’s all you have available to you or or what you can do is you can grab that section right there and you can go down to backgrounds and then you can say, what, see I don’t even I don’t even use this very often. Use gradient, is that what we want to do? No. URL. Alright

0:11:04
so this is dumb, right? I’m looking for background color, okay? Which you would think is under backgrounds, right? But it’s not. It’s, I guess it’s under, there you go, it’s under colors. Okay, that makes a lot of sense. So, you can come down here, of course, Gutenberg’s color palette is, you know, leaves a lot to be desired, zero organization. But I think you can, I think you can use, there you go, you can use variables in here.

0:11:28
So any variables from automatic CSS for colors, you can drop into these inputs. Now the problem with this, obviously, is that you’re styling at the ID level, which not great, right? Not great. And this is why, you know, I was kind of hassling the generate community for a long time. Like, yeah, we shouldn’t be doing this. That’s not what we should be doing. We shouldn’t be putting, you know, styles that even though I’m using tokens, I should not be styling at the ID like this. And I shouldn’t have to use a pure utility class workflow. And so they put in the class first system and now all is well in the world

0:12:05
I am fully on board with using generate with their class first workflow and it’s going to be anything I do with bricks in terms of a tutorial and workflow you should be able to do that same thing now and generate so but it all works it all works it’s all great it’s all fantastic it gives generate a lot of new superpowers obviously just like it does every workflow. And it’s only going to get better in 3.0 because now you have the ACSS panel with you inside of Gutenberg as well. So everything is right there for you.

0:12:35
But yeah, that’s what I would recommend. Make sure you use the new beta with the class-first workflow. Do not style everything at the ID level. Do not litter utility classes everywhere. That is not the play. Okay, hopefully that answered that question. We’ll leave that available in case we need it again. In ACSS3, can the global SAS section replace WP code box

0:13:03
example for custom image size declarations? Custom image, no, because that’s not CSS. So setting up custom image sizes on a website is PHP. And so you’re gonna need a place to write that PHP. Now, do you need something as elaborate as WP code box? No, there’s a bunch of free options available for you for putting in code like that. I believe you can stick that

0:13:28
in the child theme functions.php file. You know, there’s a lot of places. So you don’t necessarily need WP code box. Now, anything you’re doing with CSS or Sass, you would not need WP Codebox for anymore. And just to let everybody know what he’s talking about, it’s this new global CSS area, and CSS and Sass area right here.

0:13:52
So all of that is available to you. Okay, if I finish one website and don’t need frames anymore there. Can I remove the key and use it on the next project so I’m not limited in the amount of websites? Okay, so if you are using the frames components like accordion, modal, all of that stuff, then you’re gonna need to leave the key in

0:14:18
and you’re gonna need to leave the install active because you you’re not going to be able to use those components without it. If you’re not using the components you’re just purely using frames once you import a frame to an install from the library it is owned by that install okay so if you’re only using the layouts then you could potentially remove the key at that point and take it to another site and then go do work over there and all the layouts that you imported and all that will still work.

0:14:54
The problem is when you go back to a website to iterate on it and you need new frames, maybe you’re gonna build a new page or a new template or something and you’re like I wanna bring in some new frames, you’re not gonna have the key anymore. Like you’re gonna have to put the key back in. You’re just gonna do this juggle, do this dance.

0:15:10
And you know, let’s go look at, you know, the question is, is it worth it? Is it worth it to do this dance with the license keys? Okay. You get 15 sites for $99 a year. I mean, these are inconsequential prices. $399, I know everybody can’t swing $399, but that is the LTD. You’re going to get 100 installs, and then you wouldn’t have to worry about it, you know for a very long time unless you’re very successful and if you’ve got a hundred clients

0:15:42
You’ve got plenty of money. You should have you should have plenty of money Now like I would say, you know this right here if you’re sure if your cash flow is tight, right? The $99 15 what you shouldn’t have to do a lot of job And again, if you have 15 clients like legitimately if you have 15 clients like and you can’t swim there’s something else wrong there’s something wrong with your pricing or your personal finance operating something’s wrong if you can’t afford $99 after you’ve done 15 client projects that that would be an issue right so I to me the price is inconsequential you shouldn’t be having to do this dance with like license keys and things like that just

0:16:20
get the appropriate package and you’re good to go Let’s see, what is the best way to style a frames element? Well, come on, you can move the add to broadcast label. Okay, what is the best way to style a frames element? Should I create a new custom class name and use it alongside the existing class or just do the customizations on the default class name? Very, very, very, very popular question.

0:16:46
I’ve answered it many times before but we’ll go over it really quick again. So I’m going to go ahead and edit this page with bricks. Okay now we will import a new frame. So I’m going to go to frames. We also just added this by the way. I didn’t think this got into the 2.8 version. I don’t know why am I seeing this but anyway it’s larger. I can’t keep track of the features now. What version are they in? I don’t know. I don’t know anymore. But we have this nice wide screen layout now and extra column on wide screens for browsing and navigating all of this

0:17:29
stuff. Let’s bring content section pop it in which is this one. I was already using it on that page but whatever. So what I would say to do is not what I did on this website. When you import a frame like this, you immediately are going to want to make it yours. And again, this gets us into the discussion of BIM and what do we target for renaming and all of that kind of stuff. So you are going to try to find, the more you know about BIM, the easier this is, but you’re going to try to find the BIM blocks, okay? And you’re gonna auto BIM those BIM blocks.

0:18:06
This is gonna help you with just efficiency and making this yours so that it’s not really from the library anymore. And so we see right here that there is a BIM block called intro alpha. So I would immediately click that and I would just call this my main intro or centered intro. Like find a naming convention that you like.

0:18:27
We all know naming things on the internet is hard. You could do intro, but it’s like what kind of intro is it? I mean, you could do section intro, centered section intro, whatever you feel makes the most sense to you, right? So I’ll do like centered intro, because it kind of describes what’s going on here. This is the centered intro. But then, you know, there is a question of like,

0:18:48
is it always gonna be centered? Like what if we decided not centered anymore? Is that name gonna make sense? Well, I mean, at that point, you could rename it again. Or you could just say, all right, you’re right. We’re just gonna, this’ll be like our main section intro. So I’m just gonna do that, and whatever it happens to look like,

0:19:01
that’s what it happens to look like, but I’m describing it as the section intro. This is why naming things on the internet is difficult, right, and we can go through all these different edge cases. And I’m just gonna use rename classes, and then it’s gonna say section intro heading these are the children that are inside of here they’re gonna be renamed also okay and then I’m also going to sync labels because I don’t want them to say intro alpha when I just

0:19:23
called it section intro okay so I’m gonna ask it to sync my labels with the names that I just gave it and I hit apply classes and now that section intro is totally mine okay then what I would do ideally because it does this doesn’t exist in my library yet, so I would right-click it and I would say save as template and then I would save it to my templates and it’s gonna save it as section intro. And now when I go to a new page I’m gonna import section intro wherever I need it. Okay, alright, so that’s how you do that. Then you’re gonna notice content section Papa has an inner that this is not another block. This is an element child all of these

0:20:05
Appear to be element children as well because they all use the block name in them Content wrapper content all of these use that and so Section I can just come up to content section Papa at this point and hit auto BIM and look what it said Well, look what it’s doing It’s avoiding the section intro because it knows based on the names that doesn’t appear to be part of this situation that’s going on here, right? But it is going to rename everything else. And so I can call this whatever I want. Now, again, you’re getting into this like, I gotta I gotta come up with names for all of

0:20:38
these things. You know, that’s just life. It’s life in development world. Okay. So we’ll just call this like, you know, basic centered layout or something. I don’t know, come up with your own names. I’m just doing this on the fly. Sync labels, apply classes, and then there you go. So this whole frame now is literally mine. It’s called basic centered layout. It’s got a section intro in it and all the classes are renamed and everything is good to go. That’s how you use the Auto BIM tool. That’s how you make everything exactly yours. And then what this allows you to do is if I wanted a fresh copy of that frame. So you can leave all the frames alone.

0:21:17
Like if you don’t want to rename them, if you don’t, you can do, you don’t have to, you don’t have to, but by renaming them, what this gives me is the power to go to the frames library and get a fresh unstyled copy of that frame if I want to. So it increases your flexibility, right? If you don’t want to increase your flexibility, you don’t have to. But if you want to increase your flexibility, then you can do the process that I just did. Some people just use the frames as they exist.

0:21:47
They never rename the classes, and all is well in the world. It doesn’t matter. You can use it like that, absolutely. But some people tell me, they’re like, Kevin, I want the frame I styled, and I want to be able to use that, but I want to be able to go get a fresh copy of it any time I want. If that’s you, then you need to rename the classes on import. Okay? And by the way, you can’t, this doesn’t work in any Brics install with any template library. This is only true for frames. Now why is this only true for frames? Let’s go to this dashboard, this is the probably the easiest one to see.

0:22:18
Oh this is the, oh that’s old school, old school. Okay, let’s go hold on am I am I the right ones let’s let’s go here let’s go here let’s go here mm-hmm okay 3.0 demo that seems like it should be correct but let’s test it too many sandboxes too many sandboxes visit site okay hmm it looks old this looks old to me why does this look old hmm 3.0 public demo sandbox that’s probably what I wanted the public demo sandbox naming things on the internet remains hard even with sandbox sites there we go okay this is this is the correct one. All right. So why is that only possible if I go to options and I go to Builder enhancements you’re gonna see this little setting that says import original classes bricks remote

0:23:26
Templates on okay. This gives you the ability to import After you’ve renamed classes because the way bricks works. It doesn’t actually use the class name at all. It uses a hidden ID behind that class name. So renaming the classes actually does nothing. If you rename the class and then import a frame, even though you rename the classes, it’s gonna import the styled version of that frame. And people are like, ah, that doesn’t work for me,

0:23:53
I need a fresh copy. So we built this feature in to basically tell Bricks, hey, you need to look for that ID, and if that ID already exists, you need to like spin up a new one for that frame and that’ll give us a fresh copy. That’s only when you use our tools that’s not using anybody else’s tools okay so that’s unique to automatic CSS. Okay that was a long answer. All right interested to know when the

0:24:20
frames menu builder is due to release. We haven’t even started on it. We got 3.0 to do all hands on deck for 3.0. We’re going to start on it when 3.0 is released. Okay, we did that question right there. Would it be possible to review content grid with the values content start full etc? Yes, yes, anything is possible. The question is what context do you want to do it in? Because this site right here already has a post, for example, that uses Content Grid. And I already showed, let’s just do this. Let me show you how Content Grid is set up for a blog post.

0:25:05
Because this will be good to talk about. Now, keep in mind, I’m gonna do a whole video on Content Grid. But let’s go ahead and do go to Bricks templates. Let’s take a look at this blog post template. Because how you set up content grid is extremely important. You have to understand what content grid is attempting to do and how it’s structured. Okay, so to make this even clearer, I think we

0:25:33
can go to populate content and we can go to single post page and we can, not the home page. Okay, Bricks. It only gives me this. I need to search for an existing post, but if you don’t know the name of the post, you’re a little screwed. So let’s go, what is the name of a post? All right, the story of how we met.

0:25:51
Oh, isn’t that cute? All right, there we go. The story of how we met, apply preview, and now it should actually preview what we’ve got going on in the builder. Okay, fantastic. So you’re gonna see, I’m using, this is a frames blog post template. And so blog post body alpha is the frame.

0:26:10
And this will be set up by default if you import this frame from the library, assuming you’re getting a fresh copy. It’ll all be done for you. But if we look here, we see that we have the class content grid on the post content element, okay? That is critical. You cannot put content grid. Now with normal section content, you put content grid on the section. Okay? But a blog post

0:26:38
template is different and it’s different because of its dynamic nature. So let me go to the front end of the story of how we met. And if you look at the DOM, it actually makes more sense in this regard. Is my head gonna be in the way? Let’s go ahead and put this on that’s my head is even worse in the way. How about we go to the right side? Okay that looks good right there. All right so we have the section right here and then we see the div inside of the section and then all of our content. Now what is this div? That is the post content block. This is the thing that needs the content grid to control the children that are inside of it. The section can’t control the children because there is a

0:27:23
there’s a single block inside the section that is dynamically pulling in all the content here. Okay so you have to put content grid on the actual post content element which is a module in Bricks. It is this module right here called post content. It’s what dynamically pulls content from Gutenberg. This is the thing that needs content grid on it right here. The section itself doesn’t need anything, okay? If we look at what I did here, layouts, I went to zero padding left and right

0:27:56
because content grid has its own gutter. You need to understand that. So content grid has a gutter in it. So the section if there’s something content grade in the section the section doesn’t need a gutter Okay, but I did leave a little bit of top and bottom padding in that section to keep space away from the section above Okay, so that’s how that is set up Once you put content grid on the section or on I’m sorry on the element Whatever you need content grid on the rest is done from a child perspective so you go to child elements and tell you assign them to different places okay so since this is

0:28:34
dynamically pulling from Gutenberg nothing else gets done here I do want to say one more thing fr-post content is that where we did you can control okay this is important let’s close this see how this is a narrow centered column of text, that’s because Content Grid centers your text, just like a section container would do, okay? You have control over the width of that content. By default, it is your website’s content width. That makes sense, right?

0:29:06
So if you put a section, a normal section that uses containers, and normal section padding, section everything, next to a section that uses content grid they will look exactly the same. You cannot tell the difference looking at them between the two. In fact that’s why you can actually now in 3.0 you can go to spacing and you can go to section spacing or where is it I’m sorry it’s in layout and it’s under content grid. You go to the actual content grid section and then you can say default sections to content grid.

0:29:39
This will make every section on your website by default use content grid out of the box. And again, you won’t notice a difference. There will be no difference in what you see, only a difference in how the sections behave and what you’re able to do with them. But if you want them all to be content grid by default, it’s a simple toggle now in ACSS 3.0.

0:30:01
Okay, so now we’re gonna go to edit post. So we’re gonna see kind of what we can do here. And this is, you know, there is, there’s some beginner’s level stuff here, and then we can get deep. You can get deep in the weeds. We’ll try not to get too deep in the weeds. There are a couple utilities.

0:30:14
I’m gonna take them off of here for right now so that we can kind of start fresh. There’s one on this gallery. There’s a couple utilities that you can use to assign things to different places. Now, you’re a little bit limited in Gutenberg because there’s no grid controls in Gutenberg. So that does limit you a little bit

0:30:31
over doing this in Bricks. So you’re gonna be sticking to using utility classes essentially in Gutenberg. Okay, so let me refresh now because we’ve taken classes off. So what you see is everything in the container, everything in a line. Oh, and I never even explained, let’s go back.

0:30:56
There is, obviously the content width is controlled by a variable called content width, right? If I take this off, it’s gonna be the content width of the website. If I change the value of the variable on this element, I can make it whatever I want. In this case, for this blog post template, I said I want that center column to be 60 characters wide.

0:31:19
And now it is. But if I took that off and you see the default, the default is the content width of the website, which I think is 1366 on here. Obviously, not great for a blog post, right? So you come in and say, ah, I wanna override that and I wanna change that value to this and now you have the new value.

0:31:37
Okay, there’s the explanation for that. Sorry, there’s a lot going on here. Okay, so we’re going to go to the image. Content Grid uses zones to assign content to and the they start with the word content, right. So if you say feature, we’re going to update this and then we’ll just refresh. And that went into the feature zone. Okay, so it broke out outside of the rest of the content, right? Now it didn’t really break out.

0:32:04
We used to use that word breakout because the thing was literally breaking out of its parent container. But in Content Grid, there are no parent containers. There’s only zones in a grid. And so you’re not actually physically breaking anything out. You’re not violating any other boxes, as you will in a true breakout scenario.

0:32:22
So it’s very, very clean and it’s actual correct behavior of these elements. Now, if I come down here, I can see that on my gallery, I could try a different one, which would be feature max. So there’s a feature zone, there’s a feature max zone. Let’s see what feature max does. So we’re gonna come down here, we’re gonna refresh, and that is this gallery. And you can see that feature max is wider than feature.

0:32:46
Okay, so there’s two different zones there. Another thing that I wanna point out, You also have a full width safe zone which has a gutter inside of it. It protects the gutter. And then you can do a custom width on anything as I showed you with the blog post template by overriding the content width variable. So those are all of your options right there. Not to mention that content grids can be nested in other content grids. So essentially let’s try to do this. Let’s see if we can do this in Gutenberg.

0:33:40
I’m, again, I’m not a Gutenberg. I don’t enjoy Gutenberg a lot, okay? But we’ll see if we can get this going, right? Because Gutenberg has some other issues, especially with the group block especially. And if you choose row stack, the behavior, the things just change, none of it makes any damn sense. But let’s put a group in here

0:34:02
and just see if we can get something going just to kind of demonstrate something. So we’re going to do heading. I’m also, you don’t have all the controls that you have when you’re in Bricks and that’s another limitation, but we’re going to do our best here. Okay, so heading is going to be, this is a test. I’m going to say that this group is a, okay, let’s go content full, and let’s just see what that does first.

0:34:30
But let’s also go with like BG action. Do I have, let’s see, class, right click, BG, okay, I don’t have action on this. Let’s go ultra dark, let’s go ultra dark with that. Okay, I just wanna see what this does. Now the other challenge here is I’m not previewing really in Gutenberg, right? So I can only see what I’m doing on the front end.

0:34:55
Let’s see what that did. So we’re gonna go here and we are going to refresh. So essentially what I just did is I got a full width group because I assigned it to the full zone. Full goes all the way across, right? And the good thing about content grid is where a breakout, a full width breakout in some browsers can cause an overflow Content grid will never cause an overflow

0:35:19
So that’s another kind of benefit of doing that now We’re gonna go back here, and this is just now you will be able to preview this in Gutenberg in 3.0 Okay, we added some Gutenberg controls for doing this, but I just don’t have it set up right now Let’s do a pad section M as well. And now let’s go check out what that’s doing on the front end. And effectively I just got like a full width section

0:35:45
that I can use because I have a gutter now and I can put whatever I want in here. And so even though this was what I was kind of describing the other day, where I have a blog post template that appears to just be like a center column thing, but because it’s built with Content Grid, I can literally clear out all of this normal blog post content,

0:36:06
and I could just do this kind of grouping scenario, like a normal page building scenario, and build a full custom page. And you would never know that you’re looking at a blog post template that started out as a narrow center column. And it’s really, really, really fantastic. Now if you put another group inside of this with with content grid you should get back to the narrow column

0:36:26
But within this group, let’s see if we can maybe maybe make that happen Okay, so let’s put a group in here and I have to think about how Exact I don’t do this a lot in Gutenberg So I got to put some extra thought into this Not to mention the stupid structure panel things never go where you want them or need them to go Okay, let’s put the heading inside that group right there. Okay, so we’ve got our group here, content full. So what I’m gonna do is actually put content grid

0:36:56
on that group as well. And then we’re gonna see what that does to this group. Let’s go ahead and update and refresh. Look, now look, I got the full width outer thing going on, but my inner stuff, because I put a content grid inside of a content grid, it’s back to centering all the content in that particular group. And so this content is in perfect alignment

0:37:21
with this content, even though what appears to be happening is like a whole full width section kind of thing. And you can just keep layering this if you want to. I can now, inside of this group, have access to my feature and feature max zones. Okay, like there’s no limitations. It’s just really, really, really powerful. Okay, that’s just a little taste

0:37:42
of kind of what’s going on there. But I think if you just use your imagination, like you would never be able to do this, like it would just be a tremendous hassle to do this without Content Grid. It just, it opens a lot of possibilities. And by the way, I can’t see the chat while I’m looking at all this list of questions,

0:37:59
so I have no idea what you guys are talking about or saying. I’m not ignoring you, I can only look at one thing at a time. All right, let’s get on to the next question. If you do throw thumbs up though, I can see those pop up, so if something good is happening, you can use those. Let’s see, interested to know, all right,

0:38:18
we did that one, did that one, did that one. How would you go about doing a vertical two column tabs button tab content setup. Does it require the use of the content anywhere feature? No, it shouldn’t require the content anywhere feature. Vertical two column tab buttons tab content setup. Vertical, you just want vertical tabs? Is that all you’re asking is for vertical tabs?

0:38:45
Let’s see. So section, okay, let’s go here, let’s go tabs, tabs, frames, tabs. Let’s see how easy or not easy this is. Tabs, navigation, I think we have, I thought we added. This is harder for me, because I don’t use these all that often, and I didn’t build them.

0:39:06
But we’re gonna see if we can get this going. So vertical, right? Okay. And so that puts our navigation vertical and then we have content for tab one. Here’s our container. Okay, we probably shouldn’t need anything related to the container. Grid layout. Let’s go with like grid one, two, maybe. Okay, you All right, it’s fairly, seemed fairly easy. Let’s go to preview on the front end. And there you go.

0:39:44
Now you gotta do your colors and styling

0:39:45
and all that stuff obviously, but I have my vertical tabs and they’re working. And this is gonna rely on any grid structure you put in. Which by the way, you don’t even, I use a, let’s go back to grid layout. I used a grid one two. I mean, you could literally do anything you wanted to. You could say 25 characters, 20 characters,

0:40:11
16 characters, whoops, don’t want that twice. So something like that. And then you could say min max zero one FR for the second column. And now what I have is, well, you can see the structure better here. So that’s a much narrower left column based on, you know, the max allowable number of characters. And then you have all the right side for for the content. So just showing you that you can really, you can put any grid recipe in

0:40:43
here that you want or structure in here that you want. But to just reiterate what I just did, I switched the nav direction to vertical and then under grid layout, I just made myself a little two column grid of any desirable structure. And there you get vertical tabs. So pretty easy, pretty easy. Let’s see. Do you recommend removing CSS classes? If yes, can I do that automatically? So what I recommend doing, this is, this is, and this is every single install that I do, every project that I do. It’s a really good question. The thing is, is we shouldn’t, you should, let’s start from the beginning. Okay, let’s start from the beginning. I think we can, we can do it here. So let’s say this

0:41:35
is a brand new project, right, that I’m starting, I’m gonna immediately go into options. Now I do this on my blueprint so it’s already done for me, right? You don’t do this every single project. You go watch my video on creating a blueprint and once your blueprint is created you just duplicate your blueprint anytime you need a new project and everything is set up exactly the way that you want it. So I’m gonna go in, by the way, how many are you watching? We have 238 people watching. This is fantastic. This is fantastic. Okay, so I’m going to go into utility classes. Now first thing I would say to do, and I know the name of it, if you’re a beginner or you’re

0:42:09
new, the name of it might be a little bit intimidating. So we’re going to talk about exactly what it does and what’s going on and why I recommend this. I go in and turn on pro mode. And if you watch the toggle switches, okay, when I click pro mode, all it’s doing is turning off a predetermined set of the utility classes in the framework. Now, what happens when these get turned off? It doesn’t delete all the classes from the database.

0:42:39
Okay, when you install Automatic CSS, it takes all the class in the framework and it puts them in bricks so that they’re all available in autosuggest and all of that, which is good, kind of, for a beginner, because you expect everything to be there, so it’s all there. When you turn something off,

0:42:55
whether you’ve used the Pro Mode switch, or you just manually go in and toggle things off, two things happens. One, it removes the classes from Auto Suggest. So when you’re in the Builder, and you are looking at classes that are being suggested to you, it’s not going to suggest ones that are turned off because they won’t work.

0:43:17
So it makes sense to not suggest them either. So they’re not going to be suggested. And the reason they won’t work is because we take the styles for those classes and remove them from the style sheet. So even though the class name is not removed from the Bricks database, all of its associated styles are removed. So the style sheet just got smaller, right? So if you start with a big style sheet with all things turned on, as you turn things off, whether they be classes or colors, I turn colors off, the style sheet, giant chunks of the style sheet, I’ll probably do a video on this, disappear, okay? When you turn something off. So if you just literally went in and turned everything off you would have a nearly empty style

0:44:04
sheet. Then you start turning things on and it’s gonna build a style sheet for you based on the things that you’re turning on right. So you have full control over the weight of the style sheet. It’s as efficient as you want it to be or as inefficient as you allow it to be. Now if I go to back to options here I’ll show you what I do. Under utility classes I have promote enabled but let’s talk about some of these things that remain on. Accessibility classes things like clickable parent, focus parent, all of that. Typically those things you don’t know how to write them with custom CSS and there’s no single variable for them.

0:44:43
Now there is recipes coming for them so that kind of changes the game a little bit here but generally you’re gonna want those utility classes because it makes life very, very easy. And not a lot of weight is associated with that particular feature. So leaving it on just fine, right? Now we come into section padding. Section padding like, you know,

0:45:05
section padding L, XL, XXL, make a section bigger, make a section smaller based on its padding. Very helpful to use utility classes and not a problem to use utility classes okay see we use BIM for a lot of stuff the idea of turning off a lot of utility classes is automatic CSS let’s be very clear about this automatic CSS is not never has been never will be a utility first framework it is not like tailwind it is not like bootstrap it is not like utility first frameworks it is a BIM based

0:45:42
framework primarily okay that means you’re using variables and custom classes primarily and then you’re using utility classes for get this for utility the word it’s in the name okay I don’t know when we got the idea to use that utility means everything okay but we’re not using utility for everything. Okay, we’re using it for utility like clickable parent Complex thing that to make a card clickable the right way if I can just pop on a class and it happens magically Way better right way better. So that’s a good utility class changing the section padding on the fly because Take this

0:46:22
Take this section. For example, if I wanted more white space in this section Does that mean I want more white space always in this particular layout not necessarily Just based on what’s around it and different things on different pages might be around it Therefore I might want it to behave differently in different instances and that means a utility class is a really good approach So I would leave these section padding classes on because changing section padding on the fly is very common and does not need to be BIM. You don’t need to use BIM for that. So let me go back here.

0:46:59
Section padding we did, text color, link color. Personally, I also turn these off, okay? So pro mode is like, I would even say semi-aggressive with like getting rid of utility classes. I am hyper-aggressive with getting rid of utility classes I just know I’m not if I need to change the color of text I probably already been the thing and I’m gonna use custom CSS or whatever the the builder style panel whatever I want to do okay so I turn those off now if I get into a

0:47:28
situation where I need one of these all you have to do is do that and it’s back it’s done okay you can always get it back and it’s never it’s never gonna be a problem, okay? You can always get it, even if you break something, just come back and toggle it on and be like, oh shit, guess I can’t turn that off, I already used the things. So it’s really not an issue doing this. You can do this willy nilly, play around with it,

0:47:48
you’re not gonna break anything here. And if you do break something, just switch it back on and it’s back to normal, okay? Overlay classes, might leave those toggled on, okay? But if you’re not gonna use overlays on the website, then toggle it off, because you’d just be loading code for no reason right if I’m just like you know what this site does not use overlays okay

0:48:07
then we’re turning them off opacity do I need opacity classes me not personally so I turn those off breakouts nope I have content grid now I’m gonna turn off breakout classes I’m not gonna use those position classes almost everything I do with positioning involves a custom element with a BEM class I’m turning that off flip do I need to flip any images on here? Let’s look at what flip actually does. So let’s go, let’s save that for a second. And let’s go edit with bricks.

0:48:36
Come on, buddy. Okay, this is InstaWP. It’s a little bit slower on the save functions here. Let’s take this image right here, okay? All right, I’m gonna go flip and I can just say X. You see what just happened to her? Now she’s facing the other direction. Hey, that’s super handy, right?

0:48:54
If you don’t know how to do that with CSS, I mean, that’s super handy. Like if you’re just like, I want to flip that. And actually, I wish I could,

0:49:02
I don’t think there’s a way to do it quickly.

0:49:04
But if you have text inside the container where you’re flipping something, automatic CSS is intelligent enough to flip the image or the media and not flip your text. That’s pretty cool. I don’t have the situation set up where I can show you right now, but it does do that. But let’s say we wanted this girl to look the other way, right? Or maybe we wanted her upside down. I don’t know why you would want to do that, but there’s all of your flip stuff. This is not a large part of the framework, but if you never need to flip anything, if you’re like, I’m not

0:49:35
flipping anything on this website, then go ahead and turn it off. Okay, so we can go back to options here, utility classes. And notice I’m in the builder now doing this, right? Cause I have a real time dashboard. So I don’t need to go back to some other place to do it. I can just do it from right here. So flip, I turn flips off. Okay, so flip is gone.

0:49:54
Cause I also know how to do it with custom CSS. I don’t really need the utilities to do it. Some of this stuff is going to be based on your experience level with CSS in general and whether or not you truly need a utility for it. Height utilities can be you know pretty handy and there’s not a ton of them so you can leave those on very lightweight. Grid, grid is one absolutely all day you’re gonna probably want those to stay on. Variable grid, absolutely the only way to do variable grid well you could do it a little bit with custom CSS,

0:50:26
but variable grid utility is very helpful. Very lightweight. I think variable grid is like eight lines of code total. Okay, so variable grid, very lightweight. Flex grids, not lightweight, not lightweight, but insanely helpful. If you’re the kind of person who likes centered item grids, okay, you’re gonna wanna use flex grid.

0:50:49
You have to use Flexgrid. This is something that most frameworks don’t even have, okay, and I’ve demoed this plenty of times. But if you’re not going to use Flexgrids, highly recommend you turn them off. They are a little bit heavy. They are on the heavy side, okay. There’s a lot going, Flexgrids are very complicated.

0:51:08
So there’s a lot going on there. If you’re not gonna use Flexgrids, definitely turn it off. GAP. GAP, super handy, super handy. Now, less handy now because we have contextual gaps, which is like container gap. That’s not what this is talking about. This is like Gap S, Gap M, Gap L, that kind of thing.

0:51:27
Those utility classes, I don’t really have a need for them. So I personally turn it off. They’re lightweight. If you want to keep them on, keep them on. All of this is up to you guys. All of this is up to you. I don’t use Flexbox classes at all. I do all of that with BEM, so I turn those off.

0:51:44
Width is handy. I leave those on. Radius, don’t really need it now because of the new radius system, which is much more streamlined so you can probably turn those off. Aspect ratio, I do every all aspect ratio with BEM, so I turn those off as well. Z-index, I do all Z-index with BIM, so I turn those off. I told you, I’m hyper, like I only use utility for pure utility, stuff that is a pain in the ass, right, otherwise.

0:52:12
Columns and masonry, I do leave those on, because columns is a pain in the ass. And masonry, pain in the ass. Way better to have utility classes for doing that stuff, or now in 3.0 recipes. Marker, hardly ever use marker styling. So I turn those off. That’s list styling, like changing the color of bullets and things like that. I typically turn that off until I need it. If I run into a situation where I need it, I just flip it on, but I start with it off.

0:52:41
Same thing with display. I start with that off. Visibility, I use visibility classes sometimes, but I start with them off. And then when I decide I need them, I just quickly flip them on. Corner ribbons, if I need corner ribbons, they’re a pain in the ass, so I turn them on, but very few sites I build use corner ribbons,

0:52:59
so it’s like they’re there when I need it, but I leave it off until I need it. And then contextual color classes, I turn those on. Okay, so that’s kind of like my setup. And so very lightweight, now you can make the framework even lighter, okay? So what we’re gonna do is we’re gonna come over here to color palette. You should not have colors activated that you are not using on the website.

0:53:25
Anytime you turn on a color, you are essentially activating, unless you’ve turned off the classes for them, background color classes, overlay classes, button classes, link classes, colors, anything that has a color is mapped to a color being turned on or turned off. So you better be using that color if you’re activating it. Now within that color, you have all your transparencies, right? And if you decide you want to turn off all transparencies, you can do that. That makes that color a lot lighter. All the overlay classes gone now because overlays require transparency. So those are all out of the mix. A lot of stuff related to transparencies is now gone. You could say, I want my main transparencies,

0:54:09
but not the others. It’s any combination of what you want. What did I say? The framework is as light or as heavy as you want it or need it to be. And if you need it to be, then it needs to be. That’s it. It’s just life.

0:54:25
That’s just life. But it gets almost empty. If you turn everything off, it gets almost empty, almost nothing, okay? So I have a lot of colors turned off here. I’m not using semantic colors on this website. So guess what? They’re all turned off.

0:54:39
Okay, then we go into buttons. Here’s another area right here. Buttons are, they’re lighter now. I made the, I refactored buttons and made them insanely lighter than they used to be so they’re not too heavy But if you have lots of them on that you’re not using then yeah I mean you are you are using you are loading a bunch of code that doesn’t need to be there But we gave you controls for all this stuff. You can turn off the button itself. I wouldn’t turn off primary

0:55:07
That’s always one you use primary and secondary are on by default The rest are off by default Unless you have an existing install that turned them on. So if you see here, I believe action black, white, those are all deprecated. So I’m going to go over to deprecated and under deprecated buttons, you can see them right here. So I turn them off and say save. And then I’m going to go back to the buttons area and you’re going to see that they’re

0:55:33
gone, right? So I go to buttons, they’re gone and the code for them gone. All right. So I’m only loading code for two buttons. Now, question in my button with primary. Am I using solid buttons? Yes. OK, I need to load the code for that.

0:55:50
Am I using dark buttons? Maybe not. Am I using light buttons? Maybe not. Am I using outline buttons? Maybe not. So what would I do in that regard? Go into primary and say light dark variance gone

0:56:03
Outline variance gone hit save and then I go back and I’m only going to see my controls Actually, I didn’t even need to save really But I’m only gonna see the controls for the solid button and I’m only loading code for the solid button that code just got Insanely smaller and more efficient. Well, like I said, it’s not really a ton, okay? Like compared to FlexGrid. I think FlexGrid’s like one of the standards of like, wow, that like FlexGrid is a little bit heavy because of all that is required.

0:56:34
So look, you can tailor this to whatever you need. That’s really your job here. It’s not like install ACSS, build a site and not worry about what’s being loaded. Like definitely you should worry about what’s being loaded. Now, do we have a just-in-time compiler? No. Why don’t we have a just-in-time

0:56:52
compiler? Because they break shit. Now if you’re if you’re building a site in VS code from scratch by hand using something like Tailwind or whatever and that’s your unified development environment and there’s not a lot of other stuff going on a just-in-time compiler is great and it’s it’s accurate and it’s fantastic. The minute you get into a WordPress situation where we’ve got shit everywhere, we’ve got JavaScript snippets living in page builders, we’ve got JavaScript snippets living in WP CodeBox,

0:57:25
we’ve got PHP snippets over here, we’ve got CSS in a child theme, and CSS in a WP CodeBox, and CSS in the Bricks theme builder, blah, blah, blah, blah, blah, there’s shit scattered everywhere. Now it’s a matter of scanning everything that’s going on and figuring out what’s actually being used and what’s safe to remove.

0:57:43
And it turns out that’s much harder to do in an environment like this. And so in our estimation, it’s just not really all that safe. And when people install other tools that do that, we get an insane number of support tickets going my site’s broken, my site’s this, my, and it’s like well your scanner thought you weren’t using that thing but it turns out you are using that thing and so it broke it and so stop doing that right it’s it’s just it’s not great it’s not a hundred percent accurate so you’re gonna and by the way let’s let’s talk about this first of all if you load the entire ACSS framework it’s really not all that heavy

0:58:22
if you load it efficiently which means you’ve turned off the stuff you’re not using, it’s like phenomenally small and performant, okay? When people are like, oh, we got performance issues with our website, we go look at it. You know what they’re loading? Uncompressed image. They’ve got megabytes and megabytes of uncompressed images

0:58:41
and they’re asking us, can we make the framework a little smaller? They’re trying to save like eight transferred KB when they’re loading like megabytes of uncompressed. It’s so ridiculous. It’s absolutely ridiculous most of the stuff that you can optimize for like ACSS though, it’s like The the optimization you would even be able to get from a just-in-time compiler. It’s like it’s like oh you optimize one image Congratulations, but you’re using like, you know 30 images on this page It’s like that minuscule if the juice is not worth the squeeze of breaking things constantly and the time that it takes

0:59:17
to hunt that stuff down and diagnose and figure it out and get it back. Your time is way better spent elsewhere when it comes to performance. You should be focused on delaying JavaScript until user interaction. You should be focused on optimizing your images properly. You should be focused on server stuff. You should be focused on a lot more stuff than squeezing another 12K out of your framework file. Okay?

0:59:45
It’s just, it’s not something I would recommend spending all that much time on.

0:59:49
Okay, let’s take a break, look at the chat,

0:59:52
and then we’re gonna come back. We got tons of questions, but let’s see what’s going on in our chat here. Let me catch up. Okay, let’s see. Having some context with a link to understand more would be super helpful if anyone agrees. Yeah, we already have some,

1:00:08
we’ve started experimenting with tool tips for certain things, and I am going to put a style in here. Now, what I’m avoiding at all costs is the little eye icon next to everything. I just hate it. It makes the it really clutters the UI. But we’re going to find a way to, you know, nicely, nicely, nice looking Lee, put in some tooltips for various things, but they’re already there on some things, we

1:00:41
just got to, you know, make a style. So you know where a tooltip is, and where a tooltip is not. The other thing is, I would like maybe a link directly to the documentation in the tool tip for that thing so you can jump right to specific documentation from there. But that is a project in its own. I mean, think of what it’s going to require just to go to every single input and potentially add a tool tip and then a link to the documentation and then make sure all of that is accurate and you know, it’s, that’s a project in and of itself. And if you said, well, Kevin, do I want, here’s the question,

1:01:20
do I want to get my hands on 3.0 faster and just start building with it and figure it out myself with videos and all of that stuff? Or do I want you to delay another month and make sure all my tool tips are there, right? Most people, we’ve already kind of had this discussion, most people say, no, just please give me the thing. Like I do the tool tip thing later. Okay. It can wait. And that’s what we felt too. It can wait a little bit, right? Because remember we’re going to be doing videos on all of this stuff. Okay. The tool tips are helpful. By the way, the whole cheat sheet situation,

1:01:51
it’s you’re going to have a cheat sheet. If you didn’t know, there’s going to be a thing right here. One of these little nav elements that says cheat sheet, and it’s going to be right here, live, in person, in the dashboard. So you get the full cheat sheet with documentation links to everything. And so for those of you who love the cheat sheet side of things, it’s going to be right here for you in the panel, everywhere you go. Okay, so that’s another nice benefit.

1:02:18
Okay, let’s see. All right, let’s go back. I think I think everybody’s happy with that so far. Okay, is there a master list of the videos Kevin intends to make? I do have a rough outline. Okay, we’ll go back to questions. All right, so hashtag question, let’s sort. Let’s go find where we were.

1:02:47
Are there any plans to have SureCard styling in ACSS? Yes. Okay. Bricks Maven has a layout search feature where I can view all the frames layouts. Is that possible anywhere in current frames? Yeah, it’s getframes.io slash frames.

1:03:02
Here’s the entire library right here.

1:03:05
And it is searchable. Find a frame, filter by category. You can also filter by type, sections, single frames, grid frames, template frames, modal frames, okay. You can sort newest oldest, you can sort A to Z, Z to A. So you get a lot. We’re still putting, there’s a few of the older ones that are still not in there yet,

1:03:29
but we’re rapidly adding those because we’re going back through and redoing a bunch of the old ones.

1:03:35
Okay.

1:03:36
Okay, can you show us how to use the frame switch component, specifically what would be best practice for creating a custom switch design with it? A custom switch design. I’m not sure, I can show you how to use the switch, but I don’t know what you mean by custom switch design. If you have an example, you can’t link me to an example because YouTube strips the links out, but if you can give me a little bit more description of what exactly you’re wanting to do with the switch, then then we can go over that.

1:04:09
Designing mock-ups with frames and Figma, client wants to test different fonts globally, would I need to add new version of all the textiles, body, da da da da, or is there an easier way? Tommy, I think is in the chat, and Tommy can answer that for you and maybe has answered that for you. He would be the person to ask best for that. Is it normal to build a site without using any utility classes, only BIM? Yeah. Well, no, not using any? Probably not.

1:04:37
It wouldn’t be as efficient. I mean, yeah, it’s absolutely possible. It’s 100% possible. But utility classes does add efficiency in certain places. But yeah, I would say primarily using BIM is the way to go. But not everything has to be BIMed, right? Yeah, just not everything has to be BIMed. If I’m in a header template, if I’m in a footer template,

1:05:01
more prone to use utility classes for things there because I’m not BIMing that. It already has a single source of truth. If I was whipping up and if I have component functionality, like true component functionality in Brics, maybe I’d BIM less in that scenario, and maybe use utility classes for certain things in that scenario, you know,

1:05:21
but that’s not even a scenario we can entertain right now because we don’t have that functionality. So we’ll see when we get there, what the recommendation ends up being. I would still probably BIM it anyway. And the reason I would BIM it anyway, just to be clear, is because literally all you have to do is grab something, hit auto BIM and like do that. It takes like half a second and what is the phrase from PB101?

1:05:47
When in doubt, BIM it out. When in doubt, BIM it out. Because you don’t know how, if it’s gonna be handy or not handy and it doesn’t hurt. It never hurts to have BIM classes on things. Now it did hurt before. The reason it hurt before is because it’s a pain in the ass to write them all, right? Or to make them all in a page builder. But when you have Auto BIM, there’s no pain. It’s a painless process. So you just should do it. It doesn’t cost you anything. And it does, even just as pure insurance. It’s like, well, I’ve got BIM classes as insurance. We’re not really a problem. So yeah, you can absolutely do that.

1:06:24
paragraph text in a CSS in new site on bricks is using you L on every word any help appreciated that has nothing to do with automatic CSS it’s likely a font issue using you L I don’t know what that means using you L you don’t mean like that’s not written as like a list you’re not talking about like unordered lists. Are you talking about the literal characters, U and L showing up in your text? I’ve seen question marks show up in text randomly. Usually those things are related to font issues

1:07:01
or some other issue going on on the website. Some frames have classes that don’t get BEMified, feature section golf has FR feature section golf that persists. Should we treat those as utility classes? Let’s go look at feature section golf. Let’s just go to, let me get to a blank page here. Okay. And let’s go to, is anything happening with this contact page? No. Okay. So feature golf

1:07:38
Frames Golf Are you sure it’s called feature section golf feature where did your comment go feature section golf Feature section Victor intersection. Let’s just do golf by itself. There’s content section golf. Is that what you’re talking about? Profile section, feature grid golf. Feature section golf.

1:08:15
Bricks is search feature. What, what are you doing? Bricks search feature. Didn’t find it for me. Okay. So here’s feature section golf. Let’s take a little peek at what’s going on. So we have feature grid golf, feature card golf, we can clearly see the blocks here,

1:08:31
right? Feature section golf, block. Feature grid golf, block. Feature card golf, block. Intro echo, block. We’re looking at all blocks right here. So that tells you right now you can’t just BIM from the top down, okay? Because you can’t BIM. In order to BIM something, remember, it has to be a block with element children. It has to have the E inside of it. This doesn’t have any Es, okay? This has two other Bs, two other blocks, right? So you can’t BIM from the top down.

1:09:04
Feature grid golf, does it have any Es? No, it only has Bs, it only has other blocks. Can’t BIM top down from grid golf. Feature card golf, does it have any E’s? Yes, it has an image, it has overlays, it has E’s. So you do this right here, you bend this and say overlay card, whatever you want to call it. This is an overlay, this looks to me like an overlay card.

1:09:26
So I’m going to call it overlay card. Sync the label, okay. There we go. Now I have all overlay cards. Well these don’t get their synced because it’s not the same thing. But really what you would, you’d most likely be using this for the loop anyway, so you would delete those extras. If you’re not using a loop, now duplicate them and now they’re all overlay cards, okay?

1:09:46
So that’s fixed. Look, all the interactions, everything persists, okay? Now intro echo, what are you going to do? We’re going to say, you know, two column intro, something like that. And I’ll go sync labels, apply classes. I just bimmed that. Now that’s mine. Now feature section golf. You can’t auto bin this. There’s, there’s nothing

1:10:05
inside of it, right? So all I would do up here is go name this, right? Uh, so feature, what would they be? It depends on what you’re featuring. Are they services? Are they people? Are they, what are they? Right? Let’s, let’s say they’re services. So I’ll say service this section. Okay. So you’re, you’re giving it a name to describe like what it is, services section. Now I can go in here and say services section. So I just use the normal renaming feature in Bricks to do this because it doesn’t make sense to use auto-bim because I’m not bimming anything.

1:10:37
I’m not, there’s nothing to bim, there’s no ease. There’s no elements in bim, so there’s nothing to bim. I’m literally just renaming something. And then the same thing with feature grid golf. There’s no ease, there’s no elements. All you need to do is rename this, right? So this would be like services section. You could even say services section inner services section grid I would probably do grid right services section grid like that

1:11:00
If you want to leave it a block in itself, you could say services grid like that. Okay, it’s really up to you Whatever you want to do and I’ll just call this services grid And now I’ve got overlay cards and a service grid with a two-column intro and a services section. I’ve renamed everything I’ve auto-bimmed what I could bim that made sense and this whole thing is mine now. This is all good to go and now look I want to go here save as template go to my templates and say services section. I’m gonna go ahead and save that as a template now when I go to another page and I want to like pull in my services section it’s sitting

1:11:40
right here for me okay all good so you see it just took like a minute do a quick analysis of the structure what can be bimmed what can’t be bimmed bim the things that can be bim rename the things that can’t be bimmed move on with your life right so you got to mix and match a little of the technique there and this is because this is not okay I’ll let me reiterate this this auto BIM tool number one was not even built for frames This was not this is just a tool you can happen to use with frames But it was built for BIMing things from the ground up like you build something from scratch Auto BIM it and it saves you a tremendous amount of time, right?

1:12:17
You can use it to BIM frames, but only parts of frames that are BIMable and Then you should not use it. It is not a class renaming tool, that’s not what it is. It wasn’t built as a class renaming tool, it was built to BIM things. So if you’re not BIMing something, you can’t use AutoBIM, right? So that’s why it’s called AutoBIM and not ClassRenamer or whatever else people might use it for.

1:12:44
It’s named for the thing it was designed to do. And just to be clear on that, this is what it actually was designed to do. If I was building a service card from the ground up. So let me go and here’s where you might want to use a utility class, right? For a quick little grid three action. Now, I want to go in and do a block, right? There’s my card right there.

1:13:03
I’m going to quickly add a block block inside the card. So we can see how we can race to do this. So that’s going to be my media wrapper, which I’m going to put an image in. Oh, okay. Let’s not do a I image. Let’s do an image. That usually works better. And then in this block, I’m gonna go with a heading,

1:13:20
I’m gonna go with text, I’m gonna go with a button. Okay, immediately I’m gonna go here and get my button primary. So button utility classes almost always, right? Almost always button utility classes. I’m gonna make sure that this is a P. I’m gonna make sure that that is an H3.

1:13:37
I’m gonna make sure that this is a figure, HTML tag figure, okay, I’ve got my little card. And then I’m gonna say, what do I want this card to be? I said I was building a service card. I’m gonna auto BIM, I can name everything right here. Service card, this is gonna be the media wrapper. This is gonna be the media. We’re gonna have our content wrapper

1:13:58
or our body wrapper, whatever. I’ve got my heading that makes sense I’m gonna say description and then that’s my button okay I’m gonna sync labels I’m gonna apply classes bang all BIM on the fly real fast all I got to do is put my media in now okay and then this is what I mean by aspect ratio with BIM classes okay because I just BIM’d everything I’m free to just activate the class and start doing what I need to do I don’t need an aspect ratio utility class because I know I can just come in and say one to one.

1:14:29
Automatic CSS automatically applies object fit cover to everything, so I don’t even have to worry about it warping or anything like that. It auto applies spacing, so I don’t even need to worry about spacing. What I can do here is go service card background. I’m gonna now choose a background color and we’ll go in with like, yeah, let’s do white,

1:14:48
which now clearly I need some spacing. So I’m gonna go in and say maybe L. I’m gonna apply that to all sides Okay, maybe I want my radius now So I’m gonna go in to border and I don’t know if we even have the new radius in there I don’t think we have the new radius in there yet So I’m just gonna type it Auto-wrap it apply to all sides now. I’m using my global radius. I would like the same thing to happen on my media So I’m gonna go in there and do the same thing. Get my radius going

1:15:17
all sides. Fantastic. So now I’ve got my little service card going. Okay. This can say learn more. Great. If I want this text to be smaller, typography, font size, go S on that. This is going to be service number one. Great. I just made a custom card. Okay. And you can see that this workflow and I you know, I didn’t really design it Okay, like I didn’t do anything special just kind of demonstrating but that’s fully My chairs just like what are you doing dog? What are you doing? That’s fully bimmed which means it’s a hundred percent I have global control over the styling of that element It’s basically a CSS component now, right? So a hundred percent maintainability fantastic. It can be query looped now.

1:16:05
I can really do whatever I want with it. So you see with auto, that’s what autobim was designed for. It’s like quickly renamed, like not to mention, not to mention when I autobimmed it, because it maps everything to my structure panel, I also just organized my whole DOM. Like the whole structure panel of my project stays 100% organized simply because I’m using an

1:16:28
Auto BIM tool. Really, really, really, really powerful. Remember, most people are not building with custom classes. The people that are using custom classes are not using BIM. Their shit is like psychopathically unorganized. Their structure panel is not organized. Like what we just did in seconds in terms of organization, maintainability, readability. It’s just, and then everything’s tokenized, everything’s automatically responsive, even all the spacing, all the typography automatically response. The idea that like you wouldn’t use this is why I say like the idea that you wouldn’t build with a framework is people are like, Oh, you don’t need that. They just they don’t they don’t know. They don’t know what they’re talking about.

1:17:13
They don’t understand. It’s, and you know, I don’t blame them. Like if you’ve refused to look at it, if you’ve refused to digest what it’s capable of doing, I understand that you don’t understand. But it’s like, you know, the videos are there. The content is there. The education is there.

1:17:30
Some people just don’t want to look at it. Okay. Let’s get down here. We did the SureCart thing. On ACSS, aren’t we violating dry principles a little when using recipes? No, not at all. Because you’re assigning those recipes typically

1:17:48
to custom classes. So you’re saying, I want this to be doing this thing for this particular card, or hero, or whatever it might be. Now, if you use that same recipe on a different element, are you repeating yourself? Yes, in a way, but keep in mind, recipes are tokenized, like they use tokens, so you’re not repeating values for things. You’re still using tokenized styling.

1:18:14
What would be more efficient? Okay, I guess this is a good thing to talk about. So if I bring up the global CSS area, so a recipe like clickable parent. Okay, so clickable parent. Let’s get that in. So there’s my begin clickable parent. All right. Now, if I didn’t want to repeat myself,

1:18:38
like if I didn’t want to take that recipe and put it in a card like this, see I can come here to, I think it’s best to do this on the parent. So I go to the class I go to CSS can you guys okay I probably have to move my head let’s float let’s float okay so I’m gonna go at clickable parent should work in here too see works in here too so now I’m assigning clickable parent to this service card now if I had a team member card I would have to go to

1:19:08
the team member card and I would have to do the same exact thing and then that’s where you might argue now you’re repeating yourself. You’ve written this code twice in two different places. That’s because I’m using a page builder. But you don’t have to do that. You actually don’t have to do that. So if you came over here and inspected this, you would you would do something like this. Is, and then you would say service card, and then you would say team card, right? So you’re taking two things at once and applying the clickable parent. And you would have to take this is right here,

1:19:43
and you would have to say, you have to replace that one. And then there’s a target root, let’s see, remove effect. This is for removing the effect in the builder. So set target bricks equals bricks area. So this target should say bricks area, because I’m using bricks. And then I would take the root and replace it with my is. So now I’m not repeating myself because I’m taking one block of code and assigning that code to multiple things at the same time. Now that’s just a decision you make. If you

1:20:16
are not comfortable doing this then obviously you won’t do it. You’ll just do this right here, this side on the left. See there’s two, there’s always in web design multiple ways to skin a cat here’s a and here’s B obviously B is appears to be more efficient because I’m only using the clickable parent code once but it’s affecting multiple elements okay but it does require a little bit extra knowledge of like what the hell is is and you know first of all okay hold on hold on pause my brain was just like, oh, there’s an argument against this. And there is.

1:20:56
So now we’re in a situation where one way does look more efficient, but it actually has a little bit of a, eh, eh, okay? Look at this. Dynamic root selector being used in this context. If I change this to my service card this clickable parent code will still work. This clickable parent code over here will break because you’re not using dynamic root selectors here. You would have to remember oh yeah yeah yeah this to my service card, my service card, and my service card. So we didn’t repeat

1:21:44
ourself, we checked that box, but we broke our dynamic root selector. Is it worth it? Is it worth it? These are the… I don’t know that there’s an objective answer. It depends on you. It depends on your situation. This is an area where you got to make, you’re the developer, right? We give you the tools, you still have to make some decisions. And there can be best practices. In my opinion, I would rather have a dynamic root selector. I would rather have code attached to an element that it applies to, than a little bit extra efficiency.

1:22:23
And what is this efficiency going to get save you here? If we have five different card styles using clickable parent on the website and we duplicate this code five times, what have we added to the style sheet? By the way, Bricks already only loads the code for that page that’s being used on that page. This code is being used on every page

1:22:42
regardless of whether there’s a service card or a team card on that page. So now you got to factor that in, don’t you? Not so clear cut, not so clear cut. To me, I think it stands that we do this with a dynamic root selector on the element that it belongs on, and we move on with our life, and we don’t scrutinize the DRY principle

1:23:04
in this specific context, okay? All right, see, we just worked through that together. Look at all the things that have to be taken into consideration in web design. Okay, hopefully that was educational. Okay, could you discuss renaming BEM classes where the class is referenced in the custom CSS box? For example, Feature Grid Delta uses custom CSS

1:23:30
that references a class that doesn’t get renamed. Anything that’s referenced raw, you’re gonna have to change manually. Some things are just, they have to be done like that. It’s usually a limitation. If you think something should be using a dynamic root selector that’s not, bring that to our attention

1:23:47
so that we can potentially fix it. But typically if you see something not using a dynamic root selector, it’s because there was some reason that it wouldn’t work that way. Does ACSS and frames have a negative impact on the front end performance of a website? No, especially not in any practical regard.

1:24:06
You can score 100 out of 100 on PageSpeed Insights with automatic CSS and frames. Frames certainly doesn’t. I mean, you gotta build the page, right? And frames is cleaner code than what most people are using. So just by nature, it’s already gonna be very performant. The framework itself, we’ve done this many times. Every option on, full, full style sheet, nothing turned off.

1:24:32
98 out of 100, 99 out of 100 PageSpeed Insights. It’s again, you’re degrading the performance with way other, like many, many, many other things are degrading the performance before ACSS does. Let’s see. I’m trying to go fast. I’m trying to go fast. You praise InstaWP on the ACSS3 live stream. Don’t you also have GridPane?

1:24:55
If so, what’s the benefit of Insta overcloning blueprints on a dev server in GridPane? I’ll have to do a video. There’s a lot of things to get into there. And it’s not really ACSS related, so we’ll save it for a different video. Okay, I think you remember saying, is, oh, here, let’s do this one first because it’s quick is import

1:25:16
original classes available in 2.8 yes okay good I think I remember you saying it’s important to watch your video on naming conventions for custom classes double dash underscore etc can you refresh my memory where to find that we can just do it now it’s not BIM BIM is not hard whatsoever so when you are doing something, BIM is like a key part of so much. So I will take the time to answer all BIM related questions. You saw a minute ago, I’m just going to make this super simple.

1:25:52
Text, and then we’re going to bring the modifier, because modifier is one we don’t talk about very often. So let’s look at this block. Heading and basic, ignore the fact that this says block, that’s just because I’m using a block element, but let’s just call this card, right? So the B in BIM stands for block. The block is the card.

1:26:15
It is the parent component. If you think in components, right? A thing that I can reuse multiple times. And even if I’m not reusing it multiple times, you might still use BIM like a header, you might still BIM your header, right? But still think of it in component form, right? So you have the block, that’s card, that’s going to be your BIM. So you just put a class on it, right? Just whatever class you want. See, I just use one called card. It’s as

1:26:41
literal as it can possibly get. Now, where do the double dashes, double underscores, where does all that come in? Well, we see that this block right here has two elements that belong to this block. We need to talk about nested blocks in just a second. Okay. All right. So a heading and text. If I was going to name this and I’m going to do this manually, not using auto BIM, so you can see it happen.

1:27:07
I would say card. Okay. I call the name of the parent because it belongs to this parent. And then to denote that it is an element attached to this parent, I use a double underscore. And I call it what it is, heading. Okay, so that is now card heading. Now this is the description of the card, or it could be the text of the card, or again, naming is up to you. But I’m going to call it description. Therefore, what is it? It is card double underscore description. Okay. And so now when you look at classes like services card, and did I not have one?

1:27:42
Let’s just put in card and see what comes up. So there’s this thing called an overlay card. Overlay card, I can see, oh, it’s got children. It’s got media in it. It’s got an overlay on it. It’s got a heading in it. It’s, look at how organized this is. And then when you’re writing CSS, we’ll talk about the efficiency in just a second. Let’s get this done first. We have our card heading, we have our card description. Now I’m gonna put a note, I’m gonna sneak something in on you, okay? So let’s let’s let’s talk about this. I’m gonna sneak this thing in. What is this guys? Is this a card double underscore button or is this just a button with like maybe a style attached

1:28:24
to it like primary okay it is a block in itself why because does this button belong to this card or is it the same button that I use everywhere else it’s its own component it’s its own block okay so it technically does not get BIM so this is double underscore heading double underscore description and then suddenly there’s this other thing sitting in here, even though it is a child of the card, it doesn’t belong to that card. It’s just a button and that looks like every other button, it’s its own component. Okay? Now I’m going to switch over to chat to make

1:29:05
sure this all makes sense. If it doesn’t make sense, let me know in the chat. I’m switching back to chat mode so I can monitor the chat. Okay. Now what I will say about this, here’s where it gets a little bit gray area because there’s the there’s now a question for you. I just realized I’m still floating. Let me let me go. Where can I go? Where the hell is safe? Where is it safe to live? Okay let’s live right there. There is a Would you like added flexibility and insurance? Now, if you’re the kind of person that’s like, Kevin, I love insurance.

1:29:42
I love flexibility, Kevin. I definitely want to add those things, okay? Then you can do this. Watch this, because an element can have more than one class. I could say card double underscore button. Now it has card button and button primary. And when you pull up this website you might be insanely confused you’re like why does that exist huh but this thing is doing all the work and in

1:30:11
fact it it makes even less sense because you’re gonna activate it and you’re gonna see a blank panel the hell did they do here they’ve done nothing with this thing why does that class exist what is going on here right okay well now let’s let’s look at this let’s look at this. Let’s look at this. So I’m going to now duplicate this card, okay? Everything’s been bembed. So the benefit of this is I go to layout, I go to padding, I go to L, right?

1:30:37
They’re all going to get L. If I go to background, I go, let’s make it white again, okay? They’re all going to get a white background. If I do the radius, they’re all going to get a radius. Now Bev comes along and Bev’s like, yeah, I like that car. I like that car, but I do wish that button, I do wish that button was a little bit smaller, right? Or maybe I wish that button had a different background color.

1:30:59
Or I wish that button something, something, something, something, something. Okay, well, it has a class called button primary doing all of the work, right? But we put an insurance class on here. This is like the Bev class. So we got BIM classes and we got BEV classes, right? So BEV classes, those are those insurance classes.

1:31:18
Because now I have a class that actually only affects buttons in this card, right? Where this thing is just the style of buttons across my website. This class represents a way for me to style buttons that only apply to this kind of card. It’s purely for insurance. When you need it and it’s insurance is insurance. Hey when you need it and you don’t have it life sucks right? When you when you you know need it and you have it you’re like man I’m glad I had that okay that’s all that’s going on here. So if this ever confuses you it’s just an insurance class. It’s a Bev class okay because now I can do stuff to this button that

1:32:02
doesn’t affect any other buttons on my website. It only affects buttons that belong to this card right here. Nice to have, nice to have. So I recommend doing this, why? Because it costs you nothing. Just do it, okay? It’s like a wrapper around media.

1:32:17
Media wrappers, you always have a wrapper on your media. Why? Because it costs you nothing. When you decide, you know what, I really need pseudo elements attached to all my media and you don’t have wrappers on your media. That’s kind of a shitty situation. Should have put a wrapper on your media.

1:32:33
Cost you nothing. Little bit of insurance. You’re good to go. OK. All right. Bev insurance, always a good idea. So that’s why you might see this, even though this is not, I don’t think technically Ben. OK, let’s do the double dash thing.

1:32:47
What I want now is a card that’s dark. Okay. See how this makes sense now, when I use the double dash syntax, that’s letting everybody know, this is manipulating the style of this thing. There’s a base style. And then there’s this manipulated version of it. Okay. So in this instance, I’m going card dark, and I might go background color and do black. And then I might go to typography on here and I might do white. And now if I want this one to be dark, I just come down here and I say card dark. And I put the dark. I’ve created a dark variant for the card.

1:33:24
This is the M in BEM. It stands for modifier. I’m modifying an existing block. Okay. So we did the block itself. We did the elements inside of the block. And now we just modified the block and the modifier uses a double dash syntax again so that when I’m reading class names I can see that okay there’s these

1:33:48
elements in here even if I’m not even looking at it on the page I know what elements are inside that thing and then I know what modifiers are available for that thing okay so that’s how the double dash syntax works that’s what it’s for. That’s pretty much it. Okay? BIM is insanely useful. There’s other ways to organize classes. There’s other methodologies. BIM is the easiest and it has no limitations that I’ve found. And we all know that CSS nesting is coming, right? So when you’re writing CSS, I highly recommend, by the way, if you’re in bricks writing CSS best practice now is to write at the parent level of the block okay because you can stem off of

1:34:35
the root selector to target the thing right so I can say root heading and I can color red and I’m getting very flat you want flat CSS that’s what we’re trying to BIM makes your CSS very flat which means that you’re not adding unnecessary specificity which is best practice okay so rude heading the only time you would end up with more specificity if you wanted to do the dark version of the heading okay this should work let’s go color pink okay let’s do hot pink can you guys see the difference there you can yeah you should be able to see the difference right so now on my So now, in my dark variant, but notice I’m still able,

1:35:17
because BIM just really, really, really works well with dynamic root selectors. It also works well with nesting, okay? So you should be able to root and then come in here and say, and this is even in vanilla CSS. I haven’t done a lot of practice with this, and it’s not like SAS nesting. It’s not exactly like SAS nesting.

1:35:38
So, and I don’t even know if you can stem, you should be able to stem off of it. Color, color, hot pink. This wasn’t working the other day when I tried it and it’s not working now. And I don’t know, I don’t know if it’s that dynamic root selector messing it up. I don’t know if, if I’m just doing something wrong with vanilla CSS nesting. I couldn’t, this was giving me problems the other day as well. It should absolutely work like that, in theory, but it’s not. And I asked anybody I put out a call like, am I just doing something wrong with it? It works when I do it in CodePen.

1:36:12
I haven’t been able to do it in bricks. I don’t know what the what the deal is. Okay, anyway, let’s go down, down, down, down, down, down. All right, where were we? Pricing section Charlie price cards disappear whenever I click on them in the builder. Where do I report bugs like these? Pricing section Charlie. Okay, well we don’t want to go back we want to click this icon Let’s go to frames. Am I still living in a good spot, okay? pricing Charlie you say

1:36:55
Okay pricing Charlie price section Charlie Okay, oh, oh like that. Oh, I know what’s happening. I see what’s probably happening. Oh, even with the switch gone, what is going on?

1:37:20
Well, hold on, hold the phone, hold on.

1:37:23
Where’s my structure?

1:37:24
All right, let’s refresh this, hold on. Save. Okay, start over. Pricing, now I will tell you Okay, start over. Pricing now, I will tell you that Bricks has many hiccups with importing sometimes. This is with every library, every person with a third party library will tell you this. Pricing section Charlie.

1:37:48
Let’s save and commit this to the page and refresh. Okay, and see if we can recreate. Okay, we get the same exact effect. The only thing I can think of is there is a switch involved here, but there’s two existences of pricing grid Charlie, one for the monthly and one for the annual. So if it was the switch causing this problem, it would be switching to the other one. We would still see something we would not see blank. Now we go the front end, we ask ourselves,

1:38:30
does this thing work on the front end? Let’s clear all this out on all these away. And let’s just use this one. Okay, so it’s working just fine on the front end. It appears there’s some other stuff going on with this though. If h4, all that’s in there.

1:38:49
All right, this frame needs to be looked at.

1:38:51
There’s a bunch going on here.

1:38:53
So there could be just a random bug in the frame

1:38:56
causing other issues. Okay, Andrea or Tobias, if you guys are watching, let’s mark this one and take a closer look at that. Figure out what’s going on with that frame. Okay, yes normally you can report those in the forum or you know here like you just did it’s fine. All right we did the dry thing we did that question we did that question we did that question I tend to just have the VAR to the ID level as the VAR are linked up what’s the problem with doing that?

1:39:38
I do agree with you, re-utility classes, but I tend to just add the VAR to the ID level. Okay, so what’s the difference between going BG, and I turned all those classes off. So let’s go to options, utility classes, background color, save. See, it’s nice to not have to go back to a little magic area right if you’re missing something you just stay

1:40:04
here you just stay here in the builder and you’re good to go all right now we want to get rid of that section get rid of that section save okay add a new section BG there they are now they’re back okay so let’s go BG primaries to make this nice and simple what is the difference between that and going style style background and choosing primary. Okay. Visually I just achieved the exact same thing. Okay. But if I this one was ID, this one was class. Okay. And this was also utility class. So there’s our utility class version. If I duplicate this a bunch of times. All right. I am duplicating every everything I’ve done to that section at the ID level in terms of CSS gets duplicated again,

1:40:56
again, again, again, again, again, again. And you are repeating all of those instructions for every and this is what Elementor does. This is what Divi does. Bad, not good, not good. Okay. Even if it’s and again, most times you shouldn’t be doing stuff at the ID level. But even if it’s a situation where it might make sense at the ID level, using utility class, guess what, none of the styles that use utility classes are being repeated. There’s one source of truth for that style. And it’s accessing that one source of truth for every instance. So in terms of code output, it is phenomenally

1:41:33
smaller to use utility classes than the style at the ID level. Okay, because remember you are repeat at that ID styling for every instance is being duplicated. Now, what about BIM? When you BIM classes, right? And then you duplicate the element, there’s still one source of truth for the styling and it is the classes, okay?

1:41:57
So you’re not duplicating code with BIM. You’re not duplicating code with utility classes, you are duplicating code with ID styling. Okay, so not only is ID styling not really scalable, maintainable, it also results in a bunch of code duplication. So I just avoid it for the most part, unless I’m doing very small minor things. All right, hopefully that answers that. I’m hoping there will be an option to pop out the panel for those with dual or large

1:42:33
monitors. You can pop out the panel, you can dock the panel, you can dock the panel to any side, you can center the panel. Christoph just showed me a prototype of the panel floating in its own window, completely outside of the window that you’re working in. And we may, I can’t make any promises, but we may be able to have one panel affect multiple pages, previews, okay, maybe, maybe. We’re working on it.

1:42:58
There’s a lot, there’s a lot of stuff that’s, that’s potentially there. But again, are these all going to be in 3.0? No, like they might be 3.1, 3.2, 3.3, 3. They’re still going to continue to improve as we go.

1:43:11
Let’s see.

1:43:13
How many hats do you own? I have $20 that it is more than $30. No, I have five hats, okay, I have about five hats and I replace them, I should have 30. They fucking disappear. I don’t know what the problem is. Okay, one problem is they disappear. appear. Two is I go to softball practice because I’m my kid’s softball coach. I go do sprints and walks and these things like they collect sweat they get all

1:43:47
nasty and shit and I just throw them out and so like I really like have five or six hats and then I replace them constantly and so I should have like a gazillion hats but I only have like five. All right let’s see the typography font enter upper lowercase typography is rendered on every word in bricks in my frames content okay let’s let’s just see if we can diagnose real quick we won’t spend too much time on it edit with bricks okay I’m gonna go to global styles theme styles I’m gonna go to typography I’m gonna go to body. I’m gonna go to enter. Ah shit, okay. Oh, I’m sorry guys. Gotta go to the Bricks magic area for a second.

1:44:33
Bricks settings, performance. Google Fonts is not disabled. Okay. Well, why isn’t enter available to me? Wait a minute, wait a minute. If they’re on, why aren’t they there? Okay, we may not be able to look at this. What? Oh, I’m sorry. I do have it on. Okay, sorry. That might do guys do you see what it’s like living with dyslexia? My brain saw an on switch for disable and was like, that’s clearly available to me. I love

1:45:11
it. I love it every time. Okay. All right. So now, now we should be able to do what I was trying to do. So let’s go to theme styles typography here. Enter. There it is. Okay. So there’s enter. What did you say is there the typography font enter upper, upper, lower, upper, lower, I don’t know what upper lower means. But I’m going to come in here and make sure that uppercase works and it does. I’m gonna make sure lowercase works and it does. I don’t see any erroneous shenanigans going on. You’re gonna have to maybe give us a link so we can see what’s happening or send in your install.

1:45:54
Now let me get my real font back. Typography here, what was it plus okay all right save all right that did show enter right pretty sure it did let me look what one more time enter yes it did okay all right good all right at some point this will be manageable in automatic CSS as as well. Really the only thing right now that you have to manage here is the actual font family. Now some of you are like you know I wanted letter spacing, I wanted text decoration, I wanted you know text transform, whatever. Okay let me show you let me show you what we got cooking. What I’m cooking in the kitchen over here. What branch is it? Add typography options, here it is, refresh, okay

1:46:51
We’ll pull up Bricks 30 in here go to the front somewhere Is it site automatic? I got an NPX V one second one second one second terminal new terminal Okay, get that running. Okay refresh automatic CSS. There we go typography and Look at this. Font weight, letter spacing, max width, font style, text transform, okay?

1:47:20
So you’re able, look at this. This is for all of your headings. So I can go, I can do all this. Ah, look at that. Letter spacing, two pixels. Let’s make it as ugly as we possibly can. Let’s go 100. Let’s go two on the line height.

1:47:35
Let’s go red on our headings. So now we have global control over all of your headings, okay? I’ll reset all that. Let me go into H1. Look at that. You have all, every individual heading level has the exact same controls now. So if I only wanted to do this to H1s but not the H2s on the page. Let’s make it super ugly so we can see.

1:47:54
Line height of five. That’s always good. Bev loves that. Let’s go 100. Let’s go text transform of uppercase and go down, we’ll see, hey, this is not happening to our other headings, it’s only happening to our H1. This is a global H1 style, you got a lot more control now.

1:48:14
And very soon you’ll see font family in here, you know, everything will be doable from automatic CSS. You won’t need these chump builders for much of anything. Okay, all right, let’s refresh that. Let’s get get on to like we got ten more minutes of questions

1:48:30
My question on upper lower says I’m okay

1:48:32
Has been solved. Okay good Are there any plans to incorporate more frames for image galleries perhaps and sliders with style captions? Yeah, there’s more image galleries and image groups coming for sure. How can I use the color palette switch? How can I use the color palette switch? Which color palette switch are you talking about? So I got a switch there, I got switches here, I’ve got maybe you’re talking about color scheme, auto color scheme has a switch, lock specific selectors has a switch. Manny, help me out Manny, help me out Manny. Which switch are you referring to? Okay, event section Bravo when adding a query loop to the event grid, the three cards are multiplied possible bug. Always possible, probably not probably a user error.

1:49:33
Okay, just call you out real quick. But now I’m just joking. I’m just joking. We already saw one broken-ass frame, so maybe there’s another one. But if it’s a query loop thing, I see a lot of challenges with the between, what does Tony always say? Between the something and the keyboard. Okay. Event. Bravo. Alright. Publish, publish, edit with Bricks. What site are we on? Don’t even know, can’t keep track. Okay, this is the Bricks 30 site. This one, okay, event, Bravo. Did the bricks search? What, has it gotten worse lately or something? Normally this has no problems. Event section Bravo. And you’re query looping this you say.

1:50:26
Okay.

1:50:27
Let’s go, let’s first of all, let’s get this in the right window. All right, let’s close, close, close, close, close. I’m actually doing this on the, this is like a unreleased version of 3.0. So this will, you know, we’re in the wild, wild west right here. But let’s go back here.

1:50:42
I actually like to do this because I like to see if anything’s broken. Let’s go, oh, we do have ACF. Look at that, it’s just sitting there waiting on us. Okay, let’s go events, event, events, okay. Hierarchical, advance, actually we don’t need that. Page attributes, all right, save, okay. We got events, add new event, test event, okay.

1:51:10
That has fields, I’m sure, but we don’t need them. Let’s just publish this and then add new event. Test event number two. Okay, publish that, publish that. Go back here, refresh the builder. Did I save that first? Damn it, okay. Event, bravo, section, bravo, okay.

1:51:33
Open this up, get the intro, get the grid, cards, delete, delete, event card, loop it, choose, events, bang, open that up, find the heading, heading, heading, heading, where are you, heading link, okay, and pop in, post title, save, look at it on the front end, test event one, test event two, all in there.

1:52:05
The hell is going on with this though? What is happening here? What have you done? Oh, it’s probably related to something not being in, what decisions did we make? Event Bravo, horizontal row. And what’s going on in here?

1:52:30
Date.

1:52:31
Why are these not set to, why would display flex without column set? It should default to row. Why are those not defaulting to row? Theme styles, div. Oh, look at this. Look at this. This global style set to flex column. You don’t want to do this. I don’t know why this is on this install. Okay. The default for flex should be row. In fact, okay, I was short cutting. Yeah, okay, you don’t want to do

1:53:10
that. I was probably testing out a shortcut, almost making like a block, a div behave like a block, but putting it in a column. And that’s why you don’t want to do that. Don’t do that. Stay away from this area right here. Okay, that frame wasn’t, that frame, and here’s a good example of where a frame is. So if we go, let’s, just to show you,

1:53:29
because I think this is important. People get confused with this all the time. Let’s go to bricks.getframes, and let’s go, yeah, let’s go log in there. Let’s do this, this, this, this, okay event we’ll go look at event Bravo. So I want to show you something. Templates people like this frame is broken, this frame, this frame broken. Okay let me go to event Bravo, event section Bravo view. Notice this is the source frame. This is what was imported. This frame is not broken. It was broken on that install because that install has some

1:54:11
shenanigans going on in the BRICS global styles, right? That broke the frame. The frame is not broken. The global styles defaults were breaking things, okay? So it’s an example of where you got to diagnose and you got to figure out and it should start with go look at the source version of the frame. If the source version of the frame, this is what we’re giving you that you’re importing. So something else could break it. Now it’s a matter of what broke it. The source frame itself is not broken.

1:54:42
But the frame that got imported into that site was broken because of the site. Now what’s going on here with this preview? Not real sure. We’re gonna refresh. Okay, it was just a refresh issue. So it’s almost like, you know when you call customer service and you’re like, my shit don’t work, and they’re like, did you unplug it and plug it back in? Okay, that’s refreshing the builder. Okay, just refresh the builder and see if it’s still broken. Because Bricks has a lot of, it’s not perfect, all right? Elementor, Divi, they all have these little hiccups that go on every now and then, right?

1:55:11
Refresh it, see what happens, start to diagnose, can you figure out what’s wrong? Okay. But as you can see, the person reported, what did they report? They reported it not working with query loops. Clearly this is working with query loops just fine. We whipped up a CPT, we looped it, nothing’s broken, everything’s looking good. Good. So I would say to, now if you need help,

1:55:41
this is where you go to the community. We have a fantastic community for helping with specific issues. This is where you go post in the community, but remember, remember, post a link so we can see it. Okay, if we can’t see it, we can’t help you. Okay, did Manny, okay, Manny is here. All right, regarding the color palette,

1:55:58
I was referring to the color scheme switch added on top of the site. I can’t understand how that works. Okay. Well, I happen to have one. Let’s go to here and let’s go back to 3.0 public demo. Okay, let’s get that in there and let’s visit the site. Do I not have it on this one? Where did I have it? Where did I have it? Let’s rack the brain. Where did I have it? giri.co and reader net no April v3 no March 2024. We’re close to March,

1:56:41
right? Let’s go to the visit site. No, Vince Training Bricks. I thought I just had April V3. Helps if I read the names. There it is. Okay. So this toggle right here, we’re going to go edit bricks, edit header. So this is a frames toggle switch. Okay. So you put the frames color scheme switcher in and then you can look at how it’s configured over here on the right side Or well, it’s really on the left, but I’m dyslexic. So that’s another instance Okay need to go, you know, take some vitamins or some shit okay, so the mode is toggle and We’re gonna use icons. I’m placing the icons inside We have the width of the toggle and offset roundness.

1:57:39
Look, I’m not even doing stuff with most of this stuff. You don’t even have to touch. Now you have the main scheme and the alt scheme. Now when you use custom icons, sometimes the bricks rendering has a little bit of an issue in the builder. So you can see, right? But you know, it’s the life of custom SVGs sometimes.

1:57:56
So what you want to understand is what is your main scheme? Let’s just start there. What is your main scheme? So if I open ACSS 3.0 and I go to color palette and I go to color scheme, this website is a light website. That means my main scheme is light. So I, and I tell Automatic CSS there, under current design, I choose light, okay?

1:58:22
Let me see, I’m living in the wrong place. Let’s move me over. All right. So I tell it, Hey, this is a light website. That’s what I’m doing right here with this little switch. Okay. Now I turn on auto color scheme, and that means that I’m going to respect prefers media scheme, which is prefers their operating system preference. Okay. Okay. So I know what my main scheme is. My main scheme is light. So when I’m doing my main scheme, what is my main icon? It is the sun.

1:58:49
Okay. And the alt is the moon, right? So my alt scheme is dark. That’s the moon. Now if your main scheme was dark and your alt scheme was light, you would have them flip flopped. You would flip flop them, right? Cause the alt is you’re going to the sun from dark, which is the main scheme. Okay. We got that. Now you choose your icon color, your background color, your ball color for each of those and that’s completely up to you but that’s the logic of the switch and now when you’re on the front end see I see the

1:59:21
moon I’m on the Sun which I can’t see but I can see that the you know I’m not on the moon right so I go to the moon and now I see the Sun as my other option and then the scheme is obviously switching back and forth now what else had to happen here okay so we go into color palette, open primary, and we can see right here top-level view that we have two colors. I’m gonna go to alt and I’m gonna show you what I did. All right, now you’re gonna say, Kevin why shouldn’t, why doesn’t this happen for you automatically? We might make it happen for you automatically, but there’s a lot of unknowns and so it’s even if we make

1:59:59
this happen automatically, I don’t know, it’s probably not going to apply to every person’s situation. Okay, so it might help some people and it might not help other people. Because remember, you can literally come in here and just choose a different color, right? So when I switch, it’s like not even going from like a light scheme to a dark scheme, it’s literally going from a gold scheme to a purple scheme, okay? And I don’t think I have any, let me refresh this. Let me go to, let me go to the homepage. Okay. So I just look, I just went to a purple scheme. This is why it’s called color scheme and not dark mode. Right. Cause you could actually just retheme things with this. Some people use it

2:00:42
in that fashion. Right. And look how easy it was to do that. It’s my alt site. Okay. Let’s go back into ACSS here. Now if you want a normal dark light situation this is what you do. You take your main color, you go to the alt tab, and you put it in. And you hit save. Now let’s just see what that did by itself. Okay. So I’m gonna get rid of our panel here and I’m gonna toggle. I’m gonna refresh this and make sure seeing see nothing happened why because my my main scheme color and my alt scheme color are exactly the same that’s a problem okay you’re not obviously we’re not switching between anything when both colors are the same so now we’re gonna

2:01:30
go to alt okay and what I’m gonna do is I’m gonna go shade by shade ultra light is the same as the other, as the main scheme, right? I want them to flip-flop because I want it to get dark. So I’m going to say all the ultralights become 5 instead of 95. That’s the complete opposite. Then I go into light. 85 becomes 15.

2:01:53
I go into this, what is this, semi-light. 65 becomes 35. I’m going to go into this one, semi-dark, it’s become 65. This is really, really fun as a dyslexic person, okay? I think we’re, I think these are right, 90 and then 48, okay? All right, save. So I just reversed all the shade values, right? Okay, now what did I do to my primary color?

2:02:19
Actually, what you should do first is choose a darker version of the primary color as well. So right now my actual primary color is not going to change, but anything using shades will change. And shades is what you’re, I mean, mostly using anyway. So you see that’s how, that’s exactly how it works. And the toggle is not even necessary, by the way, if you don’t want people to be able to toggle your schemes, that’s fine. If you just want it to respect operating system preferences, just don’t put a toggle. Out of the box, when you have that,

2:02:53
I’ll show you the switch again. So auto color scheme, this is what respects operating system preferences. Consequently, you cannot respect operating system preferences and just rely on a toggle. That’s a possibility as well. So it’s really any combination of color scheme is up to you. And like I showed, if you just want to, you know, if Bev is like, you know what, I would

2:03:15
rather see hot pink. Well, you can absolutely just make a hot pink scheme site. Okay. So my main scheme is elegant, and then my alternate scheme is god awful. Easy as that. Okay. Why does frames use basic text instead of rich text? Good question. Let’s go edit. See now I left that as a hot pink scheme and one day in a live stream I’m gonna come back and I’m gonna

2:03:47
go look at this colors and it’s just gonna turn hot pink and I’m not gonna remember why. That’s just you know the fun of sandboxes. Okay so right here this is a normal text element. This is a bricks question. This is not really a frames question Or an ACSS question look those two things look exactly alike, but they’re fundamentally different This only accepts one paragraph of text and you have to manually change this to P This one is called rich text and it can support multiple paragraphs so look at this. And there is no selector for the tag.

2:04:30
Why? Because the things you put in it are going to have the tags. Like this can even be a heading. Okay, now let’s go look at this on the front end. And let’s go look at this wrapper. So you’re gonna see a div. And you’re gonna open the div and you’re gonna see a P and an H2 and a P and a P and a P, right?

2:04:47
But this could be one paragraph or multiple paragraphs. So people ask us, they’re like, why would you use a single paragraph option like this, when you can use a rich text element? Well, I’ll tell you why. Here we go. Let’s I’ll just I’ll demonstrate it for you. So this is an intro, right? It’s an introduction to this content to this section right here. I do not want let’s say I didn’t have this, and I put in a rich text element, okay?

2:05:20
Rich text, bang, just like that. And I said, you know, does my ipsum work here? I wonder if my ipsum works here. Short, no, ipsum, ipsum, okay, I thought it would.

2:05:32
Guess not.

2:05:33
Does my other kind of ipsum work here? Ipsum, short, no, no, it doesn’t work either. All right website, it’s some calm There we go Let’s take that and go back go back paste. Okay, so this looks roughly The same thing it lost the class on here, which was lead. What was this inner inner lead something like that? Oscar something like that. Oscar. Inner Oscar lead. Okay, that was

2:06:06
the that was the class. Okay. And you’re like, Kevin, that’s that’s more or less the same thing that was already there. Why don’t you just give us this? Well, I’ll tell you why. Because I know that people will come along, and they’ll do this kind of shit. And they’ll come over here, and they’ll just paste this in. And they’ll do fucking that. And that’s just not a good decision. It’s nothing beyond one paragraph is a good decision in this area.

2:06:32
Okay? Even that is a terrible decision. Don’t ever do that. Don’t do that. That looks awful. That looks awful. Don’t ever do that. And I don’t want you to do that.

2:06:41
So I don’t give the possibility of doing that. Right? We make it kind of like, hey, hey, alert. This is for one paragraph and one paragraph only, right? Don’t do stuff like this. So there’s no reason to give the ability to do stuff like this, because it shouldn’t be done.

2:06:58
And if you want to break the rules, then you got to go through the process of deleting and putting in whatever you need to put in, okay? But by default, we’re going to give you the thing that should really be there. Look, there’s an example guys, of where I deleted something in the structure panel, and it did not go away.

2:07:15
That’s one of those little bricks hiccups that I mentioned. But if you unplug it and plug it back in, it will start working again. Okay, let’s do one more question, but that’s the answer to that.

2:07:29
Come on, it says frames will upscale them, okay.

2:07:32
Can we have words, fonts, change, like, color switch? Yes, there’s a way to do it with just words. Yes, there is. What do you currently use WP CodeBox for or will in the future? I don’t have it anymore. Now that I have ACSS 3.0, I don’t have it installed anymore, unfortunately.

2:07:51
I did like it, I did like it a lot, but I don’t use it anymore. Okay, all right, let’s hop back to chat. I think we answered all of our questions. And we’ll just say bye to everybody and make sure nothing is in the chat that needs to be addressed. Yeah, I’m sure the head was in the way there a little bit at some point. We need a tool that auto floats the head. It’s like, Oh, oh, he’s doing work up there. And it just moves me around. No way to automatically reverse color scheme for basic dark mode. Well, that’s what I said.

2:08:29
We can make it automatic. Now, you saw that it took me, what, you know, 12 seconds. Yeah. So it’s like, all right, we can make that automatic. We can save you the 12 seconds. Now in all fairness, it is 12 seconds per color. Okay. But it’s like, it still won’t work for everybody.

2:08:47
Because what about the people who want the pink scheme? That’s not going to do anything good for them, right? Or they might be doing something different with their scheme. And then do we know that you’re going dark with it? Because it’s not dark mode. You could be going light with it. So I mean we could auto reverse them so it wouldn’t matter in either direction. But then again it’s like, you know, it’s not going to work for everybody. It’s only going to work for some people. If you guys vote it up, like that’s a thing. That’s one of those things where I’ll be like,

2:09:16
okay, send that to the voting block, right? We’ll use democracy on that one. Okay, ACSS 4.0 has auto head moving, yes. Okay, I’m just reading, I’m just catching up on chat because I haven’t been able to see chat for a while.

2:09:44
Okay.

2:09:54
There’s some agent, there were some agency questions, guys, and I skipped those because it’s not an agency Q&A every week on WDD live. So next week will likely be a good opportunity for your agency stuff, or honestly, the inner circle is the best place for agency stuff. Okay, I think we got everything pretty much buttoned up here. Miss 20% of the elements on import is really fun seems to happen. Yeah so as Brendan says here like when you’re importing stuff from libraries and bricks sometimes like a thing will be missing. I’ve also had a thing import outside of the thing it actually belongs in. I don’t know if you’ve got you guys have run into that. So you know the bricks template library is not perfect but I mean look at other builders and stuff like look at oxygen. Oxygen doesn’t even have one. At all.

2:10:51
So, what we have with Bricks is like, it’s really overall, it’s a very good experience. You know, we can always complain about little bugs here and there, but, and it’s going to get better. We know it’s going to get better in the future. So, okay. I got to get out of here, guys. This was fun. Hopefully, you got something out of this.

2:11:11
We didn’t seem to have a ton of beginner questions today a little bit beginner questions I want to make sure the beginners are you know feeling comfortable getting started getting going if for some reason you still have questions about that side of things Don’t hesitate to ask them in the community. There’s there’s no dumb questions I mean it would be nice if you check the documentation first like You know go read the first like if you haven’t read the first sentence of the documentation it does get a little frustrating answering the same like all right that was in the documentation that was in the intro video like the watch this before you start it it’s literally

2:11:47
called watch this before you start ACSS that kind of thing okay but if it’s beyond that then there’s no dumb questions and we’re happy to help you in the community I will see you guys again very very soon April, April 22nd, set your calendars, April 22nd, we’re almost there, it’s coming quick. I gotta go clean up a bunch of stuff and that’s it. I gotta go clean up a bunch of stuff and that’s it.

2:12:12
Peace.