WDD LIVE 030 – New ACSS Website Walkthrough (Inside & Out)

1 0:00:00

Hello everybody. Good morning.

How is everybody doing? Welcome to another WDD Live.

Let me get the chat pulled up here. Alright.

Say hi when you jump into the stream. If you’ve already been here, say hi again go ahead and throw up some likes on the stream all right we got calisthenics islands here we’ve got Charlie and Philip and John love it okay let’s see Derek is here welcome Derek I don’t know if the screen resolution is going to be good enough for you today oh we got Ted we got We got Daniel.

Welcome, welcome, welcome. Throw up those likes.

So the goal of today’s stream, we’re going to be going over the new automatic CSS website. Goal of today’s stream is just, you know, share, you know, transparency, have fun, take a look at some things.

People might have some questions. People are always just interested.

They’re interested in the back end for sure. Like, you know, it’s not very often you get to like go behind the scenes of a website and see somebody’s, you know, how they structured things in the back end, how they set some things up, you know, walk through the thought process, things like that.

You know, I think brands especially, they just tend to launch websites and then that’s it. It’s like, alright, there’s our website and then, you know, they focus on it.

You never see behind the scenes, you never hear thought process, you never hear any part of it and we’re all web designers and so this kind of stuff is interesting to us and WDD Live I think is a perfect format to talk about this stuff because that’s what we talk about every single week and this is just an opportunity for us to talk about web design from a different angle to look at a real website to look at the back inside of things and to talk through some some things I will say this we had I developed this site on a development server and it was an absolute pain in the ass to migrate and that’s mainly related to easy digital downloads, EDD. This is the software that we use for licensing, for all of the users, for all of that stuff, right?

EDD is incapable of being migrated. You cannot safely migrate EDD anywhere.

In fact, I even reached out to the EDD team and I was like, there’s gotta be a way. There’s gotta be a way you recommend.

Like you can’t just have the server on lockdown, basically. Like this can’t be taken somewhere else, really, without like taking the whole thing offline for however long it takes and not allowing any new sales.

You could basically, yeah, you could duplicate the database and then make sure that while you’re doing work, nobody can buy the thing, okay. This sat in development for you know a couple months I was developing it on and off.

I was at the beach for three weeks. I was over here I was doing other projects, doing ACSS 2.

6 development. I got a lot of things going on.

So I’m developing this new ACSS website like you know when I when I can, when I have an opportunity to. And so you know we’re doing that on a development server taking our time with it and you know it gets to the point where it’s like, all right now we need to migrate it and you can’t do a normal migration.

You just can’t do a normal, so we had everything like buttoned up on the development server, double checked everything, triple checked everything and then to do the migration, what we effectively had to do is copy and paste content like or migrate specific groups of pages at a time using WP all import and things like, it was a very manual migration process. And because of that, once we migrated it, we basically were on the clock, you know, we had a splash page up saying, hey, this is coming soon, we did it over the weekend, basically on the clock to go debug things again, like, cause everything’s new now, it’s not like it was on the development server.

So I soft launched it on Sunday and I said, hey, we’re soft launching this, the best way for us to find any of the bugs that are now there, which a lot of them were not there on the development server, but because of the manual migration process, they started appearing. The best way to find them is just let people browse the site and show us where they are and then we can go ahead and fix them.

And so that’s what we did, kind of just Sunday, said, hey, we took the SplashBase down, we’re soft launching it, and then, you know, preparing for this live stream, take a few days to clean up anything. There’s still a couple very obscure issues with the menu only on Android devices, because, you know, Android always a little, always a little sketch, always a little behind, you know?

I’m just joking, I’m just joking. Yeah, and it’s only like, a user sent me a video, they’re like, look, when the site loads, it works fine.

When you scroll down, it works fine. But if you scroll just back up to this one little area and then trigger it, then it’s broken.

And I’m like, okay, all right. So like, there’s some very obscure things that we’re checking out.

I tried a couple new things. I’m gonna pull up my notes here in just a second, then we’ll pull up the site and start going through it.

I tried a couple new things that I’m still not 100% sure on performance-wise, for example, our highlight for headings. We have, I wanted a heading highlight style.

And I played with a few different heading highlight styles, and I ended up going with an animated gradient. And so if you watch the highlighted headings, they’re very, very slightly animated.

They’re gradient text, they’re very slightly animated. Safari fucking freaks out about this.

Safari has no idea how to handle this. Safari is like, oh my god, you’re using all my resources.

Safari is like, Safari is tapping out. It is like, it has no idea.

So I’m not sold on that. I know nobody that is in the know, nobody that really knows anything uses Safari.

It’s not just the new IE. It’s worse.

It’s worse than Internet Explorer used to be. I would highly recommend you don’t use Safari for anything.

And again, Safari apparently can’t handle, and I think that’s the problem, animated heading gradients. So yeah, if you look at it as Safari Safari is absolutely freaking out it has no idea how to handle this so you know well I’m I’m still taking a look at that it works flawlessly in every other browser Safari is like I’m out I can’t I can’t do this okay so let me let me pull up my notes and see what’s going on here and by the way I have had trouble with it.

The reason I think it’s animated, the animated gradient is because I’ve used animated gradients in other places on other sites before as a test. Sometimes it’s a large background, like a whole section background being an animated gradient.

And that does seem to cause some performance issues, not just in Safari, but some other browsers are like, oh, that’s requiring, you’re asking a lot of me to animate a gradient in that big section background there. So, I don’t know, it’s just something we have to take a little bit of a closer look at, but I’m leaving it there for now.

All right, let me pull up my, I gotta pull up my notes on this screen over here, and then I will pull up the site on the other one. Okay, let me just go ahead and get the site loaded on this screen.

All right, ecam bring that over here. Okay, a little screen share action.

Okay, automatic CSS calm. And I’ll just leave it right here where we go over the notes.

Okay. So first things first, we’ll just preface the we’ll do a preface then talk about some of the goals that I had for the website and then some of the features, some of the challenges.

This is what I would consider a minimum viable 2. 0 website.

Like the first website was the minimum viable 1. 0 website.

We built that one, I built that one back when, you know, Automatic CSS was like a concept and I didn’t even know, I didn’t even know anything about where it was gonna go, right? And so it was just like, hey, let’s just get something up.

Let’s put the basics there, whatever. That was the 1.

0. This is the minimum viable 2.

0. If you know anything about, well, you guys do.

Like I talk about my process all the time. I talk about proposing website development in a phase-based approach.

So you do a phase one, you do a phase two, you do a phase three. I do this with clients.

I do this for myself. I don’t want to tackle everything all at once.

I wanna get phase one out the door, the minimum viable new thing, and then we do phase two and phase three and phase four, and so this is phase one, the minimum viable 2. 0 website.

And so with that comes, and here’s why, right? To me, it’s better to have this out here than to continue waiting on certain things that I do feel we absolutely need.

This video right here, this video right, that one’s okay for now. This one right here, these two videos specifically completely have to be redone.

And in a way different, these are just placeholder videos. This is like, I don’t have the video that’s supposed to go here.

This one is good enough for now. Here you go.

The old site didn’t have any videos whatsoever, which I think was a huge, obviously a huge problem. So this one, I just, I didn’t have time to make the new videos and do the website and do all these other things.

So these are like a phase two thing. They’re on the roadmap, okay?

So this video and then the frames video, both are getting redone at some point. And then, you know, there’s some other things here as far as like infrastructure goes, we’ll get into that more in detail when we get to the infrastructure side of things.

The cheat sheet, you know, there’s no cheat sheet, that’s a phase two thing. And the reason that’s a phase two thing is because it relies on something that’s happening in the plugin itself.

We’re completely refactoring the JSON inside of the plugin, and then we’re gonna use that refactored JSON to deploy a cheat sheet on the website. And that way, it ensures, this is why we’re doing it, that there’s 100% match, 100% sync between the cheat sheet and the actual framework.

Whereas in the old platform, there was the JSON in the framework, and then the cheat sheet was completely manually managed. And so there was a lot of like, you know, every time you do something in the framework, you got to make sure to update the cheat sheet.

And obviously a situation like that, things are able to slip through the cracks. With this newly refactored JSON, and then the JSON powering the cheat sheet, there is no chance of any discrepancies.

Everything will automatically be 100% match. So it’s a dramatic improvement, but it requires a lot of refactoring inside the plugin and then building the deployment onto the website.

That’s a 2. 0 thing.

That’s not a, let’s not make the entire website wait on that. That’s a phase two kind of thing.

I want more tie-ins to frames. I want an ACSS tokens page.

I want more demo content. I want a lot of things, a lot of things.

But these have to come in future phases of the website. We can’t just have this thing sitting in development forever until all of these great ideas are executed on.

We gotta go in phases and just get the thing out there. That’s kind of the approach here, okay?

All right, let me hop over to the chat. We’ll start scrolling around.

I’m gonna talk about goals a little bit. Questions, we will take questions.

Good morning, Ruben. We will take questions, not right this minute.

We’ll do a whole question thing. So if you put in questions now, it’s likely to be missed because I’m probably not going to scroll way back up to go find them.

So just wait until I say it’s question time, and then you can drop your questions. Jaroslav says he’s using Safari daily.

I feel for you so much. That must be it.

I’m sorry that this is happening to you, honestly, Jaroslav. I don’t get it.

I absolutely hate Safari. Okay, let’s see here.

I don’t run into too many issues with Safari, though, as long as I’m not doing anything fancy, but it definitely is its own troubleshooting pain. Well, I mean, the fact that like, if you have a grid, if you have a grid, your items in the grid, every browser can calculate the height of those items.

So if you put 100% height, the browser is able to go, oh, well, this grid is this tall. And so that box needs to be this high.

Safari is like, I don’t know what the fuck to do. I’m out, I’m out.

I don’t know, you said 100% height. I don’t know what to do with that.

The whole page breaks. If you do 100% height in a grid in Safari, you’re donezo.

The whole page is broken. Whole page is broken.

It’s simple, it can’t do very simple tasks. And for me, it’s like, all right, I unsubscribe then.

So if you can’t handle 100% height of an item in a grid, I’m out. All right, so goals.

Goals of this website. Number one, absolutely 100% wanted it to be interactive.

We wanted to help people visualize specific things. I think we can all understand that like, if somebody talks about a framework and you’ve never interacted with a framework and you’ve never seen a framework, you’ve never used a framework, you have a very hard time wrapping your head around certain things.

And so we couldn’t just build a page that talks about the framework. And yeah, videos absolutely help, but I think it is very, very important to have a visualization of some basic things and to just get the user to participate.

That was the primary goal of the rebuild, especially of the homepage, was just get the user to participate. We don’t want the user to read everything.

We want them to participate a little bit. We want them to have a little bit of fun, a little bit of interactivity, a little bit of a playground, okay?

And so that was kind of one of the primary goals. Second goal was we wanted to introduce some color and a little bit of design.

You know, the first version was like, I said, I’m not gonna, I’m not even gonna worry about branding. I made the logo and like canvassed some shit.

I, it was black and white. There was no color, really, on the first version of the website.

It was like, it doesn’t matter. What matters is I build the best product, right now.

Right now, we gotta build the best product. We can market the thing later.

Right now, we gotta build the best product. That was the main focus.

So it was just like, get a website up, make it black and white, don’t put a lot of time and attention and detail into it, and let’s go from there. Let’s see what happens.

Now, it’s time to like, I mean, you see we got the new logo, which has been around for a little bit now. But now it’s time to introduce some color, it’s time to introduce some style and start to tie everything together and button everything up and start to put a little bit of a bow on things.

Number three, we wanted to establish a manifesto. And we wanted to really highlight, we’ve highlighted the tangible differences between automatic CSS and competition.

We also wanna highlight the intangible differences, the things that you only get with automatic CSS, and you’re not really, you’re just not able to get these things with other frameworks, namely the transparency, the education, the commitment to high-level support, those kinds of intangibles, those are the things that we, we did not highlight those on the old website at all, and we wanted, that was the main goal, was to highlight some of the intangible benefits on the new website. Number four was documentation.

Finalize the native documentation infrastructure and then focus heavily on getting the documentation out and making it the absolute best documentation that we can possibly give users. That’s very important to us.

It’s very important that users are able to get started easily, that they’re able to find answers to their questions, that they’re able to get high-level support at any time, and that we build a culture of support and transparency and communication and help and yada, yada, yada, right? That’s all a primary goal.

We wanted to simplify the backend architecture. So some of the stuff that I had done on the tail end of the old website as far as like a change log goes as far as the Documentation Center like the early parts of the documentation center it was just felt a little cumbersome and a little bit a little bit over engineered and a little bit difficult to for me to use and so I just wanted to take another stab at it and simplify that back-end architecture.

I think that I’ve done that. And then I wanted to revamp the changelog and I wanted to build a simple native roadmap.

We were using Notion for our roadmap and I don’t like it and I don’t like it being on a separate site page thing. And I just wanted to build a native roadmap.

And so this gave us the opportunity to do that. And that’s pretty much the goal.

So that was like our seven primary goals there. And obviously, you know, just building a solid infrastructure for all of the future phases of everything.

2 0:18:13

And that’s it. 1

0:18:15 So let’s go ahead and just start taking a look at things.

I’m going to go, let me pull the chat back up. So that’s in my face as well.

2 0:18:21

Okay. 1

0:18:22 Justin says, love documentation.

Yes 2

0:18:29 Okay

1 0:18:30

All right. So voted number one framework for WordPress page Well, you can see that this is a gradient all of the headings use gradient text Which I likes a little bit different.

You don’t see it all that often And it’s it just kind of gives a little bit extra dimension to it This is the animated highlight gradient that I mentioned. So we’re using that throughout.

