WDD LIVE 052- Will Scope Kill BEM? + Q&A-AMA

0:00:00
What’s up, everybody? Let me get some stuff situated here. All right, who we got today? Rob in the house, Gene, Derek, Alamama. All right, greetings from London. Christophs, Klaus in the house. Joel, been a minute since I was able to catch a live. Hi from Chattanooga. Good to have you Joel. Steven is here. Good Chris, good to

0:00:31
see you. A lot of Chris’s actually. Sarah in the house. First time I’ve made it so early. I set an alarm. Wow, good to have you Sarah. Good to see Jamie Lynn, Jason Vargas in the house. D123. All right, we got a lot of, a lot of peeps. Okay, and numbers good already. Let’s do some announcements. I hope you guys are having a good time. I have a horrible headache today. I took a little, I don’t normally do this.

0:01:06
I took a little melatonin last night. I may have taken a little too much melatonin. I like woke up with a horrible headache. I’m still tired. My brain’s like half turned off. Not good. Not good. But we’re going to push through.

0:01:19
We’re going to see if we can make this happen today. We will start with some announcements and then we will get right into it. The agenda for today is we’re talking a little bit about BIM and something called scope coming to CSS. We’re going to talk about, you know, basically just like explore. We’re going to do a little bit of an exploration. And I like to think about, you know, these features that are coming

0:01:42
and how they are going to work in a page building workflow specifically. I mean, we all know how they would work in a sit down and write CSS workflow, but how might they work in a page building workflow? Do we need to be aware of them? Do we need to care about them? Do we need to plan for them?

0:01:59
These kinds of things. That’s what we’re going to explore today. AT says, I had to switch from melatonin to CBD gummies for sleep due to headaches the next day. Okay, well, that’s maybe that’s exactly what happened to me then with the headache thing. Because I almost never get headaches. I almost like never get headaches.

0:02:17
But I definitely have one today. Okay. All right. First announcement. First announcement. Let’s go. I got new controls on this thing too. Okay, if you’re not aware, you should be aware,

0:02:31
because I think a lot of people are interested in this. I sent out an email about this, got a ton of responses. We did a poll in the inner circle, got a ton of responses. This is the inner circle, by the way. I just started a brand new series in the inner circle. And it’s under, if you’re on the sidebar over here, there’s a new area called JavaScript Training.

0:02:50
And there’s this space called Learn JS with Kevin. This is a new series that I’m starting and we’ll see where it goes and how it expands and what areas it ends up going into. But I did post the first video which as you can see has gotten a lot of really great, like you know, I’m learning JavaScript, right? And so I’ve started to do some JavaScript courses and things like that. I haven’t been very happy with them because it’s always like all this abstract nonsense. It’s like, you know, I don’t want to build a calculator and I don’t want to print hello world on a page. Like I want to do something that actually I would

0:03:34
actually do on a real website, a real workflow, and learn that way. Okay, like, let’s do something practical, and then you teach me what I need to do to do that practical thing. Hey, and then we all win, right? I don’t know why that’s so hard, why that’s so difficult. So what I’m doing is I’m learning, and then I’m just translating that

0:03:52
and just teaching what I’m learning as I, in my normal style, right? That’s the whole premise of the thing. So it’s not a learn, like, from somebody, really, it’s a learn with somebody kind of series. And people are liking it, and people are liking it. So if you’re into that sort of thing,

0:04:09
if you are where I’m at, where it’s like, I think it’s really important to probably add this skill set then this is probably a great starting point for you. I really like learn with people kind of content on topics like this where it, you know, there’s obviously a lot of value in learn from somebody, but there’s learn with value in the sense that it makes it very approachable.

0:04:35
They’re not, they can’t talk over your head because like they’re more or less at the same spot as you, right? So that’s a problem with expert content. And I think this is why I don’t like a lot of the current JavaScript stuff that’s out there is because it’s like I don’t know it’s not translated well okay so I don’t know if you like this sort of thing this is available to you in the inner circle

0:04:59
it’s a brand new series that we started and I’m having fun with it I think it’s gonna be great all right so let’s go ahead and shut that off here’s bricks we’ve also got a little code pen open we’re gonna dive into scope and BIM. And then after we talk about this, we’re gonna do plenty of Q&A slash AMA. So you can ask questions about pretty much anything. Let’s go to the chat. What is the blue icon?

0:05:27
Blue icon. I don’t know. I don’t know what the blue icon is. Oh, you’re talking about the little dot. That’s just circles default. I didn’t choose a little cute emoji. So like I chose some emojis for these things over here. Well, if you don’t choose an emoji,

0:05:42
it just gives you these blue dots. It’s not even, you know, with my color scheme. So I don’t even know. But that’s it by default. But I can change it. I’m sure I’ll change it at some point. All right. Valerian root is also good for sleep.

0:05:55
Had better results than melatonin for me. Okay, I will try that out. Check out magnesium complex. See, I, I, there’s something wrong with me in that I can’t supplement with magnesium. It gives me tremendous anxiety and then it gives me insomnia. It like does the opposite of what it does for most people. Like, so it’s, it’s, it’s actually really weird. Somebody needs to study this. If I too much magnesium or just a normal amount of magnesium, I don’t know, as I’m falling asleep, my brain like zaps back awake.

0:06:33
And it’s literally every time. So imagine like you’re about to fall asleep, and bang, it like zaps you awake. And it just will happen repeatedly until it’s time to just be awake. And then it’ll just keep going. And I actually found this out. I actually had horrible insomnia

0:06:52
because I was supplementing with magnesium. Had horrible insomnia for like three months. It was like over 10 years ago or something now. And I was not sleeping at all. Like imagine that. Imagine like not really sleeping much at all for like 10 months, or sorry, three months. And then I figured out, I just stopped all supplementation.

0:07:11
And then after like three, four, five days, it started to go back, I started to go back to normal and be able to sleep again. But I didn’t connect what it was until I started supplementing with magnesium again, like a couple years later, and then it happened again. And then I started figuring out like, it’s one of these supplements, right?

0:07:28
And then I narrowed it down to magnesium. And it sucks, it’s very hard to put two and two together because there seems to be like a buildup process. So it’s like you take magnesium and nothing happens to you the first day. Like it’s not a problem. And then the second day and then the third day and then like around the fourth, fifth day somewhere in there, that’s when the problem happens, but you’re no longer connecting it

0:07:50
to the thing you started doing like three, four days ago. And so it’s very tricky. It’s very sneaky. Magnesium, it snuck up on me. It got me, right? But I figured it out. I don’t know if that happens to anybody else, but it happens to me for sure. I get the brain zaps and anxiety if I take too much magnesium also.

0:08:10
Okay, all right. So I’m not, I guess I’m not the only one. Okay, seems to be issues with magnesium and melatonin. I wasn’t taking melatonin at the same time. It’s just the magnesium. I can, it’ll, it’ll happen every single time. At least every single time I’ve tried. Okay, anyway, that’s just a fun fact, side quest there.

0:08:33
Let’s go ahead and get into scope. Okay, so BIM. You guys know that BIM has been around for a very long time. It’s a very tried and true methodology for keeping your CSS organized. It also has an inherent benefit in it. So I wanted to talk about a little bit more the BIM philosophy to help people understand it because that’s also going to help you

0:08:56
understand scope and then we have to talk about like is this thing potentially going to replace the need for BIM? What advantages does it offer over BIM? Does it even have advantages over BIM? And then how is it going to integrate potentially into a page builder environment? And it’s very interesting how page builders, because CSS is getting quite advanced, and page builders are not really keeping up, okay? Just honestly, they’re just not doing a great job of keeping up. Now some of these things are not completely here yet, but there’s things like layers coming to CSS. There’s things like scope coming to CSS.

0:09:43
There’s container queries coming to CSS. And to my knowledge, like, page builders haven’t even started to think about this stuff. I mean, maybe they have, maybe they haven’t, I don’t know. At like layers, they could be implementing right now, which would help tremendously for like, we know that builders are kind of opinionated, right? Well, you’re free to be opinionated if you put all that opinion in a layer.

0:10:04
And with automatic CSS development for all these different page builders, we’re constantly having to work around the opinions, and they’re different opinions, of every single page builder. If they just stuck those opinions in a layer, everybody would be happy, but they haven’t done that yet. They could have. So that’s one example of just kind of being behind. Another example is like container queries. They’re gonna need a whole UI situation.

0:10:30
That’s not going to be, I don’t think, an easy thing to solve. But container queries are extremely powerful and we’re going to need them very, very, very soon. And I haven’t seen even an inch of movement into that territory in terms of what does the UI need to look like for container queries? Okay, we have a UI for media queries. But media queries are like a site wide thing. Whereas container

0:11:00
queries are well, they’re scoped, right, they’re scoped to specific things. So that and that brings us to scope, what are we going to do here with this thing? Okay, so let’s talk about BIM a little bit. I’m just going to add a section here. And then we’ll put a card in the section. So div class equals card. And normally, we would name this card.

0:11:26
Let’s just do it. Let’s just do my card. We’ll make it specific, because that’s really what you, for the most part, should be doing. And then we’ll maybe make this card a little bit more advanced as we go. Let’s do a little image source action here. Let’s do a, we’ll do an H3, okay.

0:11:50
This is my card, my card, okay. And then let’s go to, actually I think I’ve got, there we go, okay. Put a little ipsum in there. Yeah, take away some of that. We don’t need all of that. And then let’s put maybe a button in here. Let’s go, maybe we don’t put a class on it yet.

0:12:19
Maybe we don’t want to put a class on it yet. This is my call to action. Okay. Okay, there we go. So let’s come down here now and let’s do let’s target my card. And let’s do a I’m just gonna do some stuff I wouldn’t normally do. Oh, don’t want to do that. Let’s go to section and let’s do padding and we’ll do like, I don’t know, 8M, 3M, something like that just to get this off the off the edges here. Maybe 8 is a little aggressive. Let’s go 6. Let’s go my card. We’ll just do a we’ll just we’ll just do some pixels here. We’ll just make things super easy. Let’s do padding of you know 2m. Let’s do a display of flex. Let’s go flex direction of column. Okay and let’s do a gap of 1M and then let’s come up into here and

0:13:24
let’s do h1 h2 h3 let’s do maybe is okay see if this works and what I don’t you know I haven’t started to do much with layers because I can’t, because the other page builders, page builders don’t use layers, so I can’t use layers. It’s really annoying. Let’s go with margin. We just clear the margins on these.

0:13:51
There we go. Perfect. Okay. All right. Now, I like to just be able to collapse that and we are good. All right. So let’s go border of, I don’t know, one pixel solid DDD somewhere in there. Can you all see that? Maybe EEE? I’m sorry let’s go the other direction. AAA? Alright that’s probably good enough. Let’s do a little border radius of 1M as well. Okay, alright we’re getting there. Where’s our image source? Let’s go to assets here and let’s go to

0:14:23
and sure what’s what’s what’s this thing I don’t even know what this is but it copied the URL to clipboard so we can paste that in there and look at this look at this our cards coming together guys our card is coming together all right so as you know let’s get this JS out of the way we don’t need that everybody should still still be with me for the most part we’re gonna take this into bricks in just a second. Nice point, almost every JS course has calculator as a project, which is boring to build. Let’s make a side quest stream. Love this.

0:15:02
Okay, we can do that. Hey, when we get to the Q&A parts, I mean, it’s AMA, that means ask me anything. We can go on side quests, side tangents. Okay. We should do some fancy concentric border radius on here for that image, but we’re not going to. So we’re just keeping this focused on the task at hand. So let’s talk about BIM.

