ACSS 3.0: First Look!

0:00:00
What an absolute party we are having this morning. What is wrong with this mic? Okay, I think we’re good. It’s like hanging on by a thread. Man it is good to see everybody. This is going to be fun. This is going to be fun. All right, let’s say hi to some people.

0:00:20
We got Maya in the house. Case, hey, I just had a talk with Case this morning. I’ve been calling this man, Cease. I’ve been calling this man Cease for like months, okay? And he was like, by the way, by the way, by the way, it’s pronounced Case. So I promised him no more Cease. We will call him Case.

0:00:39
We will get this correct. Maddie Eastwood in the house. Good to see you, Maddie. Good to see you, Andre, Eric, Nico, Paul, Ross. Manny is here. Authority, Pilot. Oh, we got a lot of new people. Daniel, Jamie Lynn Ross. Good to see you. Yes. Yes. Yes, the party has started This is fantastic. Don says hello from Southwest, Florida. You guys know I am in love with Southwest, Florida

0:01:02
The Hunzi in the house All right, Dave is here. Good to see you Dave boy Yeah, Ceases Pronounced Case, yeah, exactly. Hey, it’s an easy, easy mistake to make. Darwin, what’s up Darwin? First of all, what’s amazing about this is, and I don’t wear the numbers, where are we at here? Okay, 417, we’re off to a good start.

0:01:26
Some of these faces, guys, some of these faces that I’m seeing in the chat, they’ve been here since day, it feels like day one of the YouTube channel day one of the inner circle day one of automatic CSS Um, you know when I say this community is is the strongest community that I know of it’s not It’s not an understatement right like you can see the persistence of the the people in this community Uh, it’s just I see the same faces over and over and over again for months and months and years and years now and it’s just absolutely fantastic. They’re all still here following along using the tools, everything that we’re working on. I think it’s a testament in itself. The first thing I want to do is I want to thank all of our alpha testers.

0:02:18
So as you guys probably know we’ve been in a private alpha phase. What you’re going to see today is still the alpha version of ACSS 3.0. There very well could be a bug here or there. This is not a demonstration of perfect software. This is a demonstration of where we are currently at with Automatic CSS 3.0. It is very, very, very close to being into the public beta stage. There’s a few more things that we have to refine and fix up, and then it will be ready for public beta.

0:02:53
One of the major things that I’m testing in order to say, okay, let’s move forward with public beta is the upgrade pathway for existing websites. Okay, we’re going to see a lot of new things today. We’re going to see some changed things today. And I just want to make it abundantly clear and you should already know this by default because this is not a tool where I just built a tool for the market or something. Everybody knows this tool was built for me initially and then it was brought to the market, but it’s still built for me, right?

0:03:26
And people like me, all of us on the same workflow, the same path, the same wavelength of thinking. I use the tool on every single project. I use the tool on client projects. I use the tool every single day of my life. So, you know, just like you have existing websites, I have existing websites. We have to be able to upgrade those existing websites to 3.0 without any issues whatsoever. I don’t want to have to go back and fix things, change things,

0:03:55
tweak things. You need to be able to hit upgrade and then you need to move on with your life. That’s it. And so that’s, and we’re almost there. That’s the pathways that we’re currently testing. And once that’s rock solid, then it goes to public beta and we’re moving forward. Okay, so thank you to the alpha testers. If you saw the alpha one version of ACSS, I mean, it went through many UI iterations just during the alpha phase. We went through many UI iterations before the alpha community,

0:04:28
a lot of UI updates were made, some UX stuff was added as well. They’ve been very instrumental. So in the chat, go ahead and give them a big round of applause to our alpha group, which has been absolutely fantastic. The second thing that I want to do is I want to thank obviously the team. So I’m going to go up and I’m going to pull this page up.

0:04:51
One thing that I just talked about a minute ago that’s just insanely valuable is the community around Automatic CSS and the inner circle and all of that. Obviously, the most important thing besides that, I don’t know, they’re probably on the same page, right? Equally as important is the team behind the product. And just like I said a minute ago, when you look at this community and the people who are active in the chat, being here for years, okay,

0:05:21
the same is true of this team. Everybody you’re looking at, is like an initial hire for that position. This is just the loyalty and the persistence and the dedication is unmatched and unparalleled. And we have a fantastic team. It’s not, you know, contrary, you see me all the time. You see my face all the time.

0:05:46
You hear my voice all the time. There’s a lot of people behind the scenes doing really, really, really important work. So special thanks, obviously, to Matteo, who’s the lead developer of Automatic CSS. More so now, really, in an overseeing the project role, still doing a lot of technical stuff on the back end, but being that person to really like everything

0:06:09
runs through Mateo at this point. Special thanks to Tommy for a lot of help on the UI for this and bringing Tommy in with, not saying, hey, Tommy, design this thing from the ground up, right? And I said in a post the other day I’m like if there’s something that you don’t like about the UI in 3.0 it’s probably my fault okay so I started the initial concept of here’s this is what I have in my head of how this thing should

0:06:38
look and behave and whatever and then I did the initial wireframes I even did the initial you know 1.0 I’m the I I was Bev for a while I just I was just was like I’ll just Bev this out real quick and you guys know if you’ve been here what that means. And then I handed it over to Tommy and I’m like, hey, you need to fix this shit up right here. And then so that’s where we’re at. But I think it all came together. I think it’s really, really fantastic.

0:07:04
And it’s just a good experience. But thank you a lot to Tommy. You guys can give him a round of applause in the chat as well. Wajih has been instrumental on this project. He’s now essentially the lead developer of everything related to the dashboard. So all the magic that you’re gonna see today,

0:07:23
most of that work has been done by Wajih. Christoph also consulting on all of that. And then Christoph handling lots of the stuff that you see with the VAR expansion, calc expansion, builder enhancements, all of that kind of stuff. There’s some really special stuff you’re going to see today that came from Christoph as well and Christoph’s team as

0:07:44
well. You know there’s not just Christoph there. Then we have Andrea. Andrea handling the forms side of automatic CSS. So if you’re involved in like if you use automatic CSS for WS form and fluent forms and all of that Andrea is handling a lot of that. Of course, Andrea handles a lot of our website stuff, our server stuff, and just instrumental, absolutely instrumental to this team. Nuno came on very recently,

0:08:13
and I’ll tell you guys, like the commitment to just making sure everybody’s as happy as we can possibly get them, okay? Here’s how Nuno came on to the team. We diverted, I diverted like 95% of our resources to automatic CSS 3.0 for months, for months, right? And so obviously there were some frames, bugs, frames, issues, and there’s some complaints

0:08:39
in the community like, hey, you know, we’re excited about ACSS 3.0, but like I need this modal to work. You know, I need this, like this accordion needs to work on my site, right? They still worked. But there were some bugs and things like that. And admittedly, like, you know,

0:08:55
initially, Wajih was the frames guy. Like he built the frames components, but he is 100% dedicated to 3.0. And so you can’t do both, you can’t do both. And so Nuno came in and essentially just took over, like and say, hey, I’ll fix up the frames, I’ll get the bugs fixed, I’ll get it out. And he’s actually starting development on new frames components for us.

0:09:19
He’s done an absolutely fantastic job. And then you have Tobias and Tony and Alicia handling all the support side of everything and just doing a fantastic job in the community helping out everybody as much as possible. So, this team, nothing that we do at Automatic CSS or Frames or what I do at the Inner Circle, even with the trainings, all of this is really powered by this team. So it’s just really fantastic.

0:09:46
I want to take a minute to recognize them before we kick off here. All right, we did a live stream yesterday. I think it went about two hours. And I did a lot of the history of Automatic CSS. I did how did we get to where we were now or were with 2.8? I looked at some fundamental challenges that we faced. A lot of the first that we’ve brought to the table.

0:10:09
I’m not gonna rehash all of that in this live stream. Obviously, that’s why we dedicated yesterday to that. But if you wanna know more of the background behind all of that, I would highly recommend you go watch that live stream if you haven’t already. I am going to rehash three things. I’m going to rehash the three big challenges that Automatic CSS 2.8 still faced,

0:10:31
even as good as it is, as good as it is, it still faced three major challenges. And honestly, these are three challenges that I think every builder, every page builder, WordPress, Gutenberg, a lot of it, they all face this, okay? And so we’re going to talk about those, and then we’re going to get right into 3.0 How many we got? Okay, we’re doing fantastic. I didn’t expect over 600 people, but it’s good

0:10:58
Okay, oh

0:11:00
Before I forget

0:11:02
ACSS 101 so Obviously a lot of people know me for page building 101 at this point, especially a lot of new people people rescued from Elementor and Divi, right? And these places. And so if you liked PageBuilding 101 and you found tremendous value in it, Automatic CSS 101 is coming on April 22nd. That’s when we are starting. I am going to do it exactly how I did PageBuilding 101. I have an outline in my head, well it’s on it’s technically written down, I have an outline written down and if you remember back to page building 101 I started with an outline and then I just like we build the course together we just I record

0:11:48
it’s like on a weekly basis or even every other week it’s whenever I can get to it but you know obviously we try to hustle and get them out but it’s not like I’m just going to do this whole thing and then release it to you it’s we’re going to do it as we go because my brain at least, sometimes I map things out and I’m like, I think this would be the next best lesson. I think this would be the next best lesson. But then when I’ve done a lesson,

0:12:09
I’m like, no, no, no, no, no, we gotta reorder this. It’s gotta be more logical, okay? And I make adjustments on the fly and we kind of just do the course together. And so that’s gonna start on April 22nd. There is a link in the description below for going to get registered for that.

0:12:26
It is 100% free. It is ACSS 101. You would think, hey, maybe I need a license for that. I think you should. I think you should get all in and you should do it. You just, you see how many people are here, okay, for a CSS tool, right? There’s a reason for that.

0:12:44
There’s a reason for that. Get a license, do ACSS 101. But if you’re like, mm, no, I think you need to convince me first. I think I need to do a little bit of this course before I commit That’s fine, too We’re gonna have a sandbox environment that you can deploy and you can learn right alongside even without an ACSS license So that’s going to be good as well. I would say, you know, maybe don’t go right now

0:13:07
You might miss some things if you go try to register right now, but after the stream go register I’ll remind you again at the end. The link is in the description. It’s on the website, okay? You can probably see it if you go to the homepage. I don’t know if I dismissed it or not. I think I already dismissed the notice, but there’s a little notice up there probably to tell you about the course.

0:13:25
All right, so what you’re about to see in this live stream is what I kind of in my head refer to as the new 1.0. This is like a fresh start for automatic CSS. Everything, not the framework, a lot of the framework has been optimized, made more efficient, et cetera, et cetera, but the dashboard that you are gonna see is it’s 100% rewrite from the ground up,

0:13:50
every single ounce of it, okay? And it opens the door for a lot of possibilities. And so I’m considering this in my mind to be the new 1.0. So like what you’re about to see is the surface, it’s the beginning. It’s not like the, oh, this is the mature version of this concept or this experience. No, this is the start of this experience. And I think, you know, hopefully what you’re about to see

0:14:14
is gonna be more than you expected, but at the same time, you need to understand that it’s not anywhere near where it’s eventually gonna be. There’s so much that I know that we can do now and that I have planned and I, you know, just let’s watch it and see it within that context okay. All right I’m gonna go into 2.8 and you guys so you guys recognize

0:14:34
this dashboard and the first problem I did three problems yesterday with the current 2.8 experience. The first problem is the magic area workflow this concept of a dashboard now nobody had a dashboard until we had a dashboard and it was fantastic and it’s been fantastic, but you evolve in your thinking you evolve into what’s possible. You evolve into how does this really need to work right? We have theories and then we have experience and then we know oh now there’s new possibilities and then we pursue those and we see how they work out.

0:15:08
And one of these things that I’ve been like you know harping on, harping on it with Bricks, harping on it with Gutenberg, harping on it with WordPress in general, harping on it in a lot of different ways is this concept of the magic area. And if you weren’t here on the live stream yesterday or my previous live streams, the idea that we have a page building workflow. I’m building pages of a site.

0:15:29
And then the minute I need to make maybe global styling changes, or I have to build a template, or I have to build a component or whatever. This idea that we have to go to a special area. It’s like, it’s an area, why couldn’t I do this in the area I was just in? We don’t know.

