AutomaticCSS AMA (Ask Me Anything) & New Features LIVE Tutorial

0:00:00
We were just here. Had a long digital agency table talk live yesterday. Good to see everybody already joining in very quickly. Silent Phyllis here. Callisonics Ireland is here. We’ve got William. Got a bunch of people. All right. I think these are the comments from this stream. Hope they’re not from the other stream. Start throwing comments. I need to know in this particular live stream because this is an automatic CSS focused live stream. The reason I’m not live streaming on the ACSS YouTube channel for this is because I went to click to schedule a live stream on that channel.

0:00:50
YouTube was like, you’re not approved for live streaming. You need to apply to be able to live stream. So I was like, all right, apply. And it’s like, okay, that’ll be 24 hours. Thanks. So I could not get this done on the ACSS channel. But with any luck, we’ll be approved for live streaming. On that channel, we can do this kind of stuff over there. A lot of people have been asking for this. They’ve been asking for some walkthroughs of new features. They’ve been asking for some just basic tutorial work. But more importantly, they were like, dude, I just want to ask about certain situations. How do you handle these kind of situations with ACSS? How do we actually use this stuff? So we’ve got a silent fill.

0:01:31
Steve is in here. Andy, Rainbow, Tiny Tech Tox is here. Edward Marcus. We’ve got a lot of people here. So that is fantastic. To see, man, we’ve already passed 50. We are on, yes, then chat is burning up right now. What I’m going to actually do, I need to do a little test. I’ve never done this before. We need to see if we can elevate a, because I’m going to be taking questions from the chat. That’s going to kind of dictate some of this. I do have a little bit of an agenda with some of the features that I want to show. Some of the newer features. This is not going to be, unfortunately, this is not going to be a from scratch, like intro to ACSS kind of thing.

0:02:12
I can do that at some point. But what this stream is focused on is just, let’s look at some of the new features that have come out recently, how you would use those. I just want to take questions and just answer people’s questions and help you as much as possible, understand and use ACSS. If you’re not an ACSS user, you can ask questions about how is this going to help me? That kind of stuff. What I need to be able to do is I need to be able to elevate a comment onto the screen. I think that in theory, this is possible, but I’ve never done it before. I’m going to choose one here. I hope you will show a short briefing about the new classes from the last months, maybe some thoughts about frames and the best way to use it. If I click this button, oh, look at that. Hold on. Can I move it? I can make it bigger. Oh, there we go.

0:03:07
There we go. Okay. I think, see, that’s going to be so much better, isn’t it? Now, while I’m answering the question, the question I’m answering can, oh, it went away. Oh, no. Hang on. Does it only stay for like a minute? Let’s see if it disappears on me again. I know I can hide it from here. I want to make sure this stays. We’re almost at 100. We’re about to cross 100. This is absolutely fantastic. I love the fact that all you guys are willing to be here. It seems to be persisting.

0:03:39
I’m not, no, there it goes. Wait, I don’t, well, that’s the last comment. All right, so I can elevate a comment for a little bit. I’m going to have to dive into the documentation and figure out how we can keep these on the screen. That would be helpful to just keep them up there until I want them to go away. All right, man. We have got a lot of people. Okay, listen, I’m not going to, don’t just save your questions for a second. Okay? I’ve got an agenda. We’re just going to review a couple of manure features and then we’re going to open this up so that you can ask whatever you want to ask about automatic CSS. And I will do my best to answer the questions and maybe demonstrate some stuff. Okay?

0:04:19
And this is, look, this is, this is tough. I feel like Steve Jobs up here is like, is the software going to work? Like, you know, we don’t normally do this stuff on live stream. And we do have some beta stuff. And you know, there’s just, there’s hiccups from time to time. So we’ll try not to embarrass ourselves too much. All right, let’s go with, I’m, I’ve got a lot of people. I’ve never said ACSS is bug free. But hopefully we’re going to have a bug free experience today. We got Mateo in the house. He is the co-developer of automatic CSS. And if you do, and if we encounter any bugs here, if something is not working, it is Mateo’s fault and you can send him an email. All right, so let’s go ahead and get started on this. What I need to do is I need to figure out how to screen share.

0:05:08
Okay, so we’re going to do that. Okay, we should be good there. All right, you guys should be able to see what’s going on. So I got a little agenda here. We got eight little items to go through. There’s a lot of stuff in automatic CSS. But I want to focus on just a few of the newer things. Number one is this option that you’re going to find in the dashboard called Fix Paragraph Spacing. A lot of people are like, what does that do? That sounds, it actually, it may sound a little scary to some people. I don’t know, what are you going to be doing in my paragraphs? This is a very, very, very important feature. So we’re going to go over that real quick. We’re going to do a 12 column grid, just a little preview of 12 column grid and a little bit of the power of grids in automatic CSS.

0:05:52
This is especially useful for you bricks users because bricks has no native grid. It’s coming. It’s coming to bricks. But as of right now, it has no native grid. Big, big, big, big, big missing feature from bricks. But if you have automatic CSS, you are absolutely covered. There are no issues there. And you’re going to see that in action. Auto alternating grids. We might take a look at that. We might take a look at that. List none. I want to try to make sure it’s not, you know, stuff that, I don’t know. We’ll see if we get to that. List none, very important.

0:06:25
Very important list none. Especially if you watch my tutorials on cards and repeaters or query loops and things like that. Very often, semantically, things need to be lists, right? In the HTML, these would be an unordered list or an ordered list. And these are things that aren’t normal list items. Not things you would normally think of as a list. And when you make it a list, it screws up all the formatting. It adds auto padding. It adds, like, the browser does this, the builder does some of this stuff. And what we need to do is just clear all that nonsense out so that we can keep the thing styled the way we want to. List none is like magic. You pop it on and it takes care of everything for you. I want to take a look at how grid, grids with spans automatically reset when you want them to be one column.

0:07:08
We’re going to go over that. We’ll take a look at the new action color in automatic CSS and how you can turn on and off different framework components and then, and then we’re going to take a look at forms inside of bricks and WS form. This is another huge one that is just a tremendous time saver. And in fact, if you use WS form, which I highly recommend, it is absolutely hands down without a doubt undisputed best forms plug-in available for WordPress. If you happen to use it, the problem with using it in bricks is you cannot style it with bricks. And so if you don’t know CSS, you’re kind of stuck with WS. Now, here’s a little styling you can do out of the box with the customizer, but for the most part, you’re stuck. But ACSS, as usual, unsticks you. It doesn’t just unstick you. It makes it really easy and really, really fast.

0:07:58
And of course, we also support the bricks native form as well. All right, so you guys excited about this? Georgia sucks. Wait, wait, wait, wait, you’re not talking about my football team, are you? Number one, baby, you know you’re not talking about my football team. All right, pretty sure we’ve proven that we don’t suck. Can you explain how ACSS is? All right, hang on, hold your questions. These questions are going to get lost in the chat. Guys, this is going to, I got to be ready for the questions. Yeah, like Williams says, save your question for the second part of the show. Yeah, because I’m just going to, I’m going to miss them. Hey, chat currently is a way to restrict ACSS settings per user role. Okay, all right, we’ll get into that. Mateo can, he can be answering some of the other, you know, stuff that’s not really shown, you know, in a screen share.

0:08:48
He might be able to just answer some of that stuff in the chat. Okay, are you excited? Tell me you’re excited and we will get on with this. We’re going to take a look at fixed paragraph spacing first. John Brown, welcome. All right, we are excited. Let’s go ahead and get started. So fixed paragraph spacing, I want you guys to look at this right here and I want you to look at this right here. This situation just happens normally in both bricks and oxygen. This is Gutenberg content. You can know that because it says this is Gutenberg content, which basically means this is being pulled dynamically from the WordPress editor. This is not built in bricks, okay? And whenever this happens, you actually do this with the post contents, if I click here, you’re going to see this post content module in bricks.

0:09:40
That’s what pulls the Gutenberg content in. The problem with this module, one, you’re going to see that the spacing is all nonsense, right? There’s no spacing between my headings and my paragraphs. And that’s just unfortunate because you also can’t style this element. If you can, but you can’t because it’s actually a multi-element. There’s headings in there. There’s paragraphs in here. You can’t target them. So you have to effectively write custom CSS to get this to look the way that you want to or you can just turn on a setting in ACSS. And then that setting also does something interesting with this area right here. So what I’m going to do is I’m going to go into automatic CSS and I’m going to go to where this setting is found under the typography tab. And you’re going to see this little option right here.

0:10:28
Fix, paragraph, and heading spacing. And you see right now that currently that option is off. And here is the problem. So this is default. This is ACSS not doing anything for you in this regard. You have built a little container here. And in the container, or imagine this is a card or whatever, you want these items to be spaced evenly. Okay. So right now there’s no spacing between them whatsoever. You want them to be spaced evenly. So a really good technique here is to simply use a gap. You can use owl spacing. You can use a gap class or you can use a contextual utility class if you’re using frames. All right.

0:11:11
For those of you who are using frames of content gap. So I could do content gap, FR content gap, and that’s going to automatically space everything evenly. I could use owl M to space everything evenly or S or whatever, you know, small, medium, large, extra, it’s very easy. Or I could use gap. Let’s do a gap of S. So I want a small gap between all the elements. You guys see this? How you just get automatic even spacing between your elements? Until. Until there’s this problem, a huge problem. In fact, watch what happens because this when you add text to a builder, it is want, want, look, it’s a div. This is not a div, my friends.

0:11:52
This is a paragraph. This right here is not a div. All right. So for those of you slouches out there, I’m going to call you out. You just add text willy nilly and just keep it as a div. Your semantic HTML is off my friend. So in order to make this semantic HTML accurate, you’ve got to change these to paragraphs. All right. So we changed these to paragraph. Oh my gosh. What has gone on with my even spacing? My beautiful even spacing that I had is now all sorts of lacked out. Why? Because this is a paragraph and it’s been given bottom margin either by bricks or the browser whatever.

0:12:29
Okay. There’s a problem going on here. I am not allowed to have even spacing in this container thanks to builders and browsers and so on and so forth. So that is where automatic CSS comes in. Because you don’t want this nonsense happening. You want to control the spacing of your elements. That is why you are the builder. We don’t want these things just happening willy nilly. So what I do is I go in and I just toggle this on. And you’re going to see that when you toggle that on, you also get two other options. We’ll talk about those two other options in just a second. But I’m going to hit save changes. And then what I’m going to do, moment of truth, we refresh on the screen and look at this. I have my even spacing again and all my gosh, my Gutenberg content has fixed itself.

0:13:12
All of my paragraphs, all of my headings have the exact spacing that I want. I refresh the builder and we’re going to see the same thing happening inside of the builder. Nothing has that extra default spacing. This is a very intelligent technique that is going to preserve all of the spacing on your site. And then like I said, it actually gives you some extra controls. Personally, I like it with like blog content or Gutenberg based content, long form content. I like there to be extra gap between my headings and the paragraphs above them. And what I’m going to do is I’m going to come in and that’s where these two controls come in. This number, this one right here, default paragraph spacing, what do you guys think that does? Controls the spacing between the paragraphs. Very simple. Just like it says.

0:13:59
So see these two paragraphs right here? That is a one in gap controlled by this field right here. You can adjust that if you want. I want my heading spacing to be different. The heading spacing is the gap between the heading and the paragraph above it or whatever element happens to be above it. Notice also very important that the first heading does not get any margin above it, right? That is very important. Notice that the last paragraph does not get any spacing below it. So when you also, when you have this feature on, you’re not going to get any spacing where you don’t need it, which is also part of the unintelligent, like let’s say, default of these spacing types. Your paragraph, your last paragraph will have extra spacing. So that’s something that we avoid with this option as well. But check this out.

0:14:49
So I’m just going to exaggerate this by changing this to 2M. Now I really wouldn’t do this, but it’ll exaggerate the effect and show you what happens. So now I have made sure that all of my headings keep a little bit more distance. They’re doing their COVID thing right now. They’re keeping their separation. They’re six feet away from other content on the page. All right, we got our social distancing and effect with our headings. So we’re going to go back and save changes here. And then we are going to go to the front end and refresh. And I am back to 1M. So that is fixed paragraph spacing. I highly, highly, highly recommend if you like even consistent spacing that you turn on that feature in automatic CSS. All right, let’s go ahead and check out 12 column. First of all, any questions?

0:15:38
Any questions about fixed paragraph spacing? And if you read the chain, there is more going on with fixed paragraph spacing and it’ll explain it to you. You can go read all about it, but that’s the main gist of it, right? Drops mic, moves on with life. We’ll put that on the screen for a second. Okay, let’s go with 12 column grid. All right, so I think I can get this out of here, right? You guys get the point on that. All right, let’s go ahead and add a section and let’s take a look at 12 column grid. So we had before 6 column grid. 6 column grid is one of the kind of a standard in frameworks, but 12 column grid is much, much more powerful. And it’s more powerful specifically because your ratios are more controllable. And so let me do a little example here of a normal grid of what you have available to you.