It’s just very, very, very subtle. It’s like the action color, but kind of has a like a shine that comes across of it.

Almost, that’s kind of the effect that it gives. We don’t have to read all of the copy, but some of it, I think is important to highlight.

Automatic CSS has consistently voted the best framework for WordPress because it combines innovative features, true builder integration, that’s important to touch on, best practices, unparalleled support, and education. So the true builder integration thing, I actually, we have a whole page planned for this.

So you’ll be able to click on this and then actually read about it. Right now, this is a lapse, right?

It’s like a minimum viable site thing, right? It didn’t make it into phase one.

There’s gonna be a whole video and kind of a walkthrough of what true builder integration is. I explained it on my live yesterday in the ACSS beginner live.

But basically it’s the fact that, you know, we don’t say that automatic CSS is compatible with every page builder like some other frameworks do, because we know that a framework is only compatible like 90% with other page builders. There’s a 10% and this is Crockford’s Law, you get 90% of the way into a project before you realize you’re missing 10% of the functionality that you need and that 10% is a really really meaningful important part of the functionality and it’s a real pain in the ass to not have it.

And our goal with automatic CSS is that when you use a page builder that we say we integrate with it works seamlessly everywhere 100% of the time and if it doesn’t work seamlessly 100% of the time we’re committed to making it work seamlessly 100% of the time. Like, we’re not gonna tell you, oh, well, that’s just that builder, you know, it’s just in that builder, this thing won’t work.

We don’t ever wanna say that. We want to figure out the workarounds, figure out the solution, and make sure that people are able to use ACSS with no headaches, no roadblocks, no challenges, no frustration.

It just works all the time in every situation in the supported page builders. If a page builder is not supported, it’s because we know that it’s going to work 90%, but we’re not comfortable with that last 10% being unaccounted for.

And so we take a slower approach and we look at every builder individually. For example, quickly is coming up.

What it means, what true builder integration means is we use automatic CSS in testing with every element in the builder. We inspect the HTML output.

We inspect the default CSS that’s being applied. How that default CSS is being applied.

I give an example all the time. You know use another framework.

Try to go into Oxygen, add a section, add a grid class to the section. The whole section breaks.

Not an automatic CSS because again we go through every situation, we look at the section and say, hey, in Oxygen, there’s a hidden inter-wrapper that the user cannot access. And if somebody puts a grid class on this section, it’s gonna make that inter-wrapper a cell of the grid, the whole layout’s gonna break.

What we need to do is program in an override so that when the user uses a grid class on an Oxygen section, it works like an actual grid. It doesn’t break.

That’s an example of true builder integration. We do that for every single builder that we market integration with.

And we refuse to say that you can use automatic CSS in any builder that you want, even though we know it’s gonna work 90% out of the box. We’re not comfortable with that 10% that’s not gonna work.

And so we tell you not to use it until it’s on the list of official integrations, okay? That’s the difference.

And that takes a lot of extra work and a lot of extra time and a lot of extra management and a lot of extra Support, but that’s the experience that we want users to have Okay, so that’s an important we put that in the in the in the top like that’s that needs to be communicated right off the Bat it’s it’s another you know good example of a difference Okay, you can go right here to plans and pricing if you want to you can watch the video if you want to if not you’re gonna scroll down and you’re gonna first meet the testimonials. We think that social proof is very important, very important to put social proof at the top.

Phase two is gonna be collecting all new reviews. These are all the reviews from the old website.

I didn’t even put any new reviews in here yet. But this is the frames slider component.

So that’s another upgrade, right? The old website was just built with automatic CSS and native bricks stuff.

This site uses no native bricks elements except for the sticky header, whatever. This is the frame slider.

This is the frames slider in vertical mode. And so, yeah, we’re using frames.

And the entire website was built with frames, by the way. So if you have a hard time telling, hey, there’s no template in here like this.

Exactly, exactly. Frames is your starting point that you work from.

It does a lot of initial work for you. And then you do your customization work.

You build what you’re supposed to build into the website after that. And it does do a tremendous amount of work for you.

But you can obviously, this is an example of, you still get to a very custom outcome and it did 100% save me tons and tons of time. In fact I love frames because when I add like these are alternating feature cards basically right?

It added the whole structure there the auto alternating the mobile all of that stuff is already taken care of for me. I’m able to add stuff like that and then just spend as much time as I want on like actually customizing and designing.

I don’t have to worry a lot about a lot of the underlying work, like the drudgery type work. It’s like, oh God, another two column feature card that has to alternate on desktop devices, but not on mobile.

Like you don’t have to do that redundant work over and over and over. It’s just done for you.

You can focus on actually customizing it and making it yours. Okay, so we got after the testimonial social proof we go into you know the big like why do people this is another big question people have why why should I use a framework why do people use a framework yada yada yada so we want to highlight some of the main reasons that people use a framework no decision fatigue is a big one and I’m gonna probably build out a page or some type of walkthrough of this.

I already have an outline of it, but if you sit down from scratch, let’s say you’re not working with a blueprint. I mean, a blueprint does help you a lot, right?

There is an endless amount of decisions you have to make, especially if you’re not using clamps. I mean, people saw a lot of this in PB101, setting up variables, setting up tokens for everything, clamp functions, yada, yada, yada.

And if you don’t use clamps, if you don’t take the time to set up all that stuff manually, then what are you doing? You’re deciding, for example, what’s your H1 size going to be?

Now what’s it going to be at the L breakpoint? Now what’s it going to be at the M breakpoint?

Now what’s it going to be at the S breakpoint? You’ve made four decisions just for a freaking heading.

Now go to heading two, make all the same decisions for heading two. Now go to heading three, make all the same decisions for heading three and heading four and heading five and heading six now your paragraphs now your different paragraph sizes And it’s just on and on and on it’s just endless decisions, and then when you’re building out a page It’s like oh is this going to be 1m or 2m or one and a half m or this or that?

When you have tokens when you have what Dave Foy refers to as t-shirt sizes for everything small medium large Actually, you don’t you all of the decisions go away, and when you have contextual variables like grid gap, content gap, container gap, hey, oh, it’s a container gap, oh, it’s a grid, grid gap. There’s no more decisions.

It’s just, you already know what the answer is. You don’t ever have to know what the values are.

You don’t have to care about the values. You’re just flowing through workflow.

It takes a lot of the decision fatigue out of the picture. And that’s huge.

That is a main, that’s why it’s number one, that’s a main benefit. That you get the consistency, you get the automatic mobile optimization, you get, this is our area to highlight why people do this, why people say, yes, I wanna use a framework like automatic CSS, okay?

Then where we get to next is the actual playground. This is the, hey, let’s get the user doing something, let’s get them, we don’t want them just reading, we don’t want them just watching videos, we want them to do something, okay?

Interact with the page a little bit. It’s gonna keep them on the page longer.

It’s gonna give them a little visualization of some basics, right? And so for example, right here, they’re able to say, okay, what if I did choose a different action color, for example, and I hit generate?

And okay, now that’s interesting, right? And it’s like, imagine that that took place all across your website, all at once.

You know, this is the value of tokenization. This is the value of having all of these shades and transparencies available to you.

All of this gradient text, this text right here is using transparency. This is all built with shades and transparencies.

These are a very, very important part of web design, especially if you’re doing like more custom web design. Even the background glow is just a token and transparency of our action color.

It’s like everything is just done with tokens. And again, that takes all the decision making out of it.

Right? Okay, so let’s keep going.

And then we get down here. I’ll explain how all of this was done in just a second.

So fluid responsive typography, we want people to be able to visualize what does that actually mean. So you see a little desktop icon right here, and this is what everything looks like on desktop.

And then you get to see how it fluidly would scale from depth down to mobile, just with a little slider action. And then we try to make it fun.

We got some little emojis. You can grab the emoji.

You can move the emoji, okay? Then we come down here to get beautiful spacing rhythm on every site with zero effort.

This gives you an example of the t-shirt sizes for things. Hey, you want small spacing?

There’s your small spacing. And we see that change reflected over here between a grid of cards.

You want medium spacing? That’s what that looks like.

You want large spacing? That’s what that looks like.

And every single one that you choose is also going to fluidly scale from desktop to mobile. So you’re gonna see that happen visually inside of the grid.

Then we come down to build any layout in seconds with responsive grids and columns. This is the visualization of, hey, do you need to make a two column layout?

It’s one thing. It’s just a grid two right there.

Oh, you need to be three columns? Okay, just put grid three instead of grid two.

Oh, you need it to be a one third, like a sidebar situation. Okay, that’s there for you.

Not every option is here, but we want to visualize, you know, just three simple options, give them a little bit of a visualization of how this works. And then we come down here.

Creating components is a very, very important part of web design. I talk about components all the time.

I talk about globally having one source of truth for an element or a group of elements that you’re going to be using all over the place. You’re going to use this card a thousand times, my man.

You better have some global control over that styling. Right?

And so we have what effectively is like an unstyled card right here for the most part. And we allow people to see, OK, I add variable space m.

Right? That’s going to apply the padding inside the body of the card.

Then I add a little card gap. This is a demonstration of a contextual variable.

All of our cards get a card gap. Hey, what’s the gap value supposed to be in your cards?

If you’re an ACSS user, right, you could go to another site you’ve never touched in your life, right? And they’re like, hey, can you help us work on this site?

Oh, it’s an ACSS site, by the way. Oh yeah, sure, I’ll help you work on it.

And you’re building a card. You don’t have to go, hey, what value are you guys using for your card gap over here?

What is this, one M, two M, three REM, four VW? 10

0:30:52 What is it, what is it?

1 0:30:53

What is it? You don’t have to know, doesn’t matter.

You just know, hey, cards get a card gap, that’s it. And so you throw a card gap on there and everything spaces out evenly.

You throw a base dark on there, you get your base dark on the background of the body of the card component. You throw a little radius onto the edges, right?

You have your action color highlighting the underline on the link, and then you want text S because you want that body text to be a little bit smaller. And so once all of these are applied, it’s telling you, hey, your component is done.

You can even view the code output. So you can see an example of how these tokens are used in the CSS.

And this is whether you’re writing your own CSS or using these tokens within the builder. This is basically gonna be the outcome.

You can swap back and forth. And then you see, of course, if you undo a styling, it’s, you know, the car’s not finished, so those controls are gonna go away.

All right, so we’re gonna keep going. Solve common development headaches with a few clicks.

Here’s an example of a minimum, this is a minimum viable section. This is not the section I wanted to have.

So what I did here is I had buttons and I click on these and we’re just firing a frames modal right okay so it’s annoying you know you have to do each one individually I wanted to use vertical tabs here I also want a visualization of each of these items so this is going to be redone with vertical tabs and visualization inside of each tab body but the frames tabs component is not ready yet. It’s in beta, but I wasn’t comfortable.

It’s not to where I want it to be to deploy it on a live site. So I was like, well, got to figure out a different way.

The commitment was we’re not gonna use Bricks native components for this. So I want to use everything from frames.

The tabs element, Waji is buttoning it up right now, it’s about to be re-released and then it’ll probably come out of beta very soon after that. But I think this next update will allow us to finally say, okay, we’re going to be able to deploy this tabs element.

It’s a tabs element that, by the way, breaks down into an accordion on mobile devices, really nice. So, as soon as that’s ready, I’m going to switch this section up.

This is going to vertical tabs with visualization of each thing inside of the tab. Then we wanted to highlight the cheat sheet panels, the live preview, contextual stuff.

This was not highlighted on the old site, so I thought the best way to do this is just show it in action, like show how the user is going to build a little grid section here and how these contextual panels make this really, really, really easy. You’re rarely ever having to type anything in.

You’re just right clicking, left clicking, right clicking, left clicking. Sometimes you might want to search for something up here in the search box, but it goes from, hey, we don’t have a grid of cards, so we’re going to build a custom grid of cards, and we’re just going to use all contextual panels to do that, and this is what that workflow looks like.

Then we have a frames video down here, because we do want to highlight frames a little bit. We go back into Social Proof here.

So we’re kind of sandwiching everything between social proof We got your sliders up here for your social proof and then down here We have a more of a featured kind of social proof section again. This is a frame.

This is straight out of frames And then we got our footer going on. So that’s the home page.

We’ll take a we’ll pause for a second We’re gonna go take a look at some other pages in just a second. But uh, let’s see If anybody has we’ll do a few questions if you have any questions about the homepage, let’s knock that out first before we go into another area of the website.

And don’t worry, we’re gonna get to the back end of all of this in just a little bit as well. Okay, Kevin, you checked that Bricks have components in development.

Yes, yes, yes, I was so happy to see that. Surprising, cuz I was told that it’s probably going to be a while, and then the next roadmap that came out, it was like it jumped right into the in-progress column.

So, really, really, really, really excited about that. Okay.

Do you ever use the same primary and action colors? I was wondering if it’s better to disable the action color if I don’t have a separate one for that, or leave them both set at the same value.

I would need an example of why you would use the same color for both action and primary. I said on the live stream yesterday for beginners, absolutely use action.

Use action for your website’s action color. It’s contextually, that’s exactly what it was designed for.

I would not use primary for your website’s action color. Okay, I think it’s not good to have pattern at the grid and spacing section.

To me, it takes the focus away from what’s happening. The first impression, I thought the pattern was part of the feature.

If I took the pattern away, then you would know why the pattern is there. The pattern provides structure to a container that has no other structure without the pattern.

Plus, I really like the effect of the pattern showing through these kind of glossy cards, which gives them a bit of a texture and it gives everything just a nice outline. Probably, this is just one of those areas where it’s like a subjective thing, you know, 30% minimum of people are just gonna hate something for whatever reason.

And then 70% will love it. And then if you change it, it’ll just flip.