0:15:24
What do you need to do for BIM? If you notice, first of all, what do some people do? Let’s talk about some people, right? Some people would go my card image like this, and they would say, all right, I want a border radius of one M on that as well, right? And then they would get their border radius on their image. And this just seems like perfectly fine.

0:15:49
And they would go down here and they would say my card H3. Okay, and then for that, they would say color of, let’s do CSS colors. Let’s not use like red and all that, you know, I’ve got a headache. I want to I want to do something a little bit, you know, here we go. Cadet blue, like, that sounds dumb, but let’s do let’s go with it. Cadet blue. So there’s my cadet blue heading, right? And then

0:16:15
they would come down here and they would do Mike. Well, now we got to do the Pete, right? Let’s do the paragraph. And that could be color of let’s go the AAA. All right, that’s, let’s do 7 7 7. Something in, you know, a little bit on the lighter side. Add a little bit of, you know, contrast here. Okay, and then let’s do background color And of course we have not tokenized a damn thing yet, right Cadet blue is going to be like our primary color here. Okay

0:17:03
bang bang We’re probably going to need a little Justify justify content flex start align items flex start oh dear God okay let’s not do that that’s that image because there’s no reset file in here yeah you’re gonna need an image width of a hundred percent okay on all images maybe we can bring that back now. Justify content flex start save the image should not blow up anymore okay line items let’s start there we go now our buttons behaving all right border radius we’re going to go one m on there too okay and okay so we got something something like that and then we’re

0:17:57
going to go color of i don’t know what would look good on there is white gonna have enough contrast? Sure, whatever. And this, so this is like the, this is the, I don’t know, I, do people still write CSS like this? Like just raw-dogging the HTML components here? Is this what people still do? I don’t know if people still do this. I don’t, I highly, highly, highly don’t recommend this though, right? Like highly don’t recommend it. And this is where, you know, the BIM approach started to get followed here We are we’re kind of scoping in a way you’re scoping styles, right? You’re scoping this all the styles to this class called my card The problem here is there’s two inherent problems in this if you don’t already know

0:18:41
number one is if my H3 like this H this is an H3 right now. In a situation like this where the section actually has no heading itself. So we have a section element which has no heading. So you can’t just skip to H3s okay. So technically this should be an H2. And as you’re gonna see what happens when I change it to what it’s supposed to be it lost its styling because its styling was dependent upon it being an h3. This is one big reason why you don’t want to do this, okay, because things do need to

0:19:23
change from time to time. If this P needed to change to something else it would lose its styling, whatever styling I gave it. If this A needed to change to an actual button, first for like maybe maybe on some pages, okay let’s do this, maybe here’s an add an href to this right, so there’s a link. So maybe on some pages this needs to be a link to navigate somewhere, but on other pages what we decided to do with this card is pop up a modal. Instead of taking somewhere we’re going to open the content in a modal instead. Well if you’re gonna pop up the content in a modal this actually has to change from an A to a button and look what happens when you do that. You lose the styling because it’s dependent on it being an A. So that’s one huge problem.

0:20:20
The second big problem here is you’re increasing specificity and when you’re writing CSS, one of the goals probably should be to not use more specificity than what is actually needed, okay? If you don’t know how to calculate specificity or what specificity is, I’ve done that stuff in page building 101, you can Google specificity calculator and you can look at the different specificity of different combinations of selectors and things like that. But this is an increase in specificity where we actually don’t need to increase the specificity. So BIM comes along and BIM is like, well, you know, we need to be able to keep our CSS nice and organized, right? The other thing too is, you know, like this would just be a global, like this would style

0:21:16
all images on the website, whereas the minute we put my card image, we know we’re scoping that style to my card. And this word scope is very important in today’s discussion. Okay, so this is obviously, just don’t do this. Okay, like I wouldn’t recommend it. Does it work? It works until it doesn’t work, as you saw, like it worked until it no longer worked. And that’s really like,

0:21:43
probably the biggest problem with it. And then the specificity issue is, is, you know, it’s a decent sized problem. I wouldn’t say it’s not a problem. It’s not the end of the world. But it’s it’s a little bit of a problem. Because you get into the realm of trying to modify existing things. And now we have to go even more with the specificity. And, you know, God forbid you end up with importance and all this other stuff going on. Okay, so what does BIM say?

0:22:10
BIM says, well, we can make a little adjustment here. We can still scope our styles, but we can flatten the style sheet so we can still get the scoping. See, this accomplishes scoping. You’re scoping the style to something called my card, but you’re doing it with increased specificity. So BIM says, well, no, we can still scope the styles without increasing the specificity at all if we just name everything. And then not only will that solve the scoping issue

0:22:41
and the specificity issue, it’ll also solve the issue of things breaking when things change, okay? So BIM solves like a lot of these fundamental problems. And so you come in and BIM says that this is going to be class equals my card double underscore image. And then it says that this is going to be class equals my card, my card, my. This is the bad part of BIM, which in a page builder is why we have auto BIM. Well, if you’re an automatic CSS user, you have auto BIM because nobody likes to do this.

0:23:12
This is the annoying part of BIM. But it’s done for a very specific reason, well, multiple reasons, right, as we’re seeing. So this becomes myCardHeading, and this becomes class equals, and then myCard, you could say like, description, synopsis, paragraph, like whatever you want.

0:23:31
I wouldn’t call it a paragraph, that’s a technical thing. Let’s go back to an A here, all right. And let’s say class equals, and we’re going to say my card CTA, something like that. Okay, so now what is now what do we do with the actual style sheet? Okay, so watch how this starts to unfold, right? So my card image just becomes my card double underscore image, because that’s what I called it up here, right? And then this becomes my card heading and this becomes my card description the script description there we go and this becomes my card CTA and

0:24:10
When you see the like you see old-school CSS like the raw dog CSS Transform into BIM it starts to make a little bit more sense doesn’t it like look what we did. I just changed really the name of the selector. But we went from two selectors, like a combo selector, down to one. We just flattened the style sheet. So now we’re using the least possible specificity while still scoping everything to a thing, like called my card. And then if you bring nesting is, and this is vanilla CSS now, is it allows you to bring in something like this. So let’s just watch this image here. And we can use the ampersand,

0:25:00
right? And we’ll just bring in the styles there so we don’t have to write them again. Okay, bang. And then if I comment this out, we should still see and image. And where’d Where’d you go? That should definitely work. That should definitely work. Do I have to put the space? Well if you’re watching in the chat, let me know what am I missing there? What am I missing there?

0:25:34
I don’t think I’m missing anything. That should absolutely work. I don’t know if something weird is going on. Let me go to Sass real quick. Let’s go to this. Let’s go. You don’t have to, you don’t have to do this. Shouldn’t have to do this.

0:25:49
See? Okay. See, I, yeah, it’s nesting. Is nesting CSS good to use now across browsers? Yeah. Yeah, it should be. I mean, not like fully. Okay.

0:25:59
Let’s go to can I use nesting. You were at 84%, but it absolutely should work in Chrome. I mean, I’m in Chrome, should absolutely work here, right? So it’s not fully, like, no, don’t deploy it yet on a real project, but it’s like right around the corner. And it should be working in Chrome. So like, I’m working in Chrome, it should be working in Chrome.

0:26:22
But we’ll just leave SAS on for a minute because it’ll get us where we need to go and nothing bad will happen. But if I take my card heading right here and I just say, okay, we’re just doing this now, not only do I get to scope my styles, right, let’s take out my card heading, okay, look, it didn’t break, it still has its styles. So I’m writing less, plus, look, it’s all self-contained. It’s like I’m truly putting a little CSS component together right here. CSS nesting needs a couple more year to work,

0:26:54
I’m not using, no, it’s not gonna be a couple years. No, we’re like a few months, a few months. We should be good to go with it. I honestly don’t know why that’s, let’s go to CSS nesting. Now there could be a little syntax thing. I’m in SAS like all the time. And my brain has a hard time switching back and forth between the syntaxes. I put the space. I tried that too.

0:27:15
Okay, well I don’t have time to read it right now. It works in SAS just fine. Okay, so now I can, if I, let’s just move these here. Okay, let’s go, because you’re gonna see this happen a little bit with, well, scope, when we start talking about that. So description, and then we’ll bring in CTA. Dude, come on, for real, with this, with the formatting. Okay, CodePen, CodePen, not formatting me.

0:28:03
Okay Code pen code pen not formatting me today. Okay, let’s get rid of that And then I may have one extra bracket that we don’t need okay, so my card now is like a You know, it’s like a self-contained thing. Okay, so everything that’s Let me get rid of this Bang. Okay. There we go. And then what’s it saying? Where’s my bracket missing here? What is your warning? What are you warning me about? Nothing. Nothing. Nothing relevant. Nothing relevant. Something is definitely misformatted in

0:28:44
here. It’s what happens when you start moving shit around. Right there. Missing one. Bang. Okay. Now look at that. I can like collapse. There’s everything related to my card. If you’re managing a style sheet, everything related to my card right there. It’s just self-contained. Bang. And then everything under here, there it is. It’s all there. It’s everything that we need. That’s really nice. Once nesting, you know, magically starts working. How does scope work now? How does scope work now? I want you to I’m gonna get rid of all this I want you to remember it okay. So in scope let’s just delete well let’s keep it there for now. Let’s delete these though because now we have to talk about like how is how is scope going to be deployed. Let’s take

0:29:33
all these classes off we’re gonna start without the classes now. Now we’re clear your mind of all the other stuff that we’ve talked about thus far. We’re now into scope territory. Okay. We still need the my card. All right. Div my card. There we go. And I’ll just keep these things. All right. Fantastic. All right. Good. Got my styles. And our card blows up. All right. Heading. Wow. Organization magic. Okay. Cadet blue. Yeah. There you go. Okay. All right good Heading heading heading heading heading. No, that’s good. Okay. All right. Fantastic at scope. All right, and What we’re gonna do Little parentheses action, you know how you write media queries at media, you know men with all that stuff

0:30:18
Very very very similar situation here. Okay, the scope is my card. What you’re basically saying is all these styles that I’m about to write belong to my card. Okay. And so what this allows you to do, you can still go in, let’s just test it out, right. And actually if you want to write, if you want to write styles for that class right here, you do this. Or you should be able to do this. Okay, things want to work today. Check that out. So what’s the word, the colon scope selector does, is it selects the thing you’ve scoped, right? So it basically applies the styles to the parent element, all right? And so you saw my car just whip into shape right there

0:31:11
when I applied those styles to colon scope. But what I can do is I can come down here below this now and let’s just test with our H2. All right, so I can say cadet blue, I’m sorry, color is cadet blue, cadet blue, bang, save. And there it is. And look, I, that’s, isn’t that crazy? That’s kind of odd. Because it’s like, I didn’t, I didn’t tell it like a class like my card h2 I’m just like

0:31:41
saying I just want to sell an h2 the color of cadet blue now watch this if I go down here below the section and I put another h2 okay another heading and I save that one will not be cadet blue right because it’s not within this scope Okay, so what does this do? Does this allow us to get away with not putting classes on children while still scoping styles properly and keeping the CSS nice and organized? Because, look, I accomplished the same thing. I have a little component of CSS called my card.

