WDD LIVE 054: The Evolution of ACSS (Good, Bad, Smart, Dumb) & RIP to 1.0-2.8

0:00:00
Hello, hello my friends. What is up?

0:00:05
Good morning.

0:00:06
Coming to you in 4K today. We are doing a little bit of a test here. Let me know if audio is good. I think we’re on the right channel. Yeah, so we’re going to go, we’re going to experiment with 4K and we’re going to see, this is a different, I’m back in Atlanta now, different, this is the primary setup we’re gonna see if there’s any overheating issues I don’t expect there to be but we don’t know and this would be good because we definitely need to make sure that

0:00:37
everything is working smoothly before tomorrow’s livestream so let’s see let’s let’s say hi to Steve and Andrea and Rob C’s this year Sylvia Chris good to see you. Marcus here. Daniel, Design Zone. Hello from Cape Town, South Africa. Webnest5 says audio is good, audio is great. Okay, excellent, excellent, excellent. Good to see everybody here.

0:01:05
We already have strong, oh, very strong numbers. They’re jumping quickly, they’re jumping quickly. Let’s see, are we supposed to chant like before, chant like before the band will come on and again, okay, all right, yeah, well that does help, that does, chanting does help. All right, so here’s what we’re gonna do today. We are going to talk a little bit about

0:01:26
the evolution of automatic CSS. You know, why does this product even exist? How did it come about? What is the journey look like? We’re gonna talk about a lot of firsts that Automatic CSS has brought to the table, which you see as a staple now, more or less, across frameworks.

0:01:52
We’re gonna talk about what I think are some, just some, you know, kind of dumb decisions I made along the way, because, you know, you can’t, nobody’s perfect obviously, you can’t just develop a perfect product. There’s no perfect products. So obviously you know, you try some things, things don’t work out or you make a decision and it ends up not being a great decision.

0:02:15
We’ll talk about some of that stuff. We’re going to talk about some of the good decisions that were made that we, you know, in initially, because there’s some questions that you can’t necessarily have answers to unless you just do it. And then it’s like, well, we’ll find out the answer. And then, you know, so there’s some things that it was like, ah, this could go either way. And some things that actually turned out

0:02:39
to be really, really, really good decisions. We’ll talk a little bit about ongoing innovation and three big lingering challenges that are really the main driver of 3.0, like solving these three big challenges where it was a main priority of 3.0. And then we’ll talk about what to expect on tomorrow’s livestream. So this is a two-day event.

0:03:07
We’ve got today’s livestream, and then this is setting the stage for tomorrow’s live stream which will be a full reveal of ACSS 3.0. Okay so let’s go ahead and first of all if you’re an ACSS user let’s see how many yeah we’ve got we’ve got a lot of people here okay good if you are an ACSS user just drop in the chat anything you would like anything that comes top of mind related to you know how much you use ACSS how valuable it is to your workflow have you been around since the beginning or are you a new you whatever you want to say about about where we’re

0:03:52
at right now go ahead and just drop that in the chat before we get started and drop a like on the stream as well that really helps us out if you do have questions I will be doing some Q&A type stuff after we get through all of this. They need to have hashtag Q or hashtag question in order to be findable. You can ask them on, you know, at any point in time during the stream. As long as you use the hashtags, I can go back and I can find them very easily. All right, and so yeah, we’ll just let these things flow into the chat as we go through this. Really appreciate everybody’s support obviously.

0:04:32
You know, instrumental to our success has been our community, has been the way that people refer others to ACSS, talk about ACSS, recommend ACSS. You’re going to see this in, you know, page builder group after page builder group after page builder group, these recommendations and chiming in and helping us explain why ACSS is so valuable. This is one of the biggest challenges of automatic CSS is marketing it, is talking about it,

0:05:05
is writing copy for it, why? Because it does so much. There’s so many things that we could dive into and talk about. So, you know, it’s good when others chime in and help us out with that kind of stuff. All right, let’s talk about why and how a product like ACSS happens.

0:05:26
So, you know, not too long ago, actually, I came to the conclusion that like, working in a page builder, working in a page builder obviously gives us a lot of really awesome advantages over like hand coding a custom theme. And I know a lot of people like to shit on page builders, but really a good page builder,

0:05:50
like a really capable page builder, first obviously I was using Oxygen and now Bricks, these page builders give you tremendous advantages over traditional development environments. Tremendous advantages. But what I quickly realized, back with using oxygen specifically, is that we’ve got to bring order to the chaos.

0:06:12
Because when you could just create classes, when you could just assign values to things, you can easily, easily, easily create chaos. Absolute chaos. If there’s no organization methodology for how you’re naming these classes, there’s no tokenization of the values. None of the stuff that we’ve talked about

0:06:33
in page building 101, none of these fundamentals, if none of that is present, you create an absolute disaster. It’s an absolute nightmare. And so I quickly realized, we’ve got to bring order to this chaos. We need a framework. That’s what a framework is.

0:06:48
We need a framework. And I actually wrote an article on the blog at gary.co if you go there that basically says now I’ve come to this conclusion and I think others that you’re going to hear from soon, other content creators, big name content creators right, are going to be reiterating this. That professional or even semi-professional work needs, you have to use a framework. It’s just, you’re either gonna make your own framework, which I wouldn’t recommend, and you’ll just read the article

0:07:20
and you’ll see exactly why that’s the case. Or you use a framework like Automatic CSS. There’s no non-framework. There’s no, I’m just not gonna, because that’s chaos, it’s always chaos, right? You’re having to bring some sort of order to the work that you’re doing. And anytime you work to bring order, that’s frameworking.

0:07:41
You’re either working on a website, like actually adding elements and building it and designing it and all of that, or you’re frameworking, which means you’re working on some sort of organization process or standardization or tokenization or whatever. And so the idea here is that you should not, if you care about time is money and efficiency and all of that you should not be a

0:08:03
professional framework or you should be a professional worker you should be doing the thing that you’re getting paid to do right and just let a framework like ACSS do the frame working for you and when you do that it’s it’s actually you know tremendously efficient and valuable and you don’t have to really worry about much of anything ok so I quickly realized you know we’ve got a framework here. Well at the time there was really only I mean for page builder There was no frameworks for page builders, but for oxygen there was oxy ninja, right? And so I started using oxy ninja and it was it was way better than not having anything

0:08:40
okay, it was way better than not having anything but I quickly and obviously I recommended it to tons of people and You know, it was a good it was a good first start, right? Quickly realized, man, this is tremendously limiting. You can’t edit any of the framework. You can’t edit any of the values. What they give you is what you get. That’s it, that’s it. There’s no flexibility.

0:09:05
There’s no customization. There’s no nothing. You get what you get, okay? You get what you get, don’t pinch a fit. That’s what I say to my kids all the time, right? Okay, well, that wasn’t going to work. That just was not going to work. So I started thinking about, well, I mean, what, how could we approach this differently? I mean, I, in my mind, I knew that we needed to be able to edit the framework, it needed to be flexible, it needed to be customizable, but how was that going to happen? And so I

0:09:32
thought to myself, well, I mean, it’s got to have some sort of UI attached to it. So this was never a concept. There’s no, there was never a framework with a UI for customizing the framework. This was not a thing. And I didn’t even know how to build the the UI, right? So I was just like, well, I don’t know how that UI thing is going to come into play or like happen, how it’s going to manifest itself. But what I can start doing is working on the framework because there’s a bunch of other things that I can execute on that I know are missing right now. For example, like fluid responsive typography. I came out, you can go on my channel, there’s a how do you set up oxygen video, right?

0:10:11
It was one of the first videos I did on the channel. Got like 40,000 views in, I don’t know, it’s like a year or something like that. It was, it just went like wildfire. And why? It’s because in that video, I showed how to set up oxygen with techniques that nobody was talking about at the time. In page builder land, at least, fluid responsive spacing, fluid responsive typography,

0:10:35
on and on and on and on. Those are the things that actually needed to be in a framework, but no framework existed like that. And so those are the things that I knew I could bring to the table. Better color management system, because the color management system in oxygen even was awful.

0:10:51
Color management in, did OxyNinja even have a color management, I don’t think it did. I don’t think it did. So these gaping holes, these gaping holes, I was like, we can absolutely fill these. We can absolutely just build a better framework. And then, if somehow, some way, if we can get a UI on top of that,

0:11:10
I mean, this would be fantastic, wouldn’t it? So we just started, we just started with that in mind. I started building the actual framework and I built it inside of, if everybody remembers back then, I built it inside of the inner circle in public, not in public, that’s not a public place, in private but not in private private, right? In the inner circle I was building it and basically what we were doing is we would write, I’d write a segment of the framework and then I’d just give it to people

0:11:44
in like a literal style sheet. And they would just take, they would copy it and they would paste it into the Oxygen custom CSS area. And that was the first version of automatic CSS. It was literally like, here’s the CSS, copy and paste it over. No version control, no checks and balances, no nothing, absolute wild, wild west framework development, right? No plug-in, no nothing.

0:12:08
It was just here’s raw vanilla CSS, copy and paste it into your install and start using it, okay? And we had things like owl spacing and section spacing and yada, yada, yada, okay? It was going good for what it was at the time. Then it started to get a little bit more serious and a little bit more put together. And then there was also a bunch of decisions that had to be made. And it’s like, do we go this way?

0:12:32
Do we go that way? And the inner circle was actually very instrumental. All of the people participating in those early stages of automatic CSS were instrumental in helping us make sure we were going in the right direction with the decisions that we were making. And then I started reaching out in the inner circle and I was like, alright, we’re getting to the point now

0:12:56
where this has to become a plugin, obviously, and the UI thing that we’ve wanted to do all along, and at the time I literally had zero faith, right, because I was like, I mean, I’ve had ideas like this in the past for a WordPress plugin and on and on, I just, man, I could never find anybody to execute on I can never to help me that sort of thing I’m not a PHP developer I’m not I’m not in that world back there okay so I have to rely on other people I’d never found them before

0:13:24
and so some other plug-in ideas that I’ve had in the past just kind of fizzled out okay I guess I’ll let that go because I just don’t have anybody to help me execute on it so but I just reached out to the inner circle once again and I was like hey I need I need somebody that can build a UI for this and I think I got like Two or three people two or three people was not many right they reached out And Matteo was one of them and so we got into I got in discussions with Matteo And I say I mean let’s let’s give it a shot let’s let’s just let’s see what we can get as like you know, Mateo executed on it and he’s been, Mateo is still the

0:14:05
lead on automatic CSS. Like it’s, it just, it just works out. And, and that’s, so, you know, give Mateo a hand and, and all the love and support because absolutely pivotal in, in automatic CSS even existing to the point that it is now. So, So that was fantastic and that brought the UI dashboard concept to life. I designed the first UI dashboard. It was ugly as sin. It had terrible just use of space and efficiency. But nobody had done it before.