And you know, so some situations are unwinnable. I imagine a lot of people will like this.

And then I imagine a lot of people, you know, some people won’t like it, whatever. But it has a purpose.

The purpose is to provide structure to the container so that this block and this block aren’t just floating in space, right? 2

0:36:51 Okay.

1 0:36:52

Ruben says the interactive aspects are incredible. Mind blown.

Yeah, I think, I think they’re fun. You know, I don’t think they’re like over the top.

They’re not like crazy. But they do allow the user to interact and visualize and stuff like that.

Is there a reason you don’t mention the builders you support on the home page? We initially did And then you know, it’s it’s just a decision of I think we eventually moved it to the manifesto page Which we’re going to take a look at this is the menu by the way Yeah, I wanted to do something that I that you know, just a menu style that I don’t often use That’s not typical and because we have a techie audience, I was comfortable with not having a standard navigation up here and going with just the hamburger menu.

I think you guys can handle it, right? It’s not like I’m trying to attract my grandmother to use automatic CSS.

So I felt comfortable with just going with the hamburger menu. And then I wanted to say, hey, main links, like main pages people might be looking for when they are a prospect.

Let’s put those front and center and then over here. We’re able to get a lot of the other You know sub pages and things like that and then users of course there’s also this menu right here for logged in users So if you’re logged into the website you have just you can bypass this modal menu You just get a quick links section to all of your other areas that are important to you like You know getting your downloads and going to the support community or looking at the documentation or getting your affiliate stuff.

So that is kind of a little dual purpose action up there. Ruben said 100% not with Breakdance.

Yeah, yeah, yeah, yeah, I would imagine. Especially, we’ve talked about Breakdance integration.

We would just not integrate with all of the pre-built elements in Breakdance. We would tell users, I mean, we already tell users not to use those.

I’ve already done plenty of videos and demonstrations of why you should never use pre-made, pre-built elements in really any builder, not just in Breakdance. But sticking with that philosophy, we would just tell users, look, this is not for, if you wanna use the standard workflow, web design workflow, but in Breakdance, then we’ll support that, but we’re not gonna support the prebuilt elements.

Okay, what is the circular purple and pink letter a logo? What is the, that was the old, it was a initial concept for an icon.

It’s just there as a placeholder for now. So we don’t really have an icon that we can use with this new logo.

So, and I don’t like, a lot of people like the old icon. A lot of people like the old, I don’t, I don’t like it.

It also is, even though it is technically balanced, like if you got out a box and put it in a box, it is technically balanced, but it looks off balance because of the way that it’s designed. I don’t know if anybody remembers what the old icon looked like.

And I just, I hate that as it offends my OCD. So I don’t want to use the old one and I don’t want to use this one, but I also don’t have a new one.

So it’s just hanging out there. It’s just waiting to be kicked to the curb.

It’s like, hey, I put in my two weeks notice, but it’s been more than two weeks. That’s kind of its situation.

Okay, I put a clause in my contract saying that I can’t promise how my websites render in Safari that clients need to sign. Yeah, I think that’s a good idea.

We should all just boycott it at this point should the frame CTA be a bit different to stand out more in the ACS as home maybe maybe I don’t know it was it was initially kind of like one of these feature rows and then what I did is I just kind of boxed it a little bit with the highlight which is very faint but yeah so it kind of stands on its own a little bit, but yeah, I mean, you could probably make a case for that. 2

0:40:53 Okay.

1 0:40:54

Let’s see. Yeah, see, Derek says, I like the old triangular logo and the new word logo.

Yeah, but the triangular logo does not fit with this. This is, see, that’s the thing.

The old logo is sharp, right? This is soft and flowy and sleek, you know, they don’t, they clash.

So they can’t go with each other. 2

0:41:18 Okay.

1 0:41:19

The documentation pop-up in the learn column link does not have a close action. How does this impact accessibility?

The documentation pop-up in the learn column. Documentation pop-up in the learn column.

I don’t, there’s no pop-up here. I’m not sure what you’re referencing.

Documentation pop-up. This is the documentation link, and this will take you to the documentation section, which we’ll take a look at in just a minute, but there’s no pop-up.

I’m not sure what you are referring to. 2

0:41:50 Not sure.

1 0:41:51

Okay, you gotta clarify that. Okay, grandmas can be a techie, says Tomia.

2 0:41:56

That is true. 1

0:41:57 That is true.

I did not mean to offend any grandmas who may be watching this stream, but I will say, you know, statistics say that most grandmas, including my grandma, including my mom, actually, they need, they need a standard, let’s just say they need a standard navigation. They might get a little lost.

Hey, what’s that? What’s the bars?

What’s that? What would they call that?

What would they call that up there? You know, I don’t know.

We need to know. All right, let’s keep moving.

So what we’re gonna look at now is the, let’s look at, we can look at the manifesto, we can look at the pricing page. Let’s go plans and pricing first.

That’s probably where, I don’t know. I don’t know what order people would go in.

We could do some user tracking. I imagine a lot of people are gonna go, I think a lot of people do go straight to the pricing page.

They’re like, ah, just show me the price, right? So this is the pricing page.

Same pricing, same kind of grid structure, we’re just using new cards. And these are cards straight out of frames, okay?

So straight out of frames. They don’t have the little plus sign in them, in frames, that’s an added element.

Obviously, you know, we customize the top of the, there is a header section in these cards So it makes it easy to color this differently from how the body is colored this kind of fades out a little gradient action here But literally this is mostly just straight out of frames straight out of frames This whole section in fact is straight out because it has the intro like this it has the lead paragraph It has the three cards in the grid straight out of frames Here is a repeat of the primary social proof and then this section right here is straight out of frames. This is the frames accordion.

This accordion has built in a FAQ schema. One click adds the FAQ schema.

So again, not using any bricks components here. This is all part of frames.

2 0:43:55

Okay. 1

0:43:56 And then this FAQ section is, that’s another part of phase two.

I want a page you can go to for FAQs that’s searchable, sortable, all that good stuff. That’s gonna be part of phase two as well, because there’s way more FAQ related stuff that we can put on the page than just what’s here.

This is like the minimum viable FAQ section. All right, that is the end of the pricing page.

Of course, this will go to EDD checkout, which, oh my God, EDD checkout is just makes you I mean jump off the bridge face first get out the water go do it again like EDD is I can’t say enough bad things about EDD and I can’t wait to transition away from EDD which we are planning we are planning okay we’re gonna go check out the manifesto so manifesto page very simple it was 100% focus on the content. Let’s not make it pretty, flashy, just 100% messaging.

This is the message, this is the mission, this is the why. I think having a manifesto is like a very important part of doing something like this.

And so you can feel free to read that on your own. I wanted to highlight the core pillars here.

And then this is where we did the supported page builders. It just felt like, okay, you know, we just gave them the whole manifesto and here’s the main points and here’s where this happens.

Right, it kind of all seemed like it flowed that way. You know, if we put all this stuff on the homepage, so how long is the homepage gonna be?

You know, like you have to strike a balance. So we felt the stuff on the homepage is most important for the homepage and then this got put here.

All right, that is the manifesto page. We did the pricing page.

You can log out here if you’re already logged out. Obviously this is gonna say log in instead of log out.

So it’s just a very simple conditional logic stuff. All right, let’s take a look at the documentation center.

So we have a little notice here about rewriting the entire documentation library and all of that. There is a search feature which we’ll take a look at in just a second, but I wanted all of our main getting started docs to be front and center, our main fundamentals docs to be front and center.

And then if you scroll down, you can get into like, all right, I want to dive into the entire every utility in the framework, every feature in the framework, show me some documentation on how it’s used. And so if I click on accessibility, for example, we just published these are quite fresh, right?

So they’re kind of a good example. So if I click on clickable parent, for example, I wanna learn how the clickable parent technique works.

So we have a full write-up, there’s even examples, and it says, here’s a card that’s wrapped in a link, okay? Use a screen reader or Apple voiceover to interact with it.

You’re gonna see that the accessibility is poor. Below is a card that uses the clickable parent technique.

Focus on it and hear how it’s announced. So the documentation center is not just like, ho hum, here’s how to use a feature.

It’s more of our commitment to education. It’s like, if we have a commitment to education, then you commit to education everywhere, right?

This is an opportunity to teach about proper accessibility, not just here’s how to use the feature. So we have examples of poor accessibility, proper accessibility.

We go in and use mark elements. When you search for something, this is gonna help, and it’s gonna help highlight the things that you most likely searched for.

Speaking of my mom, she is calling me. Okay, we use code, inline code blocks everywhere these are styled inline code blocks separately from our normal code box anytime we’re highlighting HTML it’s like let’s make a let’s make sure or CSS let’s make sure that we are putting those in inline code blocks let’s have really nice screenshots of things make everything prominent easy to see it takes a lot of time and effort inline code blocks with line numbers easily selectable Copy paste it somewhere Showing you know the here’s how to use the utility class version of this.

Here’s how to use the Variable version of this here’s how to use the SAS version of this here’s like every piece Should be represented And it just keeps going and going and going and it’s like every detail that we think you would need to make sure that you’re able to use this, we’re trying to bake into the documentation. And then organize it in a nice logical fashion, okay?

Global focus styling right here. And then you see over here, now this is an example of like functionality.

Okay, so because I use the tools that I sell, right? It’s like, you find features on your own where it’s like, damn, can’t do that, need to be able to do that.

This is not even, this is the frames accordion element right here, okay, used as a vertical sliding navigation. This is just the frames accordion element.

Of course, you can change all of the tags on this component. So it has a nav tag, it has an ARIA label of, I think, like documentation navigation, something like that.

It has proper ULLI structure. It has proper sublist structure.

And then it happens to just work in an accordion. It uses Bricks query loops to query the categories first and then query the things associated with that category.

Again, we can look at maybe some back-end structure type stuff. But this is a frames, this is not a special like component thing, it’s just a frames accordion element.

But the fatal flaw of it that I noticed for user experience, see how it is, has a little blue dot to let you know, when you’re looking at global focus styling, see the category is accessibility right here, right? And I can get back to that category just by clicking on that link.

But notice that it’s highlighting a blue little blue indicator saying hey you are currently in the accessibility category in this document But what I want it to do is know that it’s in accessibility and have this open Notice it also. It’s a blue dot and a different style for what I’m actually reading right now, okay?

But I want this to be open when I’m reading a document for but that’s not possible right now. But guess what?

It’s coming in the next update because I want it and I need it and I use my own shit. And these are the, anytime I run into something where I’m like, nah, it’s gotta be better than that, then it’s gonna get better than that.

That’s kind of how things work. Okay, so that’s a little bit of detail there.

We can go back to docs. This is all built with ACF.

This isn’t using a documentation plugin or anything like that. It’s all advanced custom fields.

And again, I refactored it so it’s simpler than it was before. It uses a lot of bidirectional relationships before.

It was built on MetaBox before. I’ve just, we’ve simplified it a lot.

Okay, I think we looked at, that’s kind of enough for the documentation. The search, again, was another important function.

This is the, I use search WP on the back end to run the search part of like the you know database functionality but I believe this is the bricks default search box right here so if we just search for something like buttons and we’re gonna see what happens next so we’re gonna get your search results I’m actually probably gonna release this as a frame. You’re gonna get this like search results, basically this whole page, you just drop it in and it’s a frame.

But there were some unique challenges to it, right? First of all, you have to exclude a bunch of things.

Like you don’t want internal pages coming up, you don’t want users coming up, you don’t want like, it’ll just try to show you everything. So you gotta turn off all the stuff that you don’t wanna show up in search.

And then I put little labels here for what the thing is like it shows you hey this is part of the documentation this is an article on the blog if it’s a standard page it’s not going to have a label it’s just gonna that’s that’s a page if it’s another part of the site then it’s gonna have a label for that it’s all just uses conditional logic to identify what the item is and then show the appropriate label but again it’s like, you know, little, little things like that, I think, are important. Okay.

Of course, if you can’t find what you’re searching for, you may want to contact us. It’s going to take you.

. .

Oh, well, there we go. See, this.

. .

Oh, this actually is really important. Let me tell you guys, if you are building sites in bricks, this is not.

. .

I don’t think Oxygen does this. This is actually a critical thing.

I was like, never again. Put it in our documentation never again do this Okay, let me edit this page with bricks and let me see Is this a template or a page?

There we go. There we go right there Look at what this is why this happened because of the migration I had to fix every Button like a chump I had to fix every button on this website and link every link in the footer every link in the menu I had to go manually fix them When you don’t migrate the database when you are just copying a section Okay and imagine this with frames like you’re copying a section into your site you want to use it if You’ve used this feature of bricks this in choose an internal post page go here and choose the contact page and hit save, you go paste this on another site, that shit’s broken.

That’s donezo. That is not gonna work.

You’re gonna have to fix every button and link and that’s the migration path that we had to take because of EDD like I explained in the beginning. And so every connection was lost.

You know what doesn’t break when you do this? External URL, forward slash contact, put in the relative path and hit save.

I can copy this anywhere, that’s going to the contact page. If you, I said never again will I ever use this internal post page select a page thing.

I get it, it’s cute, it’s convenient, it’s not maintainable, it will break your shit. Do not use that.

So external URL, put in a relative path like you’ve always done, like we’ve always done for years and years and years, hit save, that’s the way to go. I’m telling you right now, that is the way to go.

Okay, so let’s go back, and you see what happens. We find a, oh, there’s a rogue button that we forgot to switch out the URL on.

Okay, that was the search. So we did search, we did documentation, we can take articles, I mean, this is fairly basic stuff.

This is a frame guys. This is this right here is a frame That’s it.