0:16:30
I have 6 columns max, right? Well, if I have two elements in here, let’s go to image image. We’re doing all this unscripted. I don’t actually know the best way to explain this to you guys, but we’re just going to roll with it. We’re going to go off the cuff. We’re going to see what we get here. All right, and I’m just going to stretch this to make sure that they’re all equal height. Okay, so I have 6 columns to work with. Now there’s other ways to do this. I’m just showing you, because the concept of 12 column grid really relies on spans and starts and things like that. And a lot of you may not even know. You’re like, I don’t even know how grid works, dude. I don’t know.

0:17:08
This is over my head. Don’t worry, I’m going to bring it back down to earth for you in just a second. But I just want to show a little thing about ratios. So 6 columns to choose from. That means if I have two columns, both of them need to add up to 6, right? So I could do 4 plus 2. Yeah? I could do 3 plus 3. I would give me 2 even columns. I could do 2 plus 4. All right, so let’s just take a look at this. So I’m going to do a call span. So there’s with grid, there’s spans, there’s starts. That’s basically what you need to know. And then there’s ends as well.

0:17:41
So you can choose where a column starts and where it ends. You can choose how many columns it spans in the grid. And that’s pretty much what you need to know about grid. All right, so column span, if I do 4, it’s going to span 4 of the 6 columns that I asked it to have. Now, let’s stop that from stretching. Let’s go to cover. Thank you if that’s going to offend my OCD for the rest of the tutorial here. All right, so this one is spanning 4 columns. Guys, what does this have to span to take up the rest of the space? We’re all good at basic math, right? I’m terrible at basic math, but I can still do this. It is 2. So we have 4 and 2 make 6. That is a specific ratio.

0:18:20
If I only have 6 columns to choose from, I’m limited in my ratios. And sometimes when you’re dealing with text over here and an image and you’re like, I just want to find a perfect ratio, you don’t want to be limited. You want to have more options available to you. I don’t know why my text messages are going off. Okay. So 12 column grid gives you those ratios. Now, just so you’re not super confused in thinking, wow, this is hard to build a grid in automatic CSS, it’s actually not. If I wanted the basic ratios, like let’s say a 3, 2, I can simply do grid 3, 2. And I automatically have it. So now when I add my images in and if I can type, I’m going to add both of those in, I can probably just keep them in. I don’t need to be deleting stuff. All right, insert and we’re going to insert this one again.

0:19:08
There we go. Perfect. And we’ll make sure that we cover this. Okay. So there’s my 3, 2, right? With just one class, I got to 3, 2. So there’s my grid 3, 2. And then you’re probably wondering, all right, but when we go to mobile, like what’s going to happen, well, it’s going to stay 3, 2 forever. It’s not going to squish your content. Now if you want the content to stack, that’s no problem, right? So we have these breakpoint classes. So these are the breakpoints in their label. This is an Excel breakpoint. This is an L breakpoint.

0:19:37
This is an M. So extra large, large, M, S, medium, small. Get it? So if I’m at medium and I want these to stack on medium, I don’t even have to be here, actually, I can put this class on anywhere because classes don’t affect breakpoints, right? Here you, the breakpoint you’re on, like if I did styling in here, it would only be at this breakpoint in below. I can assign the class anywhere, and it’s going to apply. The code of the class is what applies at the breakpoint, okay? So if I want medium breakpoint, one column grid, I simply write grid, M for the M breakpoint one. So I’m instructing it to be one column at the M breakpoint, and you see that it immediately stacks, okay? So that is how you build a responsive grid very quickly in automatic CSS. So if I was doing it from scratch, let’s do this again.

0:20:27
I’m going to take those classes off. So I’m like, you know what? I really want a 3, 2 grid here, all right? Grid 3, 2. And at the M breakpoint, I want it to be one. So I’ll do grid M one. And then I want all the columns to be equal height. So I’m going to hit stretch. And I’ve got my responsive grid. Do I want to gap on the grid? Okay, I’ll do a gap of M. There’s my medium gap right there. And now here we still have 3, 2 because we’re at the L breakpoint, but when we get to M, we are going to stack, and it’s going to stay stacked because that’s how CSS works. You could in fact change it back to a different column structure at the S breakpoint if you wanted to with ACSS classes.

0:21:02
You can do whatever you want, right? But this is a standard use case of a grid. And by the way, this will continue just going down and down and down. It will keep the same structure forever in time. But you don’t have to duplicate the grid or anything like that. You just keep going with your content inside the grid, and it’s going to keep following the same exact structure. All right, we don’t want to delete that last one. All right, now 12 column grid and some of the more advanced things that we can do with 12 column grid. So what I’m going to do is I’m going to take off those two. I’ll leave my gap of M. Actually, let’s take off the gap for now. Because we’re going to do a little something with overlapping here. Because a lot of you are like, you probably don’t even know, you can overlap content with CSS grid.

0:21:48
And what you may not know is grid is often the best way to overlap content. So let’s take a look at that. So what I’m going to do is I’m going to just put a 12 column grid on here. And basically, when you do that, you have a blank slate to now manually construct this grid. I’m not going to put 12 items in the grid. I’m going to stick with my two items. And we’re going to see what we can do to manipulate this grid and create maybe some overlapping content. All right, so and you’re going to see with 12 columns how much control I have over my ratios and of the overlap effect in general. So the first thing I’m going to do is I’m not going to use spans now. You saw me using spans a minute ago. What I’m going to use is column starts and column ends. If I tell this image, I want you to start on column one and I want you to end on column whatever, it’s going to span that many.

0:22:47
And then if I tell the other one, I want you to start on this column and end on this column, it’s going to do exactly what I’m telling it to do. And then there’s one little thing in here that you have to understand about grids to get content overlapping if you want. But let’s start out really simple. So I’m going to do a column start. So it’s column start of one for this purple image. That’s the one that I have selected right there. And I’m going to do a call end of let’s say eight. Okay? So that’s actually spanning seven. Let’s you call end of nine. So I’m going to do call end of nine. The one thing about grid and this because I’m dyslexic, I always think about it like five times extra.

0:23:28
If you wanted to span eight columns, it has to end on nine because it ends on the start of the next column, if that makes sense. Right? So if you wanted to span eight, you got to like add one. You got to say I wanted to end on nine, then it’ll span the full eight. Okay? That’s one little caveat there. Now what’s cool about this image over here, if this one ended on nine, I can start this one on nine, right? Call start of nine. And then I can say a call end and I actually don’t have to do any math here. I can just say last call end of last. And it’ll just go however many columns are left. It’ll take up the rest of the space. And now you see I have just side by side content like I had before, but I have complete control over this ratio.

0:24:15
Now I could achieve this with spans as well. I could have said call span eight and call span four or whatever it is. And it would have done the exact same thing. But if I want to overlap things, I can’t, I don’t want to use spans. I want to use the starts and the ends because I have a lot more control over what’s going on. All right? If we want these two things to overlap, this one, remember, spans eight, right? So it ends on nine. I need this one to start before nine. So if it starts at nine, it’s just going to be next to it. If it starts before nine, it’ll like it should, they should, they’re trying to take up the same cells, right? And in that case, it should overlap kind of. Okay?

0:24:55
So here’s what we’re going to do. I’m going to take off call start nine and I’m going to start it sooner. So I’m going to say I want you to call start on six. And this is what you’re going to see. This is the amount of overlap you would get. The problem is grid items do not want to overlap by default. They try their absolute best. They will even shift themselves around in the dot in the order of which they appear to try not to overlap. But you can force them to overlap. The trick is that you have to tell them both. You have to instruct them both to start on the same row. So right now it’s like, oh, there’s not enough space. I’m going to go occupy row number two because there’s not enough space in row number one for what you’re asking me to do.

0:25:38
But if you tell them, no, no, no, no, no, no, you both got to be in row number one, then they’re going to listen to you. All right. So we’re going to do row start one. Very simple. Row start one. Look at that. It was like, no, no, no, no, no, I still don’t want to overlap. It’s because I need to instruct both of them. So I’m going to grab this one too and be like, no, you two. Okay? So row start one on this one. And now we have overlapping content. Now, it depends on the size of things, right? You’re not seeing any difference because these images are the exact same size.

0:26:08
I mean, obviously you can tell that it’s overlapping. So let’s bring in another class into the picture. Another aspect of aspect. You’re going to see that in a second. Another aspect of automatic CSS, just showing you how much stuff you can actually just do with utility classes. I would like this purple image over here to be an aspect ratio of one to one, which is square. And then what I’m going to do is I’m going to take off the stretch class. Because remember that stretch is trying to make all the items the exact same height. Then what I’m going to do is I’m going to align items to the center. These are flex box controls. So if you don’t know flex box, there’s a little bit of a learning curve here, right? But now I align the items to the center. Now I have a square image over here created by my aspect one to one ratio.

0:26:57
And I’ve got a normal image over here, but it’s a line center. They’re overlapping each other. I’ve done all of this with just some utility classes, right? I don’t need a grid builder. I don’t know how to write grid. I need to know how to write grid. I can just do this stuff with utility classes. And it’s also very, very responsive, right? Here’s the thing with overlaps with grid. Amazing responsiveness. When you use those like negative margin techniques and all that other stuff, guess what? That’s the shifts around depending on the size of the screen, right? The grid, because the grid’s getting smaller and everything is controlled and contained within the grid based on ratios and such, it’s just very like your shit doesn’t break. Right?

0:27:44
It does with some of the other overlapping techniques that you might run into. And guys, same time, right? We can still go down here and be like, well, I actually want this to be, I want all this overlap to go away at the L-break point. Okay. Let’s see. We’re going to change this structure. What is comp bricks? What are you doing, dog? Bricks is having a seizure. Look at this. Let’s do grid L1. So we can go at the L-break point. You’re going to see that it goes to one column. And then we just need to take this one right here and be like, you know what?

0:28:18
At the L-break point, I need you to start on row two, because right, remember, they’re still trying to occupy row one. So now just like two little classes there, and I’ve gotten rid of my overlap. And if I want to, I can put my gap on there now. And I also want you to see how the gap would influence the overlap, too. Okay. So if we put a gap of medium on here, it’s going to slightly change the ratio. And then when we go down to the L-break point, you’re going to see that we have a gap between our items now. So you can even use gap to slightly adjust ratios of overlaps. And you’re still going to have no problems with your responsiveness. Everything’s going to work exactly the way that you want. So this is 12 column grid. I mean, this gives you tremendous control over the behavior of items in your grid. And this is just a basic example.

0:29:06
If we put more items in here, we can do a lot more things with it. All right. I need to revisit our chat here for a minute. Let’s see, bricks just too excited for all this ACS-S goodness. Absolutely. All right. I feel like the other page builders made me dumber. This is like God mode for page builders. Absolutely. Oh my God. I’m actually understanding this. Oh, that fantastic, Andrew. Fantastic. I love it. I love grid is not like, you know, it’s, it’s, when you’re a beginner, when you’re new to grid, it can be very, very overwhelming.

0:29:39
I’m going to give you guys that. It can absolutely be. We’re almost over 150 watching live. That’s absolutely fantastic. Yeah. And so ACS-S makes grid easier, but I’m not saying there isn’t a learning curve. I mean, you’re going to have to play around with it a little bit. Yeah. Like I said, you have to understand what a start is, what an end is. You have to understand that there’s columns and rows that you can start things on different rows. You can start things on different columns that grid doesn’t want to overlap by default, right? So you have to force it to overlap. There’s some, there’s some learning curve.

0:30:13
But using ACS-S and learning how to build a grid with ACS-S, I mean, it’s going to be light years easier than actually diving in and learning how to write CSS for, for grid. Will this work the same for us that never left oxygen? Of course, my friend. Of course. Yes, ACS-S works in oxygen, exactly the same. Oxygen is still fully supported by automatic CSS and will until the end of its time. Okay. We got a lot of good comments. Let’s keep rolling and rocking. See, that’s my dyslexia right there. So auto alternating grids, I don’t know if we want to tackle that. Yeah, I don’t know if you guys are ready for that yet. Let’s go with list none. Let’s delete that.

0:30:54
Okay. So we’ve got that going. Let’s take a look at list none. So what’s the easiest way that we can go about this? Let’s throw a container in here, first of all. And let’s do grid 2, 3. Actually let’s just, yeah, okay. I was thinking about throwing a frame in there. Now, some of you will like the fact that we can just build some of this from scratch slowly and you can kind of see it take shape and that still kind of helps people. We don’t want to use too many shortcuts. All right. So I’ve got two blocks side by side in my little grid here. And see if you didn’t, if you weren’t paying real close attention, you’re like, oh my god, are you already made a grid?

0:31:36
Yes, I already made a grid. It’s very easy. All right. So you’ve got your little grid here and this is just like a content on the, on the side. So we’re going to put like a list here. And this would be a good, I’m going to put another block in here. Okay. So see this block right here, this is going to be our list. And then I’m going to put another block in there. And that’s actually going to be a list. Oh, geez. I just, okay. Good. Okay. So I’m going to put a list item, right?