0:14:41
So there was nothing to go off of, including at that point, it was literally like, I’m just happy this thing exists. It’s not obviously it can’t be perfect, but it does exist, right? It does exist. So that’s a start. And we got to you got to get to something in order to build on it and get to the next thing, right? There’s it’s you never just come out of the gate with like, you know, that’s that’s a wrap. We don’t have to improve on that anymore. So this is just the natural process that these things go through, right? So the first

0:15:13
dashboard, I mean, maybe somebody has screenshots of it, I don’t know, but just atrocious, absolutely atrocious. And then I think for 2.0, that was like the 1.0 series, the 1.0 generation of automatic CSS, which by the way, I mean, from a workflow standpoint, it did exactly what it was designed to do. a relatively complex framework was made very very very easy. Now let’s let’s well do we do we want to yeah this will kind of bring us into some of the dumb decisions aspect. That version that series that generate whatever you want to call it that generation of ACSS was written in vanilla CSS. You have to be an absolute psychopath to think that you’re going to build a framework with vanilla CSS. I think that that is just probably, I just, it was naive. It was just like how naive are you? All of it.

0:16:20
All this all naive. 100% naive. Okay. It is an absolute disaster to try and maintain a framework written in vanilla CSS. So anybody out there who’s like, oh, I can make my own framework, like, okay, all right. Well, first of all, where are you gonna do that? Just in the style sheet? Okay, wrong. It’s just, it’s impossible, right?

0:16:44
So problem is, all I knew at the time was vanilla CSS is all I knew. There’s actually people who are probably key users of automatic CSS, who I had, I was DMing people in the inner circle. And I’m talking back and forth with people who I knew knew SAS, right? And I was like, just enlighten me, like is the SAS thing, is this the way to go?

0:17:11
Should I look into something else? Because there’s more than one, like SaaS isn’t the only language, right? To do this. And I was DMing people who I knew knew SaaS and less and some other stuff, and basically they were like, I think that’s the direction you need to go.

0:17:29
It wasn’t even a firm like, yeah, you 100% need to do it. But, and again, like, I mean, how many frameworks really are out there that are doing the things that ACS is trying to do. That’s the other thing. There’s nobody else. You can’t just look over here and be like, oh, how did they solve this problem? Nobody’s solving it. So there’s nobody else to look at. That complicates things even further. So I started

0:17:51
doing SAS, right? I was just like, okay, well, let’s fire up the old YouTube. By the way, there’s not many people teaching SAS either. Not really, like not in the way that you would use it for a framework. That’s the other problem, right? There’s SAS and like how people use it in projects, but then there’s the SAS of building a framework with SAS, which nobody’s teaching how to build a framework with SAS on the internet, okay?

0:18:19
So there’s just a lack of education there in general. It’s a lot of figure it the fuck out as you go along, right? But I had to learn the concepts of SaaS. And so I literally committed. And this was before automatic CSS was like, super successful, right? It was just like, oh, we had a good start. Things are going well. Still wasn’t making a ton of money. What are we doing over here with the why do I have to e cam preview windows? Are we still

0:18:47
good? He can just duplicate it itself. Let’s close this one. I don’t think we need that one. Okay, I Think I guess we’re still good The voice and video may be slightly out of sync and that may be due to 4k. I don’t know We’re we’re again. We’re testing the 4k stream And we’ll see I’ll go back to 1080p on a different stream and see if the that little mismatch is gone But anyway, let’s let’s let’s keep going. Okay, so I start teaching myself SAS. And again, this is before, you know,

0:19:21
it wasn’t making a ton of money at this point, right? But I decided, I was like, you know what, I’m going to rewrite the entire framework in SAS. And when I said that, I didn’t even know SAS really, right? But I committed to it. Let me turn on the focus because I’ve got people messaging me Okay. Yeah, do not disturb until this evening. Okay good All right. So I basically locked myself in my office for of straight month and

0:19:52
basically took everything that was there all the concepts that were there in vanilla and Converted it over to SAS and then we released the next version built on SAS. So that was fixing that first kind of dumb decision of like man vanilla CSS never never going to work for this so we’ve got to move on to the next iteration and at this I don’t know if it was at the same time or not long after we also decided this dashboard needs to be it needs some love like 100% needs some love. And so I redesigned it again and it did get much better for 2.0,

0:20:33
which is kind of the series that you’re still seeing today. But, and I’ll pull this up as we go through it. Let me go ahead and let me screen share here. And let me go back into the admin and we’ll kind of bounce back and forth a little bit. Kind of this version right here, right? Which is great, but if you go to the, I mean, it’s not great. It’s clean.

0:21:00
It’s kind of clean. It’s not fantastic. But here’s the thing, is the iterations in the features and the inputs that are required, and there’s things that we’re doing now that we didn’t even envision doing when the dashboard was designed initially, right? And so what ends up having to happen, because you build a framework for the actual dashboard, and so there’s certain things like components, like accordions and inputs, and is it a single row input? Is it a color input? Is it a double input? Is it a this input?

0:21:38
There’s only so many things in existence that were built. And then it’s built in such a way where it’s like, you end up having to like stuff new features into a framework that doesn’t really support them all that well. Or you just have to rewrite the whole dashboard. Either you get to that point, right? So like palette, for example.

0:21:56
I mean, look at this is like the fucking death of switches. It’s like there’s switches everywhere. You can’t like, what’s the difference between this switch, this switch, this switch? It’s like this one’s for the primary color, for the alternate, and then if you do this, you get another one, and then it’s just, where does this thing end,

0:22:11
and where does the next thing begin? If you’re frustrated with that kind of stuff, believe me, I am too. I’m not oblivious to this, right? But the alt stuff, that wasn’t even a concept when this dashboard was done the Having control over the transparency. It’s not even a concept The shades was a concept it was literally just the the hex and then the shades right actually

0:22:34
I think the hex came along later. It was initially HSL so you put in HSL values, right? But bottom line is like this dad. It just didn’t it got to a point where we’re just we’re stuffing You know round things into square holes right. It’s just not good and so we We have to rebuild it, but then it’s like you don’t just rebuild it just so we can rebuild it you know Are there other problems are there other problems? We’ll get to the other problems in just a second because this will start to unveil You know the direction the 3.0 went let’s talk. Let’s talk about firsts, okay, because there are a lot of firsts that automatic CSS brought to the table. We talked about the UI dashboard being one of them, fluid responsive typography and spacing, the concept of math scales.

0:23:26
When you are setting up a project, you have to make decisions on those things because you make one decision which is like here’s my base heading size or my base text size and then the mathematical scale makes all the other decisions for you. Here’s my my base is like let’s say M for text right that’s medium and then you just go up from there like L, XL, XXL and then down S XS those are all controlled by the scale and so you end up with automatic rhythm in your typography Automatic rhythm in your spacing now if you need to change those scales You can change the scales if you want to abandon the scale and go manual you can abandon the scale and go manual

0:24:19
There’s no limitation, but out of the box. You don’t have to make any decisions in fact out of the box, the base size is very reasonable and you may not need to change it at all. These are the things that allow you to start a project with Automatic CSS without making any of the initial decisions that you would normally make. Why? Because I can change the base size at any time and it’s going to change all the others. I can change the scale at any time. I can override a size at any time. And it’s doing this globally across the website. I don’t have to make every decision immediately. I can actually just start working. I can actually just start building.

0:24:56
The same is true for the colors, right? And this gets into like changing colors as you go. I’m very much, a lot of people ask about automatic CSS workflow. I’m very much a set up the framework as I build the first page kind of person, okay? So I start building and as I run into an area where I want to adjust the framework, I adjust the framework and then I keep building and then I adjust

0:25:19
the framework and I keep building and I just everything starts to dial itself in as I’m working through building the first few pages or whatever it may be. That’s a key point. We’re going to talk about that more in just a second. But math scales. Nobody was doing math scales before automatic CSS. Section block padding presets, section block padding. And this is actually kind of one of the dumb decisions as well. It was a very smart decision and a very dumb thing

0:25:49
at the exact same time, which is very, very entertaining to me. Nobody has like any framework you look at, what do they have? They have padding classes. That’s what they have. That’s all, that’s just what you have. You have padding classes. I don’t know of any framework before ACSS that had the

0:26:08
concept of section padding along with padding. But we all know that like sections are the primary things you’re adding to a page first and those have a very different padding context than any other box, right? They have large block padding, larger than most other containers. And then they have a gutter that’s different from every, like the gutter establishes the gutter of your entire website. And so it’s very important when you’re making a section

0:26:37
bigger or smaller based on the padding, you’re only changing the block padding, not touching the gutter, because the gutter has to stay consistent. And then your block padding has to be bigger values than your other normal padding values in order to have a typical section, right? So we created utilities that did exactly that. We have section spacing utilities and we have pad section classes which apply the block properly while maintaining the gutter properly. And this is

0:27:05
really, really, really powerful. Now, what was the dumb side of that is what I called them, right? And this is where you’re like, you know, it’s, especially me. So I have a tendency to over engineer and then I have to purposefully back it off. Like try to simplify from that because my brain always tries to over-engineer it. And then I have to force myself to go backwards from that point to try to like add in, okay, now how can we take that and make it simpler? How can we make it easier and simpler? Cause like, yeah, that gets the job done,

0:27:40
but maybe it’s a little too complicated. Maybe it’s, you know, whatever. The name of those classes kills me to this day. I absolutely hate them. The padding classes and the section padding classes, I absolutely hate. I just, every time I look at them, I’m like, ugh, ugh, what a terrible, terrible decision for names.

0:28:00
Pad, section, M. And then one principle that I actually was a theory in the beginning, which is why most of ACSS is this way, but then you have padding, which diverts from this, is the concept of just name the utility what the fucking property name is, okay? The biggest pet peeve I have about every other framework on the face of earth is that they try

0:28:27
to abbreviate everything. And they’re like, well, you know, you don’t have to type as much. Well, guess what? I can’t type it all, fuck face, if I can’t remember what the utilities are, right? And so that’s like PY, PX, P this, P that, no. No, no, no, I’m adding, I’m sorry, I’m adding padding, okay?

0:28:45
So I just wanna type the word padding, and then the size, and then you just do the padding thing. I don’t wanna have to remember all the abbreviations. So if you look at things like margin classes, it’s gonna say margin, because that’s what you’re adding. There’s no cute little,

0:29:02
and by the way, because we’re working in a page builder, because we have things like context menus, because like these things that have been added that are extremely helpful, you don’t even have to type them. Guess what, you don’t even have to type them. So the typing part doesn’t even matter anymore. All that matters is, can I remember the utility?

0:29:22
And guess what? You can remember the utility when the name of the utility matches the property that the utility is affecting, right? So if it’s padding, it should actually be named padding, not pad, pad’s bad, okay? Padding, padding L, padding M, padding whatever. And then for sections, pad, section L, no, no, come on, this is, that’s terrible.