It’s just has the action Gradient put onto it Then we can click on this This is a frame this whole thing is a frame right here this whole blog post template. Just drop it in on you just have to style your little badge up here and This is a custom field that you’ll want to add.

I can show you this in the back end actually. So edit post.

2 0:55:18

So if we scroll down, 1

0:55:19 so you’ll see that there’s a blog post lead custom field.

And this allows you to populate this up here with like a little lead paragraph for the article. And then let’s see, click on Kevin Geary.

Does this break in the migration? No, this page is a frame right here.

This is a author archive page. The whole thing is a frame.

I just switched out, I think it has a different grid on it, so I just switched out the grid to match the other grid. And it populates the user’s avatar and the user’s bio and the user’s social links.

Looks like this LinkedIn icon is having a hard day. Fix this little LinkedIn icon.

What happened to him? What happened to him?

I don’t know. And then we just got the normal, just a repeat of the post grid, but it only pulls in that author’s articles, which is nice.

Okay. So you see like frames, you know, did a lot of heavy lifting here, lot of heavy lifting.

And especially after you’ve customized something, you know, when you’ve already customized these blog post cards, you could drop them in on an author archive page and that work doesn’t have to be done anymore. Just like kind of plug and play and go.

2 0:56:28

All right. 1

0:56:29 What else do we need to look at?

Did we miss anything down here? I mean, there’s like typical, oh, yeah, yeah, yeah, the change log and the roadmap.

Man, let’s not forget those sections. Let me see what the chat’s up to.

Okay. Philip says, I always choose external, but was not sure about this good to know.

Yeah, well, I wasn’t sure about it either. I was one of those people was like, oh, that’s a cute little, nice little feature.

I kind of like that, kind of like that. Until I had to migrate it a certain way and then everything broke.

And I was like, not such a cute feature. Won’t be doing that again.

Live and learn. Okay, please float the L side nav and documentation section so I don’t always have to scroll back up to get to it.

Oh, let’s see, documentation. Yeah, I thought about that.

My concern was this is not the final size of it. There’s a lot of documentation areas missing.

This is gonna get bigger. And then when it’s sticky, I’m then I’m, then you have to deal with overflow potential issues.

So it’s just chilling for right now. But if I can, if I can make it sticky without any problems, then, then we’ll make it sticky.

It just may take a little bit of refactoring. It’s one of those things.

It’s like, look, I only have so much time before this thing has to go live. So, you know, it’s just going to chill there for a minute.

I don’t think it’s the end of the world on a long article. It is annoying to have to scroll back to the top.

Thankfully you can just flick of the wrist you know flick of the wrist get you back to the top. Not like the old days where you have that stupid little wheel inside your mouse.

Hopefully you guys aren’t using those anymore. Alright let’s see menu animation bug click the menu two to three times during running animation then the slide and left will run backwards.

Yeah I know and that’s um this uses motion. page to do this.

And yeah, I need to look into, if you rapid fire it, if you’re like, oh, I’m gonna fucking break this thing, then yeah, you’ll probably be able to break it. In fact, I’m, there you go, right there.

Because you’re confusing the JavaScript trigger. Like, you didn’t give it time to send its data to where it’s supposed to go.

Which, I don’t think, you know, most people interacting with a menu are gonna click it and then actually read some things and then they click it again and it’s gonna reset. It’s not like, nobody like furiously, I mean Bev, Bev probably goes off on that menu element.

But I think most people are just like, let me open it and read, okay, cool, let me go somewhere. Oh, I don’t, okay, let me just close this.

All right, perfect. The other thing, there is challenges with these things.

And I’ve always, what have I always said? I’m like, hey, simple is typically better for the user, for you as a developer, because these kind of things just make nightmares.

They make nightmares happen. For example, motion.

page does not by default trigger animations on keyboard input. See how I just clicked enter on the keyboard?

I didn’t click it with the mouse. I hit enter on the keyboard and the animation still fired.

That doesn’t happen by default. You have to add JavaScript to make sure that that happens.

Same thing with closing it to reset the animation, right? So that only happens correctly again because of that extra JavaScript that we had to add to make sure that this is working with keyboard navigation.

What else? There was another, it’s another aspect of it.

I can’t remember what the other thing was, but there is definitely another thing. This works with keyboard focus, okay?

All this is accessible. You know, we’re trying to cross the T’s and dot the I’s.

There’s never, we never say, if you’re in this industry, you already know this, never ever tell anybody that something is gonna be bug free or that there’s not gonna be a single issue or that it’s gonna be absolutely perfect. That’s never, that’s not even the goal, honestly.

Like you just, you kind of build knowing bugs. In fact, I think, I think that the 30, what is it?

37 signals, is that who makes Basecamp? They have a great podcast, by the way.

I think one of their latest episodes was, there’s going to be bugs. Like, that was like, their whole episode was dedicated to just accepting there’s going to be bugs.

And so if you’re a software developer, if you’re a website designer, you know, your commitment is, your commitment should be to squash the bugs as fast as you possibly can. You can’t make a commitment to bug free because it’s just not possible.

So your commitment should be squash the bugs as fast as you can. And everybody in ACSS land knows that we follow through on that commitment.

Like bugs do not linger in automatic CSS. We can’t say that they’re never gonna be there, but they don’t survive very long.

All right, we get out that fucking roach spray and we start spraying ASAP, right? We make sure the bugs are taken care of.

2 1:01:20

Okay. 1

1:01:20 I started going through some of the documentation yesterday afternoon.

2 1:01:23

It’s really an A plus upgrade. 1

1:01:24 I can definitely see the effort that was involved.

Yeah, it’s huge. So thank you for recognizing that.

There’s a link to your dev site in one of the FAQs. Yeah, that’s 100% probable, 100% probable.

Okay, let’s see, poor Bev. Poor Bev is getting roasted.

She always gets roasted, she’s used to it. All right, question, do you think you need more space between alternating cards on homepage?

Might look better at times three. It’s one of those things that’s like, let’s go back.

I wanna take a look at the change log in just a second. It’s it’s it’s one of those things.

That’s like let’s go back I want to take a look at the change log in just a second You know some people like a lot more white space some people don’t like a lot more white space It’s just one of those. I don’t know my question would be You know is there?

Something like confusing about the amount of white space that’s there are you unable to interact with the features? Are you unable to read?

I mean, I don’t know. I think it’s one of those subjective, like, can we win in that situation?

We make more white space, suddenly, you know, the emails start coming in. You got too much white space, right?

It’s like, that’s why I like on WDD Lives, I don’t tend to harp on that kind of stuff, unless it’s an obvious, there’s an obvious problem caused by it, or things are colliding. It’s like, hey, you need some white space there.

Like things are touching, they shouldn’t be touching each other. That kind of stuff.

But I’m never usually like, this needs an inch more white space. It’s just like preference, right, at that point.

Does the internal page break even with full migration? No, no, no, I think if you actually migrate the database, then it’s probably not going to break.

Um, yeah, I don’t think we’ve ever encountered that before. It’s just when you have to manually migrate things or maybe copying and pasting one, one thing to another.

Like if you have a section on the site and you’re like, I want to use that over here now in that instance, obviously you would check the link. It’s a one off thing, but if you have to do a lot of pages or a lot of sections, you’re gonna create a lot of broken links.

And to me, it’s just one of those situations where you go, you know what? There is no downside to relative URLs.

It’s how we’ve always done things. Put in the relative URL, and you never have to worry about it ever again.

Why would I wanna use a situation that I have to worry about? Like, did it break?

Did it not break? I don’t have to worry about that.

If I can just get something out of my brain, I got enough stuff to worry about. So if I can get something out of my brain that I can say I never have to worry about that, it is a relative URL, it’s not gonna break, okay, then I would just go that route.

2 1:04:13

I love that those after stylings 1

1:04:15 that indicate something interactive.

Oh, like, oh, you’re talking about these right here? Yeah, the little emoji guys.

I think, I assume that’s what you’re talking about. How did you make the coming soon page?

You used to plug in or ACF MetaBox out on Sunday. Oh, that was another thing, that was another thing.

So after we migrated it, you can’t in Bricks, there’s a limitation of Bricks in the templates. What I wanted to do is I wanted to create a template for the coming soon page and then assign it to all non-admins, for example.

Like if you’re not an admin, you see the splash page everywhere. You can’t do that.

There is no feature, and even though they have that logic somewhere else, like in loops and or in dynamic data, they have that logic, I believe in dynamic data, but they don’t have that logic in templating. And so what we had to do to access that, sorry, conditional logic, that condition, we had to basically create an overlay in the header template that covers everything and Then assign that to users that aren’t admin That’s the that’s the route that we went, but it was a frame.

It was just yeah We just popped in it was once again. It was like hey.

I don’t want to do that work That’s just rote nonsense works only gonna be here temporarily like I why not use a frame. It was a coming soon page.

Who wants to spend their time building another coming soon page? Don’t you just want to pop one in and move on with your life?

So there’s coming soon pages and frames. Okay.

Okay. Not enough white space causes user.

Okay. All right.

So there’s a couple people who are like, we want more white space. All right.

Let’s get more white space then. So let’s open this up.

We’re gonna take a look at the backend anyway. Let’s come down here, choose our, we’ve got a grid somewhere in here.

Feature section delta. All right, we’ve got intro and then we’ve got feature grid delta.

I believe this does the containment of all of these cards right here. Okay, and so we’ll see, where’s our gap right here?

We’ve got a container gap times two okay so you guys want a little how much do you want you want three you want four you want five what do you guys want just t-shirt sizes right point five how much more how much will tell me how much more how much was an easy fix how much more do you want what let’s dial it in together where do you want the white space to be calculated we were at two this was this was where we were where do we want to go? Put your votes in.

2. 5, 3, 3.

5. Where do we want to be?

I got you. I got you Bev.

Come on Bev, where do you want to be Bev? 2

1:07:02 Tell me.

1 1:07:03

Bricks Extra’s got these dynamic tags for logged in users. 2

1:07:07 That’s handy.

9 1:07:09

Mm-mm-mm-mm-mm. 1

1:07:10 Just a tad more white space.

Come on Bev, you got to quit using TAD. I need, give me a value.

Give me a value Bev. I can’t do a TAD more.

I don’t know. I don’t, a TAD is not a thing.

I can’t write container gap times TAD, right? That doesn’t work.

It doesn’t work. It breaks.

2 1:07:29

Phillip said 2. 6.

1. 1

1:07:31 I love it.

That’s, should I manage that? Should we make that dynamic?

Every time we release another update the section spacing gets it we get a little bit more white space in the section spacing that would be fantastic i’m actually i’m pretty positive i could actually do that um okay so let’s go oops i clicked out of it all right well you said 2. 5 let’s try 2.

5. I think, let me see if we could be cashed here.

Let me make sure we’re not cashed here. Crockford’s second law is it’s always cashing.

It’s always cashing, Crockford’s second law. No, this is the 2.

5. So is that not enough?

2. 5, it’s a little bit more.

It’s a tad, it’s a smidgen. It’s a smidgen.

Bev counters, Bev counters a tad with a smidge. Do we like this?

Are we settled on this? This is 2.

5. Are we settled on 2.

5 or do we need to go more? Oh, Squinting Yeti says pi.

3. 14, yeah, that’s a good answer.

We could go with that. John says make it three, get on with your life.

2. 8, we got to vote for 2.

8, we got to vote for 3. 0.

All right, let’s make it a let’s make it three I’ll let three marinate for a while. Okay, some of these things it’s like any any designer probably knows, right?

See how easy this stuff is in a CSS to make these adjustments Any designer knows you gotta let some marinate a little bit make a change let it marinate come back to it Give it a little taste. Okay, maybe sprinkle a little bit more salt and pepper You never know but you got to let it marinate a little bit how’s that are we we’re a little better right you guys feel that a little bit more breathing room not so cramped okay all right we’re good there all right let’s see I love how Kevin play with the production site hey hey I am you know I am NOT scurred okay I am I will play with a production day long all day long all right let’s see let’s see here hard refresh now it no it’s 100% it’s not because I caching is not for me most caching bypasses the admin so because I’m logged in it’s if I was logged out would be a different story but because I’m logged in I’m fairly safe okay let’s do we can do back-end stuff.

Oh no, no, no, we need change log and we need the roadmap, change log and roadmap. All right, so let’s hit the change log here.

I’ve changed this a couple times. I went badges, like here’s the challenge with the change log.

So as you can see now, which I actually really like, I feel like it’s kind of elegant and it’s colorful. It just some indicator lights.

It’s like, Hey, let’s go stop lights on this. So green is a new item.

Blue is a enhancement and yellow is a fix. This is kind of interesting on, on how this is done a little bit.

I mean, most of you, maybe a lot of you do know how it’s done, but it’s still good to cover. I also changed these from modals into accordion.

Once again, frames accordion to the rescue used with query loops works seamlessly just really really good the reason I didn’t do tabs I mean look at the level come on I mean this is a little level of detail right you can all we can all admit this is a nice little level of detail did you even notice that the markers for the items are colored according to where they live, right? The marker color matches, if it’s a new thing, it should have the new marker color.

If it’s an enhancement, it should have the enhancement marker color, right? Okay, so what were we saying?

Oh yeah, the badges. I had new, enhance, fix, like you see often in a lot of places.

And it’s great on desktop, guys. It’s nice on desktop, it’s fine.

But it’s also very redundant. Like it’s got new, new, new, new, new, new, new, new, new.

Like we get it, it’s fucking new, okay? Like this feels more elegant to me.

Plus on mobile, these elements on mobile, let’s see what’s going on, yeah, fucking jQuery all the time with the, EDD, another, gotta have the jQuery to run your EDD. It’s still 2010, apparently.

Another reason to get rid of jQuery. But let me come down here into, all I wanted to do is view this on mobile.