0:32:03
So if you know HTML structure, you have your lists and you have your list items. I’m going to go ahead and save that. All right. We have got to stop with the text messages. I thought I put myself on do not disturb. Focus. Focus mode. Does that do it? Do not disturb. There we go. Okay. That may help us. All right. So I’ve got my list and my list items. I’m going to show you guys the HTML output in just a second.

0:32:30
Maybe this would be helpful if I actually put some text in our list item. So this would be our label. So we could say label. Okay. And that text will say that this is a list item right here. And this can be a span. So we’re just going to span that. Because it’s not a div, guys. Like you’ve got to remember bricks tries to make everything a div. Everything that you add to the thing is going to be a div. So you’ve really, if you’re focusing like you should be on semantic HTML, you’ve got to be changing some of these things. All right. So list item. What does that need to change to?

0:33:02
Well, it’s not a div. Clearly, it is a list item. Otherwise known as an LI. And then if we have a list, what is that? It’s not a div. It’s not a div. It’s a UL. It’s an unordered list. So unordered list. And now you see the problem. Okay. Now this is like just a standard list. So we’re getting an issue where it’s given us like default padding and all of this other stuff. Okay.

0:33:28
So I’m in and I can say list none. And all of the default nonsense goes away. The bullets go away. Whatever happens to be there. If there’s numbers, they go away. If it’s an ordered list. Because you’re basically saying list none means I want no styling, no default styling on this list. I will take care of the styling of this list all on my own. Now that’s like a standard list format. Now let’s take a look at another format where you would have. Let me quickly change this grid. Let’s do a three column grid. We’re going to do grid three. And then we’re going to duplicate this block.

0:34:01
And so now you can see I have my three blocks, right? There are very often times. Let me show you on our new. This is my agency redesign site. If I can type in URLs properly. All right. So we’ll pull this up. And let’s take a look at like if I go to my latest projects, project details. Okay. This right here. See these labels? These are a list. These are, this is a UL with LIs. Well, I don’t want these things at bullets and weird spacing by default going on. I want to style them myself.

0:34:36
I want to just space them out myself. Very clearly a use case event. Let’s go to about page. Let’s scroll down. See this team section? Guys, this is a list. This needs to be a list. This is a list of team members. Symantec HTML asks you to make this a list. This is not a grid of divs. It is using grid, but these are list items. Every card is a list item in this unordered list. That is better for accessibility. It’s better for a lot of different things. The problem is you make these cards and these containers, URLs and LIs like I’m about to do.

0:35:13
So see this container right here? I’m going to make this a UL. This is what you’re supposed to do. Look already. It’s got this weird margin going on over here. And then I make this an LI. And LI. Now, if I use background color here on this, let’s do like BG base ultra light. And then let’s just add. This is not how you would actually build these sections. I’m just quickly whipping this up. And notice like a chump, I’m going one by one because there’s no custom class. I’ve not made any custom classes here, right? This is why you would never want to do it like this. But I just want to demonstrate.

0:35:48
If you guys can see that, in fact, let’s make it way more obvious because screen share lowers the resolution on stuff. Let’s do BG primary. OK? There you go. So you can see what it’s done to me. I’m here I am just trying to make a nice little grid. And I’m just doing things the way I’m supposed to do them, making URLs and LIs. And I got this nonsense going on. What is this? What is this? Nobody needs this, right? It’s just trying to do stuff for me. I don’t really need to do stuff for me. So what I’m going to do is I’m going to grab my little container here.

0:36:20
This might unorder lists. And I’m going to be like, no, no, no, listen. Get that out of here. Right? And so it just fixes it for me. So I can just keep moving on with my life. I don’t have to worry about go writing custom CSS to target that URL and remove the default, yada yada yada that’s going on with it. I don’t have to worry about any of that stuff. I put on list none and I move on with my life. So these are time savers, right? They just, over the course of a build, the amount of fuckery as I call it that you’re going to run into with some of this default stuff going on. ACSS is like an anti-fuckery framework. It’s a big benefit of it.

0:36:55
It’s just anti-fuckery. So any issues that you’re having like that, ACSS probably has a fix for it. You know why? Because I’ve run into that nonsense before. And I was like, there should be a fix for this. And so I put in a fix for it. We saw that with the fix paragraph spacing, that very first feature, right? Same kind of deal here. All right. Does that make sense to you guys? Is that, that should be fairly easy to understand. Okay. How did you come up with names like owl for the owl spacing? Because in CSS, it is, there’s a technique. This is solving even spacing between elements in a container has been a problem since the beginning of time.

0:37:34
And before FlexBox actually supported GAP. See, now FlexBox supports GAP. You actually don’t need to use owl spacing anymore. Owl spacing will be deprecated very soon in automatic CSS because it’s no longer necessary. FlexBox supports GAP now. So you can use GAP for even spacing. But before we had GAP for FlexBox, we had to use other kind of like, you know, we had to use ingenuity. And it’s like, how can we automatically spacing? And so what the technique is is called the lobotomized owl. And it’s a star plus star selector targeting paragraphs. And if you look at a star plus a star, it’s like owl eyes looking at you on the nose, right? It’s called a lobotomized owl. And so when I was making the classes, I was like, oh, it’s called owl spacing because then everybody will know what owl spacing is if they know about the technique.

0:38:26
Okay. All right. Good, good, good. So let’s move on. I think everybody’s saying that they are getting it. They’re understanding. I’m going to delete that. Okay. Grids with spans automatically reset at one column. So let’s add a section. Let’s add grid to column grid. Let’s do a four column grid. We have grid four. And I will whip up a card with pure utility classes, not custom classes. So you can see somebody thumb down.

0:39:00
What are you thumbing down right now? There’s not a thumb down right now. There’s not a thumb down right now. All right. Maybe you were thumbing down the fact that I’m about to make this purely with utilities. I’m on the same page with you. I’m on the same page with you. All right. So gap of M and I’m going to add a block. Okay. So remember, I’m asking for four columns and I’m just going to do a BG of base on here. Let’s do base ultra dark because I have my shades at all times to choose from. So I’m going to do base ultra dark. So it’s an ultra dark version of my base color. And did I put on four?

0:39:33
Okay. Does look like four. All right. So now what I’m going to do is I’m going to do pad M because that’s going to be medium padding inside that card. I’m going to do text white, which is going to give me white text inside that card because it’s a dark card. I should probably have like light text, right? Now I don’t have to do white. Remember this is base ultra dark card? Well, what if I want base ultra light text? So now it’s in the same color family, right? So it’s light, but it’s in the same color family. That often looks a little bit more refined than just making everything white. All right.

0:40:03
So let’s just add some things here. So we’re going to do a little heading action. We’ll do a little text. We’ll do maybe a little link action. Yeah. Like let’s do. Let’s do a button. Okay. Now what I’m going to do is do a button action. That’s my action color for my button. And then you see it’s just inherited some styles. That’s all controlled by the back end of ACSS in the dashboard. Now what I’m going to do is I’m going to add a gap of S and that’s going to space everything out. I’ll say this is a little text and then we have my heading.

0:40:35
So we’ll just say this is a card heading and we’ll say click me. All right. Something like that. So now what I’m going to do is I’m going to. So let’s just go ahead and let’s just you round it in. We’ll give this a little border radius action there. Hey, how about we just drop a little box shadow on there too. So this is a nice little box shadow and then we will duplicate. And so now we’ve got our cards made, right? And this will duplicate for the end of time because it is a grid. So let’s talk about call spans and breakage of the grid because you can definitely break grids if you’re not careful. But with this new feature, grids with spans automatically reset at one column. You get, there’s, you can’t break the grid. When you, at least when you go to one column, when you go to two columns, you can still break the grid.

0:41:23
Let’s get rid of one of those cards. All right. I want this card right here, this first one, to span two columns. So guys, what am I going to type in? Call span two, right? That’s one of the benefits of automatic CSS is it’s, it’s semantically accurate. It’s not like MB-X, like none of that nonsense. Okay. It’s just, you just use the words. That’s it. Call them span two, call span two. That’s all I need to do. So I do call span two, look, I get a bigger card than I get little cards over here. Okay. Making sense?

0:41:57
Now, this card is being instructed to take up two columns. If I change this grid structure at L, like let’s say at L, I want only two columns. Right now it’s still four. Okay. Okay. Grid L2, because at the L break point, I want two. So I’m going to hit that. This still takes up two columns. Now what if I go to M, and I’m like it M, I want one column. So now I’m going to say grid M1, just like that. Now normally, normally here’s what happened, what happened. This one, look, you can see the class call span two. It is being instructed to span two columns, but only one column is available. Now you don’t see a broken grid, because automatic CSS has jumped in and taken care of it for you, right?

0:42:49
It’s like, dude, you’re trying to get this to span two. There’s only one available. So what we’re going to do is only have it span one. And so you don’t have a broken grid. But before, you would break your grid, because what CSS grid does is it says, hey, I know this container is supposed to be a one column grid. Since you have an item in that grid that’s asking to be two columns, and what CSS grid will do is it will create what’s called an implicit grid cell. And so there will be basically a blank holding spot for that extra container, and it will look like a gap in your grid. And then people will come in, and they’ll send in support tickets to be like, my grid’s got a gap in it. The gap’s applying to the side of my grid. What’s going on here? And it’s not.

0:43:32
You ask items to span more columns than are available. And so the grid is creating implicit columns, which show up as gaps in your grid. Well, what you would have to do normally is this card that you said call span two, you would have to go in here and say call span, im one. Wherever you ask the grid to be one column, you would have to make sure that this child is instructed to only span one column. It resets the span. You don’t have to do that anymore. Make CSS just realizes, oh, shit, there’s only one column available. Every child then gets a new instruction to only be one column. All right. And so there’s never any grid breakage. It does that for you on the back end. You don’t have to worry about it. So that’s that feature right there.

0:44:16
Number five, does that make sense? Or do I need to clear that up anymore? Hit me up in the chat. Let me know if you guys are following along. Am I going too fast? Am I skipping anything? I know like depending on where you’re at with all this stuff, it can be sometimes, it can be hard to keep up if you’re on the beginner side of things. I’m going to take a little sip. Drop your comments, isn’t making sense. A little bit, seems to be a little bit more of a delay today than normal. All right. Well, I’m going to keep rockin’ and rollin’. So grids with Span Donnamackley, Reseta One Column, we covered that. How about our new action color?

0:45:03
All right. Let’s go into section here. And action, here’s why action was born. Action was born because a lot of people were a little confused on primary color. We used to use the primary color as the website’s action color. And here’s the thing, in all these different design systems that are out there and schools of thought and everybody has different names for their colors. And primary is often used in other contexts. And so people didn’t like the fact that in ACSS, primary was used as the action color. Number one, they wanted more context to that color. Number two, they just wanted another color to work with in general. They were like, I want to be able to use primary for other things other than my action. And so our solution to give people an extra color to be able to use and to provide context to the action color was to create, get this, an action color. Okay.

0:46:02
So we have action now. And if you’re adding a button to your page, we’re going to add a button here. And you’re going to notice that it just, this is default bricks button. But the minute I put button action on here, it becomes an action button with my action color. So I’m going to go back into automatic CSS. I go to my palette. Look, this is my action color right here. See that? Okay. Now we look at it on the front end, right there, or this is in the builder. Let me close that one. Let me close that one. So there is the, it’s inheriting the action color. It’s also inheriting some styles.

0:46:33
If you go to buttons and links, there’s all these default styles, right? So you can see I have a minimum width set on my buttons. I have specific button padding. I can use a custom button text size if I want to. That is responsive, by the way. You set a minimum and a maximum and it makes it automatically responsive. You go into your button styling here. I can change the line height of my button text. I can change the letter spacing of my button text. Everything is controllable from this dashboard right here. If I want to mess with my borders, see I have a 10 pixel border radius. That’s why you see a 10 pixel border radius right here. And all of my buttons, by the way, are keeping this same shared styles, let’s say. So if I did button primary, I get the same styles, but with the primary color. If I did button black, like that, I get a black button, but with the same shared styles.

0:47:25
So all of your buttons, and let’s go ahead and space these out. So we’ll do gap S. All of your buttons stay very, very consistent even when you outline a button. See the button outline class gives me that outline button that I can use if I’m creating like side by side buttons and you want one to stand out more than the other one. You can switch to like an outline style. This is all very, very easy to do with utility classes and automatic CSS. So that is the new action color. Now along with that, you have of course text action, right? So let me duplicate, actually we don’t want to duplicate. We just want to, let’s create a new container. I’ll show you a contextual utility class, which is container gap. So we have our container gap, put the gap between containers. That is controllable via the frames dashboard. You have your container gap right here.

