WDD LIVE 029 – Web Design Q&A / AMA Episode!

Hey everybody, good morning, good morning. Welcome back to another WDD Live. Today’s WDD Live, while I do this intro, I’m trying to get my local BRICS blueprint thing spun up and fixed because one of my other ones, one of my other ones went south on me. So I’m going to get this, going to get this going here.

All right, say hi in the chat when you arrive. I know some people are probably going to ask some questions that we may have to look at on an install. So, we need to have this, we need to have this thing ready to rock and roll. Okay, this should be fine then.

All right. Hello Jaroslav and John and Jason and Suzanne is here, Daniel’s here, Dawson’s here, Maddy, Patrick, Lee is here, D123. Welcome, welcome, welcome. Ruben, welcome.

Today is gonna be a full Q&A slash AMA. AMA stands for ask me anything. A lot of people say, I don’t know what an AMA is. So just for those of you who don’t know, that is ask me anything.

So literally like, you know, development stuff, brick stuff, frames, ACSS, business, pricing, sales, SEO, content marketing, copyright, whatever, whatever it’s free game and here’s the thing you know a lot of people in the comments on my YouTube videos they will put a very detailed question in and it’s like I can’t really answer that in a YouTube comment you know so WDD live especially when we do these Q&A segments perfect time to ask those kinds of questions so if it’s something that is you know requires a little explanation requires an example or something like that now is the time for that kind of stuff I always feel bad cuz I’m like that’s a great question but I can’t answer it right right here in the YouTube comments. I can’t do it. Dawson says, okay, oh, you’re talking to others, not to me. Okay.

Why no notifications, Kevin Geary? I don’t know what you mean. Why no notifications? I don’t know.

You tell me. I sent an email out about an hour ago letting people know that this was going to be going down, but if YouTube didn’t send a notification that’s on YouTube. I don’t know Okay, so we will start taking questions ASAP, I don’t really have any announcements today Yeah, we’re working on a CSS 2. 7 we’re about to release a hotfix for 2.

6 just to clean up a couple little things. And I mean, we do have a lot of stuff in the pipeline, but nothing that we can unveil yet. So go ahead and write question in all caps and then your question. And I will be able to easily find it in the chat stream.

All right, let’s start scrolling down and seeing if anybody’s got any questions. Ruben says, can we get an AI version of frames? I don’t know, I don’t know. I mean, I’ve seen, you know, I saw a Reloom and their AI thing.

You know, by the time you tell AI, you know, what kind of page you want, and then it gets frames and it puts them in, and then you have to swap some out because AI is not perfect, then I don’t know, couldn’t you have just gone in and just chosen the frames that you wanted? I have a lot of ideas for frames, but I just don’t know if going down that rabbit hole is the best use of time for right now, the AI rabbit hole. In fact, that’s just gonna be a big time suck of figuring out the best way to make that happen and is it gonna be useful for people or is it just another, you know, like, I just feel like everybody’s like, well, we got to have AI. And so they just find a way to, you know, shove AI into the tool that they’ve already built.

And I don’t know, it’s sometimes it’s a little useful. Sometimes it’s not so useful. You know, we’ll see. Pedro says, ready to listen to my friends Kevin Geary as my wife calls it Okay question how much would you mark up a white label service I debate depends on it depends on what the service is I Don’t do a lot of white label stuff.

I don’t do a lot of white label stuff So I’m not really sure what the standards for pricing is in the white label world. It’s always tough, you know, like if you’re faced with doing white label work, I mean you always feel like you’re working at a discount because like the agency that’s hiring you wants a deal because they still got to mark up the service, right, so they can make a profit. I don’t know, it just feels like, you know, too many middlemen. Luke Holmes says, will you be using Fortress for security on any of your sites and will you be changing your GridPane servers to peak frequency?

I haven’t looked into any of that yet. I try to stay out of like back-end, you can only be an expert in so many things, right? So I try to stay out of back-end, like hosting, security, all of that stuff, and I let other people handle that stuff on our team. But I have seen that they have added

a few new things to GridPane, but again, I have to look into it, see what it’s all about, and then get advice from others, and then implement that. Question, in the frames process section delta and even the timeline section alpha, all are linear. Do you have a recommended approach for a circular process timeline structure? I don’t even, I’m trying to think, like what, I don’t even, I don’t know that I’ve ever seen a circular timeline structure.

I would need a, do you have an example? Do you have like a link I can go to where there’s a live version of this? Every timeline I’ve ever seen, it’s either, you know, they’re all linear. I mean, that’s what a timeline is, right?

In a timeline linear, it’s a timeline. Hey, David, timeline. But it either is all in a list or it like, you know, alternates, but I’ve never seen a circular timeline. I need a visual example.

If I can have a visual, then I can give a clear answer here. Selling premium service is still the hardest. I don’t know if that’s a question or just a statement. Charlie says, as a PV101 student, is there any relationship between pseudo elements and pseudo classes, or are they entirely two different things?

They’re two different things, but they can absolutely work together for sure. I think you’ll get a clearer picture when I do the pseudo classes training, which is coming next. So then you’ll have a good understanding of pseudo elements. You’ll have a good understanding of pseudo classes, and then you can see perhaps them working together.

They don’t always have to work together, they can, it’s like a possibility, but they are definitely separate things. Okay, Kevin Geary, I hope we’ll talk about the Lewis interview. Hey, if we get bored, I will pull that little thread up and well, we can go through it. We can talk about some things.

I mean, because, man, I’ve been saying, I’ve been saying, I actually just saw a discussion. I was just at a glance. I was at a glance. It was something about, it was with Cracker and Lewis and, you know, Cracker uses breakdance a lot.

and they were talking about some sort of animation on scroll and achieving some effect, and there was a discussion going back and forth about, well, we could just use custom properties. And, you know, we were, I thought, I thought, I thought, I thought we were told that Breakdance was the tool for beginners, right? But then every time I see the discussions around it, where an advanced user comes in and they’re asking questions, no longer is it like, oh, you’re an advanced user, like go use Oxygen. Isn’t that supposed to be the answer?

The discussion is always around, oh yeah, we’ll put that super advanced thing into Breakdance. Because they were talking about like custom property. I’m like, what beginner knows anything about custom properties? And animating things on scroll using custom property.

This is not, so once again, like oxygen is not going to have these features, but breakdance is going to have them. But the tool for beginners is going to have these advanced features that oxygen doesn’t use. But then remember the whole narrative is oxygen is their tool for professionals and experts and yada, yada, yada. And it’s still lively and going forward just as much as breakdance.

And come on, like talking out both sides of the mouth. It just, I constantly see examples of this. So just go back to my original statements about what is going to happen to oxygen and there’s no evidence that that’s wrong. We’re still barreling down that path.

So yeah, we might pull up that interview and go through a few things. Don’t get me started so early on that list. We can do many positive things before we get there. Okay, Jan Landing says, hey, it’s Wednesday, I have this on my calendar as a recurring event.

That’s correct. Yes, you should not need a notification from YouTube or even an email from me, right? If you’re a WDD Live OG, you have this in your calendar, your calendar notifies you and you’re good to go. Is it possible to make a tutorial on how to start converting Figma design to Brics in the best efficient way?

Yeah, I’ve already done that. Well, I’m gonna be doing more and more and more, but like on the automatic CSS channel. By the way, if you’re an ACSS user or a Frames user, or you’re all remotely interested in ACSS or Frames, make sure you’re subscribed to the ACSS channel. But I did publish and actually got a lot of comments, a lot of likes, a lot of like people were really excited about it and they want more of them, but I did a full landing page build and it was actually it was to prove a point honestly.

It was so it was in Figma, but it was not designed with frames. It was not like the wireframe wasn’t done with frames, the design wasn’t done with frames. I just got it from frontendmentor. com and they give you a Figma file of a website design.

It was just a simple landing page kind of thing. But I wanted to show that even if the initial design and wireframe wasn’t done with frames, you can still use frames to speed up the workflow of building the page. And then ACSS, of course, you’re using. And it was a full walkthrough of like, here’s this thing in Figma that we have to build.

Let’s go ahead and build it. And let’s use frames and let’s use ACSS to build it and then the next one I’m going to do is the uber. com home page that one’s going to be coming probably probably next week so we’ll be doing the uber. com home page which is really interesting because it’s got a it’s got a triple carousel thing going on in the hero section so we actually have to use three linked sliders together and we can actually use the frames slider component to do that.

So I’m gonna be using the frames slider in the hero section, but we’re just gonna use ACSS and frames to make the uber. com homepage. And then I’ve got a few more. I’m just gonna be taking these real sites and building them with frames and ACSS.

But that’s all going down on the ACSS channel, not on this channel. So make sure you’re subscribed over there to see those take place. But that should give you everything you need for, hey, I have a thing in Figma, how do I build it in Bricks? All those sites are gonna be perfect examples of doing that.

Because even if it’s not, you know, the uber. com homepage obviously is not in Figma, but it’s the same as if you had a Figma design. You’re building from an existing design. Okay, how is the progress for more menus in frames?

That’s a really good question. So, we built some mega menus using the new Bricks nestable nav thing. And I was like, all right, it’s decent, it’s decent, but I went in and I didn’t build it, Tobias built it. And I went in to start playing with it, because as a user, I want to make sure it’s good.

And it was nothing that he did wrong. What I kept running into was the bricks nestable nav element just sucks. I can’t get around this. I put a post in the community about this.

It’s just not good. It’s just not, it’s not what I, it’s not, hmm. Could have been much better. I’m trying to be as positive as possible.

It could have been much better. It’s just, there’s stuff scattered everywhere. It’s like panel after panel after panel. And you just, ah.

And so I was like, you know what, we should probably hold off on mega menus because what we’re doing in frames is we’re building our own Menu component you can do mega menus with it You can do everything with it, and it’s gonna have a much better mobile default mobile menu experience for sure We’re gonna put a lot of we’re gonna We’re gonna You know we’re gonna put our brain power into it and see see what we can come up with and I just think we’re gonna Hold off on the mega menu frames until that component exists because I don’t want the user experience to be bad or like super frustrating like that. Like if it was frustrating for me, it’s going to be like, you know, really frustrating for most people.

So I just didn’t publish it. I was like, no, we’re not. I don’t think we’re going to go forward with this. So if you’re waiting on mega menu frames, you’re probably gonna have to wait for our menu component and then we’ll start doing mega menu frames.

And then at that point it’ll just be like drag and drop all these cool little mega menus. And I will be doing some modal menu though. So the new automatic CSS website uses a full screen modal menu, which I was very happy with when I got done with it. I think that having frames like that, so where you can add a modal for, and this can be for desktop or mobile, but you can just add a modal into your header with our trigger element and then drop a modal menu frame in.

We’ll have like probably dozens of them. And that’ll give you a really good menu experience. If you wanna use it just for mobile, you can. If you wanna use it for desktop and mobile, you can.

But that’ll kinda give you out of the box really good modern menu experience. Now not every, I will say this, not every website should have a modal menu for desktop. Okay, if you have a techie audience, obviously I have a techie audience. So like automatic CSS, you know people arriving there, they can handle a desktop modal menu.

Okay, but not a lot of people can. You know, if you’re appealing to like an older crowd or non-techie crowd, you’re going to want a standard navigation on your desktop. But still I would use modal on mobile. I do that all the time just because the the mobile menu options are an absolute disaster and it’s easier to just build one with a modal.

All right, hopefully that answers that. Question, repeat from inner circle in one of your videos you briefly mentioned using archive pages to display services instead of creating a service page. What are the reasons for that? Um it it really comes down to like preference, honestly.

I don’t think there’s a right or wrong answer. I think that CPT, well, here’s the thing. It depends on how you create the CPT. Some software when you create the CPT, I think Metabox maybe is an example of this.

You have to like turn off the archive page for it. You have to say don’t create an archive page. The new ACF, I believe that the archive page is off by default. What happens a lot of times is people create a services CPT for an example, right?

And they don’t realize that an archive page was created for it. And then they go create a services page, like to overview all of their services. And they put a loop on it and they query their services, not realizing that there’s still a service archive page floating out there that has no design, no template assigned to it, no nothing, basically a blank page. And this ends up getting indexed and it’s just, it’s a bad situation, right?

So what you just want to make sure that you’re using one or the other. So if you’re going to make a normal page for your services and then use a query loop on it to query your CPT posts, that’s fine. Just make sure the archive for that CPT is turned off. If you’re gonna use the archive page, then use the archive page and just make sure you don’t make a normal service page.

You can do it either way. The argument would be, you know, you go to your pages to edit your service page, but your posts for those services are not gonna be in that section. But then the counter argument is in most, like in Oxygen, for example, this would be even worse, right? Because if you use a template on a category page for that, then you always have to go to your templates to edit your service page, and that’s really annoying.

Not so much in Bricks, because you can seamlessly switch between them, but yeah. It still kind of doesn’t keep things all in one area, unfortunately. Because once again, the builders, they have to have all these special areas to do things instead of one page building area. So yeah, no right or wrong,

just it comes down to preference. The only wrong version is if you have a page and then an archive page trying to do the same thing and then you even forget to assign a template to the archive version. Okay, one of your videos, okay, we did that one. Maddie Eastwood says, Crackett interviewed Lewis the other day.

He said, the class-based workflow made sense in 2015, but with Breakdance, you don’t need it. Isn’t it enough to just point to the W3C and response? The thing with this is very interesting that someone would make this argument that a class-based workflow makes sense in 2015, but with Breakdance, you don’t need it. I’ve seen that argument made time after time.

Nobody has provided a shred of evidence or examples of why this is the case, including Lewis. Lewis has not, he will make that statement over and over and over again, but actually outright refuses to prove it. Prove it. Lewis, show us.

Show us. Make a card, use it 20 times on one page, 20 times on another page, 20 times on a third page, and then show us how you would go about changing styles related to that card, right? I, you know, he says, well, you can copy and paste. That, well, we’ve already talked about this.

You don’t want to live a copy paste life. That’s still chump Bill. And you can’t copy paste styles across multiple pages. Now, the only valid argument would be if they release some sort of true component functionality for breakdance.

So, and, but, you know, Bricks could do this as well. Now I would still argue you would still make classes like a true component based functionality is not going to kill classes. Still global classes using BIM is a really, really, really great idea. Whether you’re using true components or not using true components.

So right now as it stands you know it’s easy it’s it’s another one of these things. Have you ever heard a content creator say SEO is dead? Have you ever heard a content creator say WordPress is dead? I mean WordPress has died like you know a dozen times guys.

SEO has died thousands of times. I mean that poor thing. I mean it’s like man you know how many funerals we’ve had for SEO? You know, PPC has died a few times, I’m pretty sure.

All these content creators love to declare things dead, right? Because it gets them free stupid clicks. You know, it’s just it’s clickbait nonsense. Now in Lewis’s case, like he doesn’t want classes to be relevant, because he decided that he, you know, he wasn’t going to put those front and center in Breakdance and if he had to put them front and center and breakdance, it would be called oxygen five four point oh So he like he has to ride that narrative that classes are irrelevant Unfortunately, he hasn’t demonstrated that that is the actual case.