0:29:47
Absolutely terrible. I didn’t think, I didn’t have the foresight to be like, we could just name it section M, like I wanna, or section L, I want a large section. We know what that means behind the scenes. It’s like, it’s gonna affect my block padding, it’s gonna keep my gutter, because there’s more than one thing happening there.

0:30:05
If you boiled it down to the simplest form of the utility, it would be like I want a large section, I want an extra large section, I want a small section. So it should just be section S, section L, section XXL. There’s no other context where that can mean anything else. So that’s one way that I’m going to simplify. And this is why we have to deprecate things, we have to deprecate bad decisions, and we have to move forward, even if that’s a little bit painful sometimes. By the way, everything that we deprecate,

0:30:33
okay, you can go to this deprecated section right here, it all still works, it’s all still functional, you can keep it on if you like it, okay? This is not, none of this is the new, obviously we’re still looking at all the old stuff, okay? But it’s just stuff like that, dumb decisions of like, and those naming conventions will like they haunt me they haunt me all right I absolutely hate them but you know we can fix them but it is a little

0:30:58
bit of a like rip the band-aid off a little bit and get you know retrain people and then have this deprecated option it’s a little bit messy but it’s also I think the best way to move forward but section padding stuff Autoresponsive grids, was anybody doing auto grids before ACSS? No. Accessibility features, we put a strong focus on accessibility, these are the firsts

0:31:22
that were brought to the table. Things like, come on, clickable parent and things like that, come on, these are not anywhere else. These are not anywhere else. Variable partials, some of this stuff is quite technical but actually extremely powerful when you really start to understand it. Header height offsets, starting to branch out into like,

0:31:41
okay, now we’re like, we’re not doing what a typical framework does, we’re going well beyond the scope of like a framework. And it’s just identifying common scenarios that are really, really, really problematic. Like when you have an overlay header or a sticky header, it takes up space in the hero section of every page, it’s really annoying. It’s not particularly easy to fix or address,

0:32:06
especially site-wide with the ability to turn it on or off. It’s just not great. And so we came in and we’re like, well, we’ve got a one-click solution for that, more or less. Like you just go in and you click this button and it fixes that whole situation for you. Framework’s not really supposed to do that, but Automatic CSS kind of introduced this concept of like, it’s not just a framework.

0:32:29
It’s now coming into workflow efficiency. It’s coming into problem solving in key areas. Very very, you know, I think, key stuff here. Smart spacing. Smart spacing. This idea, which by the way, in Automatic CSS 3.0 has been dramatically expanded. And it’s, this is my fault too. It’s a feature that a lot of people don’t understand

0:32:56
or even really know the full power of, or what it unlocks. But Smart Spacing, first of all, it’s on on every single website that I build. And once you’ve used it, you realize how invaluable it is, just like so many of these things. And this is the hard part about marketing automatic CSS as well, which is,

0:33:17
this is like the chicken before the egg thing, or it’s the like, you have to experience it, then not experience it. In order to really, here’s the rub, like the main challenge of automatic CSS. It’s not a tool where it’s like, once the person uses it, they just, it just clicks in their head that,

0:33:36
wow, this is just phenomenal right. You know when it really clicks and this is hard because you can’t force the situation. You can’t just make this situation happen consistently. The person has to use automatic CSS on like you know two, three sites like really get deep into it and then when they go to work on a site that doesn’t have it that’s when it just, this is like, fuck, I can’t ever,

0:34:04
I’m never gonna touch, and you know how many times this has happened to me? You come to the realization, like, I’m never going to touch another website that doesn’t have this. Because when you’ve used it on two or three, and then you go try to do it on one that doesn’t have it, that’s when immediately you realize, oh, oh, oh, oh, okay, I get it now.

0:34:26
I get it now, because this is a nightmare. This is an absolute nightmare. You don’t ever want to go near one again. And that goes back to, you know, once you’ve gotten in the framework kind of workflow, you realize, okay, this is invaluable. This is hyper efficient, and I don’t want to ever do it a different way again. That’s really, but how do you force that conclusion, right? How do you force that scenario? It’s you can’t you can’t

0:34:51
Okay contextual menus the right-click thing let’s go into the builder this is um This is him this is important so and I Admittedly, okay, so I’m gonna go in here. Here’s just a random section right so I’m gonna go into the padding right here this contextual menu where I can just right click an input, and by the way, it knows what input I’m interacting with because it’s offering me things that make sense for that input.

0:35:24
It’s not offering me every variable in the framework, it’s offering me spacing variables because I clicked on a spacing input, right? And this contextual menu concept, I’ll just be the first to admit, right? And if you want to know where this concept came from, this didn’t come from me, right? This came from a gentleman named Christoph in, once again, I believe the inner circle, maybe in the ACSS group, maybe both, I don’t know. Can’t remember the timeline exactly, but he

0:36:01
posted a video basically saying, hey guys, look what I built. Now this was in January of 2022, okay? So I know other frameworks have adopted this concept. I am almost positive that Kristof is the one that introduced it, okay? And he introduced it for Automatic CSS as an add-on at the time, just like I did with ACSS, at the time as like a code snippet

0:36:28
that you could just add, and it’s like here, you get these little right-click things, it looked nothing like this, but you get these little right-click helper things, and this is, he basically was saying, this has really helped me use the framework because I don’t have to remember stuff, I can just right-click,

0:36:43
and then it also had this menu right here, and I don’t remember that first version had the live preview at the time. Maybe it did or maybe that evolved Here’s why I don’t know. Here’s why I don’t know because admittedly I didn’t pay any attention to it I never made it and people in the inner circle or the or the ACSS group will tell you people were fucking Hounding they were knocking my door down like Kevin if you looked at the especially when he Branded it he named it plaster was the add-on and then started selling it as an add-on for ACSS.

0:37:17
And when I first saw it, I was like, okay, that’s cool for some people, but I don’t need that. I know the framework and I can just type the things. It seems pretty quick. I don’t know. It didn’t seem like this is super awesome or anything. And so I just kind of ignored it. I just ignored it and ignored it. And then people were like, have you checked it out yet?

0:37:35
I was like, I saw it, but I haven’t used it. I just kept saying that over and over again. And then I finally was like, all right, I got some breathing room, I got some time, let me install this thing, let me see how it works. And I started using it, and then I started like forcing myself to integrate it into the workflow. And then, once again, it’s like,

0:37:52
when you get that far into it, and then you’re like, you go open an install that doesn’t have it, you’re like, ah shit, where did that thing go? I need that thing back. I need that thing back because it’s actually really, really, really helpful. And that’s when it clicked.

0:38:08
And then I phoned up Christoph and I was like, I got to buy that. And we need to put that in ACSS official and you’re the man, right? And then suddenly, suddenly you started seeing context menus everywhere. But that was the timeline of context menus. Everybody, you need to give Christoph some love and some, you know, applause in the chat.

0:38:26
Christoph is the man behind the context menu concept. As far as I know it, he was the first one to bring that to the forefront. And, you know, when I see stuff like that and that kind of innovation, you know, we are, I do try to move when I’m not being a moron as fast as I can to bring that to everybody. Okay, so when something is fantastic, I want to make sure that everybody is able to get their hands on it. All right, so contextual menus.

0:39:02
Auto BIM, Auto BIM concept, which we’re about to release Auto BIM 2.0. It’s not ready yet, but we’ve got to get the 3.0 thing out the door, but Auto BIM 2.0 is gonna be absolutely fantastic. Automatic variable expansion and validation. Like the fact that you don’t have to write, and this goes into the area of workflow efficiency, where it’s like, you know, with L,

0:39:25
and then I hit enter, and it auto wraps the vars because nobody likes writing vars, nobody likes writing calcs, you know, the ability to just do that and then get a calc formula. It’s like the efficiency that that brings to the table. Christoph also, I believe I brought these ideas in. Christoph is the developer of, so he’s the person who manages a lot of the variable expansion

0:39:49
and validation, the context menus, some of the stuff you’ll see in 3.0 with, well, I can’t talk about that feature until tomorrow, but some of that stuff. Okay, so just really, really like, you know, first stuff you don’t see anywhere else. I will give a shout out to Lewis and quickly, okay? We have a feature called convert to rim.

0:40:11
So as you guys know, automatic CSS, I was very much like a proponent of the 62.5 root font size. A lot of people prefer 100% root font size. The reason I don’t prefer 100% root font size in a page builder is because I don’t like doing math in my head every time I want a value, like a pixel value that needs to be converted to rim. It’s just not efficient.

0:40:33
I suck at math. I’m dyslexic. It’s just not great. And so 62.5 makes my workflow very easy. And it doesn’t really have any downsides. I know people try to argue against it. There is one, we don’t need to go down this tangent.

0:40:47
There is one viable argument against 62.5 and hardly anybody makes it. See, that’s the thing. Like, I can steal, man. I can argue both sides of it. I know all the arguments. I can argue both sides of it. There is one viable argument against 62.5. Every other argument against 62.5 is a bogus argument.

0:41:07
Okay? There is one, though. There is one. And the funny thing is, is the people making arguments against 62.5 rarely make the one viable argument. They never say it, which is, you know, when they do say it, then I’m like, yeah, you’re right. You’re right.

0:41:24
That is a viable argument against 62.5. But it’s also a scenario that you rarely encounter. So it doesn’t really matter all that much. Anyway, anyway, what I said is, if I didn’t have to do the math converting pixels to REM, I would use a 100 percent because then I would have no limitations, right? Well, the convert to REM feature is

0:41:45
something that Louis introduced in quickly. I was like, that’s exactly what needs to happen. That is, he hit the nail on the head, that is exactly what needs to happen. We implemented essentially the same thing in Automatic CSS. Shout out to Louis and quickly for the idea on that feature right there.

0:42:04
Okay.

0:42:04
Any dumb decisions that we didn’t, yeah, there’s a couple of dumb decisions that we didn’t talk about. So we’ll get to those and then we’ve got some good decisions. We’re going to talk about some ongoing future innovation stuff. Okay. Let’s get to, let’s get to here. Let’s go to deprecated and here’s one of them right here. This shade color, the shade color. So we had in the palette, right?

0:42:30
Initially we had primary, secondary, accent, base, shade, and then we didn’t even have the contextual colors, which are now called, what are they called now? Semantic colors. Shade, okay. You probably already see the problem, right? So every color has shades, but then we have a color. Get this guys, every color, let me just reiterate it.

0:42:57
Every color has shades, but then we had the genius idea. I had the genius idea that we’d also have a color called shade and that color would have shades also. How many, how many shades can you have? And this is just terrible all around because nobody ever knew what I was talking about. When I was like the shade color, they’re like, what shade of what