0:48:15
Your content gap, your hero padding, your grid gap, all of these contextual utility classes are adjustable from the dashboard right here. Just a little side tangent. Okay, so if I put in text right here, like this, well, please put it in my container. Thank you. Now I can do text action. So if I wanted to action color my text, I can do that. If I wanted to change the, let’s see if this works. I haven’t even tested this. So notice that I, let me get down here with my keyboard. Okay, these are not real links yet. That’s going to be a problem. So let’s do internal post page of Hello World, whatever, sure, I don’t care. Internal post page. All right, we just need to make sure that these things are actually links.

0:48:59
Okay, and let’s go over here, internal Hello World. Okay, so we have four links right there. Boom bang done. Let’s see if I can, there you go. Now I get my keyboard focus. Okay. Here’s another thing that automatic CSS does for you. This is another thing you can customize with automatic CSS is your keyboard focus style. Now some, there are times where you might want to change your focus style, right? And so we can just go to this container right here and so we can say focus and I want to say maybe black. All right, so let’s save and let’s see. We’re going to keyboard focus. Look, I have a black focus style now. So for those of you who are using the, you know, a color like action, which you probably wouldn’t want to do this, but if I do BG action, you’re going to get a background color of your action color.

0:49:50
And now what’s going to happen is your keyboard focus, you won’t be able to see it unless you change the focus color. Do you guys know how to change the focus color of stuff with CSS? We don’t need to. You could just put the focus and then choose one of your ACSS colors and it’ll change the focus color of your elements so that you can always see your focus regardless of what the background color is. So that is the new action color. You get all of your shades and opacities, of course. So if you do BG action, you get your dark, your hover, your light, your, the transparent versions of all the light colors, the transparent versions of all the dark shades, everything is there for you. That is the new action color. All right, let’s check on the chat. We’re going to start taking questions here in just a second.

0:50:36
All right, sounds great. Native, what would happen if you deprecate owl spacing to current elements that use owl spacing? So when we deprecate something in automatic CSS, we haven’t deprecated anything yet. But my plan for deprecation is that we take the deprecated styles and we retain them with an option in the dashboard. That’ll take us into our next thing where I was saying, turn on off framework components. Let’s go take a look at that. So I’m going to go into options. Guys, you can turn on or off any aspect of any major aspect of automatic CSS. You don’t want to use the background classes or whatever, turn them off. You don’t want to use the margin classes, turn them off. You don’t want to use the box shadow classes, turn them off. And this is going to remove them from the framework, not just disable them. It’s going to remove them from the framework.

0:51:27
If you took all of these and turn all of them off, you would have 90% of the framework gone. So for those of you who care about that a little bit extra performance, automatic CSS is already a very light framework to begin with compared to other frameworks. And when it’s g-zipped and all this other stuff, it’s very minimal on the performance of a website. We easily score 95, 96, 97, 98 out of 100 on mobile on Google PageSpeed Insights. OK? Some sites can get to 100. It has very, very minimal effect on performance. But even if you’re like, I want to eke out every KB that I can possibly eke out, then you can come in here and just turn off anything you want to turn off. You can also, by the way, if I go to Palette, you’re like, hey, that new action color, I don’t like it. So, OK, good.

0:52:21
Turn it off. You don’t have to have it, right? You can turn off primary. If you only use two colors, let’s say it’s only action, primary, and base. OK? So I can turn off accent. I can turn off secondary. When I turn off secondary, every variable, every class associated with secondary, whether it’s a button class, a link class, a text class, they all disappear from the framework. All of that bloat is gone. OK? So you can really tailor this performance wise to what you’re using on the site. Now there are some frameworks that are the auto-detect the classes that you use and all of that. It’s a little bit, it could be problematic.

0:52:58
OK? So this is a much more, you’re in control. And if you turn off something that you’ve used, I mean, so sorry. Like you’ve obviously done the wrong thing. Turn it back on and it’ll come back. But if you know you’re not using it, go ahead and turn it off and it’s going to lighten the framework. Very easy. You go to buttons. Check this out. Button function out. You don’t want to use buttons at all, like all these buttons, this button stuff going on in ACSS, I don’t want anything to do with it. OK? Turn off all the button functionality.

0:53:26
You can absolutely do that. Or you can come down here and say, well, I use action buttons and I use black buttons and I use white buttons. I don’t use anything else. OK. Cool. We’ll turn off the base button, turn off the accent button, turn off the secondary button, turn off the primary button. Now you’ve got action, black and white. And save changes. You just lighten the framework up for stuff that you don’t intend to use. It’s as easy as that. So this is very, very, very good for performance tuning here. And that takes me back to your question that you’ve just asked. When we have deprecated styles, what I imagine will happen.

0:54:03
Is there be a little option right here in this options panel and it’ll say deprecated styling and it’s on or off. And so if your site uses something that was previously deprecated, you can keep this on. If you have a brand new install and you’re like, I ain’t using anything that’s deprecated, then turn it off. And you won’t have to worry about the deprecated styles. But that will ensure that we don’t have breakage for sites that potentially are using something that was deprecated. All right. Hopefully that answers that question. All right. Styling hover for button black. That’s an easy one. So buttons and links.

0:54:39
You come down here. Look, here’s your action button styles. Your primary button styles. Your secondary button styles. Every button that’s here, you can style. So you open the button styling panel for black. You can change the background color. Your hover background color. Your text color. Your hover text color. Your border color. Your hover border color. And if it’s an outline version, you can adjust the text and the hover text color there as well. So that is exactly where you would go to do that.

0:55:04
Remember, every button has shared styles. Okay. So all these things, even though you’re changing colors, some of the styles are shared between the two. If you want to go off course, right, you’re just like, do I want a totally custom button? I want some fancy. Okay. And you guys saw this on mine, right, where I have, where is one, probably in the footer. There you go. So I have a button that looks like this. It’s like, you can’t do that in the ACSS dashboard. Okay. This uses a clip path, by the way. So if you guys were wondering, how do you do that to your buttons? You just use a clip path.

0:55:41
Very easy. You go to Clippy, it’s a little clip path generator. You make a shape like that. You grab the code, you slap it on your button, and you move on with your life. Okay. So, yes, custom button, fully custom button. Let’s go in here. And this is, now we get into variables, guys. Variables is one of those aspects that is, this is the superpower of automatic CSS. All the classes and everything that I showed you, fine. Fantastic. Variables are what the pros use. The pros care more about the variables than anything else. So what I’m going to do is I’m going to add a button. Okay.

0:56:18
And we’re going to call this button custom, just like that. And now what we can do is we can actually come in and we can style, still using ACSS, right? So if I wanted a specific background color here, I could come in. Now, we have all the palettes already loaded for you. So let’s add, I did want to base this off of my primary color as an example. So I’ll just go to global, here’s my primary, that’s my typography color. We don’t want that. We want background. Okay. Background right here. And I will choose global and primary. There we go. So I get my primary color. Now there are other variables that we can use specifically for buttons.

0:56:59
And I don’t often make custom buttons. We’re going to see if we can remember some of these. The var, put a 10 in there, button, padding, why I believe would be that one. And then this one, okay, that might not be the variable. I’m going to have to look them up. Okay, hang on. We’re going to pull this up here. All right, let’s go to, you guys, oh, you can see a little bit on the back end now. For any of people, you see the comments or it’s like, just whip up your own frame. Framework. Okay, let’s see how we can whip up our own framework here. We’ll just go through some of these panels. And see, it’s not quite so much like whipping up frameworks. And I’ll just kind of whip them up. It’s kind of a lot going on.

0:57:48
All right, so we’re going to go down to variables here. Okay. And we see, let’s see, where are our variables right here. So if you want to reference, oh, it’s, it is button, BTN, pad, why. Okay. So var, BTN, pad, why. There we go. I don’t know, was I typoing it or something? And then these would be x because they’re on the x-axis. So look, I’m making a custom button, but I can still reference the same values that are right here in the defaults. Okay, as I make my custom button, what else is available to me? We’ve got your outline button, border size, your button, border size. If you want to add your border there. It’s pretty much everything that you can control in the dashboard is also available via a variable.

0:58:38
So you can go off course using bricks to style, whatever you want to style, but anything that needs to be referenced from your global button styles to keep things consistent, you can reference them with variables. Now, that’s not a good example. And that’s like more of an advanced concept of using variables. Let’s just take a second to do a simple, simple overview of using variables. So I think this is very, very, very important that we cover this. So I’m going to make a quick grid here. We’re going to do grid 3. I’m going to do gap of m. I’m going to do grid. Let’s make it L1. So at the L break point it goes to one column. And I want to stretch so that they’re all equal height. So I’ve done, my responsive grid is done.

0:59:16
I don’t have to touch it ever again. It’s going to be perfectly responsive. All I have to do now is add a block to it. And I’m going to style a block to, let’s do the first row with utility classes. Let’s do the second row with custom classes using BIM. I want to make this point here. So what I’m going to do is, like we did before, I’ll do BG. Let’s do base ultra dark. Let’s do pad of m. Let’s do gap of s. That should be fine for now. Let’s do an icon. The more elements you have, also the worse the argument gets for utility classes. So we’re going to do a heading here. And then we’re going to do text here.

1:00:06
And then we’re going to do a button here. OK. So now on this card, I also want this to be text white. We’ll just keep everything nice and simple. So I’ve got my icon here. We’re going to give this a, actually, we’re just going to style this at the ID level. We’re just going to totally f stuff up. So here, I’m just going to come in and be like, you know, ID level styling, no problem. I’m a beginner. I don’t really know what I’m doing. I’m just going to style some stuff up using the Bricks panel. Just seems like that’s what I should be doing here. I’m also going to use a utility class here. I want this to be base ultra light. So not quite.

1:00:43
Well, you guys can’t even see that. It is too close to the other one. So let’s do base medium. Let’s do text base medium. OK. We’re going to get a different color there. OK. So you see we’re doing a little styling here. Let’s do text base light on that. Perfect. It’s looking real ugly, but that’s no problem. So we’ll do our button action on this button. Man, that is looking good. OK. So I’m going to duplicate those.

1:01:09
People are like, see how fast that was. That was just amazingly fast. Look how fast you can move when you use utility classes. So now what I’m going to do is I’m going to add a, let me grab my container. I’m going to add another block. And now what I’m going to do is build a card the right way. Oh, you know what I should do? I should round these corners too. So let’s do rounded M on here. And then I’ll do that here as well. Round it M. Wow, fast as this with utility classes. All the people. Just imagine them saying this as I do this. OK. So now what we’re going to do is we’re going to say feature card.

1:01:45
We’re going to give this a class feature card. And then what I’m going to do is I’m going to add the exact same element. OK. So we’re going to do icon. And we’re going to do a heading. And we’re going to do text. And we’re going to do a button. OK. So now what I want to do is I just want to pause for a second. I want to be like, OK, I’m not going to be a chump. I’m not going to be a knee-and-rathole just going through just assigning utility classes to things. I’m going to just be a little patient. I’m just going to give some things some names. OK, let’s just give some things some names.

1:02:17
And this is all going to work out better in the end. So remember I call this a feature card. Well, this is going to be a feature card. And I’ll give you a little shortcut here. Double underscore. This is BEM. Block. I’m about to name some elements. So these go after the double underscore. Block element. And then there’s a modifier. You don’t even need to worry about the modifier right now. We’re never going to use this modifier in this example. So don’t you worry about a modifier. Just use block and element.

1:02:42
So what I do is I copy this feature card double underscore. So I don’t have to type it over and over again. So I make this icon. Because that’s what it is, guys. It’s an icon. So I just make it the name icon, feature card icon. So I know that this icon is associated with this feature card. So now I click on the heading. I paste feature card. And then I just say, heading. Because that’s what it is. It’s a heading. Then I grab this text right here. And I paste. And I say, hey, it’s text because it is text.

1:03:07
And then I come down here. And I here’s where because a button is actually already contextual. It’s like it is a button. It’s this is the styling of my buttons. You don’t have to give it a custom class like this. But you can, because in some cases, it can be more convenient if you do need to alter these at some point in the future. It doesn’t have to be. You’ll still be able to alter them globally. It’ll just require a little bit of a more advanced CSS selector. But if you want to keep everything consistent, you can put this on here.

1:03:37
What I’m saying is it’s optional. So for your buttons, it’s optional. But I do want to put on my button action class. OK, perfect. So now everything has a name. All I have to do now is go apply my styling to the card. And I’m going to do this with variables. So I’m referencing the same units that these classes are using. So this was pad-im. So I want to reference my spacing, my medium-sized spacing. So I’m going to go into style. I’m going to go into padding. And I’m going to do var space-im, if I can type today. And I’m just going to hit this little icon that’s going to put it on all sides.

1:04:13
Look, I have my spacing. Oh my gosh, look at that. Then I go to background. And I’m going to choose that base ultra dark color. So I go to my base, and I choose ultra dark. Then I’m going to go to my typography. And I’m going to make sure that text in here is almost always a light color. All right, so I’m going to choose that. But then remember, this one was base medium. So I’m going to grab my heading. And I’m going to grab that heading class. Make sure you’re always editing the class. Do not edit the ID on accident. And none of this stuff will matter.