He hasn’t shown us that that’s the case and I will say this three separate times and he’s shown us that that’s the case. And I will say this, three separate times, if we wanted to see, Lewis is avoiding me, probably because I ask hard questions that are hard to answer, and still maintain some semblance of alignment with the breakdance narrative. One of the questions that I’ve been asking recently, again, I’ve asked this three separate times in a discussion he was already active in, so I know he was there, tagged his name so I know he saw it, okay? It was about, it’s about the pre-made elements thing because his narrative is, we have over 120 pre-made elements.

This is what he thinks is the big, you know, marketing thing for a page builder. He recognizes Elementor’s got a lot of pre-made elements and Divi’s got a lot of pre-made elements. And so with Breakdance, it’s like his main marketing narrative is, he’s got 120 plus, we have the best pre-made elements, yada, yada, yada. Well, as I have shown, okay, I’ve actually shown this, not just talking, I’ve actually shown that pre-made elements, all of them have a fatal flaw.

The fatal flaw is that you use them and you can’t add other elements to them. That’s a fatal flaw because we all know that things change. People change their minds. We build something and then realize, oh, it needs one extra feature.

It needs one extra thing. We forgot about it, whatever. And if you’ve already used that thing everywhere, it becomes a real problem. Real, real, real problem.

And, you know, this doesn’t exist if you build the thing because the other thing that Lewis will say is, divs, who builds with divs? Who builds with divs anymore? That’s the other thing that’s dead. Div, the div is dead, okay, apparently.

And I’ve demonstrated clearly, well, if you take 60 seconds to build a card with divs, you can add anything to it that you want at any point in time in the future. There is no limitation. But if you use a pre-made card component, you can’t add anything to it. So you save 60 seconds by dragging in a pre-built card component, but you basically have the fatal flaw of you can never do anything new with it later going forwards.

There is no iteration on that card in the future. Now, what, and I even put this in the comment. So what I said to Lewis basically was, are you going to acknowledge that this fatal flaw exists? Like you’re marketing all of these pre-made elements to everybody and you’re insisting that people use them because they’re so fantastic.

But are you going to ever tell them that there’s this fatal flaw? Or are you going to let them find out on their own? Because I already know it exists and I’ve already been telling people that it exists. Are you at some point going to acknowledge this?

Now, Breakdance has a separate area, it has a magic area where you can edit components. I forget what it’s called off the top of my head because I don’t use Breakdance, but you can basically hack into the elements, right? And you can add your own elements to it. You could potentially add more elements to it.

The problem is, is this is not beginner friendly. This is not, if you watch Lewis do it, it’s not beginner friendly, clearly not beginner. So then we’re, because he may counter, this may be his counter. Well, oh, it’s called Element Studio.

You can take the element into Element Studio and do whatever you want with it there. Okay, so, but then this goes back to, it violates the number one other marketing thing about Breakdance is it’s for beginners, right? So you’re encouraging beginners to use these pre-built elements which have a fatal flaw and then to fix that fatal flaw, they have to not be a beginner. It’s basically the reality of the situation.

So that’s where we stand. So I’ve asked this three times to acknowledge the fatal flaw with pre-built elements and I just get ignored constantly. You know, he’ll answer every other question, all the easy questions, and he’ll say things like classes are dead, but never show why classes are dead, never prove that classes are dead, never show a scalability or maintainability feature of breakdance. No, no demonstration, just talk, right?

It’s very easy to do this, very hard to demonstrate something like that, something like classes is dead. I mean if you’re going to make a statement like classes are dead, divs are dead, I mean like these are the most fundamental aspects of web design and you’re not going to demonstrate, you’re not going to give us some evidence, that’s a little sketch. Okay. Do you have a process to peacefully stop clients delaying projects by not giving you content?

Yes. Yeah, sure. Well, first of all, this is a broader question, but let’s screen share for this one. I would highly recommend, okay, if you are having trouble with getting clients to deliver things on time and it’s affecting your price, really, let me do this.

Let me go to gary. co, okay? Go to the blog section. So you’re gonna go to blog right here.

You’re gonna come down, and you’re gonna click on this one. There’s, I think, two articles you need to read, yes. So milestone payments don’t make sense for web design projects. This is very detailed.

Goes into numbers. It goes into a lot of different areas. Absolutely, 100% read this article. If you’re doing milestone payments right now, like 50% up front, 50% on completion, 50% up front, 25% halfway mark, 25% when we’re done, that kind of stuff, absolutely stop what you’re doing after this live, don’t do anything else after this live ends and go read this article right here called Milestone Payments Don’t Make Sense for Web Design Projects.

Then, after you’re done reading that, you’re gonna read the next one, which is how to handle delayed, suspended, or abandoned web design projects right here. Again, very, very, very, very deep, look it even gives you, it even gives you contract language, it gives you how to warn your client in writing, da da da da da, okay, it’s like, you can copy paste this stuff, okay? But it’s all about philosophy and understanding how the project should go, and what should and should not affect you as the agency. And so if you understand that milestone payments don’t make sense, what you’ll realize is you structure the pricing of a project correctly and if we are relying on the client to give content, which that’s the third thing that I want to talk about, you really shouldn’t, okay?

You should be doing the copywriting for the client, you guys should be providing the copy or a third party should be providing the copy. We’ve already talked about all the reasons of why this is. But if for some reason you have to, you are relying on the client for something, there is some proprietary content sometimes you have to rely on the client for. For example, maybe they needed to take photos of the inside of their building or whatever.

Like, I don’t know what it may be, but there could be some content that you can’t create. You physically can’t create it. They have to provide it and they’re late providing it it still doesn’t affect your payment you have to make sure that still doesn’t affect your payment and you’ll understand why I go into all the psychological reasons that clients used to do it they may be sabotaging they when you do milestone payments you give them the ability to delay projects and to psychologically sabotage projects which they could do for various reasons. It’s just read these, read these in detail, you’ll understand, okay?

But yes, you can make sure that content that is delayed does not affect your payments, that’s the number one thing. If you get fully paid and the project is, they’re still twiddling their thumbs, I mean, why do I care anymore, right? I already got paid. So that’s the number one thing, you have to make sure you still get paid regardless of what you’re waiting on from the client.

They can delay content they can’t delay payments. Alright let’s keep going these are good questions. Super Chat two dollars from Steve Taylor do you know did you know your video is glitching is this is this video glitching nobody else is saying it’s glitching anybody else How’s our video going? See, now I’ve got to, I gotta scroll down to the bottom now.

I lost my place, I gotta see new comments. I need new comments real quick. Is the video going good? Are we all right?

I’m assuming we’re all right because nobody else has reported any glitching. So I’m gonna assume we’re okay, I’m gonna go back up. All right, let’s see. Wow, there’s a lot, okay.

Okay, we did the one about that interview. Or am I misunderstanding what the W3C does? I think there’s an international organization setting standards for the web should be all the counter-argument needed against malpracticing page builders.

Look, I am not against like innovation. I’m not, like obviously I love innovation. I’ve innovated a lot of stuff. With Automatic CSS, we brought a lot of innovations to the table and how frameworks are built and how frameworks operate for users and so on and so forth.

I am open to the idea that some sort of technique or new development could, could kill classes. Let’s talk about like media queries as an example. I think container queries have the potential to completely eliminate media queries perhaps. I haven’t thought of every single use case or every single situation or context, but very possible the container queries just basically make media queries obsolete.

So something could come along that makes classes obsolete. A true dynamic components, you know, do alleviate the need for a lot of the class-based stuff that we do. Now, not everything is going to be a component is the one problem, right? And even still, I think that there’s still some situations where, no, you’re still going to want global classes on those true components.

So I still don’t think it eliminates it, but I’m not ever ruling out the possibility that some development technique comes along where we don’t need global classes anymore or something like that. I don’t know. Nobody knows, nobody knows, because it hasn’t been invented yet. Breakdance certainly isn’t it.

Breakdance certainly isn’t the one that’s gonna kill classes. I haven’t seen any evidence of that. But I have an open mind to it. And so it’s not like I’m coming from a position where it’s like no, clutching my pearls, like don’t ever take my classes away.

I don’t care what we use. What I care about is scalability and maintainability and efficiency. So if we can build scalable, maintainable websites efficiently, I don’t care what method we do that by. What I notice is most people are not building scalable, maintainable websites.

They’re building websites that are terribly difficult to maintain and terribly difficult to scale and iterate on and Thus we teach best practices around BEM classes and okay Here’s how you can take an approach where these disasters don’t continue to happen So, you know, that’s that’s the position It’s not I love classes and you know, I I dream about them at night and I don’t ever want them to go away. That’s not the situation we’re in. Classes are promoted right now because they are hands down the best way to create scalable, maintainable websites efficiently. That’s it.

That’s it. It’s the end of the story. So, web standards. Going back to web standards.

You know the web is like the wild wild west and so we have to do our best to establish techniques and standards for things and share best practices. But you know we don’t need a governing body or anything to like say what is right and what is wrong. It’s up to everybody, every individual to listen to the arguments and then decide for themselves. Yes, that argument makes logical reasonable sense.

I’ve seen enough evidence for it. This is the path that I’m gonna go down. And then if someone over here is flapping lips, but doesn’t ever seem to provide any evidence or reason or logic or anything else, they just like to talk, then don’t go down that path. Okay, I hear what you’re saying, but I haven’t seen any evidence to convince me.

So therefore I’m not going down that path. And we just, you know, this is it. Debate, examples, proof, evidence, whatever, that’s gonna rule the day. What do you think about the BRICS roadmap

for global components? I don’t know, I mean, I saw it listed and it was interesting, because like 48 hours earlier, I emailed Thomas about global components and asked him and his response was basically like, well, it’s not gonna come anytime soon. We haven’t thought that much about it. I’m gonna look into it.

And then I guess he looked into it, you know, after that, because like, you know, 48 hours later, it was on the roadmap. So I don’t know. I don’t know if they had to change a heart. I don’t know if they got excited about it when they, I don’t know.

I don’t know what happened. But, you know, it went from like, we haven’t really looked into it. It’s not gonna be anytime soon to like it’s on the roadmap in like 48 hours. So not sure what happened there.

I wish we had a little bit more insight. I wish we had a little bit more insight. I said this in my mastermind the other day, like shout out to Louis from Quickly. And this is, I always gotta say Louis from Quickly, right?

Cause we have the Louis from SoFly and then Louis from Quickly. And I don’t ever want people to think, when I’m just mentioning Lewis, I’m probably talking about the SoFly Lewis, not saying anything bad about the Lewis from Quickly. So I was talking about it in my mastermind the other day, I was like, you know what, I don’t even use Quickly. I don’t use Quickly.

I am going to be playing with it a lot more, obviously, because I have to integrate automatic CSS with it. But I was giving kudos to Lewis from quickly because I was like I don’t use quickly I’ve known about bricks for a lot longer than I’ve known about quickly, but I seem to know far more about Lewis from quickly’s philosophy in page in the page building world and like where quickly is probably going then I do about bricks and the reason why is because we see Lewis from Quickly’s face. We see his videos. He’s willing to have to enter into the, you know, general, broader public discussion about a lot of these things.

You know, I did a live stream where I had some really good things to say about Quickly components. I had some criticisms of Quickly’s UX. You know, Lewis did a whole video taking my critiques on the UX and then explaining himself related to those critiques. These are things that are not happening with most page builders, all right?

We don’t see this happening with, I don’t know much about the developers of Elementor or what they think, what their philosophy is going forward with Elementor. Same thing with Divi, I know a little bit more because the creator of Divi does actually get on video and talk to people. Not like I haven’t seen him do any live streams, I don’t think, but, you know, at least pre-recorded videos, kind of like talking about the future of Divi and the direction that they’re headed and yada, yada, yada. But really, it’s nothing from Bricks.

It’s, I really wish there was. I want to know what Thomas’s philosophy is around a lot of these things. I want to know what the vision for Bricks is. So if I had a criticism of Bricks, it’s the lack of, it’s a lack of transparency in that regard, a lack of like vision casting for like where it’s going.

And I try to remember to do this for automatic CSS and frames. I try to talk about the vision as much as possible. I sit here hour after hour after hour talking about philosophy. That’s one of the benefits of buying into a tool like automatic CSS and frames.

Not only that I actually use it in my own work, which a lot of these page builders, the developers don’t use them, they’re not building websites, right? So, most of them. And so they’re not really using their own tool other than like, they probably built the website for the builder with it. But it’s not a day in, day out, living in the builder, building pages kind of thing, right?

I use automatic CSS and frames day after day after day after day after day, and then I sit here hour after hour and I talk about philosophy and vision and the future and all this other stuff, and everybody knows what I care about. Everybody knows what I focus on. Everybody knows where I want things to go, and that is very, very valuable, I feel, right? When I’m a user of a product like Bricks and I don’t know what the vision is and I don’t know what the philosophy is related to certain things, you feel a little bit in the dark.

And you feel like, oh, well, I hope that, now it’s a faith situation. People ask me all the time, is Bricks the number one page builder for WordPress? And I say, yes, right now. Is it going to stay that way?

I have no idea. If I knew more about the vision and I knew more about the philosophy and there were more transparency and discussions around certain things, I would be much more confident in saying it’s going to stay number one guys. It’s going to stay number one because I know I’ve heard from the person driving it and what their ideas are, what their philosophy is, yada yada yada yada. Those things are very important.

But because I don’t know those things, the only thing I can say is it’s number one right now, I don’t know what tomorrow is going to hold. And that’s why I also said, quickly is something to not take your eye off of, because I do know more about the philosophy and the vision of quickly, honestly, than I do about bricks. And so yeah, I think that that’s a very important thing and it’s missing from bricks All right

All right, so people talking about white labeling stuff question tutorial Please frames logo section alpha CTA named resources with three taxonomies ABC how to query in bricks only taxonomy a whoa oh gosh y’all hurting my brain frames logo section alpha well so on the top of my head if I remember that’s just a like a you know line of logos that stack for social proof logo section alpha and then you have CTA named resources with three times I just see I’m a little lost I’ll put that question up so everybody can see it right I just I don’t know I don’t I don’t know what you’re asking honestly so maybe try to rephrase talk to me like I’m five and then hopefully I can I can grasp it and answer for you question what do you think about recent Bricks release bugs and they’re adding global components to roadmap? Okay, so we just talked about the global components thing.

The bug thing was a little sketch, it was a little sketch. I feel like that bug could have been caught and really should have been, I mean, I caught it in like, you know, seconds, like bam. I mean, it’s, I don’t know, I feel like that should have been caught, for sure. And this is, you know, it is hard, guys.

It is very, very difficult. When software can be used in so many different ways and affects so many different things, it’s very difficult to make sure that you’re, like, there’s no such thing as bug-free software, right? But there are certain bugs where it’s like, that’s a critical error, not like a minor error. We have a lot of internal discussions in ACSS about how to prevent bugs in the first place but definitely how to prevent critical errors and the testing that things go through and on and on and on and we’re currently have plans to build out automated testing environments where we can install the thing and it just runs scripts and it tests a bunch of things automatically and but there’s still you know there’s things that people do with ACSS that I didn’t even think of doing and they might run into a bug here, they’re related to that and it’s like, I mean, nobody could have brainstormed that that was going to be the case, right?