0:15:46
It’s because this area over here apparently is where magic happens. And you go to like Bricks templates and you do stuff here or with ACSS you do this or in Generate you go to this special area to make your presets and stuff. And these are all magic areas. And what magic areas do is they pull you out of the page building workflow they introduce tremendous inefficiency and

0:16:09
then because this is a magic area that is a nice dashboard with a lot of inputs and things like this and I can alter right there’s really two other problems here okay we’ll talk about them in just a second okay but what I actually know let’s talk about them now let’s just let’s just run through the three problems and then we’ll see the solutions to the problems, okay? So the second thing is obviously here there’s no visibility on what I’m doing. I’ve lost visibility unless I go to some dual tab layout, dual screen layout, which not everybody has, right? It’s still annoying. It’s like I cannot see what’s going on here.

0:16:43
And I actually peeked in before the stream started and I saw somebody say, I really hope – let me go to the buttons area, I really hope they put a visual of a button in here so I can see it changing when I’m when I’m making the adjustments and that might be the thing you would think to go to right but I guarantee it’s going to be it’s going to be much better than that but you lack visibility and because you lack visibility the other thing that you might not realize well if you if you’re a user you realize it is you have to commit your changes in order to see them. If I want to change my typography from 20, the base size from 20 to 24 and I deeply apologize.

0:17:23
There’s so many people here that have never used automatic CSS. Maybe you never even use bricks or oxygen or any of these things. And some of this stuff is just going to be like, I can’t explain it all to you in this live stream. Obviously, we’re here for a very specific reason, but I feel bad about that, because I’m like, it’s gonna be hard for you to follow along on some of this stuff.

0:17:43
But if I change this from 20 to 24, I have to save that change, and then go reload the front end and see what happened. And then if I don’t like it, I gotta come back and do it again. And then you get to this thing of like, save and commit and refresh and this, and you’re just back and forth all the time.

0:17:59
This is not an efficient workflow. This is not a proper page building workflow, right? This is just slowing everybody down. So we have to get rid of that. We have to be able to see things without committing them. And then problem number three, which is just a huge problem for WordPress in general, is the lack of global CSS.

0:18:18
Like where am I gonna put this? The idea that I’m gonna put this in a child theme? Absolutely not. Like this, I mean, this editor, there’s nothing wrong with the child theme, but this editor right here? Absolutely not. The customizer on the front end? Absolutely not. That glorified text area input that they insist is usable within FSE? Absolutely not. Okay?

0:18:40
In Brics, where am I going? Brics settings, custom code, this box, this glorified text area input? Absolutely not. And so what have we had to do in the past? We’ve had to install things like WP CodeBox and give us that functionality. And then those gave us some superpowers like the ability to write SAS and not just CSS,

0:19:03
which is phenomenal and great. So that was a problem I identified. It’s like, no, no, no, no, no, we have to solve this. And in fact, with the new vision of what Automatic CSS 3.0 is I think we can absolutely we can absolutely solve that okay so I’m going to close out 2.8 this is a 3.0 install shout out to insta WP by the way I’ve been I’m about to do a video on why I’ve converted almost all dev work to insta WP and it’s gonna it’s I think the title of it was, you know, why I switched to InstaWP, but almost didn’t.

0:19:42
Okay, because I’m not like, look, I’m now an affiliate for InstaWP. I signed up for their affiliate program. Signed up for it on day one, actually. And you can look at in my Twitter DMs, okay, because I’ve been DMing back and forth with the CEO of InstaWP. And, you know, we talked about getting on a stream. We talked about this. We talked about that and I think it’s been it’s been

0:20:06
Six months or so something like that since I first tried it, okay? Where I think a lot of people would just come out you a lot of content creators come out just hey look at this new Awesome thing it’s the WP you should go sign up for it. You should use it well the problem is when I used it There were problems, and I was like mmm I can’t in good conscience recommend this the way that it is right now. Like I’m running into too many issues and that’s not a problem. That’s actually to be expected of, I mean this is highly technical software it seems. What I look for is responsiveness from the leadership and I got to tell you

0:20:44
like the InstaWP leadership has been insanely responsive and they’ve fixed addressed almost everything that I’ve brought to them over the last six months. And now the experience is almost, almost flawless, but it’s to the point where it’s like, man, okay, I’m really, really, really seeing tremendous value here. So I’m going to do a whole video on, on that, how I’ve got everything set up and yada, yada, yada. But I do really, really, really appreciate their attentiveness,

0:21:10
their responsiveness. And you know, just putting actual fixes into place. It’s not like oh go go you know submit that to the to the you know feature request area so that it can die a slow death for the next year. Like no, got serious about it and went immediately into dev team and started fixing stuff. And it’s not just me. Mateo’s in contact with them saying hey we need some stuff on the github side of things and they’ve been working on that. Just really, really, really fantastic experience. So that is what I really look for

0:21:43
because I can have tremendous confidence in a product like that. When you have tremendous confidence in the leadership, you know the product has no hope but to be really, really, really good, right? Okay, so I am on the front end of this website. There are two workflows that I find very, very important. There is the page building workflow, which we know.

0:22:11
So if I’m in Bricks and I’m building something, and you guys, we talked about this on the live stream yesterday, with automatic CSS, one of the huge advantages of ACSS is that you don’t have to go through this lengthy setup process. You can literally install it and then just go start building things.

0:22:29
And as you build, you’re getting to work, right? You can make adjustments to how the framework is behaving for you during that workflow. And now with the magic area, you had to swap back and forth, okay? And so the idea was we need to be able to interact with the framework inside of the page building workflow. I think everybody has seen this coming, alright? If you’ve been paying any sort of attention, you’ve seen this coming. But there is a secondary workflow. And the secondary workflow is much like

0:23:00
what you’re seeing here, where I’ve done a lot of setup, actually. I’ve built the site that I wanted to build. And this was built, by the way, in like 15 minutes with frames. So this is all, everything you see here is a frame. This is a one color website. I slapped in some half decent photography.

0:23:20
These aren’t even the same people, okay? This is a wedding of many different people. So it’s like, look, I just raced to like, yeah, let’s just throw something together. But it’s still, it’s super clean, right? This is the frames slider right here with a little timeline action. We’ve got a lot of stuff going on.

0:23:36
It looks decent, right? Looks nice and clean one color and what look what you can do with one color and some shades right one color and some shades very simple very clean this hero section right here is using content grid by the way that’s going to come into a very important play in just a minute as we’re going to see but there is a workflow and I’m sure you’re familiar with this where you’re like you know you feel like you’re kind of wrapping stuff up but you want to make some last-minute adjustments like you’re looking on the

0:24:02
front end at your website like let’s pull it up, let’s see what everybody else is going to see. And then you’re like, ah, gotta do some adjustments and stuff, right? And then now what? What are you gonna do? You got, we gotta go back to the page builder? We gotta go back to some magic area, something like that?

0:24:20
No, you shouldn’t have to do that. You shouldn’t have to do that. So what you can do now is you can click this button right here, this little link, automatic CSS. There’s also a keyboard shortcut. The default is shift command O, okay? I’m gonna hit that on my keyboard. And you now have a real-time dashboard on the front end,

0:24:37
but you also have a real-time dashboard in the builder, okay? This and this experience that you’re gonna watch works both places exactly the same, okay? It’s a seamless experience. Now, we’re gonna go through this dashboard here, all right? I’m just gonna take you through it. Now this is not really the magic, okay? Nothing you’re seeing here is like the magic

0:24:58
of Automatic CSS 3.0. But this is the workflow of, no, no, no, no, no, no. There’s no more back end. This is a real-time dashboard. It’s where you need it when you need it, that’s it. If I need it on the front end, it’s there. If I need it in the builder it’s there. By the way it doesn’t matter if it’s bricks, it doesn’t matter if it’s oxygen, it doesn’t

0:25:19
matter if it’s Gutenberg, it doesn’t matter, it doesn’t matter. It’s where you need it when you need it. And you can call it with a keyboard shortcut, you can make it go away with a keyboard shortcut. Now before we get deeper into this I want to say because this is not in alpha 4, this is not, but it’s very close we’re already playing with it and experimenting with it. But this is going to be dockable to any side. So the left side, the right side, it’s going to be height adjustable.

0:25:45
It’s going to be free floating if you want it to free float. It’s going to be dockable in a way that pushes the page out of the way, so you can still see the entire page. There’s going to be many, many different options for how this displays. There’s also going to be a center, what we may call a focus display,

0:26:01
where you can just focus, the dashboard is like most of the screen wherever you need it to be and so you can use any of these modes at any time and conveniently switch between them but the key point here is that there has never been a faster workflow there is now you don’t even have to leave bricks you don’t have to leave Gutenberg you have to leave wherever you’re at to manage the global styles of your website and then far beyond that as well. Okay, so let’s just take a little trip and see what we’re going to get ourselves into

0:26:32
here. You’re going to be familiar with a lot of this stuff. A lot of this stuff, some of this stuff is in different areas, been moved around a little bit for efficiency, but we’re just going to go through again. I apologize to people who are new to automatic CSS. Oh, they’re asking to move my head. Okay, hang on, hang on. I got, Andrea is on deck going, hey, hey, hey, get out the way.

0:26:53
Okay, let’s see how we, okay, I may have to remember to, Andrea, be ready to text me again, okay? Be ready, because if I have to move my head again, then, you know, text me, message me, let me know. Okay, let’s just take a little trip through the dashboard. So, website dimensions is your content width of your website, right?

0:27:15
And we’ll see this stuff in action in just a minute. We’ll look at it more, but I’m not gonna deep dive all this stuff. We would be here for days, okay? All of your breakpoint management is right here. The ability to add extra breakpoints. You’ve got all of your header height stuff, your offset content automatically.

0:27:30
Content grid has been moved to the layout tab. And this used to be called dimensions or something. I can’t remember, but it’s layout now. Because content grid is a layout feature of Automatic CSS, which you’ll see in just a minute, okay? We will deep dive some of this stuff. Box layout option for your website. Now we’re gonna come out,

0:27:51
we’re gonna go to our color palette. A lot of people were super excited about this. This was one of the weakest areas of Automatic CSS 2.8 and prior. So now all of your color management happens right here. We have primary, secondary, tertiary. You can see this is a one color website, really a two color. So primary and neutral are doing all of the work on this.

0:28:11
Now how is primary doing all of the work? It looks like you’re looking at different colors here. It’s because of our shade system, right? So if I open this now, you have all of your shades here to click through and manage, right? You don’t have to scroll for miles, right? You no longer have to scroll from the top all the way to Narnia, all right, to manage your colors. That’s fantastic, isn’t it?

0:28:32
I think so. You can put your hex codes in, you can put your HSL values in. You have your alternate color here, the ability to activate this alternate color if you’re doing a multicolor site or multi-scheme site. If I hit alternate color, it’s just gonna add it right to this area that I’m in right now,

0:28:49
and I can just swap back and forth between primary and alt. And then what’s really great about this, if I change my alt here, and I close this, I’m gonna get a bird’s eye view of both now, okay? So you can see your alternate and your main side by side, just bird’s eye view in the panel, okay?

0:29:10
Now if I open this up, I can manage both, or I can click on, notice I click on the swatch, it’s just gonna take me to that tab. So this is a really, really greatly improved color management area, I feel. Notice I turned off the alt

0:29:26
and so now you don’t see the alt swatch anymore. So it’s alerting you, the bird’s eye view, you can see which ones have an alt, which ones don’t have an alt. As you know, the color scheme in Automatic CSS is 100% customizable. It is not an auto color scheme. It is not a algorithm based color scheme.

0:29:42
It is a you can tweak every instance of the alternate scheme that you want to. Zero limitation, zero automation that you don’t have control over. Okay, very powerful. Our semantic colors now behave just like regular colors. Okay, so you have all the transparencies, all the shades to go with your semantic colors.

0:30:04
You also have buttons associated with all of these now as well, which you did not have before. We’ll take a look at that more in a minute. I’m going to leave those off for right now. And then your color scheme management down below. Here is something we’ve introduced actually in 2.8 that no other framework has, no other anybody has that I’ve ever seen. And that is programmatic color scheme protection, the ability to lock specific selectors and even compound