0:32:20
It’s all, all the styles are scoped to my card. And clearly I don’t have to put unique classes on everything, at least, well, maybe, I don’t know. Go back to the initial problem I talked about earlier. If this needs to change from an H2 to an H3, I’m still screwed. So, so, I probably still should not do this, right? Even though it’s much safer than the other way around,

0:32:41
I still should not do this. I should give it a class, but maybe I don’t have to be so repetitive and specific. This is where we’re exploring and just talking and just like let’s have a discussion about it, right? Because if I did heading, right, this could mean that all my cards could just have a class of heading. And we’re about to take this into a page builder in just a second, right? Because now I can say heading is color cadet blue, right? And look, it’s cadet blue. Now what if I come

0:33:11
down here and I say this class has this h2 has a class of heading doesn’t matter doesn’t matter because this heading color cadet blue only exists within this scope okay so I’m free to just use like generic class names now I don’t have to get all repetitive my card double underscore right I don’t have to do all that. I just I just say, hey, this is going to be a heading. And then as long as I scope that style, I’m good to go. I’m not going to go off like, you know, accidentally globally styling all every heading that has a heading class. Okay, so question is, you know, can I get away with just class equals description now? Or you could even say you can even go if you wanted to do this, card heading, card description,

0:34:05
make it a little bit more organized, but yet not so repetitive. So maybe you have five different kinds of cards. They could all just have card heading by default. And then you just scope them differently. So you would say, my card, and then here’s another one where it would be like service card. And then here’s another one where it would be like testimonial card. Okay, so there’s and now look at this organization

0:34:29
but inside of this and inside of the HTML They’re all getting these generic class names card heading card description Those things can just stay almost like as utility classes, right? Because I control them from the source scope. All right, so heading this could be class equals, like for sure here, you could just go generic, right? Just a class equals button there. And now within my card scope, I can come down here and just say this is what my button needs to look like

0:35:01
in this scoped environment. Let’s go, let’s just make it ugly. Okay, actually, we’re fine. Let’s just do cadet red, or cadet blue. Boom, okay. And there it is, it’s gonna be cadet blue, and then color white, and yada, yada, yada. You can still have a global button,

0:35:17
you know, if you don’t wanna scope it. Obviously, some things shouldn’t be scoped, they should just be global. But you get the idea, right? I can be very generic with these class names because of the power of scope. But this is not the end of it, guys, because here’s the other problem.

0:35:32
Let’s do another problem. Let’s put another image in this card and let’s pretend that this is an icon okay let’s pretend that this is an icon and let’s also wrap all of this stuff in a body okay so I want to say div class equals card body all right bang like that okay thank you it’s very hard to type and talk at the same time. I don’t know if anybody’s tried to do that. It’s a little bit more difficult than you would think. Okay, because your brain has to say things

0:36:12
that your fingers aren’t actually doing. So it is a little bit of a skill. Okay, we’re gonna lose our padding because I just added a container that doesn’t have the gap in it. So let’s go, let’s just do this card body and then let’s go it’s and this is where you’re gonna see page builders really really really help out when I go page when I go gap 1m jack shit’s gonna happen because that’s not display flex right flex

0:36:39
direction of look at all this typing that you know you just don’t have to do and if like a page builder just defaults everything to flex it’s very nice it’s very nice then you use automatic CSS and it auto gaps everything for you, and that’s fantastic. Like the stuff, when you write CSS without anything behind it helping you out, you realize how much this stuff helps. Okay, so there we are there.

0:37:00
Now I’m gonna show you something very important, right? We’re gonna wrap the image. Let’s go with a div class of image wrapper, okay? Which we can just be, again, super generic now. And let’s do a close on that div. Okay, now inside of our body, our card body right here, we’re gonna add another image. I think I grabbed it.

0:37:24
There we go. Okay, image source, it does not have a class. We’re gonna do card icon, okay? So we have a card icon inside of there. There we go, fantastic. And let’s see, I wanna check these two things out. Did we do anything with the image yet? We have not.

0:37:43
Check this out. Image, okay, and we’re going to say border radius of 1M. Right? Okay, now they both get the border radius of 1M. Here’s the problem, right? If you were doing this based on the HTML, this is another problem back when, you know, you’re raw-dogging HTML elements here with your CSS.

0:38:03
If you wanted the icon to be small, because that’s usually what icons are, let’s say like 100 pixels, right? So you go with 100, oh, well, it was fine, you know, I could do stuff to an image when there was only one of them, but now there’s more than one, it suddenly becomes a problem because doing this

0:38:21
means they all have to look exactly the same. So that’s again where these classes come in, where you would say, image, we can stick with border radius one, but then I’m gonna come down here and I’m gonna say my card icon is going to be width of 100 pixels. Now the icon should be 100 pixels, right?

0:38:39
But here’s a crazy thing about scope. So let’s, and I’m still trying to brainstorm what would be the best approach for something like this. I’m just gonna show you first and then and then we’ll talk about what the hell is going on here okay. So with scope you can actually put like destinations for the scope. I don’t know what else, there’s an official name for them but I don’t know it yet I haven’t memorized it yet. But you can scope from something to something. There’s a scope range which is kind of crazy. And again this is stuff is brand new so we have to brainstorm like the

0:39:21
best way to kind of start to use this stuff. Alright but you can do at scope my card too and then you can do card body because remember I put this thing called card body in there. I think this is, I think this is going to work. So I’m just going to raw dog it right, I’m just going to go image and let’s do border radius of 5m. Let’s just make it insane. Look at that. What just happened? I’m like, I didn’t specify that it, well I did kind of, but in the, in the actual selector, I just put image. Now why didn’t this one change? Because it’s not, the scope, this instruction right here, let me put a space in here.

0:40:09
This instruction right here ends at the card body, where the card body starts, okay? So this thing is not in the card body, all right? It’s in my card, but it’s not in card body, so it got the rules. And the other thing, which is in card body, was excluded because it’s outside of the scope. That’s pretty crazy.

0:40:32
Think about like styling things from a header to all the way down to the footer. So you know when you’re like, all right, I want links and such to look this way in the body, but I don’t want them to look this way in the header, and I don’t want them to look this way in the footer, can you use scope now to say, no, I just want everything in this range

0:40:51
to be styled like that, right? Or if you want a header and body but not the footer or something like that So there’s a lot of ways that we need to start to learn and think about how to play with this range syntax With regard to scope which by the way BIM does not have this. Okay, so Initially our premise was is this going to kill BIM? Is it gonna replace BIM? Is it gonna be used in conjunction with BIM? I don’t know if we know yet. I don’t know if there’s an answer yet. And I also I’m still not convinced I don’t know if

0:41:26
You should go like, you know, just generic classes on these things This would end up being card heading. I if I were to you know, if we were being like, not super aggressive, like, let’s tiptoe into this situation, I would probably suggest going with something like this. So here’s what we call this, like limited scope. So at least when I’m looking at CSS, like, okay, card body card heading, like I know where these things are, right. But then again, you don’t technically have to, you would only have to if there’s more than one heading, for example, or if there is more than one paragraph description, I don’t know. Then you would start to name things more uniquely, because you still have to be able to target them within the scope by themselves. But then there’s the range thing going on.

0:42:18
So, general practice is, even though you can make it work, I think general practice is you still want some semblance of organization, but how much organization is the, because the more organization you add in this repetitive class naming, the more you’re typing, right? And you can’t do other things. Let’s go into page builder land now. This is where I was getting at, right?

0:42:42
How is this going to work? And let me just pit stop with the chat. Let’s go to chat real quick and just see, see what everybody’s thinking. Does that mean you could do scope body to header footer? Yeah, I believe so, I believe so, yes. Can you define the scope to card body within the first scope instead of being outside?

0:43:01
I don’t know what you mean. Scope my card, this is inside. Yeah, and that’s, I don’t know what you mean by outside, because I’m not outside.

0:43:11
I am inside.

0:43:12
Okay, looks cool, but I guess it can get very confusing in no time. If you go simple with it like this, okay, now this starts to get confusing, because now you can’t just read it, right? You can’t just read the CSS, you actually have to look at the DOM as well, because you have to know where does this thing live in order to know why

0:43:44
the styles are being applied or not being applied, you have to analyze the DOM. Okay, so that is one downside. With BIM, I don’t have to look at the DOM, that’s actually a really good aspect of BIM. When I read BIM, I know exactly what’s going on. That’s like a huge benefit to BIM. Like I know what’s pretty well, you don’t necessarily know what’s nested inside other things at multi-level, but if they do BIM really well, you kinda do,

0:44:08
you kinda do. With this, I think you’re gonna be forced to read the DOM to understand why the CSS is behaving the way that it is. So that is one downside, but only when you use the range syntax. If you just use, let’s just do this, this is as easy as it gets. Like the button, even if I went generic, okay?

0:44:31
Body, you would want this to be a class, right? Image, heading, so be super generic with it. And then up here with image wrapper, which we didn’t even style yet, we could just say that that’s the body. And we need to open that up. So there’s the icon. Okay, did I?

0:44:51
Okay, I haven’t even done anything with the icon yet. This would just be the heading. I think this is the way most people are gonna go with this when they start deploying scope. And then this is heading over here, which is outside the scope, so it should not be styled. Then we can just come in here and say my icon. And we could say width of 100 pixels at that point, right?

0:45:14
Cool, and then we could actually say aspect ratio of one, and we could say object fit equals cover, and then we could say border radius of 50 VW, okay, and then it’s actually gonna look like an icon. Let’s go 60 and bring it down there, okay. So I know exactly what’s going on because all I have to see is that, ah, all of this stuff is contained in this scope.

0:45:41
So I know that all of these things I’m reading are happening within my card. That’s not hard, that’s not unorganized, that’s actually really, really awesome, right? And I do think it’s a big help. Let’s go to page builder lands, because here’s what I’m thinking, right? It now means, technically, it now means

0:46:00
that a page builder, because remember a page, what is a page builder supposed to do? It’s supposed to save you time without fucking up your project. Most of them fuck up your project, which kind of sucks, but the good ones, the good ones save you a lot of time without fucking up your project. So we’re gonna go to div and we’re gonna add a heading. So if I add a heading, look at this, let’s go save. What this kind of means, guys, what this kind of means stick with me okay is we don’t have a need for this shit right here Brixie heading element or heading right all these you know all these page

0:46:37
builders are like yeah we’ll add our own little prefix for everything and then it’s like come on like it’s all super messy what if what if the page voter just did this because before it’s like that’s a little bit useless because in order to use that my div would need my div wouldn’t here’s why that’s useless okay my card right and then you’re like well Kevin that’s not useless if it has a heading class on it like this because Kevin it’s how people talk when they they don’t like what I have to say in my mind anyway that’s how they talk. Root, heading, right?

0:47:17
Kevin, you can do this, right?

0:47:20
But what you’ve done, now we go back to, no, you shouldn’t do that because you just increased the specificity for no reason. Now we don’t have a flat style sheet the way we probably want to have. It’s just not great, right? So that’s where, you know, now, let’s see if this works. Let’s see if this works in Bricks.

0:47:39
Now it’s not such a big deal. Let’s keep that heading, but let’s go at scope, and let’s go with, what was that called? MyCard, yeah, I called it the same thing, okay? So within the scope of MyCard, we now have, oh, look at that, and it’s working, okay? Yeah, there’s no reason why it wouldn’t. There’s no reason why it wouldn’t.

0:48:00
So that’s fantastic. So now the builder can just throw generic classes on there and they can still do all their default styles because they can also put their scope in a layer called shitty defaults, right? So we just make a layer, the builder, or we’ll do my, the builder’s shitty defaults. They can put all their shitty defaults