Those badges, especially improve, because it’s a longer badge, it throws all these things out of alignment, okay? And then now you got like a staggered effect of your headings going on, which is not good.

And then when you really get down to these devices here, it’s just you’re trying to fit too many things in there. These bullets just they just stay nice.

It doesn’t matter like what size you’re looking at the page on, they just stay nice and they keep everything in alignment. I thought it was a good way to go.

I thought it was a good, I like it. And this is a frame, this whole thing is a frame.

The whole damn thing is a frame, the whole timeline, it’s a timeline frame. I just swapped in the accordions.

It doesn’t come with accordions out of the box. You just throw in an accordion, toss a query loop onto it, and then you’re good to go.

Let’s change out this icon for your brand logo. It’s nice.

Okay, so how is this done? We can start, let’s do roadmap, then we’ll look at back-end and how stuff is done.

But this uses data attributes. So we throw data attribute on here, whether it’s, because you can select in the change log, as you’ll see, whether an item is new or an enhancement or a fix.

And then we just pass that data into a data attribute. And we use the data attribute to style the color independently.

So like a enhancement is colored blue and then changes the marker color to blue of any body item and so on and so forth. Okay, and yeah, I feel like when I changed this from modal to accordion, I was like, oh, this is way better.

It’s way better as an accordion. You don’t have to get the pop-up thing going and close it and it’s way better.

Plus, I don’t have to indicate that something is clickable. It’s accordion by default already has the icons that indicate it.

It’s really nice. It was a really good change to go from modal to accordion for this.

Okay, let’s go to the roadmap. Roadmap was not a frame.

However, if you guys want it as a frame, I don’t know how often people need a roadmap for something, but I will make this a frame for sure. But again, we’re just right back to the accordion element.

And what I did for refactoring this, I did not create a custom post type for this. In the old site, there was a custom post type for the start of the roadmap.

And again, it just felt over engineered for this area of the website. Same with the, the changelog does have a CPT for it, but I got rid of all the relationships that were tied to it, because again, it just felt a little bit over-engineered.

Trying to simplify everything as much as possible. So what this does, we’ll start on this page looking at the back end.

But this is, you know, it’s basically I wanted two columns. Let’s not go crazy, all right?

Here’s what’s planned, here’s what’s being currently developed. And then we can just from that page, like if I want to edit the roadmap, I just go to edit page.

We can just take a look at how this is set up here okay so you just see two columns ACF straight into the page straight into the page and then this is just a repeater so I can just add as many rows as I want to and fill out the fields and I can hit save now the only bad thing about this knock on ACF but yeah I don’t know if metabox does this as well I can reorder these, but I cannot drag them into the other repeater. I really wish I could.

So you have to be a little chumpy here. Thankfully, it’s not hard, right?

If I want to move color refactoring, it’s that, and then just delete it from there. So it’s slightly, slightly chumpy, but chumpiness has a rating as with everything.

You know, you could be a two out of 10 chump, you could be a nine out of 10 chump. Sometimes you gotta just live with being a two out of 10 chump.

It’s like, hey, hey, I can’t be perfect, alright? So we’re gonna be a two out of 10 chump.

But we wanna strive to not be a seven out of 10 chump, or eight out of 10 chump, a nine out, definitely don’t wanna be a 10 out of 10 chump. Sometimes you gotta just say, hey, I’m gonna be a little bit, I’m gonna be a two out of 10 chump.

And that’s kinda what this is. You’re a two out of 10 chump, gotta do a little bit of chumpiness, but all in all, it’s better than maybe another over-engineered method to get rid of all the chumpiness.

Sometimes you just live with a little chumpiness, it’s okay. All right, so that, I mean, that’s pretty straightforward, right?

We all know how to assign custom fields to a page and then call them onto the page with a repeater. That’s starting to become fairly basic stuff.

Change log, we’ll start diving, we’ll start digging around into the backend. Jim Hopper’s Stranger Things, no, that is not a Stranger Things reference.

It is a reference though, but I haven’t shared the reference yet. Not 100%.

I think it’s gonna be the reference we’ll see love the change log accordion I love the execution the timeline frame the get frame site version so much more balanced yeah there’s the get frames dot IO change log I wanted to do something different yeah I do I do like this but you know what with long change log items it you know it leaves a lot of dead space here, right? So it just depends.

It’s again, it’s preference. I like them both.

I like them both, honestly. But yeah, we have, this is the two frames that we have.

We have, or two timeline frames that we have. We have another timeline frame in the works, I believe.

But these two are really, really good. The, actually, this one’s the old one.

The new one has the dot indicator that slides as you scroll down the page slides with your scroll, which is cool Okay Okay back in we’re looking at back ends let’s go here Let’s go to change log and see how this works, so we’re starting over with the change log I’m gonna go add new, here’s where you can write your notes for the change log entry. And then it’s just a matter, it’s just a repeater.

It’s like, here’s your title for your item. Here’s whether it’s new, fixed or enhanced.

Here’s the details of it. The details are gonna be put into the body of the accordion.

Drop another one in, bam, bam, bam. And it’s pretty, pretty simple.

This used to be all bi-directionally related to documentation, and that just created extra complication. And then it’s like if you’re wanting to put a feature in the change log, but you’re not ready to do the documentation for it yet, there’s a little bit of a holdup, it’s just simplification, simplification.

Woosa, meditate, just go easy on it. You don’t have to over-engineer it.

So there’s no relationships anymore. It’s just, hey, just add your items, publish it, do the documentation.

When you get a chance to do the documentation. It’s all good That kind of thing so look at very simple right you just need a change log action Then you drop in the frame we can go look at the frame how that’s done Let’s go to

2 1:19:26

Change log 1

1:19:28 Edit with bricks.

Okay, so let’s drop this down. So it all starts with timeline section Lima.

This is what you import into the page right here with frames. Okay, so like if I go up here, go to remote templates, type in timeline.

By the way the ACSS menu is right there. It is now available inside of frames.

So if you want to use that exact menu. Oh by the way, I mean it has got, I got to show you guys that thing.

I mean that thing is like, I framed it up. Like, it’s actually not done this way on the automatic CSS website.

I had to give it the extra frames love for all the people who are gonna be using it. Well, we need to take a look at that.

In fact, let’s take a side quest. We need to go on a side quest.

Let’s go to Bricks here. Take a little side quest to see exactly, because it’s actually quite complicated.

It’s quite a complicated little thing. And I wanted to make it as easy as possible to edit and implement.

So if we go into templates here, we open the modal menu. 2

1:20:36 All right, it’s not gonna come

1 1:20:37

with the motion. page animations.

I didn’t wanna make it, oh, by the way, if you wanna use this frame, you have to have motion. page.

So it just starts here. You can animate it if you want to.

It does have the hover effects, okay? Let’s go here and look though.

So you can see all of, so there’s a nav, there’s an unordered list, then there’s list items, but this is the main part of the navigation, right? That’s the main list item, and then there’s a secondary list item, because these have sub lists in them.

That’s where you finally get to your LI, which is your link wrapper, and then you get to your text link, okay? You can absolutely query loop this up.

So if you want to create like a main menu thing and then your sub menus, you can absolutely query loop that. But it has to start out manual because we don’t know what you’re going to do.

Are you going to do it manual? Are you going to do a query loops?

We don’t know. So here it is manually.

And then you just delete what you don’t need and query loop what you want to query loop and you’re good to go. But you can see it’s fairly like deep.

Then there’s a lot of stuff going on, obviously, with the animated arrow indicator and all of that. So the question is, do you as a user wanna be digging through, where the hell is the styling coming from?

Activating classes, like just looking around, like where is everything coming from? Or, or, do you wanna just click on this, click on this class right here, activate the class, come to the style tab, CSS, and look what we have here.

Literally everything that you would probably want to change is just local ESCO variables. So you wanna change the link spacing, here you go.

You wanna change the link arrow gap, here you go. You wanna do the hover arrow gap, so this is, see that gap on hover versus not hover?

That’s all controlled right here. Do you wanna change your link color, your link hover color, the max size of your link, the min size of your link?

Do you wanna do the link weight? Do you want everything that you may want to change just right here in a nice little list and you can change the, you want to change the animation time.

You could do everything from right here. You don’t have to go dig around, it’s just it.

So put in the menu, change up the values, hit save, move on with your life, that’s kind of the goal. All right, just wanted to show that real quick.

That we kind of take that approach to every frame 8

1:22:49 if you’re not a frames user,

1 1:22:49

that’s, we try to do that as much as possible with the frames. 2

1:22:53 Which is something that you,

1 1:22:55

you’re not gonna see that in any other design set. This is not, this is not gonna happen.

I mean, you may start to see it, you may start to see it, but you didn’t see it before, right? Okay, let’s do change log now.

All right, so timeline section Lima is what you pop in. Then we have intro alpha, we have timeline Lima, notice it says CSS tab.

So if I go to the CSS tab, we’re gonna see this is where you can change some things. Okay, more locally scoped variables and stuff you might wanna edit.

We open Timeline Lima and we see a unordered list with a list item. There’s where your query loop is.

Here’s your pagination element down here. And then you have your date wrapper.

You can see it highlighted right there. This all uses CSS grid to create this.

There’s your icon wrapper. There’s your content.

Inside of the content, so this loops through, this first loop loops through the actual changelog entries, okay? Which are, if I go backwards, these.

So it’s got a, we got a query these onto the page. Then there’s a nested loop.

So here’s the frames accordion and here’s the item in the accordion, that is a nested loop that then queries the repeater that is basically creating all of the rows of the change log. So all of these row items are then queried with that second loop.

And it knows that it’s querying from that initial item that was queried. That’s how that works.

And so really, you know, it’s not a lot on this page, right? It’s like an unordered list, a list item that’s a loop, and then an accordion with a list item that’s another loop, and then a pagination element, and it’s done.

So that’s how that was done. Let’s see here.

Documentation center. So they’re just, it’s a custom post type.

It’s got its own category system, right? So they’re just, it’s a custom post type.

It’s got its own category system, right? Categories have, and I recommend you do that.

5 1:24:55

I see a lot of people not do this. 1

1:24:56 I highly recommend you do this.

Put descriptions, especially if your categories have any SEO value whatsoever. You wanna put descriptions in here and then you wanna query those descriptions onto your archive pages.

This really, really helps with SEO. And it really helps make the content of those archive pages more unique.

Especially if you’re maybe sharing things between categories, it’s kind of important too. All right, let’s go open documentation.

All this uses is, let me open one that actually has documentation in it. That would be a good one.

So let’s do, where’s, I don’t have, I removed my date field. Let’s go find global focus styling as an example.

Okay, so hey, here we are in Gutenberg land. All right, this is the thing that I’m a fan of Gutenberg for.

Use it for what it like is for. Don’t use it to build websites, but use it to create posts.

Like this is what it was designed for and what it’s actually decent at doing. So yeah, we use Gutenberg content here.

For certain things I am using generate press or generate blocks, excuse me, because now that we integrate with generate blocks, like the, remember the card that I showed earlier inside the documentation? That was done with generate blocks.

So yeah, that gives me a lot of flexibility in like demonstrating certain things. By the way, if you’re, if you’re referencing code anywhere, it’s very easy to do in Gutenberg.

You set this little down arrow right here and then do inline code. And see, that becomes an inline code and then you’ve styled it as inline code.

It’s gonna show up basically as a badge on our website. That’s how it shows up.

So it’s very easy to do that kind of stuff. 2

1:26:40 Yeah, that’s it.

1 1:26:42

I mean, there’s really no magic going on here. It’s a custom post type with custom content and then it’s queried onto the page.

We can go take a look at the documentation templates. In fact, let’s look at the templates of this site.

Here’s all the templates. If I can date these, let’s see.

This would put them in order of how they were created. But yeah, they’re shuffled around a little bit because of the migration.

Okay, there’s the maintenance page that we could not actually deploy. This can be, let’s mark that for deletion.

I’m not gonna delete it now because I want to double check it, but we got a 404 page going on. We got, this is just a, this 404 page is a frame.

Why would you want to spend your time building a 404 of just slapping a frame? We’re gonna have a whole collection of 404.

We actually have a few more. There’s a whole collection of like, some of them are cute, some of them are simple, whatever you want to do, but nobody wants to build a 404 page.

Come on, this is not, this is, that’s below us, right? That’s below us, so pop in a frame, 404 is done, check the box, move on with your life.

Okay, let’s go back to templates. Let’s close this, get out of there, get out of there.

We don’t need to be in there. So here’s your docs.

We have the docs home, so that’s an archive page. We have a docs category page.

We have a docs sidebar. That is a, and this is why I don’t, this is like more of like a component type thing.

I don’t like the fact that it’s just floating in here with the page templates. I really want Bricks to make a distinction between like, hey, here’s components over here, here’s templates over here.

I hate that they’re all mixed and matched in here. Now you can use, what is this called over here?

Happy files to organize all this stuff, but still, we shouldn’t have to do that. It should have two separate areas.

And then there’s the footer. Is there anything else related to Docs that we have to look at?

Nope, that’s really it. So we’ll open Docs Home, we’ll open Docs Cat.

Yeah, there should be a Docs Single. Where’s Docs Single?

Docs, there it is, Doc single. Okay, so here’s the home.

Looks pretty much like you would expect, right? This is all query looped onto here.

So we have a utility card. This was a frame, this was a frame.

It was like an icon card. I just removed the icon and was like, oh, we don’t need the icon.

And then I added a bunch of fancy hover effects to it. Notice it has the new focus parent shadow on it so that you can, because it’s using clickable parent, see clickable parent, right?

Focus parent shadow. These things are not just for like, Oh, let’s just make fun videos about them.