0:30:29
selectors to a specific scheme so that when people switch those areas do not switch, which is very important on getting a multi-scheme site dialed in. There’s going to be a whole tutorial on this. It is as easy as butter. I know it sounds like, man that sounds real complicated Kevin. No, it’s like as easy as it gets for color scheme management. And again, this is just really, really, really powerful stuff. Okay, let’s get out of color palette. Let’s go into typography.

0:30:56
You remember you have to scroll miles on this screen too, right? There were so many accordions and all that stuff. So now we have the ability to manage our headings, your base sizes, your type scales, all of your independent heading levels, your color, your height, your line length, your overrides for all of these, all of the same area.

0:31:13
If you want to switch over to managing text you can do that as well. You will notice right here VARs do not exist in this dashboard. They are all automatically stripped. You don’t have to type them. You don’t have to type anything with regard to calc. You can just put the calculation. You can just put the stems of the VARs and everything will work. There’s no, you don’t even need the auto expansion and all of that. It’s literally just write the stem, write a calc string, it’s all gonna handle itself automatically.

0:31:43
So it’s a lot less typing for you to have to do. Under the options, you can manage your root font size, automatically balance your headings and text and things like that. Text Wrap Pretty is at 60% support. We use Text Wrap Balance right now. We will be converting to Text Wrap Pretty

0:31:59
once it’s like 80%, 90%. So that’s right around the corner be ready for that I’m super excited about that. In terms of our spacing you’ve got your standard spacing here with your type scales you’ve got your section spacing you’ve got your and there’s your gutter right there left and right okay your contextual spacing very important your automatic spacing and smart spacing which has been greatly expanded and we’re going to take a look like the what smart spacing can do now is absolutely phenomenal

0:32:29
We’ll take a look that more like deep dive in just a minute, okay, but we’re gonna keep going for right now Let’s take a look at our buttons and links area So we’ve got our global button styling all of your but this is this styling affects all buttons, okay? And then we have the button styles which are new. Okay. We used to have solid and outline. You now have a dark button style for every color, a light button style for every color, and you have dark and light outline styles as well. Uh,

0:33:00
as far as I know,

0:33:01
this doesn’t exist in any other framework and it’s something that I discussed with Tommy. Tommy brought this to my attention. It was like, Hey, I mean, if we use like a primary color background, you obviously can’t put a primary button on there and sometimes you know white black that’s

0:33:16
that’s too generic like we want a themed button that’s just darker or lighter and we want full control over that well you have that now you have that now and if this looks complex you’re like man that’s a lot of options okay that’s no problem we go to primary we can turn off the light dark variants if you don’t want the light dark variants you can turn them off you could turn off the outline variants you can turn off all buttons, or you can turn off individual buttons. Notice that there are two buttons options here,

0:33:43
primary and secondary. That is the default, because that covers 99% of websites. But there is a button for every single color on this website, and all I have to do is turn it on, and then I can just say, I want those two,

0:33:54
and when I hop back over, look what I have. I have tertiary and all of the options, and I can now customize that, and I can hit save, and those buttons are now instantly available for me. Notice you’re only seeing the color styling here. Why is that? Because the global styling controls everything else. All of your buttons automatically all are uniform and look perfect across the board because of how

0:34:18
these are constructed. Okay link management here you have your link styles obviously you know very oh well we added transition now okay we’ll talk about that in just a second. So this is using the global transition style. And then we have rules where we can exclude that link styling, that default link styling from areas like maybe your header or your footer or what have you. Okay, let’s hop out of here

0:34:41
and let’s look at backgrounds and text. This is an area where, again, we’re thinking about abstracting away complexity into simplicity. And so the idea that you need to call up specific background, like I want BG primary or BG secondary or BG accent or BG this or BG that. No, no, no. I just want a dark background or I want a ultra dark background or

0:35:02
a light background or an ultra light background. And then these are assigned colors and they can be assigned any colors. Okay, and this makes retheming a site very easy. This makes and very safe. This makes building a site very efficient and safe and easy. It’s really, really good. This text assignments concept, I got to do a whole video on it. Automatic color relationships. When I, you’re going to see in a minute when I’m in the builder and I switched this to a

0:35:26
dark background, the text goes, Oh, well, I mean, that’s a dark background. We can’t be dark anymore. We gotta be light now. And it just does that automatically. That’s controlled by these automatic color relationships. And you program in, hey, when I use the ultra dark background, this is what I want the light text to be. And that’s in your full control. Again, tremendous efficiency.

0:35:48
It’s going to do the same thing. That’s in its infancy, by the way. It’s going to do the same thing to links. It’s going to do the same thing to buttons in dark sections. So you just don’t have to touch things anymore. And if you’ve seen my workflow with contextual menus and just right clicking things and just like the efficiency is absolutely unmatched, right?

0:36:06
All right, let’s get out of there.

0:36:07
Let’s go into borders and dividers, a brand new feature set in ACSS 3.0. You have the ability to set a global border radius now, no more radius sizes because sites typically just use a radius, okay? And so we’re gonna call that radius from right here. If you want the additional radius sizes, you can add them in right here.

0:36:29
But I also have the ability to basically design a border style, like a primary border style for this website because borders tend to be those things that you can also just use repeatedly throughout a website. You know, you need consistency. It’s not like you’re using a five pixel solid border over here and a two pixel dash border over here. If you’re doing those kinds of things,

0:36:51
I mean, your site may look a little janky, you know what I’m saying? So like consistency is good. And these primary styles for things like borders and radius and dividers now, the divide, I gotta do a whole video on the divider system. The divider system is just, it’s just mwah, okay? All right, we’ll get there, we’ll get there.

0:37:08
We don’t wanna get too deep in the woods. Is somebody, are we good, Andrea? Because I hear my, what is going off? My Discord, I think is going off. Okay. Oh, is that what’s going on?

0:37:21
Oh, okay, it’s my Discord.

0:37:22
I’m sorry, quit. Okay. I was like, yeah, what is going on? All right. Ah, mute or close this. I think they were telling me to mute or close Discord in the discord, which made those notifications even worse.

0:37:42
But Andrea texted me. Okay, I think the discord situation is resolved now. Apologies, God, there’s so many things. There’s so many things to keep track of. Okay, so additional styling, accessibility stuff. Ah, look at this. What people asked for, they begged for this for so long. Global transition style, right?

0:38:02
You now have control over the timing function, duration, delay, and then you build your global transition right here. These boxes are draggable. You can make them as big as you want or as little as you want. And I know if you’re not familiar with CSS, it’s a little bit hard to read, but there’s going to be documentation on all of this. But this is why, you know, when I go to different things

0:38:22
that transition, we can get these global transitions all consistent. And I don’t have to set them. Like when I had a link, oh, gotta add the transition. Oh, when I had a button, oh, gotta add the transition. Oh, gotta go. Like you’re always just over and over and over adding. Why? Why?

0:38:36
Let’s just make a global transition style. Now you can always override it, right? It’s not like you’re limited to that, but it’s just there because it’s a base thing that you probably need. Scroll offsets, sticky styling, box shadows, custom box shadows yada yada yada yada yada selection styling columns okay we can kind of rush through this forms okay I’m not going to get dive into this this

0:38:58
is a gigantic area of automatic CSS but what you’re about to witness in just a second because I thought we haven’t even looked at the magic yet not none of the magic has happened yet okay none of the magic has happened but when we get to the magic I want you to because there is no form on this page there’s no form on this page so I want you to just remember remember what you see it’s like oh oh oh oh oh you could oh you could you could do that with forms too you could you could do that all that with forms too yes yes WS form fluent form bricks forms yada yada we’re gonna keep building right but what you’re gonna when you get to that when we get to the magic okay

0:39:35
just keep in mind that works with forms also. Okay, all right, we’ll keep going. Let’s get out of here. Global CSS, actually global, you see, well, you see it right there. Global SAS is, we’ll take a look at that in just a second. Lot of goodies in here. There is a lot, this is a very good area. You’re gonna like this area a lot.

0:39:55
Let’s open options. Here’s all your utility classes that you can turn off, all of the sets if you’re not going to use them. Pro mode obviously can be activated as well, but you can granularly just say I’m not going to use that, that, that, that, that, that, that, that, that, and good. Okay, done. Builder enhancements. Guys, or you know Gutenberg, right? And we’ve added some new stuff to Gutenberg. I can’t show it to you in this video because it’s a little technical and there’s too much to look at there, but phenomenal control over how the editor behaves in Gutenberg that fixes a lot of stuff that you know just shouldn’t have been the case initially. But there’s all your Gutenberg options, accessibility, other plug-in settings, okay all this is very

0:40:38
standard stuff. We’re going to get to the magic in just a second. But think about this right? Have you ever, or frames, look at this, have you ever added a frame that has like a modal or like a an accordion and you don’t have the accordion turned on you don’t have the modal turned on you’re like ah gotta go back to the magic area gotta turn on the thing gotta save it gotta go back and then reload and the da da da da no no no like all of your components are right here to be able to turn on and off whether we’re in the builder or on the front end or again doesn’t matter it’s a real-time dashboard okay it’s a real-time dashboard um all right before we get to the magic, let me stop and look at the chat here.

0:41:16
We just need to see. Oh yeah, the deprecated area. We can look at that just a second. Okay, so you’ve got your deprecated colors, action and shade, some deprecated features here. They’re easy to turn on if you need them. Okay, that’s all nice and easy. By the way, I do want to say,

0:41:30
so action is a deprecated color now. We’re going to have a whole write up on this and we’re going to have a whole UI colors lesson tutorial, all of that. But if you’re like, no, no, no, no, no, no, first of all, if you’re already using Action on a site, it will be activated by default. It will be exactly as you left it on your previous sites.

0:41:49
Nothing will break, nothing will need to be migrated, nothing, it’s just, you just upgrade. And it knows, it just sees, oh, this guy, this gentleman right here, this fine young lady right here had Action installed on her website, we probably need to keep that activated. That’s all it’s gonna do, okay? And it’s gonna be nice and seamless.

0:42:09
And the key here is, because I thought about this and I was like, do we want people to have to manage the deprecated colors in this dungeon area over here called deprecated? No, that would be super annoying. So when you activate action from the deprecated area, it will be manageable right here with all of your other colors,

0:42:27
as if it’s not locked in the basement. Okay, so That’s I think fantastic too for those people who want to use Deprecated colors. All right, and that’s really how all deprecated features work when you when you activate them They show up in the area. They belong in you don’t have to go to the deprecated dungeon to manage them anymore. All right Okay, are we ready to see are we ready to see some of the magic?

0:42:53
How are we doing in the chat?

0:42:54
I mean, is what you’re seeing so far already good? I think Dave Foy said at one point, he’s like, you know, they could have stopped there. They could have stopped there and it would have been a real good improvement. It would have been a real nice improvement. And we can see that with regards to the workflow, right? But as always, you know, we don’t just stop there.

0:43:15
Is oxygen still supported? Sorry, just joined. Yes, oxygen is still supported. Okay, good, good, good, good, good, good, good, good. Okay, where do we wanna start with the magic? All right, let’s get rid of this. All right, I’m gonna go into the color palette. And remember, I’m on the front end.

0:43:31
I’m on the front, I could be doing this in the builder just the same. I talked to Mateo about this before the stream, and I decided, look, we could show this in the builder. There’s hundreds, how many people are here? How many people are here? What are we at now? Okay, we’re at 800 people.

0:43:47
It keeps going up.

0:43:48
I thought it was a bad idea because there’s probably hundreds of people here that have never used Bricks. They’ve never seen Bricks, the interface, right? They’ve also never seen Automatic CSS. They’re seeing everything here for the first time. You guys already know the Bricks Builder environment is, it’s like a cockpit, like a 747 cockpit. There’s a lot of stuff going on.

0:44:10
There’s a lot of stuff to look at. I think it’s better if we just stay on the front end and look at it here, because that’s only one thing you have to look at, right? We don’t have all this Builder stuff going on around it, okay? So we’re just going to stay right here. I’m going to open primary and remember I told you everything is this is a one color website effectively. We’ve got a light background right here. We’ve got an ultra light background right here. This is a white background back down to ultra light