0:48:20
right up inside that layer, and now guess what? By default, by default, really almost, those styles have no specificity. Why do they have no specificity? Because anything you write outside of a layer automatically takes precedence. So anytime I come in now, and I want to do something to that heading, right, within my own scope, like that, I don’t even have to worry about specificity

0:48:42
or, you know, style sheet order or anything else at that point, because they put their stuff in a layer. That’s one thing I’ve said, and I wrote this in the article on automaticcss.com, if you go to the blog. If you wanna know why we don’t integrate with every page builder and what they need to do

0:48:58
and what they should be doing in order to make this way better for users and everything else, just go read this article right here. But requirement number two, and almost none of them do this, which is a problem. I say it’s requirement number two, it’s really like request number two. Low specificity defaults or no defaults.

0:49:20
And I tell them exactly how to do this. You’ve got multiple options. Use where, or use layers, or use custom property fallbacks, or do something other than what you’re currently doing. Please. Just these opinionated defaults that are just right there that we have to work around, kind of sucks, right? Okay, so think about adding a heading

0:49:45
that already adds a heading class for you, that already adds a, you know, we’d have to come up maybe some sort of, some sort of global syntax for these things. I don’t know, we’re at the early stages of this thought process. We now need to start strategizing for how we can deploy scope in a really organized fashion

0:50:09
and maintainable, obviously, is a key requirement here. But how page builders can start to integrate this. Right now I can write scope styles, but imagine that if you come up here to my card right here, and I can say everything I’m doing in here somehow some way like maybe it detects maybe it detects my child elements and when I click on a detected child element and

0:50:37
then start using these inputs, it scopes them without needing to put a class on those child elements. Maybe maybe I don’t know it scopes them to that parent class automatically for me. Maybe, maybe that’s possible. I don’t know. We need to explore. We need to look. We need to experiment. We need to think. Okay? Because that would be awesome. Because then, if it does that somehow, some way, maybe I can choose what their names are. Maybe I don’t have to choose what their names are in a lot of cases. Because here’s the thing. If you’re doing a very simple card, like let’s say you’re like, dog, this is, it’s, it’s never going to be anything more than an icon card.

0:51:18
I promise.

0:51:19
Okay.

0:51:20
Like it’s never going to be more than an icon card. Then I don’t have to get super fancy. I could even just raw dog it. Like just go target the image, target the heading, target the whatever. I mean, it’s still probably not a great idea, but you could, you could, but I just want to know, we need to start thinking how page builders are going to start to implement this. My general thinking is this is a solid replacement for BIM. It can cut down on a tremendous amount of repetition,

0:51:46
which is good. You know, we have auto, see, here’s the thing. In a page builder, page builder world is very different from writing code world for a very good reason. Because you saw bad part of BIM. What’s the bad part of BIM? Writing all those class names. So I do it, I do text. Look how fast I can add these things. I don’t have to worry about broken tags. I don’t have to worry about typos. I don’t in my HTML and

0:52:13
all of that stuff. I mean look at this stuff. Let’s go ahead and add an icon in here. Okay let’s drop in the icon. Okay so the bad part of BIM, this is called my card right? And let’s let’s just delete this class like it doesn’t even exist there it goes okay the bad part of BIM is selecting every element and typing my my card thing my card thing my nobody wants to do that I don’t want to do it in a page builder I don’t want to do it when I write code I don’t want to do it in any capacity or context okay now if you write code you got to go like Emmet or something like that. With the page builder, you just do this.

0:52:53
You just click a button and go, oh, no, I wanna call that one description. But yeah, I like that. Okay, apply, they’re all done. So we, in a page builder context with automatic CSS, eliminated the biggest problem with BIM, which is just having to type all that shit out, right? Now that’s gone.

0:53:13
So to me, you can use BIM almost effortlessly in a page builder so can can scope be that effortless right because scope does eliminate the need for all that typing but we already eliminated that with the page builder so what else does scope do that convinces us perhaps to move to it to switch to it and that’s what I don’t know yet. That’s the unknown right now We need to start using it and playing with it and then I think either some great advantages will manifest or We’ll come to the conclusion that it’s a wash probably maybe right? It’s it’s definitely not gonna be worse But it might be a wash like well, you can do BAM or you could do scope, either way you’re doing the same

0:54:03
amount of work and maybe there’s no real advantages. The one area where there will certainly be advantages but we just need to see is it worth the confusion is the range scope, being able to range the scope. Okay so we don’t know. All right let me go to chat and see, drop your comments we’re gonna go into Q&A, AMA, and all that stuff now. So you can ask whatever you want. Open season on the questions. But what’s your initial reaction to Scope? If you’re thinking through this in a page builder context, do you see any advantages,

0:54:40
possibilities? Do you see any downsides? Do you see…what do you see? What’s your initial reaction to this stuff? I don’t see scope going to kill BIM but might be fusion with it. Okay. Sounds really interesting. I’m just jumping in.

0:54:56
We’ll need to get back to the beginning to see what’s going on. Yeah, this is probably one where you can’t just jump into the middle. Would a scope be page wide or site wide or would a page wide give more specificity so I can alter a global scope on a single page? Yeah, that’s the thing. I mean, you could scope, you could scope styles to a theme. You could scope styles to, because I think you can nest scopes as well.

0:55:20
But then we definitely get into a realm of like, mental processing, okay? Like reading a style sheet and knowing what the hell is going on. That, we’re gonna need to look for ways to keep things organized. You can have two scopes defined for my card. Can you define the second one within the first one?

0:55:38
I don’t know why you would want to do that. By the way, oh, let’s talk about the big thing.

0:55:43
The big thing, do I still have it?

0:55:44
Yes, look.

0:55:45
So, this was actually a big thing. I can’t believe I forgot to mention it, okay? This MyCard heading is not like, in terms of specificity, it’s not like writing this. It’s like you wrote that. That’s like another, there’s another reveal, right? Of like, it doesn’t mess up your specificity. It shares, it has very similar specificity to BIM,

0:56:21
which is really nice. I don’t know if I mentioned that or not, but that’s a big part of it. Okay. Make sure when you ask questions that you use the hashtag. Hashtag Q or hashtag question. Scope is a game changer. Will you be using this in ACSS in the future? That’s the thing.

0:56:40
That’s the thing. I’ve got to think because, okay, there’s three contexts. There’s write code context. There is, there’s actually four contexts. Excuse me, there’s four contexts. There’s write code context. There’s page builder context. There’s framework context.

0:57:02
And there’s the new, the new, the new context brought to you by, brought to you by Automatic CSS. This is not available anywhere else. There is recipe context. Okay, so if you’re not on the up and up with automatic CSS 3.0, we are, see that at scope right here, we are bringing what’s called at recipe to the table.

0:57:27
Now you don’t actually type the word recipe, you just call the name of the recipe, right? So if I wanted to do something like at media, or let’s do at breakpoint. It’s not gonna work, nothing’s gonna happen, right? But imagine typing this and when you type that, this happens, okay? Min, I’m sorry, let’s do max width

0:57:50
and let’s do 768 pixels and bang, bang, and then it’s just a cursor sitting here waiting for your style, right? So it like writes this for you. Now that’s a very small version of a recipe. Where did it get the 768? It got it from your L breakpoint in your style sheet. So you don’t have to know,

0:58:11
what the hell, what is my, what is that breakpoint value again? You don’t need to know. You just use the name of it. And then it gives you the media query. Now that’s a very small example. There are large examples like at clickable parent. And immediately this expands out into all of the clickable

0:58:30
parent code that you need for this item right here. You don’t have to know how to write it, and then you just change a couple things you need to change, hit save. So recipes are coming to Automatic CSS. So we could have maybe being integrating scope in a certain way within the framework, but then also just giving you recipes,

0:58:51
which by the way, you can share recipes with other people, you can import other people’s recipes, right? So all automatic CSS users can easily share recipes across together. Recipes is gonna be a game changer in itself. And then there’s another aspect of recipes, which I can’t reveal yet, that will, they’re encapsulated recipes, maybe I’ll just describe them as that to not reveal much of anything

0:59:18
But you could you can do you can do this. You can literally just put your styles in there. Okay That’s gonna that’s gonna be pretty cool. Not exactly like that, but I just I can’t reveal the whole detail There’s a lot of possibilities there it’s it’s this stuff is going to get so fun. It’s fun as this. Like I was I was I was doing something the other day and I was just like man this is really just a real joy you know. It was actually building this thing for the JavaScript. Let’s go let’s go look at it you know. Let’s go this building this thing, okay? So, when I’m going through my card, right?

1:00:03
And I just auto-bimmed, I just auto-bimmed that, so I didn’t have to write any of these class names, they kind of just exist for me. And so I’m just like, you know, just starting to style stuff up, like I’m just gonna right-click here, and that looks good, and then, you know, I’ll just go into a background color here.

1:00:21
Okay, yeah, that looks great. That looks great there. And I’m just like that’s kind of floating through this I want to change that. Okay, we’ll just come in action. I just chose the same one She’s she’s a little bit darker one. I think a little gap in there. Let’s just change this to flex real quick Let’s come in with the gap. Yeah content gap, you know, cuz it is content. Oh, you know, I want half that. Let’s just divide that by two. Okay, that’s divided by two now. And I’m just, just kind of casually, like all the tokens are just there.

1:01:00
I just right click on shit and choose the token that makes the most sense for that situation. I, you know, go like border radius for this, right? It’s almost like you’re just flying through, like lazily flying through here, where I can just come up here and go, you know, my M radius, which actually is in 3.0, there’s no M’s, L’s, X’s, it’s just radius now, and it’s gonna magically do exactly what you want, but you’re just like floating

1:01:27
through, just lazily like right-clicking and just choosing something, and the thing is just coming before your eyes, and it just feels, it’s starting to really feel effortless, and now what we’re gonna do, where you take something like, and I know this is a terribly ugly situation going on here, especially because these star icons are just absolutely horrific. Just change that to an H3. Let’s just, let’s make this look like an actual card.

1:01:51
Look, I can even do it with the width. I don’t even have to think about numbers anymore. I’m just token token token token token token token token And all the tokens do what I want them to do because I you know I set them up that way So it’s just it’s just really nice, right? You know button. I can do I just change the size of buttons. I can just add styles to buttons. I mean like It’s too. It’s too easy. It’s too easy now It just feels really awesome and now imagine if let’s pretend this button didn’t exist and you wanted to make this a clickable parent, okay?

1:02:28
Well, we know that you can go, you know, clickable parent, right? Bang, okay. But the problem is that litters these utility classes everywhere. I’m sorry, I will get back to questions in just a second. That litters utility classes everywhere, which we know we don’t wanna do.

1:02:41
We know we don’t wanna do that, right? So we need to assign the clickable parent styles to that class. How the hell do you do that if you don’t know how to write the code for clickable parent? Well, now you just do this. You just go root, and then you go,

1:02:58
actually, you don’t even need to write root. I’m sorry, you don’t even need to write root. You just do this, clickable parent, close parentheses, and then, or close the semicolon, and then it just, it just, literally that word explodes, and then all the code that you need just appears. And then you just hit save. And you’re just like, okay,

1:03:16
now I just assigned ClickableParent to that class. And you don’t need to know anything about it. You just need to know the name of the thing that you want, and you can just manifest the entire recipe for it and move on with your life. It’s getting too easy. It’s getting too easy. And I just, I really felt that the other day