0:43:20
color?

0:43:21
And I’m like the shade color. It was like, it was like the fucking who’s on first thing over and over and over again. And so that had to be deprecated. That had it lived actually longer than it should have lived. But it had to be deprecated. So we deprecated that was just an awful, an awful thing to go with. And really shade represented all the actual like black to white shades,

0:43:43
like the shades of gray, which are now called neutral, which I think is a much more sensical name for that color, like your neutral color and your neutral color has shades, just like all of your other colors, but there’s no color called shade with its own shades. We don’t have to have that level of dumb ass inceptiony. Okay, so medium shade. Here’s another one, and it has to do with shades.

0:44:10
The medium shade. Okay, so let’s pull up, because I think this still has it. It does. Okay, so this version 2.83 still has it. 3.0 will not have this, though obviously we’re not gonna break websites. It’s a deprecated toggle,

0:44:24
so if you need support for the medium shade on existing sites, it’s there. Don’t worry about it. But this has got to go. I mean, why does this have to go? Because the guy who invented this concept, medium, is a moron sometimes. And you have, think about this, you have your main color, right? Which should live in the middle between lights and darks.

0:44:45
I mean, a dark shade always has to be darker than the actual color. And then a lighter shade has to always be. So where does medium happen? Where isn’t medium like the color? Isn’t that that’s the thing in the middle? Well, it turns out in the, you know, this version of ACS, it was not, it was not the thing. It was just, it was a shade.

0:45:04
Essentially everybody ignored because I think they, in their mind was like, I don’t think that makes sense. So some people made use of it, but they still didn’t make sense in the way that they were using it, in my opinion. And so it was just like, sorry guys, you know, I was a moron and we have to deprecate that now. And so that’s deprecated. But, but with the deprecation comes

0:45:31
a really strong advantage. Like, you know, out of bad things come good things sometimes. And so medium has been replaced with two new shades that actually make a lot of sense and give you more shade options so light and Dark are getting two new friends, right? We have ultra light we have light and then we have semi light and then we have semi dark Dark and ultra dark and there’s nothing in between them except the color.

0:46:01
So you have your color, and you have three shades on the left for the lights, you have three shades on the right for the darks, and then everything makes total sense. Semi-light is always lighter than the color, and semi-dark is always darker. There’s no awkward medium thing that doesn’t live really anywhere.

0:46:21
So that’s been fixed. But that was just another not great decision, right? Just not a great decision having medium shade. Another one was the complimentary color, not necessarily a bad decision or a dumb decision, just a decision that we never built on. It was not usable because yeah, you got a complimentary version of each color to use,

0:46:42
but you didn’t get any shades for it. You didn’t get any transparencies for it. And so anytime you needed shades of the complimentary or transparencies of the complimentary, you had to make them all yourself. Now, thankfully, there were color partials, and so you’re easily able to do that. Well, you know, depending on how much

0:46:59
of the documentation you read, but it was still very manual, and I don’t think anybody ever really used it all that much. So again, just, it was like, you know, that was less of a dumb thing and more of just a half-assed thing. It was like, well, look what we can do. We can automatically calculate

0:47:16
the complementary version of your colors, but then we didn’t do anything with it. So it really doesn’t matter. So we had to deprecate that. And then we talked about pad classes, pad section classes. Last one, last really dumb one. Let’s go to deprecated.

0:47:30
We have this thing called text larger. Now, I say it’s dumb. I know that there’s a lot of ACSS users who just absolutely loved this concept But this was before my brain my dyslexic dumb brain was like oh I mean they could just calc things can’t they and these calc things yeah, you can just calc things We had this text larger where it’s like this gave you in between sizes So if like if you had text M But you’re like I need it to be larger and you just add this class called text larger

0:48:02
and it multiplies it, it’s like, okay, yeah, we don’t need to talk about that too much because once like, and I think in all fairness, in all fairness, this was before we had our whole token library. So, you know, the token library did come later and then the tokens are what give you the potential to calc things very easily,

0:48:22
like I just showed you a second ago. But yeah, I mean that’s like this started to make, quickly started to make zero sense. And it was annoying me because so many people were using it. And I was like, stop using that, stop using that. Really, I hate that, just stop using it. It’s gonna go away, stop using it. I was trying to warn people.

0:48:42
But it eventually did get deprecated. I just, it just wasn’t a great, it wasn’t a great thing. All right, so those are the main things. There’s a lot of other little things that hassle me here and there, but it is what it is, right? We’re talking about the concept of nothing being perfect, right?

0:49:05
And even with these things, it’s like the upside, the things that do make so much sense, these things are like minuscule, like they pale in comparison. So it’s just, I wanted to highlight kind of the process that we go through. And some of these things you just can’t even realize

0:49:28
it’s like a bad thing until it’s deployed in the real world. Okay, let’s get on to some good decisions, some really good things that are unique, right? One of them that we actually you know some people push back on initially but I still maintain that it’s one of the best decisions is the double dash syntax because if you notice a lot of frameworks they have to prefix their classes like oxy ninjas were prefixed I think cores are prefixed I think a lot of them a lot of you a lot

0:50:00
of them use prefixes and I just absolutely hate prefixes. And if you don’t prefix them, you run the risk of having utility collisions, okay? So like with classes, like padding something, if you had two frameworks, which you shouldn’t do anyway, but if you had some customization stuff you did, some custom CSS, and you might have a collision with the class name here or there or something like that.

0:50:25
But with the double dash syntax, which also follows BEM principles for organization and it kind of helps you understand, okay, this is a utility that’s being modified in a certain way. You don’t have collisions because nobody else is using them like that. And so we got away with no prefixes because of the double dash syntax. We also can get away with some automatic targeting of groups of classes because of the double dash syntax because I know it doesn’t exist anywhere else. So I can automatically target classes,

0:50:57
certain classes with the double dash, knowing it’s not gonna impact what a page builder is doing and very unlikely to impact what anybody else is doing in any other plugin or even if you install another framework, they’re not using double dash syntax, so it’s not gonna impact them either. So there’s a lot of automatic stuff, it is called automatic CSS by the way.

0:51:17
All right, so there’s a lot of automatic stuff that kind of leverages that double dash syntax. That was a really, really, really good decision. Refusal to prefix class names, people still wanted prefixes, even with the double dash syntax. And I was like, no, I pushed back on it. I hate prefixes.

0:51:35
I don’t want people to have to type prefixes. I don’t want to see prefixes. I don’t want prefixes. And so I just kind of stood firm against prefixes and it’s worked out. We have not had any need whatsoever for prefixing. All going all in on BIM. Going all in on BIM is another one.

0:51:52
Like just tremendous. It’s an easy system for people to understand. It’s very organized. It flows naturally into CSS nesting, so as nesting becomes more supported, you’re gonna love BIM. The concept of BIM and nesting are like a perfect couple. It’s just really, really, really phenomenal. And then contextual utilities.

0:52:15
This idea of abstracting things into more usable layers, right? So for example with spacing going in and establishing concepts like a container gap and a content gap and a grid gap And then being able to automatically gap these things Contextual Colors so what we’re going to have with these are in different areas my brain’s like where did it go because in 3.0? It’s in a different place, but the idea of having just we’re not naming background colors anymore. We’re not naming text colors anymore. There’s a text color. There’s a muted text color. There’s a light background or a dark background or

0:52:54
an ultra light background or an ultra dark background and the colors are assigned globally but when you’re using the utility you don’t care what the color is. And so now I can come in and I can actually work on a project and I don’t need to know what colors they’re using. I just need to know what I want. I want a dark background or an ultra dark background. I want a light background or an ultra light background. I want dark text. I want muted dark text, you know, that kind of like low contrast dark text, or I can have light text and muted light text.

0:53:21
Don’t even need to know a color, don’t have to look up the colors, don’t have to reference the colors, don’t know, don’t care. And when I re-theme the website, if I want to in the future, I can safely re-theme it because of how these things have been deployed.

0:53:39
So that’s really, really, really powerful. And then you build on that with something like automatic color relationships. Like when I say BG dark and the text turns light, when I ask for a dark background, the text just knows it needs to turn light, but it knows it needs to turn light based on what I, and how I told it to turn light, right?

0:53:58
So I have full control over it. This is still an unexplored area of the framework that most people don’t even realize exists yet. Again, because I’ve had to put a pause on videos on features because it’s all gonna have to be updated with 3.0. So there’s just tremendous power at people’s fingertips that they don’t even realize is there yet

0:54:20
because I haven’t made videos for it yet. And it’s stuff that is just in its infancy that we’re able to continue building upon. Like imagine with automatic color relationships, that it’s when you say I want a dark background, you don’t just get light text, you also get the button and link colors updating. So you don’t even have to go to the button anymore

0:54:41
and be like oh, the background’s dark now so we gotta switch to, no, no, no, it just does that for you based on the patterns that you’re telling Automatic CSS you want throughout your website. That is just gonna be really, really, really phenomenal. I don’t wanna get too far into that. We’ll deal with that more

0:54:57
when we do the specific videos on it. Okay, ongoing innovation. What other stuff have we been working on lately that nobody else is doing or thinking about? Content grid. Okay, you may have heard the word content grid. You may have seen my video, one of my videos on like how to do a split layout with content grid.

0:55:17
It is that is scratching the surface. This is one of the biggest advancements. Not a concept that I came up with in CSS, but a concept that we found out how to put in a really good way into a framework and actually deploy it in a way that’s easy and makes sense and that just gives tremendous power. And this is something you should especially pay attention to if you live in multiple worlds like Bricks and Gutenberg, right? Or GeneratePress, GenerateBlocks. If you’re any, anything involving Gutenberg, now you can use this 100% in Bricks and make

0:55:55
really good use of it just in Bricks and a page builder or Oxygen or Breakdance or what have you. But Gutenberg is where you’re gonna, especially Gutenberg that maps into a page builder template because you actually don’t really have control over what’s happening in that template once it’s built. But with Content Grid, you can take a narrow column blog post template

0:56:16
and essentially with blocks, still build an entire custom page with blocks inside of that template as if the column in the middle doesn’t exist or affect anything. It’s really, really, really powerful. But again, I have to do a whole, it has to be a video, a dedicated video to Content Grid,

0:56:34
but this just gives tremendous, unprecedented layout possibilities. And achieving layouts that are really hard to achieve with any other system. Recipes and shareable recipes, you’re gonna see this deployed tomorrow in multiple different ways. This concept right here, again, nobody is doing it.

0:56:56
It’s never been done. It’s never existed outside of the realm of page builders. Page builders really give us this possibility. This is going to be phenomenal. You’ll see this more in action tomorrow. You may have already seen some sneaks of the recipes feature, but this also just solves some really important problems, especially around custom classes