0:44:37
down here and this is all mapped to the primary color. Okay. So remember one thing I said, what was one of the big challenges? No, you don’t have visibility into what you’re doing. You don’t have visibility into what you’re doing. One thing we thought about the initial idea we had was a hot reload concept. It’s like hey let’s they make a change they hit save and then the page just boom it’s just like there it is and and then we decided it was actually I think it was Wajih. Wajih was like no guys guys guys we don’t even we don’t yeah we do have hot reload okay but that’s not even the that’s not even the thing. We do have hot reload when you save it will hot reload the page you

0:45:13
don’t have to refresh every time. But Wajib was like, guys, we could just make this happen, right? So I can literally just, I can just do whatever I want here. Okay. And I’m going to bring this down and I’m just going to say, Hey, maybe, maybe I want something that looks a little bit more elegant. Right? So I’ll just bring this in, maybe something in there. Right? And now the entire site is done. That’s done.

0:45:39
The whole site’s rethemed. Everything just works now. It’s got a brand new thing going on. A brand new vibe. So the ability to just, what you’re looking at. Now, you might be like, oh, that’s cool with colors, Kevin. That’s cool with colors. What else can it do?

0:45:56
Well, now we just walked through this dashboard. Almost every input that we looked at does this, including in the forms area, which we just talked about, right? Can you bring a form onto your page and just do all this, everything you wanna see with the form? Yeah, absolutely.

0:46:12
So I’m gonna go into global button styling as an example. You’re gonna see some padding here,.75 M. I’m gonna change that to one M. I’m gonna go to two M on our button padding. I can even use the keyboard here. I mean, look, it’s just gonna, that’s, and that would be happening to all buttons because this is a global button style, right?

0:46:31
Makes sense? Everything here, if I wanna go, oh, let’s see what it would look like if my text on buttons was a, I’m gonna make a very ugly button right here. Don’t worry about it, okay? We’re gonna go uppercase, and we’re gonna see how that looks.

0:46:44
We’re gonna go, nah, we don’t wanna do any of that stuff. I could do a custom button text size if I wanted to. I can start changing the borders. Look at this little arrow right here. You see this little arrow. If I click that, I’m now managing the hover state of that input. And so that’s as easy as it gets like with, Oh,

0:47:00
I want this to just do this other thing on hover, put that little button change the setting. Now it’s doing that thing on hover. Right? That’s how you manage your hover styles. So what we’re looking at right here, this is, this is instant preview. This is instant preview. Now you might be like, well Kevin, that’s cool, and by the way, I can click the little dot right here, I can refresh the page, whatever I want to do. I’m back to the way we were.

0:47:24
I didn’t have to commit anything. Nothing was committed to the database, nothing was, the style sheets were not regenerated. So if I’m playing around and I’m like, ah, scrap it, right? I can just, and I can also command Z and go backwards, all right? So really, really fantastic, right? But even with things that are, you know, there’s some challenges where we were like,

0:47:46
okay, well, if the code is already loaded, like buttons are already there, they’re already in the style sheet, okay? Let me look at the chat, what are we doing? Okay, is this good? Is this, okay, you like this? We like, are we having fun? Okay, all right, we’re having fun, we’re having fun.

0:48:03
So, you know, but what happens? What happens if the code doesn’t exist in the style sheet? Like what we’re looking at is a normal website. This is not a boxed layout of any kind. There’s no box layout here. There’s no code for the box layout styles on this website because it’s not on. So the idea like that I would toggle this button and then save and then when I save it will

0:48:30
generate those styles and then I can see what I’m doing but see that wasn’t good enough I was like no no it should really still be instant somehow some way and so now if you click the toggle it just is it just is instant right so now we have and I can just command shift command O and hide this, I have a box layout on this website now, okay? Now you guys know that with box layouts, you do often want to, you know, play with things, you know, you want to change the styles of things.

0:49:00
Like what if, see that shadow that comes with it by default? What if I want to go none on that? Now the shadow is gone. What if I want to add borders to this? What if I want to add top margin? What if I want to change the body width? What if I just want to play with this and just kind of dial what kind of box layout do I want here? Let’s do 1735. Oh and then by the way you know

0:49:23
you have a content width and then you have the website width. I can go back to website dimensions here and I can actually start playing with the content width as well and I can really just dial this in to whatever I want. Again I’m not committing, none of these are committed to the style sheet. I can just, I’m free to play around, but I got a really nice box layout now. I’m gonna close that, we’re gonna take a look at this. I mean look at the look that we just went to. Now I’m seeing that the white areas are blending into the white back here, so I might want to do something about that, right? So I might want to go back here and I might want to say, what does this look like

0:49:59
when the background is black? Okay? And that’s the other thing too, look at this text input. Like if I put like 5M in here, that’s obviously not a background color. The input’s just like, all right, dog, you told me 5M. Like it is gonna probably throw an error, okay? But what I want you to notice is like there’s no swatch. It’s no like, you know, it’s not blank or anything like that. When I put in a color,

0:50:21
it’s going to recognize that that is a color. It doesn’t even matter, like I could put red and it’s gonna, and it just shows me a swatch It’s like oh that that’s a color I’ll just go ahead and render that for you and so you get the swatch in the input as well But the ability to just write you know if I could type it’s always it’s hard to look around the mic type Got your neck cranked to the side, but look I mean I could do Whatever I want whatever I want and then if I just if I just refresh the page

0:50:46
page it all will go back to how it was. Unless I save and commit it and then it will hot reload and I’ll be good to go and I’ll move forward, right? So the ability to, that kind of stuff. You know, like it’s just, all right, what else? Let me look at my notes here. All right, content width, we looked at that. Oh, spacing and contextual spacing.

0:51:07
The other thing this does, because obviously there’s a learning curve to automatic CSS. And some people are like, I don’t know what these things do. Like, what does container gap do? What does content gap do? What does grid gap do? What does the base spacing do? What effect does that have on my website?

0:51:25
Well, now, you can just kind of play, okay? So you guys know in the building workflow. And that’s what, we’re only looking at the global styling workflow. We’re not looking at the building workflow today. There’s a whole other half to automatic CSS, which is the actual page building workflow and how efficient that is.

0:51:41
We’re only looking at one half of this tool today, right? But I’ve used all these contextual variables, just like you’ve seen me teach over and over and over again. You need a gap between containers, use container gap. You need a gap in your grid, use grid gap. You need a gap between your content, use content gap. Then you can safely dial in these different areas of the website.

0:52:00
Now, with space L on, let’s look at content gap, space M right here. So obviously we have a gap between content and various places, okay? And what we’re gonna do is we’re gonna adjust space M, but I’m gonna adjust it by showing you another feature of these inputs. You know how people are always like, I need a cheat sheet,

0:52:16
I need to know what the options are, I need to know this, that. Well, in a lot of these cases, colors being a big one and spacing being another big one, you can just use arrows. Okay, it knows the system and it will cycle through your options very quickly. Like look how I could just,

0:52:35
look what it’s doing to the content. You want to tighten up the content, you want to loosen up the content, what do you want to do? You could do that. Oh, you want to do your containers separately, right? Look, I can do that separately. I’ve got full control over all of this. Let’s go back, I like Excel.

0:52:49
And then on your grids, you know, where are grids? There they are. How does this affect the grids when I change these things? Okay, and you’re seeing it up there, because that’s a grid up there. Oh, by the way, by the way, I forgot to mention, let me just refresh this real quick. And I’m going to go back to box layout for just a second, because there is a concept in this in automatic CSS, which is one of the most powerful layout tools available now called content grid. And we’ve deployed content grid in a few strategic areas and I still have content grid. But if you know like this style right here,

0:53:24
to do this previously, you would have to use a breakout. And a breakout uses the technique of viewport width, right? VW units, because that’s the only way to break an element out of its parent container consistently and get it to the edge of the screen and things like that. This does not use breakouts, this uses content grid. And why is that important? Let me get back to our dashboard.

0:53:45
Let me go to layout, let me go to box layout, let me turn that box layout on. Let me close that up. This layout did not break. This is an area where the old breakout style that was needed before the existence of what we call content grid, would have cut into these images right here and caused overflow issues. Content grid perfectly adapts to whatever we’re throwing at it. If I change the content width of the website, I didn’t mean to pull up the inspector.

0:54:18
If I change the content width of the website, so I’m going to go to website dimensions and I’m just going to dial this down and I can dial it up too. I’m just going to go pick a random number. Nothing here is broken. Nothing here is broken. All of my content width got narrower. This is still breaking out to the edge where I wanted it to be.

0:54:34
All of this, everything, everything is behaving, okay? I’m gonna go back. We can actually just refresh. And then when it’s not a box layout, it still is not a broken layout. It’s content grid is insanely flexible. It can handle almost anything that you throw at it, which is really, really, really nice.

0:54:51
Okay, what else did I have on here? So I did the arrow cycling on spacing. Maybe we should take a look at arrow cycling on colors real quick. So I’m gonna go to, what would be a good area? Backgrounds and text. All right, so this is like a light, and this is the ultra light.

0:55:06
See what they’re mapped to. Primary light. I’m just gonna cycle. Look, I just cycle through with the up and down arrows. So you don’t even have to like delete what’s there, retype something, you can literally just cycle to the next option. I’m gonna put it back on light,

0:55:20
because that’s what I like. But it’s just really efficient. Now we probably are gonna bring the right click context menus in, but maybe like I don’t, you gotta convince me you still need them, okay, with given this experience right here. If you feel like you still need them,

0:55:36
I’ll bring them to you but like to me that like just cycle through real quick that’s that’s really good okay all right let’s go ahead and look at oh we didn’t look at typography right so again everything that let’s go to typography where there’s still a lot of magic to come by the way we haven’t even gotten we already got into some of the magic all right so 20 I can look at this I can just that’s my base text size, right? And then I’m gonna go down, I can do your H1 separately, you can do whatever.

0:56:07
Again, you get the point. I think you get the point. Literally everything in the framework that you can touch, you can see it while you’re touching it, all right? Let’s go radius, auto radius. Let’s see how this works. This is a brand new feature. So you know how I set this global border radius at one rim?

0:56:24
Look what it’s doing here because I came into additional radius options and I said add this radius automatically. Now look notice no radius on all these images. Have you ever been in a situation where you’re like you added all these images and you’re like ah we really need a border radius. Well what are you going to do like like a chump you’re going to go back through and add one to all of your images or you’re going to do some custom CSS to select different selectors and add a border radius to that. No, you just come in here and just say, I’d like to add the radius automatically, please.

0:56:57
Now they all have the radius, right? And you have complete control over what you’re targeting with that auto radius. You also have automatic object fit. So if you ever change the height and width of an image and like, it warped it, now I gotta go set object fit. You always have to set object fit and there’s no there’s no downside to an image using object fit So I just figured well, they just all have object fit by default automatic

0:57:21
CSS is gives you object fit by default So you can just freely manipulate images and they never work if you need to change the object fit to like Contain instead of cover you can do that. There’s nothing stopping you. Okay, there’s no limitation. It’s just helpful It’s just like a you probably don’t want warped images anywhere So I’m gonna step in and make sure that doesn’t happen. If you do want them to warp, you can always make them warp, but like, you know, why would you want to? So we’re gonna just do that for you automatically.

0:57:47
This is, a lot of these things are why it’s called automatic CSS. It’s trying to make it as easy as possible. And I know there’s people in the alpha group. People in the alpha group, there’s some of these things they haven’t even seen yet, right? So I think they’re probably a little bit excited about some of this.

0:58:01
Stuff like that is really, really, really helpful. Okay, let’s look at a blog post. We have a blog post down here. We’re gonna look a little bit at content grid, all right? So this is a Frames blog post template. This is already using smart spacing from Automatic CSS. If you go into Bricks and you add the post content element, if you go into Oxygen and add the post content element

0:58:23
that pulls Gutenberg in dynamically, you know that it’s a shit show, it’s a dumpster fire. You have no control over anything that’s going on within that content. Every single user would have to open custom CSS and who knows where they’re gonna do it? And we already talked about that. Where are you gonna write the custom CSS?

0:58:43
Nobody wants to use any of the default areas. So a lot of people use WP code box and you’re just, okay, gotta target this, gotta target that, gotta space this out, gotta space that out, nothing’s the way that I want it. This is all rhythmic spacing by default because automatic CSS is activated. And we’re gonna go down to spacing,