1:04:43
That we’re talking about. You have to edit the class. So we have the heading here, and that is base medium. So I’m going to go in here to my base palette. And I am going to use base medium right there. Or you could write in the variable base. That’s all that Bricks is doing for you. If it’s writing the variable for you, if you’re choosing it in the palette, you could absolutely write this in custom CSS and WP codebox if you wanted to. You could write all this stuff with custom CSS, just referencing the ACSS variables. That is possible, too. I do that all the time.

1:05:15
So this is base light text. So I’m going to come in here, and we’re going to go to typography. And I’m just going to choose the base palette and choose the base light color. I get the same exact effect going on right here. How about this icon? Well, we made that a primary color. Did we not? So I’m going to go to global. I’m going to grab my primary color. Is that primary? What is this? Or did I make it action? Primary medium is what I ended up choosing.

1:05:37
OK. So we’re going to go here to primary. Am I on my icon? Why did it lose the color? All right, let’s go to primary and choose medium. OK. Now I have the exact same color going on there. The only thing left is my gap. So what did I use up here? I used a gap of S. So I need to come down here. And in the row gap for feature card, I’m going to do var space S. OK. There’s no gap variable. There’s no margin variable, because these things are all just spacing.

1:06:08
They just reference the spacing value. And it’s where you use them is what determines what happens. If you use the spacing value in a row, then it’s going to affect the row gap. If you use the spacing value in a margin box, it’s going to add that to the margin. So there’s no margin variables or padding variables. They’re just spacing values. So there’s just spacing variables. I know some people get confused by that. So style, look at this. Even down to the border radius. OK. Look, we had rounded M. That gives me a medium rounded corner.

1:06:41
So I’m going to go into my feature card. And I’m going to go to border. And guys, this is taking longer because I’m just sitting here talking about it. I would have been done with this a long time ago if I was just doing it. But keep in mind, I’m going very slow so I can explain every little step. So now we go to border, and I go to radius, and I go var radius M for my medium radius. And I just apply that to all sides. And I get the exact same radius. Now, what is the real difference here? I’m going to duplicate. It obviously takes longer to do it that way than it does this way.

1:07:14
Let’s go ahead and look at this on the front end. It looks, oh my god, they are exactly the same. Kevin, why in the world would you take that extra time to give those things those names, whatever those things are? Why would you do that? I don’t understand. It just takes longer. Well, here we go. Now, imagine that this thing, these cards, are used all over your website. Like you used them on the about page. You used them on services pages. You used them on the testimonials page. You used a couple on the contact page. Imagine that you have a fairly large site, even a medium size site.

1:07:48
Hell, even a small site. I wouldn’t even want to go to the second page to make these changes, right? So I want this to not be fugly. We want to anti-fuglify these boxes right here. So if I want to play around, I’m like, you know what? I kind of want this to just be white again. All right, so I’m going to have to take off this text-based medium, and I’m going to have to make this text white. And then I want this to be a shade color, not a base color. I want this to be like text-shade medium. Let’s see how that. Yeah, no. I want maybe text-shade light. So text-shade light, it needs to be a little bit lighter.

1:08:26
Oh, there we go. I’m liking that. I don’t really like the fact that this is the action color here. So I’m just, or the primary color. I think I’m going to go in and make this a shade. And we’ll do shade medium with this icon. I want it kind of muted here. All right, so I’m going to do that. And I do like my action button the way that it is. So I think I’m liking these styles here. Now those are very basic changes, OK? Oh, the other thing I want to do is I want to round the corners more. I want to do rounded like L. So there’s extra rounding going on on these corners.

1:09:00
So now I save, and I look on the front end. And I’m like, yep, that’s looking better. I’m liking the direction that that’s going. Well, guess what, my friend? You now have to do everything you just did to every instance of those cards, OK? That’s going to be a lot of copy paste, or it’s going to be a lot of removing classes and adding classes and all that stuff. Now watch this. OK, the big difference here. What did I make that? I made that a bait-shade medium, right? So now I go in here, and I’m like, OK, let’s make that shade medium.

1:09:32
So I’m going to grab shade, and I’m going to choose medium. Oh my god, they all changed. At the same time, everywhere they exist, OK? Oh, I go to my heading. I wanted that to be white. OK, style, typography. Let’s make, or it was a base ultra light, or something like that. Wow, they all changed. Feature text, I’m going to go here and go to shade. So we’re going to come down to shade, and I think I chose light. There, choose it. Thank you. Look, they all changed.

1:10:02
Now let’s go view the front end. Now what do you think is more time now? Right? Yeah, it was quicker to whip this up with utility classes. But as soon as something needed to change, now you’re in a shit show of a situation, right? You’re doing a lot of chump stuff with your development work here. Copy paste, copy paste, copy paste, copy paste, copy paste, copy paste, copy paste, copy paste for the end of time. However many times you made that card, good luck. Have fun. Copy paste, copy paste, or remove classes, add classes, remove classes, add classes. No, just give them names.

1:10:38
Just give the things names, label them, style the labels, move on with your life. It’s way faster on the back end. So why we talk about scalability and maintainability? You can clearly see that one method is better than the other method. I don’t think there’s an objective argument that you can possibly make to say that copy paste for the rest of your life and remove class, add class, is the best way to go about this. This is the standard since CSS was CSS. I don’t know why we’re arguing against this. I don’t know why anybody tries to have a counter argument. It’s like, don’t use CSS the way CSS was intended. There’s no reason to do that.

1:11:15
It’s faster if you don’t use CSS the way it was intended. I don’t think so. I don’t think so. Pretty clearly, that’s not the case. All right, okay, I’m ranting too much now. You guys are getting me going. All right, let’s check out our comments section. We are open, guys, for questions now. Officially, we are open for questions. All right, super chat, Ron. Oh, did someone send me a super chat? Thank you so much. I appreciate that. When you’re going to collaborate with Plaster, I have it on my schedule on Friday to go through Plaster and see what’s going on inside Plaster.

1:11:52
Okay, if you’re going to ask a question, put, question, I like what Amanda did right here. We’re going to use Amanda as the example. CSS question. All right, that will help me out a lot as I’m trying to scroll through here and find the questions. So if it says question, like in giant letters, that’s really going to help. A CSS doesn’t appear to load in the color panel and bricks for me is there’s something that needs to be done to have the colors load. When that happens, most often you have installed automatic CSS before you installed bricks. So you have to install bricks, then you have to install automatic CSS because automatic CSS can’t put the colors and the classes in bricks if bricks doesn’t exist yet.

1:12:33
If you install it in the wrong order, you can deactivate automatic CSS and then just reactivate it and you should be good to go. All right, hopefully that answers that. Okay, so callousthenics, I say Mateo was replying to callousthenics. See what Kevin is talking about right now because he definitely helped with tuning up. Okay, I don’t know what the question was. All right, I’m looking for the question in all caps. That’s what I’m looking for. Is it working with Gutenberg? We’re working on Gutenberg right now. All right, let’s see. Are all the variables listed in the cheat sheet such as what you used?

1:13:14
Yeah, should be. Oh, cheat sheet. Okay, here’s your cheat sheet right here. If you go type, you can choose class or variable. See, choose variable, there’s all your variables right here. If you want to search, you can search for button, BTN, and it looks like there’s a few missing, but some are in there. So I go through it from time to time and just make sure that this is updated. Usually when somebody alerts me, like, hey, dude, that’s not in the cheat sheet, and I’ll go make sure I put it in. But yeah, almost everything. I was saying 99% of the framework is in the cheat sheet right here.

1:13:44
And you can search, you can choose classes and variables. You can, it’s very easy to use. All right, let’s hop back to questions. Up, wrong screen. Okay, we want, what do we want? You can, is there a way to turn off all default styles in the bricks builder so that everything is edited via ACSS? And that way we can get clean code. Is there a way to turn off all default styles in the bricks builder so that everything is edited? That’s like a question for bricks, right? Like the bricks doesn’t do a lot by default. So when you set up automatic CSS, oxygen is more of a problem with this. Oxygen tries to do a lot of stuff for you by default out of the gate.

1:14:25
Like it adds padding to sections and pixels. It does a lot of crazy stuff. Bricks is actually, like it’s much easier to set up automatic CSS and bricks because bricks isn’t trying to do so much for you out of the gate. So really there’s not a lot of default styles. You would go into your theme settings and I have a set up video on it. It’s very simple. There are some things like the buttons. Bricks does like, it makes the button yellow, right? And it adds some styles to the buttons. There are instances where there are some pre-sales done. That would be a question for bricks honestly.

1:14:59
I would love it if bricks gave you just a clean slate. I mean, that would be amazing. And I’ll just be honest, I don’t know the answer to that question. I don’t know if that’s possible or not. I haven’t seen where it’s possible, so I don’t think it’s possible. But maybe make that a feature request. Where can we get all the variables? Are they in the chiche? Okay, just got that answered. Do do do do do, scrolling down. I’m looking for questions. Okay, I’m a little bit further back too. So if I’m not getting to yours yet, I’m waiting through.

1:15:30
I’m interested to see if ACC’s integration Gutenberg will make Gutenberg less, make me hate Gutenberg less. Well, yes, I would love that too. Do do do do do do do do do do do do do do do do do do do do do by an integrated ACC’s. I would keep you supplied with cookies forever if you did Pine Grow. I know, a lot of people have asked about Pine Grow. We’re getting there, we’re getting there. If you think about this from a business and marketing standpoint, I mean, we just have to prioritize larger communities first as long as they support automatic CSS. So Gutenberg obviously massive marketplace with Gutenberg, so we’ve got to focus on that first.

1:16:10
Pine Grow is much more niche, but I have no problem integrating with niche communities when we get there, okay? And it’s just a process of getting there. Here comes the light bulb moment for people hold onto your hats. Absolutely, Lionel, do you think they got it? Do you think they got the point now? Dry code, yes, dry, DRY. If you don’t, if you see the phrase dry, you don’t know what it means, means don’t repeat yourself. What do you think about cards being templates? This will alleviate having to make it every time on a bunch of pages.

1:16:46
I’m not a fan, not a fan. It makes them very difficult. Page Builders just did not handle component templating very well. And I think oxygen actually, that would be, for those of you who think I rag on oxygen too much, I think oxygen has a little bit of a leg up on how they handle component templates versus bricks. But I still don’t think Page Builders do components the way that they should be done. If you want to see components the way that they should be done, Figma, Figma not going to add the park with component-based stuff. All right, let’s see. The hover preview from Blast is very nice.

1:17:30
Okay, that’s why I use custom fields. A lot of people talking to each other. Gotta wait through these. Question. For bricks, when do you use a block versus div? I noticed your cards show block. Okay, let’s elevate that to the screen for as long as it will stay there. This is a question I think people see. This is not an ACSS related question. I’m gonna delete that. We’re gonna put a container in. You guys know that a container is page width. So containers are best used in sections, right? Because they’re page width.

1:18:03
So now what I’m gonna do is I am going to add a div. Let’s add, oh, that’s a class box. That’s not where we do that. So we add a div, see that div right there? It’s just a little tiny little thing. All right, little cute little box right here. But if I delete that and I add a block instead, you’re gonna see that you actually can’t see it. Cause it takes up the entire space. So that is the block in green. That’s the container in blue. That’s the block in green. So a block is full width by default. Out of the gate, it goes as far as it can go until it runs into something else.

1:18:38
So a div, obviously you saw it did not do that. Now there’s one other difference that when I put things in blocks, and this is why I made the card with blocks instead of divs, okay? So when I go, let’s say, I’ll try to give you guys a good example. All right, so I went heading, I went text, and I went button. Okay, please add the text, thank you. And then I add the button, there you go. So I wanna evenly space those. I wanna use gap, all right? So we’re gonna do gap of S. Now I evenly space those items, all good, right?

1:19:10
Okay, now watch. Now in the container, I’m gonna add a div. It does not go full width. I’m still gonna use my heading. I’m still gonna use my text, and I’m still gonna use my button. And then what I’m gonna do is I’m gonna go use my gap. Want, want, hold on, do we have a sound for it? Nope. There you go. I gotta start using those more often. Now they’ll probably get annoying, won’t they? So look, I can’t, it doesn’t work in the div. Why does it not work in the div? Well, because the div is a block level item, and it needs to be a flexible item, and it needs to be a flex column item, in order to get, oh, and then my buttons all fucked up.

1:19:50
So you see when I start with a div, it’s like, I gotta do a lot of extra work that I did not have to do when I added the block, because the block is flexed by default, column by default, and full width by default, which also I’m gonna have to adjust the width here. Now in a grid, the width is not actually gonna matter, because the grid container controls the width of its items. Okay, that’s one thing that you may wanna know. So when I make this a three column grid, and I put a div in here, it is going to be one third of the container, because the grid parent is controlling the children, and so I don’t ever have to put a width on here to do anything. And if I wanted to span it, I could span it all the same, but when I put items in here, it’s not flexed by default, so I’m not gonna be able to use my gaps, unless I change it to flex.