So there’s no such thing as bug-free software, but we do have a responsibility to do our absolute best to make sure there are no critical errors. That was kind of a critical error. But they did, you know, kudos to them, they did what they were supposed to do, they immediately released a fix, you know, it’s like two or three hours later there was a hot fix. So that side of it was good.

I want to niche down my web consulting services but I have no experience in the niche. Just a huge interest and passion. How would you recommend I start?

Free work. Do you have an example of the niche? I’m trying to think. So it’d be like dog training.

Like if I was like, I wanna build, I don’t know why you would. I think dog trainers are all broke. But if you’re like, I wanna build websites in the dog training niche, I’m just thinking like, you know, random stuff here. But I don’t know anything about dog training.

It’s a little tough. I mean, here’s the thing about business. Like marketing, and this is why I can get on consulting calls. And it’s a business that I don’t have a lot of experience with, but they tell me what their challenges are.

And there are different frameworks and constructs for like, all right, well, I see you guys not doing these very important things. You are doing these things over here, which seem like a waste of time. And then we end up talking through it, and you throw out ideas. And then you just know there’s these frameworks of like, OK, why are you doing this but not doing this?

Why is your pricing this way and not that way? And here’s some creative things you can do that are a little out of the box that your competitors probably aren’t doing and yada, yada, yada, right? You can still provide all of that great value to a niche even if you haven’t done work in that niche, 100%. Really it comes down to content and copy, right?

Because then you’re in a situation where it’s like you can’t really write the copy if you’re not well versed in that industry. But you can always find a copywriter who is well versed in that industry and bring them on. Which is even easier if you are gonna niche down and be doing a lot of work in that niche over and over and over again, that makes perfect sense. Now you bring in a copywriter who’s well versed in that industry and they can help you with many, many, many different projects now.

And then you’re going to start learning about that industry as you do the work. And then it’s not going to take very long for you to kind of be an expert in how you can help XYZ business and XYZ industry get XYZ results. It’s just a process. No, I don’t think you need to do free work or anything like that.

You just need to know what you’re doing when it comes to like general business and marketing and obviously web design. Do you have any recommendations for quality Figma UI design marketplaces? I want to build some use cases, but I don’t have a budget. If you guys in the chat, go ahead, and I’m going to screen share in just a second here.

We’re going to maybe bring up some of that frame stuff that somebody was talking about just a second ago. But if anybody has UI related resources for Figma, please, you can’t drop links in the chat, they’ll disappear. But definitely give, you know, some pointers on where he can go to get that. Okay.

Will you be making frames for WooCommerce, my account along with. . . Yeah, yeah, yeah.

We’ve already been making WooCommerce frames and there are more coming for sure. I’m already offended. Leave Breakdance alone. I’m gonna build.

. . I need to build a page in Breakdance over BRICS for you? Cause I think Ruben you’ve used BRICS, right?

You’ve used it. Why breakdance over BRICS? Let’s talk about that. I’ll let you respond down below.

I’ll come back, I’ll come back to that. Rob says circular timeline to show a process maybe like a revision cycle. Is that a timeline though? I still need an example.

Okay. Save the rants for later guys. Come on don’t peak too early. Can someone fill me in about this interview?

Was it recent? It was not a video interview. It was, we’re not talking about the one that Cracka did. We’re talking about a discussion that happened in WordPress.

What is it? WordPress, some WordPress group. Somebody basically, you know, maybe I can, should I try to find it? Should I pull it up just so we have it?

Let me find it on my other screen real quick. All right, so this was in WordPress, WordPress, WordPress. Dynamic WordPress is the name of the group, Dynamic WordPress. And it was David McCann and he basically, I don’t know what prompted it.

Maybe he reached out to Lewis, I don’t know. But he basically gave his thoughts on the whole breakdance thing and what breakdance can do to be more successful in the market. Here’s the thread, I think. You know, it was challenging Lewis on some other things that had happened in the past, or things that Lewis had said, why some people were disgruntled, and I mean, there’s 152 comments, you know.

It was his thoughts. Okay, here’s what here’s what here was the original thread. Marketing. Okay, yeah, let’s talk about this.

Let’s just pull this up. Okay. All right. This is it.

I want to make sure. See, now we’ve got to get rid of all these bubbles here. Let’s get rid of all these bubbles. Okay.

All right. This was it. So kind of a I mean, it wasn’t too long. It was semi long.

You said that your main point is marketing and you said, I don’t know, like this, it felt like the post came out of nowhere. And it has this official image, thoughts about breakdance from Dynamic WordPress. So this is David. You said that your main point is marketing and you said that there is a cadre, cadre, is this how we pronounce this, of unhappy oxygen users who are, my gosh, stop it, people.

How do you silence these? Is there any, see, I can’t even bring up, let me do this. Oh my gosh, stop it. All right, I’m gonna bring this over here for a minute.

All right, let’s bring this in. Here we go. Save that. Let’s bring that over here.

Okay. And now we can even zoom in better. All right, you said that your main point is marketing. And you said that there’s a cadre of unhappy oxygen users who are poisoning the well.

Here are some thoughts on this. And that by the way, people aren’t allowed to be upset about the thing apparently. It’s just them, everybody’s poisoning the well. Breakdance is always so fly, they’re always the victim in this situation.

Nobody was wrong, it was just everybody misunderstood and there was really no problem and now anybody who is a little upset or has something not positive to say, it’s poisoning the well, it’s classic stuff. Marketing – based on their pricing and cloud offering, my sense is that the majority of the Elementor customer base, okay, so they’re targeting Elementor heavily, if you guys don’t know, that’s their whole thing, it’s like, we’re a better Elementor, that’s the whole position of Breakdance. My sense is that the majority of the Elementor customer base are individuals with one or only a few sites. Does that track with your research?

Is that the part of the Elementor pie you are going after? If so, you want training resources starting from scratch. In my experience, this segment needs a lot of basic WordPress help. Let’s keep in mind that like, doesn’t Elementor come pre-packaged in a lot of like template packs on ThemeForest and stuff?

Like the free version of Elementor. Everybody goes on and on about there’s these eight gazillion Elementor installs. And it’s like, how many of those are live sites? How many of those are real sites?

How many of those like, you know, did the person actually choose Elementor or was Elementor just pre-packaged in this theme that they bought and like, you know, there’s that whole situation, right? It seems like Breakdance pricing is more friendly to them than Elementor pricing, that’s a point of comparison. There’s a good amount of overlap between the needs of the two groups. You should cater to that overlap, but for targeting, creating training resources, building community, defining your market segment will be helpful.

My sense is that your target is freelancers and small agencies, but also some individuals where the overlap is sufficient. Okay, this is all boring. The general message along the lines of as easy as Elementor, but as powerful as Oxygen seems like a good one. You have lots of good points of comparison to back that up.

Criticisms about doing comparisons are crap. Comparison together with experience, okay, I agree with this. You have to be able to compare in your marketing. You compare and contrast that is an important part of marketing.

Every group, every tribe has a story, yada, yada, yada. Okay. All right, let’s talk about the disgruntled oxygen users. There are maybe three sources of bile.

One, you told them they were special because they use oxygen and it was the best there is. Then you switched and said how great Breakdance is and they felt like the rug was pulled out from under them. Second, there was some financial element because they thought they had taken care of the builder cost. Third, worry about change and retooling and they felt it was forced on them.

Here are some ideas on how to fix it. Okay, like, all right, take steps with no rational burden, give people a discount, yada, yada, yada. So is this real? You know, are these really the three reasons?

You told them they were special because they used oxygen and it was the best there is. Maybe I would reword that. Let me pull up my chat so I can see our streaming here. Okay.

It’s not that people were told they were special, okay, for using Oxygen. It was because Oxygen was, in fact, the best there was. Okay, so Oxygen was the best page builder for doing professional work in WordPress. So that was just the reality.

Oxygen was the best tool that there was. And there were inklings that Oxygen was being rebuilt in view. Now, if you want me to go into conspiracy theory mode, I will gladly go into conspiracy theory mode. In fact, I posted this, when this whole first thing started, I published this in the inner circle.

I did a whole long write-up. And we’re wondering like, why are we, should we rehash this? Is it really all that important? It goes into page builder philosophy, it goes into the shakeup in page builder land, again going into talks about it is important guys to understand the vision and the philosophy behind a tool based on what the developer is thinking inside of their brain.

And this was a big thing, okay, that nobody knew what Lewis was thinking. If we had known what Lewis was thinking or what the vision was or what the philosophy was, I think that would have solved this entire thing. So I just mentioned a little bit ago, it’s important to know the vision and philosophy of the developer, we don’t know that with Bricks. We don’t know that with Bricks.

We didn’t know that with Lewis and it didn’t work out so well, okay? So that goes to show you how much transparency and being involved in the conversation is how important that is. Oxygen was the best. They felt like the rug was pulled out from under them.

All right, let’s go into conspiracy theory mode. I knew somebody that worked at SoFly for a little while, and it was his understanding that oxygen was being rebuilt in VUE. That was his understanding. There was a lot of rumblings in the community in general, but I heard it from somebody who actually was at one point on the inside of SoFly.

At least that’s what I was told. And it seemed like it was actually happening. And then another year and a half goes by, and it’s like, where is it though? You know, where is it?

And then Breakdance just comes out of nowhere. And I will just tell you, when I opened Breakdance and started to use it for the first time, I was like, this feels like it was Oxygen 4. 0. Like if they were gonna rebuild Oxygen in Vue, this is what it would probably have felt like, right?

And it had some of the same stuff that Oxygen does. Like the section inner div element thing, exact same behavior, right, from Oxygen, which they could have fixed, should have fixed, but still didn’t, which was disappointing. Like Breakdance still has the invisible wrapper inside of sections, it’s hugely, hugely problematic. And so, or what version is Oxygen on?

I keep saying 4. 0. Oxygen builder, okay. Gosh, all right, here we go.

4. 0, okay, yeah, 5. 0, sorry, it would have been 5. 0.

I keep saying 4. 0, it would have been 5. 0. If it was being rebuilt in view, like that’s what 5.

0, I, my brain has a hard time believing that that was not Oxygen 5. 0, that Breakdance was not Oxygen 5. 0. Somewhere along the line of rebuilding, they shifted gears and they went from, we’re rebuilding Oxygen and Vue to no, we’re making something new.

Now I think Lewis will say till the day he dies that that is not the case. That they built Breakdance with this grand new vision, right, all from the ground up. My brain has a hard time believing that Breakdance is not Oxygen 5. 0.

And then they just shifted gears, they went a little bit there. Because honestly, at this point right now, it’s Oxygen without a class-first workflow. In fact, a lot of parts of it are better than Oxygen. Man, that’s my conspiracy theory.

I fully believe they were rebuilding oxygen and then shifted gears and then told everybody they built Breakdance from the ground up and yadda yadda. And this was the vision the whole time. But they just, you know, their fault was they didn’t tell anybody, right? They just kind of dropped it on everybody.

So then you’re thinking, alright, so why did people get upset? People got upset because they realized, oh, this tool that I know and love, that is the number one tool for WordPress page builders, if that time and attention had been put into this tool, it would be far and away the best tool for WordPress. Hands down, there would be no question, zero question. And I just put this the other day in the inner circle because this came up again, somebody else brought it up.

And it has to do with all the new stuff that Breakdance is getting and the fact that Breakdance is getting things that they said it was never going to get. The repeater, oh it’ll never have a repeater, it’ll never have a query loop, it’ll never have a div, it’ll never have this, it’ll never have that, now it has all those things. The only thing it doesn’t have is a class-first workflow. How long will it be till it has a class-first workflow?

I don’t know, month, two months, three months, whatever. Don’t know. Maybe it never will, but there’s a lot of things that were never gonna happen in Breakdance that absolutely happened, you know, not very long after we were told that it was never gonna happen. And what is my main argument, Ben?

Well, I just know from a marketing and business standpoint, I mean, you have two tools that are very, very, very, very similar to each other. It splits up your marketing, it splits up your resources, it splits, and it’s just based on what I know about business, if one of them over here is just not getting a lot of love from the market anymore, it is going to cost more to keep it around than it is to just get rid of it. That’s why I’ve always said the number one thing threatening oxygen is break dance. It’s not bricks, it’s not any other builder, it’s not quickly, it is their own other tool.

Their own other tool is the thing that is going to kill this first tool, especially if it continues to cannibalize it. It just doesn’t make any sense to keep the other tool around. It doesn’t make any business sense whatsoever to keep the other tool around. And that’s why I brought up on the very beginning of this stream, I see Cracker and Lewis talking about scroll animations, and Lewis’s solution is, oh, we’ll just build in custom properties so that people can do anything with the scroll animation.

I’m like, that’s not a beginner thing. None of y’all’s discussion right here is beginner. This should be technically, based on what we’re told, happening in the Oxygen community. That, move that discussion over there.

I thought this was the, no, we don’t, we’re easy, right? We’re for beginners, we’re point and click, we’re this and that. If we’re gonna build an advanced tool, I mean, they’re talking about building functionality that Oxygen hasn’t even sniffed. Oxygen hasn’t even thought about that kind of functionality and it’s in Breakdance, right?

It’s in the beginner tool, but it’s not in the Oxygen tool. And so everybody starts to realize, man, if they put this time and attention into Oxygen, it would hands down, no competition, be the best page builder for WordPress. But what do we have instead? We have a tool that’s limping along oxygen limping it’s absolutely limping along okay I nobody can counter that or it is limping along and then we have breakdance which is what I said in the inner circle basically scrambling around trying to collect disgruntled elementary users like their Pokemon’s like you know it’s that’s their whole thing.

It’s like, oh, do you hate Elementor? Come over here. Do you hate, are you dissatisfied with Elementor? Come over here.

We’re a better version of Elementor. Not a lot of vision beyond that, you know? And so it’s like, man, this is what we’re left with? Like, that’s just disappointing, right?

If you cared about Oxygen, if you cared about page building and, you know, having a really fantastic tool for once in WordPress to do like professional work, it was just disappointing. It’s like, this is what we could have had, but then we were given this situation. It’s not, it has nothing to do with money invested in the tools, it has nothing to do with anything, right? Doesn’t even have to do with the fact that I had automatic CSS for Oxygen.

Dude, I just, we made it for bricks, we’re making it for quick. Our vision for ACSS is well beyond a single tool, right? So that doesn’t affect me whatsoever. It’s just, it’s like, and it’s disappointing for Elijah, like for SoFly, honestly.

They could have had the number one tool easily, hands down, but now we’re in this situation right here. So yeah, I don’t know if it’s worth going into any other detail points on it, but it’s just it’s it’s very difficult to understand the strategy and it’s clearly it’s not working out all that well. Alright, let’s get some other questions going. Reuben says I built a hundred plus sites with oxygen my day job at a marketing company and 50 plus with breakdance so far and it’s better.

Okay, so Reuben is saying that Breakdance is better than Oxygen. It works for quick websites but nowhere near the fully dynamic websites you can build with Oxygen. The framework is surely newer and that shows but it’s full of bugs and limitations. Okay, Louis wanted Elementor users but had no idea who the typical Elementor user was, what they wanted or how to reach them with marketing.