0:59:02
we’re gonna go to smart spacing, see smart spacing is on. And now what this allows you to do is it allows you to look at this post content that’s being brought in. By the way, what smart spacing does also is it clears all user agent spacing. So all heading spacing, all default paragraph spacing, gone.

0:59:19
Because this allows you in your normal workflow in a page builder to use gaps, which is far more efficient and far more predictable. And then you can go outside of gaps if you want to. You can put smart spacing manually on things if you want to. Again, there’s no limitations, but that’s what smart spacing does. That’s how it behaves.

0:59:36
And then what it does is in certain areas like Gutenberg content, like rich text, yada, yada, yada, where we know we have multi content. We’ve got figures, we’ve got headings, we’ve got paragraphs, we’ve got lists, we’ve got galleries. OK, it’s going to go in and it’s going to find adjacent siblings. There’s a concept in CSS is going to find adjacent siblings and apply margin to the top of adjacent siblings only. This way you don’t get extra spacing above or below or any erroneous spacing, it’s just perfect spacing. It’s just smart, it’s smart spacing, right?

1:00:08
That’s why we call it smart spacing. But now what you’re able to do with the controls, which you could do this in 2.8, but you couldn’t do some of this stuff in 2.8. I think you could do all headings in 2.8, if I’m not mistaken. Now you can do every heading level granularly. This is an H2 heading.

1:00:23
If you want these to be extra spaced, right? And I could just like, look at that. I mean, I could do literally whatever I want with it, okay? I’m gonna set that back to what it was. I’m just doing a little quick demo. H3s, if you wanna target those, again, I’m just gonna put outrageous values in here just so you can see the element that I’m targeting moving.

1:00:43
You get to control, you have full control over this. If I go to text and links, I have my paragraphs, I can bump this up, right? And so if you like really a lot of breathing room in your stuff, and I went to 2M, I mean, you could do anything in here, 1.25M, you could do rims, you could do, I wouldn’t recommend pixels, obviously,

1:00:59
but anything that you wanna do in here, you can do. I’m gonna go ahead and clear that out back to its default. Now, look at what we’ve added here. Okay, we had a little bit of list control. We had a little bit of list control in 2.8. Now you have maximum list control, the ability to control the indent on your list the ability to affect nested lists Okay, let me go down to 2m down here. I mean look at the that’s the nested list being adjusted right here

1:01:24
Also, you’re going to notice this says block What is that alerting you to this uses the new block styling in CSS which means you actually have? Two values in one to use if I do 2M and then 0 that’s going to put 0 on the bottom 2M on the top of the nested list that’s what we’re looking at right there I can do 0 2M so this does support double values now giving you full control off of the top axis the bottom axis whatever okay so really really really powerful stuff again nested list versus the the parent list let’s go into other. One big downside of smart spacing was that it

1:02:06
only looked for paragraphs and headings. I think it looked for figures, but didn’t give you control over figures. Now you have control over figure elements. This is a figure element right here, and so I’m just going to put again an outrageous value in there. But look, the ability to really dial in the spacing around, and that’s videos, that’s images, that’s galleries.

1:02:27
Look at this gallery down here.

1:02:28
Okay.

1:02:29
Being affected by this. So you’re able to target your figures. You’re able to target your block quotes. And then we have something called flow spacing. What flow spacing is, is a catch all. So if you throw, if you throw a div in there, you throw an audio player in there, you throw whatever in there, it’s going to be like, you probably don’t want that touching your other content.

1:02:46
So flow spacing is going to pick that up and say, ah, we gotta space you out, right? I don’t know who you are or what you is, but I gotta space you out, right? That’s exactly what’s gonna go on with flow spacing, okay? So now, like, smart spacing truly is like, it’s getting smarter, it’s like an AI, it’s evolving, okay, it’s getting smarter.

1:03:06
And it’s just gonna give you a really, really fantastic experience. Okay, let’s look at some more magic. I’m gonna go in and edit this blog post.

1:03:14
And we’re gonna take a look at,

1:03:15
notice, what is still with me? What is still, what’s still with me? Oh, the real-time dashboard, that’s right. The thing that it’s there when I need it, whenever I need it, right? Well, right now I don’t need it, so I’m just gonna hide it. All right, so I’m gonna come down,

1:03:28
and this layout that you were just looking at uses, I mean, you wouldn’t be able to tell by looking at it. Let me go back to the front. Oh, I don’t wanna create new tabs, because I don’t wanna get into a switching back and forth context. Okay, this uses content grid. This whole situation is content grid,

1:03:46
giving us, as you may know, the ability to feature content. So we have two different feature zones where you can feature content into, and these are not breakouts. Very important, these are not breakouts, because again, breakouts are problematic in some ways these are content living within Specific grid zone grid zones that they are assigned to so I’m gonna go in and edit this post Let’s see it’s margin box. Okay, so I just want to I just want to look at the chat real quick

1:04:12
Are we doing are we doing good? Are we are we are we meeting expectations? Are we exceeding expectations? Are we below? expectations are Tell me tell update me and I don’t know. I don’t know. I’ve been looking at this shit for months. I don’t know. I have no idea what it’s like. Okay. Okay. Let’s see.

1:04:36
Yeah, see, Carl’s like, you know, I love the fact that Kevin’s always excited about his product and what the team, yeah. I mean, I mean, I think there’s a lot to be, there’s a lot to be excited about, right? Larry says way above, way above expectations. David, exceeding expectations. Totally exceeding, exceeding, okay.

1:04:54
That makes me feel real good. Because I was nervous, I was like, I don’t know. Like, you know, a lot of people here, there’s a lot of hype. But you know, I think we have a track record of not disappointing. And we have, I think, a good, strong track record of innovating and leading the way on a lot of this stuff. Okay, notice first of all,

1:05:16
for the people that use Gutenberg a lot, you now have automatic post support. So you remember you used to have to put a code snippet in functions.php to make automatic CSS styling show up in blog posts. It now shows up by default, which also means you get a class first workflow by default in Gutenberg now.

1:05:35
Now obviously you can’t style these classes because Gutenberg’s a little bit of a trash can, but you know, you at least have them there. You don’t have to find the buried input to put it in, but I’m gonna open this up and I just wanna feature some things. I wanna feature this image right here. So I’m gonna go to my CSS class

1:05:52
and we’re using content grid, right? So the utility is content and then you know we use a double dash syntax. I wanna feature this content, right? So I’m gonna put that class on the image and then I’m gonna go down to my gallery and I wanna feature this into the max zone. So, and there’s also a full zone

1:06:10
if you want it to go full width but I just want this to be max, okay? So I’m gonna do content feature max, right? So I’m assigning this to the feature max zone. Now you can do this with custom CSS and bricks by using the grid column area. There’s a utility for that, it’s all good or you can use classes, it’s whatever you want to

1:06:27
do. But I’m just going to update this and we’re going to go back and we’re going to look at this on the front end. And you see now that my image that was featured is now breaking out into the feature zone because it looks good when everything’s in a column and it’s all feels like it’s like stuck and confined. It doesn’t it doesn’t flow very well, right? But when stuff is like, oh, it breaks out, oh, look at that.

1:06:49
Like it’s you know, that’s nicer to look at isn’t it? Okay, now you’re like Kevin that’s that’s fantastic but I mean guy I gotta I gotta I want to control like well where like who who who chose that with you know? This is where people are like you know I don’t want a framework because automatically I don’t want it to make decisions for me. Okay it’s not making any decisions for you. It has a sensible default okay but I mean like with everything you have control over it. Not only do you have control over it. I mean, you have the ability to sit here and look at exactly what it’s doing now. Right. Even yes, even this kind of thing. Okay. Until you break it. All right,

1:07:25
we’ll go back to a hundred pixels. Uh, it went to like a negative value. So I went down too far. Uh, but there you go. Now let, let this also shows you how this behaves. Okay. Notice that the feature one is not moving. Okay. Why? Because I’m changing the feature max width. This is the one down here that’s featured max. Um, so I’m adjusting that one, but watch this. This kind of teaches you how things interact with each other within the

1:07:48
framework. When I changed the feature width, they both change. Why would this be? Well, it’s because the feature max would never make sense if it was less than feature, right? Like what was the max got smaller, but that doesn’t make any sense. Right? So when you adjust feature width, it just is like the max is like, oh, dog, you getting bigger, I gotta get bigger too. But you can still then, right, dial that one in separately.

1:08:12
So really you just, these levers that you can pull give you the ability to just dial this stuff in to exactly what you want. And by the way, this is like a very small part of content grid. Like this ability to feature content like this and then control the zones and all of that, that’s a sliver of what Content Grid is capable of doing.

1:08:33
Okay, so that was Content Grid. We already looked at smart spacing in terms of this blog post. All right, let’s get into what really is like gonna be the final area for this live stream. Where are we at? We’ve got, oh, we’ve dropped off. 200 people were not impressed. Okay, was it 200 six seven seven eight. I don’t know what we got up to but

1:08:54
Drop some likes please on the stream

1:08:56
Okay We’re now going to take a look Let’s let’s go back to our home page now that we really need to but I’m gonna go to the global SAS area now, okay? Now what you’re looking at is a very basic. I mean, this is still this is the 1.0 implementation But there are some goodies in here. There are some hidden good. I mean, it looks very simple, doesn’t it? It looks very it’s like hey, here’s a I mean, here’s the style sheet. Well number one

1:09:27
And if you’re scared of SAS, let me just put this preface out there. It’s perfectly fine You don’t have to do you don’t have to know a lick of SAS You don’t have to do anything with SAS. You can write vanilla CSS here. This will accept vanilla CSS all day long. You don’t have to ever think about SAS in your life if you don’t want to, right? But SAS does give you a bunch of superpowers. Now one of the superpowers is this without import statements. If you remember in the past, like the W, remember the WP code box, like, okay, you got to put this import statement in here. That’s going to pull it. Okay. This is already, this is already integrated with the backend

1:10:05
of automatic CSS. Every SAS variable, every mixin, every function, every everything, and we have documentation for all this, is immediately available to you. Okay, and one of the really key features here of SAS, one of the downsides of vanilla CSS is that you can’t use dynamic media queries. You cannot use tokenized media queries.

1:10:28
They don’t work in vanilla CSS. You always have to reference the media query, the breakpoint by the pixel value, the raw, like an absolute psychopath. You have to put raw pixel values everywhere. But with SAS, you actually can use dynamic media queries. And with automatic CSS, you don’t even have to write the media query, okay?

1:10:50
You can use include statements. This is a mix in. So we’re gonna say include the breakpoint, and this is, again, the power of automatic CSS. Do you wanna go up or down? Do you wanna have a normal breakpoint, which is a max width breakpoint, or do you wanna go min width on your breakpoint,

1:11:07
which is that breakpoint and up, and in automatic CSS, it’s just written in plain language. I want the breakpoint and up, right? Uh, and then, so you put the breakpoint that you want like L.

1:11:18
Okay.

1:11:18
So did I have to, do I have to know what my L breakpoint is? No, I don’t have to know what my L breakpoint is. Uh, I just need to know that it’s called L. We have M, L, X, it’s just t-shirt sizes. That’s it. And that’s for everything. So you already know what they’re called, right? So I can just say, Hey, at breakpoint L and up, I want to do something to my H1.

1:11:34
Okay.

1:11:34
What do you want to do to your H1? Well, we can just do color red, and we’re just going to throw an important on here just to make sure it works. Now, the one thing, the one caveat here, and there’s no way around this, because SAS is a pre-processed language, okay? There’s no live preview of SAS.

1:11:54
It has to be pre-processed, right? So you have to save, you have to commit this to the database. And then what we’re going to do is I’m going to refresh. I think there’s a little bit of a hot reload bug with regard to SAS specifically. But I am now targeting that heading and I’m targeting it. Let’s look at it. I remember I didn’t just do h1 color red, right? What did I do? I did it at a media query. And I didn’t even write the media query,

1:12:19
but look at this. Okay, let’s zoom in. There is the media query right there at media men with 992 H1 color red important. Let’s go back and see what I actually wrote, which I just said, hey, I just want to include a breakpoint here and I want to style this at the breakpoint. I give you an up, which is a men with media query, which means by the way that when we look at this on something less than 992, okay, look at that. No more red because we’re crossing that threshold. It’s only at that breakpoint and up that we’re going to see the change.