1:20:40
Here’s gonna have to do a lot of extra work. By the way, if you do use a div, I do wanna show you guys this, this would be good learning experience. So let’s add my heading, because we can do this stuff with utility classes if you wanted to. Now not in this situation, don’t do it in this situation, because this is a card situation. Okay, what is a card? A card is a reusable global element. Don’t be using utility classes on cards, and I’ll reiterate this when people are like, how do I decide? Okay, I get it, you showed me the custom classes, versus utility classes.

1:21:11
Now the big question is, when do I use one or the other? I don’t know. It’s very, very, very simple. The rule is this, you’re building something. You ask yourself in your mind, you say, am I gonna use this thing again? And if the answer is yes, or maybe, or possibly, or probably, or anything in that category that’s not, no. Then make custom classes. You cannot go wrong with custom classes, but you can go wrong with utility classes. Okay, so if there’s any chance that you’re gonna use this item again, go ahead and make some custom classes for it, use variables, style it up.

1:21:51
Now you have global control over that element for the rest of time. If you make it with utility classes, you may find yourself in a little bit of a chump situation where you got to copy, paste some stuff, remove some classes, add some classes. You don’t wanna be doing that. All right, so you can though, absolutely, with ACSS, check this out, Flex call. So now I’ve made this div a Flex item with a column layout. And so now that gives me right off the bat, the ability to use my gaps. Okay, so you can do this with pure utility classes with ACSS. It’s not a problem, but in this context of a card, you would never wanna do that.

1:22:31
But I hope that answers your question of div versus, let’s do a use case of div. Because you’re like, well, why would I ever wanna use a div? It seems like I’ve gotta do a bunch of extra stuff. Okay, well here’s a good example. So I will put in a container, and I will do, let’s just go grid two, and let’s do gap of M, just whipping up grids, and let’s do a block, and a block. Okay, I don’t know, I’m just making shit up as I go. So now let’s add a heading. I’m just trying to get to a situation where this might make sense. And let’s do a button. Yes, button.

1:23:11
Okay, and then let’s gap this. Perfect, okay. Now what I wanna do is I actually want side by side buttons. Okay, so I’m gonna do button action, just so we can style that up real quick. And we’re gonna come in here and say button one, and then we’re gonna have button two. Now this is another use case for a little right click, rap. And you have the option in bricks of rap with a div or rap with a block. And I rap with a div for this reason right here. Because when I want to rap an item typically, I wanna rap the item. I don’t want it to be like full width and giving me flex and all this other stuff, unless I really want that.

1:23:51
I just wanna rap it with a clean wrapper. So I set mine at rap with div. And now you see in the structure panel, we have this div wrapper right here. And this is gonna be the basis or container for our two buttons, okay. Now this goes into like a little bit more detail here of like buttons or inline elements by default. So they’re gonna go side by side naturally. If I wanted to stack them again, I could use a flex call on here, right? So that will stack them on top of each other. But I actually want them the way that they are. But I’m gonna show you in just one second why you would want to stack them as a column.

1:24:23
But look at this, I’m gonna try to use my gap and I won’t want, I’m gonna hit it. Okay, there you go. I can’t, I cannot do it because this is a div, this is a block item, it’s not a flex item. Okay, so I would have to do flex. And in this case, I would do roaks. I wanna keep them side by side. And then I wanna do a gap of S. And now, look at that, I can space out. And if I want less spacing, I can do XS for extra small. Would you ever need less than that? Probably not. All right, so at a break point, somewhere along the line, those buttons, ooh, they’re getting a little, I mean, they could be close to the edge, especially if this was like, button, you know, great, great button one.

1:25:06
I don’t know, great button one. And then this was like, great button two. All right. And, oh, great button two. I don’t know, at some point, the text is gonna start getting to the edge. They’re gonna need a stack. Let’s just say they’re gonna need to stack at some point because side by side buttons could create, oh, they actually are creating a bunch of overflow by themselves. That’s actually where the cell would be because we never collapse our grid. So let’s do grid S1, there we go. Okay, but at some point, these buttons would be too big for this container and that would not be a good user experience, right?

1:25:39
So that’s when you would wanna do flex, call, and then we’re at the S. Okay, so at the S break point, I can stack them. And when I go back to desktop, they won’t be stacks because I only asked for them to be stacked at the S break point. I’m doing all that with utility classes. Again, in this context of like, am I gonna reuse this section again? I wouldn’t wanna do this kind of stuff with utility classes. I would want to make like a button wrap. Here’s where I would actually do this. Just showing you that utility classes can do this. And we originally were talking about Digverse blocks, but I would do this.

1:26:10
I would do my buttons, let’s do dual buttons wrapper or something like that. So I created a class called dual buttons wrapper. My buttons are inside of it. It is a flex row. I can make sure that they’re always aligned to the center of themselves. And then the S break point or the in break point, I could say we want them, I put some other styling got in there somewhere. I could say I want to stack them at, what is going on with this? Why is this, oh, because it’s still a block. That’s where you gotta make sure there’s your flex. Okay, so you can’t just use these controls.

1:26:43
I would love it in bricks. Here’s the thing, if Thomas is watching and listening, Thomas, if you click a flex control, and this panel right here, obviously I want a flex control. So it has to be a flex. So you could swap it to a flex container for me. That might be good, that might be cool. So I never forget, because even I forget sometimes, I was like, oh shit, I forgot to switch it from block to flex. So it’s a flex now, right? So now I go and now it’s going columns. I can keep it row here or I could go column here, but now wherever I want to have dual buttons, I just use a dual buttons wrapper.

1:27:18
And then I can even go the one step further. This is where I would say, and we put my gap in here. So my row gap, oh look, I can use a variable here. Space XS gives me my, and it would actually have to be in column, but I wanted in row two for when it stacks, it has to have the same gap, see? Otherwise the buttons will be touching each other. So you want that space to be in both gap columns. And now what I can do, I’m gonna name this dual buttons wrapper, or actually on here, I can just say dual buttons, make it a little bit cleaner, and then I can do a little right click action, save as template, choose section, oops, section, there you go, and save as a template.

1:27:54
And now look, I’m building out the rest of my page, let’s pretend this doesn’t exist, and I’m like, oh, up here, I want dual buttons. Okay, so I’m gonna go up here, I’m gonna go, I want dual buttons, and there they are, and then I can just drag them in, and cool. And I have global control over how these dual buttons are laid out everywhere I’ve used them on my site, because I used custom classes instead of utility classes. Okay, hopefully this stuff is coming together, I want it to click, I want it to click in the brain. Let’s get rid of this. All right, let’s go back to E-cam live. All right, we’re 90 minutes in, I’m going 30 more minutes, 30 more minutes for questions, okay.

1:28:35
If you have a loop on 20 pages, you still have to make it 20 times. All right, I don’t know what that was, oh, that was replying to somebody else. Okay, question, what do you think about cards being template, okay, I think I already answered that. So, we’re waiting to implement a CSS reset to a CSS that disables any browser builder styling. A CSS already has a reset file in it, that does a lot of that for you. You can take the assets CSS, that was Mateo question. How do we change the focus, border, radius on forms? Well, everything is controlled from the focus area. I think it’s additional styling.

1:29:16
So, you have your focus color, focus outline offset, and then if I remember correctly, guys are the big framework, okay, there’s a lot to remember. If I remember correctly, it uses your button radius. So, whatever your button radius is, is going to be your focus radius. But, we absolutely can add a focus radius control. We would add it right there. So, we can allow you to change your focus radius, if you would like. But right now, I believe it is attached to your button radius. All right, let’s go to, what do you think about cards being, okay, why is that question keep coming up over and over? How can we automatically break bullet point lists so, instead of being really long, they split into two or three columns.

1:29:59
I love this question. Love this, oh, like this one right here. How about that? Now, you would have to come in and because there’s some auto, more auto nonsense going on. And I think list none, unfortunately. So, we need a little bit of, okay, there we go. We’re good, we’re good. See, some of the things I’m like, did I think of that before I made that? Oh, I did think of that before I made that. Let’s do a gap of M. Okay, so now you have your two column lists. Guys, this is critical. Critical that you see this magic.

1:30:35
This is not a grid. This is not UCSS grid. This uses CSS columns, which is a completely different infrastructure within CSS. And so, with a call count, you can set the call count. If I wanted that list to be three, call count three, I get three columns just like that. You can control the call gap between your columns as well if you want to. Now, that doesn’t look good at three columns. So, I’m gonna do call count two, just like that. Okay, so that’s all looking fine and dandy. And check out this. There’s no responsiveness really necessary.

1:31:12
If you leave it like this, I’m gonna show you one of the feature of this, it will stay too, which obviously here does not look very good. Doesn’t look very good. It’s kind of squishing that. So, how do you make responsive columns? Well, we have, we can do a call count at a different break point, just like you do with grid. So, call count S1, which should give me one column at the S break point and it does. Or, what I like better, I don’t like defining it. Column width, if you do column width of like L or M, let’s do M, let’s do a column width of, so we’ll do call width, God, I am typoing the crap out of this today.

1:31:53
Column width of M, it’s just going to ensure that my columns are a minimum width. And I come in here and at some point, it’s gonna decide on its own, there’s not enough space for that column. And so it’s gonna make it one column instead. And you have control over that via XSSML, whatever. And you can also go in here to this columns area and additional styling and you can choose what you want your widths to be. Man, this is fantastic. Absolutely fantastic. Oh, you can even, oh, look at another aspect. I mean, I’m just like, CSS is so big, there’s so much stuff going on in CSS, but check this out, call rule.

1:32:37
Hmm, call rule, action color. Let’s say call rule. And I think we have to set a, let’s do like an M on here. Let’s see if this one’s gonna work, call rule. And I think there’s something else, hardly ever use columns, call rule S, here we go. I need to choose whether it’s solid, dotted, dashed, all that stuff. Look at that, let me take away the M. I want it to be a little bit thinner. Okay, it’s thin by default. So you can actually rule columns. And now watch this, if I change it to three, so we’re gonna do call count three. Now I have a column between the two.

1:33:16
There’s never a rule on the ends, because CSS is just, I mean, the column, I love the column feature and CSS, I don’t use it enough, but I really love the way that it works. So there’s my rules, right? Like you saw me, I can change the rule color. So instead of call rule action, which gives me my action color, I could say call rule, let’s do base ultra light. So I just wanna really light, well that’s the same color as the background. What a dummy, what a dummy. Call rule base light. Okay, can you guys see that? Nice little just kind of light rule in there?

1:33:55
Man, that’s pretty sexy. Let’s change that back to one, two columns. So do call, and I want you to see this too. Call count two. Okay, so there’s my two columns with the rule in the middle and watch this. When it breaks the one column, the ruler’s just gone. It’s just gone. You don’t have to tell the ruler to go away, it’s just gone. So this is very, very good. And notice the power of this. This is one element of content that I’m breaking into two columns, which means as I add more items to this list, it’s going to naturally adapt.

1:34:29
So another item, here’s yet another item, here’s yet another. You see how it just continues building out the list in two columns and it tries to keep them as even as it possibly can. Very, very powerful stuff. If that’s not even a list, you guys are like, is it, does it work on just text? Like could I just take a big text paragraph? How about like maybe two of them? The one thing I hate about this is the paragraph is your two freaking big. Okay, so let’s put that in and let’s put some line breaks in here, some different paragraphs going on. Look at this.

1:35:03
I mean, it’s just going to just nicely fill this out for me. Okay, I don’t know, I feel pretty good about that. So then if I don’t want the rulers of mine now, that’s no good, let’s just take away all the rule stuff that was going on. All right, and we are back to just, there you go. And the text will flow from one column to another. And if you make it three columns, it’ll flow into three columns. It’s very, very powerful. If you’re doing the chump stuff of like, let’s put a div over here, let’s put a div over here, let’s manually make my two columns of text. You don’t want to be doing that anymore. Okay, you want to use the call count, CSS columns framework inside the CSS.

1:35:39
And in ACSS, very easy to do with a little bit of utility classes. All right, let’s go back to Ecam Live. Do we have to be careful picking, let’s elevate this to the screen? Do we have to be careful picking products like WP Grid Builder? I want to use ACSS anywhere. I use WP Grid Builder, it’s fantastic. And no, there’s no issues. What is the software for the Clip Path Coding? Clip Path Generator, you Google it, and there’s Clippy, right there. Clippy, and here’s how I made the arrow button. How did I do it? Was it a hexagon?

1:36:17
I think it was a hexagon. So you just drag these little points right here. There’s my little arrow. Now, if you want to see a better demo of it, let’s see, demo size, that would be with, this would be height, change that, maybe to like 100. Okay, and so you start to see, because this is all done with percentages, and then now I want like a little bit less of an angle. So I’m going to come in here at 90. I can see the numbers changing down here. I’m looking at this number. So I want this number to match. So I wanted to be 92. So I’m going to make sure that that is equal, just like that.