1:03:34
when I was putting together that little JavaScript tutorial, I was like, God, creating that little floating bubble, fixed position down here, it was like effortless. It was, I just literally right clicked a few things and there it was. It’s just really, really, really nice. Okay.

1:03:50
Recipes is gonna be a game changer.

1:03:52
Recipes 100% gonna be a game changer. Everybody and their mom is gonna copy what we’re doing with recipes. Just mark my words, it’s going to happen. Just as almost everything that we do instantly gets like, oh, just there it is, it starts to show up everywhere. It’s nice. It’s going to be nice. It’s going to be nice. Okay. And I’m not saying it shouldn’t, it’s fine. It’s that that is what it does, like we’ve said, you know, with Automatic CSS, our team is, like our mission is to fundamentally transform the landscape of front-end development, okay?

1:04:37
More specifically with web design, right? In page builders. And that’s happening. That’s happening. And you’re seeing that the way that we come out with an idea and then it propagates, that is changing the landscape of what we do. It’s not just, oh, it’s changing the landscape for automatic CSS users.

1:04:55
No, because that idea then gets propagated and now suddenly the entire landscape has shifted of how things are working, okay? It’s very powerful. Can I have a card image heading link frames according with text where the card is clickable parent but I can still use the toggle for the long text. Can you clarify that a little bit more?

1:05:21
I’m not sure. Maybe it’s my headache and sleep situation but I’m not exactly sure what you’re asking. Kevin in the Q&A, can you help with example of an off-canvas mobile menu in Brics explaining how the toggle element is used. I don’t want to go anywhere near the Bricks menu element. The more I use it, the more I detest it. I don’t ever want to see it again. And we are, as soon as 3.0 is out and we can

1:05:51
calm down with the 3.0 development a little bit, we are gonna go right into building our own menu builder in Bricks. And then it’s actually probably gonna expand out into, it’s just gonna be a plug-in like a standalone accessible mega menu thing that you can use in any in any environment because there aren’t any good ones they all suck they’re all absolute trash cans and I just I’m sick of all of them so don’t make me know I I don’t want to jump off a bridge today so I’m not going to go near the bricks menu builder. What does scope CSS look like in DevTools?

1:06:29
If I’m troubleshooting CSS, is it easy to tell which h2 to edit? Scope my card heading color red. Okay, that is I applied CSS over here. Let’s take off that and see if our see if it goes red again. Refresh, refresh, refresh. Okay, I actually don’t know why. Well, it doesn’t, if you break your style sheet with stuff that doesn’t actually exist, that probably doesn’t help much either. Let’s go in here. My card, did I put anything under here? No, that’s all good to go. Okay. Oh, did that not really exist then? Scope, my card. Oh, I was going to try this.

1:07:15
That’s what I was going to try. I want to see if it works with the dynamic root selector. So theoretically, because I’m on my card, I could do root right there. But I don’t know. I don’t know if this is going to break. It doesn’t appear like that’s working. Let’s inspect. Now let’s answer your question. Oh, that’s an a okay

1:07:43
Let’s that’s going to complicate things even further. Let’s take off the link off of here We don’t want to give we want to limit the complications. Okay, we don’t need that. We don’t need that Okay, let’s refresh this and let’s see what’s going on. Where is this getting? Here’s the h3 H3. Heading color, heading color. Okay. It does not appear that that’s applying any styles the way that it’s supposed to. So it appears to me that that does not work. The dynamic root selector inside of scope does not work. And actually, you wouldn’t even need to, you would still want to, you would still want to put the CSS in here. I was thinking about also being able to come up here to page settings

1:08:28
and put it at the top, but you wouldn’t want to do that. That’s a bad idea. Don’t do that. That’s a bad idea. So how would you use scope in this with other stuff going on? Scope, my, because if I do it at the ID level, that’s odd. You wouldn’t want to, that’s not how you would write it in the style sheet and it doesn’t even work there either.

1:08:51
So yeah, I’m wondering where you would put it.

1:08:53
Where would you put it? Let’s go back to CodePen and I’ll answer your question in CodePen. So we have scope styles to my card heading. So let’s just inspect this heading and let’s see what it looks like. So let me zoom in so you can see. This is what it looks like.

1:09:11
So it tells you what the scope is, and then the class that you’re inspecting. So that’s super nice, right? That makes everything very, very, very clear. That’s hard to get, that’s not gonna cause, shouldn’t cause any confusion. And I would imagine it would tell you what the range is for a class as well.

1:09:32
So if a class is affected by a scope, it’s gonna tell you the range of that scope in the inspector. So it should be very easy to diagnose some things that are, excuse me, going on. Okay. Any questions? Questions? I got to get back to those. You said in your ACSS intro video that a five-page brochure site is the learning curve.

1:09:56
What would your go-to method be for someone to find a site to build even as a non-project site? Good question. Well, I have always started with my personal website. So now my personal website is more than a five page site, but still I would start with my own personal website. So let’s say I was going to switch page builders today. Let’s say I was going to switch to Etch. And I’m like, I just need to know this thing. Like I need to make sure it’s good to

1:10:41
go. I would build my whole current personal website in Etch, or maybe a new version of it, if it needs to be refreshed or whatever and so I would use my own personal website as a testing ground for that I assume you have a personal website if you don’t you probably should and that’s your your testing learning ground and that’s how you can vet stuff as well so that’s probably what I would recommend okay hey remember you can ask questions about anything business marketing SEO PPC, whatever, whatever. It doesn’t have to be about scope and all this other stuff.

1:11:19
Could you BIM renaming example using one of your frames with ACSS? I’m not sure which part of the frame to BIM. Yeah, yep. Can do that. If this site is connected to frames, I can do that. Is it? Okay, it is it is it is it is well, let’s just use process section Foxtrot. It’s a nice little sticky sticky little card overlay

1:11:46
stack thing Okay, let’s not zoom in so far And let’s get this horrifically large sidebar out of the way. All right, so that’s more or less what this looks like So we’ve done this before. Okay before okay standard process for using frames is you want to rename them when you import them now update you can actually just rename them now you don’t have to do the delete old create new that dance why don’t you have to do that anymore did bricks update something no we did we did we we worked around the

1:12:21
Okay, so in automatic CSS under options, you are going to see import original classes, bricks remote templates, okay? If this is on, when you’ve renamed something like this frame, you just rename the classes. When you go to import it again, it’s going to import the original class names for you, okay? If you don’t want that to happen, you just turn it off. Then it will be the old

1:12:54
behavior, right? Um, so now you can just rename if you, if you just prefer renaming, which is actually safer and easier than I would go that route, but we do want to rename everything. So let’s open this and we’re going to take a look at what’s going on. Now, this is actually a unique little situation that we have found ourselves in. And I didn’t do this on purpose, but it just is what it is. You take a second and just analyze. What is the structure of this section? Well, we have a grid.

1:13:25
In a lot of our frames, the grid is a block in itself. In BEM, B-E-M, block element modifier, the grid is a block, meaning you can take that grid and use it in any section that you want. It’s not, it doesn’t have to live in that particular section. In this case, look at this, process section Foxtrot, process section Foxtrot double underscore grid. What is that telling you? It’s telling you that the grid lives with process section Foxtrot for all time. This is not a, an independent component that we’re going to go put somewhere else. It’s for whatever reason needs to live with

1:14:04
this section. So in this case, this is one of the cases where when we go to name this, now let’s look at the cards. Are they the same situation? That’s the next question. And look, by golly gee, it looks like they are. So these cards, this is not… and why? Why does it… let’s just take a second to think. Think through this. I mean, that looks like a card I could use other places, doesn’t it? But why can’t I? Why is frames telling me, don’t do that,

1:14:33
don’t try to do that? Well, it’s because of their behavior, right? You can’t just take this card and randomly stick it. It’s gonna have the code associated with this stacking behavior. All the stuff required to make this effect work in this section is probably attached to some degree to that card, right?

1:14:52
And so this is not a standalone component that you’re gonna go use all over the place. This is one encapsulated thing that’s creating this effect, right? Okay, so what this tells us is I can literally come up here and I can auto-bend the shit out of all of that. All of that, right? One click, I just name it whatever I want, right? Let’s go with process

1:15:18
section, okay? And look what it’s gonna do to every single one of those. And I could just have rename on there and we are good to go. Bang! Okay? So look, they’re all mine. They’re all mine. Nothing is broken. And now when I re-import it again, it’s gonna, it’s gonna have all their original classes on it, so I can start from scratch if I want to. Now, here’s the question people ask, well, if I go back to the library and re-import it, what if I want mine, my version? Well, there’s a solution for that, okay? And it’s found right here, okay? Save as template, and in Bricks, there’s something called, guess what? My templates, right? And so I just save process section to my templates and that’s where I put mine.

1:16:10
If I want the frames one, guess where I go? I go back to frames and I get it from there because now I’m going to get, I’m going to go get an original, right? But if I want my version, that’s an example of where you literally can just one click everything becomes mine Because of the structure you just take a second to analyze what’s going on and see the structure now Let’s go get one that has a different a more conventional frame structure So let’s do something like feature section Yankee. Let’s bring that in. Okay, so there’s feature section Yankee looking good and

1:16:47
There’s a lot going on here, but if I analyze it, okay, let’s bring in good. And there’s a lot going on here, but if I analyze it, okay, let’s bring in, first look at the section level. What is inside of the section? Well, we have an introduction. Is that, that’s introduction delta. Does that sound like it’s part of feature section Yankee?

1:17:07
No, no, that’s its own thing. Feature, like introduction delta can be used many, many, many places, right? Okay. So I can’t, this is not part of BIM, right?

1:17:16
This is its own B-E-M right here with its own children.

1:17:16
Oh, which by the way, has something called badge group alpha in it, another component, another block, right? So it’s its own B-E-M situation with its own children, okay? And I wouldn’t wanna even touch this, okay? If I just, maybe I wanna do intro, call it whatever I want, maybe my social proof intro or something like that.

1:17:40
You could definitely do that, but you would do it right here at this level. And then what you would come in and do, and look, it’s already noticed because of the different name, it’s like, eh, you probably don’t want to do anything to those. So they’re grayed out. The tool already knows you probably don’t want to do anything to that. You do probably want to do something to that heading though. So that heading is highlighted as it is going to be changed. It is going to be renamed. Okay. So I could come in here and I could say intro. I’ll do social proof

1:18:12
intro or something like that. And then it’s going to get put on that heading. Okay. Fantastic. Now we go in badge group alpha has been left alone because it was grayed out. I didn’t want it to be touched. And so it’s not touched Now if I wanted to rename badge group alpha and make it mine I could do that I just BIM it at this level you BIM it at the block level now what you don’t want to do is come up to feature section Yankee and try to start going nuts with shit because This is gonna mess everything up right and and now it’s like well, why aren’t those things grayed out? Well, it doesn’t really know. It doesn’t, it doesn’t, the algorithm,

1:18:52
and we talked about this so much, of like, how is it gonna know? You would have to manually tell it what is a block element inside of this, right? In order for it to know. Which you can do by going and excluding things, but it’s just not very time efficient, right? It’s better to work, what I say, inside out.

1:19:09
You work inside out with AutoBIM. So you go into Feature Grid Yankee and you find Feature Card Yankee, which is actually the first thing I would want to auto-bim. And I would want to say this is my talking points card or whatever. And then naming everything inside there is perfectly fine. You auto-bim inside out, work your way up. And if we look at the grid, Feature Grid Yankee, okay, let’s collapse these.