As a Breakdance user, it’s not worth it. What’s not worth it? Where do you stand, Ruben, on, let’s ask, because Ruben has done a lot of sites with Breakdance, do you feel that class, what is your solution for scalability and maintainability inside of Breakdance? And I would also like to ask Cracker about this as well.

What is his workflow? All I’ve seen is like a couple of Lewis videos on how to do this and that. I haven’t seen anybody build a site with Breakdance or really talk about a scalable, maintainable workflow within Breakdance. And I would like that.

I would like to see that happen. So Ruben, maybe you can shed some light on what do you do to ensure scalability and maintainability with the sites that you build. Also, what is your take on the, what I call the walled garden pre-built elements thing? By the way, pre-built elements are in all builders, right?

Divi has them, Bricks has pre-built elements, and I mentioned you shouldn’t use them in any builder, okay? So this is not just a breakdance thing. So for anybody listening, watching, if you’ve been using pre-built elements in any builder, I would highly recommend you stop doing that ASAP. But I want to hear from Ruben what he thinks about scalability and maintainability inside of Breakdance.

None of those three arguments hit the mark. We felt abandoned and unsupported because he blindsided us with this whole long-term plan. Well for me it was like this tool that I’ve been using, this tool that I’ve been teaching, this tool that I built a bunch of sites with, this tool that I’ve convinced clients is a really good tool and will be around for the future, I just saw that it was going to die. And so I was like well shit, that’s disappointing.

Because when they laid out the plan for oh well breakdance is gonna be this and oxygen is gonna be this And I was like that’s never gonna work Like I just knew I just knew that was never gonna work So I mean we could have seen that we should have been able to see this from day one There’s still people that can’t see it And I don’t care about you know Lewis will come in and be like look at all the updates for oxygen We’re still up. It’s not dead when I said it was dead. I didn’t mean right then and there. Okay, I meant its future is dead.

So, you know, like Divi has been around for a long time. And guess what they’re doing with Divi? They’re rewriting it from the ground up. Imagine that.

And they’re sticking with one tool, one brand, one vision, one, so, you know, as much as I can rag on Divi for horrible, you know, div-ception, that’s where the whole thing came with div-ception, pretty much from Divi, you know, at least, at least they, you know, listen to their community, they’re transparent, they stick with one vision and one lane, and they are legitimately doing everything they can in their eyes to make Divi the best they can possibly make it. So there is an example of that happening in the WordPress marketplace. I don’t even know. I mean, there’s so many angles.

There’s so many angles. What I would really need to talk about this is an outline, and I could go point by point by point. It’s hard to talk about it randomly because there’s so many things to hit on, and there’s been so many claims and so many counters and it’s just like I start talking about one and my brain fills with like A hundred others and we could just we’re just going to be bouncing in different directions Ruben says you’ve reviewed my site on dummies. I created with bricks ACS and some frames, but I still love breakdance Okay, I’m still I’ll scroll down a little further.

I’ve got to see what you have to say about scalability maintainability Sorry, CPT named resources. Three types of resources only want the logos for resource A. I still, I mean, let me, let me pull up logos. Was logos alpha or something?

I know I’m not screen sharing right now. I just want to, I guess I can screen share here. I’m just still trying to imagine what you’re trying to accomplish. Yeah, so this is Logos Alpha right here, which this screen resolution, let me put this in a section here.

All right, let’s take Logos Alpha, bring that down into this container here. So you want to use a query loop, but you’re saying you have a CPT name resources, three types of resources,

and you only wanna show the logos for resource A. Can you give me an example of like what a resource is that would have a logo? I’m trying to think like what is a resource that would have a logo, like tools maybe? But then why would a tool have multiple logos?

This is why I’m having a hard time wrapping my head around. I really need to know the use case. Like not in abstract terms. You know, I got, imagine I have a resource imagine I have a logo like but that doesn’t help me understand I need a real-world situation that it’s like oh okay that’s a challenge let’s let’s go ahead and solve that challenge when it’s all abstract II I just have more questions than I do answers is there a frames change log somewhere I need to know when new frames are released to what they look like.

Yeah, getframes. io slash changelog. And then you can click in and you can click to any of these and then you’ll see an example of the frame. So this is a blog post Delta, a narrow textile blog post with optional lead text.

All right, so and then it comes in and tells you what the localesco variables are, right? It tells you kind of everything about that frame. Now, the documentation side of this takes a tremendous amount of time. Not all of them are fully documented.

Some are not documented at all yet. They just have a photo. Some are partially documented, some are fully documented. So we’re just getting that documentation side of things done as we can.

But yeah, you can review this change log here and see all the new stuff that’s getting released. Okay. I want the company I work for to benefit from your Inner Circle trainings.

What can we do to have you give a training? The company you work for, is that like an agency kind of thing? I don’t know. Email me kevinatgeary.

co and we can discuss what might be a possibility. Okay, any ETA other than August for frames for Figma? Just yeah, later in August. The next video that I do on frames for Figma will have a fixed date on it.

And then on the, by the way, if you go to the coming soon page right now, get frames. io slash Figma. This is going to be the sales page for it. So I’m logged in and I was testing something here.

If you view it logged out you won’t see I’m a button. Let’s go into incognito here. There you go. This is what you’ll see.

So first of all make sure you’re on the list right. Put in your email list, hit join list and this page will transform into the sales page as soon as it’s available. So you can bookmark that link if you want to And it will have a date on it very, very, very soon. Okay.

Let’s see here. Financial services economics podcasters. Are these the resources that you were talking about? Is that the same person?

Resources, resources, trying to find this other comment. Mm-hmm, man, they gotta do, you know what I wish? I wish YouTube had a chat over here and then a Q&A thing over here, kind of like Zoom webinars does, makes it so much easier. When you’re on like a webinar, like separating out Q&A from like random chat, way easier, way easier.

Oh, that was a different person. It’s Dede that’s talking about CPT’s named resources. With frames, should I be removing the frames classes and creating my own, adding additional classes for styling or simply styling the FR classes on the element? I keep saying that this video is coming.

I want to cover it in depth is the thing. And I’m trying to collect all the various like use cases and things like that. But there’s some very general guidelines, which I have covered the general guidelines before. Let’s add a hero section.

And let’s say it’s like this, Hero Oscar right here. So here’s Hero Oscar. Okay, so obviously everything has a class on it. There’s FR Hero Oscar, there’s FR Hero Oscar accent heading and fr-accent heading.

Some people get confused by the fact that there’s two classes on an element on some elements like this and they’re like which one is which. Well, fr-accent heading. Here’s the thing about when you’re using frames, when we’re creating frames, when we’re using frames, when you’re thinking about web design in general, it really helps to think in patterns. You are gonna see patterns repeat over and over and over and over again.

And then so some things are going to be used once, some things are gonna be used within patterns. They may be the pattern themselves. Like, and this is actually why I give WordPress team, WordPress core, credit for this. They call everything patterns, all these layout things that you can save to your library in the future of WordPress, in FSE land, these are called patterns, right?

Which is, it’s kind of nice, that’s a good name. It’s a good name. So if you want me to give them credit for something, there you go, I give them credit for that. It’s a good name, I like patterns.

Because that’s what we’re looking at. We’re looking at patterns of things. Like this block right here, yes, it exists. It lives inside of Hero Oscar.

But really it’s an intro pattern. It’s a pattern of an introduction to other content, right? It’s like centered, it’s a centered heading with a little lead text and an accent heading. I could use that within the context of Hero Oscar, sure, but couldn’t I also use this many, many, many other places?

So, you know, frames being modular, you can come in here and just type in intro and there’s a bunch of intro patterns right intro alpha is this right here This is an image group. This is image group Delta See hero Oscar is a two other frames It’s intro alpha combined with image group Delta Because it makes sense that image group Delta is a pattern in itself that could be used in other areas of the website It’s not like it has to live within this hero section or a hero section at all. It could live in many different places. So understanding the modular nature and thinking in patterns is very critical, not just for using frames, but for just doing web design in general.

Because when you’re coming up with class names, for example, see, would it make sense? And this goes back to what I was saying about, do you know the philosophy and the thoughts of the developer? It really helps, okay? So here we are, we’re having a discussion about philosophy and what goes into putting together a product like Frames so that it works for tons and tons of people, so that it’s scalable and maintainable, so it’s still completely customizable.

Okay, what goes into this? So let’s talk through a few things. Would it make sense, this is fr hero Oscar, for this to be image group Oscar or something, or like fr hero Oscar double underscore image group. Like it’s a an element in BIM.

BIM you have your block, hero is our block, then an element in the block could be this image group right here. But that doesn’t make sense. You can’t do that. You shouldn’t do that.

Because then this thing is tied to its use within this hero situation and and when you use you can’t this breaks BIM actually fr hero Oscar double underscore image group if I go put that image group into another section the class naming no longer makes any sense whatsoever make zero sense right so you just can’t do that it just breaks it and so what is BIM instruct you to do? This is all, a lot of these decisions are based on just general BIM philosophy. BIM says that a block within another block is just another block, okay? A block within another block is just another block.

So don’t name it. Its name has no association with the parent block. It’s just another block, but it happens to live inside this other block. So this is a block called fr-hero-oscar.

This is just another block that happens to be inside of that block called fr-image-group-delta. And now when I take image-group-delta and I use it somewhere else, it makes perfect sense because it’s its own thing and it can live wherever it wants to live. And I can style it at the class level. Okay, so if I style this at the class, let’s do something like this.

Let’s do something like CSS, come down here. Now let’s explain this while we’re here. So one criticism that I’ve seen of frames, let me select that again and go down here, is that sometimes there’s CSS that says display grid and here’s the grid template columns. And notice it’s 1fr, 1fr, 1fr.

That’s a three column grid. When in reality it should be this. But actually in reality this should be done up here, display grid, and then grid template columns you put in the grid instruction here. So why is it down here in the CSS box?

Well the answer is very simple. Things in web world, the internet, there’s this thing called the internet. Have you guys been on it? It moves really fast.

It moves really fast. So when we started building frames with bricks, right? Bricks didn’t even support grid. Imagine that, didn’t even support grid.

So we had to write the CSS to create a grid. Automatic CSS, when we started building frames, didn’t have grid variables. So we had to write them like this, right? This kind of thing, or using min max functions or whatever.

So the variables came later, the grid support in Bricks came later and it leaves older frames just done the old way, which is unfortunate. It would be amazing if we could just go like, if I could just get my magic wand out and be like, update. Like, that would be fantastic, I would love that. Because then everything would be super consistent, everything would be done exactly the same way, but unfortunately I can’t do that.

When we release something like variables for grid, which were a fantastic development in ACSS, they’ve been there for a while now, it would mean you go back by hand every old frame and update it from using raw grid instructions to the variables which we have no problem doing we just can’t wave a magic wand and make it happen right so you’re going to run into situations where there’s some like a maybe an old school way of doing this right so i’ll just i’ll put this back the way that it was one fr one fr one fr and i come down and i say all right image group delta so we’re talking about do i edit the class do I edit the ID do I like what do I do here? Okay, so I’m gonna make it change this we’re gonna say root and We will do We’ll do we’ll select all of them and we’ll do inf child we’ll do even and Let’s do a border check. Okay, so we’ll do a border 5 pixel Solid I haven’t even looked at the structure of this. Okay, so my guess my guess was correct So border 5 pixel solid red and then what do I want to do?

Let’s do a transform translate Y and Let’s just move this a little bit. Okay, so I’m gonna go minus 1 M like that We could just do a little stagger action here, right and then I’ll come down here. Maybe I even wanna do the odds in the opposite direction to create a little bit more of an offset. Something like this.

And then I go here. Now, it just breaks things up a little bit. It’s nothing spectacular, but it breaks things up a little bit. Then I can come in here and I can fill in with images.

I’ll just slap these in here. And bam, bam, bam. Imagine that we’re building a martial arts hero section. Okay, here it is guys, here it is.

Here’s our martial arts hero section. All right, so you know, very quickly and easily, you know, I get some offset triple image action happening here. Maybe I overlap this so they look like they’re overlapping into the next section. You can start designing this up any which way you want.

When I go use Hero Oscar again, all right, so let’s go to a new page. And by the way, you can save this now to your own internal library. So people are like, I wanna remember which ones I’ve used on my site. Well, if you go save as template, and you can say hero, you can actually change the name here.

The name doesn’t really matter. So you can say like main hero, right? Maybe that’s the main hero type. That’s gonna save it not in remote templates, it’s gonna save it to my templates.

And then you can just easily add it to another page when you’re when you’re building. Okay so I go in here and we’re going to go to add new okay hi publish publish edit all right and then I’m just going to go in here templates main hero insert and you’re going to have to put in photos again you know wherever you want them to go. Now I could have done import photos and I think it would have imported the same ones. But it’s a new page, right?

We don’t wanna use the same images. We wanna use different images. But look, do you see how the staggered effect is already there for me? It’s like it already, there it is.

It looks exactly like the other one. Why is that? It’s because the change that I made was done on the class level. In fact, if I import it from the remote template library, right, where it was Hero Oscar, is that what it was called?

Okay let’s insert. There it is and it’s already got the offset. Why? Because in my installation I took that class and I made a change to it which means everywhere I use that frame now it’s gonna have this change made to it.

Now let’s say you’re like that’s cool in most situations but in this one particular instance I actually don’t want that offset to exist. Is there any way to like undo it or override the class? Well that’s where your ID styling comes into play. No problem whatsoever, right?

So you can go get this here. Here’s your instructions and I just turn off the class, pop those instructions back in and I just do transform or I think you can do like none here, right? Transform none. There you go.

Save. Now in this one-off instance, I have undone that customization. And you can do any customization, could be undone, you can add to the customization that was there. It’s just a mix of using ID versus class and knowing when to do what, right?

So the general philosophy is, if I wanted that offset to just generally take place everywhere I use this frame, absolutely I would put that offset on the class that’s associated with that frame. If I only wanted to do something on a one-off situation, then absolutely, I would just style it at the ID level, no problem. And that brings us back to this accent heading of why does it have two classes? Well, there’s a situation where accent headings, we have to see an accent heading as a block in itself.

It’s its own, it is a global component. Because this accent heading is not only going to live in this one hero sex this accent heading could live many different places on the website And the reality is that thinking in patterns We know that an accent heading is an accent heading as an accent heading if you look at good web design Accent headings look the same everywhere you see them, right? They’re not associated with a particular frame So you want to do the design of your accent heading on the fr accent heading class the class that is not associated with any particular frame whatsoever so I come in here and I do my general accent heading styling so I do like uppercase okay and you’ll see what I mean in just a second let’s do font weight of 700 let’s do letter spacing of 0. 05 M that’s too much 0.

25 M something like that maybe we want to go action on our color here So we’ll just go action on the color. All right, say that’s enough, right? So then I refresh. Oh gosh, that’s too big All right, so we’ll go to typography text s on our accent heading save refresh Okay, so there’s a nice little accent heading and then you can imagine you did some pseudo elements to it You did a bunch of fancy shit, right and you got a fancy little accent heading thing going on here.