1:12:56
You don’t have to write media queries, you don’t have to reference media queries, static, this is just one little, little, little, little, little tiny feature like against what is possible, against what is available. There’s going to be so much more documentation. Now that the front end of automatic CSS

1:13:16
has been available to you with the UI, now the back end of automatic CSS is fully available to you. In terms of customizing things, changing variable, like, oh man, okay, we’re just getting, like, this is, if anybody tells you, first of all, you’ll hear people be like, oh, you know, it’s maybe automatic CSS is basic,

1:13:35
or it does too much for you, or whatever. I mean, we’ve already looked at how you have full control over everything. I will tell you right now, what you’re able to do as an advanced developer, if you’re a beginner, just you stick to the dashboard. You know that, what’s that movie where Will Smith’s teaching him how to dance?

1:13:52
He’s like, just stick right here, just stick right here. Okay, that’s what you’re gonna, you’re just gonna stick to the dashboard right here. All right, but if you’re an advanced user, this just opened a world to you, right? A world to you of infinite customization. We have more planned in the future. But we’re not going to dive into all that.

1:14:09
Let’s go back to global CSS. Let’s look at another thing. What about if I’m writing a test card? Let’s go test card. I want to do, look at this. We’ve auto-suggest. You’re like, what’s that property called? It’s okay, they’re all right here.

1:14:24
Even those, yeah, padding block, padding block in, you might not be familiar with these logical properties yet. Okay, it just will auto suggest them for you. And then we have the calc wrapping, the var wrapping, all of that. So if I want to do like space L and then I hit a semi colon, look what it just did. It just wrapped it for me.

1:14:42
I want to go times one. Look at that. It wraps it in a calc. Everything that you’re used to in terms of efficiency in the builder is now available to you in this custom global SAS area as well, but guys, that’s not all It’s not all I didn’t want this to be like a late-night infomercial, but wait, but wait, there’s more But it does just keep coming

1:15:02
Hmm okay So we have this thing

1:15:06
Coming. Well, it’s already been there a little bit now. It’s been teased. It’s not actually I don’t think it’s actually been in the wild. Called recipes. Recipes are code snippets, okay? So there’s a difference between a mix-in and a recipe, even though technically a mix-in is like a recipe. But here’s the key difference, okay? When I said include breakpoint up, what that is doing is it’s a recipe for a breakpoint,

1:15:36
for a media query, right? And it effectively has a slot inside of it, so I can put anything I want in the slot, and it’s gonna be inside of that media query. You can even nest these, by the way. You can say, like, hero, and then you can nest, say, at include, and then say break point up, right?

1:15:52
Break, or you can do normal break point. Like, if I wanted to do a normal one, I would just do break point. So you don’t need, like, it’s not down, it’s just break point, all right? And then, this is gonna put, this is gonna affect whatever styles I put here The thing inside the hero or the hero at that breakpoint really that yeah the hero at that breakpoint

1:16:10
So you can nest all of these which is really really really powerful. That’s a mix-in and that’s in SAS Okay, and the difference between a mix-in and a recipe is a mix-in stays Encapsulated so you don’t see the code you don’t you just you see the mix-in but you don’t see the code behind the mixin right a Recipe is an unwrapping of the thing so a recipe is saying I want XYZ and so we’re gonna do clickable parent and the difference is you don’t say include Okay, all you do is hit at and then by the way look at this These are all automatic CSS recipes and it’s auto suggesting them to me. Now let’s say you’re doing a card and

1:16:52
you want to you know here’s my here’s my test card and you want to do your heading. Obviously you could nest this or whatever and now you’re like I want to apply clickable parent technique to that heading. So you can just start writing clickable parent and there it is right here and once I click it look what it does it expands that out for me. Now in Bricks you want these dynamic root selectors, but in here, you would just replace them with your ampersand, okay? Just like this, okay?

1:17:21
And then target, bang, okay? I still have to do bunches of tutorials in this, but this is gonna unwrap all of the clickable parent code, and then you sit safe. And you can do this in the builder, by the way, it’s not just isolated to this area. I think the teasers that I showed were in the actual builder.

1:17:39
This is now working inside of this custom CSS area as well. And it’s really phenomenal for utilities or things that automatic CSS does that can’t just be applied with a variable or applied with a utility class. Like you saw, let me bring that back for a second. You see like what a lot is going on here, right? To make clickable parent work.

1:17:58
And you can’t just slap a variable into play and that magically happens. So you have this ability now to just call up a recipe, and just say, I just want that recipe. Obviously, if there’s a mix-in for this, which there is, in this area, you probably use a mix-in. But in Bricks, Bricks doesn’t support mix-ins, it doesn’t support SAS.

1:18:19
So what’s your option? Well, you just call the recipe, and it gives you the recipe inside the builder. So really, really, really phenomenal stuff. Again, something that needs an entire video and walkthrough and instructional on. Nobody has this. Nobody has been thinking about this. Now, you might start to see it, come at it.

1:18:37
Look at these media queries. You might see it come out of nowhere. Look what I just did. I just asked for media max width, and then I have a little slot I can start writing. So I just unwrapped the media query, essentially, right? Here’s the rub too. You’re going to be able to share recipes with other people. You can import and export recipes from one install to another. And we’ll have our official recipes,

1:19:00
but then you’ll have the ability. But wait, but wait, that’s not all. Okay, hang on, hang on. I know some of you are like, no, dog, I got to, I got to, I got to get to work. Okay, let’s look at one more thing. One more thing. I want to shout out Dave Bloom on this. I don’t know if Dave Bloom is watching. I 100% got this idea from Dave Bloom. Robbed him absolutely blind. A lot of the stuff, we innovate almost everything, okay? This is a feature that I just, Dave Bloom showed it to me,

1:19:30
and I immediately stuck him up. Like, I immediately was like, nah, we’re lifting that one. It’s just phenomenal. Okay, so you’re gonna have a big style sheet here. You’re gonna have a lot of global styles going on, right? In fact, let me just throw in, oh, by the way, let’s look at that for just a second.

1:19:52
If you wanted to come in like root and you wanted to make like a custom transparency or something like action trans 17, right? Because we don’t have a 17% variable for the action color for transparency. You can say at rest at action And just say at action color and look what it does it gives you the entire HSL string with partials all I have to do is change this to point 17 and I just made a custom transparency in my global CSS. It’s available to me everywhere I can copy and paste that and I can make a 18 or a 22 or whatever.

1:20:27
Again, what this unlocks for like semi advanced and advanced users, absolutely phenomenal. Let’s do clickable parent. I’m just want a bunch of code in here. Let’s do focus parent, right? That’s another recipe. What other recipes do we have available to us? Let’s go down and let’s do, oh, columns recipe.

1:20:45
Oh, look at everything involved with creating responsive columns, all done for me. Even the locally scoped variables are just sitting there waiting for me to tweak and use. Let’s go to clickable, no, we already did that one. Let’s go, what else do we have available? What’s fun in here? Let’s go, there’s a lot of media query stuff.

1:21:03
Oh, the Ipsums, okay. We don’t wanna add that though. You don’t wanna add that in CSS. That’s not a CSS thing. But you do have Ipsums. So when you’re doing this area right here, this content, yeah, you can Ipsum that all day long let’s do here’s a divider all recipe okay have we gone enough yeah we’ve gotten some

1:21:21
scrolling going on all right watch this all right I’m very you know even though you know I stuck this man up and took this I took this right out of his backpocket okay so again I give credit where it’s due shout out to Dave Bloom all right so what I’m gonna do here is I’m gonna go in and I’m gonna say that I’m gonna do three forward. Oh, what’s that three forward slashes? And I’m gonna say that this is my clickable parent area Okay, and then I’m gonna come down here and I’m gonna say oh we were doing something with With you know content columns or something

1:21:56
So I’m gonna say this is my content columns area and then I’m gonna come down here and I’m gonna say, you know what, I was doing some customization of e-commerce right in here. Maybe we’ll call that WooCommerce. You know, because WooCommerce, boy do they need a lot of customization help. Man, they need a lot, you’re gonna need a lot of work if you’re gonna do the WooCommerce thing, right?

1:22:17
Okay, so let’s just go up here. What do we have? Oh gosh, oh. Oh, we just now have an organized style sheet. Instead of like making a gazillion folders or whatever, you know, the partials and all that stuff, at least a good start is like, man, what if I just click that and I’m there?

1:22:34
I’m just like, oh, I just need to find that thing about, oh, there I am, I’m at the WooCommerce. I’m at the WooCommerce part. I mean, and it just builds itself. And if I take this away, I mean, it’s not there anymore. It’s just as simple as just throwing a comment in there. We also have multi-level comments, all right? So let’s go one, two, three, four.

1:22:53
Let’s just add another one and say, I’m a child, right? So we’ll go in here and look at how it’s indented, okay? And so you’re able to hyper-organize your global style sheet right here. We just, I just tossed some comments in there. And I mean, you’ve got some pretty strong organization anchor linking going on.

1:23:14
Really, really, really fun stuff, right? Okay.

1:23:18
How we doing?

1:23:19
Let me go to, let’s just head to the chat real quick here. Let’s just see. All right. I’ll just ask again.

1:23:26
Okay, we’re pretty much at the end

1:23:28
of what we’re looking at here. Yeah, by the way, this was, oh, hold on, hold on, sorry, wait, wait, wait, there’s more, there’s more. Let’s do this, okay, if I want everywhere that I’ve used the word relative, okay? I do, we do have search and replace in here. Look it, if I want all these relatives to be absolute or something,

1:23:53
I don’t know why you would wanna do that, but I can hit replace all, all of those relatives are now absolute. If you wanna find tokens, say, hey, everywhere I used action, I now wanna use secondary or something. You can absolutely do that find and replace All of that is available to you as well. You know shout out to Christoph a lot of and and

1:24:11
His his whole team, okay This area right here has gotten it started out. It’s just like okay. You can write some CSS there I mean, it’s starting to get very magical now. It’s starting to get very magical now and again I mean when have you been able to do any of this in any WordPress install? Not to mention the front end, not to mention in the builder, not to mention in any builder, between Bricks and Gutenberg, wherever you go, it goes. Okay? This is, what this is going to answer questions too. It’s now question and answer time.

1:24:54
Hashtag Q hashtag question. I will answer as many as I possibly can. We’re almost an hour and a half into this. I’m committed to two hours. Okay. So, yeah. Hashtag Q hashtag question. All right.

1:25:16
You can also, if you don’t have any questions, there are some rolling in now. If you don’t have any questions, just go ahead and drop in the chat again. I think everybody was basically saying, yeah, it exceeds expectations. I do remember what I said at the very beginning, what I prefaced this with.

1:25:33
My hope was that it would exceed expectations, but at the same time, you have to understand that this is the infant. This is the infant of automatic CSS. This is now 1.0. This is the new 1.0. It’s only up from here. This is gonna get so much easier, so much faster,

1:25:51
so much more everything. Okay, let’s start answering some questions. I’m gonna search hashtag Q.

1:25:57
Oh, okay, good, we got a lot, we got a lot. I will start at the top. Kevin, when do you give us hats from ACSS so we can update our photos? Says Nuno, okay, yes, we will get team hats. How about this, I will bring team hats to Italy. I will do that, okay. Will you make a new Bricks blueprint video for 3.0?

1:26:21
Absolutely, yes. What is the one bad thing about 62.5? This is a question from yesterday’s live stream where I hinted to there’s one argument against 62.5. The only argument, and it’s actually, it’s not an argument at all, except actually in like WordPress, okay? Because WordPress is a ecosystem development environment

1:26:43
where you are gonna be bringing in plugins and you’ve got theme stuff going on. The one downside is if a plugin developer or a theme developer, whatever, uses raw rim values, okay, it’s gonna be tough. Cause you’re now mixing and matching, right? So, you know, if based on, like they set rim values in their environment

1:27:08
based on 100% and now you’re using those rim values in a 62.5% environment, you’re gonna have some big things going on, right? Or some small things going on, whatever direction, I’m dyslexic, so I never know, you know, binary, can’t really compute.

1:27:27
But you get the point, right?