1:19:35
See how these, the only children of Feature Grid Yankee are other blocks there are no element children so there is nothing to auto-bend at this level if you want feature grid yankee to be yours you just do this and now it’s yours okay you don’t auto-bend it because there’s nothing to i’m not doing anything to anything else there’s no e’s or m’s that i’m trying to affect. I’m just affecting the block. And so I can just do that right here. I don’t need auto BIM for that, right? Auto BIM is for BIMing.

1:20:11
It’s not for just renaming anything. It’s for BIMing things, okay? And these are the nuances that, and I understand like it’s, especially if you don’t have a ton of experience with BIM, there’s a learning curve to auto BIM. I’ve never said that there’s no learning curve to auto BEM But if you get through the learning curve to auto BEM it saves you

1:20:33
just an assload of time like Incalculable amount of time when we build frames, especially if you’re starting from scratch, okay, like Here’s the other thing that people forget about auto BEM. I did not build auto BEM for frames for changing frames. I built it for building things from scratch. That’s what it was designed for. We just decided, oh, you know what? If you know what you’re doing, you can use it to remap frames classes,

1:21:05
but that’s not what it was designed for, right? If we designed it for that, we might’ve gone like made it even more user friendly, but that’s not what it was designed for. It was designed for this. It was designed for when you’re doing something like this and you’re like, I’m just gonna make this a grid real quick. And we’re gonna slap a, what we’ll call a blog post card,

1:21:26
like an article card in here, okay? So I’m gonna add a block, and then I am going to add inside that block, we’ll go block, block, we’ll do two more. Inside that block, we’re gonna do an image. And then inside that block, we’re gonna do our heading and then we’re gonna do our text And then we want another block inside of that because that’s gonna be like our meta Okay, and then inside of that would be text for like the date or whatever. Okay, that would be like date. There’s your description

1:21:52
Okay, so there’s like the makings of a blog postcard right there So now I have this thing that I just I just threw all these things in here and what’s the bad part of BIM? The bad part of BIM is you got to write all those classes. Okay so now I can just come in and say article card and then I can just name the things what they are right like media wrapper and you’re like well Kevin you still have to write all this I but but I had to write all that anyway because only a psychopath would leave their structure panel unorganized and unlabeled right I’ve got a label it anyway but the key is I don’t have to write the stem of the class. So I just come in and do media and then I’ll go body wrapper and then heading

1:22:32
is fine. And then I do description. And then I come in here for meta. I like to name rappers as rappers. And then this would be the date. Okay. And then I just magically click this thing called sync labels. And not only do I have an organized structure panel, but I have all of my classes like that. That’s what AutoBIM was built for. And in that context, it’s unbeatable, it’s phenomenal. You can see that.

1:22:58
It saves a tremendous amount of time and it does the double duty of keeping you organized. In order to get all your classes with AutoBIM, you also just by default have to organize your shit, which is awesome, because we don’t like unorganized projects. And the fact that you can do both of them at the same time, that’s phenomenal. That’s phenomenal. So that’s what it was built for. And I’ll tell you when we when we’re building frames, I mean,

1:23:27
it’s tremendously, tremendously helpful. Okay, because then I can just go in. I mean, let’s just let’s just do it, right? Let’s just go in, we’ll grab all this. All right. And then we’ll come down to our body route. And this is what I meant by like, I’m just lazily going to come in here and, you know, start to style some stuff up, a little bit of right clicking, a little bit of calcing, a little bit of what have you, right?

1:23:52
Background, just some right clicking some things, I can even start to use my contextual, haven’t really decided what we’re gonna call these yet, these color assignments, right? But now you don’t even have to choose a color, right? You’re just BG light, BG ultra light. This is gonna help tremendously. I’ve gotta do a whole video on that when it’s official.

1:24:10
And then we’ll go to our normal article card up here and we’ll go, I mean, look at how fast this like little article card is coming together. It’s just stupid, it’s just dumb. It’s like, this is too easy. This should be, don’t let your clients see that you do this like this because you know they won’t want to pay you even though they should pay you for being intelligent enough to you know buy a framework like automatic

1:24:37
CSS and learn to use it and actually employ it. You know they won’t like it if they see you doing this. I mean fuck like look how easy that was right. It’s like it’s just this is stupid. This is dumb. Dumb not to use this. Why me? Why I’m really getting at, you know what I’m saying? OK. Where are we at? We need, I really wish Bricks would handle this a little bit

1:25:01
better. Overflow hidden should help us out there. OK. There we go. I mean, I mean, how, like, doesn’t really, doesn’t really get any easier than that, does it? Like, because think about this, too. I just built that card,

1:25:15
I just built that card as fast or faster than somebody styling everything at the ID level in Elementor. You know how they’re like, oh, Elementor’s so easy though, it doesn’t get any easier than that, dog, and everything is bimmed, and everything is tokenized, and everything is automatically responsive, and, and, and, and, and, and, and, I beat you, right?

1:25:39
No, don’t give me this elementers faster, elementers eat, no. There’s nothing easier than that and there’s nothing faster than that. Period, end of story. Okay, so we don’t have to like talk anymore because now we can see it, all right? So that’s just, that’s again,

1:25:56
it’s hard to get like you start to feel like, ah, I’m kind of cheating here. It feels like I’m cheating. But you’re not, you’re just being intelligent. You’re working smarter, not harder, right? Okay. Let’s see, it would be great if AutoBIM tool recognizes all the separate blocks.

1:26:12
Well, we’re working on an AutoBIM 2.0. And so what I can say is, we are aware of the fact that there is a learning curve and that it’s not, let’s do this. Let’s go into the builder.

1:26:28
Okay.

1:26:29
By the way, you’re seeing this with automatic CSS 2.8, which is like, I mean, 2.8. I mean, what is 2.8? That’s 2.8, not even close. Not even in the realm of 3.0. So like what you just saw of being like, that’s how easy, it’s actually just gonna get even better and easier. I am well aware that it would be awesome.

1:26:57
Let’s get rid of that. Let’s go back to this thing we had a second ago. It would be absolutely fantastic. I’m on InstaWP. It’s a little slower than normal.

1:27:07
Okay.

1:27:08
I fully understand that I should be able to, it would be awesome if I could ignore every child element and just immediately go bang and it just knows what I want to do now magically how is that gonna happen again we’ve had lots of discussions about this if we could have made it magically happen we would have now I’m not saying there isn’t I’m just saying we haven’t found it yet now one way there is is to come in here and tick a box or something and be like, that’s a block, that’s a block, that’s a block, and it’ll just ignore those. So we’re telling it where the blocks are

1:27:43
inside of the other block. That’s one approach. But I’m fully aware, look, guys, if you could click one button and then come down here, just change the name, okay? And then come down here and apply. And it just, it all takes care of itself.

1:27:59
Believe me, believe me.

1:28:01
I would love that too. I would love that. I’m not holding myself back. Let’s all remember, I use the tools myself, right? I’m not purposefully holding us all back, okay? We just haven’t gotten there yet. We’re working on it. Auto BIM 2.0 is coming. And so it may be that easy when Auto BIM 2.0 is ready. We’re just, you know, it’s a process. It’s a process. There’s a lot to think about and a lot to consider and a lot of things to work around. There’s, there’s things that Bricks does that conflict with auto-bend.

1:28:30
Like we just talked about the renaming classes versus deleting classes and remapping them. And some of that stuff’s caused by Bricks, right? So we’re working in a different environment, not to mention. Keep this in mind, keep this in mind. I mean, I would love it if we were just building a product for Bricks. I mean, I’d kind of love it, but not love it at the same time. I love the fact that we are building something,

1:28:53
an automatic CSS, that is multi-platform, where you can use automatic CSS in Brics and then go into generate and more or less get the exact same experience, and then go into oxygen and more or less get the exact same experience, and then go into quickly… Oh, I’m sorry. Rest in peace. And get more or less the exact same experience. And that’s, I mean, great in and of itself. So, you know, there’s people with add-ons for bricks

1:29:22
and it’s like, you know, they have the luxury. They have the luxury of just building an add-on for like one builder. Whereas when we build AutoBIM, guess what we have to do? We have to build AutoBIM, like a lot of it, multiple times. You have to build it, we have to build it for bricks, and then oxygen, and then Gutenberg, and then on and on and on and on and on.

1:29:44
That’s a little bit more challenging, right? It’s a little bit, so it takes a little bit longer. So we can’t win the race in terms of speed, but we can win in terms of, you know, just ingenuity, and we can win in terms of the widespread nature of the platforms that we support, the flexibility that that gives users, we can win in education, we can win in a lot of different ways, okay?

1:30:10
We may not win on like pure raw, just getting the thing out there as fast as possible, but we’re gonna win in many other areas.

1:30:17
Okay.

1:30:18
Do you have any plans in bringing frames to generate? No, no, but without revealing too many details it’s so hard to talk about this stuff. There will be frames outside of bricks. I guess that’s all I can say right now. Can’t really tell you the full context. I’ve noticed lately that some sections don’t allow copying upon right-clicking. I was just wondering if you also experience this. I’m wondering why those sections don’t allow copying. It will not work if you’re not on SSL. That would be one thing I would maybe check. If you are on SSL, then I have no idea. Okay. Perhaps if the blocks are already defined with AutoBIM, then AutoBIM can recognize those blocks as

1:31:11
children so you can edit them directly from the parent. Yeah, but then there’s a lot of stuff that’s not built with autobim. Tyree says 164 viewers only 45 likes, like the live. That’s a good good call out Tyree, I appreciate you. For a one person team, could you give me a high level overview of what to expect when it comes to ACSS 3.0 workflow and optimization for a one person team. I don’t it’s not any different than a multi person team. You follow the best practices that we outline. And whether you’re a one person team, or a 30,000

1:31:51
person team, you’re going to get the same benefits. Because you’re getting the benefits of organization, maintainability, scalability, efficiency, making way less decisions with your life. Think about, you know, it’s hard, I gotta do like maybe a video on it somehow. First of all, keep this in mind, and this is gonna be a thing with the Automatic CSS 3.0 Dashboard too.

1:32:14
Look at all of this, just take a second. First of all, imagine having to rebuild all this from scratch, okay? But just take a look at this. It’s very easy to go, man, this is very overwhelming. Like, look at the amount of stuff. I mean, look, I mean, we’re not even I mean, go in here, you can go in. I mean, look at this. This is it’s very easy for your head to just start swimming. But here’s the thing you need to know. Here’s the one thing you need to know. And I’ll do this on video. I’ve done it many times

1:32:51
when you install automatic CSS, you don’t have to touch a Single thing that you see here Pretty much. I’m trying to think I’m trying to rack my brain trying to rack my brain Not really There’s not a single thing you have to touch You can literally just install it and then you can go and just I’m not even gonna look at that right now No, I’m gonna look at that right now. And then you go to add new page and you just start building in bricks Okay. All right, so my page publish publish publish edit with bricks because the nature of

1:33:26
Automatic CSS the nature of the framework the nature of the tokenization That as I’m building, right? What’s the first situation you’re going to encounter the content with. Like when you first of all notice I added a section and it has block padding and it has a gutter. I did not make that decision. Automatic CSS made that decision for me. Now if I decide when I start building you know what I like more breathing room in my sections or I like maybe a bigger gutter which you can’t even see the gutter right now because it’s in the proper place. You only see the gutter on mobile devices. See that gutter right there? So if you’re like, I want to change that gutter a little bit, I want to, I