0:57:17
and deploying utilities with custom classes. And again, it’s something simple, it’s something that’s easily usable. These are not content grid, recipes and shareable recipes, programmatic color scheme, these things I’m talking about are not just for advanced users. Pure beginners can watch the video

0:57:35
and start deploying these things immediately and achieve things they never would have been able to achieve otherwise. Way faster. Ok, so if you think you know these things sound complicated, once you watch the video it’s not complicated. It’s very easy. Ok, programmatic color scheme protection. Where did this come from? I was building a site and for a client and I got to the end of the project and it was a dark website, dark website, because their old website was dark and they were like we want a dark website.

0:58:10
Okay, well we’ll do a dark website. Get to the end and then you know one of the key decision makers is like you know I’ve just really been feeling like I like light websites these days. You know can you just sprinkle some lightness in somewhere? And I was like, mm, no, not really. But what I can do is I can add a toggle switch and we can switch between dark and light mode. And I knew, you know, Automatic CSS

0:58:37
was capable of doing that. The problem is, and this is really with every framework, I think, you kind of need to know that ahead of time. Like, you kind of need a plan for that. It’s really helpful if you know that that’s gonna be the case ahead of time. Because when you’re building a site that’s going to switch between schemes, you need to protect

0:58:55
certain areas from changing. And you usually do that with a utility class. Like in automatic CSS, you use color scheme main. So it’s a, I’m going to lock this section or this block or whatever it is to the main scheme. So that when people toggle, it doesn’t toggle. It stays there. Think about a hero section with a background image and a dark overlay. Okay, that’s already dark and that needs to be dark, whether it’s a dark site or a light site, doesn’t matter, it has to be dark. Because you’re not going to change it to a light overlay. I mean, that would be terrible. That would be absolutely terrible. So you’ve got to protect that section. So you lock it to the main scheme. Okay, so

0:59:30
utility class, right? That means you’re littering. That means you’re doing, you’re making these decisions manually as you build the site, which is maybe fine as you build the site. But when you’re faced with doing this color scheme switching at the very end, by the way, when you’re not doing the dumb version of color scheme switching, which is just we add a toggle and the browser makes all of its decisions for it, no.

0:59:55
We have fully custom schemes, okay? So you customize every aspect of the scheme. Well, that’s harder to do after the fact. So what I did is I was like, there’s gotta be a programmatic way of protecting certain things. And we already build with classes. We already build with BIM.

1:00:12
We already build with tokens. This shouldn’t be a big stretch. And so I was like, all I need is a way to target the elements I wanna protect, and I can build the protection in programmatically just by knowing the names of the classes. And so then I did a little bit of testing and I was

1:00:28
like oh this this is actually working this is actually working. So then I built it into the dashboard. Is it in this version? I think it’s in this version. Let’s turn on I don’t know if it’s in this version. 2.83 I thought we snuck it into this version. You’re definitely going to see it tomorrow. Oh here it is right here. Lock color scheme selectors. So you can literally go in and be like, okay, hero one, I’m just gonna make up stuff, right? Hero one, features, and then I want my services card,

1:01:02
maybe that was a dark card or something, it needs to stay dark or whatever. So, and I just comma separate these, and then I hit save, and I don’t have to go find every instance of that thing and put a utility class on. You can literally sit right here on the dashboard and go, I’m gonna protect that thing and that thing

1:01:20
and that thing and that thing and that thing and that thing, save, and then your scheme just works out of the box. The areas that need to be protected are protected. It is by far the easiest way to add color scheme protection to a website. So easy, in fact, that I was able to do the entire site that was already built in like an hour. After it was built, added the switch,

1:01:40
added the protections, done, move on, and then the client’s like, thank you. I’m like, yep, you’re welcome. Very, very, very easy stuff. Very powerful. But again, we have to do a video on that, right? We still haven’t done a video on that. People don’t even know that that exists, but it does. Custom variables is going to be coming to automatic CSS. Container queries, I’ve got some ideas. If you don’t know what a container query is, I think I have one video on it. You need to go watch about container queries.

1:02:11
This is going to replace, for the most part, media queries. This is going to be one of the most important developments in CSS. So we have some plans on how to bring container queries into the mix. We’re gonna be building in more workflow efficiency enhancements, okay? Let’s talk about the three big lingering challenges,

1:02:29
and I wanna take some questions. Make sure your questions have hashtag Q, hashtag question, okay? Three big lingering challenges. Number one is this whole situation right here. And anybody that uses any framework of any kind knows that this is the case. So if I am building a website, let’s go edit my homepage, okay? All right, I’m building my website,

1:02:55
I’m building my website, I’m using frames, which is just fantastic, I’m going very fast, because I’m using, these are all frames, right? I’m just going very fast, I’m using frames, and I’m getting ready to customize, and I’m getting ready to do the parts where the framework is controlling this, like my heading and text sizes, my link styles, just general type of colors, all of that.

1:03:17
And I already said, I like to adjust the framework as I’m building. So what does this require? Well, it requires that I exit the page building workflow and I go to what I have called for various purposes, a magic area. And page builders, WordPress in general, they love this concept of a magic area. I’ve ragged on generate press and generate blocks for

1:03:47
having magic areas, breakdance has magic areas, bricks has a magic area, this templates area, this is a magic area. A magic area is like hey I was building a page but in order to do this next thing I want to do for some reason, for some unexplainable reason, I have to go to some other area where this just must be where magic happens because I couldn’t do it over here, but when I go over here, voila, I can do it, right?

1:04:17
That’s a magic area. That’s where the name came from, if you don’t understand. Okay, so what is it about this? Why can’t I do this stuff where I was already doing stuff, the very similar stuff. It never made sense to me. And so I was like, we have to, not just with automatic CSS, but like across the board. If you’re a page builder developer, listen up, okay?

1:04:38
If you’re working on the Gutenberg project, listen up, because the Gutenberg people fucking love their magic areas. VS Code is their magic area. Custom Blocks is their magic area. Block theme styles, or whatever they call them is their magic area. They love their magic areas. Everybody loves their magic area.

1:04:57
I hate every magic area I’ve ever interacted with. Okay, I think we should get rid of all magic areas. We should exterminate them with a passion. And so we’re doing that in Automatic CSS. The idea that you have to go back here and like flip back and forth or have multiple windows open, which you can’t even do when you’re on a smaller device.

1:05:18
And it’s just, why? Why? What are we doing back here that can’t be done somewhere else, right? So that’s the big challenge, number one. It’s like the magic areas have to go completely. So there is none of this in Automatic CSS 3.0. The second big part of this, big problem here is like,

1:05:39
obviously there’s no visibility into what you’re editing or changing, I mean, I can change things here, okay? Okay, 20, let’s go to 24. What the hell did that do? I don’t know, because I’m looking at a magic area dashboard. I don’t, there’s no indicator here of anything that’s happening. So what do I do now?

1:06:00
Well, you gotta flip back and forth. You gotta find the thing that you just hope you influenced and then, yeah. Now, has this been absolutely fantastic? Of course, of course. But when there was no UI dashboards, this was an absolute joy. It was like, thank you for that magic area

1:06:18
because we’ve never experienced this before. I’ve never been able to change things this easily before in a framework, but then as you evolve, right, you start to elevate your game, you start to realize, oh, well this actually kind of, it’s like, yeah, it opened a lot of doors, but it also really sucks. And now it’s time to evolve. Now it’s time to go to the next thing that we know is way better than this thing right here. And so that’s what 3.0 does. Then the third challenge is, and this is a challenge with a lot of things in WordPress generate press generate blocks

1:06:53
all these things Bricks like go go here. Okay. Let’s go to where is it settings because I never go here I never go here because it’s useless. It’s useless Custom code. Oh, there we go. Well magic area another magic area Custom CSS. Oh what and this is with WordPress too. Okay, let’s go here visit site. Let’s go to the front end. Yeah, new tab created, okay. This thing right here, customizer, additional, this thing, look at this.

1:07:24
This thing and then the thing we were just looking at in Bricks are more or less equal, okay? They are a glorified text area input for writing custom CSS. And I don’t know anybody in their right mind. Like you have to tie me to a chair and be like this is the only thing you can use or you know your family’s done, right?

1:07:45
Like then I’ll use it. In any other context, I would never touch this thing with a thousand foot pole. Like anybody that’s written CSS in here knows how bad it is. Anybody that’s written CSS in Bricks knows how bad it is. And so we have nowhere. And then you go to here. Oh, Kevin, WordPress gave you this CSS,

1:08:07
this thing of the theme file editor. Just go there. Okay, we’ll go to the theme file editor. And here’s my Bricks child theme style sheet. Nobody in their right mind would write CSS here either. The experience is awful. It’s awful. It doesn’t have any of the things that we need or want

1:08:25
in a CSS editor. And it’s once again in a magic area that’s completely disconnected from the place we are currently working in. So basically what I assessed is there’s no support for global CSS. There are things that I need to write global CSS for. Now you guys know how much I love element-based CSS.

1:08:46
So if I go into the editor here, well, that’s a Gutenberg thing. Let’s go back into Bricks. You guys know how powerful this is and how much I love it, right? The ability to click on something and go to style, CSS, and then, of course, with the dynamic root selector. Do you know how much I write here, how much CSS goes here? Because it’s so tremendous, because it’s so powerful,

1:09:09
I’m going to do an entire video on the best place to put CSS in WordPress, in this kind of workflow. And the Gutenberg people still tell me, no, no, we should have external style sheets. We should, no, no, they’re wrong. They’re 100% wrong. They’ve never done this. They don’t even know this exists.

1:09:27
They don’t know what the experience is like. They’re stuck in the past. They are stuck in, oh, I’m knocking shit over on my desk. They’re stuck in the past. This is the way to go. This is phenomenal, right? But this is not global CSS. This is CSS tied to an element, right? And in this case, tied to a class, which is great. And

1:09:47
then I can go up here and I can go to page settings, custom code, and I can write page-level CSS, but that’s still not global. It’s not global CSS. And there are some things you need to do with global CSS. This also has no support for sass it’s there’s a limitation there so what we’re doing with 3.0 is we are overcoming that is a limitation that exists all throughout WordPress that we are overcoming once and for all and you will see it tomorrow but we are overcoming it once and for all okay so what to expect tomorrow and then I’m going to do some Q&A. We’re going to do the first public reveal. So there are a select group of people that have seen Automatic CSS 3.0, our alpha testers, they’ve given

1:10:34
us tremendous feedback, they’ve been pivotal in getting ACSS 3.0 to where it is at right now, but this will be the first time tomorrow when the general public sees Automatic CSS 3.0. We are going to do a surface level demo of features. Now if I did a deep dive, we would be here for hours. Okay, we’re not going to do that. We’re going to do a surface level demonstration of automatic CSS 3.0, which will be enough, which will be enough to fully convince you and you will understand exactly what is going on.