1:36:49
And then I come in here and I grab that code, and then I just go literally paste it into my button. I don’t know, should we do it? Let’s go do it. These have rounded corners, so that may cause a problem. So we’re going to go into buttons and links. We’re going to go to button border styling. We’re going to go reset our button border radius to zero, save. Then we can go back to our builder. We can refresh. We can grab our button. Oh, here’s how you would want. If you want all your buttons, all your buttons. Oh, this is another good thing. Let’s just tutorial the shit out of this.

1:37:19
OK, so WP code box, we are going to, oh, I don’t even have a style sheet. My gosh. All right, call this global. Make this SCSS. Auto, we need to save this first. Auto reload the changes. Save it. Then enable it. OK, now we can get cracking. So in automatic CSS, every button starts with BTN double dash. And because it uses BIM, it’s not going to clash with any other frameworks or whatever using BTN classes. Because BTN classes are used everywhere.

1:37:55
But we use BTN double dash because we use BIM. And so very unlikely that other plugins and whatnot would be using BIM and BTN double dash and all that. But we have button action. We have button primary, button base. And I want all these things to have buttons. So you could come in and be like, OK, well, button action is going to have the clip path. Well, now that only applies to button action, what are you going to do? You’re going to do this to button base and button primary and all those individually? No, no, you don’t want to do that. What you want to do, you want to put little brackets like this. And you’re going to use a technique that you should absolutely learn and practice and know it inside of your brain in and out because it is extremely helpful.

1:38:33
You write the word class. You write a star. You write equals. And you write a parentheses. So basically, what you’re saying is, I want to target any class that contains. That’s what the star is, universal. BTN double dash. So if it starts with BTN double dash, which is all of our automatic CSS buttons, they’re all going to get this little clip path right here. So now I’m going to save. And let’s see if this actually works. OK, there you go. You never know.

1:39:02
You’re live streaming and you’re like, OK, well, that was embarrassing. But it does work. And now the only thing that you have to worry about is this little spacing. Because what the clip path has done is it’s clipped out an area of the button that you were actually using visually to make it look like. Because this is just even spacing on the right. So now what you can do is you can come in and say, well, we’re going to need a little more padding on the right side of that button. So you can use whatever values you want. I mean, you can use 2M. I don’t even know what a good value would be.

1:39:32
We just need to get it to a point where it looks good. That was a, because that’s also a percentage. Can we math this? Can we math it? OK, hold on. That was like a 10%. Well, I should just look at the code. That would be helpful. So 10%. Never do math on a live stream. OK, I’ve learned this before. I never learned my lesson. I’m just telling you to never do math on a live stream. OK, so we’re going to calc our variable. And we’re going to add an extra amount, which is like, I don’t know if it would be exactly 10%.

1:40:07
I think it would be, I don’t know. I don’t know. First of all, I’m terrible at math. But we’re going to see if it’ll work out. So what do we want? Well, we want button pad X. We want the horizontal default button padding, but we want to add like 5% to it. All right, I don’t know. Let’s see. Oh, that clearly didn’t work. Let’s go 10%. I wonder if our calc is even working. That would be the first step. No, our calc is not working.

1:40:34
So we have calc variable button pad X. And it is button pad X. I’m pretty sure. Yeah, yeah, yeah. OK. Well, let’s inspect. How about this? We’ll work through it together. All right, so we’ll inspect. And there is OK. Button back on primary. That’s good. Let’s take a look over here. What’s going on? With the set to auto.

1:40:58
Man, there’s a lot of shit going on with this button. Oh, there it is. Like there. Look at that. It’s just not liking it. Is it not liking it because there’s an error with it? Or is it not liking it because it’s just padding? So let’s do this. Let’s copy that. Let’s do in this. Just give it something simple to digest here. And we still don’t get it. Yeah, so it’s not liking it because I bet if we import into this, we are going to see it. In effect, now it’s working.

1:41:28
Now, oh, it may not have been my math, my friends. For those of you who are like, ha, got him. It may not have been my math. Oh, look at that. There we go. And then we need our, let’s give it to these fucking dual buttons. Let’s get this out of here. OK. Save. Let’s refresh this. There, now we’re working with just one button. And maybe 5% my original guess would be exactly what we want. It is. OK.

1:41:51
But we do have other issues going on. Something with the width is happening here. Is it my, hold on. Let’s bring this out of my dual buttons wrapper. OK. And safe. And refresh. There you go. OK. And now we do need, and maybe the percent is not a good thing to do. We could do like 2M, something like that. So we’re giving our, we’re still referencing our, that would actually look good to some people. Maybe we can do 1M to just shorten it up a little bit.

1:42:23
But what I’m basically doing is I’m referencing this side of the padding. That’s what the variable is. References that side of the padding. And then just adds a little bit to account for the part of the button that I chopped off with the clip path. And so that’s, that’s where you get to right there. See, a little bit of troubleshooting. No worries. And we could do more with the specificity here to not have to do this important. But you know, I’m just moving quick. All right. Oh gosh.

1:42:48
Whoo. Beats a sweat. We’re happening in there. All right. Do you plan to support multi-site? Yes. We’re looking into multi-site. Can you show us the new, oh, thank you. Roon. Roon. We lost a lot of people here. We’re still over 100, which is fantastic. For those of you who stuck around, you’re going to get some gold right here. This is one of my favorite new features, 100% hands down.

1:43:15
I just don’t know if I have a form on this site. So we may have to whip one up real quick. But I’m going to do a container. And what I would like to do is just a grid too and a gap. Oh, you know what? Why don’t we just hear it here? Oh, this is easy. OK. Let’s go templates, remote templates. Let’s go to contact. And this is frames. And I want to bring in not contact card alpha, no, content section, no, just this one, easy one. OK. What the fuck is going on with that?

1:43:52
Jeez. OK. Let’s get rid of the social proof run. Or something was imported that it did not like. So here’s my frame right here. This form is a bricks form, I believe. Yep. It can’t be a WS form because we have to support the native element. So we’ve got a bricks form right here. I’m going to do this with the bricks form, but you could absolutely do this with WS. Let me just check real quick. I don’t even know if I have WS installed on here. I do.

1:44:19
Oh, it’s just not active. OK. Well, WS form forms. Oh, we have a form. OK. Oh, that makes things easy. All right. So that’s good. Because I wanted to show you more fields. All right. But we’re going to need, that’s kind of a, I think that’s a big form. So let’s just start over. Let’s get a container. Let’s just pop that in that WS form.

1:44:40
All right. So we are going to add the form element, the builder needs to be refreshed to access WS form modules. OK. Add WS form. There it is. All right. And what form we’re going to add? Why are emergency contact form? We’re going to hit save. And then we are going to refresh the page. And that is a large form. So we’ve got a lot of stuff going on. We’ve got these bullets. We’ve got tabs.

1:45:06
We’ve got a lot of stuff. Now, this is a super practical example, because I don’t know that you would ever, like, you know, I mean, you could create. But it wouldn’t be this hodgepodge of stuff going on, right? It would look a lot cleaner than this. But I think I was using this as just my kind of a default template. So what I can do is in automatic CSS, one thing you want to make sure of, here’s forms beta, is you want to make sure that your form styling is on. That would be step number one. Then what you’re going to do is you’re going to take this form light class right here. And it kind of tells you up here in the instructions.

1:45:38
Set global styling for forms using form light and form dark. So we have two main form custom styles. All of the styling is done right here in the panel. A lot of it is set by default for you. And then you just kind of go in and make whatever adjustments you need to make very easily. The dark form style is coming soon. But a light form style is designed for forms that are on a light background, which that’s what we have right here. And so I’m going to go ahead and pop in form light. And I’m going to go see if this install actually has it active, and it doesn’t look like it does. This is a local install. I don’t know.

1:46:12
Let’s go to WS form. Let’s try this install. We’ll get one of these to work. I know that it works because one, everybody’s using it. But I also used it right here. So the let’s talk page. That’s using it right there. All right. It’s just one of these local installs that I don’t keep up with. Appearance pages, contact view. OK. And I don’t even know what’s going on on this page. Now this isn’t even using ACSS. So that’s not good. All right.

1:46:46
Let’s use this site. So we’re going to log in. And I’ll show you the difference between the two forms. So we’ll go to the contact page, contact contact contact. Where are you? Let’s talk. OK. Edit with bricks. All righty. So here you see we have Form Light. I’m going to remove it. And this is what the form looks like. Let’s go view on the front end. So that’s what a WS form looks like when you pop it in. And like I said, you can go to the customizer and change a few things here and there.

1:47:17
And by the way, I do like WS form. You can choose whether these labels are on the inside or the outside. A lot of good functionality type stuff here. But if you want to really style this form up, you’ve got to really know custom CSS. You’ve got to go in and target these elements and style. And there’s a lot. Like forms are very, very, very complicated. Or what you can do is in the builder right here, you can go form light. And then you hit save. And then you view it on the front end. And now it’s styled. And it inherits things like your action color for the button.

1:47:52
It makes all of the fields have a nice little even height here. And so one thing I can do is in forms if I wanted to style the labels differently, I could do that. If I wanted to style the inputs differently, I could do that. I’m going to change this just so you can see. So we’ll hit save. You probably wouldn’t want to do this. Get a little tab heavy here trying to find my tabs. All right, hang on. Reset. OK. Oh, and this may not. So it’s also going to be dependent on where your labels are. That’s another thing.

1:48:24
Because when you put the labels inside, suddenly, height padding, they behave differently. So normally, you would have the labels on the outside. And I think I would have to go into WS form. And I would choose. I think it’s in the global styles up here. So there’s your default label position. So for those of you using WS form, you’re going to have this at top by default. OK? So I’m going to save that. I’m going to go back. And then we refresh. See, that’s not even changing my labels. I wonder if we have caching issues on this site.

1:48:54
Because that’s even a WS form thing. That’s not even related to what I’m doing. I did publish my change. Refresh. All right. There’s probably a caching issue going on. Because WS form is not even behaving properly. So normally, what you would do is you would change that. And the labels would suddenly be up here. And they would not be inside. Then you would just have placeholders inside your inputs. And of course, all the placeholders can be styled here as well. You can have your placeholder styling, your second button styling, because there’s also previous, there’s save.

1:49:25
There’s reset. There’s clear, all those buttons. The bummer that it’s not working, I don’t know why it’s not working. But it is working on all the other installs, just not these local ones. So I don’t know what’s up with local. Your option input styling for your text sizes, your font weight, your background color of your inputs, your action color, you have your progress bar styling. So all of that, you can change the height, the background color of your progress bar, the fill color. You have your tab styling, those tabs that we saw on that gigantic form. You can style those right from the dashboard here. So all of that is available to you now with ACSS.

1:50:01
And what we’re doing, here’s why Dark doesn’t exist yet. There’s enough going on in the light that we’ve got to get light like perfected. And then I can make Dark. Because if I make Dark when light’s not perfected, any change or edit that we have to make, I got to make it the light, then I got to make it the dark. It’s just going to double the work. So this is in beta. And I want people to play around with it and try to make all different styles of forms. Because it’s got to be, everybody wants to do different things with their form styling. So I need everybody to be using it and see what’s broken here or there, what’s not working here and there, what needs to, what more options need to exist.

1:50:38
We’ll perfect the light version. And then all I have to do is basically duplicate that code set for the dark, change the names, how we’re good to roll with dark. So that’s why Dark does not exist yet. We don’t want to double up the amount of work that we’re having to do as we make these adjustments and edits and all that good stuff. All right, let’s see, question. Da, da, da, da, da, da. Can you show on feature card the UL and LIs stuff, please? I did show that. I did show that on the card. So just go back and watch the replay. Is there any way to use Figma tokens, plug in with ACSS?

1:51:12
No, there’s not, unfortunately. Clickable parent is great when to use and when not. All right, I can, we’ll put that on the screen. I may come back to that one. Clickable parent, clickable parent, clickable parent. OK, what is the timeline looking for getting a frame sandbox? OK, frames is coming out Black Friday. So after Black Friday, we will have more to say about frames. Love to see an example using ACSS breakout classes and call rules, so many new ones. The breakout classes are pretty, they’ve been there for a long time. If you have a specific breakout question, I can probably maybe hit that.

1:51:52
All right, is there a way to export design decisions from Figma using Figma tokens ACSS? So there’s no integration between Figma and Bricks or Figma and ACSS. ACSS only exists in page builders, right? Now at some point along the line, we may do stuff with ACSS and Figma. But it’s one of those situations where, again, we have to get there eventually. It’s not going to be something that we think about right now, because there’s just too many other important things along the way to get there. Question, will you go over auto-alternative grids? I may do that. I may do that.

1:52:25
All right. What about the alternating grids? All right. Let’s see if I’ve lost confidence in this local install, because it f’d up one of my frames when I imported it. And then we’ll see. We’ll see. All right. I’m actually not. So to let you guys know, here’s what’s going on with the local install. These local installs that I have are directly tied to VS code. So when I update the framework in VS code, it updates these local installs. So when I go on a local install, if I’ve broken something in a version that doesn’t actually exist yet, it’s going to be broken for me on my local installs.