1:34:08
want to, I want to do this. Well, you got two options. You can stop what you’re doing and you can go to automatic CSS, okay? Which, again, keep in mind, it’s gonna be a fundamentally different experience with 3.0. But you can go to spacing and you can go to section spacing right here. And the way that section spacing works is it takes the base spacing of your website and it just multiplies it because it knows that you need more of it.

1:34:35
You need more of it for a section context. And then here’s that gutter right here, which you can say on desktop, I want it to be this and on mobile, like I very often change that to 80 right there, and I will often change that to 16 because I sometimes want a very narrow gutter on mobile devices. So I’ll make that adjustment, okay?

1:34:52
And then if you want less, you know, normal block padding, you want less of it, and I can even change what it is on mobile too, and I can hit save changes. And now that is going to affect all of my sections by default, but here’s the kicker. Here’s the kicker. I only change it now if I decide I want to change it now.

1:35:12
I don’t have to, I could build the whole website and then change it. That’s the nature of automatic CSS, you can customize all of this stuff in the dashboard. You can do it as you go, you can do it in the beginning, or you could just build the entire site and then do it. Because if you’re following the best practices of using content gap, where you’re supposed to use

1:35:34
content gap, use grid gap, where you’re supposed to use grid gap, use your section padding classes and all that, use your color tokens, it could just all be done later or now or before you start. It’s completely up to you. And on top of that, most of this stuff doesn’t even have to be touched because all the defaults are just very sensible defaults. So you know if you want to change them you can change them. If you want to just now say, okay well here’s what we’re going to do on this site. You know, we’re going to use the primary color.

1:36:05
We’re going to use the secondary color. We’re going to use base and neutral. Okay. So let’s turn off this color right here and we will turn off secondary. Okay. So we’re going to use primary. Let’s just say primary, base and neutral.

1:36:19
Okay. So I can just turn those off. I don’t even need the contextual colors right now either. That’s like warning, success, danger. I don’t feel like I need those right now. Okay, let’s turn all those off and then When we go into like typography, okay, so base heading size Yeah It’s probably something you want to make a decision on you don’t even have to make a decision on it now you can make a

1:36:34
Decision on it later if you like to see it as you’re working then you can make a decision on it now But you don’t have to I can literally go to my site right now and just mess with the base heading size and the base text Size and I can mess with the individual heading sizes, and nothing’s gonna break. Nothing’s gonna break. Now, you wanna turn smart spacing on, but that’s gonna be on by default now. I would go in and turn on automatic contextual spacing,

1:37:04
so get your automatic container, automatic content, automatic grid spacing, because that’s just gonna make your workflow way more efficient. Nothing’s gonna break if you don’t turn that on, and if you go add all your gaps manually and then turn this on Still nothing’s going to break you can literally make the decisions at any time as you go As long as you’re following the workflow and not just you know going rogue. So

1:37:27
It’s not overwhelming because you’re not forced to deal with it You’re not forced to make any decisions before you start working You can just work what I prefer to do is I just start working and then as I run into a situation where I’m like I want to see that happen differently I just hop in the dashboard change that thing hit save go back and then I keep working and then if I run into another situation I just go make the change and slowly but surely everything just comes together exactly the way that I want it to. Now some people prefer to set up everything ahead of time before they

1:38:00
start working and that’s fine too. You get to choose. It’s all your choice. But you can literally come in and just completely remap a whole site. Change all the colors, change all the spacing, change all the, and not break anything, which is like phenomenal. So you know, a lot of flexibility, a lot of built in like training needed where and when to use what grid gap verse gap verse. That’s super, super, super easy. Okay, it’s in their names. If you need spacing between content, which is like text, images, things like that,

1:38:33
you use content gap. If you’re putting spacing in a grid, you use grid gap. If you’re putting spacing between containers in a section, that’s when you use container gap. And those are really the only situations. Sometimes you’ll see me in like a card where I want content gap, but maybe less of it I just put in content gap divide by two enter and it wraps it in a calc and I move on with my

1:38:55
life really really really easy but then should content gap ever change see that’s why and other frameworks don’t work like this guys other frameworks do not what they don’t have that level of flexibility we have this level of flexibility because of the way things are abstracted into like I know where these gaps are being used because I’ve defined context for them Well automatic CSS is defined the context for me I know that if I want to adjust my grids I can go change the value of my grid gap It’s right here grid gap uses another token space M But if I want to tighten up all my grids

1:39:32
I just tighten up all my grids by going from M to S if I want all my grids to get a little bit more breathing room, L. If I want to calc it, if I want to go something in between, I can do that right here. I can do that. Easy. Space M times 1.12546 whatever. Do whatever you want. There’s no limitation.

1:39:55
There’s no, oh, well, yeah, it gives you sensible defaults, but then you can’t do what you want. No, no, no, you can do anything you want. There is, I wouldn’t use a framework that limited me. You can literally do anything. Guys, you can put 30 pixels here if you want to be a psychopath, okay? You can absolutely do that.

1:40:13
It’s not stopping you, okay? You can do whatever you want. There is no limitation. What it gives you is tremendous structure and flexibility and maintainability and all of the thought process has already gone into it. All the frameworking that you don’t have to do. You don’t have to name things.

1:40:32
You don’t have to set everything up. You don’t have to tokenize. It’s already done. And then you just lazily go through and right click some things. And that token, that token there, that token there. But then if you need to go rogue, you can have, I write a lot of custom CSS. But guess what? I can use my tokens in the custom CSS.

1:40:48
I can then go in and start using recipes. I can go, you can go as advanced as you want or you can stay as beginner as you want. You can, you can live anywhere in that spectrum. Beginners can use automatic CSS with just a little bit of learning curve. All it is, is how is this framework working for me, right? Which we have plenty of videos on and I’ll just announce it now. How about this? I’ll just announce it now. I am, you know how I did page building 101, tremendous course, everybody loves it. Automatic CSS 101 is beginning officially with the launch of ACSS 3.0. I have a whole entire course mapped out on this is ACSS 101.

1:41:30
So yeah, there’s documentation. Yeah there’s a bunch of videos randomly, but this is the start to finish automatic CSS 101 course and anybody that goes through that course, which you won’t even need a license to go through because you can sandbox it, it’s a wrap. It’s a wrap. Okay. All right. Questions, questions. You said there’s a lot of changes in ACSS 3.0, for example, border, radius, variable etc will these changes break the sites built with 2x if we update to 3.0 no no because again this is a situation guys where I know a lot of developers like page builder developers framework developers they don’t build

1:42:11
sites anymore they just work on their product right and so they’re thinking about things like I never understood this with oxygen for example like you know they had that broken repeater forever like the repeater that duplicates IDs, which is just atrocious. And we were all just like, guys, just fix it. And they were like, we can’t fix it because it won’t be backwards compatible. We’ll just release this 2.0 version of the repeater

1:42:38
that we can use that isn’t broken. And then people can leave the old repeaters in place. And I don’t know what they eventually did to work around it. They eventually fixed it. But like, I’ve deprecated like many things. We have this, this is 2.x whatever. So there’s not a lot deprecated,

1:42:55
but there’s a deprecated panel in 3.0. Everything that gets deprecated, you just can keep on. If you have an existing site and it’s gonna be on for you by default. And if we change any input, like I’m trying to think like the, yeah, the radius, let me go to the radius section. So we have this base radius that stays.

1:43:14
The radius scale will now be behind a toggle. So because what we found, again, there’s evolution in thinking and there’s evolution in efficiency and maintainability. Because the idea that when I go in this page builder to this box and I’m like, I want a border radius, okay, I right click on here. Let’s look at our options. XS, S, M, and by the way, you can live preview them over here. Let me let me put a let me put a BG on here.

1:43:45
OK, so you can actually see it happening. Alright, so let’s go to border radius right here. OK, so you can see it happening. See it. See it happening over there. See it alright good. So there’s XSSM. Let’s just talk through this. This is I live my life frameworking and thinking about,

1:44:03
okay, it’s already great, it’s already fantastic, but it could probably be even faster and better and way easier. So we’re just constantly improving it, right? You don’t need all these options, it turns out. Like, you know, this was a good, the reason, I’ll just be honest with you. The reason that these options exist is because

1:44:22
in the very early stages of frameworking, I was like, well, I mean, every other fucking framework, every one of them has all these options. Now, some of them have more and I was like, no, you know, you definitely don’t need more. But like we need, we need some, okay, because, and I was just under the impression that we, that’s true, because everybody else did that. Well, it turns out everybody else did that because they didn’t have a dashboard like us, where you can literally just set the value that you want. So when you can set the value,

1:44:54
because I mean, think about most websites, do they just have radiuses going everywhere? Like, oh, well, some cards, it’s like huge. And then other cards have none. And then, no, no, no, no, that’s actually really bad UI, right? That’s what that is. So it turns out there’s really like one radius value

1:45:12
that you use in 98% of cases. And then you might do a concentric radius thing, which we’ll talk about in just a second. But for the most part, 98% of cases, a radius is just the radius that you’ve defined for that website. So now what you can do in Automatic CSS is you just go in and define what your global radius is.

1:45:30
It’s now a global radius, radius. Now if you want other options, there’s a toggle. And you can turn on the other options if you want them. But it’s gonna be off by default. So you’re just dealing now, right? And think about this from a beginner perspective. If we’re trying to teach beginners, we’re like, well, you have XS, you have S,

1:45:47
you have M, you have L, and they’re like, well, what do I use? Well, your base radius is mapped to M, so maybe you wanna use that, I don’t know. Like, we don’t even need a discussion, right? Because now what you do is, and you’re just gonna choose this from the right click menu or you can just literally go radius.

1:46:05
I just want my radius, that’s it, right? And that’s not doing anything here because this isn’t 3.0. But that’s as easy as it gets. Now there’s even fewer decisions and fewer options. But still, did that do anything to your flexibility? No, because if you decide you’re the random person who needs all those other options,

1:46:24
then you can just go flip them on and then you have them and then they show up in your context menus too and You’re back to like the old way of doing it. But the new way of doing it is I just want my radius That’s all I want, right? so Efficiency like that is is is really really really good, but it’s fully backwards compatible to answer your question Nothing because again, I’m a user. That’s what I was getting at it a minute ago Do you know how many sites I built with automatic CSS? Do you think I want them all to break

1:46:51
when I upgrade to 3.0? I’m in the same boat as you, my friend. I’m in the same boat as you. Me and you are paddling together. I do not want all my sites to break. So I have to engineer it to make sure that doesn’t happen, right? And so we’re taking great caution

1:47:07
to make sure you can upgrade any site, go up to 3.0 and you’re good to go.

1:47:13
I’ve been using my own framework

1:47:14
just because I wanna be able to change anything I want to. I had no idea ACSS was so customizable. I think this just sold me on it. Yeah, that’s a, it’s because, here’s why people have that notion in their head. Because every other framework is limiting, is limiting, okay? Unless you’re gonna start to like add on to it, or like, or like, dig into it and manually try to over and there is not there isn’t one like automatic CSS, right there.

1:47:47
It’s just and like I said, I am the primary user. And so I don’t want to be limited in any capacity. What you’re able to do, like with customization, and then just granular beyond that, it’s unmatched. And the facts, because if you, like in web design, you all know this, you’re all web designers, right? You’re gonna start a new project. And so let’s, you open a site with no framework. Do you know how many decisions you have to make