1:11:11
I will talk about some looking ahead to 3.X, okay? 3.1, 3.2, 3.3, because what you need to understand is that 3.0 is, this is to me like 1.0. We’re back at the beginning because what this does in terms of opening possibilities for us, so much that we can do, so much that we can explore, it’s a fresh start. It’s completely rebuilt from the ground up and I have a lot of plans for it plans that there was no Possible way they were ever going to make it into three point zero

1:11:47
So you need to know that what you see in three point zero is the beginning of a new era It is not the like culmination of everything that we’ve gotten up to this point It is a rewrite of everything that we’ve done up to this point with some new things, right, that 3.0 give us in terms of capabilities, but it is still in its infancy, 3.1, 2, 3, it’s already mapped out exactly what we’re going to be able to do with this and it’s going to get way better than what you’re going to see in terms of the 3.0 implementation even.

1:12:23
And then we are going to, I’m going to give you an announcement, official announcement of date and how to sign up for Automatic CSS 101, which is if you liked Page Building 101, I’m doing an entire course just on Automatic CSS and it’s 100% free. And so I will announce where to sign up for that. If you’re not an Automatic CSS license holder, you will be able to participate in Automatic CSS 101 with a sandbox environment. And it’s just gonna be phenomenal. And like PB 101, you’re gonna learn a bunch of best practices, a bunch of workflow stuff,

1:13:01
but namely how to build sites, maintainable, consistent sites at light speed with Automatic CSS. And so that’s gonna be, I think people are really, really, really going to love that. And it’s something that if you work with teams and you onboard a new team member and you’re like, hey, this is our thing. We use ACSS to build all of our sites. So the first thing you need to do, like you don’t have to educate them, just send them right over to ACSS 101. That’ll get them up to speed. And then boom, they’re integrated perfectly into your team. And everybody is happy, right? So ACSS 101 will be announced, you’ll be able to sign up for that again, 100% free.

1:13:40
Don’t even need a license for Automatic CSS to do it. If you do have a license, obviously even better, you should still absolutely do it. And because like I said, there’s so many things that ACSS does that I think a lot of people just use like 30% of its power, 40% of its power, 50% of its power. And when you unlock the other half, it’s just, it’s a phenomenal difference.

1:14:07
So let’s go into Q&A. I thank you guys for sitting and listening to all of that. We still have a tremendous amount of people here. Okay, let’s go hashtag Q. I haven’t, I’m sorry, I have not been able to read the chat as I do this. I can’t talk and read all at the same time, but I will try to go back and read a lot of the comments in the chat, but I’m going to search for questions here and answer as many as I can.

1:14:40
For a new site that’s in development, should I switch to ACSS3 or finish developing in 2.8? That is from Ruben. So our goal is for a seamless upgrade experience. So if you are building a site with 2.8 and you switch to 3.0, it’s business as usual. It’s nothing, nothing happens, nothing happens except everything gets better.

1:15:06
But nothing that you were working on breaks, you don’t have to fix anything. It should just be a seamless experience, okay? Next question. I love ACSS and use it everywhere. I do think the UI must be improved. And I believe 3.0 is partially about that in order to allow better specificity management.

1:15:27
I don’t know exactly what the specificity management part of that means, but yes, 3.0 does dramatically improve the UI. What do you suggest for insurance as an agency owner? I have a dependent with health issues and I need to make sure they’re covered. Ask that on the next WDD Live, I will answer that. It is a good question.

1:15:46
I will answer that on the next WDD Live. Currently finishing a few sites with ACSS 2.8. Any issues or just things in general? Oh, by the way, shout out to my camera. We’re not overheating. We’re pretty deep into this and so far it is in 4k now, has not overheated. So we’re looking good. Okay, so any issues or just things in general

1:16:08
pay attention to after the 3.0 update? No, so we’re deprecating the action color. That is something that you need to know. We didn’t talk about that yet. And I’ll put out some notices ahead of time. Again, this is why ACSS 101 is gonna come out. It’s gonna educate on a lot of these things. We’re gonna have primary, secondary, tertiary,

1:16:30
so you have that third option, and then accent, and then neutral, and base. So those are gonna be your options. You’re not gonna lose an option, but we’re just moving away from the name action. And then we’re gonna teach people how to use that palette. And then, of course, you have your semantic colors as well, your warning, success, info, all of that.

1:16:49
Okay, so that’s one big thing. So buttons are gonna move to, instead of button action, obviously, we’ll move to button primary, just like they used to be, and like they are in almost all other design systems, so that we’re doing this largely for consistency and best practices across UI design. So button primary, button secondary,

1:17:10
there’s some really powerful new stuff coming to buttons that are key. But in terms of your current workflow now, it’s not, you know, the change is, just use primary where you probably used to use action and use button primary where you used to use button action and nothing is going to break on existing sites. Button actions will still work. Action color will still work. It will all be seamless. So just going forwards, know that, hey, this is what we’re doing now,

1:17:42
and follow the process going forward. But anything that you’ve done in the past is safe. It will not break and nothing will be affected by it. So you’re good to go. Nothing else really, nothing else is really changing in terms of like deprecation or dramatically changing your workflow. Is it worth it to use advanced themer for bricks with ACSS? I like the

1:18:04
AT features but found conflicts at times between the two. I know a lot of people that use both you just have to be careful with what you’re turning on in AT versus letting ACSS manage obviously. You know if you want to use it for certain workflow enhancements things like that. I don’t personally use it at this time but you know I know a lot of people that do and if you want to that’s it I would talk to other people who use both and just you know check with them on how they manage the two okay what is the one thing against 62.5 great question it I will answer that if we get to it I want to get the ACSS questions but if we have time I will come back and answer that

1:18:46
okay are you using I also like to you know, I Keep leading people along right? Let’s just yeah, let the tension build. What is the one thing? What is the one thing again 62.5 are using arc now instead of Chrome? I’ve installed it But must say I don’t understand its workflow. Hey, I’m right with there with you I used arc six months ago and I was like, what is this? I know I don’t get it. I don’t understand it I’m not I’m not inside shelved it. And then came back to it.

1:19:17
And I was like, all right,

1:19:18
I’m just gonna kind of force myself. And this is why, you know, it’s similar pattern, right? I think the same thing happens with ACSS for people, for brick, with bricks for people. You just kind of gotta force yourself. Be like, no, I’m gonna buckle down, and I’m gonna do this one thing, and I’m gonna make myself do it.

1:19:34
And then if I do this one thing in completion, and I still don’t get it, then I don’t have to keep beating a dead horse, but I’m going to give it a fair shot. And so I gave it its fair shot and I started looking into things like, well, I love this area up here. I really love the, okay, let’s say that you do live in 2.8 land of automatic CSS and you have this duality that you’re living between right here. Okay?

1:20:05
Check that out. Check that out. I just get like, it’s in browser, right? Having split screen tabs is really, really, really, really strong. Now I’ve got my resolution pumped all the way up here, so things, like if I was on a 4K screen, I mean, this would be phenomenal. Everything’s squished because I have to make it bigger for the stream and all of that. But you get the point, right?

1:20:28
Like little, I started uncovering little helper features. Then another one is the concept of spaces down here and profiles. And then I didn’t understand it at first, but combining profiles with spaces. So for somebody like me, where I’ve got digital gravy, I’ve got automatic CSS, I’ve got Geary.co, those all have different like Gmail’s those all. And then Gmail ties your logins to things, right? And so you’re constantly having to manage different logins and like if you’re in Chrome,

1:20:57
this becomes an absolute nightmare. It’s just, it’s in Arc, in Arc, you have spaces which every space gives you whatever bookmarks and like quick things you want for that space. And so I’ve got like a dev space right here. I’ve got a giri.co space, I’ve got an ACSS space, I’ve got a digital gravy space, I’ve got a personal space. And all the sidebar, everything that’s happening

1:21:21
with links, folders, tabs, tab history, all of that exists within those spaces, but then those spaces can be tied to profiles which control like your Gmail login and such so that I’m not having to constantly switch back and forth between different Gmails because they exist in different profiles inside of the same browser that I’m using. I don’t, maybe I explained that good, but there’s a lot.

1:21:45
There’s a lot, but I got it. It clicked for me and I was like, okay, I’m going arc and it’s been a, it’s been a great experience. Plus I can easily get full screen stuff like just by hiding the little arc side bar here. There’s hardly anything at the top of the screen. In fact, you can get rid of this little toolbar right here if you want to, and literally it’s just what you’re browsing. And there’s just a lot of other stuff that I can’t even cover right now.

1:22:09
But yeah, it clicked for me. Once it clicks for you, I think you’ll like it. Once the team has been let out of the basement, have you at least set up a nice outside pen for them to live for when they’re chained to the documentation video production farm? I actually am the video and documentation production farm. So I myself will, I’m there,

1:22:28
they get to come out of the basement and go live their life and frolic in the world. And then I will be the one on bread and water chained down there in a dungeon. Like you will see, I’ll be very pale on the videos. I will have very low energy as it progresses, like through, you’ll see. Yeah, I’m gonna be tasked with doing all of that.

1:22:50
So it’s about to get very fun for me in that regard. Are you going to use the 2001 Space Odyssey theme when ACSS3 rolls out? I don’t think so. Can we seamlessly update an existing ACSS? Okay, we talked about that. Will you publish a variable doc? I would really like to drop a ACSS variable for text size,

1:23:07
for example, into classic theme fields that support variable entries. Don’t exactly know what that means. Text size for example into a classic theme field. Like are you talking about like generate or I don’t know what you’re talking about. What is a classic theme field? If you can expand on that Jake I will try to answer it for you. Are AMA’s okay? Could you showcase one or two sections using the color scheme switch? We will do that in a maybe next WDD live. I want to do that more in the 3.0 experience.

1:23:48
Best guesstimate on when 3.0 will be approved for use on production live sites. So public beta, depending on what is found in public beta, here’s the real challenge. We have our own test environments, but there are so many different environments related like what PHP version are you running? What kind of server are you running? Oh, you’re on Lightspeed. Oh, you’re on Nginx. Oh, you’re on this.

1:24:11
You’re on that. And these all interact with the plugin differently and interact with different things that we’ve done inside the dashboard. And there’s no way to know if it’s stable stable until a ton of people install it and start using it in all these different environments. And then people try to do things with the workflow and the framework that we didn’t think that they were going to try to do. And then it’s like, OK, well, all right, we’ll fix that.

1:24:36
And then, you know, there’s a lot of back and forth. So it really just depends. Now, thankfully, thankfully, you know, it’s like the whole framework wasn’t rewritten. So, you know, some of it was, but not all of it was. It should be fairly quick. I would think the public beta should go fairly smoothly, hopefully, fingers crossed. And I don’t know, I would like it to be like 3.0 official, released within like 30 days of public beta being released. That would be like my hope. And hopefully we can hit that. Okay, because again, I’m a user of automatic CSS. I want to use it on production sites as fast as I possibly can.