Like it’s actually stuff you should be doing when you, when you build a website and this stuff just makes it easier. Uh, so this is querying categories.

So doc categories is being queried here. That’s it.

I mean, it’s very simple. Bricks makes this super easy.

The query loop stuff and bricks way better than oxygen, as I’ve said before. So we can see here, this is querying docs, but now down here, you’re saying, okay, we’re only gonna query the doc, the setup category.

So because this is a setup column, makes sense that we would only query the setup documentation. And then over here, what are we querying?

We are querying the fundamentals documentation right there. So terms include fundamentals, and that creates those two sections right there.

This queries all the categories, and we’re good to go. And then once you create a page like that, then you need a category template for when you are viewing a category page.

Category page has a loop on it that just queries docs that are part of the taxonomy, which is grabbed dynamically based on the category somebody selected right so it’s just grabbing the ID of the current category and then querying the posts for that category into this thing this thing right here is a frame this little this little hover row icon thingy is a frame I just stole it from it’s not an individual frame but it’s part of another frame I just stole it and I was like oh we’ll use that right here so I didn’t even have to build that thing. Here’s the whole accordion setup that you can see over here.

And that’s that. Then a single has the same one, but has different, you had to change the query loops on these because the query loop on an archive page has to query differently from one that’s on a single page.

If I remember correctly, had to do a couple of different things there. That’s why this ended up being like a component type thing because I needed to be able to share it between pages but change some things.

And yeah, this just does WordPress content, right? That’s it.

Okay, let’s shut that down. Does anybody have any specific questions?

I don’t know what else you might want to look at on the backend. Reviews is a custom post type.

Our policy pages is a custom post type. I really like keeping these things separate.

Has its own archive page, which is really nice. FAQs obviously is a custom post type.

Downloads goes to EDD, 7

1:31:48 which we want to stay away from.

1 1:31:50

We don’t want to tell anything related to EDD, we’ll give you an instant headache. You don’t want to go there.

Search WP is here. Yeah.

Oh, make sense. I wanted to show you guys, I’m doing a lot of stuff lately with Mixins.

Now I had to turn off, I migrated all the CSS, all the compiled CSS from WP CodeBox, I put in a Bricks Child theme, because there’s something about WP Cloud hosting, we haven’t figured it out yet, does not like these import statements, hates these imports, like the way that we hook into automatic CSS works everywhere else I’ve tried it, WP Cloud hates it. I don’t know, it throws errors.

So, this was another thing, on the dev environment, all this stuff works, like, and notice I’m using partials to organize everything. So we’ll look at that in just a second.

That’s why this global style sheet isn’t very long. Look, it’s calling all of these partials right here and compiling one main sheet after that.

But I wanna take a look at the mix-ins here. I wanna take a look at how this stuff was sectioned out.

Unfortunately, it all broke on WP Cloud. And so I had to get all the compiled CSS and just slap it into the Bricks child theme, which is fine, it’s not a big deal, but it was an extra little headache.

So you can see here, let’s say this is very important. Let’s take a look.

So there were some things that Automatic CSS did not do for me that I wanted it to do. Like I wanted a 5% version of the complimentary color, 5% transparent version of the complimentary action color.

Well, fuck, that doesn’t exist in Automatic CSS. But you know what Automatic CSS does?

It gives you the ability to do anything that you want to. So I just made a new HSL statement and I used color partials from automatic CSS.

We give you the comp H partial, the hue value of your actions complimentary color. And then you can just take the saturation value and the lightness value.

We give those to you and then just slap a new percentage on it. And suddenly you have a brand new transparency that you can use via token wherever you wanna use it.

I did that for 10%, 20%, 50% of the of the complementary colors. Because we only give you the main complementary color, we don’t give you all the transparencies and all the shades and all the you could but you can make them if you want to.

It’s very easy to make them. There wasn’t a shade light trans 15 so I made one.

It’s not like oh well it doesn’t give it to me so I guess I gotta pack my things up and go not not use this. Yes no you have the tools, you just go ahead and make it real quick.

It’s all good. I wanted a small content width variable, so I made one of those.

Yeah, that was it. Okay, so let’s go down.

Anything interesting here? Probably not, this is like the main sheet.

Not a lot interesting here, I wouldn’t think. All the interesting stuff is in the partials.

There you see the include button default, right? Mix in from automatic CSS to make a custom button.

So you’re gonna see a lot of mix in includes, right? So those are probably what’s interesting.

You know, the affiliate area had to do a lot of custom styling, overriding. Look at this, I mean, they use tables in W.

Who uses tables anymore? Oh God, styling tables is so fun, guys.

Styling these tables was just, that was fantastic. I love that part.

But it keeps all my custom table styling over here into a nice little segmented area for partials. Here’s some key frames for the gradient that we’re using in the animations partial.

So you can keep all your animation key frames together in one place, you can keep all of your blog styling together in one place Here’s all of my styling for the all custom CSS for the changelog. There’s your little data attributes, right?

So hey, if it’s a new feature set the background color to this set the color to this right? Alright, and then let’s go down to Docs All of our documentation custom styling here.

Oh, there you go. There’s Edd.

Oh so much fun in Edd lands EDD lands, a lot of EDD overrides. Lot of that looks like absolute crap, let’s style that differently.

Then we get to our mix-ins. This is the fun part.

And so, you know, there’s mix-ins that we provide in Automatic CSS, then there’s mix-ins that I just create based on what I need to have happen on a particular website. One of the, like the text gradient, so I can slap a text gradient on anything and it’s not just, I can dynamically choose what colors are gonna be involved in the gradient, okay?

So, you would say include text gradient and then put a color here and a color here and it’s automatically gonna generate the linear gradient for you and then it’s gonna web background clip it and fill color it. This is what you need to do to get text gradients.

So it’s just a mixin that I can deploy on any text at any time and have custom colors and that’s really helpful. SAS, for me SAS should be the standard.

It’s like, I don’t know why we’re still playing with vanilla CSS, like everything should run on SAS in my opinion. The amount of power that it gives you, the efficiency that it gives you, it’s like SAS is the greatest thing since sliced bread, if you don’t know.

And these mixins is one powerful part. You got mixins, you have loops, you have the way that variables work in SAS is way more powerful than vanilla CSS custom properties.

It’s just SAS all day, SAS all day. Here’s the overlay light mixin.

So like with one line, include overlay light, and then I choose the direction, by the way. Do I want the overlay to go up or do I want it to go down?

Those are my options. And so you see the conditional logic.

There’s another thing, conditional logic in SAS. Like if the direction is up, then we’re going to do this gradient.

If the direction is down, we’re going to do this gradient. And again, you just build this once, and then you can just deploy it anywhere in your custom CSS with literally one line.

One line will deploy all of this and it’s deploying a pseudo element as well, right? So that’s really cool.

There’s my background, my cross backgrounds with the background image so I can deploy the BG cross anywhere on a custom element. Here’s the block BG for the playgrounds.

Those blocks like the, here’s your columns, here’s your this, there, you know, I think you get it. So those are all done with a mix in.

Here’s my highlight mix in. See, this is what it takes to get animated gradient text.

And you don’t want to copy this all the time and paste it. And what are you going to do with all these raw values that are sitting in here?

You don’t want to be at this is like Chumpville. No, no, no, you just make a mix in for it.

And you can deploy this mix in. And now you have a, the mix in gives you a single source of truth for a lot.

It’s almost like a component kind of behaves a lot like the styling, the true styling of a component would do. Then we have an underline mixin.

We have a premixin. This is for styling pre’s.

That’s preformatted text. That is for front end code blocks.

And then we have an actual code block mixin styling. And then there’s our delay.

You know where the delay children feature came from that I put into automatic CSS it came from this site animating things while I was working on this site and I was like you know what that should be a we should have a delay children because this is a common problem where you need to animate a bunch of items in a row and you don’t want to put like alright this item is going to be a hundred milliseconds this items gonna be 200 milliseconds this items gonna be three it’s so manual so oh so horrible now you can just say include delay children, tell it how many items are in the list and then what the starting delay is gonna be. And then it’s just gonna calculate the, this is actually the difference in delay.

This is the difference. So if you want more difference, you make this 200, 300.

And you do this on the fly when you’re deploying the delay children mixin. So include delay, it would look like this.

At include delay children. And then for this box that I’m working on, this component, I would say there’s five items in this component, and I want the gap delay of 200 milliseconds.

And then I just hit publish, done, move on. And every item in that list is gonna get, or in that, really not even in a list, just in that group, is gonna get delayed for the animation.

And that’s what creates something like, I didn’t actually have to use this because I switched to MetaBox or not MetaBox, Motion. page.

But see that delay, how home comes in, then manifesto, then pricing, then log out. If you’re not using something like Motion.

page, you can create that same delay using that mix in right there, which is really nice. Because like I said, those are a pain in the ass to manage.

Okay, I got to check in with the chat. It’s been a while since we checked in with the chat.

Question, what do you think of the CSS cube methodology? I’ve read about it, I’m not convinced.

I don’t think anything is capable of beating BEM. I think a lot of the other options are way over engineered.

I feel like cube is a bit over engineered. If you go from not organizing your CSS to BEM, you’ve gone 99% of the way that you need to go.

Like, I just, I don’t see a need for any other way to engineer your organization of CSS. BIM does not have many limitations.

Okay, let’s see, let’s see, let’s see. Feel free to throw in questions now,

2 1:41:25

if you put a question in all caps. 1

1:41:28 Why did you choose focus parent shadow utility class rather than the mixin?

The mixin was not created at the time. I don’t know.

I don’t know what order those went in. A lot of times, because let’s talk about the philosophy that I’ve shifted on.

My philosophy at one point was let’s put all styling in code box. And if that was the case, I would have gone the mix in route for sure.

Now, I am leaning heavily towards put all of your CSS in bricks, in the CSS box. Primarily because now if you’re an oxygen user, absolutely don’t do this.

Oxygen CSS box on individual elements is nothing. It is light years away from having the functionality that Brics has.

Brics’ root selector in those boxes, the ability to combo selectors, the ability to do a bunch of fancy shit is second to none. Like, there’s probably some, maybe like build areas quickly maybe you can probably do the same things in, but compared to Oxygen, night and day.

What you can do with the root, you can actually do true BIM styling in Bricsys with the CSS box that you can’t do in many other builders. Because of the root selector, that’s really, really, really powerful.

You can wrap the root in media queries, individualized media queries, but multiple media queries, like this is not possible in Oxygen. So because of that extra functionality, I’m a huge fan.

Look, here’s the workflow, okay? You’re working on a page, like I’m gonna open the homepage.

If I was gonna do, what did you ask about? 2

1:43:19 You asked about focus parent shadow, okay?

1 1:43:21

I don’t think there’s any focus parent stuff on here, but we can assume that these cards, if these cards were clickable and they had focus parent. So one question is, is it in a loop or not in a loop?

This is one of the decision points, right? Is it in a loop or not in a loop?

These feature cards are not in a loop. So if I was gonna clickable parent these, and if I was gonna focus parent these, I would 100% go into CodeBox, and I would create a mixin targeting these classes, 100% because that takes care of all these cards.

If it’s in a loop, it’s not as big of a deal because there’s only one that I’m working with. And so at that point, it’s instead of going into WP codebox and doing includes targeting custom classes, that would take way longer than just slapping a focus, a clickable parent class on here and a focus parent class on the parent.

See, I can just, I don’t have to leave my workflow to use the utility class. I’m willing to leave my workflow if like in this situation where I’m not looping.

So I would have to go clickable parent, clickable parent, clickable parent, clickable parent, clickable parent, clickable, that’s chump life, right? You don’t want to live that life.

So I would rather go into code box and write an include statement and make it happen that way. But if I’m using a query loop, I’m only interacting with one element, I might as well just use a utility class and call it a day and we’re good to go.

So that’s kind of the decision process there. But check this out.

I mean the ability, you know, when I’m working on an element like this, this is feature card alpha. I mean you can see it’s right out of frame.

I didn’t even rename it. This is right out of frames.

So I come down here. Some of the stuff is in inputs.

If it were me, like all the stuff would be written in CSS, but users like things in the input fields. You know, so the, but if I just wanted to write some custom CSS bam bam root start writing and then I can combo things here’s what I mean by BIM see how this has FR feature card alpha heading I can actually change the heading styles from here FR feature card alpha heading you can’t do this in oxygen this is not possible in oxygen so now I’m actually writing BIM like you know this is and I can style children from the parents.

I can do a lot of different things. I can get, if I wanted to do a hover style here, bam, root hover.

If I wanna go add a pseudo element, root before. It’s everything that I wanna do here.

You wanna put this in a media query now? Okay, at media, min, min, width, and then, you know, slap a value in here.

Bam, then I go with my root statement. Then I do my styling.

Now that’s wrapped in a media query. You want another one?

Bam, here’s another one, right? This, it keeps everything in one place, and look, I don’t have to leave my workflow.

My whole thing now, my whole thing now, I’m focused on efficiency, I’m focused on scalability, maintainability, and efficiency. And the biggest rule of efficient workflow is, don’t leave your fucking workflow.

Every time you have to leave your workflow, that is a absolute violation of efficiency and so anything that requires me to leave my workflow if I have to go into WP code box that’s leaving my workflow if I have to go into a templates area to do that’s leaving my workflow anything that causes the user to leave the workflow this is why I’m rebuilding automatic CSS you will not be leaving your workflow to use automatic CSS after 3. 0 that is that is the commitment like that is I want every tool.

Please don’t make me leave my workflow to do that. If you can succeed at that, you’re gonna build an amazing tool, I think.