1:27:28
That is the one downside. If you have full control over your environment, it’s not a problem, it’s not a problem whatsoever. If you start incorporating a gazillion different, you know, stuff written by different people and somebody happened to use rim values, that’s when it can objectively create a problem.

1:27:45
Are there any security issues being able

1:27:46
to influence your website’s code from the front end? First of all, we’re getting a full security audit. Already been in talks with people to do that for 3.0. But as far as I know, so far, doing CSS is not a problem whatsoever. It would be a problem if you started to integrate things like PHP, JavaScript, etc. Okay. But as far as I know, and I’ve been told thus far, there’s not much you can bust into with SAS or vanilla CSS.

1:28:17
Okay. Let’s see. Is the action color being deprecated?

1:28:20
Yes.

1:28:20
But you can still use it, it’s still there, it will still live, it won’t break. For those who wrote custom CSS with ACSS in the BricsBuilder panel, will that break? No, no, no, no, no, no. And in fact, you don’t wanna write most of your CSS, let’s be clear about this, in Brics. Most of your CSS should still be written

1:28:42
in the attached to the element using the dynamic root selector. That is still the best way to write vanilla CSS. But if you, and that’s for an element, right? If you need global CSS stuff done, that’s where you come here. Now, you go to automatic CSS for that, okay? So, but there’ll be a video, we’ll walk through all.

1:29:02
This is what ACSS 101 is for, right? It’s gonna tackle all of these things. Is the deprecated dungeon the same dungeon where the ACSS team works? No, it’s a separate dungeon. Is it possible to use 3.0 in Gutenberg? Yes. I haven’t fully tested it yet.

1:29:19
Okay, we’re mastering everything in Bricks. That’s our primary platform. And then we’re going and branching out and testing. But that’s really what the public beta is gonna be for. And like, we want people to, we know, again, I mentioned this yesterday. There’s, everybody has a different dev environment, different servers, different this, different that,

1:29:38
different memory, different, you know, it’s, man, it’s a lot. You put this thing out into the wild, there’s gonna be some issues that people encounter and we’re gonna have to fix this. It’s why there’s gonna be a public beta. But yes, the end goal, you will be able to use, everything you saw here will happen in Gutenberg.

1:29:54
Okay.

1:29:55
And by the way, with Content Grid, I didn’t even show you guys, but with this blog post layout that I did, I can actually design this as a full page. You would never be able to tell that this is a column, like a center column layout, even though that’s what the template structure is, kind of. It uses content grid, so it can actually be anything,

1:30:17
which means I can go back into Gutenberg and build with blocks, even full with sections and everything else, and I can turn this into whatever I want straight from Gutenberg just because of Content Grid. It’s really, really, really powerful. Does ACSS 101 use frames as well as ACSS, oh, hold on, oh, will it use frames?

1:30:36
If you guys want, if you guys want a module on using frames, yes, we can put that in. But it’s not gonna teach you to build using frames, it’s gonna teach a from scratch workflow with ACSS.

1:30:51
Can you switch pages while in preview mode or

1:30:53
do you have to stay on the page you are playing with? Right now you have to stay on the page that you’re playing with. It’s not going to live preview across tabs. I’m not saying that’s impossible or will never happen, but this is where we’re at right now. Do you have a right click context menu for all the variables for space color? Yes, yeah, yeah. Right click context menus have been in, they’re in the builder, right?

1:31:17
They’re not in the dashboard, but one thing I showed is the cycling. I know that in some cases the context menu would still probably be helpful and it’s already planned to come. But we started with the variable cycling. Any breakpoints view on front end? Yeah, absolutely. Yeah, you just have to use the inspector while you’re changing things at breakpoints.

1:31:40
That’s what I was gonna show you here too with like buttons and links is a good area to see because all of these have hover styles. So like I set my primary for my primary button, primary, and then I click here and it’s primary hover. But I could literally just cycle through and I could choose any value and then hit save. And now my hover style is that color right there.

1:31:58
And then I can reset it if I want to. So hover stuff is really, really, really easy to manage but same thing if I was doing something at a breakpoint like changing my breakpoints for example you would I think those have to be hot reloaded but you would just save hot reload it and then you can check with the inspector and see exactly what that did and if you don’t want the dashboard in the way while you do it you don’t have to I mean this is all like it’s automatic CSS everything is automatically responsive and I didn’t do any, I literally, guys,

1:32:26
I built all of this in like 15 minutes with frames. I didn’t even look at the mobile, because I already know, the mobile’s already done. I have touched the mobile. Nothing was required for mobile right here. So it’s just, all of this breaks down just very nicely.

1:32:43
When you add frames to the automatic,

1:32:45
that’s when it just goes to like, you know, really that’s when your efficiency goes to Narnia. I mentioned Narnia before, but it’s just another world. It’s another world. People don’t, they haven’t seen this kind of workflow before, the speed that comes with

1:33:02
it.

1:33:03
Really, really, really good stuff. Can we integrate ACSS to style the WordPress dashboard? Oh, you mean like customize the look of the WordPress dashboard? Not, not, no, no, not yet. I mean, ACSS is for building sites. The fact that the WordPress backend is from, you know, 1967, that’s not our job, you know, it’s not our prerogative, but I mean, never say never.

1:33:28
Will we be able to export an ACSS style sheet? We’ve already discussed this. It is very likely, it is very likely. Oh, also, also, one thing that I’ve considered and we’ve already talked to the team about, right now you can export all settings and just take it to another install and import them, right? But I want you to be able to export just something.

1:33:52
Like, I just wanna take the colors. Let me just, give me the colors from this site to this site. You can just export the colors. Just give me the typography. Okay, you just export the typography. Just give me the spacing, okay? So you can like partialize the exports. I think that’s gonna be very powerful too.

1:34:07
ACSS 101 will be for ACSS 3.0 or 2.8? Absolutely 3.0, absolutely 3.0. When can we get our hands on it? There’s a lot of those questions. So obviously we can’t put a fixed, well, I kind of put a fixed date on it. When does ACSS 101 start? April 22nd.

1:34:32
My goal, and I’m telling the team this as well, my absolute goal is, I mean, I can obviously teach ACSS 3.0 on April 22nd, but I want everybody having it at that time so that you can learn right along with me and have the exact same thing that I’m using and that’s the ideal experience. That’s my goal, that’s what we’re pushing towards.

1:34:55
Is there still a dashboard page?

1:34:56
No, there will be no, this is it. This is all you need, there’s nothing else needed. This does everything. The only thing that’s in the back end is the license. Throw the license back there and you’re good to go. How does it look inside Bricks? So you can just open it just like it did inside of Gutenberg when I went into Gutenberg just a minute ago.

1:35:14
So there it is right there. By the way, it remembers the state that you left it in. It’s open because I left it open. If I close it and then I reload the page, it’s going to be closed. When I open it, it just remembers the state that you left it in. So it’s never intruding on you. It’s where you left it, essentially.

1:35:32
Then when we do the docking, when we do the making it draggable, resizable and all of that, it’s going to just remember where you left it last time. So whatever your preference is, it’s going to stick to your preference and then you can call it anytime you need it and hide it anytime you need it. Um, but that’s what it looks like there.

1:35:53
See everything. It’s the exact, I told you the exact same experience that you get

1:35:57
on the front, you get in the builder. So I said save. Then by the way, when you commit this, technically even without reloading, if I go over here, look at that. They’ve already remapped in the context menus, the new color is there. Now, that’s an awful color.

1:36:21
Definitely a color that like Bev would choose. Let’s just do that. All right. So yeah, that’s it. That’s the right. I go there. Now look at that. All the context menus remap with the new with the new color shades, all of that stuff. So that’s it. It’s a seamless, seamless little workflow. Okay. All right. Let’s see. Can we use the SAS area to modify the ACS buttons? I’m starting to not use them because I want fancy hover transitions and such. Yeah, I’ll show you exactly how to do this. Okay?

1:36:51
In fact, we’re in the builder right now. Let’s just go ahead and open the dashboard. Let’s go here. Let’s go to global CSS. Here’s, this is as easy as it gets. And because we use a double dash syntax, if you want to do something to all my buttons, like a fancy transition style,

1:37:05
class star equals, and I’ll probably have a recipe for this, button double dash. There you go. Put all your styles, you just now affected all buttons in the ACSS platform. Like that’s, it doesn’t get any easier than that. There you go.

1:37:19
So whatever you wanna do, right there.

1:37:21
Okay. Do you envision a future where ACSS separates from Bricks or other page builders and becomes standalone in itself?

1:37:27
I don’t have a crystal ball. So, we’re doing what we need as users and what our users need as users, and then trying our best to innovate in these key areas. Wherever that takes us is where we end up going. Can I make the SAS window larger? You will be able to drag it and resize it, yes.

1:38:00
Yeah, as Chris noted right here,

1:38:03
and let me go back to the front end just to make this even easier and more clear. Let’s go to, I’ll just throw like body in here, and we’ll go backgrounds color of red. Notice that that’s instantly showing, right? Any vanilla CSS that you write there is instantly previewed. You can see exactly what you’re doing. You do not have to save, you do not have to hot reload, nothing.

1:38:30
SAS is the only thing that has to be hot reloaded because it has to be pre-processed. But any vanilla CSS that you write is going to be instant preview. Question, is dunking on the whole game like this hard?

1:38:40
We’re still actually in our warm-ups.

1:38:42
The game hasn’t even started yet. This is just us shooting around before the game begins. Is it possible to save settings as a theme and switch between different ACSS settings in one site? Yes, not right now, but it is absolutely on the roadmap. Let’s see, is there going to be global page template

1:39:10
in Element SAS?

1:39:11
Honestly, I would like a SAS window to pop up when I click an element. I rarely use the Bricks Panel. It’s very, very, very, very difficult. I mean, yes, we can make it happen inside the builder. Like, it’s just, there’s a lot to think about there. And I would want it to also be integrated with the ACSS backend.

1:39:32
So it’s probably coming for sure. Okay, let’s wind this down. Well, we got about 20 minutes. We got about 20 minutes.

1:39:38
We still got a really good viewership here.

1:39:40
What’s your go-to in terms of Brics settings,

1:39:43
inline, CSS or external? Inline, inline, inline, inline, especially if you’re using InstaWP. Inline, but inline in general. Okay. Is there still a dashboard? There’s a lot of questions that are the same as other questions. I’m just kind of going through them.

1:40:16
Things they seem okay.

1:40:19
Okay.

1:40:25
Yeah, we’re going to take a look at page level style sheets. You already have technically page level style sheets in Bricks, okay, but obviously it doesn’t support SAS. Now that’s an area where, that might be a first area where we integrate SAS, right, versus the element base. Element base presents a little bit more challenges, but I think the page level is an area

1:40:48
where we could absolutely integrate that first. Let’s see. Does ACS 3.0 work with the WordPress classic editor? No, the classic editor is not a, as far as I know, it’s not a WYSIWYG editor, right? It’s not like a, it’s not rendering. It’s just a, it’s a fancy text editor, right? Now, you could put content in there and you could publish it into a template

1:41:18
and then that template will be controlled by smart spacing and all, yeah, I mean, on the front end, automatic CSS can touch it. But inside the classic editor, I don’t know. I haven’t looked at the classic editor in like half a decade.

1:41:31
Can I get seasonal global styles? Yeah, maybe.

1:41:34
Maybe, Bev, maybe, maybe. Sorry. It’s okay.

1:41:43
It’s okay. It was just a joke.

1:41:45
Will you do a video or mini series on build from figma XD

1:41:48
to bricks with ACS? Yes, absolutely.

1:41:50
Can you Okay, we already talked about that. We already answered that. Can you change the shortcut that, oh, yeah, flip back.

1:42:08
Fantastic question.

1:42:09
I mean, why did we not, why did we not look at that? Options, user shortcuts, there they are right there. Hit the little pencil, put whatever shortcut in that you want. You can even go right to custom CSS, okay? Let’s go, look at that. That was my keyboard shortcut to pull up global CSS So I don’t even have to pull up the dashboard and then go to the tab

1:42:30
I can just be like now I want to write global CSS now and I just hit the keyboard shortcut for it and it’s right there

1:42:36
thing

1:42:37
Look at that. Just it’s a real-time dashboard. It’s there in real time. It’s there when you need it It’s wherever you need it and it does whatever you need it to do