1:25:20
So I am in the same boat as you. I have all the incentives just like you to get this thing into production.

1:25:26
Let’s see.

1:25:27
I meant by specificity management that some ACSS rules are overridden by Bricks theme CSS, for example. This actually isn’t the case. It’s kind of a little bit of a misnomer. It’s caused by people doing things in global theme styles that they should not be doing there, number one. And then number two, there is some quirkiness with Bricks as there is with all page builders.

1:25:57
But if I go into, let’s see, let’s get out of the duplicate tab here. Let’s go back here. Yes, we’re gonna leave the site Okay, and we’re gonna go into brick settings, all right, here’s one of them right here inline styles versus external files So I’ll just fun fact fun fact If you are trying to set a background color on your website, for example You can put that background color on the body tag or you can put that background color on the HTML tag. Does it really matter which one?

1:26:32
Well, it actually kind of does. If you use a box layout style, you’re going to have to have management of the HTML tag and the body tag separately, which we do in our box layout. But if you’re not doing a box layout, you don’t really have to. It probably would be inconsequential at that point. The problem is, is like Bricks, if you choose inline styles, and I can’t remember because I’m dyslexic, which one is which,

1:26:53
but they put the background, things like the background color on the body tag, and then when you’re external to the HTML, or vice versa. And it’s like, ah, that doesn’t make much sense. Why are you doing that? Why are you doing that? And then, so we make a decision in the framework based on where we’re gonna put it,

1:27:08
but then Bricks is like, ah, well, we just decided to put it over here instead. And then it’s like, ah, why? Why did you do that? And then, and then, and we should do this too, let’s go to giri.co, blog. There are things that, these are all, by the way, all problems, because automatic CSS does not use specificity

1:27:27
unless specificity is needed, okay? Page builders do not follow that principle, which is a big, big, big problem. So I’m gonna go to, oh, I already went to blog. Okay, let’s go to, not this one. This is, oh, it’s automatic CSS, I’m sorry. Automaticcss.com slash blog. I would encourage everybody to read this article.

1:27:50
It doesn’t really apply to you, but I think you should still be aware of it. Minimum page builder requirements for ACSS integration. And if we come down here, I tell page builder developers exactly what they should do.

1:28:05
Okay?

1:28:06
So one, we have to have cleanest code, right? And I give you the example of Elementor, versus Bricks in terms of clean code. Requirement number two, low specificity defaults or no defaults. It’s okay to be opinionated. It’s not okay to be specifically opinionated. Do not put specificity into your opinions

1:28:30
because they are hard to override, right? Or harder to override. Or like anytime you use specificity for an opinion, somebody else has to come along and use specificity also. Now sometimes if you’re adding that specificity at the end of a style sheet or like using the builder or whatever, writing custom CSS, it’s not that big of a deal. But if you’re a framework trying to not use specificity,

1:28:58
your shit gets overridden, right? So things that we’re trying to do get overridden by, frankly, opinions that are not all that great, right? And so they should use no specificity when putting these opinions into the mix. And I tell them exactly how to do this. They have so many options. Use where to eliminate specificity.

1:29:18
Common technique. Use layers. Why is nobody using layers yet? I don’t know, but layers would solve this problem completely. Page builders should absolutely be using layers. With custom properties, right? Because you can use fallbacks. We have the automatic CSS does this.

1:29:34
You’ll see what are effectively dummy variables. So we use a dummy variable that has no value and then it has a fallback of the opinion that we wanted it to have, but because it has a dummy variable in front of it you can override it at any time with no specificity. It’s just, it’s great. And then we have adding classes to elements, obviously there’s another requirement, but I just go into detail on like how page builders can approach this. And so these things where you’re like, well you know ACSS can’t override BRICS in this scenario. It can, there’s there’s a workaround for it, number one.

1:30:06
But number two, it’s because BRICS is too specific with its opinions, and it needs to not be it needs to not do that. There’s no reason for it. And so they need to stop doing that. Now, again, we have workarounds for everything, but it would be nice if we didn’t need the workarounds, right?

1:30:22
Okay.

1:30:22
Is that a Canon or Sony? This is a Canon. This is a Canon. Let’s see. Has the hugely overhauled Generate Blocks Pro 1.7 changed any of your plans with ACSS GB support? Yes. Yes. Generate Blocks is now a, it’s a real player. It’s a real player in the page building game. I stand by this. I stand by this statement. I made it a few weeks ago. I stand by it. Generate is what the block, the native block editor should have been the entire time. So like there’s no reason for the block editor to be as incapable, as poorly constructed and thought out as it is, given that generate literally set the stage. Now the argument will be, well, I mean, that’s still too many inputs for beginners. And then we just get into the actually had a great, well, it’s a good back and forth on Twitter

1:31:23
that I think everybody should read. Talking about the fundamental problem of the pattern library. This is a very interesting thing in Gutenberg, the, the concept of a public pattern library and third-party patterns, yet the block editor itself. So we’re gonna use, we’re gonna have a publicly shareable patterns, okay, which have no maintainability, by the way, no real ability to customize other than what the block editor gives you,

1:31:50
which isn’t much. And then this concept of third-party patterns to create this ecosystem of pattern sharing. But then I was like, but where are the patterns going to be built? Because the editor that you put the patterns into isn’t capable of building the patterns. And they’re like, well, we’ll use custom blocks. Okay, so we’re not going to use the editor, we’re going to put the patterns in the editor, but you can’t build the patterns with the editor.

1:32:17
That’s the situation that we find ourselves in right now. And that’s just absolutely atrocious. And I made it very clear. I was like, look, guys, this pattern library, the block editor, it is all dead on arrival until two or three things happen. Number one, the editor has to be viable enough to create the patterns that you’re sharing

1:32:43
in the first place. The idea that if I want to create publicly shareable patterns or a third party pattern library, that I have to custom code blocks and PHP and react and then I have to have external files that are relied on which they need to be baked into a plug-in. Guys this is not you’re never going to beat Wix you’re never going to beat Squarespace in this regard you’re never going to beat Webflow in this regard you’re never going to kill page builders in this regard you’re

1:33:07
never ever ever this project is DOA until you can use the block editor to create customizable maintainable Patterns without any other languages without any aside from CSS because that’s a core, you know visual language But PHP no React no no VS code. No. No, just say no. No Everything needs to be able to happen here in the block. We need a unified development experience. That’s why Elementor is so popular. That’s why Bricks is so popular. They give you a unified development aside from the little magic areas that they have, which are cute and all, but I believe will be eliminated. Everybody will listen to me and you will start to see magic areas start to disappear. And then we’ll all be

1:33:57
just having lots of fun because nobody likes those. Nobody likes those. Back to generate. Like, I would have no problem whatsoever if native Gutenberg was effectively generate blocks, like, especially now, given the class system that they just put in, which is actually not even just a class system. It’s a selector system. Oh, that’s the next level of thinking that you have to get to. So we’ve all been and I And I, right, I’ll put myself in this bucket as well, calling it a class-first workflow. And majority that’s what it is, but actually if you get into programmatic CSS,

1:34:39
it’s a selector-first workflow. And that’s what Generate has been one of the first page builders, if you want to call it that, to be like, oh no, this isn’t just classes. You can just put in whatever selectors you want. You can’t do that in Bricks. You can’t just put a compound selector into Bricks. You can’t do any of that stuff. You can do that in Generate. So the fact that they have a selector system now, I think variable management just popped

1:35:06
in I saw. Come on, what is the Gutenberg project doing? Generate is showing you the way they’ve just shown you the way it is now a very very capable builder now they went back to using the magic area pattern library thing and they’ve had them the pre they had presets before which you know thankfully the presets are dead okay let’s just just watch this just this watches for some entertain me for a second okay entertain me for a second so So on my blog I write things like, where did it go?

1:35:42
There you go.

1:35:42
Because I saw Breakdance doing them, I saw Generate doing them, I saw these other Divi doing them. Page builder global presets are weak, limited and unnecessary. And then I write a gigantic thesis with explanation and examples and this and that and pros and cons, okay? And then suddenly it’s like,

1:36:05
oh, you start to see the presets concept, start to die off and what comes back in, what comes in to replace it now, the thing that should have been there from the beginning that I promoted from the beginning is a class first workflow, is a selector. Now what I should call now is selector first workflow. Okay, just saying, just saying, right? And now I’m saying the same things about Gutenberg. Guys, this project is DOA until XYZ

1:36:35
happen. Just putting it out there. Now if we start to see XYZ, hey, that’s fantastic. And I don’t even need credit for it. I don’t care about it. I just want the projects to go the direction they need to go for us, for the people who use them. Because it’s not a good experience when these things don’t exist. So it is what it is, right? We all need to keep harping on it and promoting it. And because I want Gutenberg to be usable.

1:37:04
And I don’t understand why it’s not. I mean, I do understand why it’s not, but I also don’t understand why it’s not. I mean, eight years in or seven years in or wherever we’re at. And they just keep telling me, they’re like, oh, you know, I know the pace of development is this and that, and you gotta have hope for the future.

1:37:19
Whose future? Like what, my grandkids? That one where we’re gonna have a selector system when my daughter is 40 and AI’s replaced everything? Come on now, you gotta speed it up a little bit. We gotta prioritize certain things over others. We gotta be in touch, they’re still not in touch. And here’s my biggest thing,

1:37:38
I was actually talking to Mark Szymanski about this in the DMs, okay, because I was talking about the frustration and when I talk to people on Twitter who work on the block editor or who build with blocks or whatever they always are very passionate about their side of the workflow, right? Like no, no, no, no, don’t take my VS code from me, don’t take it from me, we need the VS code, we need the PHP, we need the React. Right? This is kind of their, they’re like, I can see the fear in their eyes.

1:38:08
Right? They want these things to stay safe. You know what? I know about that side of things. I’ve looked into that side of things. I have done work in the, I did a whole video of me trying to work in the block editor. I want the block editor to succeed. I live partially in the block editor.

1:38:29
You know where they don’t live? Not a single one of them, not a single one of them that I’ve ever interacted with, none of them, none of them have spent a single minute as far as I know in Bricks or in Oxygen or in Breakdance or in any other capable page. They don’t know how they work. They don’t know what the features are. They don’t know what they’re capable of, they don’t know the tremendous upside, they don’t know the workflow, they don’t know a lick of

1:38:56
it, but they got all their opinions on how things should be done and all I’m saying is, hey I live in both worlds, I see both sides of it. I’m the only one arguing from both sides. You guys only know this, that’s all you know and that’s all you care to know apparently and you’re telling me how things should be when I’m looking at this thing over here called bricks and oxygen and breakdance or whatever and it is blowing the doors off of what you guys have got going on over here but they’re defending it like to the death as if they know and they don’t they’ve never spent a minute on this side of it they have no idea right I saw my argument is this is why I