Because it’s just, I built so many sites now, I’ve spent so many hours in here, I see the patterns. And one of the patterns is, if I have to leave the workflow, I’m gonna hate you.

Don’t make me leave my workflow. This page is intricate enough.

Now imagine having to leave this page constantly and come back to it constantly and then find where you were. Where did I leave off?

Oh, got to leave it again. Go back to this other area.

Do a thing over here. Got to have those magic areas, right?

Go to a magic area, do some stuff, come back here, find out where I was. Look at this shit.

6 1:47:36

Look at this. 1

1:47:37 All these color swatches, right, all these are divs, individual divs, they have, this is intricate stuff.

They are all powered by locally scoped variables that I then change dynamically with inline styles using JavaScript. Okay, like this is, I don’t want my brain to have to constantly reengage with these things over and over and over again.

I’m in my workflow, I’m doing my work, please don’t make me leave my workflow for this other stuff that I need to do. Builders need to be a hundred percent focused on that.

The builder that can make you leave the workflow the least, as long as it can do all the other things the right way, will win, hands down, will win. That’s kind of my philosophy.

I’m all in on that All right, let’s see. Question, what do you think of the functions to render content depending whether it is on mobile conditionally for duplicate content, ED dynamic output, output function echo.

I would need a specific example. Some of that stuff I don’t think you can avoid, but I need a specific example, I guess.

Control Z really screwed me over when I tried to undo a change and it removed a star. Oh, yes, yes, yes.

Okay. True that.

The one downside of the Bricks CSS box. If you do stuff in here and then you make a mistake, let me just tell you, it’s way better than it was before.

Okay, we’ll give kudos. 2

1:49:00 It’s way better than it was before.

1 1:49:02

But it’s a crapshoot. You, it could blow the whole thing up.

You could be dropping a pipe bomb on your custom CSS. Like it can do some very bad things.

So if I make a mistake, I’ve trained myself. Just go manually fix the mistake.

Don’t try to control Z your way out of that mistake. You are, it could be pipe bomb after pipe bomb.

It’s multiple pipe bombs hitting that CSS. A lot of bad things can happen.

Question, why did you choose the path of hamburger menu? It’s gorgeous, but I’m curious about your thought process on it.

I kind of alluded to that, you probably weren’t here yet, I talked about that in the beginning. I’ve said many times, if you don’t have a techie audience, go with a standard menu.

If you have a techie audience, then you can probably get away with just the straight up hamburger menu. And I wanted to do something different that I don’t normally do.

So you know part of my process is let’s experiment. Let’s do things that we don’t always do.

Let’s not make the same website over and over and over again. Let’s run into some new challenges so that we can figure out how to overcome them and then we have more content that we can teach people.

If I just make the same things over and over and over again and do things the same way over and over and over again, one it gets boring and two I’m gonna run out of shit to teach. I’m just going to be teaching in one single lane of like, just do the things I do over and over and over again.

I want to experiment. I want to explore a little bit.

All right. Hopefully that answers that question.

You keep mentioning Bill Darius. When will you review it?

Soon. Soon, soon, soon, soon, soon.

I want to make sure we don’t save any of that stuff. Okay, let’s see.

What is WP Cloud and what do you use it for? Aren’t you on GridPane?

I’m on GridPane, but GridPane has a secret backdoor into WP Cloud. I don’t know if it’s secret anymore, if it’s still secret.

But basically when I did the launches, right, the automatic, not the LTD launches, I was on WP Cloud. Notice it works smoothly, smooth as butter.

Notice there were no technical issues. WP Cloud is basically built as an unbreakable server.

It’s run by Automatic, I believe, and GridPane was nice enough to put us on it for frames and Automatic CSS, so that when we do launches, we don’t have to worry about server issues at all. WP Cloud apparently can just handle anything.

Whatever you throw at it, it’s not gonna break. Whereas we were, you know, we were using Vulture servers, high frequency servers, big servers.

And when we do big launches that have a lot of, you know, attention on them, especially EDD. EDD, guys, is not the most efficient checkout system.

It has a lot of PHP requests. It’s very heavy.

And so we were breaking servers left and right. And so GridPane was nice enough to be like, hey, we’ve got this like backdoor in the WP Cloud thing, let’s just put you on that and you’ll never have a problem ever again.

And we haven’t, we haven’t since then, kudos to them. But it does seem to have a problem with, you know, these global, these import statements.

Let’s see questions, I’m looking for questions. I don’t wanna miss any questions.

We’ve done enough looking at things, I think. 2

1:52:33 How did you do the gradient animation on certain passages,

1 1:52:36

e. g.

on the manifesto page? Is it accessible?

On the manifesto page, certain gradients, automatic CSS. Let’s look.

Let me zoom out. Like this right here.

2 1:52:47

That was another thing. See, you try new things, so you run into new challenges, right?

1 1:52:52

I don’t typically do animated gradient text. I don’t think it’s something you see a lot of.

When you do animated gradient text, and you select it, it disappears. So I needed to put in, and you select it, it disappears.

So I needed to put in, there’s a separate color for when animated gradient text is selected, we’re gonna color it this way. We’re gonna take away the gradient and just make it white.

So that was another fun thing to find and figure out. But is that what you’re talking about?

This is just a span, literally the span class equals highlight, pretty sure. So if I inspect this Yeah, see span class equals highlight very simple.

So it’s all done. It’s all class-based I can change the gradient at any time I can remove the animation in any time I talked about the potential problems with the animation how Safari is struggling to handle the animation I was very comfortable using it everywhere because I can remove it like that.

It’s all class-based, so anytime I decide we don’t need to animate this anymore, it’s just done. Everywhere the animation exists, the animation can disappear.

So I had no worries using it. What are you using generate blocks for?

Parts of the documentation that need structure. If I need to build a card, because I’m building that in Gutenberg, I don’t have access to bricks anymore.

So I need something to be able to build little components with inside of documentation. That’s what I’m using generate blocks for.

SideQuest request, little preview of auto BIM. I can’t preview it yet, but it’s going to be fantastic.

It is going to be, it’s going to be, it’s going to be nice. You mentioned frames letting us set the core DOM name when you add a frame, so it’s unique from the start, won’t affect other frames, if added is something similar still planned.

We were told that that was probably gonna be possible natively in Bricks. They have a lot of stuff planned for their template library.

We rely heavily on Bricks’s template library. And a lot of that stuff in our opinion needs to be native.

This is gonna be a problem with other design sets, not just with frames. So I’ve been in contact with Thomas, they know it’s a problem, they know that we’ve already talked about different ways to improve it, it’s just a matter of them executing on it.

I love that Kevin just casually logs into the live frame and fiddles with it. I remember when Andreas was screaming the frame from Italy.

Yeah, I mean, I don’t recommend that you do that. I mean, if you’re an advanced user, then do what you want.

Like, I am 100% confident that whatever I can break, I can quickly fix. That’s not the same.

The same doesn’t hold true for everybody, I know. Like, if you’re, back when I was a beginner, I would not touch something unless it was on a staging site.

Now I will, I will fuck with anything now because it’s like I can fix it. I can fix it.

Not a problem. What SEO plugin are you using?

Oh, good. Great question.

So again, in the effort of experimentation and do new things. And this is how I can you know, I don’t actually like to have an opinion on things that I haven’t used It’s why I haven’t said I will mention Build areas, but notice I haven’t said anything specific about build areas I wouldn’t say anything specific about build areas because I’ve never used it I may have seen a thing here and there but I haven’t used it.

So I’m not gonna have an opinion on it I want to have opinions on things that I’ve used and used enough to actually have an actual opinion on it. So I decided for this website, for this build, that I would switch from RankMath and use SEO Framework.

It’s been a long time since I’ve used SEO Framework. I used it like many, like when it first came out, I was using SEO Framework a lot.

Then I was with Rank Math for a very long time. And I just decided, you know what?

Rank Math is kind of a heavy thing, and maybe people want another option. I can’t really recommend another option unless I’ve actually used another option.

This seems like an opportunity. How about I get Rank Math off of here, and let’s switch over to SEO Framework, and let’s use it and work with it and learn it’s in and out see how it performs and then I’ll be able to actually have an opinion on it and I quite like it you know I it’s not perfect maybe we can look at it here I’ll tell you the first thing I don’t like off the bat let’s go with SEO right here I don’t like that it’s one giant page of settings.

And there’s, there’s tabs, but they’re in different sections, right? It’s like, so I’m constantly like hunting, like scrolling up and down hunting for the thing that I’m trying to find.

I don’t like that. I don’t like that.

You know, rank math is all sectioned out. But as far as a free, simple SEO, lightweight SEO plugin that does a lot of stuff.

The real, the big thing that I am missing from it is a redirections thing. But then, you know, I thought about it and I was like, well, I mean, redirections should be done at the server level anyway.

Should we be relying on a plugin to handle redirections? I know it’s convenient.

Maybe this is an opportunity to force us to do, you know, all of our redirection stuff at the server level, kind of forcing you into best practices, I don’t know. But again, it was, I am 100% willing to experiment with things.

And this is the life I live. Like I said to myself, hey, I’m gonna build a whole site, we’re gonna use SEO framework to do all the SEO on all these pages, I don’t know if it can be migrated away from, I am 100% willing if I decide I don’t like it to just go do the work again.

Because I’ll learn something doing the work again. I am in a constant process.

I don’t do that much client work anymore. So I am dedicated to just like, I will light hours of work on fire.

I will, a lot of the stuff that I do for tutorials and all of that, there’s, if a tutorial’s an hour long, maybe I did three hours of work that you never see just playing around with stuff, testing stuff, trying to break stuff, just so I know the caveats and really the ins and outs of it. Because I don’t want to teach stuff unless I’m like, I’m sure, I’m pretty sure.

I’m never 100% sure, but I’m pretty sure. I’m pretty sure this is the way to go.

And then if I am, I do something that I end up changing later, I will make another video and I will reference the old one and be like, remember how I said that? Well, we’re not doing it that way anymore.

And here’s why. There’s good reasons why you would switch it up.

I think a lot of people, clients especially, I think we as, well, more of the intermediate advanced designers, it’s that situation where the more you learn, the more you realize you don’t know. Okay, so you can look at me teaching something that seems very, very advanced.

To get to that point, when you get to that point, then you realize, like, there’s so much shit I don’t even know. Whereas a beginner, you’re like, and you’re getting the hang of things, you’re like, ooh, I got the hang of things.

Like, I think I know everything now. The more advanced you get, the more you realize, like, damn, this is like a, there’s so much shit to learn and keep track of.

And I know pure beginners feel that way, but then when you get to advanced and you still feel that way, there’s like an, it’s almost like with jujitsu. There’s blue belts and you could tell by how they talk.

It’s like they think they know, they think they got jujitsu on lock, right? And then of course, they roll with a brown belt, black belt, and it’s like, oh, you don’t fucking know anything, do you?

But they feel that way. They feel like they know a lot until they meet the real world and then they realize they don’t know a lot.

It’s kind of like that. There’s a point of like, I think CSS and web design where you get this confidence that is hollow and then the more you actually learn beyond that, then you’re like, oh my God, there’s so much stuff.

There’s so much stuff. And I think clients, we all wish, right, that clients would have a respect for that.

That there’s, I mean, I just, I started sending them, you know, go to like, you know, any official documentation, the accessibility one, right? Go to the accessibility docs.

Accessibility is a portion, probably I would say a small portion, not small in importance, but just a small portion of the overall web design, right? And clients ask me, oh accessibility, how hard could it be to make our website accessible?

I just fucking, I want to print the documentation and just drop it on their desk and be like, by the way, this is just one small aspect of what we have to learn and manage and read about and study. How much time do we spend as web designers just learning?

It’s not billed to anybody. It’s not billed to anybody.

And then a week later, standards have changed. And a week after that, they changed again.

And a week after that, they changed again. Now imagine being a content creator, trying to keep up with all this.

Like, it’s a lot. And so people just need to have a respect for, there’s a lot.

And this, by the way, is why you can’t have bug-free websites and bug-free software. I mean, this is just, not only do standards change constantly, device, there’s a gazillion devices, right?

Like I said, on Android, when you scroll to 18%, the modal menu won’t open. All right, like it works on every other device, what do you want me to do about that?

Now I’m gonna go investigate that and try to figure it out, but still, it’s like you can’t expect it to be perfect when there’s all these different devices, all these different techniques, all this different methodology, 2

2:03:10 it makes your head spin.

1 2:03:11

And I feel really bad for beginners. Like if you’re a beginner, I feel, I have a lot of empathy.

I have a lot of empathy for beginners. It is, there is a lot of shit to keep track of, right?

2 2:03:25

Okay. 1

2:03:26 Quick question, those of us who have paid $99 up to now will continue to pay the same or will we have to pay the 149 when we renew the license?

I think you’re just talking about automatic CSS pricing. Look, anything that you buy from me, inner circle, automatic CSS, frames, whatever, doesn’t matter what it is, you are grandfathered into the thing that you bought.

Like the price that you bought it at, you’re grandfathered in. That’s always been my philosophy in business ever.

I’ve never been a fan, and this, by the way, is why I really like subscriptions and not LTDs and things like that. If I ever need to raise the price or want to raise the price, it’s a very simple decision.

You raise the price on new people. You don’t raise the, I already made a contract with you, more or less, where you agreed to pay me $99 a year.

And so you’re gonna, if I decide that needs to be $129, I hate it. I hate the idea that some businesses are like, well, now you’re just paying this.

Unless it’s like a one product situation. But even then, I just feel like, like Basecamp, for example.

You know, if Basecamp wants to raise the price of Basecamp, raise it on all the new people. Like, I get that you can instantly have way more money by raising it on everybody that already paid, but I just don’t, I don’t like the vibe that that creates.

