[00:00:00.000] - Nathan Wrigley
Welcome to the WP Builds podcast, bringing you the latest news from the WordPress community. Now, welcome your hosts David Waumsley and Nathan Wrigley.
[00:00:21.400] - Nathan Wrigley
Hello there and welcome to the WP Builds podcast. You have reached episode number 316 entitled Kevin Geary Talks about Automatic CSS. It was published on Thursday, the second of March 2023. My name's Nathan Wrigley and I will be joined in a few short minutes by Kevin Gary to talk about that. But before then, a few bits of housekeeping. Firstly, apologies, there was no podcast episode last week. Anybody who listens to the podcast will know that I was involved in the page builder summit. And frankly, there was just too much going on to get a podcast episode out. So apologies for that. Those of you that came to the page builder summit, deep appreciation. It was such a fun event. I got to meet lots of new people and dare I say it, made some good friendships along the way. It really was a successful event and hopefully we'll be running another one later this year, so keep your eyes out for that. Another thing to mention is our WP Builds subscribe page. Go there, it's WPbuilds. Com subscribe and you can keep up with all of the things that we do on WP Builds. The best way is to fill out the email forms and we will keep you updated with the content that we produce.
[00:01:35.220] - Nathan Wrigley
Another good page that we always mention is WP Builds. Com deals. I say it's a bit like Black Friday, but every single day of the year it's there. So searchable, filterable loads of WordPress products with significant amounts off.
[00:01:50.480] - Nathan Wrigley
The WP Builds podcast is brought to you today by GoDaddy Pro. GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30 % off new purchases. You can find out more by heading to go.me/WPBuilds. That is go.me/WPBuilds. And we really, truly, sincerely thank GoDaddy Pro for their ongoing, continual support of the WP Builds podcast.
[00:02:33.580] - Nathan Wrigley
Okay, what have we got for you today? Well, as I said, we've got Kevin Geary. He's talking about automatic CSS, which is his project to make CSS a little bit more straightforward for you. There's very few things on the internet that you really need to know. I would imagine that HTML and CSS come pretty close to the top of that list.
[00:02:53.600] - Nathan Wrigley
If you are going to be building WordPress websites, CSS is certainly something that you need to know, but it's continually changing. Continually adapting and keeping up can be hard. Well, Kevin's project, Automatic CSS is a utility framework for WordPress page builders. And the idea is it takes a lot of that heavy lifting for you. It brings along typography, colours, spacing, responsiveness, grid, and loads of customisation options. Currently, it's available for oxygen as well as bricks, but there are plans to bring it to other things, such as Guttenberg in the future. Kevin talks today about what it is, how it works, why he built it, what it enables you to do, and what new features it may bring to your CSS toolset. But also he talks about things like whether it helps with accessibility and how responsive it is, and also, very importantly, how bloated or not it is. It's a really interesting conversation about an area that we don't often get involved in, and I hope that you enjoy it.
[00:03:56.800] - Nathan Wrigley
I am joined on the podcast today by Kevin Geary. Hello, Kevin.
[00:04:01.320] - Kevin Geary
Hey, how's it going, Nathan?
[00:04:02.460] - Nathan Wrigley
Yeah, really good. Kevin and I, we've really only just met. We've had a conversation over the last few minutes, and this is going to be an exciting episode. We're going to be talking about, well, I'm going to say a brand new product that could be complete nonsense. So, Kevin, before we get into what it is that you're here to talk about today, can you just give us a little bit of background, give us some information about who you are, where you live, what's your relationship with WordPress, all of that stuff which relates to a WordPress specific podcast like this?
[00:04:28.990] - Kevin Geary
Absolutely. So I've been using WordPress since about 2005. So pretty good history with WordPress. It's the platform that I know and love. It's the platform that is exclusive to the work that I do in my agency. So I'm a digital agency owner here in Atlanta. We special specialized in web design and development as well as SEO and PPC, digital marketing in general. And I'm also the creator of Automatic CSS, which is a CSS utility framework for WordPress page builders currently with Oxygen and Bricks, but coming soon to a bunch more. I have an add on product to that called Frames, which is a rapid wireframing tool that is built with automatic CSS. And I also run a community called Digital Ambition where I have an inner circle. So we have over 800 active members right now of other agency owners and freelancers learning things like good web design and development best practices, along with how to run and build a successful digital agency. So got a lot of stuff going on.
[00:05:31.890] - Nathan Wrigley
Yeah, you really do. You're here to talk to us today about automatic CSS, which curiously, as you said, is bound into WordPress page builders. Anybody who's listened to this podcast for any length of time will know that I really have taken on board working with page builders and more recently with Guttenberg as well. First of all, let's lay out the elevator pitch for automatic CSS. By the way, if you want to go and see Kevin's work, perhaps pause the podcast, go to automatic CSS, no space basis, no underscores, nothing weird. Automaticcss. Com. And then once you've had a little poke around, you'll have more context for this podcast. Just give us the elevator pitch, what it is, why we might want to take a look.
[00:06:11.940] - Kevin Geary
Yeah. So right now, if you're using a builder that uses classes, not all builders use classes, but if you are using a builder that uses classes like oxygen or bricks, and you know the value of classes, mainly maintainability, scalability, consistency, what automatic CSS is going to do, and what any CSS utility framework aims to do is to make things easier and faster for you and to standardize everything. And so automatic CSS does this in a few different, unique ways. For example, with the color system. Every website is going to have a color system that requires color management. So you're going to have your core colors defined. But oftentimes you want shades defined as well. And if you go into a builder like Bricks or Oxygen, those builders ask you to set up your color system. And so you have to go individually define every single color and all of the shade variations of those colors. Sometimes you don't even have the hex codes available to you for these shades. You've got to look them up. And there's a lot of different aspects to managing color where with automatic CSS, you're going to plug in your main colors.
[00:07:20.310] - Kevin Geary
It's going to auto generate all of the common shades of those colors that you may want to use. You're able to tweak them and customize them, of course. So if you do have, if you are given specific values for those shades, you can absolutely put them in. But for a lot of builds, you just want access to shades of those colors, and nobody has really defined them, but you know you're going to need to use them throughout the build. And so automatic CSS makes those automatically available to you. And then you can use them via classes, like with background color classes, with text color classes. So we're using utility classes when we're doing the actual build to access things like colors and spacing and all of that very quickly. You also have with automatic CSS a concept called variables. And so you can access the colors through a variable. So if I'm making a custom class for something like my hero, and I want all my heroes to have a certain background color, I can make a class called hero. And then for the background color, I can reference my primary color for the background.
[00:08:22.460] - Kevin Geary
So I use VAR primary, and now I'm accessing that color. So I don't have to remember hex codes. I just need to know, Hey, I have primary color, I have a secondary color, I have an accent color, I have a base color, and I know the names of the shades of all those colors. As you use the framework, it's just all in your head. There is a cheat sheet, obviously, when you're first getting started. But it makes building a website far faster and far more consistent, especially if you're working across teams. Because when you're using... You have other developers on the team, they come in and you're just using maybe a random spacing values from perhaps an XD file or a Figma file. Everybody's having to look those up and there's no standardization. So one person might have put 12 pixels and another person comes in and puts 14 pixels. Now you've got spacing inconsistencies across the site. A framework like automatic CSS uses spacing values that are like medium spacing, small spacing, extra small spacing, large spacing. And so it keeps everything very consistent. And then, of course, the values for those are all tied to in automatic CSS, fluid responsive values.
[00:09:34.960] - Kevin Geary
So we would have to get into concepts like clamp functions and calc functions and things like that. They're also based on a mathematical scale. So the size difference between medium and large, and large and extra large, and extra large and extra, extra large are all mathematically calculated. So it's extremely consistent. And this is a big problem on builds that most people run into. Just like I mentioned, it might take you 30 minutes to set up your colors before you start doing a build. What about all of your margin and your padding values? If you're going to decide, all right, what is my main padding value going to be? And then what's the next step up from that? And what's the next step up from that? And what's the step down from that? There's a lot of decisions that have to be made. Automatic CSS makes all these decisions for you, but then allows you to come in and dial in. And you can dial in the differences in the spacing, margin, padding, gaps with changing the scale, for example. So you can say, Hey, I want to change how this scale is calculated, the math ratio.
[00:10:40.540] - Kevin Geary
Or you can come in and just make granular changes. There's a lot of different ways that you can make a CSS work for you, which is different from other frameworks. That's one of the critical aspects of automatic CSS is the ability for you to go in and dial it into your exact needs. Dial in the colors, dial in the spacing, dial in the fluid, responsive typography settings for all of your headings, your body text, changing this after the fact. You can build an entire site with automatic CSS. And then if you want, hey, I want a lot more white space throughout the entire site, you can go and make that one adjustment. Oh, I want everything to be tighter. You can go and make that adjustment. Do I want everything to be more breathing room on desktop, but tighter on mobile? You can make those independently in seconds, even after the entire website is built. Changing colors can do that after the website is built. So you get far more flexibility using a framework like automatic CSS than you would normally get with any other framework. Now, I know I just laid out a bunch of stuff there, so we'll get into different parts.
[00:11:41.700] - Nathan Wrigley
Of it. Exactly right. Let's dig into it. Okay, but first of all, we'll just rewind. The beginning of your explanation there, you use the phrase utility classes quite a few times, which may not be something that people are familiar with. I think we have an audience, which is... There's going to be quite a lot of page builder users out there. Maybe they don't even have any relationship with CSS. Perhaps they're just using the UI that something like Elementor provides, and they're eyeballing it. Maybe they're consistent. They've decided that they want margin of 20, and they've written down their color palette in a text file somewhere else and so on and so forth.
[00:12:15.540] - Nathan Wrigley
Just.
[00:12:16.440] - Nathan Wrigley
Run through us, what is the promise of using utility classes? Why is this approach a good idea right from the outset when you're beginning to build a new website?
[00:12:28.160] - Kevin Geary
One is speed. So when you're using utility classes, things are just going to move a lot quicker throughout your build. Because as you probably know, you get faster with a builder. And by the way, automatic CSS is a framework built for page builders. So people are using page builders listening to this thinking, Oh, I've got to adapt some hand code, CSS framework type thing to my page builder use. That's not the case. Automatic CSS is designed for people who use page builders. So that's number one. But as a benefit, speed right out of the gate. So if you can imagine having to go click a heading, and let's say you want margin on the bottom of your heading to space it out from the content below, you're going to have to click on that heading and then go in your Elementor panel or go in your bricks panel or your oxygen panel, navigate to the area where the spacing is, and then add bottom margin, or in the case of bricks and oxygen, there's always a little class box that's just hovering there because these are class first page builders. So you click your heading and then you go on the class box and you type margin bottom M, and then you hit Enter, boom, and it adds margin bottom of M, medium margin bottom.
[00:13:35.200] - Kevin Geary
And then you can do that on another element, another element, and another element. And then by the way, if your margin bottom value ever needs to change, well, you can change it. And then everywhere you've used margin in the bottom is going to adjust seamlessly. So you're not having to go back element to element to element. You're not having to copy and paste styles. So as you're building a page with utility classes, and that's where the utility comes from, right? These aren't custom classes where I'm defining custom styles per element. These are utility classes that have a predefined style that I'm trying to achieve. There's another one that saves a ton of time. So for example, if you have a container and it's got... Just think of a hero section. You've got a heading, you've got text, you've got maybe a button, and you want to space those things out evenly. There's a couple of different ways to do that. If that's a flex container, you can simply use a gap class. You can say gap M, and you'll get a gap of medium spacing between all of those elements in seconds. You don't have to go into any panels, nothing.
[00:14:33.260] - Kevin Geary
You just put the gap M on there and everything works seamlessly. If it's not a flex container, you can use a class called owl M, which is medium owl spacing. Owl spacing is a... I'm not going to get too technical with it, but it's a lobotomyzed owl css technique that automatically applies even spacing between elements in a container. A lot going on on the back end, but you don't even need to know what's going on on the back end. You just put owl M on the container and you get even medium spacing on that container, which whether it's a flex container or not a flex container. It's like magic. And then you move on with your life. You don't have to go element to element to element adding those things. And then the good thing is the owl M spacing is the same as the gap M spacing is the same as the margin bottom M spacing because they're all using the same responsive values. And that's the other thing is these are not like rim values or pixel values or anything else. They're using responsive clamp functions on the back end. So when these go down to mobile, medium spacing on desktop is now smaller on mobile and you control the scale.
[00:15:35.140] - Kevin Geary
And so what this prevents you from having to do is design on desktop. And then as we know in Elementor and all these builders, then you got to go to your tablet breakpoint, you got to go to your mobile breakpoint, you got to adjust these things. No, automatic CSS has already done all of that for you. Everything in automatic CSS is automatically responsive out of the gate. And if you need to make adjustments to it, you can always make the adjustments. But you're never going from mobile size to mobile size or to desktop size, making these different adjustments to your design. That doesn't happen when you use automatic CSS. It's all taken care of for you.
[00:16:08.200] - Nathan Wrigley
Yeah. So the idea of utility classes is to offset a lot of the work upfront with the build, and you decide what it is that you're going to have as these utility classes, prefill them out. And of course, at any point in the project, if you decide, actually, I really screwed up there, you can go back. The point being that it's not like you might do with a page builder. You might end up adding specific padding to a particular row or a particular image or a particular text area. And then at some point you have to figure out, why is it looking like that? Oh, I've set it specifically on that element within the page builder. The idea here is that you set some sensible defaults and you're off to the races. And if you change the default once, it changes everywhere on your site and they overlap. So the padding might appear in lots and lots of different places. It could be, well, you've probably explained that well enough. I guess one of my questions with this is, if you're used to the, let's say, Elementor normal typical page builder workflow that doesn't use classes and you're doing all of this work, is there a workflow change that you've got to go through?
[00:17:12.690] - Nathan Wrigley
In other words, if you're using Elementor, you might just start the project and start throwing things onto the page. Whereas with your approach, presumably there's a bit of heavy lifting that you've got to do at the beginning, some thought before you start actually building where you set up what these utility classes are and how they're going to behave?
[00:17:31.170] - Kevin Geary
So that's a really good question. And it's really important for people to understand that there actually is almost no set up with automatic CSS. So when I talk about medium spacing, large spacing, all of this, you actually don't have to define what those values are ahead of time. You can actually install automatic CSS, go right into the page builder and start building a page.
[00:17:52.620] - Nathan Wrigley
Is that because you've set up some sensible defaults?
[00:17:55.790] - Kevin Geary
Yeah, absolutely. Yes. So there's just some sensible defaults in there. And they work for a large portion of websites. However, Automatic CSS is a framework built for people who want to build from custom designs. My agency, every website that we do is a custom designed website. And so I built Automatic CSS to be flexible enough to adapt to any design need. But out of the gate, you don't have to make any decisions out of the gate. So you can start building and then you can make the adjustments as needed. There's no problem there. But in terms of workflow, somebody using something like Elementor and you want to switch to maybe a Bricks or an Oxygen and go to a class first workflow, really the only legwork upfront is just getting comfortable with using classes. That's number one. And then the second thing would be just the naming convention of the framework in general. So what classes are available to me? And this is why we have a cheat sheet. So you can go to our cheat sheet. It's actually a live cheat sheet, so it has a live search. So let's say you're like, Oh, okay.
[00:19:00.110] - Kevin Geary
I want to know how to add margin with utility classes. You type in margin, it shows you all the margin classes, margin top, margin bottom, the different values you can use. Then obviously, the more you use those, you're not going to need the cheat sheet anymore. Everything's just in your brain. That's just the learning curve right there, really. There's some other things, more heavy lifting side of things that automatic CSS does for you. It does a lot of accessibility stuff for you. But let's just talk about layout stuff like a grid, for example. So grid is extremely valuable. I don't know if grid... Is grid available in Elementor right now?
[00:19:33.450] - Nathan Wrigley
I honestly don't know.
[00:19:35.300] - Kevin Geary
Okay, I don't know either. I heard it was coming. I don't know if it already got here or not. But bricks is a great example. So bricks does not have a grid builder. In it. And it's one of the downsides of using bricks. I use grid tremendously through every website build. And switching to bricks, it's like, wonp, you don't... There is no grid builder inside of bricks. But with automatic CSS, you're able to create responsive grids in literally seconds just with pure utility classes. Even complex grids with overlapping elements, you can create with utility classes and automatic CSS. So even if the builder doesn't give you some functionality, it's probably in automatic CSS. And so I show people all the time on my YouTube channel and the ACSS channel, how to build responsive grids in seconds with something like automatic CSS. So it's not just background colors and text colors and typography and things like that, it's actually controlling a lot of complex layout elements. And I can guarantee you, I can build a responsive grid in automatic CSS, even if a builder like Oxygen has a custom grid builder. I can get it done in half the time with automatic CSS versus using the grid builder inside the page builder.
[00:20:47.280] - Nathan Wrigley
You can just type those classes quicker than you can get the mouse to the appropriate menu item and so on. Yeah.
[00:20:53.960] - Kevin Geary
Absolutely. And even with the grid builders, you need to know what's going on because it asks you certain questions that are related to CSS grid. And so if you're not really familiar with CSS grid, there's going to be a learning curve there even to build a grid with a page builder versus automatic CSS. If I want a three column grid, I put grid three. I get a three column grid. If I want a gap in my grid, I put gap M. Now I have a gap. If I want that to be a one column grid on medium devices, it's grid M 1. And so I've just added those in seconds and boom, I have a responsive grid that behaves exactly how I want it to behave, and I move on with my life. Yeah.
[00:21:33.070] - Nathan Wrigley
So on your website, which we highlighted the URL of a moment ago, there's a menu item at the top which takes you to my account. And obviously I don't have an account, but it's asking me to log in. I'm just curious as to what the workflow is here. So is all of the automatic CSS stuff done in some account that you have? Do you have to download a particular, I don't know, an extension of some kind, or are you just working inside the UI of the page builder currently bricks and oxygen, where does the automatic CSS live? How do we actually interact with it?
[00:22:08.260] - Kevin Geary
Yeah, that's a great question. So automatic CSS is a WordPress plugin. And so you are going to after you get your account, you're going to download the plugin, you're going to install the plugin just like you do for any other WordPress plugin. And it's going to make a separate area of the WordPress dashboard for automatic CSS. And this is where all of your settings live. And so if we were to go screen sharing right now, I could actually go in and show you, but you're going to have all of your spacing settings, all of your typography settings in there. And like I said, it's all set with defaults from the beginning, so you can get building right away. And what automatic CSS is going to do is it's going to detect the page builder that you are using. So if you're using a compatible page builder like Oxygen or Bricks, it's going to detect that you have bricks loaded, and it's going to load the necessary extra style sheets that apply to the bricks builder. Because what we have to do with these frameworks, we can't just build a CSS framework because they actually won't work inside of these builders.
[00:23:06.350] - Kevin Geary
All these builders do things a little bit differently with their HTML structure and the order that they put their own CSS in and so on and so forth. So we have built automatic CSS actually to be builder agnostic. So there is going to be a day where you can use automatic CSS in a custom code environment, and it's not even page builders don't matter at that point. It's built that way. And then what happens is if it detects a page builder, it adds an extra file, an extra style sheet of builder specific overrides that make it seamlessly work with that particular builder. And that's what it does for oxygen, and that's what it does for bricks. So you don't have to... There's no like ACSS bricks plug in and the ACSS oxygen plug in. It all happens dynamically. If you remove bricks and install oxygen, automatic CSS is going to detect that and fix it for you. And so it all happens inside the plug in, and then using it all happens inside of the page builder. So it's a very seamless experience and you're doing it all natively inside of WordPress.
[00:24:09.110] - Nathan Wrigley
So the utility classes that you're going to set up, let's say potentially the names and the values of those, they're going to be done inside a UI in the plugin and then you will start creating using what you've hopefully memorized or you've written down somewhere else, or you can just flick through to the plugin screen, I guess. You're going to start deploying those throughout the WordPress site using your page builder. Have I got that right or am I misunderstood?
[00:24:34.500] - Kevin Geary
Kind of, yeah. So in Bricks, for example, you have the class area in Bricks when you're building a page, you click on the classes box and it actually detects all the classes that are in the database, so it can auto suggest to you. Got it. So if I start typing in margin, it's going to show me all the margin classes. Now that only happens for classes that you've actually used on the website. However, Bricks does have an API and so does Oxygen. And so when we detect, when automatic CSS detects Bricks, it actually takes all the automatic CSS classes and puts them in the Bricks auto suggester. And so the entire framework is available to you right from the jump. You don't have to do any set up. It does everything for you. Same with the colors. Bricks has an API for the color system. So we take all the colors that are defined in automatic CSS as well as the shades, and then we natively program them into the bricks builder immediately when you first load it. So all the colors of the colors that are defined in ACSS are available to you inside of the Bricks builder as well.
[00:25:35.100] - Kevin Geary
So you actually don't even need to know what the color variable names are. You can simply pick them from bricks as color picker. They're all right there for you. So we try to make it as seamless as possible. Then there are parts of the framework that you may not want to use. And if you decide, hey, I don't need the markers part of the framework for styling lists, for example, you can easily go into the automatic CSS dashboard and go to the options panel, and you can turn off every main part of the framework. So if you want to save on resources or anything like that, you can go ahead and just unload those from the style sheet and they won't be loaded and you can't use them obviously, but you save that space.
[00:26:12.800] - Nathan Wrigley
Yeah. So the idea is basically download, set, forget, carry on. Absolutely. Yeah. So it's simple. Okay, so on your website, automaticcss. Com, you've blocked the capabilities of your framework into seven different settings. And I think it might be nice just to spend a moment or two on each of the main ones. And obviously, you've given them some importance. So the first one that you mentioned is automatic typography. Tell us about that. What is it that you're taking care of automatically in the typography area?
[00:26:43.440] - Kevin Geary
Yeah. So again, there's a lot of decisions that have to be made when you're getting ready to develop a website. What size is your H 1 relative to your H 2 relative to your H 3? And then what are the sizes going to be on each specific breakpoint? That's a lot of decision making. That's a lot of inputting those values into the builder as you're building a page. It's a lot of wasted time, in my opinion. It would be better if we could come in and have a typography system. And one, if you're working from a design, it's usually good if your designer has done this already. But it looks best when there is a mathematical scale that decides your typography system for you. Like H3 is 1.2 times bigger than H4, and H2 is 1.2 times, okay? So we get it. It's all based on a mathematical scale. Automatic CSS sets up your headings for you like that automatically from the jump and you actually get to decide what the scale is. So you're not deciding how big is my H1, how big is my H2. You're deciding what is my scale, what is my base size, and then all the sizes are being calculated for you.
[00:27:49.700] - Kevin Geary
Now, if it so happens that you're like, no, I want a specific value for my H1, no problem. You can go into the overrides for the H1 and you can put in your own value. You can say, I want my H 1 to be 75 pixels. And then it actually asks you, and what do you want it to be on the smallest device size? And you say, well, on the smallest device size, I want it to be 32 pixels. And cool. And it builds a custom clamp function for you right then and there on the back end. So now your H1s are 75 max and 32 min. And then it's fluid between those two values. And it just saves a tremendous amount of time and headache and nonsense related to getting your typography right across your website. It all looks good out of the box. It's all automatically responsive. You're never touching any breakpoints.
[00:28:32.720] - Nathan Wrigley
So you can go for the mathematical approach, or if you want to bind it and have it exactly as you want it, you've got that approach as well. So yeah, that's really nice. That certainly gets you off to the races really quickly.
[00:28:43.220] - Kevin Geary
And you could do that, by the way, you override any heading size. You can override all the heading sizes if.
[00:28:48.270] - Nathan Wrigley
You want to. Right. But a good base beginning, which is really nice here, saving a lot of time. And then you mentioned colors. I think you did allude to this a little bit a minute or two ago. But anyway, go through that automatic colors. You presumably can set up a bunch of defaults right at the start.
[00:29:02.410] - Kevin Geary
Yeah, absolutely. So you go in. The one thing you do want to set up before you start building your... I mean, you could set it up afterwards, but it's better to build a site if you're looking at the right colors. So you go into your colours panel and you simply put in your hex codes for your primary color, your secondary color, your accent color, your base colour. And then we have a shade system as well that gives you all of your neutrals, your black and your white. So you set all of that stuff up, you hit save and everything is configured now. You can go into your page builder and start using these colors. But like I mentioned, every single color that you put in, like primary, for example, is going to automatically generate six shades for you from light to dark. And you have access to those shades using classes. You have access to those shades using variables. So for example, if I'm building out my page and my section, I want it to be my base color, but I want it to be a very light version of my base color. This is a very common thing that we need.
[00:29:55.940] - Kevin Geary
I don't need to know what the hex code is. I don't need to go program it in. I can literally just put BG base ultra light and then move on with my life. And it puts the ultra light base color on as the background color for that section in just one class.
[00:30:09.750] - Nathan Wrigley
So presumably if ultra light is one variation of it, there are other words which you presumably have to commit to memory, which represent that scale of 0 to 6.
[00:30:20.100] - Kevin Geary
Yeah. And so what we do is we actually convert the colors to HSL values, and then we just change the lightness value. And then you have full control over what that lightness value is as well. Oh, nice. Yeah. And you have control over the saturation. It's going to set it for you as just a default. But you can always go in and override the saturation. You can override the lightness value. And then there's a good one is the hover. There's a hover shade of every class. And so if you're creating buttons and you're like, All right, I want my button to be my primary color. And then it always asks you, And what do you want the hover to be? And you're like, Oh, well, I don't know. I haven't even thought about that yet. Well, in automatic CSS, you're like, Well, I just want it to be the hover variation of the primary color. And you could do this across the board. So you're moving very, very fast. And then if you're like, Oh, I don't really like that hover color, that shade of it, well, just go change the shade of your hover value.
[00:31:09.190] - Kevin Geary
And then everywhere you've used hover, it just updates.
[00:31:11.450] - Nathan Wrigley
Yeah, that's fantastic. Yeah, really good. I do like the... I've not heard of that. The idea of pre providing five or six different options. I'm imagining a website like Coolers. I don't know if you've come across that where it just presents you with a palette of different things based around some central color that you've chosen. Then it gives you, I don't know, 10 or so more varying in darkness and lightness. And very often it's one of the ones that it decided might look good that you end up preferring. So that's really interesting.
[00:31:38.700] - Kevin Geary
And I will pause to say, one of the things about other frameworks that are out there that is a little bit confusing and it's a little bit hard to catch on to things is they try to abbreviate everything. So like margin bottom on the left, it's like MBX. It's a lot to memorize and digest where is automatic, CSS is extremely contextual. So we just use the full words. If you want margin bottom, you literally type in margin bottom. And so there's not a lot of abbreviations going on. Like for the shades, it's ultra light, light, medium, dark, and ultra dark. So once you have, Oh, it's just words that I already understand and already use. So it's very easy to memorize.
[00:32:23.330] - Nathan Wrigley
That's nice. Okay, this feels like one of the biggest ones, spacing, because this is fraught with difficulty. You do depending on how you're building things, you may design from the ground up. You may start on desktop and work your way down, or you may start on mobile and work your way up. Certainly, page builders in the past, you've had to do this work manually. Things like grid that you mentioned earlier, there's lots of potential here. So tell us about what's going on with the spacing and all of the different values there.
[00:32:50.140] - Kevin Geary
Yeah. So this is critical. I mean, if you look at really good designs, what you're going to see is that the spacing just seems like immaculate. It's super consistent. The difference between the sizes is all consistent there. And again, this goes back to mathematical scales. There should be a mathematical scale controlling your spacing, if at all possible. And if you look at most websites, we're talking 95 % of websites, you're going to be able to get away with, or you should be able to get away with five different spacing values. And so in automatic CSS, we have an extra small spacing, a small, a medium, a large, an extra large, and an extra extra large. And you're not even probably going to use all of those. Most of the time you're going to live between small, medium, and large, and sometimes extra large. And so all of these are set up on a mathematical scale. You have control over the scale. And they're all using clamp functions that are automatically responsive. So once again, with your spacing, you're not having to make decisions on desktop first tablet, first mobile, and all of that. It's all about a maximum value and a minimum value, and then it scales fluidly between those.
[00:33:54.400] - Kevin Geary
And then what we also need to take into account, one thing that's unique about automatic CSS is, so normal spacing is for things like you're building a card, right? Or any just random container that needs some padding in it, or that needs some margin, or a grid might have a gap. That's all normal spacing. But if you look at the structure of most websites where we have section based content, sections tend to need a lot more spacing than normal elements do. And so in automatic CSS, we actually have a section spacing system that's different from the regular spacing system. And this allows you to control the spacing in your section separately from the spacing on the rest of your website. Interesting. And so, yeah, this allows you to expand. Let's say you have a hero section that usually needs more top and bottom adding.
[00:34:44.070] - Nathan Wrigley
Yeah, you need a bit more spacing for that, I would agree.
[00:34:47.480] - Kevin Geary
Yeah, then other sections and elements, right? So you can go in and put a class called Pad Section L. And what that does is it gives you large section padding. So it targets that section and puts more top and bottom spacing. And that's all, again, based on a mathematical scale of your normal spacing system, basically a multiplier. So you can say that I want my section padding to be 2 X my normal spacing system or something like that. And so that really speeds up. Here's the biggest aha moment that people have is when they do give something like automatic CSS a shot and they build a site or two with it, what I then tell them to go back and do, I was like, Now go build a site without it. And they're just pulling their hair out. They're like, Oh, I cannot do the things I want to do. I can't do them quickly. I would have to do a lot of manual work to get this all to happen. And that's when they have their epiphany that this is an insane difference in how you're building websites.
[00:35:47.780] - Nathan Wrigley
Yeah. And it also just takes that headache away, the idea that you've got to be repeatedly going into different areas of the website and trying to remember what it is that you did previously. You just let the maths take over. You just use those five or six six different options and stick with them and know that it's going to look good with the option to override. A minute ago, you mentioned CSS clamp, and it makes me think, I wonder how many people are going to get lost at that point. So I wonder if you wouldn't mind just explaining how CSS clamp and possibly calc can be used to make responsiveness, well, automatic, really.
[00:36:26.460] - Kevin Geary
Yeah. So a clamp function in CSS basically lamps between two values. So you define a minimum value, and that's typically what you would want at your smallest viewport. And so if we're talking about an H 1, we might clamp an H 1 between, let's say, 28 pixels. Now, I don't use pixels. Automatic CSS doesn't use pixels, but it's a good reference unit for everybody. So 28 pixels on the smallest device size. And then maybe we want it at 80 pixels on the largest device size based on the width of your website. So if you are writing a clamp function, you're going to give the clamp function three values for your H 1. And this is why having a framework like automatic CS just do this stuff for you, because most people don't even know what a clamp function is. Then you learn what a clamp function is, you're like, Okay, cool. I know how to set my minimum and my max, but there's a third value in there, and it's the middle value. And the middle value in a clamp function is basically what they define as the optimal value. And it's like, I don't know.
[00:37:27.160] - Kevin Geary
What am I supposed to put there? And they don't even know what to do next. nd really because the optimal value actually needs to be a calc in itself based on the width of your website. So your width might be 1280 pixels or 1366 or 1124 or whatever. It's going to be different per website. And so you're going to have... It's a ridiculous math equation for figuring out what the optimal value of a clamp function is given your website width and all of this. You don't have to worry about any of this stuff. Automatic CSS handles all of this for you on the back end. You actually tell Automatic CSS what the width of your website is. And all of your spacing, all of your typography, everything that's automatically responsive is calculated based on that using clamp functions. You never see the clamp functions. You don't ever have to see them. All you do is say, this is my Min, this is my max, it makes a clamp for you. All your classes, all your variables that use that are now automatically responsive. And the thing is, the one downside of clamp is that not all browsers support it.
[00:38:28.080] - Kevin Geary
Now, support for it now is fine. I wouldn't even say it's an issue anymore.
[00:38:34.140] - Nathan Wrigley
Yeah, I would agree.
[00:38:35.260] - Kevin Geary
But there was a time where there was some legitimate cases where it wasn't working. And there are still some devices, if somebody in another country on a certain mobile device happens to come to your site, they're not going to see anything with clamp functions. And so automatic CSS, being that we are a framework used on thousands of websites, we want as much compatibility as as absolutely possible. And so what we've done is we've actually built a three layer fallback system. So if a browser or user does not support clamp, we actually take out the clamp function and we switch it to a calc function because calc is supported on more browsers than clamp. But then we go one step further and we check and if it's not even supporting calc, we just make the spacing follow a pure rim value. Got it. And so there's always spacing. Nobody's ever going to see something where there's no spacing when they're using automatic CSS. Now, if they support clamp, they're going to see it perfect, right? But at least they're going to see something if they don't support either calc or clamp.
[00:39:41.360] - Nathan Wrigley
Right. So there's some sensible fallbacks just in case. But I think now you're pretty safe with all of that, aren't you? I imagine you're looking at things like weird implementations of Outlook or something. Safari from 1996 or something. Okay, you mentioned the grid a minute ago. You talked about how you can do this and you're probably going to be avoiding using the system that comes with bricks or sorry, oxygen and so on. But is there anything you missed out there that you want to just dwell on or should we move on?
[00:40:12.140] - Kevin Geary
I think we covered most of it. Most people are going to just be creating very simple grids for laying out content. But just so those users who are advanced know, you can control column spans with our utility classes. You can control row spans. You can control call start and call end so that you can create overlapping grids. And there's a lot of advanced stuff that.
[00:40:34.440] - Nathan Wrigley
You can do with it. Okay, thank you. That's great. Now, there's one final section because we've done the fallback section already. There's one final section where you talk about insane customizability. Oh, I said it correctly. Well, what does that even mean? What are you talking about there? Is the stuff on top of what we just talked about that you throw in as well?
[00:40:52.980] - Kevin Geary
So the insane customizability really comes from the need to be able to adapt automatic CSS to any website that you are building. Other frameworks tend to handle this by just giving you a tremendous level of granular options. And so if you look at a framework like tailwind, for example, it's like granular in four pixel increments. So when you're choosing padding, it's like, you can do four, you can do six, eight, 12, whatever. And there's just an ungodly amount of them available to you. And that's one way to approach it. And I don't like that approach because when you're working in teams, one thing we're trying to build again is consistency. And it's like, well, did they use the four? Did they use the eight? Which ones were they using? And when you have 12 or 15 options available to you, suddenly it's hard to keep everything consistent. When you only have five options available to you, it's a lot easier. It's twice as easy to keep everything consistent. And so the problem is I don't want to be stuck if you only have five options available to me, I don't want to be stuck with what the value of those options are.
[00:42:00.000] - Kevin Geary
So automatic CSS's solution is to allow you to control and manipulate the values of those options depending on the website that you're building so that it always fits your exact needs. And you don't have a lot of classes available to you that you're just not using.
[00:42:14.060] - Nathan Wrigley
Given that this is something that you download as a plug in, I wondered if there was any cloud element here that you've built out or perhaps are thinking of building out where you can, I don't know, bring along the hard work that you did on a previous site and just download it all set up good to go? Or is there a file that you can export that you can import on a different site to just make that transitional work a little bit easier?
[00:42:36.600] - Kevin Geary
Yeah. So if you have a blueprint, for example, a lot of times agencies, they're designed stuff, they're spacing all of that because they have a certain look and feel they're always trying to stick to and adhere to. If you have all of your settings done in ACSS the way you want them, you can absolutely export them and just import them to any other site. And so every value that you've set is going to be exactly the same as this other site that you exported from. That's one.
[00:43:02.000] - Nathan Wrigley
Option for you. Nice and straightforward. Okay, so for many people, this is going to be really straightforward. They're going to understand how all of this works. For other people, there may be a bit of a learning curve. They've got to put down the tools that are already using and start with some new tools. I'm presuming that there's educational materials. You mentioned a YouTube channel and so on and so forth. Do you provide a helping hand? Do you have support on tap? Do you have a YouTube channel that you want to mention and so on? In other words, how do we get from zero to really good at all of this stuff? What are the materials that you provide?
[00:43:34.300] - Kevin Geary
Great question. And I will empathize with anybody listening to this who has not used a utility framework before or a utility framework that's like automatic CSS because it is different.
[00:43:46.200] - Nathan Wrigley
In.
[00:43:46.900] - Kevin Geary
The sense that you can't just listen to a conversation and imagine how it might work and how it might improve things. I totally empathize with it. If you're not getting it, you're not supposed to get it yet. Just hearing it, it's not going to click for you. You have to see it happening, and then it really will click for you when you've actually done it. So what we do is we have a YouTube channel. I have two YouTube channels. One is called Digital Ambition. That's my main YouTube channel. t hat's where I just teach Dev best practices, UX. We talk about agency stuff. We do a lot of stuff there. Then I have Automatic CSS's YouTube channel where I just focus on here's how you use Automatic CSS. So there is education baked in. And then we also have a private support community. And when you buy a license to Automatic CSS, you get access to the private support community. You can go in and that's where you can ask a bunch of questions. The community will help you. I'm in there and I'm very active, personally helping people. And I also have two full time community managers who are in there who know automatic CSS front and back, and they're helping people as well.
[00:44:56.890] - Kevin Geary
So you're able to get official support in that community. You're also able to get unofficial support in that community. And often you're going to see a bunch of other stuff unrelated to ACSS. There's people talking about agency type stuff in there, clients, and you're going to get a bonus, a little bit extra in there. It's a really good community.
[00:45:15.300] - Nathan Wrigley
Nice. You mentioned on the website that currently, and at the time of recording, so we're recording this towards the end of October in 2022, you mentioned that oxygen and bricks are supported, and that's largely because of the class first approach that they've taken, or at least the ability to work in that way. You've also got grade out Guttenberg, you've got Zion Builder, and Quickly. These are, from the looks of it at least anyway, these are projects that you're hoping to work with and to enable in the future. So do you have a roadmap as to when they're coming around? I don't know how widespread the use is of all of those different things, but just give us an insight into the roadmap and how quickly you want to roll those out.
[00:45:57.830] - Kevin Geary
Yeah, for sure. Our vision is to support as many WordPress page builders as we possibly can. Of course, we have a list of things that that page builder has to do in order for automatic CSS to support it. And so those that you see listed there currently do. And so one other things besides these builders, just real quick, is we're also working on integrating with form systems. So WS Form is a form system that I am very passionate about. And I tell everybody that it's the best WordPress form system. A lot of people don't listen to me until they start using it. They're like, No, you were right. Okay, I should have listened to you sooner because it doesn't look like that from the outside. But once you get in, you realize, Wow, this is probably the most powerful and easy to use form builder for WordPress. That's WS Form. So what we're doing right now is we're making a big push to integrate with WS Form to where you add a WS Form to your WordPress page inside the builder, just like you normally would, and you put one class on it. You actually have two different ones you can choose from.
[00:46:58.970] - Kevin Geary
There's a light version of your form and there's a dark version of your form. And you just put Form light and boom, it styles it in about one second, exactly the way that you want it to look. Of course, you have control over all the styling from the ACSS dashboard, but that's a big part of the project is integrating with these different form systems. So after a WS Form, we'll be moving on to Fluent Forms. That's second on our list. And then whatever other ones people vote for after that. So that's like a sub builder compatibility. But after we get WS Form released, we're moving right into Guttenberg. Guttenberg is a project that we really want to focus on and support. And of course, along with Guttenberg, gives us access to potentially supporting other block systems. But it also opens the door for us to be using frames. Our frames product inside of Guttenberg to just fully build full websites or even inside of Quix, perhaps, which leverages Gutenberg. So Gutenberg and I would say Quix are next on our list as our heavy focus.
[00:47:59.570] - Nathan Wrigley
Thank you very much. Both Mark Westgard and Joel will be very pleased to hear that, I'm sure. That's really nice. Great. Okay, so just before we wrap it up, you've highlighted a couple of times that you've got a sister product which is called Frames. Again, pause the podcast, go to getfraames. I o, just once more, getfraames. I o. What's this? How does it bind? How does it interact with what you're doing over at ACSS?
[00:48:25.740] - Kevin Geary
I've been asked relentlessly to create design sets that are based on automatic CSS. And personally, I have always disliked design sets because, again, we do all custom work, we do all custom designs. And whenever I use a design set to try to accomplish something, I find myself having to un design it and then make a ton of changes. I told the community for a long time, I'm not doing design sets. What we will do is we'll support other developers who want to do design sets for automatic CSS. And they're affiliates of automatic CSS. They can do whatever they want. They can sell their own design sets, create their own marketplace, whatever they want to do, we'll support that. We love that. Fantastic. If you like design sets. But then I started to think about it, and right now our workflow is we do wireframing in Figma. And so after we wireframe in Figma, we then design in Figma. And then after we design in Figma, then we move into the page builder and we start actually building the website. Got it. And this is a lot of work. It's a lot of work. Now, we price accordingly for doing this, but I started thinking to myself, I was like, Man, it'd be great if I could wireframe in bricks, or I could wireframe directly in oxygen so that I'm doing a large portion of the Dev work as I wireframe.
[00:49:44.140] - Kevin Geary
Now, the problem problem with that was, what about all the mess that it makes? You're just putting random glasses on things and randomly styling things, and then there's so much that there's still going to be stuff to undo. And so what we've done is we've actually fixed this with frames. So frames allows you to wireframe inside of oxygen and inside of bricks without the mess, because it's all structured perfectly according to HTML5 and accessibility best practices. But also every element, not only is it not styled, t's just un styled, it's just unstyled, waiting for you to come in and do your magic to it. But every single element and child element has a class already on it named to that element. And we use the BIM methodology, BIM, so Block Element Modifier. So everything is grouped together into components. And these classes are just empty, waiting for you to add styles to them. So that when you do add styles to them, and you're using automatic CSS, of course, because that's what it's built with, everything is scalable out of the gate. Everything is maintainable out of the gate. You don't have to come up with what the class names are supposed to be.
[00:50:52.150] - Kevin Geary
You don't have to add the classes to all of the elements, which is very time consuming. And so what we're finding is when you use frames to wireframe out an entire website because you're accomplishing the Dev at the exact same time, because you've got the scalability and maintainability accounted for, as soon as the client approves your wire frames, you go in there and you start adding the styles to all of the elements, and then you press publish, you're building a website in half the time minimum. A lot of times it's saving even more time than that. It's a tremendous, tremendous benefit to workflow and of course to margins because time is money.
[00:51:28.680] - Nathan Wrigley
And that seems to be the modus operandi that you've got going on here. Basically, learn this stuff, learn it well, and then in the future, save yourself a whole bunch of time. Don't have to repeat unnecessary tasks, which currently you probably are doing. Just one last thing before we wrap it up. I mentioned before we hit record that you, or rather you mentioned that accessibility was something that you were taking quite seriously. It seems to be a really hot topic at the moment for good reason. I don't know exactly where you want to speak to that, but I am curious to know what it is that you're doing in order to provide websites that are accessible.
[00:52:06.580] - Kevin Geary
Yeah, for sure. So I will say this that there's listeners who are like, I don't really know what accessibility is. I don't know how important it is. I would spend some time really start focusing heavily on it for two reasons. One reason is everything that we do in our industry is going to move towards accessibility. And this is because laws are moving towards accessibility. Public policy is moving towards accessibility. So yes, it is the right thing to do just to make websites more accessible to more people. But it's also going to have implications, like legal implications and things like that there are already lawsuits going back and forth. Some countries are much stricter than others when it comes to accessibility. But we should learn it because of those reasons. We should also learn it because it's just a really good thing to do. The more people that can use your website, the better. The downside is it is extremely technical. So there are accessibility implications with CSS. There are accessibility implications with HTML and the general structure of your website. And so automatic CSS handles a lot of the CSS related accessibility features. And then when we build a product like Frames, that's handling a lot of the HTML side of the accessibility discussion.
[00:53:24.280] - Kevin Geary
And there's a whole host of examples that we can give. They're fairly technical, but it's good to know when you're using something like automatic CSS or Frames, that so much of it is handled for you. And with these products and our education, we are always trying to teach best practices. Part of what we do in both of my communities is I want devs to be as good as they can possibly get. These tools are not shortcuts in the sense that you don't have to know what you're doing. They make your job faster, they make your work more consistent. They make your life easier and more enjoyable. Available, but I still want every Dev using these products to know exactly what they're doing and why they're doing it. And I want to elevate the development community as much as we possibly can. And accessibility is going to be a huge part of that.
[00:54:15.260] - Nathan Wrigley
In the show notes, I'm going to link to a podcast episode I did with several people. I might link to one with Amber Hines and one with Joe Dolson because they exemplify exactly what it is that you need to do. Not in terms of CSS necessarily, but broadly speaking, what you need to do to be to be straying away from the litigious problems that you described because it does seem that, sadly, that's the way the internet is going. But I suppose it's driven by a highly laudable ambition to make websites as accessible as possible. Kevin, we've managed to use up, as you may well have seen, more time than we probably should have done. We're close to the 50 minute mark. So I'm going to wrap it up, if that's all right. Just one final word from you, if it's okay. Should somebody be interested in this, I've obviously given out the URLs already, but if they want a more personal touch and they want to find you in particular, where would be the best place to get you? The best places, let's say.
[00:55:07.440] - Kevin Geary
Yeah, probably the number one place is my YouTube channel, Digital Ambition. I make it a point to... We do get a lot of engagement, tons of comments on pretty much every video. And I've committed to and I've put this into practice since day one. I am going to engage with every single comment on the channel. So whether that's giving you a heart or giving you a full reply. And typically, if somebody asks a question on the channel, I'm going to go ahead and give it a full reply. And so if you have questions about anything, you can go there to one of the videos on that topic, leave it you leave a comment, you're going to get a reply from me. So I think that's one thing is people are like, I don't want to spend time commenting on a video because I never hear from the person that actually produces the video. That's not going to happen on my channel. If you do want to get to me directly, Kevin@ digitalambition. Co is my email address. So I welcome you to just shoot me an email and I'll be happy to engage with you there.
[00:56:08.180] - Nathan Wrigley
Kevin Geary, appreciate you coming on the podcast today and talking to us all about Automatic CSS. Fantastic project. Well done.
[00:56:14.720] - Kevin Geary
Thank you. Thanks for having me, Nathan.
[00:56:16.700] - Nathan Wrigley
Well, I hope that you enjoyed that. Very nice chatting to Kevin Gary today all about his Automatic CSS project. If you've got any thoughts or opinions, perhaps some commentary, head over to WP Builds. Com and search for Episode Number 316. Leave us a comment there or go to the Facebook group, WP Builds. Com F ollowed S lash Facebook, and you could search for the thread over there. Again, it was Episode Number 316.
[00:56:44.540] - Nathan Wrigley
The WP Builds podcast was brought to you today by GoDaddy Pro. GoDaddy Pro, the home of Manage WordPress hosting that includes free domain SSL and 24 7 support. Bundle that with the Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30 % off new purchases. You can find out more by going to go.me.wpbuilds. And we truly, sincerely thank GoDaddy Pro for their continual support of the WP Builds podcast.
[00:57:22.590] - Nathan Wrigley
Okay, we will be back next week. Next week it'll be David and I talking about something in the Thinking the Unthinkable WordPress series, the new series that we've embarked upon. Hopefully you'll join us for that.
[00:57:34.250] - Nathan Wrigley
If not, you will find us on Monday on the This Week in WordPress Show. That is live at WP Builds. Com live. We'd love to have you join us. It's usually me and two or three other notable WordPress guests. You can leave your comments and join in the conversation. It is usually very lighthearted and a little bit of fun. As always, WP Builds. Com subscribe to keep updated. But we'll be back next week. The only thing I need to do now is say thank you for listening. I'm going to fade in some cheesy music and say, Bye for now.