1:42:45
Let’s see, okay.

1:42:47
You mentioned months ago that eventually all forms will work with all forms. Will that be the case? Yeah, we’re still working on the idea. I know the background color for these comments is not good. Go up to where it’s darker here. So yeah, yeah, we will be, our goal is to support native HTML forms. Anything that uses just proper HTML for forms and doesn’t have a super over opinionated default styling will work out of the box Well the focus styling inherit the hover styling things like button background, so that’s a key key question, right?

1:43:24
So what I’m going to do is I’m going to go to buttons and links and you can see in primary you now have control over the focus color of every button style and So if you want like this is a primary button, but it uses primary light focus styling. And in automatic CSS, under additional styling accessibility, you can actually choose whether you want an outline or a shadow style for your focus states. And so you get a lot of levers for accessibility, which is very nice. When I’m exiting the builder or page, will ACSS have a save prompt?

1:44:02
Yes. Let’s see.

1:44:03
Okay, my only challenge with this is an integrator where one needs to keep the styling separate

1:44:07
where end users are managing content only. Don’t make them admins. It will be great, which is just a good security issue anyway as we’ve seen as of late. But we may add the ability to, in fact, other plugins may give you the ability to shut this off for certain users. I can talk to the team about that

1:44:33
and make sure that that’s absolutely doable.

1:44:36
But the other thing is,

1:44:37
no content editor person is even gonna know that’s there. That’s what’s great. It’s just, it’s not, it’s completely hidden until you need it, until you want it. You gotta know it’s there. I mean, they could just go randomly clicking this link up here and then it opens. But yeah, I mean, we can look at that.

1:44:52
We can look at that. Mm-hmm, mm-hmm, mm-hmm. Will there be an option to push content of the website besides the panel,

1:44:59
especially mobile inspector, or coming out of closed and open to see changes?

1:45:03
I’m not sure what you’re mentioning. Like you can come in here and you could even in Arc, you can split tab this. So you can have a mobile version of your website open while you adjust things in the panel. But most of the things you’re doing in the panel are not breakpoint based, right? That would be custom CSS area

1:45:34
would be doing things at breakpoints because all of the responsiveness of ACSS is automatic. If you’re thinking that you have to be able to look at different breakpoints to manage typography and spacing and things, that’s not a thing in automatic CSS. It’s just automatically responsive. It’s controlled by math scales and it’s controlled by… You can manually override things if you want to, but it’s all clamp functions.

1:46:01
It’s fluidly responsive, right? There’s no things change at this break point and not that. That’s all gone. That’s a, you know, 2007 workflow. This is a 2024 workflow.

1:46:12
Like I said, I built this whole page.

1:46:14
I didn’t even look at a break. I didn’t look at a single break point. I customized all the typography, all the colors, did the, put the layouts in, put all the content in, hit save, hit publish, moved on with my life. Even even this area right here. I mean it just goes and that you might want to come in and make like certain adjustments you know if you’re like want to nitpick it and stuff. This is a slider right. I mean it is what it is like it’s it’s just it’s just works. See it’s all it’s all fluid. All those things you might not be seeing it.

1:46:51
Like the heading, look how big it is. It just naturally gets smaller. It’s not hitting break points and changing sizes. It just fluidly gets smaller. And you have full control over how small it gets and the rate of it declining. And it’s all 100% within your control. But there’s no break points.

1:47:09
The whole break point workflow went out the door two years ago, two and a half years ago, when we the first version of automatic CSS, well, everything was fluidly responsive, responsive grids, auto responsive grids, I could it’s a laundry list of how easy this is to build sites now.

1:47:25
I don’t have WS form install, I don’t have any form system

1:47:27
installed, really. So on this install, I can’t but I absolutely will there’ll be a whole video dedicated to it because forms are very complicated I mean you know do you know what a legend is do you know what of this and that there’s a lot of form language you know so we got we have to do a whole deep dive video on customizing forms but now the great news is you can see it you can see it change while you do it what is the use case for alt colors versus just using a secondary or tertiary color? The use case for alt colors is scheming.

1:48:08
So if I add the alt color and I change it to, so there’s that color, so it’s going to be this color you see now, and then alt is going to be this. Then what I can do is I can go down to color scheme, and I can say, hey, this is a light website by default. That’s how I designed it. There’s a light website. So that means the alternate is going to be dark and then I can say

1:48:27
auto color scheme so now based on the user’s preference when they arrive on the website it’s going to serve them the alternate version of my primary color. Now usually you would want the light to just be very dark or whatever and so when you do the alt you just flip the shades values and you hit save and now it’ll be a completely dark version of that color whereas the normal version is light and it detects the user’s preference and it serves it to them. But then it also gives you a toggle switch. So we have a toggle switch in ACSS and Frames,

1:48:58
where you can just add a toggle switch anywhere you want and they can manually switch it back and forth. So you get the manual switching and you get the at prefers color scheme automatic switching. Both work and it’s as easy as that.

1:49:13
And if you don’t want the alternate color,

1:49:14
you don’t have to have the alternate color. So if you don’t wanna do anything with color scheme switching, just leave it off. The alts don’t matter, you just ignore them and leave them be. Can we make grids that have like 10 to 12 columns?

1:49:24
I might’ve missed the option,

1:49:26
but I only see up to four columns. No, it’s automatic CSS has full support for 12 column grid, full support for spans, call starts, call ends, row starts, row ends, overlapping grids, automatic grids, variable grids, content grid. It’s got every grid known to man and not known to many men. Okay? There’s nothing that automatic CSS can’t do with relation to grid.

1:49:54
I promise you that. I promise you that.

1:49:56
Let’s see.

1:49:56
Would you recommend a fresh install of the blueprint site instead of upgrading it? No, no, no, you can upgrade it. You can upgrade it. It’s going to be 100% safe to upgrade. Why should we buy this over Oxyprofs? I’m not going to vocalize why you should use ACSS over… I’m done doing that and I’ve written, I mean, like college level theses about this, theses, what is it?

1:50:32
These, see, I didn’t even go, right? So I don’t even know what it’s called. I’ve done videos, I’ve written in detail. At this point, if you can’t tell by looking at it, I mean, I don’t know what else to tell you, you know? Like it’s, as somebody said earlier, you know, like you just, you just watch it.

1:50:54
You just watch it.

1:50:55
You can just watch a couple of videos, you know, see it in action. Look at what we’re doing right here. Okay. Um, it’s a different game. It’s a different level. Uh, yes, we can talk offline about the multiple levels of authority.

1:51:06
Yeah.

1:51:06
A hundred percent, a hundred percent. Just DM me and, um, we’ll make sure, because it is important. I understand. It is important that you don’t want people coming in and just throwing toggles, switches, and inputs everywhere. OK. When will we have a visual Bento grid builder? I mean, technically, Bricks is a visual Bento grid builder.

1:51:31
You just have to know CSS grid. I know that’s not a great answer, right? But I can whip up bento grids and like that in bricks. You don’t need a visual grid builder of any kind. Like I encourage people instead of like, there’s certain things where you just wanna give the fish and then there’s certain things where you wanna teach people to fish.

1:51:50
Grid is one of those areas where I just think, other than like content grid, where even if you know how to do it, like I know how to create content grid from scratch. I don’t want to do it. I don’t want to have to do that. I just want it there. I just want it. I just want it right. But a bento grid when I can do it like that, it’s like what a visual the builders actually slow me down in a lot of cases. So in in in certain cases they are good, but in some cases they slow me down. If it’s a if it’s a basic bento grid, the visual builder is going to slow me down. So you know it’s it’s already there is the answer.

1:52:29
If enough people, that’s a feature where it’s like if enough people vote on it, then we’ll probably do it. But again, here’s the other thing you have to realize. This is not a Bricks add-on. This is not a Bricks builder add-on. This is a workflow framework global tool for page building, okay? So if you’re like, well, we need a visual grid builder

1:52:50
in bricks. Now that’s the territory of like a bricks add-on because if we build that for bricks, now the oxygen people, where is it in oxygen? Now we got to build it again. Where is it in Gutenberg? Oh, now we got to build it again. Oh, where is it in break dance?

1:53:03
Oh, we don’t have the resources to build that thing 17 different times, right? But what we can do is give the easy utilities and making stuff automatic to make it so easy for you to do a Bento grid, that you’d feel like you don’t even need a visual Bento grid builder. That’s kind of the direction we would rather go. Yes, I switched to Arc.

1:53:25
Bev and Fred were mildly impressed with the new features,

1:53:27
but questioned why there wasn’t a make the logo bigger slider or a more pop toggle included in the new dashboard. Always, always, Bev’s always, you know, mid-level impressed. Add, remove, add colors, font names, et cetera, like Core Framework would be icing on the cake. It actually would not.

1:53:43
This is just one area where absolutely fundamentally,

1:53:47
I wrote an entire article on this, disagree. It’s a nightmare for a framework. It’s a nightmare for a framework ecosystem. It creates tremendous disasters. It puts people back into frameworking mode instead of actually working. It makes them the manager of the framework, which nobody needs to be or wants to be.

1:54:15
It’s just, it’s all downside. I know it seems like it’s great. It causes way more problems than it solves. And I will continue to stand by that and we’re going to prove that to be the case as we release ACSS 101 and more videos. And you’re going to hear other content creators get on board with this because it’s just the facts of the matter. I understand people think you would think surface level that infinite flexibility to

1:54:40
call whatever I want, whatever name it needs to be or wants to be would be a good thing. It’s it’s not you’re not it’s not a framework at that point anymore. It’s not. It’s just you’re managing this extra thing, and then it gets out of management. It gets out of sync. You have projects where this is called one thing, and it’s not called the thing over here.

1:55:00
You’re importing third-party stuff, and they’re calling stuff different stuff. There’s no framework behind it. It’s just a free-for-all. It’s much, much better that confines of a actual design system. You go into any agency, it’s like, this is our design system. Stop going rogue. We don’t go rogue here.

1:55:24
Okay. That’s for a reason. Process, efficiency, consistency, reliability, predictability. These all come from not your framework, not being the Wild West.

1:55:35
Okay.

1:55:36
So again, I will, I’ll continue to stand by that.

1:55:39
Okay, we gotta hop off, we gotta hop off.

1:55:42
This has been absolutely fantastic.

1:55:43
I really appreciate everybody being here. Like I said, my goal today was like, I just, I hope people are as excited as I am. I hope we exceed their expectations. I am not a hype man. I don’t like to just hype stuff up for hype. If I hype it up, it’s because there’s a reason to be hype. And I try to stand by that as much as I possibly can.

1:56:09
Again, thank you to my team for doing such a fantastic job on this and getting it to this point. Again, this is the starting point. This is the warm-up phase. And then last but not least, ACSS 101. The link is in the description. Now that you’ve seen everything, I would highly encourage you to go get registered for that.

1:56:28
Again, you don’t need a license. You will be able to use a sandbox environment if you don’t have a license. But of course, I would encourage you to get a license. And then if you think forward to the future where this can possibly go in terms of the block editor and, you know, so if you’re, I know if you don’t live in Bricksland or Oxygenland

1:56:48
or Breakdance Land or wherever, and you’re like a block editor guy or girl, I’m just gonna tell you right now, that this is, Automatic CSS is for WordPress, okay? It is not for, it is a page building tool, but I see WordPress as a page building environment. That’s what the block editor is as well. And so, our goal is to bring order to the chaos

1:57:11
that is currently page building in WordPress the amount of order and consistency and control and all of this that this bring that ACS has bring to the table and efficiency is Everybody I believe truly everybody should be using it if you’re page building in WordPress in any capacity now You have to use a good page builder right a compatible page builder that has it stuffed together. But if you, if you’re a user of those things, ACS is a hundred percent for you. It’s the way you should go. And I prove this on video. I don’t just, you guys know me. Okay.

1:57:47
I show you step-by-step exactly why. Okay. Not just talking. It’s very easy to run your mouth as we have seen in, and with many other things. Okay. That’s not what I do. I, I show you and then that does the talking for me. For the most part, I still like to talk, but you know. All right, guys, I love you. Thank you for being here. And I’ll see you again to talk, but you know. All right, guys, I love you. Thank you for being here. And I’ll see you again very soon. Peace.