1:53:05
But it’s not going to be broken for you guys in the version you’re actually using. And it also is dependent on which branch I have selected in VS code. So if I’m working on a completely separate branch for a completely new feature set, it may not have certain things that other branches have until I merge them to make the official plugin. So there’s a lot going on with these local installs that’s not really the working version of automatic CSS. And so there can be some discrepancies in what we’re trying to do here, from what I’ve got going on in the local install to what’s actually going on in real life in the plugin. These are development environments, and they are directly tied to VS code, that I don’t have to constantly build the plugin, install the plugin in local, test out the changes.

1:53:51
It all just happens automatically. So there’s going to be some things going on based on the branch that I have selected that’s not really going on inside the plugin. But we will give, I want to show auto alternating columns. I think the best way to do it is with one of the frames that does it automatically. So auto alternating columns, we’ll just see if this exists and exists correctly in this particular install. So edit with bricks. Now let’s just see if we can go into frames. I think it’s one of the feature sections. Let’s go to features. And let’s, I believe it’s this one, Delta.

1:54:27
Now it may not, yeah, there you go. There we go. OK, so look at this. So here’s what you would have on the front end. So you build your cards, right? And so you want these things to alternate, image text, text, image, image text, image, right? That’s very, very classic. Let’s get rid of some of these tabs. Don’t get too tabby. Get rid of that. Get rid of that. All right, and we’re back. So there’s this class grid alternate. And you could just slap on grid alternate.

1:54:58
And you just get it, right? All of them alternate. And there’s a lot going on here. Because it doesn’t matter what the actual grid structure is. If they’re even columns, this is pretty easy to do with custom CSS. But if they’re not even columns, like I believe these are three two columns. So this is a three. This is a two. Well, if you just swap them, you end up with a big problem where the image, when it gets on this side, is smaller than this image right here. Maybe I can show that. Let me see if I can demonstrate that.

1:55:30
So if I just swapped these manually, which you would not want to do, but I swapped my media and my content, there’s your problem right there. So you can see the problem clearly. And if you try to auto alternate them, this is exactly what would happen. So there’s a lot more going on in the grid alternate class. Because what the grid alternate class does, I undo that. There you go. All right, so now I’m going to grid alternate right there. And you can actually choose to alternate it at a specific breakpoint as well. And this stuff just saves a tremendous amount of time. But what this is doing is it’s basically going in and saying, if a two, three column exists, or a three, two column exists, and they’re using grid alternate, then also swap the columns from three to two, three.

1:56:19
So that the images, or whatever’s on the right, is the same size as what was on the left, right? And vice versa. So it’s actually going in and restructuring and remapping these elements to a different grid structure automatically so that you don’t have to worry about that stuff. So that’s what grid alternate does. And this is a very common layout tactic, right? So if you build layouts like this all the time, grid alternate, literally you pop that class on, it’s going to save you probably 25 minutes, 25 minutes of a fuckery trying to get those things to auto alternate and look right, it’s going to take care of all that work for you. So that’s another one of those just tremendous time saving classes.

1:57:03
All right, let’s go ahead and take a look here. Question, what’s your favorite tool to build in WordPress? We got three minutes. I’m going to rock through it. All right, you can right click and flip it back and forth on the structure panel, div block, yes. OK, that is a good tip, good to know. If I was wanting to create a custom wide screen break point in bricks, what do I need to do in ACSS? That’s a little bit more involved. So we’re going to have to do an actual dedicated tutorial, I think. Drop a like on the stream for Kevin. Look at that, Jason Eugene, thank you, my man. Yes, please do that.

1:57:39
What features long term are you excited to maybe add to ACSS? Let’s go take a look. Let’s go to automatic.css.com slash, what is it, roadmap? Oh, man, between framework and my agency and content over here, my brain, dude, there’s just too many things to remember. Too many things to remember. In progress, as you guys see, Gutenberg. I’m excited, even though I hate Gutenberg with a passion, I’m excited about the possibilities of ACSS inside Gutenberg. I am excited about the potential of frames inside Gutenberg. I’m excited about a lot of stuff with Gutenberg. Even though I don’t like it, I do think it’s going to improve over time. I do think I have faith that it’s going to improve over time. Color swatch indicators for color shades in the ACSS dashboard.

1:58:32
I’m excited about that. This has been a long, requested thing. There’s going to be a little swatch right here that shows you the color of your shade. And as you make changes, it will show you kind of what’s going on with those changes. Now, we already have this available on the front end, obviously, via the style guide. You can just quickly flip back and forth and see changes. But I do think it would be good to have in the dashboard right here. And a lot of people have requested that. And I agree with them. So we’re going to be working on that. Let’s go back to the roadmap. Literal width names and increments of 10.

1:59:05
So right now, if you want to change the width of something, you can do LMS, just like you can with everything else. And these are a percentage of your websites max width. And what we would like to have is just width 100, width 200, width 300, width 400, width 500, width 600. So that gives you granular width and it would be contextual. So it would be 200 equals that value, whatever we decide to make it 20% or whatever it happens to be. But that’s what literal width names is. Again, that’s on the roadmap. It’s in progress. Right now, we’re thinking about the execution of that. Let’s see, planned. So efficiency mode for a class suggestion and builder.

1:59:50
This is dependent on whether the lag in bricks, which guys, you saw me. I mean, I did a lot of stuff today. There wasn’t much lag going on. So it’s really not. And if there is, you hit save, you refresh two seconds later, you’re back with no lag. So it’s really not a problem. But if that is related to classes, the number of classes in the database, this is a theory right now. We don’t know. It kind of behaves more like a memory leak than anything. And so Thomas, I believe, is looking into the possibility of a memory leak somewhere.

2:00:18
But it does seem to get worse the more classes are in the database. Or perhaps even the more variables you’re using on a page. I don’t need, again, we don’t even know. Somebody’s calling me. So let me mute that real quick. If it is class-based, then we’re going to have an efficiency mode where you can basically say, don’t preload the entire framework of classes into bricks. I’ll just go ahead and use them as I need them. And they’ll work because the style sheets there, but it won’t auto suggest them. Because there’s like 1,300 classes. So you put all those in the database, suddenly the database, the class database is fairly large.

2:00:53
If that’s causing the lag, then all we have to do is have an efficiency mode where we don’t preinstall the classes for you. And you just use what you need. And you’re never going to run into lag unless you use all of them, right? Or like lots and lots and lots of them. Which most people don’t do. Most people, when using ACSS, there’s a set of classes, let’s say, two dozen of them that you’re going to use over and over and over and over again. And then by enlarge, if you’re building correctly, you’re going to be using variables for the most part, right? And so you’re never going to get a huge class database if you’re just building from scratch.

2:01:26
If that fixes the lag, because it’s a class database problem, then that would be amazing, efficiency mode. But I’m not saying that that’s what’s causing the little bit of lag issue that’s going on. So that’s just kind of been holding right now. It’s planned if we need to do it. We’ll do it. But we’ll see. Tooltips, excited about that. Gutenberg integration is on here twice. Yeah. OK. So we can delete that. Additional text sizes.

2:01:55
I kind of think of what I was thinking about here. What was actually requested? The more I use ACSS, the more I feel less of a need for added granularity. The more granularity you add, this would be like intermediate text sizes. So like M’s not big enough. L’s not small enough. I need something in the middle. Well, I mean, you could create something in the middle with a variable. You can use calcs. You some use a calc with a variable. And that’s possible. The question is, how many people need that?

2:02:28
Because if it’s just a few people need that, or even if it’s a lot of people need it, but only on a few occasions, it doesn’t make sense to add all that bloat to a framework. Just make it custom and move on with your life. It’s easy to do. Because again, ACSS, the philosophy is not, we do everything for you. The philosophy is we do like 80%, 90% of all the hard stuff for you. And then anything you need super custom beyond that, go ahead and do it yourself, just like you would do it on a normal site. We don’t need to try to be the be-all-end-all for every use case that’s ever happened with a web design in the history of web design.

2:03:02
That’s not what we’re trying to do. Because if you do that, you can’t have a framework that’s easy to learn. You end up with tailwind. That tailwind tries to do everything known to man. So you’ve got 80 classes for padding. You’ve got 700 classes for text size. You’ve got all this granularity, and it makes it impossible to learn and you’ve got your cheat sheet open for the rest of time. It’s what we want to avoid. We want to be easy. We want to be fast. We want to be streamlined. We want to be simple.

2:03:30
And then we want to do a lot of ingenuity-type things like you’ve seen with alternating grid and focus color adjustments. And a lot of the stuff I showed here, that’s what we want to focus on, is quality of life enhancements for people building websites. Overlapping grid rows. So you saw overlapping columns. We’re going to be working on overlapping rows as well. Globally controlling transitions. You guys can read this yourself. I mean, if it’s on the planned column, I’m fairly excited about it. Otherwise, it wouldn’t be planned. But you guys can go ahead and access that.

2:04:05
All right, we’ve got to wind this thing down. Anybody else? Have any questions? Yeah, there’s a bot in here. That’s no good. And they brought cherries. That’s right, Justin. He did. All right. Thank you guys for showing up here. I wanted to make sure there’s no other simple questions I could answer. Can you demonstrate how to change the H1 minimum font size to 24 pixels on mobile and 60 pixels on desktop using ACSS? Yeah, that’s super easy.

2:04:37
Is this an H1? No, let’s change this to an H1. All right. I don’t even know what to have, I mean. I’ve got a dark mode on and all the tabs look exactly the same color. I don’t know what’s going on here. All right, let’s get rid of that. There. OK, says that page. OK, that’s that. All right, let’s go back into typography. Let’s go to heading overrides right here. OK, so what’d you say? You wanted to be 24 pixels on, is that what you said?

2:05:04
Let me go back. 24 pixels on mobile and 60 on desktop. OK, there you go. Save. So if you want to do a full override, you can absolutely do that. See, it just became 60. And then if I went down to mobile, it would be 24. Now, you don’t have to, here’s a thing that’s cool about the overrides, OK? If you know you want it to be 60 on desktop, but you don’t particularly care what it scales down to on mobile, you want it to be the default. You want it to be bigger than your H2 and all that. You can just set this to 60.

2:05:39
You don’t even need to set a min. It’ll just keep the min that it had by default. And now you have the desktop version, but it’s still going to scale down. You don’t have to put two different, the ads scaling. You don’t have to put two different values. It’s just going to use its original value on its own. All you did was override the desktop value. So that’s really cool there. Oh, and look at this, guys. I even forgot this. See, again, level of ingenuity. You remember the grid alternate class, yeah? What does the grid alternate class also do for you automatically out of the box?

2:06:15
Well, it’s going to stack your images so that they’re always on top so that it’s not going to go image text, text image, image text, because that’s ugly, fugly, as we say. It’s going to make sure that your content all stacks nicely. And you don’t have to deal with that. You just add the grid alternate class. And it just sticks here with it for you. So that is overriding heading sizes. So you have your 60. You could do this with every single size. See, I do it a lot with my H. Well, these are done by default to protect your smaller sizes from ever getting too small. But if you’re like, you know what, my H5s, I want that to be more like 15 pixels.

2:06:51
And I want this to be more like 14 pixels. And I’ll just leave 12 and 11 the way that they were saved. Now my S, actually, these are my headings. So if I want my S and XS, I would come to text overrides. And I would do that here as well. And this, look at that, that particular install. Check this out, guys. This install, see, these are local installs, right? And some of them I haven’t used in a while. This has the Grant Cardone bug that we fixed. I call it the Grant Cardone bug. That we fixed like two updates ago, where it 10Xed everything that was in these override fields. 10X, Grant Cardone.

2:07:23
That’s why you get it. You understand? OK. Save. But now I can override my text because your text and headings are now controlled separately. They didn’t used to be, but they are now controlled separately. Yeah, so this is somewhat of an old install going on here. All right. Last question. I’m going to do one more. This is your official last call. This 0.1 is 10% offset A90% from the Clip Path. OK. You guys are talking about your math again.

2:07:51
How does ACSS now work with multi-site? So it’s not officially supported in a multi-site. But it is coming. If you’re working on the wrong site, yeah, I probably was. OK. Yes. See, that’s what happens when you have 800 tabs open. Yeah. So that’s why I wasn’t working. Not an ACSS, but maybe you know, in WP code box, I guess we will have auto suggestion on ACSS class variables right. That I have heard. I have heard. And that I think is going to be fantastic.

2:08:24
So yes, auto suggestion on NWP code box for variables. All right, guys, that’s it for me. Thank you so much for being here. That is another live in the books. Warts and all. And yeah. Thank you for being here. Like, comment, very important to getting more exposure on this stuff. If you’re not subscribed to this channel, go ahead and subscribe. But the next ACSS live will likely be on the ACSS channel. So go YouTube, search automatic CSS, find the ACSS channel, subscribe there. Because most ACSS related stuff will be on that channel.

2:09:04
I just wasn’t allowed to livestream on ACSS. So for today. So here we are, digital ambition. Peace. I’m out. I love you guys. Thanks for the support.