So the question is, you know, do I want if I go insert another frame? Let’s find a frame maybe that has another intro. We’ll just look at some section frames here. Okay There’s slider echo.

There’s this that one doesn’t have an accent heading. This one has an accent heading, but it’s a little much There’s a menu. Here’s feature section Sierra. Let’s just drop that bad boy in.

Okay, so now we got alternating content where the things touch the edge of the screen. Let me turn this code block on right here. Bam, all right. And so that’s pretty good.

So now we’ll go back to here and look, lo and behold, lo and behold, my accent heading just already knows how it’s supposed to look. Well, that’s nice, right? Because an accent heading is a, think of it as a global block, like think in patterns. We need to see the same accent heading everywhere.

However, however, maybe there’s a situation where you’re like, well, the accent headings that live within intro alpha, this particular introduction frame, I want those to look a little bit different, okay? Then you can style the intro alpha accent heading class, it gives you unlimited flexibility. Because now I have, here’s my global style for an accent heading, here’s my style for an accent heading when it lives in intro alpha, and then you also have ID level styling, which you could just one-off do whatever you wanted with. So you have three different paths that you can go down.

It’s just having more options in your toolbox, right? It’s like a plumber shows up with a toolbox with one tool in it, he’s probably not getting much done, right? Not gonna live a good life. But if he has multiple tools, and it’s like he runs into a situation where he’s like, oh, this calls for this other tool.

That’s what we’re giving you. We’re just giving you multiple tools, and you decide which path you wanna take. So you have global styling here, you have styling related to this thing that lives in a specific other context, and then you have ID styling, which is always just one-off, do whatever you want with it. Okay, so you have three different options for styling frames.

But you see the one I did ensures, look at this, accent heading there, accent heading here, accent heading, they just all look like they’re supposed to look. And this is why when you’re building a website with classes and you’re building a website with something like frames, As you do work, the work you have to do in the future minimizes, right? The work becomes front loaded because like you just saw, now I never have to style my accent. Like every other frame that I add, the accent heading’s already done.

Well, imagine if there’s other parts of the frames that you’re adding that are already done for you, right? Because these things are repeating patterns that we need to see consistency in all throughout the website. So the website as you’re building it actually gets easier and easier to build as you go because more stuff is already done for you by the work that you did earlier. When you’re not using classes, when you’re using ID level stuff, that’s not the case.

This is the same amount of work on every page. And then you’re stuck in copy paste land and all this other nonsense going on. I mean, this is like, I’m showing an example of how a global class really dramatically helps things out.

And by the way, if I ever need to change, we already know this, right? If we ever need to change the color of all of our headings, like, oh no, we want them to be base medium now. Okay, save, refresh. Guys, they’re all base medium.

Now, go show me how to do that in Breakdance. Why is that dead? Why are we declaring that to be dead? Show me, show me, don’t stop talking.

Show me why that’s apparently dead, right? I’ll wait, I got time, I’ll wait. I’m here every Wednesday. You can come on as a guest and show me, okay?

It’s up to you. All right, so hopefully that answers that question. We can look more at general structure. Okay, so let’s go into here.

Let’s look at this, feature card Sierra. Well, you can hover over this and immediately see there’s a lot of stuff going on here, right? This is actually a very complex frame. This took us, this was a lot of discussion.

This was a lot of, yeah, because making an image breakout to the left and the right, right, while keeping, this content, by the way, is in content alignment with the page, okay? It’s hard to see on this screen resolution. Let me tone down the screen resolution right here. Da da da da da.

Okay, display settings. This is screen number two. There we go, okay. See where this content stops?

It’s not like it’s going all the way out here because the screen got wider. It stops at the content width of the website. If we look at this in the inspector, by the way, these are all LIs and a UL, right? Because cross your T’s, dot your I’s, follow best practices, my friend, get your list item structure going.

All right, so we’ve got this, let me grab this one. That is the section, that is the container. That’s the container, right? So that’s container width.

Notice the image just busts out the side over there. But notice the content is perfectly aligned with the left edge of the container. So getting this to happen, and this stops at the right edge of the container while your images break out either to the left or the right, and there’s a lot of math involved, there’s a lot of stuff involved. This is an example of a frame.

People say they want this all the time. This is a common pattern online, right? It’s not like we engineered anything, any new concept. It’s just a concept where when people want it, they just don’t quite realize how much work it takes.

Not to mention, you can flip-flop these automatically. Like you can say, I want the first one to have the content on the left and the image on the right here, and then it’ll alternate from that point forward. The alternating is done automatically. So a lot of stuff is done automatically.

Not to mention, notice it says CSS tab like hey go go look in the CSS tab a little clue right here go look in the CSS tab so we click on feature grid Sierra we come down CSS and we look in here and what do we find do we find a shitload of CSS that you have to try to figure out like oh how is this done no in fact you all you see is some locally scope variables and one of them says feature span 5 and it actually has a little comment right here. I don’t know if you can see it in the screen resolution, but it says the width of the features column. And then there’s this grid card gap. Okay, that’s the gap inside of the card of the grid.

And then your image aspect ratio can be controlled. So you could just start and then the box layout width, if you’re, see, here’s another thing. Does the person using this frame have a normal website or are they using a boxed layout? Because if they’re using a boxed layout, we got to change some shit, right?

We got to change it around. Got to think of all the situations and context. So we have this little variable for people using a boxed layout. This will make this usable on their website as well.

Okay, so we come in here and features, let’s just change features span five and going into like the thought process behind this. How do we make it as easy as we can possibly make it? So I’m gonna change this to four. Notice that the feature span, okay, this ratio has completely changed, right?

I’m gonna go back to five so you can see it. There was four, or there’s five, there’s four. Now I can go in the other direction, there’s six. See, I’m adjusting the ratio.

Look at how all of them are changing. All of them are changing. So this is a 12 column grid, which means six is halfway. So this is a 50-50 grid now so I can go the other way I can go more content less image or I can go the opposite direction let’s go five four I have more image less content right so a narrower content bigger image all I’m doing is changing a number on a locally scoped variable it was like I mean think about this right what when you normally need two variables you would need a variable for this column size and this column size well what we did on the back end is we just did math for you right so you just tell us how much the feature is going to span and we just take care of the rest of the math on the back end and so it makes it very easy you don’t have to know how that card was built in order to change the ratio all you have to know is I got to change four to five or five to six or whatever I just got to find the ratio that I want by the way four point five that actually won’t work that breaks up the math sometimes you can do that You can like kind of dial it in even more you can dial it in with the gap though check out this gap 1.

5 look I can I can get micro adjustments using my gap, okay? That’s another way to do this And that’s just to demonstrate there with the the gap controls that you have available to you And then you can play around with the image aspect ratio like you want to force these images to all be squares I just went from, what was it, six to four? Yeah, I went from six to four to four to four to make them all squares. And you can just sit here and play with these things, right?

You don’t have to analyze a bunch of CSS. So even though it’s a complex structure, still there are controls that make it very, very easy for you to manipulate it. And because I’m manipulating it on the class here’s another thing guys it’s gonna have that manipulation every instance of this but what if you were like no no no I just want this one instance just this one instance I want the cards to be 50 50 okay watch this I’m just gonna steal feature span 5 right here turn off the class go to root drop in feature span 5 and then change this to feature span six. And now just this instance of the grid, they’re even columns.

Just this one. Why just this one? Because I’m controlling the feature span at the ID level. All right?

And this by the way, is the power of locally scoped variables. I didn’t have to write a whole new grid thing. I just, nope. There was already something declared called feature span.

I just stole it, put it on the ID level, and I can manipulate it for this one instance of the frame. This is what ultimate flexibility and scalability and maintainability looks like, okay? The ability to make these changes on the fly and affect so many different areas, even without even knowing how the thing was built, okay? We could go example after example after example.

And I think this does help people because it is, I’m not saying there isn’t a learning curve, right? There is absolutely a learning curve. The argument is the learning curve is well, well, well, well, well, well worth it. The amount of, yeah, you spend a little bit of time doing the learning curve thing, and then you just save a tremendous amount, like exponentially more time saved on the back.

And once you’ve got the hang of it, exponential, and then the joy of like, I’m rebuilding a website right now, sbgatlanta. com built this site long ago, long ago built this site. If you guys want to see like, or, you know, talk about this concept of like evolution of, you know, ability and skills plus evolution of just CSS in general and all of that. I go look at this website and I just, I just want, you know, people love, people like it a lot, you know, the client really loves it.

And but I look at, you know, the things that I did to build it and some of the decisions that I made. And then this was an oxygen. I’m just like, I want to jump off a bridge face first. Who?

What chump? What absolute chump built this thing right here? Now I’m rebuilding it. And I’m rebuilding it with bricks and frames and automatic CSS.

There was no automatic CSS when this was built. There was no frames when this was built. There was no, there was no a lot of things. There was no a lot of things.

And even my own skills and stuff have developed, right? So obviously things change and things move fast on the internet. I started rebuilding this with frames and bricks and automatic CSS. And it’s just like bam, bam, bam, bam, bam, bam.

Like it’s just night and day different and the workflow is just it’s kind of a joy honestly it’s like wow this is so easy I’m having I’m having a lot of fun with this so and then I can try new things and I can make some adjustments and on and on and on so yeah it’s like when you get through the little bit of learning curve that’s there the door that opens to you it’s unbeatable unbeatable in my opinion okay did anybody have questions about any other frames while we’re into this mode right here? Have you noticed aspect ratio issues with Safari? I’ve been having problems with it and stopped using it. I mean, I noticed a lot of problems with Safari, but aspect ratio has been supported for a while.

Let’s see. I mean, we’re at 92% on aspect ratio, and we have support for Safari. It’s probably, it’s just older versions of Safari may give you problems. But it’s been, you know, 2021 is when they started supporting it, it looks like.

So it is technically supported, but older devices, older stuff that’s out of date, yeah, there may be some aspect ratio issues. I consider aspect ratio to be a little bit of a progressive enhancement. Future Grid Sierra. Notice too that on Future Grid Sierra, as the example, I’m able to manipulate the image, the images, all of them at the same time, without having to go find the image, right?

And then get its class. See, if I did find the image and I activated its class and I looked at the CSS, all I would see is that locally scope variable that’s back here and that this is where you change it. Right, so you can actually open a frame and change a lot of the things within it without having to go find the elements within it. You can just change them from the parent area.

It’s not the case on every frame, but it is the case on a lot of frames. Every frame presents unique challenges that have to be overcome. And we have to come up with like, all right, what’s the best approach to this? And so there’s gonna be differences between the frames.

And so that means each frame has a, you have to add it to the page. Let’s talk about that. Let’s talk about the time. You have to add it to the page, something like this, and then just do a quick inspection of like, okay, what’s going on here?

How is this thing put together? And so you just kind of take a look at it. Now there’s some helpers like, hey, CSS tab. Hey, a lot of the stuff’s in the CSS right here.

We put this little LIs over here to let you know, these are list items, by the way, right? Inside an unordered list. So you just take a few minutes, and people are like, man, it takes a little bit of time to look through that frame and figure out how it was done and how I’m gonna edit it. Okay, a few minutes.

If you tried to build this on your own, I mean, let’s just take the average person, start the clock. Have at it, my friend, have at it. And let’s see how long does it take them? There are some people, it would probably take them three hours to build this.

Right. OK, so it takes you five minutes to sit here and like, all right, how did they put this thing together? All right. What can I change and adjust?

All right. What does this thing do? All right, oh, look at that, oh, oh, change some, okay. You’re just doing a little, take five minutes of inspection.

Guess what, you’re still two hours and 55 minutes saved. Like, just drop your content in and move on with your life. By the way, you can delete these, query loop this bad boy, you got a whole dynamically generated alternating section of content, right? So yes, they may take a little bit of inspection, they may take a little bit of playing around with, but in a lot of cases, they’re still saving you hours of work.

And this frame, this framework alone would save hours. Like, add that up to the entire website for all these various different things that you might be doing. So the argument is not, you’re gonna be able to pop into a frame and it like the matrix that just you know instantly you know exactly what you’re supposed to do with it yeah it may take a little poking around also there may be some documentation to help you also maybe eventually there’s a video showing exactly how the frame was used that’s my ultimate goal in life is that every one of these more advanced frames that are like like let’s do another one let’s do let’s let’s get rid of that let’s go here like we saw one earlier that was a bit complicated in fact Wajih made this argument just the other day. Let’s go to our maps here.

Let’s go to map. Is it map or contact section, I think. Okay, let’s do contact section Foxtrot right here. Then there’s this code block right here.

This has actually been updated like multiple times. And I’m actually not the one that updated it. Let’s go to the front end and see what we’ve got going on. Okay.

PHP class does not exist. Fr slider controls. Okay. So this requires the frame slider, which I clearly don’t have activated on this install.

So let’s go over here. Automatic CSS. Let’s go to frames. Let’s go down.

Let’s go slider, beta, slider controls. Save. Okay, refresh. There we go.

Okay, so I’ve got this list here. We’ve got markers that you can position dynamically. So this marker is just chilling It’s waiting for a position right? Both of these are query loop compatible So you can query the markers onto this map.

You can query these things in this grid It’s actually pulling already for our locations, which is interesting Probably pulled a let’s go in and see what our query loop says So marker CSS query loop. I was wondering if I probably already use this frame on this install. Yeah, because I already have a query loop set up. So I’m pulling locations in, of course, there’s only three locations.

Ideally for this one, you want like, you know, five, six, seven, eight, something that allows us to actually use this vertical slider right here. But this is going to query these cards in here. It’s going to query the dots all over the map. You can switch the map out.

It can be a state map. It can be a city map, a town map, or whatever map you want. You can swap that out. Right now it’s a world map.

And then when you hover this, it’s actually, see the dot changing, right? It’s actually pulling in the name. And I imagine those dots actually had coordinates. You gotta go into a custom field, put in your coordinates, yada, yada, yada.

This frame right here is, like, Wajih was like, this could be like a plugin in itself. Like, it could be its own little plugin that you could sell. Because this kind of interactive map where you get the you know The beacons with hover effect and all of that This is a very common thing that people would would want to use and if you sat down to build this I mean we’re talking about If you knew exactly how to solve every challenge that comes with it and knew exactly how to do You know dynamic positioning with data attributes and a whole and then you knew how to write all the JavaScript that’s also helps it. I mean, three hours, four hours, probably three hours if you know exactly what to do and like how to do everything.

If you didn’t, I mean, this is a quagmire situation, right? I mean, you could be 10 hours deep and like on forums going what the fuck do I do now? But here it is, I mean, you could just insert it and then you could just take a minute to just kind of see how it’s constructed and you know, you could read the documentation. But a frame like this, you know, I’ve done a video, I did a video on how to build this frame in the inner circle step by step.

And I think that was a 90 minute. Yeah, so that was 90 minutes. And I was moving kind of quick, right? Because I had already built it once.

And so I was just doing a video of now rebuilding it, how to do it. So yeah, it’s just hours, hours and hours and hours and hours saved, right? Okay, please demo the map on a city level. So this is a global map, right?