1:39:39
get frustrated. How can you possibly argue? How can you possibly argue for your position when you have no idea what the other side has been doing this whole time? You have no idea. So this is just that I can’t value your opinion, because it’s missing half the information. So that’s where we’re at. I would love nothing more than for Gutenberg to succeed, but it’s not going to succeed until they open their eyes and open their ears and really, really start listening

1:40:07
and looking and then painting a bigger picture. Like, let me go back. You are not going to have a publicly available, and this includes third parties too, shareable pattern library until you have isolated patterns that contain their own CSS with dynamic root selectors, the things that Bricks has already done and proven, that’s the only, guys, how would frames exist otherwise?

1:40:33
How would frames exist otherwise? How would it be so customizable? How would you be able to do whatever you want with it? It’s not, it’s only because Bricks offers self-contained patterns, and that we can build those patterns in a capable editor, and the people you can use those patterns in a capable editor.

1:40:50
That’s the only reason that we even have it. And we’re never gonna have it in Gutenberg until they wake up and understand that this is how things are. We are not, you can’t go into PHP and React and VS Code and then try to share patterns with people. What an absolute dumpster fire of a plan. It has to be a unified development and experience. And then, yeah, you bring in the layers,

1:41:16
like partially synced patterns, which is essentially component-based functionality. Do you need a class-first workflow? Yeah, I still think so, absolutely, because not everything is a component. Not everything is a synced pattern. There’s so much that we do that relies on classes. It also relies not just on classes, but on selectors.

1:41:38
The programmatic, like, come on, just like, how are you gonna automatically alternate grid cards, right? Like, image on the left, copy on the right, copy on the right, image on the left. Hopefully I said that, my dyslexic brain said that correctly. Auto-alternating things. Like, you guys have watched me go in

1:41:56
and just write a simple selector and do it with the inf and we’re done and we move on and then it auto-alternates and I can move things around and it’s just absolutely, you can’t do any of that. What am I gonna do? Oh, we build that into the block. What happens if you don’t want it? Well, now we gotta code a toggle switch

1:42:12
and we gotta do this. No, no, no, no, no, no, stop, stop. You’ve gotta be able to do this work. Guys, we have page builders. The tremendous upside of page builders is that we no longer have to use VS Code. We no longer have to write the PHP and the react and whatever else is behind it All we have to do is build the pages and build the patterns

1:42:32
that’s essentially all we care about the CMS and then the ability to build patterns and share those patterns and Customize those patterns that is the problem. We’re attempting to solve now You have to solve that without PHP and react and vs code Page builders have done it and they’ve done it for years. Now please you do it and stop force feeding us this idea that VS Code still has to exist. The PHP and React still have to be in play just to build a simple fucking hero section. That is not an argument that is of any quality. It’s lunacy. That’s absolute lunacy.

1:43:09
That I need VS Code to build a hero section. That’s it. It is what it is and I and the reason they think it’s the case once again is because they don’t know anything about a page building workflow. They are trying to build a page builder from a VS code workflow instead of just looking at the page builders that have made tremendous strides in this regard namely bricks oxygen the breakdances etc and just look at what they’ve like, it’s the blueprint is right there.

1:43:40
But again, they’re gonna argue,

1:43:41
oh, that’s too advanced for the beginners. And I’m like, yeah, so is the PHP and the React, and then, right? There’s an incapable block editor and I know they wanna champion it. They’re like, look at all these people that just love the block editor. Okay, guess what?

1:43:58
And I gotta go in a minute because I got a consulting call. For every person you find that loves the block editor, I’ll find 10 that absolutely hate it. Absolutely hate it, okay? You can teach beginners to use a more advanced block editor. You can’t take an incapable, inferior, handicapped block editor and then get a bunch of people to use it and force feed it down their throat.

1:44:23
That is not the plan. The plan is education. You can also make a capable editor and then streamline it for different editor roles. There’s a lot of options. Having a terrible editor and then just force-feeding it down people’s throats is not the plan of action. That’s not the way we need to go. And that’s unfortunately the way it seems that they are, you know, hell-bent on going. Okay, so there’s my rant for Gutenberg. I think I’ve answered all questions. Let me just go down. We’ll say bye to everybody for a minute.

1:44:52
Justin says, yay, we’re even getting a Gutenberg. Truly a great week. Okay. Yeah, there you go, Amanda. This is a perfect addition to the argument. They’re also not building real world projects. A lot of them are not. And this is actually Jamie Marsland, who is, I wish you would unblock me on Twitter, but he’s starting this Page Builder Wars, and I’ll just give you guys a heads up on this, because I applied to participate, but I’m actually probably going to decline to participate.

1:45:27
We should talk about this for just a second before we go. He’s starting, it’s like a build-off. It’s like a, here’s this guy, and here’s this guy, and they’re gonna use the tool they want, and I’m gonna give them a layout, and then they have 30 minutes to see what they can do and come up with and then everybody’s gonna vote on who won, who did it the best, okay.

1:45:47
If you don’t already see the problem with this. Well, one, I’m curious because, you know, like Brian Cord’s, for example, is in the, I believe in the first one. And so I’m like, what is he gonna do? Is he gonna pull out, is he gonna pull out the VS code? Is he gonna, how far is he gonna get in 30 minutes when he has to build a custom block for something?

1:46:04
I’m really interested in seeing that side of it because we saw, you know, famous Rob who tried to, you know, claim that I don’t know what I’m talking about. Took him four and a half hours to build half of a custom block that didn’t even really work right. What are you guys going to do in 30 minutes, right, with VS Code? Come on now. I am interested to see that. So there’s that side of it. But I just asked, and I was like, can you give me more details, Jamie, on the format of that?

1:46:34
Like, is it literally just like, let’s just race, like, how fast can we get to a visual effect? Or, because like, I was explaining to him, if I use a page builder like Bricks, for example, and I deploy classes, and I deploy best practices and I use tokens. Even if I’m using ACSS, even if I’m using AutoBIM, I’m just not sure that racing to a visual conclusion is the best thing that we should be worried about.

1:47:04
Shouldn’t we be racing to maintainability? Shouldn’t we be like, again, I use the softball analogy because I’ve been coaching softball now and it’s in my head. And I tell the kids this I’m like guys it does matter how fast you can you know hit the ball and then get get back to home plate like that’s where we score the point that’s fantastic but as I told you before you have to touch the bases so Lucy when you cut across the pitchers mound and you didn’t touch any of the bases I understand Lucy you got back here real fast. Okay, Lucy. But we

1:47:39
can’t score that way. Because you didn’t follow the rules. You didn’t touch any of the bases. You didn’t really play softball today, Lucy. That like, that’s kind of the conversation I’ve had to have with people who are like, how fast can you build it? And I’m like, well, you got to check some boxes. And it turns out that when you check certain boxes, it always takes a little bit longer, but you’re checking them for a very important reason. And then we also have to understand this concept

1:48:05
that projects are front loaded. A lot of the work you do when you’re building a maintainable website is done in the initial stage. And as you get deeper into the project, the project goes faster and faster and faster and easier and easier because of the foundation that you’ve built in the beginning, right? If we just race, it’s like, yeah, listen,

1:48:26
style everything at the ID level. Don’t worry about accessibility. Don’t worry about the DOM. Don’t worry about anything else. Just get to the, why are we doing that? What, what, where are we, and what are we finding out there? Are we finding out that Elementor is actually better than Bricks

1:48:40
because somebody did it in Elementor faster than in Bricks? Because in Bricks, and if I was gonna match the Elementor workflow, that would mean that maybe I don’t use the class system in BRICS. So now I’m taking BRICS’ most powerful feature out of the mix, why? To win a race? To win a stupid 30-minute race?

1:48:59
What are we actually doing here? What are we trying to teach? What are we trying to demonstrate? What is the value in doing this other than pure entertainment? Because I will go on there and I will be myself and I will rag on the other person just like I would do in any other competition

1:49:17
as I’m going and I’ll tell jokes and I’ll do whatever. We’ll have fun. But at the end of the day, they’re gonna be like, oh, but Kevin lost. Kevin lost because he only got half of the thing and this guy got the whole thing. But they don’t even, not only do they not even care that I tokenized everything and used BAM on everything

1:49:37
and made it accessible and got the DOM super organized and they don’t care. They don’t even even they don’t even know half those principles, I think, in a lot of cases. So like it’s just what are we what are we trying to accomplish? That’s what I’m that’s what I’m wondering. So I just don’t like the format. I don’t like the I don’t like the goal. I don’t like what they’re going to be doing.

1:49:57
But if you just want to watch for pure entertainment, I mean, that would be, I guess, a viable thing. That’s why, you know, watch football, watch softball, whatever, I just want to be entertained. We don’t really have a goal. But I think when we’re, you know, legitimately comparing workflows and a professional nature, like we should care about the things that matter.

1:50:16
And that should be what we’re racing towards. Like with ACSS, the mission of ACSS and the mission of page builders that I use, like Bricks and Oxygen, how can we get to the finish line faster without cutting corners? That’s the thing. You can’t cut corners. So can you be, can you train to be faster? Yes. Can you wear faster shoes? Can you, whatever, whatever it may be. Now in page builder land, we have a bunch of things. Like, can we wrap the bars automatically? Can we wrap the calcs automatically? Can we add context menus? Can we, now I’m going blazing fast and I’m not cutting any corners.

1:50:53
Now with that said, I’m gonna watch the first one. I’m gonna watch the first one, guys. I’m gonna have my eye on this first challenge. Because I think, I think there is a lane, there is a lane where I can still beat them easily and make it all maintainable while I beat them. I wanna see the first challenge. I wanna see how it plays out.

1:51:18
But I think that’s, and so if that’s the case, I’m like, oh, hold on, hold on, hold on. I see what’s going on here. Okay, I think I can come in with, if they’ll allow me, they’ll allow me to use audit. He said, you can use any page builder you want. Now, can I bring ACSS into the mix? Can I bring AutoBIM?

1:51:34
Can I bring, okay, well, maybe, maybe I can just still beat them and check all the boxes that they didn’t check. I mean wouldn’t that be? That would be that would be fun So that might be that might be a thing. So we’ll see All right, I got to get out of here I do have a consultant call I thank everybody for showing up tomorrow Mark your calendars same time same place 11 a.m We will reveal automatic CSS 3.0. We will take a look surface level. How does it work? And then we’ll talk about some of the future and

1:52:07
Then I’ll tell you where you can sign up for ACS as 101 and then how you can get the public beta Into your hands. Alright. Love you guys. I will see you tomorrow. Get some sleep get some work done and Into your hands. Alright. Love you guys. I will see you tomorrow. Get some sleep get some work done and Back here bright and early Cheers