1:48:19
and set up before you can start doing anything? Before you can build a single thing? Because if you just go start building with no tokens You get no tokens no no no utilities no no global styles No, you’re just gonna go start building. That’s that’s psychopath territory, right? That’s how what are you doing? Whoa, back up back up my friend. You’re you are cart way before the horse. Okay There’s so much you have to set up, right? And we saw this in page building 101,

1:48:53
sitting there just, oh, token for this, token for this, token for this, token for this, token for this. Nobody wants to do that. Nobody wants to live that life, right? It is probably hours of work just to set up to get going when you’re not using a framework. But then you install a framework

1:49:10
that doesn’t necessarily give you a lot of flexibility. Well, you can start building right away, for sure. But if you need to make all the changes and adjustments, there’s no pathway for that. So now we’re in a situation where it’s just too limited. That was the old like oxy ninja situation, right? Which is why I built automatic CSS in the first place. Then there’s the frameworks where it’s like,

1:49:31
well, yeah, I mean, you could customize it, but you got to dig through JSON files. And I mean, you got to learn the whole language of the back into the framework in order to start Making adjustments like and then that’s a whole whole nother can of worms, right? Automatic CSS is the only one where you can install it and then literally go right into bricks and just start building things and not really worry about not being able to adjust stuff later and breaking stuff the only curve there is is I need to know how to use the framework like the way it’s designed.

1:50:05
That’s a curve you can’t get past with anything, right? But the kicker is when you learn that, you’re actually literally learning just the best practice of maintainable web design. So it’s like how do I use tokens? Why are the tokens called this? There’s a reason for all of that. Not because it’s our system. This isn’t Gutenberg situation where we’re like, Oh, well, you know, we called it a group. Why is it called a group? Well, just because we wanted to, was it do anything special that a div doesn’t do? No, it actually does far less than a normal div would do. Oh, why is it called a group? Then what’s special about it? Well, there isn’t anything. It’s just, it’s just

1:50:44
our name. We just gave it that name because we wanted to. That’s not happening in automatic CSS. In automatic CSS it’s called content gap because that’s what makes sense. It’s a gap between your content. That’s why it’s called content gap. Well why does content gap exist? Well it turns out if you use space M between all of your content, well guess what? You’re going to use space M in many other different contexts as well. You might use space M in your header, you might use space M in your footer, you might use space M in some other situation that we don’t even know about. Now how are you going to tighten up all your content? Just tell me how you’re going to tighten up or loosen up all the spacing between your content

1:51:20
if you don’t know what tokens were used there. So we use ContentGap, which identifies where this space actually lives. And so now if I say I want to tighten up or loosen up all my content, whether I’m starting the project or I’m done with the project, right? I could be done with the project and go, I wanna tighten up all the spacing in my content. It doesn’t matter if there are 5,000 pages on that website, you go right here to content gap, you go M, I think S, save changes,

1:51:55
entire site, your content just tightened up a little bit. Just your content, not your sections, not your containers, not your grids, just your content. Oh, you wanna tighten up the grids? Okay, I can do that too. We’ll just go to grids, because I know the context of where these things live. I can safely change them.

1:52:15
See, what’s good about a token is that it’s a global thing. Like I have global control over it. But the problem with generic tokens is that you don’t know where they live. So you made a token so that you could have global control, right, you got to follow the thinking of the frameworking, right? You made a token called space M so that you could have global control over this. But then you went and willy nilly did all over the place,

1:52:40
and you don’t know where it was used. So can you safely change the value of that now? Not really, because you’re going to make unintended changes. Now, if you take that space M, which is still valuable, and you apply it to a context, like a situation that’s identified like content gap, or grid gap, or container gap, now you can safely change that, right?

1:53:05
We have all these colors, primary. I mean, I could use primary on buttons, I could use primary on backgrounds, I could use primary on text, I could use, well, the idea that we’re just going to take this primary color and just go willy nilly it everywhere and then go, well, let’s change the primary color.

1:53:23
Well, I mean, the decisions I made for the first design may not necessarily apply to the next design. And so we’ve probably broken some things. That’s where our contextual backgrounds come in. No, I don’t want to name the background. I just want to identify it. I can have an ultra dark background in this situation or dark background. I don’t particularly care what the color is, because if it gets re-themed, I can now control that from one specific area. Okay, again, adds tremendous flexibility. Now, all this will be covered, obviously, in the ACSS 101, but

1:53:54
when I say that there is not, there is not a framework that works like this. And it gives you this amount of flexibility and has done this much thinking. It does not exist. Not to mention that it’s fully, fully, fully customizable, fully customizable. No, zero limitations. I’ve asked, I will put a bounty, find one limitation, find one limitation inherent in this framework and I’ll do something nice for you. I’ll put you, you come on my stream and show me, right? I’ll let you show everybody the limitation. There isn’t one, because there’s also the ability to just do whatever you want,

1:54:34
just like you’re in a normal situation. But people will be like, well, you know, I want a super specific radius, right? Okay, well, the question is, do you want that to still be hooked into automatic CSS, or do you just want to raw dog it, right? Because you could go border radius, you know, 10 pixels. I mean, nobody is saying that you absolutely have to use a variable here

1:54:56
Now I wouldn’t do that. Right? I would say we would use our radius Okay, and then maybe maybe you do like divide by 2 and now you’re hooked into the system But I mean this is valid I mean as granular as you want to get while still staying hooked into the system, that’s still valid. So there is no inherent limitation. Now people will be like, well, I want a million colors. That’s what I want. You have six colors, I want a million of them. Guess what? Here, let me show you this. Coming, right? You can already right now do, you can already do this. I mean, you can already go here and go my new color and then you could do HSL and you could do well you wouldn’t want to name it this let’s let’s say what’s a good name what’s a

1:55:45
good name quatrary isn’t that an isn’t that a name that’s an official name I think right so you can do quatrary quatrary you could just define your own right so we need the H value we need the S value we need the L value which there’s going to be I’ll show you in just a second. Just chill. Just chill out for a second. So you would do something like quatrary h, and then that would have a value, something like that.

1:56:10
And you would do quatrary s, and that would have a value like something like that. And then you would do quatrary l, and that might be like, let’s do something sensible. And so now you’ve made a new color. And then you could make shades of that and yada, yada, yada. Or now, or now, what you can just do is you can go to something like new color

1:56:33
and you could say quatrary, bang. And then it just expands. That’s a recipe, a recipe for creating a new color. And it just, everything’s done for you. So that, that, that, that might be, that might be coming. When I say there’s no limitation, I promise you, I promise you, there are no limitations. Okay. I think we’ll do one more question.

1:57:02
We still got pretty good viewership here. I don’t even know what time it is. It’s one o’clock. We definitely have to get out of here. So I will do two more questions. That’s it.

1:57:13
We’ll try to make them quick.

1:57:16
Let me go search for, I’m still on the normal chat. Did you ever connect with Brian Gardner and did anything come out of that interaction? I have not connected with him outside of the interview that we did together, but I do plan to. I just haven’t been ready to because of 3.0. But there are some specific things that I want to talk to him about. After 3.0 is in the wild. I just I right now I need like as few distractions as possible.

1:57:48
Okay.

1:57:49
Let’s do last call. Have you noticed lately some sessions some of these already answered? Okay, answer that one, answer that one. There’s some questions about quickly in here. And it’s, I think that ship sailed like nothing really else needs to be said about that. Okay. Think all those were answered. What’s the best way to learn SAS? I just use normal CSS. I will teach you aspects of SAS in Automatic CSS 101. Damn,

1:58:34
did I just I just gave a little bit away. Okay. I will be teaching more SAS in the inner circle. It’s when you’re using a framework, the need for SAS is a little bit more limited, especially now that vanilla CSS has nesting. Well, nesting is coming, but it’s still really good to know. And there’s still some really good stuff you can do, but automatic CSS has SAS mixins and functions

1:59:01
that you can hook into. And so that’s tremendous as well. And so I’ll be teaching around the use of those primarily, because they will, like, for example, the biggest problem, the biggest hole, the biggest gap in maintainability and web design, even when you’re using automatic CSS, even when you’re using a really, really, really good framework of any kind, is media queries. This right here is the biggest gap in maintainability.

1:59:27
I’ll tell you why. Okay? You put all your styles in here, right? My card, whatever, or even if you’re using dynamic root selectors, that’s a bug in Bricks, you see that? Try to use the dynamic root selector and it writes the word right. Fantastic, okay. So you would normally do your dynamic root selector,

1:59:47
then put your styles in here, yada, yada, yada. You are using a raw value and if your media queries ever change, if you’ve written, how many of these media queries maybe have you written in your custom CSS, all of those will break. The minute the value of your media queries changes, they will break. And so you’re probably like, well Kevin, why don’t you just do something like this? I mean this is, this makes total sense, right? So they’ll do something like breakpoint L.

2:00:20
And it’s like, you’re right, you’re right. No, none of us have ever thought of that before, right? It turns out that doesn’t work. This does not work in vanilla CSS. This media query situation does not accept variables, which just sucks. It just really, really, really sucks. Now, sass, right, at, I can do like this. Breakpoint L, okay, now you would have to program

2:00:46
in your breakpoints, but in automatic CSS, it’s already done for you, right? And you would just do, you know, my card or root or whatever here, and now you have a dynamic media query. You can also do in automatic CSS breakpoint up L that turns it into a min width media query which goes at that breakpoint and up. So that’s an option in automatic CSS as well.

2:01:10
We haven’t even begun to talk about the advanced developer side of automatic CSS stuff you can do, which is going to be even more accessible in 3.0. It’s just, it’s tremendous. So that’s the biggest hole though and the biggest gap in maintainability because even me, I mean I’m writing and we see this with frames a bit too, right? We have to write media queries and if you’ve changed your breakpoints to something other than what we’ve put in here, nothing can track that. Nothing tracks to that.

2:01:41
So you have to go in and update those things manually. And it is a pain in the ass. This is a fundamental flaw in vanilla CSS, that you can’t tokenize media queries. Absolutely horrific. But you can with SAS. And yeah, so that’s that. The card has an image. This is the last one. The card has an image, a heading and longish text that

2:02:07
I did hide behind a toggle. It’s like a long service description, too long for a card. I want this, I want to be able to toggle this. Ah, well, my friend, you need to go in and you need to watch the, so go into the inner circle and go down here to JavaScript, learn JS with Kevin, and watch this one right here because that will teach you exactly how to do what you just asked me to do. Happens to be the very first episode. How do we create a toggly type situation?

2:02:40
That’s right there. That is how you do it. Okay. We go back to camera. I went a little longer today because we weren’t here last week. I was too busy with 3.0 to get one in last week I don’t know yet about next week I’m on spring break with the fam likely that there might there may be one you’re just gonna have to wait I just depend on what’s going on that day depends on if the fam is awake yet you know like those kind of situations it’s a it’s a call it at that time but we’ll definitely be back the week after we are getting very very very very close alpha 3 ACSS 3.0 alpha 3

2:03:20
drops this week and there’s probably two more small quick alphas after that and then we’re right into public beta and then every every public beta everybody gets it everybody gets it so we’re right around the corner I can’t put a fixed date on it yet but it is when I say it’s right around the corner It is right around the corner. Everything is looking really good. Everything is shaping up nicely Okay, we’re almost there. So thank you guys for tuning in. Thank you for your support. Thank you for the likes on the stream Okay, we’re almost there. So thank you guys for tuning in. Thank you for your support. Thank you for the likes on the stream Thank you for your comments and your questions. I will see you guys again very very very soon