The only time would be like, you suck at pricing, you dramatically underprice your product, and you’re out of money. And it’s a situation where it’s like, guys, I’m either raising the price on all of the existing subscriptions, or we’re going bankrupt and there isn’t going to be a tool.

And if that’s the case, I think you go to the your tribe and you just tell them that guys I fucked up the pricing I’m we’re out of money we I can’t afford to continue to develop it either you guys agree to pay more or I gotta close up the shop and you just take it to him like that and just be honest with people but if you’re just like I think we need more money I just think we need more revenue let’s just raise the price on everybody. I don’t really like that vibe.

I would just say, hey, let’s raise the price on all new people that come in. All the old people get to enjoy the price that they initially agreed to.

2 2:05:47

What’s up Tyree? 1

2:05:48 Dude, people don’t realize what a beast accessibility is until you give a shit about it and actually look and then you realize, oh yes, this is a monster.

Yes, there are multiple monsters. Yes, lurk in the shadows of accessibility.

Absolutely. Off topic question, what do you think of Jake Paul’s fights?

Okay. This will be a good break.

5 2:06:12

What time is it? 2

2:06:13 One o’clock?

Yeah, we got to go anyway. 1

2:06:15 I have a commitment, by the way, WDD lives, we’re not going to go over 90 minutes.

I don’t think anymore. We I know we have today.

Going forward, I’m gonna set an alarm. I’m gonna do my best.

Because I do think, you know, even though you stay and watch and interact and all of that stuff, we do all have work to do, right? And I feel like it’s more digestible for newcomers who don’t just want to sit here and hang out with us.

I think 90 minutes is a good timeframe. Jake Paul.

A lot of people hate on Jake Paul. Jake Paul is a love to hate kind of guy.

He also kind of has a hateable face. I think, actually, I think I have a hateable face.

I have R-A-F. I don’t know if anybody, you know, if any of you, you know, you probably know.

You probably know I have R-A-F. Resting asshole face.

And I apologize, like if I’m at a if you see me at a conference, walking down the halls, I’m not mad at you. I just living my life.

That’s it. I’m not mad at you.

I’m not angry. I’m very approachable.

You should come up and say hi. I’m very introverted.

I don’t like going up to anybody and everybody. I don’t like walking awkwardly into conversations.

I don’t. But if you come up to me, I will shake your hand and smile and we will talk and we will we will get along We’ll love it.

It’s it’s gonna be a fantastic time But I do look like an asshole if I’m just walking around It’s I have RAF. I don’t know what to do about it.

I don’t know what I’m sorry So I apologize in advance, but don’t be scared. I will not rear naked choke you or You know leg lock you or anything else if you come up and say hi, but I do appear to be an asshole just by default.

So there’s that. And, and you know, so Jake Paul, let’s go back to Jake Paul.

I don’t hate on Jake Paul. I think that he has amassed an insane amount of attention.

And when you have amassed an insane amount of attention, you can go various pathways of monetizing that attention. You can go the, I’m gonna sell fucking perfume.

And it’s like, does the world need another perfume line? I don’t think so.

But that puts money in your pocket. I mean, good for you, whatever.

What are you doing to make a difference in the world though? Are you making any difference with your perfume line?

No, probably not. And it doesn’t, does it take a lot of effort to, did you, do you really want me to think that you really made the perfume?

Or did you hire a formulation team that made the perfume? Now it just has your name on it and your.

. .

What did you actually do? You made stupid ass content on the internet and now you’re monetizing it with cheap perfume.

Okay, kudos to you. I’m not gonna hate on you.

Don’t knock the hustle as they say. But do I have a lot of respect for you no I don’t really have a lot of respect for you right if you take your attention and you decide you know what I’m going to do I’m going to fight other people and I’m going to do this in boxing matches and I’m not just going to fight other people like you know I think it started out with a youtuber right he knocked out a youtuber all right kudos to you.

What are you doing? 4

2:09:37 What are you doing?

1 2:09:38

But then he was like, you know what? I will take boxing seriously.

He trains boxing like a boxer, like a pro boxer, he trains boxing. Now we don’t have to talk about is Jake Paul a good boxer or a bad?

He’s not a bad boxer. He’s not a fantastic boxer, but he’s not bad.

And he trains his ass off and he fights real fighters. Now there’s a conspiracy.

You know, are these fights fixed? I don’t think they’re fixed.

I think Jake Paul’s really beating these people. That’s just my take.

And when I watch, I’ve been in fighting for a very long time. When I watch, you know, I don’t think they’re that good of actors, okay?

If you said, is Jake Paul a better fighter or a better actor? I’m gonna say, well, he’s probably a better fighter.

I don’t think he can act all that well to make it appear as if these fights are that real. So I tend to believe that he’s really beating them.

They’re washed up, they’re past their prime, but they are real fighters and they are dangerous fighters. They’re also not, it’s not their sport.

Like he’s choosing MMA fighters to do boxing. So take a washed up, half retired MMA fighter and put boxing gloves on them.

They can’t do half the shit they want to do. Now, I’ll tell you right now, like Nick Diaz, right?

Nick Diaz would submit Jake Paul in less than a minute, less than a minute and a half. You can let Jake Paul train MMA and Jiu-Jitsu for a year.

Nate Diaz will submit him in under two minutes. If he really wanted to, if he just really, really wanted to, he would submit him in under two minutes, especially if it was a pure jujitsu match.

Now in MMA, and they got to poke around a little bit, they got to do some stuff, you know, that’s going to take some time. If they were starting on the ground, like in a normal jujitsu situation, shake hands, and Nate Diaz wanted to submit Jake Paul in under two minutes, it would be done.

It was like, my will will be done, okay? And so he goes into these fights.

It was like Conor McGregor. No, he didn’t fight Conor McGregor.

It was like Conor McGregor against Floyd. The Conor McGregor against Floyd thing was fucking hilarious.

3 2:11:49

It’s a situation where it’s like, 1

2:11:50 everybody who loves boxing is like, McGregor got his ass kicked, couldn’t even finish the fight.

But everybody that knows actual fighting was like, dude, Floyd would have been wrapped up broken in multiple pieces in like Again in under two minutes Anybody thinks Floyd Mayweather would stand any sort of a chance against McGregor in an actual fighting situation? This is this is just comical.

This is this is comic book nonsense, right? Floyd would be broke like again.

He wouldn’t have a kneecap. He’d be missing an elbow You know his throat would be crushed anything that McGregor wants to do anything that McGregor wants to do, anything that McGregor wants to do would be done.

It’s like my will will be done when I get into that ring. But they have boxing gloves on and it’s boxing rules and you gotta play the little game, you gotta play the little sport.

And so it’s fun for boxing fans, not so fun for MMA fans, but it is what it is. It makes a lot of money.

Back to Jake Paul. You can’t hate on the hustle, the man’s putting in the work the man is putting in the work It is not easy to train like a professional boxer It is not easy to spar day in and day out and get hit and get punched in the head Repeatedly it is not the most fun life It is not the easiest way for Jake Paul to make a lot of money But he’s 100% committed to it and he’s putting in the work and he’s getting punched in the head and he’s doing it the right way.

He’s in fantastic shape. He’s learning.

He’s got real trainers. He wants to take MMA fights.

More power to him. More power.

I can’t hate on that. I can’t hate on that.

There’s way worse things Jake Paul could be doing with his attention. There’s way worse things he used to do with his attention.

So people love to hate on it. I can’t hate on it.

All right. Alright, we’re hanging out, we’re hanging out, let’s see.

Jake Paul is for sure a fighter in my opinion, many always have an excuse about his opponents never being sufficient, at this point he is the real deal. Yeah, I think you can only deny that for so long.

And you know, he’s very good at selecting opponents. opponents.

Nate Diaz is a good boxer, Nate Diaz is a good striker, but Nate Diaz, it does not knock people out. He, he batters you, right?

And he doesn’t just batter you. If you look at Nate Diaz’s MMA strategy, and this would be the only reason why he wouldn’t finish somebody in under two minutes.

He, he relies on it. It’s a very BJ Penn type He will batter you and wear you out and gas you out.

It’s kind of like when I do jujitsu, I don’t go straight for submissions, right? My whole thing, and this is a lot of, there’s multiple styles of jujitsu.

My style of jujitsu is drag you into deep water and you will slowly drown. That is the thing.

You can’t move, you can’t breathe. You can only stand that for so long, right?

And then slowly, just inch by inch, work into a position. And inch by inch, you know you’re about to get choked, but there’s nothing you can do about it.

You know I’m about to snatch an arm, but there’s nothing you can do about it. It’s just deep water, and that’s BJ Penn style.

We’ll do that. BJ Penn will batter you and then submit you.

Nate Diaz will batter you and then submit you. And so you look at Nate Diaz as a boxing opponent and you can say yeah he’s good at boxing he’s not going to knock me out and he can’t do anything else he can’t take me down he can’t do his jujitsu he can’t so I mean what there’s no threat to Jake Paul to take that fight it’s just going to be a point fight and that’s it.

And that’s what Jake Paul wanted. Jake Paul, you know, asking a knockout artist, somebody with actual legitimate power to come in, the two people that have legitimate power are not boxers that he fought.

So they were mismatched in that capacity. So he’s very good at selecting opponents, very good at selecting opponents.

Are KOs allowed in Jiu-Jitsu? Yes, it’s called putting the person to sleep.

No, you can’t strike. There’s no striking in Jiu-Jitsu.

Jiu-Jitsu is the gentle art. It’s very gentle until something snaps, and then it’s not so gentle anymore.

But no, it is, what’s fantastic about jiu jitsu, especially for self-defense, is you can control people, you can do what you need to do, you don’t have to hurt them. You don’t, you absolutely don’t have to hurt them.

Hurting them is a choice that either you make or that they make. Okay, that was fun.

I like talking about J. I like off-topic conversation a little bit.

Hey Kevin, what’s the waiting list like for website review? We’re back to website reviews next week.

It’s not a super long waiting list. I’ve been calling it, you know, a lot of agency sites that we’ve seen this, we’ve seen this, we’ve seen this, we don’t need to rehash it, you know, removing those from the list.

But I do have a list and we are getting it back to it next week for sure. 2

2:16:56 Okay, I think we got, yeah, this is more about global components.

We’re gonna end here. 1

2:17:04 How big is your backup file for this entire website?

Just curious, I assume at least one gigabyte. No, a backup file for a website?

No, no, they’re not that big. They’re very, very manageable.

How do you decide what order of sections should be? Is there some golden standard of order for sections on a web?

No, let’s end on this question. This will be our last question.

There are general UX principles. This is why a lot of websites follow similar patterns this is why frames can exist frames is based on common patterns in web design right a hero sections very important the headline is the most important part of the page this gets you know right into WDD type content so our second section is social proof does the second section have to be social proof no another very common pattern is that the second section is callouts, features, the most important things you want people to understand about the product or the service.

There’s a lot of things that you can put second. Social proof is an option.

Then there’s many ways to show social proof, right? I went social proof, then I went features.

You could easily go features, then go social proof. And these aren’t features, these are like callouts of the, these are benefits, okay?

This is benefits section. So you could go features here, benefits here, social proof here, a CTA here.

You got a really special CTA, coupon code, like some businesses, local businesses. You could go CTA here, do a lot of the freebie here.

If you’re a content marketer, freebie can go here. You do a lot of different stuff.

So it’s just deciding on it. You do want a logical order, right?

So what I thought was logical here is, let’s talk benefits before we get to features. Because then when we get to features, they’ll think back to the benefits that all of these features give you.

They already know the benefits, right? So I decide, communicate the benefits first.

And then when I communicate the feature, you’re also simultaneously rehashing the benefits because it is important to mention things multiple times. Okay, so this talks about the benefits of color management here.

Say goodbye to managing text sizes across breakpoints. So you’re, you talk about a pain point.

What is the pain point? Well, managing text sizes across breakpoints, it’s a pain point, right?

So we’re highlighting that there’s a pain point that we’re solving. Just set the base size for your typography, choose a scale value, watch your headings and text scale fluidly across all devices.

Best of all, you can override any individual text or heading size with your own min and max values. So this speaks to a lot of things.

It talks about the pain point, talks about the feature. The benefit of that is that you get to watch your headings and text scale fluidly across all devices.

And then there’s a challenge, an objection that I know is gonna be there. But what if that scale, I don’t like that scale.

What if I don’t like the mins and maxes? Well, we gotta overcome that objection.

Best of all, you can overwrite any individual text or heading size with your own min and max value. I’m trying to cover every base.

This is kind of like what a good, you know, simple little lead paragraph does. It’s like it conquers a lot of objectives in one little bite-sized fashion, and you’re trying to formulate one of those for every single feature that you’re talking about then on top of that you’re giving them the visualization right so hey I know you read that but if it still doesn’t make sense in your brain play with this little thing right here and it kind of demonstrates it right so this is what you know good copy decent copy whatever is supposed to do it’s supposed to you know talk about a pain point how do you overcome that pain point there’s a feature what’s the benefit of the feature?

What’s an objection going to be to that? How can you overcome that objection?

Can you give a visualization? Like, how many of those boxes can you check and then do that over and over and over again.

And at the end of the day, then you have a decent page that you’ve put together. So that’s kind of the goal.

By the way, I have a whole worksheet workbook masterclass thing on copy and messaging in the inner circle. Got to close on a, got to close on a sales pitch.

You know what I’m saying? Okay, that’s it.

Alright guys, I’ve spent enough time. I got work to do.

I love you guys. Thank you for being here.

I hope you got a lot out of this. If you have any other questions, leave them on the comments of this video.

I’m happy to jump in and answer them for you there. I’m happy to jump in and answer them for you there.

I am out. Peace.