I would need to go, you need to go get a city map, turn it into an SVG. I showed in the thing how to swap the maps out. It’s just an SVG, that’s all it is. You just need an SVG of whatever city you are in.

And then imagine you’ll see like Atlanta right here, right? Or just maybe a map of the state of Georgia right because then we can have Alpharetta is over here and Atlanta’s here and Savannah’s here so this would be like a state map I will go back in to just to give you an idea here bricks dashboard okay services the problem with these installs is I use them randomly for so many different things. Like it doesn’t even have the locations CPT anymore that that was pulling from. Which is odd because it’s pretending it still exists

but then of course I don’t even see it here. But I make CPTs, delete CPTs, make pages, delete pages. These are not a typical install. There’s like shit going on everywhere.

But you have two custom fields. You have a Y coordinate and an X coordinate custom field. And you just put in the coordinates and it’ll take that dot and it’ll, bam, it’ll slap it right there onto that grid wherever you need it to go. And then it’s linked to this query loop.

It’s a query loop in itself. There’s some JavaScript to help it out. So you just swap the map, put in your coordinates, and you’re done. The map frame made a big difference when showing the website to my client, they loved it.

Yeah, I mean, it’s a really, really fantastic thing. And it doesn’t even have to be with locations. You can do it with service areas. So like these have addresses, right?

But you can easily remove the address and phone number and you’re just left with the city name. And then you can just have all these cities that you service in a state. And so you can use it for that. I’m sure there’s other use cases that people are gonna come up with, that, you know, maybe events.

There’s probably something you could do with events here. I don’t know, people get creative with this stuff. They start using frames for stuff we didn’t even imagine them using a frame for and it’s really fun. But more advanced frames like this,

I do, I want to do tutorials. It’s just, man, there’s so many videos that I need to create constantly every single day I feel like I’m 10 steps behind and there’s a thousand things to do and I feel bad for all the things that you know I want to have out there that are not out there yet It’s just the life. It’s the life I guess I’m a newbie in HTML and CSS and trying to make a tech news website any advice would be helpful So this is a situation where it’s just like, you know, there’s a specific thing that you’re gonna need to do that you can get help with, but the question of, you know, I’m new and I need a tech website, like a tech news website, I already in my mind, there’s 1000 different directions we can go with the tech news website. So what I really need is like, here’s the direction I’m going in, what would you recommend?

Or here’s a specific challenge I ran into, what would you recommend? And then we can actually solve that. All right, let me close some tabs out here. We’re getting a little tabby.

We can look at, we can just throw in some other frames that people might use and see a little bit of what’s going on here. Do any look interesting? Let’s see. There’s actually a really helpful frame.

So this section right here. So I can put this, let’s just go up here and go, you know, you want a real image as a background image, but people are like, I don’t really know how to do that. And it needs to have an overlay and all this stuff. I don’t really know how to do that.

So you can actually just go into backgrounds, see this background alpha insert, and we’d take our section and go layout position relative to catch it. Oh, it also helps if it, if Bricks puts it in the section for you. So now I have a real image as a background image and I just, you know, so it’s like half a second, bam, there it goes.

And then I can put whatever content in here that I want to, you know, and it’s automatically gonna be overlaid. Make it, make it kind of white text here. Actually, I don’t know if I have pro mode on. Let’s just go down here, typography, make it white.

Okay, and then I can come over here and it’s like, all right, how does this background alpha image work? Read CSS, do you see that? Read CSS tab. It’s kind of telling me right there.

It’s like, hey, hey buddy, hey, read the CSS tab. So I go down here and there’s just a comment. That’s all that exists down here. We’ll zoom in.

And Bricks really needs to work on the contrast ratio of these comments, but it says to use this frame correctly, ensure that the parent container is set to position relative. So you saw me do that. It’s also advisable to add the following code to the parent container CSS tab, root isolation isolate, copy, parent section, CSS, root, actually I can just paste it, root isolation isolate. And that’ll ensure that if you don’t know what isolation isolate does, it resets the stacking context to ensure that your overlay here is not gonna cause any problems or your overlay is not gonna disappear on you, that’s another thing too.

Because if you go add a background, that only happens when you add a background image to the section. Let’s see if we can remove isolation, isolate now and see that effect take place. Let’s go down here. Yep, see, now you lose your image and your overlay because they’re actually behind the background color of the section.

And so we know that that’s a common problem, right? When you’re doing negative, this uses negative one Z index, right? And when you’re using negative one Z index, you can run into stacking issues if you don’t reset the stacking context properly. So that’s why we have that little comment baked in.

It says, hey buddy, read the CSS tab. And you can read it and go, okay, I need to do this. And now it works. Okay, see, try to put in these little helpers everywhere because we are doing, nobody else has a frame with a real background image with an over, this doesn’t exist in anybody else’s design kit that I know of right here, but it exists in ours because it’s a very common thing that you want to be able to do.

All right, so there’s how you get, oh, and you wanna change your overlay? Okay, here’s another situation, right? Well, this class, and I have used this frame before that’s why it has an action ultra dark trans 60 on it.

See we’re in an install where I’ve just been playing around with various things and things get left in you know odd fashion but I can do this anything I want with the overlay right we could do all of our bass transients right here so I can do a bass trans 50 save I get the little previews like in that nice and helpful so I can come in and say what would it look like which one do I want? Which, which one? Maybe I want that one right there. Okay, save.

Then I go to the front end. Bam. So we got a real image in the back, not a background image. It’s a real image in the background.

And then we can actually just swap that out. But here’s the thing, right? Let’s put this girl in. Perfect.

Nice. All right. Rocking and rolling, right? Oh, we need to position her better.

Okay, well, what should I do? Should I change the object position on this class or should I change the object position on this ID level? Well, my friends, the question is, does every, is every background image gonna need exactly the same positioning? And the answer is no.

So what I should do, because I want this particular image to look a certain way, I’m gonna go ID level and I’m gonna go 50% and then I’ll do something like 20% and there we go, 30%. I just want her face right in the right spot, bam, okay? And then I may wanna make the section taller, I can do anything. But here’s the thing people will criticize, right?

That’s not, there are legitimate criticisms, there are illegitimate criticisms so somebody somebody will say okay well you selected the I don’t know about object position I don’t know what this 50% 30% means right this is the x-axis positioning y-axis positioning frame should do that for me and it’s like no okay all right is frames going to magically foresee the exact image that you’re going to put in there and be like, Oh, well, if you’re going to choose that one, then you’re going to need this automatic object position. This is not possible. It’s not possible. So this is what I say, like frames is not a magic pill.

You do still kind of need to know what you’re doing a little bit. It just dramatically speeds everything up. It just does a whole bunch of work for you that you don’t have to do, but you still, as the developer should know what object position does. And know that, okay, if my image is not positioned properly, I’m gonna need to go tweak the object position to make that happen.

Because there are things that are just not foreseeable, and there are things that are just one-off custom things that you just gotta do. You just gotta do it as a developer. That’s on you, buddy. That’s on you, okay?

So if you did this object position 50%, 30% on the class, then every image you add with background alpha is gonna have the same object position. And maybe that’s what you want, maybe that’s not what you want. Maybe you wanna set a global default, but then you wanna override that default at the ID level on individual instances, you can go that route too. You have a lot of flexibility, a lot of flexibility.

Let’s browse, is there anything else that is just interesting that jumps out at us here There’s there’s a WooCommerce one right there checkout alpha guys we put I Mean I Tobias is on vacation right or I’d pull Tobias over here now Tobias isn’t here Tobias is in Germany He’s always he’s he’s never here. All right, he works remote, but I would pull him in and be like Tobias How long did you spend on this? How long did it take you to create Checkout Alpha? Now some of the time is because we have to think about this in the grand scheme of like, you know, thousands of people are gonna use this.

So we gotta try to make it work for everybody. But then there’s just a lot of stuff that’s just, it’s just a lot of work. Something like Checkout. Now I don’t have WooCommerce installed, so this isn’t gonna do us any good to really look at it.

Can I, there you go. Okay, we can get a live preview. So here’s a live preview of it. I mean, there’s a there’s a lot of this There’s a lot here, right?

This is a custom completely custom checkout page for WooCommerce. I Don’t know 10 hours 15 I don’t a lot of hours you don’t want to spend I’ll tell you that right now And so if you want a custom checkout page for WooCommerce just be able to one-click insert that into your checkout template. I Don’t know saves a bunch of time. Here’s a vertical header.

You know how many hours we put into the vertical header? Lot of hours, lot of hours in the vertical header. Here’s a nice little testimonial section Lima, right? This, I would immediately, I would go delete, delete, delete, delete, delete, delete, delete, delete, delete, query loop this bad boy up, where are my testimonials, query them in, put a little custom field for doing the little short call-out quote I dynamically generate that whole little grid back again that’s what I would do let’s check out these little these are these are very interesting what would you imagine that these would be when you imagine that this would be an icon with a static number in here and then this thing on Google is next to it okay let’s actually inspect this badge alpha icon look at look at what it says right here with data attribute why does that have a data attribute let’s take a look then you get your little label here let’s go down style attributes badge value we already have something set up for you called data badge value 4.

8 and what if I change this to 3. 8 okay and we hit save and we go on the front end 3. 8 stars on Google. Why would you want to do that?

Right? Well, this allows you now to create a custom field and Dynamically generate these rate if you want to now if you don’t want to you just want to put in some text here you just put in static text just like it’s like it is right now, but this gives me the power to come in and choose a rating from dynamic data from somewhere else for an element, like maybe you’re doing reviews of products and you wanna give them all a rating inside of a custom field in your CPT, and then you wanna use this badge to output the rating on the front end. The badge is already set up with a data attribute to dynamically pull a rating because that’s what it is, it’s a rating badge, right? So it’s already set up for things like dynamic data and it uses a data Attribute because you might want to change the color when the rating is above or below a certain amount You might want to do a lot of advanced things with this We don’t know but we use that attribute here because it gives you tremendous flexibility And if you don’t happen to need any of that It’s just as easy to come over here and change the rating in the data attribute with a static value Right, but if you want to use it for something advanced, you’re not limited.

In fact, a lot of the advanced stuff is already done for you. If you don’t want to use the advanced stuff, it’s okay. You can just put a static value in. It’s maximum flexibility, right?

And these things are like hidden. Like you could look at a badge and be like, a lot of people will look at a frame, a picture of a frame, and they’ll go, that’s a fucking badge, so what? Until you inspect it, and then you realize, oh, there’s a lot more going on here. That’s actually very, very helpful and useful.

In something as simple as a little badge. That is a lot under the hood, okay? That you just don’t, if you’re looking at screenshots of frames, you’re like, okay. But, and again, some people will be like, yeah, I wish they had more style.

And it’s like, could you, you know, take two minutes, just read the philosophy of frames. Philosophy of frames is that they’re all unstyled on purpose because you don’t want to work backwards. You want to undo a bunch of styling in order to get your work done. You want to just add the thing and then start working.

So that’s what’s really, really, really nice. Any other, see every frame, just adding random, they all have like little goodies inside them. Little goodies. Let’s keep looking, let’s keep looking.

I’m really wanting to help people understand the global class versus ID versus the frame specific class, that kind of thing. Let’s take a look at this frame. And on this, let me go, where’s our screen resolution? Nope, nope, that.

Okay, done. I feel like I’m zoomed in. Yeah, okay, wow. Definitely don’t look at frames when you’re on like 8,000% zoom.

All right, so notice that this is overlapping into the header. And people go, oh, what’s it doing to my header? Well, this isn’t a hero, all right? It’s not a hero section.

It’s not designed to be first. Let’s put a section above it, okay? In fact, why don’t we just put a hero section above it? Let’s just go in here and grab a hero.

All right, let’s grab hero, what do we want? Hero Kilo, hero Echo, hero Charlie. Let’s do hero Charlie, little hero Charlie action. All right, let’s bring that up here, okay?

See, this is probably not the best one because now you’re getting an, well, I don’t know. Once we swap these out, maybe this creates a, see, you can just play around. The other thing with frames that I love is like, imagine this is the Brazilian Jiu Jitsu page, right?

Jiu Jitsu, all right. You could just experiment and like figure out of an idea or concept that’s gonna work, and like, look at all the work this has already done for me that I can now just play with and experiment with. I wanna come over here and change the background color. Maybe we’re gonna go dark on this, okay?

Maybe we’re gonna go light in here. So Charlie, so this is another good part to just talk about like, all right, are we gonna do this at the ID? Are we gonna do this at the class? If I want every hero Charlie, like by default is BG light, right?

I want every hero Charlie to be dark. Then I would wanna do this absolutely at the class. And then what I would wanna do, because knowing now that the background of hero Charlie is always going to be dark, I always want the content for Hero Charlie to be light. That makes sense, right?

So I wouldn’t have to do this change. It would only make sense to do this change at the class level. And so now I will always have Hero Charlie be dark and its text to be white. Does that mean that it’s that way forever and ever and ever?

No, you can always change it, or you can still change one-off instances, deactivate the class. Why is this work? Because ID styling always overrides class styling. So at any point in time, you could just go do whatever you want at the ID level.

Okay, so here’s this, and then we would just swap these images out. And I wanna take a look at how these images behave in just a second, right? Imagine that these were more jujitsu pictures. All right, that one actually is.

This is not, that’s like MMA. But now this section’s starting to come, and in fact, I want this section to be white, right? Always, I want it to always default to being white. All right, so now we’re just gonna take a look at this on the front end and say, does this kind of flow?

And so I was wondering about this overlap with this overlap, kind of there’s a lot of business going on in here, so I don’t know if this would be the best thing to have. So maybe what we do, let’s close this builder out. We don’t need that tab. Oh, we don’t need that tab either.

All right, so let’s grab a feature section. I know maybe I want some feature cards to break this up. Oh, that was definitely not the right icon to click. Don’t click the WordPress icon.

All right, we’re gonna hit templates and we’re gonna go feature. And let’s see if we can find a little feature section in here that makes some sense. Feature cards, feature, maybe those feature, maybe feature section alpha, it’s looking a little good. See, another criticism people are like, it takes a lot of time to look through here and find the features that I want, and this card and that.

What would you be spending the time doing, by the way? I mean, brainstorming what you want there, like that requires sitting around and thinking too. And then you gotta build the thing, right? Isn’t it easier to just find like some, you know, find something that’s gonna work really well.

So here’s feature grid alpha. Might wanna put that in. Let’s do feature grid alpha. It’s nice and simple, right?

Now, because it’s feature grid alpha, I’m gonna put a section in to contain it. And so I’m gonna drop that section right between these two and then this container I can take out because that’s what feature grid alpha is going to be that’s where it’s going to live so feature grid alpha right here and then you know it would be nice if bricks could actually and insert these in the in the correct places so now I’ve got these feature cards now we have a little bit of a separation between here and here and then I can decide you know what I don’t want these icons so maybe I can just delete the icons so we’ll come in here and delete these icons from these features we’re only going to want the text in the cards okay so you’re free to do that now that’s an HTML change that’s not a ID CSS styling change HTML change right so every time I if I import feature grid alpha again let’s just do it again. Remote templates, feature grid alpha, insert. Okay, and let’s drag them to be right above or under the other ones.

Look, they imported again with their images because an HTML change is not gonna affect the mainframe. If you want this to be like a new frame or a new version of feature card alpha that you can insert without the image, that’s when you come up here, right click, save as template, and you could say like, feature card no icon, something like that, save as template, now it’s saved like that in your local install, and now you can insert that wherever you want, and it’s not gonna have an icon when you insert it. So you have maximum flexibility, it’s just knowing the little different, you know, kind of tweaks and adjustments you can make here. And the other features of Bricks that you can use and leverage to your advantage.

So let’s get rid of that one. We didn’t really want that. Okay, so like, you know, best instructors. What would your feature say, right?

500, five star reviews, that kind of thing. All right, so imagine we put in content here. Now, does this look the way that we want it to go yet? I don’t know, I don’t know.

We can start maybe working on styling this up. I can actually take this section right here Pad section, you know a lot of people are like hey, I want to you know I don’t want this section to be so tall. All right pad section s shortens it up a little bit now What about this overlap? Are we just stuck with this with this level of overlap right here?

I also want to give this a let’s go BG bass ultra light. Okay, give it a little bit of a background color here. Now I’m going to grab the cards. I actually want those cards to have a white background in them.

Okay, so that they still have some contrast. See what we’re doing. See where we’re going here. All right, we’re going to hit save.

And the question I have is, am I stuck with that overlap? First of all, it’s like, how is this overlap even accomplished? How are these images positioned? They’re rotated.

There’s this, like a beginner might be like, Oh my God, I, my head spinning, my head spinning my head spin. I I’m looking at you know overlapping images that are all tilted I don’t know what’s going on here. Okay. Well, let’s take a look Let’s just go take a look-see as they say I want to add another section so that we can scroll down here because I want You to see the overlap that’s happening down here.

All right, this is actually overlapping the top and the bottom at the same time Okay, let’s go take a look-see look right here. It says hey, buddy. Hey, hey, hey, you, hey, you, CSS, CSS tab. Okay, so we’re gonna activate the class, we’re gonna come down and see what’s going on in the CSS tab.

Okay, so there’s a section space L is going on there. Let’s see if there’s anything in Foxtrot, no, there’s not. Here’s the image group right here. And here’s another, go back to what we said before about an image group being a, its own block, its own block.

And should it be assigned to that section or should it live on its own and be very modular? Here’s an example where the image group does in fact live with this particular frame. It’s called content grid foxtrot double underscore image group. Why is that?

Because this image group was designed to live in a certain context. It is not designed as a modular image group this is not designed to go use this anywhere you want this is supposed to only live in this Foxtrot section right here so that’s why it’s named the way that it is and then we open this up and we see hey there’s our aspect ratio again you’re looking for these locally scoped variables because anytime there’s like a head spinning situation there’s almost always going to be locally scoped variables. That is just like, hey, look at the variable name, image width, okay, so I wanna change the width of my images. Let’s go 25M, look at them, look at them, they’re growing.

Because this content right here, maybe there’s a little less content. Maybe there’s a little more content. And we don’t want, we want these images to always behave a certain way. And so we give you little controls here, right?

I can go 20 on the images. That’s clearly not good because they’re too small. They’ve become disconnected with each other. So I can just easily, I can just like dial this in.

What kind of overlap am I actually looking for? So that’s controlling the overlap here. It’s controlling a little bit of the overlap up here. But look at this, image block offset.

Now granted, if you don’t know block versus inline axes, this is a little bit new, but again, we’re trying to design for the future. Okay. So you have a block axis that’s up and down. You have an inline axis that’s left to right.

These are called logical properties. In different writing modes, these axes can actually flip. That’s why they went from, you know, Y and X to block and inline and, you know, block start instead of top and all that stuff. Okay.

So the block offset is set to one M. What if I put this at two M? Look, what’s going to happen. 3M, 4M.

What if I go 0. 5M? What if I go 0. 25M?

I want to, what if I go negative? Can I go negative? Oh look at this, 1. 2, look I can just dial in the exact overlap that I want.

What about the inline offset? What does this do? 4, 3, oh you want them to go that way too, across that axis? Yeah, no problem.

Okay, literally just sit here. And by the way, I’m doing this on a class. So every time I insert this, it’s gonna have my adjustments. But what did we already learn?

What if there’s a situation where it’s like, no, no, no, just in this one instance of the frame, hey, just steal the locally scope variables and drop them at the ID level and now start changing them here and now these changes only affect this one Instance of the frame and look oh you oh, oh you wanted to change the image rotation Well, we already knew that you wanted to change the image rotation so I can say eight five four three two one Okay, do whatever you want go negative. Why don’t we just go the you want to go the opposite direction? Hey, they can go the opposite direction. You don’t need to know what’s going on with the CSS or how all this stuff, you just need to know what is the locally scoped variable, play around with the value and watch what it does, right?

And then just dial in exactly what you need. Almost all the frames, anytime we can do this with a frame, we do this. Because it’s not just friendlier for beginners, dude, it’s friendlier for me. When I’m using these frames as a user, I love that I can just, I don’t have to go, remember the three month rule that I always talk about?

Like, are you gonna remember how you did it in three months? I don’t remember how I did half the shit in these frames. They all have their own challenges, their own things that we’re trying to accomplish with them. They have to be flexible in various regards, right?

And so you see now that we’ve lost the overlap up top, that’s probably because the images need to get bigger right and then I need to change the offsets so the inline offset the block offset let’s go back to 1. 25 now we got our little overlap up here and our overlap down here so I love the fact because I will open a frame and use it I don’t want to go see a rig remember back to how it was done and dig through the little CSS things I definitely don’t want to dig through input fields. You know, somebody said about this the other day, another common thing people say is, you know, there’s stuff in the CSS. You know, some people have something against, like, stuff being in the CSS.

They want everything to be in these input fields. But everything has pros and cons, guys. I mean, the downside of, if we put everything in the input fields, you know what your life would be? Click, look, click, look, click, look, click, every element by the way into this element and that element and this element and then into these panels.

Shit’s scattered everywhere. This kind of a downside to that if I’m being honest right way easier for me to just grab this come down here now look I can see if I want to dig into the code here’s all the code right here if I want to dig in I can dig in but I don’t have to. I can do it, and I can change so many things from this one area. To me, that’s a lot easier, especially when you’ve got the locally scoped variables, and you don’t even have to remember or look at how the CSS was done.

You just look at the variables, what do they mean, what do they do? Like, we’re trying to make it as easy as possible, and there have been some criticisms where it’s like, damn, you are 100% right. We got to fix that, we got to make that better. The fact that some things use a grid variable, like we already discussed earlier, grid variables versus 1fr, 1fr, 1fr, 100% I would love every frame to do things exactly the same way and to all be tremendously consistent.

But we don’t have a magic wand, right? And so we will go back and fix as much of that as possible, but this is how it is. Matthias says, finally an in-depth Frames tutorial. Having your shit in CSS instead of the builder

input fields is the bomb. Yeah, I mean, I didn’t plan on going this direction, but yeah, this is WDD Live. Like WDD Live goes, it can go in any direction. You never know what you’re gonna get when you tune in.

That’s exactly what I like about Frames as a developer. It’s nice to see when things are thought out and that I can quickly make adjustments and even build with my own ideas. Yeah, absolutely. The amount of work that’s done for you and then you can just play with it and then you can add on whatever you want to add on.

Like this right here, these images could have pseudo elements. Like PB101, we just learned about pseudo little accent design elements. You can go in and start adding your little pseudo accent elements that’s really spice this up. You can add a little background pattern in here.

I mean, this frame can turn into something really, really great. But look at all the things that you didn’t have to do. We’re not trying to create a tool that designs sites for you. That’s still your job.

But look at all the stuff that it does for you to get you to the base level starting point that you don’t have to think about, you don’t have to consider, you don’t have to do. And so much accessibility stuff that people don’t think about. I mean, when you add all these images in here, they’re already wrapped in figure tags for you, right? The captions are turned off, and that’s just images, right?

Every little aspect of this has so much done for you under the hood. You know, I think the value is pretty undeniable. It’s just getting people, and that’s my job. My job is the education side of things.

Educate people on how to use the frames, educate people on how to manipulate the frames, styling at the ID versus classes. That is my job. Please check the modal, don’t want to be a chump, and keep posting my question.

But it’s quite severe to me as it’s a project that’s going live soon. Bev is sitting here and rushing me about it. Okay, Marcel, Marcel, let me find your question. I’m having some heavy trouble using the modal in a current build.

I have a grid of WP users and on click, this is one of those examples again of like I got to wrap my head around it, hang on. I have a grid of WP users. Okay, so you’re querying users. These could be like maybe authors or members or something like that.

On click, and on click on the user, I want the modal to simply show more info of the user like their emails. Or this could be like team members, right? Like team members or something. And you wanna show maybe a team member bio and you want to have their social links and so on and so forth.

Okay. So, Marcel, question for you. What exactly is not working about that right now? Is there one specific, what, is the modal not showing up?

Is the modal have the wrong content? Can you give me some specifics? I will gladly sit here and play with this concept. This is going to close out WDD Live.

What time is it? Dear gosh, time has gotten away from us in this episode. 1. 18 p.

m. What time do we start? 11, 12, 1, we’re two hours in. I wanted these to be 90 minutes.

Gosh, oh, God. All right, Marcel. Me and you, buddy. It’s just me and you left, probably.

No, there’s 93 people still here. Shout out to OG. I imagine people just let this play in the background as they work. I don’t know what people’s game plan is for WDD, but we get deep into this.

The modal is not showing and the builder has not been triggered. Okay, well, let’s just take a little look-see. We can play around with this together. I mean, I’ll go right here.

Oh dear, oh gosh. There we go. See, see, bad things happen, WDD Live. Change log, I mean, don’t go there yet, guys.

Not ready yet, it’s not ready yet. All right, let’s go here. So see this, these are queried in a query loop and you click this and that is a frames modal right there. And it’s gonna have unique content for every single item see that so it is working for what you want right it is working for what you want so let’s just go play with it first of all we’re gonna go to automatic CSS we’re gonna go to frames we’re gonna go see if modal is turned on it is what version of frames do we have here frames 1.

4 alpha 2 okay let’s I just want to make sure this the modal has been around for a while, but I don’t know what alpha 2 versus out. I know there’s an alpha 3, so I don’t want a half-assed version of the alpha. That’s definitely not the way to go. So let me jump.

I’m doing this on my other screen. This is hang tight, plug-in development, plug-in development, uh release here we go, here we go, here we go, download, okay, upload, choose, let’s just do it here, downloads, drag it, bam, install, all right. I do say WDD, you know, we’ll do many tutorials here, Okay, did it did it update 1. 4 alpha 3?

Okay, good. Let’s go to what are we going to need for this my friend Marcel, what are we going to need? We’re going to need team members. That’s what we’re going to need.

Okay, this is a field group. Sorry, I need post types, add new post type, team members, team member, team members, I’ll just do team. And everything else should be fine. Okay, so there’s team members.

Now what do we need? We need two team members, okay? Sally, and let’s give Sally a photo. There’s Sally, look at her.

A badass team member right there. Publish, publish. And then we need Jake. Jake.

Jake, here’s Jake. Okay, there’s our team members. Publish, publish. Now, literally walking through this, if you’re a beginner, I would highly recommend you do this.

Everybody tries to do every CPT feature, add every custom field imaginable, and they haven’t even gone to the, you know how I do border checks, like border five pixel solid red when you’re doing pseudo elements and things like that? Just do some checks. What is the first step? Can we just query something onto the page?

Is that even a thing can we get that working it really helps to go step by step by step when you do this now you know do I want to build this thing from scratch I’m not really not really so I can go into profile let’s let’s look for some profile stuff you know what kind of profile grid do we kind of want here so let’s go profile section Foxtrot and see what we got going on. I didn’t import the images, so all the images are gonna be blank. We don’t even need all these cards. Let’s just get rid of all these cards.

We just need the one. We just need the one. All right, so immediately I’m gonna take profile card Foxtrot here, and I’m just gonna say, hey, you be a query loop, okay? What are we gonna query?

We’re gonna query our post, post type, post pages, services, any. We probably need to refresh the builder. It probably doesn’t have that CPT in there yet. Okay, so let’s grab this, go back to our query loop, post, post type, team members.

There we go. And then I am going to go to the avatar. We’re gonna get rid of the image for the avatar. And we’re gonna say, hey, can we query the featured image in there, please?

Oh my God, there’s Sally. And I don’t even know what the other, Jake? Was that his name? All right, let’s just come in here.

And let’s go, what is your name? First, oh, it’s Post Title, that’s your name. Your name is Post Title. Okay, and then, oh, look at this.

There’s a little position badge here, right? Well, how are we gonna fill that out? Well, no problem. We’re gonna hop back over here and we are going to go to ACF and we’re gonna go to Field Groups and we are going to go to Team Members.

We’re gonna assign this bad boy to the team members right down here. And then we’re gonna say position, team member position. Okay, field label, field name, default value not needed. Save, let’s go over to team members and let’s see if Jake can have a position.

Hey, look at this, what’s Jake’s position? Fighter, okay. All right, update, we’ll go back and we’ll go to Sally. What’s Sally’s position?

Sally is gonna be front desk. All right. And she, if you complain about pricing, Sally’s going to fuck you up. Okay.

Let’s go refresh here. So we can see what we’re looking at. Refresh our builder. And I’m just going to take this little badge right here and we’re going to go to position.

I’m just going to search for position here. team member position, Sally, refresh, front desk. Now look, I mean, how long, right? We got little animation here on the click, we got this vertically done next to the cards.

Now how long would it have taken us to get to this point, right? But frames has got us there. So now what Marcel says, sorry, Marcel, I have OCD. So we’re gonna have to do a third team member here.

Not that I can’t make that a two column grid, but we need more people on our team. So let’s go with, we got Sally, we got Jake, we got Jennifer. Let’s go with Jennifer. Jennifer is, she’s a jujitsu instructor.

All right. And then Jennifer, we’re just gonna show Jennifer choking the shit out of somebody right here. Here’s Jennifer. All right, save.

Okay, refresh. Notice I chose a wide image for Jennifer, but it’s still the same aspect ratio as all the others. It’s just things already done for you, right? It’s not like you just choose, because you know Bev.

Bev’s going to choose some crazy aspect ratio image to throw in there. And when you need a wide image, Bev going to give you a tall image. When you need a tall image, Bev going to give you a wide image. But this is an unbreakable situation, right?

We’ve already thought of that, like, hey, let’s not break the grid when people put in the wrong aspect ratio. It’s already done for you. Okay, so here’s our team members. I mean, look how fast this is, right?

But what Marcel says is, no, no, no, no. I need more. I need a modal that opens when you click on the team member and it’s gonna have additional information inside. Okay, so what we’re gonna do is inside of the query loop right here.

We’re gonna put in a frames modal Perfect. Here is our modal right here and you can see we are in the builder We’re getting some Zed some Zed index issues. Let me refresh here See I wonder what these cards are doing now and see now you’re gonna have to inspect now. It’s like why do these cards need z-index.

They do have a grid isolation of isolate on them. There is definitely some z-index going on. Let’s grab this image. I like to inspect this on the front end.

Ah, z-index. Oh, it’s a negative one. That shouldn’t hurt anything. All right.

Anything on this figure? Ah, no. That’s a flex of one. Mm-hmm

Image Nothing here for Z index Let all right now what I want to do now what I want to do is I want to put something in this modal and Fire it off and let’s see if we can Let’s put a block and let’s just put a heading inside of here. We just got to put something Okay And then we need a trigger for our modal. I also want to get this close icon to be on the inside Yes, okay. We’ll deal with that in a second.

All right. I just need to fire this modal So we’re gonna go to settings fr trigger is our trigger trigger keyword So we are going to go we also need to see if this is a using clickable parent. It is clickable parent. Okay, so Fr trigger believe okay save save go to the front end FR trigger, I believe.

Okay, save, save, go to the front end. Okay, and we’re having the same Z index. Okay, so let’s check this out. This is a alpha three, by the way.

So probably should have used the stable version, but this is a fixable situation. We just need to see how we’re going to go about inspecting this. I need it to have an overlap, but I need it to be able to see more of our stuff here. Okay with L I just want to play with this Z index of 99 these modals are there’s a lot of shit going on with these modals that’s like the background for the modal here’s the overlay for the modal modal body wrapper I wonder what the Z index is doing here.

Because it’s always because they, I’m trying to think of what would cause this. And notice that it’s, what I love about this is that it’s not doing it on the first one. Because you would think if it was a problem with Z index on the images, right? It would do it to all the images.

This is just a, it’s one of those like very interesting WTFs. It has it on top of the first image and under the rest of the cards. It’s also above this text, but under this text. This is, this is interesting.

Width, color, okay. Well, how about this? How about, we’re gonna mark that down. Let’s get rid of this modal.

Let’s get rid of profile card Foxtrot. Let’s go grab another. Let’s go profile and let’s grab. Now I wanna see if it happens to any others.

All right, let’s go profile section Bravo. Get rid of this whole section. Nope, don’t hit that. All right, profile section, bravo.

Yeah, there we go. Okay, now let’s quickly come in here, profile card, get rid of those two cards. Get this to query loop, post team members. Okay, go into body, go to name, delete, post title, title, delete, search, title, what was it called?

Team member or something, position, okay. All right. Perfect. Image, avatar, remove, featured, insert, save.

Okay, refresh. There we go. Save. Okay, refresh.

There we go. Now. I want to see if it has the same issue. So we’re gonna go here Add our modal No issue So it’s just that one frame and that’s such a weird like over one under the others weaving in and out Okay.

Sorry Marcel because I want to still answer your question, but we got to get to a non-modal issue. Okay so here’s a modal that’s going to work for us. So we have profile card Bravo we need this modal to be inside of yeah we’re gonna need to be inside of the query loop. So let me pull this in here and it still doesn’t cause the problem so it wasn’t a problem with putting the modal inside the query loop either.

Okay I’m just going through some diagnostics in my head. All right, so what we want is to put the trigger on. So we’re gonna go to the trigger is the name that is, and this one’s not using clickable parent, but we can make it use clickable parent. So we’ll just do clickable parent.

And then we’re gonna use fr-trigger, which we wanna actually change that in a minute, but I wanna get this to just work. Okay, and then what are we gonna put in here? So we’re gonna put the heading. Actually, you know what we can do?

Inside the modal, we can just drop in a profile. We probably have author profile card alpha, no, profile modal alpha. Let’s insert that. And this is not a modal in itself.

I just wanna double check that. This just drag this into the modal. And that should fill our modal, like we just now got a person modal out of thin air. Okay, so now what we’re gonna do is we’re gonna go to our body container, we’re gonna clear out all the padding, and that should make that extend to the edges of our modal.

And I do want to change the background. Let’s make this a dark modal maybe. Now let’s make it white. I don’t want it to be light gray, let’s make it white.

Okay, so ideally what will happen is this will all be unique content, right? But the first thing we need to do is just say hey, is it is it like actually firing? And what we need is let’s turn off the modal in the builder Okay, hide modal and builder and let’s go see if we can get a link in here We don’t even have a link in our header yet or in our in our card Okay, click on this All right, custom tag, strong, HTML tag, custom. Oh, okay, that doesn’t need to be there.

Let’s go with link to external URL. You don’t actually wanna use a link for this, you wanna use a button, but again, it’s a step-by-step getting to what we want. So if that’s the URL and we have clickable parent, what we should have is a full clickable card. Let me go to profile modal alpha.

We’re gonna go to position relative on this just to make sure we don’t run into any issues. That way, okay, now we have a clickable card. Now we have a modal that fires. Now all the question is, is this gonna be unique content?

And it should be the same exact step of just swap out. We’re gonna activate our modal again in our builder and swap out this content. So person’s name is not person’s name, it’s post title. And then their position is not position, it’s their actual position from a custom field.

Now, we don’t have a whole bio in here for them, but what we can do is insert dynamic content post content right here. Okay, and then what we could say, write me a two paragraph bio for Jake, who works at a martial arts gym as a trainer. Okay, bam. All right, here’s gonna be Jake’s bio right here.

I just need one of these, just so we can verify that it is actually working. Can you write a little faster? We’re on the clock here. We’re on the clock, let’s go.

All right, here we go. Let’s steal that. I said two paragraphs, it gave me one paragraph, but whatever. All right, so let’s open Jake.

Here’s Jake’s bio right here. We’ll just do this, update. The other thing that we’re gonna wanna ask ourselves, and let’s just save and refresh. Okay, there’s Sally.

Is Sally’s thing going everywhere? Let’s not do this with clickable parent for right now. We got enough shit going on. All right, let’s hide modal and builder.

Let’s take off clickable parent. Fr trigger, clickable parent, take that away. Fr trigger, okay. And then the URL is there, is good, is good, okay.

Okay, there’s Jennifer, there’s Jake, there’s Sally, okay. The image, we forgot the image in our modal. So I’m gonna go into the modal, activate in builder, little image sitting here, that needs to be our featured image, okay. So let’s go avatar, delete, and pull in our featured image for that, perfect, okay.

Refresh on the front end. Jake, so there’s Jake’s bio. There’s Jake’s name, there’s his position, there’s Jake’s photo. These links down here, social links, the way you would handle that, very easy.

Come over here to ACF, back to our field groups, back to our team members, and you’re literally gonna go, let’s go add field. Let me just make it a text field is fine. Facebook URL. Just a little of that action.

Add field. I don’t even remember what they were. Twitter. All right, so we’re going to get rid of one.

So we’ll do Facebook, Instagram, YouTube. All right, so this is going to be Instagram URL. And then this one I’m going to do YouTube URL. Okay, and then we save and then if we go to Jake, let’s go over to team members, go to Jake, edit.

Now I just got these URLs I can pop in here. Now, maybe Jake has, we can see, we can add even some, you know, conditional logic in here, right? So we’ll just do Google. com for this, I don’t care.

Let’s do Instagram. com for this, whatever, it doesn’t matter, save. But notice that Jake does not have a YouTube. Mr.

Jake is not on the YouTubes. All right, so what we’re going to do, what we need to do is add these in and then conditional logic for TikTok, or actually we’re just going to delete TikTok, conditional logic for YouTube. All right, so I’m going to delete TikTok here. So we’re going to open up this card footer, social icons.

Here they all are for you right here. By the way, they already have hidden accessibility text. Okay, so if you look here, it says, follow me on Instagram. And that only gets announced to screen readers.

See, everything has a little like hidden goody inside of it. All right, so we’re gonna delete TikTok. And then Facebook, we’re gonna open up and we go to just the whole Facebook wrapper. Here’s the URL.

And we’re gonna say dynamic data. Actually, I need to refresh the builder because it doesn’t have those fields in there yet okay, so grab Facebook and external URL Facebook URL BAM right from ACF then I go over to Instagram Same thing delete the URL pull this in Instagram pulls it dynamically from there then the YouTube come over here dynamically pull us even though Jake doesn’t have one the others might so we got to pull in the YouTube URL we’re gonna hit save on that okay so now let’s refresh on the front end and just see if we got them working BAM BAM BAM okay now Jake remember Jake doesn’t have one right this one goes to Instagram that’s correct I can see down in the bottom left this one goes to Google that’s correct okay so now we come in on the YouTube’s and we actually we want to do this for all three. Cause remember this modal applies to all of our little team members here. So we wanna go up to conditions, add condition.

This is gonna be dynamic data. And then what are we gonna do this based on? Well, we’re gonna do this one based on the YouTube URL. And we’re gonna show this if it’s not blank.

So if the URL is not blank, we are gonna show this icon right here. I’m going to go to Instagram. I’m going to say add. I’m going to say dynamic data.

And I’m going to say, Instagram is not blank. Okay, then I’m going to go to Facebook. I’m going to say add. And I’m going to say, dynamic data.

is not blank, save, refresh. Jake, look, he’s only got two icons. Now if Jennifer, what is Jennifer? Oh, Jennifer’s got no icons.

Jennifer also doesn’t have a bio, but let’s go to Jennifer now. So let’s say that Jennifer has, okay, let’s say Jennifer has a Facebook, so we’re just gonna put a pound sign in, and a YouTube. So she doesn’t have an Instagram.

So now we’re gonna update, we’re gonna go to the front end. Okay, let’s check Jennifer. Hey, she got a Facebook and a YouTube, but no Instagram. Okay, and then we just put in her bio there.

But now you can see, I’ve got, I mean, everybody has their own little modal. Everybody’s got their own little unique information in their modal, all good. Does this answer your question, Marcel? Hopefully it does.

Put a hover on it so you know the peeps are clickable. Yes. Okay, well now let’s see if we can, let’s hide our modal. We can just keep playing.

You just keep going down the line. There’s always more things you can do, right? So let’s hide the modal in the builder. Let’s go to the body.

No in the, it’s not in the footer, header, info, name. Okay. header, info, name, okay. So name, name, name, name, name.

What had the, what did we put the FR trigger on? Oh, sorry, I’m in the wrong thing. I need to be in body. Here it was, FR trigger, okay.

So now we really want to think about this. This actually makes things a little bit more interesting. We actually want this to be a button. It’s been a while since I’ve done this.

Custom button. We want that to be a button. And we want to extend. .

. I’m wondering if clickable parent extends button areas the way that it does link areas. Let’s check this out in the DOM. Sally after what is oh did not expect inspect what I asked it to inspect.

Let’s just look at this for a minute. Why is that an A when I asked it to be a button? That was because this URL overrides everything? Okay I don’t want to, why, why is it saying no?

All right, let’s remove that. Why is it not letting me, bricks, hello bricks. Why do I have a no there? Okay, just remove it all together.

Now let’s go custom button. Now let’s look at the DOM. Okay, now do we have, it’s very interesting. I inspect this and it’s trying to inspect this third one over here.

All right, let’s open this up. It’s still in A. What is it doing? Save, refresh, inspect.

You guys see this custom button? Give me a button. That’s what I’m asking Bricks for. I’m asking Bricks for a button.

Let’s take off clickable parent now and see, we need to inspect this. We need to figure out, I feel like we have a button now. Now we have a button. When I put clickable parent on, does it, it can’t possibly, how would that work?

How would it change it from a button to something else? Save, refresh. It doesn’t, okay. Just bricks freaking out on us again.

All right, so we have a button here. See, this is correct. What you don’t want, you don’t want a link to fire a modal because a link is a navigational element. A button is an on-page event thing, right?

So if you’re firing an on-page event, you want a button to do that. If you want to navigate to somewhere, then you want a link to do that. So technically we need a button here. And now we need to hopefully extend the clickable area of the button but clickable parent does not do this by default so in my notes I do this from time to time we’re gonna bring out notes and we’re going to write clickable parent

with buttons. Button, I’ll put button elements. Okay. So what happens so you use you use things you do real world work and you’re like, Oh, it doesn’t do the thing that I wanted to do.

Okay, well, now it is next time it will. So now we need to make clickable parent extend to the to here. Which I believe is possible. It’s just this is designed to work with links instead of buttons.

Okay. But Marcel, I hopefully did do this. The now so the hover if you want the whole card to hover, we got to get the button to this. We’re already way over time.

This will be in the next feature of ACSs though next feature release will have buttons working with clickable parents that will be good. Why are you not using ACSs for a button instead of bricks? Why are you not using ACSs for a button instead of bricks? Why are you not, I don’t know what this means.

Why are you not using ACSS for a button? What does that mean? What does that mean? I don’t know what that means.

Can you reword that a different way? It wasn’t allowing you to take the link off because you were on the cloud. Now, because classes don’t affect HTML. So that shouldn’t matter.

Classes don’t affect HTML. So That that shouldn’t that shouldn’t matter. I’m out for today. Great one again.

Thanks so much Kevin. No problem Shouldn’t you put your show hide condition in ACF to keep the family of attributes together? family of attributes together I Don’t know. I don’t know what you mean What I did is I want all three social fields to be available for people and then whichever ones they have profiles for, they’ll put their links in and whichever ones they don’t put a link in, it’s just automatically not gonna show that.

That’s how I set that up. Does it matter at what position inside the loop the modal is positioned? It just has to be inside of the loop. It shouldn’t matter if it’s in the beginning or the end.

I mean, we can just experiment So if I put this modal at the top of the I love this this is every builder It’s like dragging is the most fun game Okay, and then let’s just check there’s Jennifer. There’s Jake there’s Sally so I refresh like five times Still works so it appears that now it does not matter where inside of the element the modal goes. What I do know is the modal cannot be the loop. Maybe if you did it that way, I don’t know how you would do it that way.

Yeah, I don’t know. There might be a situation where that is happening, where you’re trying to modalize the loop. Don’t do that if you’re doing that. The modal just needs to be inside of the loop and then it should just be fine.

It’s not even showing up inside my builder only if I drag it outside of the section. So maybe it’s a Z index issue. That we will definitely take a look at, like just send us a URL or your credentials.

We’ll log in and take a look at it. I mean, I’ll actually just get it working for you if you want. Because that’s the kind of support that we provide. Just hello at automaticcss.

com or actually in this instance, it will be hello at frames. com. Yeah, hello at frames. io.

We’ll jump in. If you give us credentials, we’ll log in and just make it work for you. Are you using ACF now instead of MetaBox? I got to go, by the way.

It is time. It’s been too long. But yes. Yeah.

Yeah. I gotta go by the way, it is time, it’s been too long. But yes, yeah, yeah, yeah, I switched back, I switched back. Especially now that ACF is adding bi-directional relationships and what is the, they’re adding one other thing.

And I was like, those two things, that was the last, that was all we needed. So yes, I am, I am. All right, guys, that’s it for today. Hopefully you guys got a lot out of this.

I got a couple things I need to go investigate and one new feature that I have to build. A feature extension, we’ll call it, for automatic CSS. It’s been fun. I do love you guys.

Throw up some likes. Yes. Thanks, Tyree. I appreciate it.

I’m out. I’m out. Peace.