WDD LIVE 018 – Best Practices Q&A and Mini-Tutorials

0:00:00
Yo, what is up everybody? It is another Wednesday, that means it is time for another Web Design for Dummies. Hanging out with my favorite people. When you get here, make sure you say hi, drop a comment below and drop a thumbs up on the stream. Thumbs up on the stream really helps get things started off in the right direction. Alright we’ve got I am so sorry I cannot pronounce your first name Mr. Shaw we’ve got Mr. Shaw I was gonna say you’re just Mr. Shaw today we got Mr. Shaw in the house I’ve got push car we’ve got wolf we’ve got Rob striped goat is here as usual David Walls is here, 40 Miles West, Sonia, Sonia, Sonia, we’re gonna go with Sonia.

0:00:54
Sonia J, Justin, welcome, welcome. Steve, all right we’re doing things a little bit differently today. I will give you guys a quick rundown as everybody continues to flood in here. See if we can get our viewership up today. You know I never know how I don’t do a lot of live Q&A AMA type stuff. I take questions on normal streams but typically you know we have an agenda, we have a topic, we have websites that we’re going to dive into. Today’s just kind of an open-ended thing always you know playing with concepts seeing what lands, what doesn’t land, what works, what doesn’t work well. We’re just going to see if getting on here and just breaking up the content a little bit and just providing as much direct value as possible, which is based on the questions that you ask and the topics that you guys wanna talk about, which is different from an agenda-driven live stream.

0:01:56
On an agenda-driven live stream, you’re just kind of along for the ride and whatever value gets put out there is what gets put out there, but on a stream like this where it’s an open Q&A, AMA, ask me anything whatever, it’s driven by you. So if you want a specific type of value you ask for that value and then I can just give it to you direct, mainline. Okay. Alright so what can we talk about? Well I put a little list together. Let’s see maybe I could have my notes ready. That would be fantastic right so Anything related to business so agency life freelance life Anything related to business you can ask about sales and pricing client management General workflow we can talk about best practices. We can talk about page building 101 stuff I got a lot of new people to the channel coming through PageBuilding 101, which is fantastic.

0:02:54
So if you’re in PageBuilding 101 right now, and if you have any questions on PageBuilding 101 type content, you can ask about that. ACSS and Frames, if you’re a user of any of those, or perhaps a prospective user of any of those, you wanna ask questions regarding those, you can do that. I can pull up stuff I can screen share obviously so I’m not just talking to the camera the whole time so if there’s anything I can show that is a possibility if you have questions about bricks in general if and but it’s got to be it can’t be like Kevin just you know spontaneously do one of your 60-minute tutorials that’s you know in-depth on this it’s got to be something relatively quick we don’t want to take up the entire stream with a single tutorial, okay?

0:03:41
So anything that’s, you know, fairly quick. SEO, marketing in general, those are the kinds of topics that we’re going to be dealing with today. So anything in that realm is pretty much fair game and I will be looking specifically in the live chat for the questions and your question must have question in all caps. Like put question in all caps then write your question that way I can actually find it and address it. Alright so that is our agenda for today. Alright we’re gonna start at the top and I’m gonna go down in order we’re gonna dive right in. So Mr. Shah let’s start now Mr. Shah has a lot of questions. So I think what I’m gonna do, let’s see a couple of these.

0:04:32
For someone just getting started or coming over from drag and drop builders, e.g. Squarespace, what advice do you have? That’s very simple, Mr. Shah. You do PageBuilding 101. So you do PageBuilding 101, which is a free course, 100% free, then you will make that transition. That’s exactly who the course is designed for. Of course, it’s designed for anybody using a page builder.

0:04:57
You could already be using a legit page builder like Bricks or Oxygen or whatever, but you just need to brush up on your fundamentals. You need to know the best practices. You want to do things in a more scalable, maintainable way. Page building 101 is for all of that, but definitely you should be doing page building 101. Question for beginners, most people do a lot of work for free before they feel confident enough to charge. Any thoughts on that?

0:05:23
Yeah, there’s nothing wrong with it. If you feel like you don’t have a lot of confidence and you don’t wanna, you know, you could potentially not do things great and you’re like, well, because I’m in that position, I’ll just do some work for free, I’ll gain experience this way, I’ll build up my portfolio, then for sure I think that that is a good, it’s a good option. You want to be open with the clients though. You want to let them know I’m doing this for free because I don’t really know what the hell I’m doing.

0:05:55
And so if you like it then you can use it, if I screw it all up then you don’t have to use it and you’re not out any money, which is fantastic. If you’re on a tight timeline of sorts and you really need this website to be done right and done on time, then this is probably not the best arrangement for you. But if you just want a free website and you wanna give me a shot, just be upfront and honest about it and let them know you’re doing it for experience.

0:06:22
Let them know that if they like it, you’d like to put it in your portfolio and so on. I think that’s a good way to go about it. All right, in 2023, is it even worth thinking about starting an agency? Absolutely, absolutely, there’s nothing, yeah. The market is continuing to grow, the need for our services is continuing to grow. I think it’s still a fantastic thing to do. Question, how can we as a community help with the documentation side for frames and ACSS?

0:06:48
More hands can make it better for newcomers to get up to speed. Yeah, documentation is a really big task. And so we’ve got a good head start on it, but there’s a lot more to do. I’m in talks with somebody right now about helping with the documentation. I wanted to start out the documentation to kind of set the stage for how it should be done And then as long as the person really really see the thing with documentation You really really really got to know the tool you really really really got to know ACSS You really really really got to know frames and so we have to get somebody that really really knows their stuff, but also somebody that’s really really good at writing and And and can make sure that they have detailed documentation and it’s great English and all of that stuff.

0:07:42
So we want a very high level of quality to the documentation. So it’s just finding the right people. What are the modifications you have made to your agency’s workflow to make building with BricsBuilder better? The biggest modifications really, I don’t really have a lot of builder-specific add-ons. Automatic CSS is an obvious add-on, though it’s not specific to Brics, obviously, but it does help workflow tremendously.

0:08:13
Frames, right now, is for Brics, but it’s still kind of, the vision of Frames is platform agnostic, but those are the two things that dramatically speed up workflow, and there isn’t anything that has the impact, anywhere near the impact as those two tools. I think that’s pretty much it, really, for Bricks. I did a whole video on my plugin stack. You’re gonna see there’s not a lot of Bricks builder add-on type plugins.

0:08:41
There’s WordPress stuff in there. WP Grid Builder for facets, WS Form, all that, but that’s not BRICS specific. Is there a thing like too many beginner questions inside the ACSS Frames community? No, not really. You can ask away, fire away. I mean, that’s what the community is for, but if, you know, it’s a fine line. I, you know, there’s some, I feel like you, Mr. Shah, are gonna be asking questions that are just fine.

0:09:12
But there are some people who come in to these communities, my inner circle, and ACSS and yada, yada, yada, and they pose self-promotion almost as like a question. And it’s like, really asking a question? I don’t know, I don’t know. Sounds like you’re trying to make a point or like promote something in the form of a question. We don’t want that to be happening right because that lowers the quality of the community so but as long as they’re legitimate questions then it’s fine.

0:09:47
All right that was all Mr. Shah’s questions. So we’ve got push car or push car suggestion hmm okay for frames it will be very helpful to see how they were built, which properties, variables, etc. were applied. I think a short video for a few keyframes would help to learn best practice. Well, my friends, I mean that that is possible right now. You can go to the Automatic CSS YouTube channel. Let me see if we can pull this up here. So I will Automatic CSS and frames. Okay. Okay, so let me show you guys this screen. Make sure we’re showing the correct screen.

0:10:29
Looks like we are. Okay, so we come down here and you can go to videos and then you can see there are a few done. Like here’s feature section Sierra, an overview video there. Article section India, CTA section golf, image group Echo. There are some frames that we’ve done videos for showing how the frame is constructed, how to use the frame, how to style the frame, so you get to see a before and after. These this kind of content already exists and we’re going to be doing more of this kind of content. And if you’re not subscribed to the Automatic CSS and Frames YouTube channel, it’s kind of one in then hop over there and go ahead and subscribe to that.

0:11:14
Alright. Are there any plans to do more full site build videos in the inner circle? I found these videos extremely valuable. I’m not ruling them out, but the problem with full site builds, number one, is I build a site and then, number one, it takes a long time. I mean, a site, like, if you’re gonna build a legit website I mean that could be 40 to 50 hours of time and so you’re basically asking for Complete course ever like you know how often are we are we going to be able to to do something like that?

0:11:52
but the other thing is We follow the same practices in every website built so it may look different But I’m doing the same things over and over and over and over again. You know, there’s occasionally you’ll have, we’ll show this technique or that technique or we’ll have to do something special. But really those special things can just be their own training videos on how to do this special thing.

0:12:19
It doesn’t have to be within the context of a full website build. So you know, if you’ve seen one website build done correctly, then that should really be all you need You know it’s not I can go into the next website build You’re gonna see 90% of the same things happening that you saw in the last website build so to say oh We’ll spend another 50 hours Doing this next website build where 90% of the content overlaps the other 50 hours that I already did, that’s not such an efficient way to produce content. So, I’ve done a couple, plus I’ve done them with real clients, which is even more challenging because we run into issues with the clients sometimes and that impacts the ability to produce video.

0:13:08
Plus, if I’m doing a real client’s type, there’s a timeline for that. And guess what? That timeline doesn’t always align with my recording timeline. I got three kids, they all have activities, they all make lots of noise, they have friends, I have a wife, I have hobbies, I’ve got this, I’ve got that. And so I’ve gotta record when I can record. But if I’m doing a client site that relies on, and I’m also trying to record it and the two timelines have to go together a lot of times is like why can’t record so I can’t work on the site and that that can’t fly that doesn’t really fly so then what what is the alternative it’s like alright like we’re gonna make a fake company like let’s just make up a fake company into a fake design and a fake build I mean yeah okay we could do that but again is how many of those you have to see before you realize 90% of it is the same process over and over and over again?

0:14:06
And that’s why you should have a process and I’ve done videos on the importance of process and You just follow the same steps over and over and over again rinse and repeat And it’s just a different subject different content different design, but it’s the same principles in practice So that’s kind of my explanation of those. All right. Let’s keep going down. Striped Goat is here. A lot of people talking about page building 101. Question. Looking into the next five to ten years, how do you think AI will affect design and web agencies?

0:14:45
This is a question that comes up over and over and over again affect design and web agencies? This is a question that comes up over and over and over again. I don’t think AI is going to have the impact that a lot of people think that it will. I think it’s going to help us do our jobs better. That’s the most likely outcome versus replacing us. I do think that there are low level people that will be replaced. You see this all the time in you know replacement type situations. The highest level people typically don’t get replaced. It’s the bottom of the barrel. It’s the lowest level people that get replaced you know. So if you’re in the McDonald’s organization, if you’re an executive at McDonald’s, probably not going to get replaced right? If you’re a right If you’re a manager at McDonald’s, maybe you’re not getting replaced cashier probably get replaced Flippin burgers, that’s the extent of what you know how to you’re probably getting replaced, right?

0:15:48
so these people who only know how to and this is why page building 101 is Such an important thing for people to do. This is why best practices is important to know. This is why What I talk about being a consultant versus a pixel pusher, if you’re a true consultant, you’re not really replaceable, okay? If you’re a pixel pusher, I can probably replace that. And if you don’t know what the difference between the two is, a pixel pusher is somebody who, you know, a client hires them, but the client basically says, here’s what we need done, here’s what we want you to do, you’re gonna do it like this, you’re gonna, and it’s just like, okay, yes, sir.

0:16:25
All right, follow the instructions, do the thing, whip it up. That kind of person can be replaced. If you’re a true consultant on the project, AI is not going to replace you. So you’ve got to make sure you’re not putting yourself in a cashier style position or a burger flipper style position. You’ve got to make sure that you have value well beyond that and so you’ve got to gain that value.

0:16:48
You can’t just come in and snap your fingers and have that value you’ve got to learn it So you’ve got to treat this like you treat Hopefully you treat anything else which is getting better and better and better and better every day. You’ve got to get better every day You’ve got to learn more and we happen to be in a in a very difficult industry This is a very difficult industry to be in people come in, I’ve responded to a couple comments in the Bricks Forum and some other Facebook groups lately of people and you know it was even somebody criticized Page Building 101. They were like, it’s a fantastic course but I just don’t have all this time. You know, can you give me one video to you know get me started, overview me, what I need to know and it’s like I mean what are you asking right now? This stop for a minute, just pause, pause, it’s just I don’t know maybe you know synapses not firing in the brain maybe I don’t know what are you asking right now?

0:17:52
This is like this is like saying I want to be a surgeon and they’re like all right well you’re facing eight years of medical school and and be like, whoa, hold on, whoa, eight years, can you just give me like an overview video or something? Just get me started, just get me started, right? That’s what you’re asking, it’s crazy. Do you know how much stuff there is to know? Do you know how fast this industry moves? It’s, there’s a lot to know and a lot to keep up with. It’s not an easy industry. If you’re looking for easy buttons, this is not the industry to be in.

0:18:26
This is highly technical, it’s fast moving, and there’s a ton of competition, because there’s also no licensing requirements, there’s no barriers to entry. Dog, you buy a laptop and you can call yourself whatever you want. Now, whether you can execute or not, that’s the question, right? But that doesn’t stop people from getting clients. There’s people that don’t know what the hell they’re doing getting clients day in and day out. So you’re competing with literally everybody that has a laptop who wants to call themselves an agency owner or a freelancer. And and and that creates a situation by the way, where a lot of clients get burned. And when clients constantly are getting burned in this industry, it makes it harder for legitimate people to land contracts because now everybody’s on the defense. They’re like, are you one of them? Are you one of those burger flipper type, you know, web designers? Or are you legit? And so you’ve got to get on more sales calls, longer sales calls, build more trust, show more work, you know, all this stuff gets a little bit harder because of all these people who don’t know what they’re doing burning clients left and right. This is the same problem created by low pricing in the industry.

0:19:42
People doing $500 websites, $1,000 websites, which I blame this partly on the clients as well. I mean it’s your fault. It’s like, you know, okay I can go, let’s say I’m going to buy a used car and I walk on the lot, I walk on the used car lot and this guy’s like, got a BMW for you, it’s 2015, $2,750. 2015 2750 bucks absolute steal absolute steal You know and so I buy it whose fault is this when that car fucking breaks down five miles down the road Whose whose fault is that is it that guy’s fault for selling me the $750 car or is it my fault for not going? Why is that car $750 what’s wrong with it right? Let me get that checked out by my mechanic. You know I’m gonna do some due diligence. So I blame clients as much as I blame the web designers, but it’s still a factor, it’s still the deal is getting done, people are getting burned, and now the next person that comes along who’s actually legit is going to have a harder time selling a project to that client or to clients in general, because people hear about the stories and the industry starts to get a reputation we all know that you well there you go used car salesmen have earned themselves a reputation over time for doing that kind of stuff and we don’t want this industry to get that type of reputation so we have to be very careful and we and this is why I and because there’s no licensing this is why I am constantly advocating for best practices, for accessibility, for standardization, for using professional tools, for following professional processes.

0:21:21
And people get on, they criticize me left and right. Oh, you can use any builder you want. Oh, nobody gets to define professional. Da, da, da. Okay, what I am trying to do is elevate the entire industry. Everybody else is like, no, we don’t need standards, you can use any builder, these are people lowering the industry. You gotta decide which side you wanna be on. Now the problem with being on the side of professional tools, professional workflow, and higher standards, is you actually have to fucking practice, and do the work, and learn.

0:21:57
You actually have to get better, okay? Cause you wanna be in that group. So yeah, it requires more effort, it requires more knowledge, it requires more experience, it requires more professionalism, but the outcome is obviously far better for everybody involved. Imagine if the average price for a website was $10,000 instead of $2,000 or whatever it is, and people valued the work more, and people understood the value in the work, right?

0:22:26
That’s going to happen through additional professionalism and standards and best practices. That’s not going to happen through do everybody does whatever they want and we’re gonna keep doing $500 websites and we’re gonna keep burning clients. That’s going the wrong direction. So I think this stuff is important. I’ll be honest with you, I don’t even remember what the original question was.

0:22:48
It was AI? Was that it, AI? How many tangents do we just go on here I’m we’re on used car lots and everything else yeah so hopefully that answers your question right if you’re if you’re low-level and you don’t know what you’re doing and you know the work that you can do or the work that you do do can be easily replaced yeah AI is a threat to you I don’t see AI being a huge threat to legitimate people. Legitimate people are simply going to be assisted by AI and their work will be easier and their work will be faster but they will still be needed because they still have a human brain and it’s very, very, very, very difficult to replace a full human brain. You can replace various aspects of processes and data manipulation and assessment and all of that, but to replace creativity, to replace ingenuity, to replace critical thinking, to replace a lot of human-esque stuff, that’s much, much harder to do.

0:23:49
Okay, what would you say are the benefits of using BRICS over a bespoke PHP theme to a client who insists on you not using a page builder? Well, the second part of your question is the red flag. And this goes back to consultant versus pixel pusher. So a client hires you, I assume that’s what’s happening. The client hires you, the client doesn’t then say, and now you’re gonna use this platform and this tool and this process and da da da da. No, no, no, no, no, no. Hold on.

0:24:28
If you hire me, we’re going to use my process and my platform and my tools because that’s the way that I work. And I know what I’m doing and I have this amount of experience. And this is why people hire me. And so if they’re not a good fit. You should not agree to that project. You need a client who’s going to say, what platform do you use? Okay, does that fit our requirements? Yes, it does. Okay, perfect. You have a professional process.

0:25:03
I see your work. I see your experience. I see your testimonials. We would like to have you. We would like to have you. And you know, this is actually a question, by the way. A lot of people, I don’t think think about asking questions of the person who’s hiring them, but you should and it actually is a way for you to, it’s one of the easiest ways for you to position yourself as a consultant and demonstrate your value. You know sometimes we always think in sales calls of somebody has an objection and it’s our job to have an answer to the objection or overcome the objection and sometimes you know if I hear too many objections in the sales process I will just flip it back on them and I’ll just say and just tell me you know why do you want to hire me you know it’s like oh it seems like you got a lot of objections you know to the things that we’re talking about.

0:26:02
You know, why, why are we on this call? Why do you want to hire? Like now I want them to sell me on why they should hire me. Right. I’m just going to flip it back on them because I don’t need the business. What I need is a good project where I’m seen as the consultant and my value is respected and they’re going to look to me to kind of tell them what to do next. That’s the kind of project that I’m looking for and that’s what you should be looking for As a professional right it’s the same thing with a you know doctor lawyer like name any professional Photographer doesn’t even have to be something you know super crazy I mean does a photographer want to be hired by somebody who’s like well now you’re gonna frame it like this We’re gonna put the light over there. You’re gonna know No, hold on, I’m the photographer.

0:26:52
Why did you hire me? If you want to tell me how to frame, do you not own a camera? Do this yourself. You don’t want to be in those kinds of relationships, in those kinds of projects. That’s a pixel pusher relationship, not a consultant relationship. So it’s not a client insisting on you not using a page builder.

0:27:11
Like if you’re going to insist on me doing anything then we’re probably not a good fit. And you know don’t be afraid to turn this around in the sales call. The biggest and I’ve taught this in the inner circle many many many times in various sales trainings that the best ingredient or the number one factor in in sales from your mindset perspective from the way that you talk in the sales conversation is positive indifference. You want to be extremely positive about the opportunity that is in front of you. You want to be excited about it. You want to be excited for the prospect but you are completely indifferent to the outcome. Completely indifferent to the outcome. If I’m not a good fit, it’s okay. If this doesn’t work out, it’s okay.

0:28:05
If you don’t wanna pay, it’s okay. If you, whatever happens, it’s okay. I don’t need you. If, hey, I’m happy for you. I’m happy to have this opportunity. I’m happy you were on this call, but I don’t need you. I don’t need this project. I’m super positive about it. And I’m gonna answer all your questions. I’m gonna do my absolute best if you hire me.

0:28:27
I’m going to try to be the best person you’ve ever hired. But if for whatever reason this doesn’t seem like a good fit, it’s okay. More fish in the sea, I’m on to the next one. Okay? And this is very, very difficult to have. If you approach a sales conversation with that kind of mindset, people will automatically respect you. You know when they lose respect is when they realize oh you’re going to tell me anything I want to hear to try to land this project. So you’re not being honest with me, number one, you’re just trying to sell this project and you may in fact be desperate. Like if they get any hint of desperation that they’re probably running the other way at that point. That’s when you’re sending off proposals and SOWs you don’t even hear back from the person.

0:29:15
They got a whiff of the fact that you like need this, you’re living project to project and that’s really what’s tough about it is you could legitimately be living project to project. You could have a dollar in your bank account and you need this project but Jack you better get on that call and act like you don’t. You’ve got to get on that call and act like you don’t. You have to have positive indifference. You have to be 100% indifference to the outcome and that way you can be 100% honest and transparent with people on the call and they’re going to 100% respect you when you speak from that perspective. So positive indifference is the biggest thing that you need to have to make sales calls work really well in your favor and avoid the red flag clients, avoid the projects you shouldn’t be taking, avoid the people that are gonna try to tell you what to do day in and day out.

0:30:07
It is important to avoid those types of people as it is to land projects, right? So don’t get on every call saying, I need this project, I need that. You only need a project if it’s the right project at the right price. That’s the project you need. You don’t need any other project, okay? So you gotta get that out of your head, that desperation of I gotta land every client that I can possibly land.

0:30:28
No, you don’t. You don’t want to. You don’t wanna live that life, as I say. Alright, hopefully, so we’re not even talking about PHP themes versus WordPress. The red flag was a client insisting on you not using a page builder. That person should not be a client. Alright, that’s the kind of questions we need though, right? We need really good questions like that.

0:30:54
A lot of people saying hi, good morning D123. Pete is in the house. Terry is in the house. I think that’s Terry. I’m pretty sure it’s not Thierry. I’m gonna go with Terry, Terry C. Question, what is your migration process? Migration process is very easy. It’s all in one migration. I think I’ve showed it.

0:31:17
I did a video on it. All in one migration has been very good to me. Haven’t had any issues with it. Works very seamless. And, but I mean, we could go deeper than that. Could go beyond that. So obviously if you are migrating a website and the URLs of pages are going to be changing. There’s gonna be redirects involved, so you’ve gotta create a redirect list and then make sure that that gets implemented at the server level is the best way to do that.

0:31:48
If the domain itself is changing, there’s, you know, could be some additional complications in there, you’ve gotta make sure then after you migrate, you’re setting up analytics properly, you’re, you know, there’s a whole punch list. There’s a whole punch list. Maybe I should share my punch list for putting a website live. Like the project is done, is ready to go live. Here’s the punch list that we go through to make that happen.

0:32:14
I’ll put that in the inner circle. Okay, we’ll share that inside of the inner circle. It’ll be in the, we’ll do that in the agency resources area of the inner circle. Okay. Okay, Vittas here and Kay and Steve follow up. What do you do when the migration fails? I’ve never had a migration fail. So I’m not sure. And you really can’t, I would need to know what it means to have a migration fail.

0:32:40
I mean, obviously you still have a copy. You still have a backup. You still have a, the whole site should still be live in my estimation on a development server or on a local server. I prefer to do development, especially because we have a team. We do it on a live development server. So we’re not really doing anything local.

0:33:02
I do local for all my trainings and everything, but client sites, plus I also, part of our process is we give clients a live link to monitor progress, right? So they can go to the live development server anytime they want and look at what’s being done, look at the progress, look at updates, and so on and so forth. So that live development server stays intact until we have a successful migration to wherever the website is going.

0:33:29
And at that point, we generally even keep that development server 60 to 90 days and then we’ll delete it. So there is no chance of like some sort of unrecoverable failure or anything like that. Terry says CSS variable in WP code light how to make it work. I assume you mean WP code box light or is there a separate plug-in called WP Code Lite. There’s three people, two or three people that asked me about this because I showed the creating variables in PB 101 and then people said WP Code Lite. Let’s go over and let’s screen share this real quick. So WP Code Lite, is that what it’s called? Like just like that? Wait I gotta go to add new. I’m definitely searching in the wrong spot.

0:34:31
WP Code Lite, we gotta search in here. Is it this? WP Code? Insert headers and footers and custom code snippets, WordPress Code Manager? Huh. Don’t think I’ve ever used this. Let’s see what it does. And I’ve got WP Code Box over here, which is the one I recommend. And I don’t really have anything on this install in there anyway. All right, so I guess it’s this code snippets thing.

0:35:05
All right, well, I don’t need these. Let’s get those out of the way. Add new snippet. I don’t think I want to add a snippet Can I just add code without adding a snippet? Do I have to add a snippet? Do I have to add a blank snippet? What am I doing? Oh custom code, okay CSS code preview Auto insert shortcode sitewide header Yeah So this is not really this is just for any code snippets Here here you can choose text block PHP CSS snippet I Assume what’s this doing to inline it. This is just wrap this in style tags. I Don’t know let’s try this root Test 1m Well, we don’t wanna do that.

0:36:02
Save, activate, update, front end, view source, find, root. See, it has the one from WP CodeBox sitting right there. Nope, here it is right here. Style, can you guys see that? It’s like in 7.6 point font here it is right here so technically seems like it should then work okay so now what we have to do is make it have some sort of purpose right let’s say radius and we’re gonna do 50% 50 percent. So that should make a box into a circle. So now we’ll go into add page and we’ll go to circle, publish, open up some bricks, add, div, grab, style, layouts, width, style layouts width 500 500 Let’s go background color of anything and let’s go border radius of Var radius seems like it works to me What was my other yeah, that works, that’s it. I mean, you see anything else Seems like it works. So if I if I were to guess Maybe you didn’t choose CSS snippet right here. Did you leave it as an HTML snippet and try to do that?

0:37:49
CSS snippet seems to work and You know, you’re loading that in the head now. It’s it’s inlining the code, right? code right so in WP code box we have the ability to load that as another as an additional style sheet versus just putting it in line like that I don’t see that that’s a possibility here it would why I hate this look at this like layout shift when I open that like the whole the whole come on this is too big for a an accordion style thing here. Yeah, it doesn’t it doesn’t seem like it can add it to another style sheet. So I would say that’s kind of a downside of that. Are you just using this because it’s free? Here’s the thing like get WP code box is so worth paying for so worth paying for. And that’s going to open the door to SAS and a bunch of other features. And it’s just really, really, really, really good to have. So it’s an example where you can probably get it done a little bit with this kind of tool, but you’re very limited by the fact that you’re using a free tool.

0:39:00
And I’m always just very worried, you know, like free tools, how much incentive does the developer have to really stay on top of things? And it’s just, if you look at my stack, I’m pretty sure every plugin in our stack is a paid plug-in and that makes me really comfortable that really helps me sleep at night I like when developers are getting paid It tends to work out best in the long run. So All right. I don’t know Terry. It seems like it seems like WP code light is is working with CSS variables Thanks for the breakdance look from several weeks ago is very helpful absolutely. Ruben says question how often do you rebuild your blueprint site even with only the essential plugins installed there is still bloat left over left over over times of updating those plugins.

0:39:52
Hard to answer I don’t even manage the blueprint site anymore so you know the the team is doing that typically Andre is on top of all of that stuff for me. So, updating the plugins on the Blueprint site, you know, database, cleanup, things like that. So, I don’t know. We’d have to get on here, get him on here and ask him. If you were to start another agency from scratch but wanted to cater to higher ticket clients, Enterprise, how would you market yourself to pick up those first few clients? That is going to be a situation where you’re probably that kind of thing, you could, there’s a bunch of ways to approach it, but the best possible way to get clients like that is to build relationships with people who know clients like that. And I did a video in the inner circle about the three best ways to get clients fast.

0:40:47
And one of those is, you know, I’ll just give you the TLDR. One of those ways is relationships. You should be building relationships at all times, which is not an easy thing to do. I’m not an extrovert, I’m an introvert. So I don’t naturally just go chatty Cathy on every single person that I come across. And so, you know, it’s work. For an introvert, it’s work, it’s work, but you’ve got to build those relationships. And some of the biggest projects that I’ve ever had did not come out of the blue from like content marketing or SEO or PPC or what have you.

0:41:25
They come through relationships. They come through referrals. And one of the best things to do is partner with other agencies that do related stuff. They cater to the people that you want to work with, but they don’t compete with your services directly. There’s a lot of examples of agencies like that that I give in the Inner Circle video in that training, but that’s been the best way that I’ve found to get those kinds of clients. It’s who you know, right? It’s who you know, as with a lot of things in life. So you’ve got to know people, and you got to know the right people. And then things start to happen. And it’s not an easy, you know, it’s kind of sucks, because you’re like, Oh, okay, like, you wanted some magic response, right? You’re like, Oh, well, you just do this, when you know, Google Ads, and bam, there they are. Well, it doesn’t really work like that. Connor B. Now that was Connor B’s question.

0:42:27
Daniel says, what do you think about applying fluid container width as a percent of the browser width at different breakpoints? I can’t answer that question because I need to know what the desired outcome is. You know, one of the challenging things in CSS and page building and web design is that there, any outcome that you tell me you want to achieve, I could probably describe three ways minimum, potentially ten different ways to achieve that outcome. And so what we are in a position of doing as web designers is deciding based on the list of pros and cons for each route, which route we should probably take, right?

0:43:10
Because there’s going to be an efficient route, a route of least resistance, then there’s going to be a very difficult route that you could take to get to the desired outcome. But then we look at things like scalability and maintainability and consistency and dry principles and you know all the things being taught in page building 101. And now the path of least resistance like to get from point A to point B is actually not the best route to take because it’s not a scalable maintainable. It got us there quickly, but it’s not scalable, maintainable, consistent or anything else. So it’s not the best path to take.

0:43:45
We got to take this path over here instead. So if you say, hey, what do you think about applying a fluid container with as a percent of the browser with the different breakpoints? It’s like, what are you trying to do? What are you trying to make happen? Because that’s going to determine, and then how often does that need to happen on the website? If it only needs to happen once, my answer might be one thing.

0:44:06
And then if that has to happen 100 times on 100 different pages, my answer could be very, very different. So I really need to know a lot of context and details and specifics. It’s not really an answerable question as is. David says, from your Blueprint website video, is it possible, recommended to use the blueprint for a website that already exists and has content SEO not important? Is it possible recommended to use the blueprint for a website that already exists? I’m not I’m unsure about your question You like are you rebuilding the site that already is the website already exists and you’re gonna rebuild it, is that why you would start from the blueprint at that point?

0:44:54
I don’t know, I need more clarity. I’m a little lost on that question. Dale Smith, would enjoy hearing your perspectives on PineGrow and its WP plugin. Okay, I’m gonna do a first impressions of PineGrow. It’s not like a 100% first impression, obviously. I’ve opened PineGrow. I’ve been in PineGrow. I have not done a lot in PineGrow. So it’s still legitimately a first impressions because I haven’t built a site in PineGrow, haven’t even built a page in PineGrow, haven’t done anything.

0:45:25
I went in there, I looked around, I got on a video with Adam Lowe six months ago where he showed me some stuff related to potentially creating Gutenberg blocks with Pine Grow. That was an hour long video. I don’t remember half the shit he showed me. It still would be a legitimate first impressions of Pine Grow. It’s basically what I’m getting at here. But I can give you a hint. I see it as a very powerful builder.

0:46:02
You can do a lot of stuff in it. Sections don’t make any sense to me in Pinegrow. It’s very much web flow like you add a section and doesn’t really it doesn’t it doesn’t really shortcut you you know it’s like I could have added a div and just change the tag so what the hell is this section element for? I kind of got that vibe off the section element but that’s just one thing so a little nitpick you know. The UI is is the biggest thing for me. That’s the biggest holdup. I have a really, really hard time working in a tool that is ugly. And so if I open the tool and it takes me back to like 2007-ish, I just, I don’t wanna be in that tool every day.

0:46:44
I don’t wanna be, I just, I wanna be in a modern looking environment. You know, Bricks is fantastic, right? Even Webflow, I said this the other day, Webflow, man, is starting to look a little dated to me. You know, let’s look at the, well here, we could just pull up the Pine Grow. We don’t have to make this a first impressions video or anything, but let me see if we can, let’s go share screen here.

0:47:10
I’m gonna do this Quickly as I can I don’t know you pull this thing up right here So pine grow is like a it’s an app that you install on your computer. It’s not like a brick style thing It’s not a web flow style thing I don’t even know what any of these are pine grow. See there you go So this this is the extent of my pine grow right here I don’t even know if this is a page that we can insert stuff on I don’t think it is. Okay, let’s go out of there. See, now I gotta pull up the app again.

0:47:44
This is already frustrating. Pine Grow, okay. All right, let’s just open test site. That appears to be some sort of page. Shit, all right, didn’t wanna do that. Can you undo? No, let’s do this again. This is fun, isn’t it? Pine grow. Okay, take me back home.

0:48:06
I don’t even know how to get to home. Okay, here we are. I’m not going to click this button now. Don’t click that. Maybe can I make it bigger? Okay. So now I’m changing the breakpoints here. Don’t even know what these are. Can you not tell me the width? Can you not share with me the width that each breakpoint is?

0:48:23
It seems like that would be, oh, there it is right there. So I gotta click on one to see its width. All right, Excel. Okay, whatever, 1600. So let’s insert. And so you get a panel like this, you know, and it’s like, oh, gosh. There’s little, you know, little labels, and it’s like, wow, look at the, I mean, woo! Now I can search for things, all right, that’s fantastic.

0:48:45
You need to really, because there’s so many things available. available section so it gives me a semantic section tag but it’s more or less like a div now I need to have I would style this with some default padding but I still need to insert my container manually and I’m just gonna go up here and of course there’s no container so I’m gonna need to insert a div and div div inserted okay well where’s my structure panel here we go it’s look look at how I’m over here doing stuff and this panels just sitting here like hey I’m still open dog I do you want to close me or do you want to like you just want me to sit here kind of awkward you know I don’t need you right now I went over here to do something else and you’re still like you know being very needy right there in the middle of my screen so now I’m over here in this div and I’m gonna have to give this a class of container and that’s gonna have my container Styling it’s a lot of work for like, you know, why was there a section element?

0:49:45
Like it should give me a container by default That’s my website width and it should be auto centered and all of that. Just do all that for me I don’t want to do all that manually. That’s why there’s a section element Like I said, I could have just added a div and change the tag to section that would have got me a section So what why I have a section element if you’re not going to shortcut me it’s like here’s a shortcut but it only goes one foot you know you needed to go a hundred feet but here’s a one foot shortcut like okay thank you and but just it’s just nobody is this is not going to win any design awards right I look at all the shit going on over here so it’s just it’s a mess look at these labels you can’t even read them they’re all condensed into here and maybe I can pin unpin move these things around I don’t know but it’s just there’s a lot going on there’s a lot of tiny ass little icon look at all these things look at all these things at each breakpoint I mean man it’s just it doesn’t seem like it would be a fantastic experience you know so you know they say with great power comes great responsibility in this case with you know, great power comes a lot of other things that aren’t so great in my opinion.

0:50:58
But I’m going to give it, you know, I will give it a fair shot at some point. I will give it a full first and I will try to make some stuff happen and we’ll see how it works out. I know Adam Lowe is, you know, huge on it, right? He’s, he loves it, but I think he would tell you, the UI ain’t that great. The UI is not gonna win any awards, and it’s not a fantastic experience to do your work inside of it. For me, that’s big enough of a turnoff to where I can’t see myself ever adopting the tool as something that I would use consistently.

0:51:34
I would use it maybe if I was forced to use it for a very specific thing, like Gutenberg blocks, I don’t know. But there were some issues with creating the Gutenberg blocks that way. So yeah, I’ll look at it and I’ll give it a fair shake, but I just don’t see myself at the current time using it. But then we look at something like Webflow, and at one point in time, and this is why, man, for developers, app developers especially, software developers, plugin developers, this is a constant challenge.

0:52:09
The industry moves so fast, design trends change so fast. I mean, we know that we’re web designers, right? And so you build a website for a client, three years that shit’s outdated, right? Three years it looks old in a lot of cases. And so you put all this effort into a tool like Webflow and it looked fantastic when they first came out with it. But now you can just tell it’s like outdated. I mean this drab, dark, kind of charcoal-y color.

0:52:36
And you know, these kind of icons, very small text, everything’s very cramped. It’s just, here’s the same thing. Webflow, by the way, is even worse with this. You add the section container, not only does it not give you the inner container, it doesn’t even give you a semantic section tag. Like, dog, what are you doing? Why does that element even exist? It’s just, you just, thank you, you gave me a div. Fantastic.

0:53:07
You gave me a div and you called it a section. But it has no, nothing about a section is applied to that thing by default. So I don’t even know why that exists. And I just found out, I just found out you can’t use variables and inputs in Webflow. And what did I say? If you can’t use variables and inputs in a builder, it’s gone, it’s gone, it’s off the list. Straight to prison, 100% felony violation, you need to be rehabilitated.

0:53:36
I don’t know how long it’s going to take. Webflow, you might be in jail for two years, three years, however long this rehabilitation period takes, but you’re out of our life for right now because you have created a severe felony violation. All right, let’s go. I can’t even watch the magic number YouTubers anymore. You’ve turned me into a CSS snob. Yes, yeah, the magic number YouTubers. You gotta love that, right?

0:54:01
How much spacing should I put? Oh, just pull a random number out of my ass and throw that in the input, that’ll work. Yeah, and they’re doing that all over a website. Man. Any pro tips or guidance for finding new clients? Yeah, it depends on what you wanna do though. What route you want to go. PPC, you can get clients all day, but then you gotta have some money up front right. Content marketing you can get clients through content marketing, SEO you can get clients you can get clients like I said through building relationships you can get clients through doing work for free you can do there’s there’s like the there is a laundry list of ways to get clients. The thing that you shouldn’t do is you shouldn’t try to use every single strategy. You can’t say well I’m just going to try to do it all.

0:54:50
What you should do is probably pick three strategies and go a thousand percent on them. Like go as deep as you possibly can on it, put all your focus into those three strategies and you’re going to get clients. And if you’re not getting clients still after going hard in the paint in three solid strategies, then you probably suck at sales or you may just suck as a web designer and you need to get better. And so people can sniff you out a mile away. They’re like, this dude don’t know what he’s doing. So, you know, they’re doing their due diligence and they’re like, pass.

0:55:26
So if that keeps happening, then you gotta up your skills. You gotta get better. There’s no way around that. There’s no magic way. And really you shouldn’t be getting clients if that’s how people are feeling. So there’s a lot of ingredients involved, a lot of things that have to come together but yeah it’s it’s hard it’s another question that’s hard to answer because it’s like what are I also need to know what are you good at Rob are you because if you’re not good at writing for example then you know content marketing is out the window you’re probably gonna hire somebody else to write the content and you know it’s just not gonna work that great so that’s not gonna be a good strategy.

0:56:02
If you’re broke, then PPC is not going to be a great strategy because you’re going to need some money up front to run the ads and to do testing. And you’re going to lose money a little bit in the beginning as you figure things out. So it depends. I got to know more about you in order. And then if you’re like, you have no personality, it’s like, all right, well, you’re not going to make a lot of connections. So, networking probably not gonna be your thing. It’s just like, I gotta know what your situation is, then I could probably help tailor what your strategy should be.

0:56:36
Steve says, how much deeper do you go on your agency’s BRICS blueprint? For example, do you create any sample team members, the blog post template, or anything else? You know, I’ve thought about it and it would be more important to do that if we weren’t using frames now. The frames takes care of all of that. It’s like the minute I need a blog post template, one click, two clicks, there it is, save, okay, got a blog post template. Oh, we need a team section, okay, well there’s like five to ten, it’s gonna keep growing, thirty, however many there’s going to end up being, team sections to choose from.

0:57:16
Do I need my team bio, when somebody clicks on a card to open in a modal, and there’s their profile shot and their bio, all in a modal with their social media icon, that’s a frame. So I can just add that to a page in seconds. So I don’t need this stuff in the blueprint because of the fact that it can be added in seconds with frames. So, but if you’re not using frames, you don’t kind of have that at your fingertips, then yeah, you may want to put in some, some deep, but then it’s like, do you want every team section to look like your blueprint site?

0:57:49
You know, there’s gotta be some creativity allowed there. The only thing that I would say is, you know, maybe have CPTs already configured. So your team member CPT with some dummy data simply for your queries because what I found is you know you’re building a page and let’s say you’re doing FAQs and every client that you work with needs FAQs so you have an FAQs CPT already created with three fake FAQs in it that way when you get to building the FAQ section you can turn on the query loop and there’s actually something there to query you don’t have to pause your workflow, go over here, create a CPT, add dummy data, then come back to your workflow and finish building out the loop.

0:58:33
The dummy data is already in the CPT, so you can just query it and you don’t, you’re creating a more efficient workflow that way. So yes, I would do that sort of thing. But as far as actually building out a template or creating a default section layout for that kind of stuff, I don’t think I would go that far. I would recommend using frames, or I would recommend just building everything from scratch and giving everybody kind of a different look, a different design, style, whatever.

0:59:03
You want a little bit of uniqueness in the sites that you build. Kunal says, your videos are always helpful. Page building 101 course is great. Thank you very much. I appreciate it. I hastily bought Oxygen at the end of the year last year. I’m considering moving to Bricks. Do you think it’s worth the switch? I mean, for me, it’s worth the switch.

0:59:25
That’s why I switched. So from my perspective, yes, it’s worth the switch. There are a couple things that oxygen does better than bricks. I made a list. I deleted the list since I was actually going to make a video on the list but then I decided you know I won’t get into it too much but it was like alright if I don’t want to go that route but it was like 30 items long it was like it was going to be you know it was basically why I switched to Bricks, the advantages of Bricks over Oxygen. It was like 30 items long, and they weren’t small items in particular.

1:00:10
They were fairly significant items. And so, you know, to me it’s objectively a better builder, but if you like Oxygen, I don’t knock anybody for using Oxygen, and it’s a professional page builder. And so you can get a professional outcome with Oxygen. You can follow a professional workflow. There is a huge downside of you know only one person being able to work on the website at a time. That’s you know for a professional workflow that is a big disadvantage. So but we’ve had a few hiccups with Bricks you know if I’m just being honest we’ve had a few hiccups with Bricks with multi-user editing for sure. I don’t know if it’s directly related to multi-user editing or related to something else, but we’ve had some, you know, some disappearing classes, disappearing styles. Um, so it’s not like flawless, but we’ve also had a lot of situations where multiple people were working on the website at the exact same time and everything worked flawlessly.

1:01:07
So we haven’t really been able to pin it down as, as to what happened. But I will say that anytime in oxygen, if more than one person is working on the site, you’re pretty much guaranteed breakage, guaranteed shit’s gonna go wrong. Yeah, I just think that Bricks has way more advantages than Oxygen. And the workflow change, it’s really just a where are the buttons. Where are the buttons in Bricks versus where are the buttons in Oxygen?

1:01:32
They all have more or less the same power, the same features. But then you get advantages in things like query. Like query loops is the thing I go to a lot, right? The query loop in Bricks is, I don’t know how many times better. Ten times better, 30 times better, 50 times, pick your number, whatever. But it’s way better, it’s way better. Just in the fact that it can query terms, taxonomies, users, right?

1:02:04
It’s not just stock querying posts. The fact that the loop is on an item and not in a container. So it’s just a lot, a lot, a lot of advantages. And they go beyond that, how it handles dynamic data. Oxygen, for example, this still is related to the query loop. Querying data in a repeater in oxygen is not flawless. And there’s been many times where I moved. If you have to remove something from a repeater or add something to a repeater and you drag and drop those things, I’ve had repeaters completely break.

1:02:39
I’ve had repeaters break to an unfixable degree for no apparent reason whatsoever. And literally I could not fix it. I had to build the entire component over again. You gotta start with a new repeater, add things to it from the beginning, and then go from there, because I could not fix whatever happened to the last repeater. That happened to me multiple times in Oxygen.

1:03:03
There’s been templates that I’ve opened in Oxygen where I get a red error box, and it’s no idea why I’m getting, why the template’s not functioning, why it’s broken. There’s no indication of why the template is broken. I’ve had zero issues in Bricks with templates, zero issues with loops, zero issues with a lot of things that I did have issues in Oxygen with. So, you know, it’s just been a better experience. You could go to something like, I’m just rattling shit off the top of my head.

1:03:32
You can go to something like being able to edit class names. Do you know how absolutely critical that is to be able to edit class names? Some people will say it’s not critical. Well, you can just delete it in Oxygen and then recreate the class. Man, well, there’s a lot of styles attached to that class. You better be ready to put all those styles back. You know, you make a mistake naming a class in Oxygen, which, I mean, I’m flying through with BIM.

1:03:54
I’m trying to work as fast as I possibly can. Typo in a class? Now I gotta go delete it in Oxygen and then re-add it, whatever, it’s another pause in the workflow. Whereas in Bricks, I can just bam, fix it. And you best, better hope you catch that mistake at the beginning. Because if you don’t catch that mistake in the beginning, you add a bunch of styles to that class, you add that class in a bunch of different places, then you realize, oh, that’s not the best name for that class.

1:04:22
It may not even be a typo situation. It’s just, I was being a dummy and I named it something that’s just not a great name and I want to change it now. Well, in Oxygen, you’re stuck. You got to delete it or you can get an add-on, right? And you can say, all right, let’s make a new class, then copy the styles from that class to that class. But that class still isn’t on all these other elements that you added it to. So this is a big problem.

1:04:47
Whereas in Bricks, this is no problem whatsoever. You simply hit the pencil change the name hit ok and move on with your life It’s all fixed for you. So that’s you know a major. I don’t even see that as a small thing That’s a major major difference And it can save your ass and a lot of really important situations So it’s just stuff like that and it adds up and like I said, I got to like 30 different things And by the time I get to 30 different things, I’m like, this isn’t even a decision anymore. And there’s people that don’t believe me, you know, and they’ll use Bricks for five minutes and be like, oh, the buttons aren’t in the same place. And then they self-destruct and, you know, they’re having a temper tantrum and all this stuff.

1:05:26
And like Bricks isn’t better than Oxygen. Okay, whatever, whatever. You gave it five minutes and, you know, the flex button looked different and was in a different spot and now you’re malfunctioning, short circuiting, you know, how much weight should should their opinion have? Like we, I’ve done extensive work in oxygen. And I’ve done extensive work in bricks. This isn’t first impression versus first impression. This is multiple sites and projects, multiple sites and projects over here. That’s where the opinion is coming from.

1:05:59
Let’s see, can you tell how to get started with BRICS? Page building 101 will get you started with BRICS. Joel says, oh, this BRICS or oxygen question, it keeps, oh no, that was the same question. How did my check get scrolled up? Or are you guys asking the same questions twice? I don’t know. I already answered the question about Pine Grow. What about child themes with bricks? I still like the idea and always create one, although there are some shortcomings with CSS specificity.

1:06:38
I don’t really, I install the child theme because it doesn’t hurt, but I almost never use the child theme. I have frames and haven’t yet adopted. Primary blocker for me is not understanding really how to work with the imported classes. Seems like it could get messy if not done right. Tips. This is a big question. I’m gonna do a whole video on this. It’s a big question.

1:07:05
You can’t go wrong styling the classes that you are given. Okay, so frames gives you BIM classes on every frame, every element, everything is BIMified, okay? If you just style those classes, now, the only situation, and I explained this in the walkthrough video, in the overview video. If you want, let’s say you’re doing the background color for this, let’s say I add a section, right? A section component is like the main frames component.

1:07:34
There’s sections, there’s grids, and there’s individual components. So you add a section. Let’s say you want to change the background color of that section. It’s just actually this is perfect for page building 101. The next lesson in page building 101 covers dry development with classes versus global element styling versus utility classes versus IDs. Because this is the biggest thing that people get hung up on. So this is not a question related to frames. If you really, really boil this down, this is not a question related to frames. This is a question related to the fundamentals of do I style at the ID?

1:08:14
Do I style with a utility class? Do I style with a BEM class? Do I style with a universal selector? Do I style with a global element? There’s a lot of ways, there’s a lot of options. What did I say 25 minutes ago? Rewind the tape. I said, there’s five different paths to get to the outcome that you want. And it’s your job to weigh the pros and cons and make the best decision possible.

1:08:36
That’s why we’re professionals, right? Okay, so you wanna change the background color. Background color is a situation where that should probably not be tied to a class of a BIM class, a custom class. So why? Because let’s say it’s a services section. So on this page, services comes third. It’s the third section on the page. And the section above it is white and the section below it is white.

1:09:04
So on this page, I can give it a background color and it’s gonna look great in the mix of this page. But that doesn’t mean if I have to use that section on another page in a different spot that it’s going to look great there. It might bump up then against another section with the same background color and then we have a problem. So I’m not going to assign that background color to that custom class. If I’m doing background color, that is a legit situation where you would use ID level styling. Because I want the background color to be this way on this particular section. Now it still better be tokenized. I explained this in the video. The color you choose still better be tokenized, but you can use that token at the ID level or what’s even more efficient is you slap a utility class on there.

1:09:47
That is a perfect use case for a utility class. BG, base, ultra light, bam, done, move on with your life. Now inside of that section, you have cards. Those cards better be BEM, you better put all your styling on the BEM classes. And you can use the classes that you were given inside a frame. It already gives you the BEM class, you just style them. Now all of your cards automatically look the same. Now some people will say, but I want to use that card again on the website somewhere else and I want it to look different in those situations versus this situation. There are ways to handle that.

1:10:25
There’s actually three different ways to handle that. That’s why I have to do a video to demonstrate. But that’s also few and far between. You know, there are different ways to get around that without even dealing with, you know, the class styling issue. So it needs a video and I’m going to show a video. But for the most part, you can’t really go wrong. 80 to 90% of the use cases, you’re just styling the classes that you were given and then you’re done. You move on with your life. So it’s actually very easy. There’s only some outlier situations that we need to discuss. The vast majority of your workflow, you could just style the classes that you were already given and it’s gonna be just fine.

1:11:01
Now some people are like, well I wanna rename all the classes because I don’t want it to have the FR, I don’t want my clients to know I’m using frames, I don’t want it to say alpha or whatever. That’s just, in my estimation, it’s just nitpicking. Like 100%, I build a client site with frames, I’m not changing the classes. That just makes my workflow slower, why? First of all, do you think a client is ever gonna be like, so I was browsing your DOM and it was, you know, what’s FR section alpha?

1:11:32
And I just tell them, I’ll be like, well, we use a tool that ensures consistency across your website, that speeds up our workflow, speeds up our wireframing process, makes sure that we get to a really great outcome on every single project that we do, and because of that, we actually charge you less than we otherwise would, and da-da-da-da-da-da-da-da, right? Doesn’t matter, it’s not an issue in the slightest.

1:11:59
So that’s just a developer being like, I want them to think I built the whole thing myself. Well, you didn’t, okay? So like, that’s number one. So you don’t have to hide this stuff from anybody. It’s not like, there’s nothing wrong with it. It’s like hiding the fact that you use bricks. Your client can always say, why didn’t you code this by hand? Because you didn’t want to pay twice as much, Jack, right?

1:12:21
So there’s always a good reason. You just tell the truth, it’s fine. All right, so let’s see all right good there’s some good discussions in the chat that’s what people answering questions in the chat all right we did the child theme thing now I did talk to Thomas on the frames thing you know we talked about a workflow and if Thomas doesn’t put it in, then we’ll probably put it in. Ideally, here’s what would happen. Ideally, now this is hard, it’s tough.

1:12:58
I still think there’s a way to do it. But ideally, when you’re up there in, okay, let me just show you. Let me go, let’s screenshot, just so everybody knows. We don’t have to sit here and like wonder. We can just look at it. All right, so add new, okay. We’ll just do this frames publish Here’s what I would love the workflow to look like All right. So actually I’m not even gonna add a section So I’m just gonna go up to templates remote templates and we’re gonna refresh and we’re gonna see, you know What the latest is, okay. So here’s an example testimonial section Lima. I just added this frame recently So we’re gonna go ahead and import that and BAM. There you go. So it’s like, Hey, I need a testimonial section that is basically a wall of call-outs and then it’s got our average ratings and then I can start to do whatever I want to.

1:13:50
And here’s an example of FR testimonial section. Lima is a class on testimonial section Lima and you see everything is labeled in here. So you know what everything is. Okay. And really what you would be doing we could just do a quick little tutorial on testimonial section Lima first thing I would do first thing I would do let’s collapse all of these open this open this I would delete every single one of these and I would leave this one right here turn that into a query loop and I would just query all of these onto the page that would be step number one okay step number two because that’s that’s the way to make this, you don’t wanna be writing all these things manually and managing all this, are you kidding?

1:14:32
Are you crazy? Are you crazy? Get a CPT for your testimonials, create a special field that says call out, put the call out text in that field, put the rest of the testimony on your other field, and then you could categorize all your testimonials, and then you’re free to query these onto the page Almost every frame that does that behaves like this is query loop compatible, right? So you should be using query loops everywhere. We’re gonna talk about that in page building 101 You don’t want to live the life of manual Testimonial management on a website. That’s that is not the life you want to live Okay back to this class right here. Do I style the class to add my background color? No. Okay. We just talked about that.

1:15:16
This is a one-off situation. So BG base ultra light and I’m moving on with my life. Now on this particular site, I’m using all grays and this is BG base ultra light and the card already. And so what I can do here, let’s say I want to invert this. Okay. So now I’m going here and I go to testimonial card Lima and I’m like, I, now that I made this the background color of BG base ultralight I can come in and I can make this a background color of white so I’m gonna go to my shades or I can do Any of these variations or I can just write white in the box, right? Whatever I want to do and now all of the cards. Why do they all turn white?

1:15:57
Well, they all turn white because I styled the class, right? So there it is, FRTestimonialCardLima, white color, now they’re all white and we’re good to go. Then you could create potentially a modifier, right? So you can have FRTestimonial, you would just follow the same thing, TestimonialCardLima and then double dash, you could create a dark version of TestimonialCardLima with a basic BIM modifier class. And then if I am using this testimonial section where the background color has to be white, I can then make sure I’m using the dark modified version of this card.

1:16:40
So with one modifier class, I can actually create two different styles of this card. And notice I’m not renaming all of the classes. Some people do that and if I’m not gonna say, like I’m not gonna put you in jail for doing that, it’s your decision, it just slows down the workflow to have to rename all, I just leave them exactly as they are, it’s perfectly fine. Because I can also use those modifiers to create multiple different variations of them, no problem whatsoever, that’s one of the techniques is using a modifier class.

1:17:13
But you see how quickly this stuff, you know, helps you build out the page. So I’ll go BG, base, ultra light again. You could even do ultra dark. Of course then you have to make adjustments to your card, maybe have another different card style. That’s up to you. It’s all design decisions, right? And you can never escape these kinds of design decisions regardless. But the fact that you’re starting with a blank slate, more or less, from your design standpoint, means you’re only working forwards. You’re never working backwards. Like with other design sets, you gotta unstyle everything, and then you can start to add your own styles.

1:17:52
That’s a big workflow killer, especially since they don’t even style things appropriately with best practices. So you’ve got ID styling going on, or they’re littered with utility classes everywhere, a bunch of other problems, the DOM’s a nightmare, these things. Look at this, I mean, the fact that this is an unordered list and everything in here is a list item already done for you.

1:18:15
So it’s just that kind of stuff. So when you ask like, well, do you have sample testimonials? No, I mean, I can add this in seconds. And so I don’t need all that stuff pre-done for me. It is pre-done for me in a thing called frames. But so that was to catch everybody up on what it looks like to add a frame. Now let’s talk about workflow. Here’s what I would like to have happen. When I click I’ve already added and here’s the other good thing about frames. I just styled this I styled this section kind of right. The minute that I go add it to another page it’s gonna look like this when I even if I import it again from the remote template library Because all the classes are the same and the way those classes are styled are in the database now So it’s gonna look exactly the same. I don’t have to save it to my own templates area Though I can save Variations of it to my own templates area little trick little tip, okay But even if I go back to remote templates and add a new one, it’s not gonna add the unstyled one.

1:19:13
Now, some people are like, but I want it to add the unstyled one because I want to start over and do it completely different than I did it on this other page. And there’s very limited use cases where that would actually be like needed, but there are a few use cases where you would need that. So when I click this button, insert template, what I would like is a context menu to come up, like a modal, like a pop-up, and it says, you’ve already imported this frame.

1:19:43
Do you want to import with the same classes, or do you want to import with unique classes? And then what would happen is, if I said, unique classes, please, it would bring in FR Testimonial Section Lima 01, or Lima 02, or some serialized number, or whatever. Same way that Bricks generates, you know, automatic classes and stuff like that it would just generate a new version it would have all the base level styling but it would generate a new fresh version of the frame that you could then start styling from scratch so a lot of times you’re going to want to import the one that was already styled but in the cases where you want a fresh one there are legitimate cases for that so what do we need to do?

1:20:25
We need to give the user the option. Do you want it styled the way you’ve already styled it? Or do you want a clean one? And if we give the user the option, then everybody is happy, right? I would love for Bricks to build that in. And I talked to Thomas about it, and he seemed open to it, but I have no idea where, I don’t even know if he officially added it to his list.

1:20:45
I don’t know, maybe he’s blowing smoke up my ass. No way to know. So if it doesn’t show up soon, you know, we may get a little crafty go back in the kitchen and cook something up and Make it happen, but that’s the kind of stuff, you know that we that we think about and consider All right. Let me go back to camera. Let’s get our list back up here Hopefully that answered some of that Do you have knowledge on all the files and folders in WP function? Will it be important to know about this to know about how WP works? What is your advice?

1:21:15
I think I would need a little more context on that question. Man, we got good viewership. I just checked on the, I don’t usually look at the viewer numbers, but I just peaked, I peaked and it looks like we’re doing, we’re doing pretty good on this. Okay. Can you explain conscious wrap? I’m a little confused. Is there subconscious rap? Conscious rap is, so there’s radio rap, and then there’s conscious rap, right?

1:21:47
So the big difference between the rap you’re gonna hear on the radio and like Nas, Talib Kweli, Lupe Fiasco, like that kind of rap, right? And so the lyrics, the lyricism is at a higher level. The lyrics have a lot more meaning. There’s a lot of double entendres. There’s a lot of really unique and fun things to look for within the lyricism, where radio rap is just like, it rhymed and I said car in a great way and I said something about a chain and some expletive for a woman.

1:22:24
And that’s radio rap, right? And so that’s not, I’m not really interested in that. So I’m more interested in rap at that higher level. And, you know, so I could create a whole playlist, artists and all of that, but there’s a clear distinction, you know? Go listen to, is that Bev? Bev calling me? Bev called me during the page building 101 episode that you’re about to see, the next one that gets published.

1:22:58
Had a little conversation with Bev in that episode. Yeah, we were building some cards and Bev saw them on the development site. She gave me a call and that we had to make some changes to the cards. That’s in the next lesson. So anyway, yeah, you know clear distinctions between Specific types, but then you got to be you got to be Understanding of the crossover as well, you know we could go very deep if we had a couple drinks we get very deep in the philosophy of Hip-hop and lyricism and all of this But there are crossover artists, you know, like I Jay Z is one of my favorite artists. Jay-Z songs play on the radio, and he’s made radio songs and radio hits, but he’s also made some of the best tracks that have ever been produced in hip-hop, right?

1:23:49
And like, from a lyricism standpoint, from a meaning standpoint, you know, that kind of thing. So there are crossover artists as well, but there are clear distinctions between pure radio artists and then real actual, you know, conscious hip-hop lyricists. And then in conscious rap, of course, you know, there’s a lot of talk generally about social issues and so on and so forth. Here’s a really great example. Any of Lupe Fiasco’s work is a perfect example. I have Lupe in like my top three all time. And you really have to understand when you go through his albums that there is a an entire underlying fictional slash alignment with real-world narrative that he’s created with characters and you can follow the entire story of Michael history through the entire series of albums almost and you you’re not going to find that level of thought and Creativity and and anything else in any sort of like nonsense radio rap, okay, so there’s clear distinctions And then you know like I said with social issues. There’s a very specific video right go watch Lupe fiasco Bitch bad right and so it’s like it’s got this expletive in it. Why why does it have that well because he’s explaining the expletive And it’s effect on children and its effect on where they get that from, like where that actually comes from.

1:25:16
Very good video goes along with it. I would watch the video as well. That’s the kind of stuff that interests me, not radio pop rap bullshit. Okay, let’s see. Can the functions clamp and calc completely replace using breakpoints for different device screen sizes. Can the functions clamp and calc completely replace using breakpoints for different device screen sizes? Yes.

1:25:44
Yes. It depends on what you’re using it for, obviously. Typography, yes. Spacing, yes. There are certain situations where maybe the size of an object, like width, height, something like that. I still, you know, off the top of my head, I don’t think I’ve run into a situation where I used a clamp function and then also had to do something at a break point. I’m trying to think if that’s ever happened.

1:26:17
I’m not saying it could never happen, but I’m just, I’m really having trouble coming up with an example of where that’s happened in the past. Like the usefulness of clamp functions is it should not be understated. How is project Gutenberg 2.5 going? 2.5 is coming along absolutely fantastic. It is 80% done. We are currently migrating a very big new feature set in that’s this week. That’s the last 20% of 2.5 and as soon as that’s in and gets tested, I think we’ll be confident this will be a beta release because, but I’m going to need people. I even thought about doing a bug bounty perhaps with this cause I want, I’ve noticed in the past, you know, you release a beta.

1:27:07
This is always with, with any plugin tool, whatever. Some people are just terrified of betas. And they’re like, I’m not gonna use it until somebody else uses it, and it gets into RC or anything else. But it’s like, but we need you to use it. We can’t figure out if there’s anything wrong with it until you use it. So, I’m not suggesting that you use it on a client site, obviously, but I would love for people to go in and put it on their local install and play with the new features and the new output and see if they can break it and things like that.

1:27:38
So if we have to pay people to do that with a bug bounty, we’ll do that. We just, we need that to happen. But there’s been fundamental underlying infrastructure changes to 2.5, mostly related to the color system and how the color system outputs variables and the possibility that this gives us going forward. So that needs to all be tested for sure. Then there’s a lot of new user functionality stuff in 2.5. Quality of life category, that’s gonna need to be tested.

1:28:11
So it’s gonna be a beta, and we’re gonna need people to test it, but it’s a very exciting beta. And it got a small little UI refresh because we obviously got the new branding done for Automatic CSS, and we actually have a color scheme now. I started with black and white, and now we’re actually introducing some color into the automatic CSS ecosystem. And so that’s been put into the dashboard a little bit. It’s not any major UX overhaul. Everything is still in the same place.

1:28:41
It’s just slightly colorified now. So that’s good. It just feels a bit fresher, and it feels like 2.5 is a really good step forward. I’m planning a full redesign for 3.0, but for now this little small refresh should get us from 2.5 to 3.0 just fine. Are Digital Ambition and Digital Gravy still active businesses? What exactly do they do?

1:29:07
Digital Ambition was never a business, it was just a brand, and it was a brand that was for a different purpose before I get started getting into all of this tangentially related but not not the same and What I initially did is you know I was just like well that brand already exists And I’m not using it for that thing anymore that I was using it for and it’s the name Digital ambition still makes sense in the context of this new content and new direction. So I’ll just use it, because it’s there, sitting there, I have a domain for it, and I have a YouTube channel for it already.

1:29:44
So let’s just rock and roll with it, and I did. But then I realized, when people mention me online, in Facebook groups, for example. So somebody’s like, I’m at the Bricks Forum, they have a question. Somebody’s like, oh, go to Kevin Geary’s channel, watch this video. They never really said, go to Digital Ambition and watch this video.

1:30:05
And then so people would go, they’d go type in Kevin Geary, but then I’m not there under Kevin Geary, I’m there under Digital Ambition. I think there was a little confusion at play there. And then I wasn’t really doing anything with the Digital Ambition website, it was just there. Because I felt like, well, you know, I don’t wanna go 100% into this brand because it was just kind of a placeholder brand, so that’s when I was like everything’s getting redone. We’re going gary.co We’re going to build a new website for it We’re going to make everything cohesive the inner circle is going to live under that and now you see I’m like motivated to actually write Articles for gary.co we built out the whole library so all of the videos are there and you have the inner circle videos You have all the free videos on YouTube everything gets mapped over. We’ve done transcripts for everything So now that domain has actually come alive and now this can can actually be a cohesive project where you know It started like as a placeholder thing and we had to migrate away from that placeholder digital gravy is my company Digital gravy is my agency digital gravy owns gary.co Digital gravy owns automatic CSS and frames and so you know that is that’s my actual company.

1:31:15
Okay. Where did, where did the name Digital Gravy come from? How do you feel about analog gravy, chicken or beef? Digital Gravy, go to, I mean, it’s very like, here, let’s see, let me see if I can pull this up. So, one is, you know, like with anything, I looked up 700 other names that I liked. Let me type this. I know you guys can’t see the screen right now. You’ll see it in just a second. Well, that’s not what I want.

1:31:54
Okay, scroll down. Okay. Okay. So, I, you know, had a bunch of different names. I sat down and did a whole naming thing, right? And then it’s like, oh, love that name. Oh, no domains for it. Love that name. Oh, no, no, no domains. Love that name.

1:32:14
Oh, it’s already in use. Love that, you know, the classic, the classic process of trying to, trying to come up with a name for something in the modern day and age. And finding a domain that doesn’t have a freaking squatter on it who wants $20,000 for that awesome name that you came up with, but they came up with it first and now you’re gonna be extorted for your money. That kind of situation.

1:32:36
So I was just playing with different concepts and here, I’ll just, here, screen share right here. You can look it up, right? Go to a little Urban Dictionary action. Gravy is not literal gravy, right? So there’s gravy in terms of like, it’s all good. It’s awesome. It’s okay. There’s gravy in terms of money. Right. So I’m making money for businesses through my agents. I, that’s what I do. I help your business make more money. And then it’s just kind of all ties into, like, you know, it’s all good. It’s all gravy help you make more great, that kind of thing. But, but it’s, you know, we’re digital.

1:33:08
And so it’s, it doesn’t really have any, like if you wanted some sort of deep philosophical reason for that. It works and a domain was available for it. Naming doesn’t matter. And we go back to, here’s two things. This kind of shocks people. But if you think about it and you study brands and you study marketing, you come to realize, oh, it actually doesn’t matter. Your name doesn’t matter and your logo doesn’t matter.

1:33:38
Neither of those matter whatsoever. Now, I will say this, if you have a terrible logo, like very, it’s obviously unprofessional, some Bev in accounting type shit, some stuff that was made in Canva or whatever, you got that kind of logo, it’s detrimental to your brand because first impressions matter and you’re giving off the impression of a lack of professionalism. The brand just looks cheap, it looks chintzy.

1:34:06
So the logo does matter in that way. But if you have a legit, like if you just have a clean, professionally designed logo or even no logo at all, no effect whatsoever, you’re fine. You can build a international, billion dollar company. Doesn’t matter what your logo looks like. Doesn’t matter what your name is either. So as long as your name doesn’t offend people, as long as your name isn’t stupid, like or confusing or hard to spell or whatever.

1:34:39
I mean shit, it can even be hard to spell I guess. But what is a Google? What is a Starbuck? What is a this and that? I mean I can list off a gazillion, well just go down the entire Fortune 500 list and look at the names of the companies. Naming obviously doesn’t matter. If you go down the Fortune 500, just look at the names of companies, obviously it doesn’t matter, okay?

1:35:01
And then look at their logos, and then look at how they rebrand their logos every five years, and you realize, oh, like, as genius as Apple is, perfect example, how many billions is Apple worth right I’m gonna name my company what’s the genius name you’ve come up with Steve Apple what’s that mean Steve what’s that have to do with computers Steve I mean you could be grill you could grill Steve all day long on why are we using Apple as the name okay and you know how many people would have been like Steve that’s dumb but here it is here it is so don’t tell me names matter, right?

1:35:41
Here it is. Starts with an A. What, because it comes first in the phone book? Is that still a thing? You know, so no, that doesn’t matter. And then what’s your logo going to be? Well, of course, it’s going to be an apple. A little bite taken out of it. Okay? You actually could have made that in Canva, if we’re being honest, right? So you could, it doesn’t have to be anything fancy, it doesn’t have to be anything, you know, ingenious, but it works, okay?

1:36:08
So, you know, just go down the list. Find me a company where you can point and say, you know why that company is successful? It’s name, that’s why, that’s why it’s successful. Or, you know why? It’s logo. I mean, that’s just a killer logo born to be a five billion dollar company Never happened a logo has never made a company successful and a name has never made a company successful Not any that I know or can point to as an example The brand is ultimately made by what the company does and how it behaves in the culture that it creates Then people are like Apple means something then people are like that little logo means something.

1:36:50
It’s all the other stuff that give those things meaning. And people, they spend way too much time and effort on names and logos. And businesses, we see this all the time, this is where make the logo bigger came from. Small businesses love their logo to death. Guys, let me show you this. Let me go to, so I’m not, I don’t think I’m still screen sharing. Let’s just go there.

1:37:15
Here you go. Guys, that is the smallest representation of a logo on the web. I don’t think, if it got any smaller, it may not be, you know, it may not resolve to the human eye. If Apple doesn’t care enough to make their logo gigantic, then you probably shouldn’t either. You ain’t that important, Jack. Your logo ain’t that good Jack, okay? It does not matter. None of this shit, everything else on the website, this is what makes Apple, right here.

1:37:47
Everything that you’re looking at here makes Apple. This does not make Apple. The name Apple does not make Apple. None of that stuff matters. People spend way too much time and energy focused on that kind of stuff. All right. Let’s keep going. Reuben, good to see you here. All right.

1:38:08
Will AI, OK, more AI questions. Will AI also become a part of page builders? I mean, probably. We already see it. You know, right now all it does pretty much is like, I guess, write CSS for you, maybe write some content for you, which you don’t want it to be writing content for you, trust me. You do not want it to be writing content for you. But yeah, I assume that at some point it will, but here’s the thing.

1:38:35
You’re going to have to know how to talk to it. Number one, or you’re going to get bad outcomes. We already have a way to write code for you, right? It’s Emmet. Go go look at something like Emmet. Emmet writes code for you. It just is a series of short codes basically that expand. It’s basically a fancy text expander. But you already have Emmet writing code for you. And then page builders already write CSS for you. So, you know, what would it be like, what would it do? I can add a section to a page like that by clicking a button. So I would I say, hey AI write me five sections of this page and there’s a hero section, a testimonial section, of this section, of that section, but then like how do I describe what I want it to look like? And like by the time I figure out how to write detailed instructions to get, I could have just got the output.

1:39:35
Especially if I’m using frames, I look through a library, click an ad, look through a library, click an ad, way easier than like, how do I talk to this AI to get it to know, so my testimonial section doesn’t have nine fingers. It’s a legitimate problem with AI, is you have to know how to talk to it to get it to produce the outcome that you need. In page building land, you probably could have done a lot of that faster instead of just trying to talk to the builder.

1:40:04
All right. As a person considering BRICS and who has watched all of your PB101 videos, what is the high level difference between ACSS and Advanced Themer? I mean, in all fairness, I haven’t used Advanced Themer. Advanced Themer, I have respect for the developer of advanced themer. The typography management and the color management is already handled by automatic CSS. I wouldn’t see a need for that side of advanced themer.

1:40:39
The other side of advanced themer is Bricks quality of life improvements. From a practical standpoint, I see usefulness in some of them. I see potential usefulness in others, but it’s like, it’s almost, some of them are to the point where it’s like, I have to remember that it’s there and use it and make it, like, build it into my workflow. But the problem that it’s solving is not such a pressing problem that I actually care to do that.

1:41:07
It’s like, I can already just get to the thing that I need faster than introducing some new workflow tweak. But I also can’t just give it a review because I haven’t sat down and actually used it. I know that ACSS and Advanced Themer can potentially be used together. It’s not like, you know, Advanced Themer is a replacement of any kind for, it doesn’t do 80% of what Automatic CSS does. So, you know, it’s not like a replacement situation.

1:41:37
It would just be a bolt-on situation of like, is this worth bolting on? And I just can’t honestly answer the question because I haven’t bolted it on and then done stuff with it to see what I really think about it. I can just look at what’s available and, you know, make half second opinions about what it may or may not add in terms of value, which that’s not of real value to you.

1:42:04
So I should probably just move on. What are the benefits of using Bricks over a custom PHP theme to persuade a client that is you? Okay, I think you’re reframing a question from earlier. The benefits of using Bricks over a custom PHP theme to persuade a client that using a page builder is fine. Well, I mean, if you’re going to build yourself a custom theme, but you still want to be able to build within that theme to maybe change layouts and add functionality as the client requests.

1:42:35
You’re going to need a blocks system most likely, right? So now you’re into a generate press type situation probably, or you’re building custom blocks. And it just feels like a lot of work and a lot of limitation. And it’s like why? bricks gives you a clean slate to build from clean professional level output and no limitations Why would that not be my constant starting point? Right like why go through all of the work to create a custom theme?

1:43:04
The only time I would want to create a custom theme is when I want to use custom blocks perhaps. And so you feel like, all right, well, if I’m gonna use custom blocks, I might as well just pop in a custom theme there and do some things the way that I want to. And maybe this is gonna be your starting point for every single website that you build. Maybe you’re in a niche, they all need to kind of be laid out the same way.

1:43:25
I don’t know, there could be a lot of reasons, right? But for the work that I do, I want a clean starting point with professional workflow, professional level output, no limitations, and I want to rock and roll from that point forward. And that’s it, very easy. Very valuable thoughts here, thank you Stripe Goat. I kind of love frames idea, great way to save time on the start of a project, but don’t really dig ACSS.

1:43:53
Will there be frames version without the need for ACSS? No, there will not be a frames version without a CSS What we have to dig into is why you may not like the ACSS workflow and the What because one thing that I do see is people try it for five minutes and they don’t understand it right off the bat Because they’ve never used a maybe they’ve never used a class first workflow at all Maybe they’ve never used a utility framework at all Maybe they’ve never used a variable at all and so if you’ve never used these things There’s going to be a little bit of a learning curve now. We produce tons and tons of content teaching all of these things So for example if you did page building 101 and you’ll see it happen It’s very frustrating and this should show you the value of automatic CSS by default and if you’re using a legitimate Workflow like you are tokenizing your styling you are using utility classes in the right places You are using BEM CSS BEM classes and styling organization, right you’re following scalability and maintainability practices You see by default the need for something like automatic CSS.

1:45:14
You see why I created it. I didn’t create it as a concept of like, well this might be a good idea. I created it because following a professional workflow, if you don’t have these utilities at your disposal already, requires extra work and preparation and management. Because the outcome that you achieve is tremendously scalable and maintainable and organized and follows best practices and everything else. So as I’m creating page building 101 it’s very frustrating for me because I’m in a completely blank bricks install with no automatic CSS available. Therefore every token has to be created from scratch, every class, every utility has to be created from scratch.

1:46:05
Every clamp function has to have a decision made about it. What’s the min, what’s the max? What’s the min max related to this clamp function over here? So if I need H1 versus H2 versus H3, H4, H5, H6, that’s a lot of freaking decisions that have to be made. Now that’s just for my typography. Then I go into my spacing. You have many decisions have to be made from small gap, medium gap, large gap, extra large gap, section padding, inline padding, this and that, and it’s just on and on and on, decisions, decisions, decisions, decisions. Clamp function after clamp function after clamp function, fallback after fallback after fallback. Or I can click a button, install automatic CSS, and it’s all done. And I can just start building and then Somebody should rightfully say But Kevin I don’t want the spacing values that automatic CSS gives me I don’t want the typography values that a CSS gives me. I want to be able to set my own values It’s why we gave you a UI dashboard You just hop over to the UI dashboard And you set all your values exactly the way you want to me hit save and then you keep building your site you can even do that after the website is built and it will all work just fine so you take a situation where there are hundreds of decisions that have to be made thousands of utilities at your disposal that don’t have to be created an entire color management system complete with the shades that you need, and you just pop that in.

1:47:39
And it’s all done for you, it’s all managed for you, plus you have accessibility features, you have other quality of life features. It’s extensive, extensive. And so you start to build a website, and I can’t get three inches down the page before I’m like, oh, I need another utility, and it doesn’t exist, and I have to go create it for myself. Or I find myself in a situation where I had a shortcut for that in automatic CSS and it doesn’t exist.

1:48:05
And so you’ll see me, a little bit of frustration. So you’ll see me say, if I had automatic CSS, wouldn’t be quite so much work, right? And you will continue to see that over, oh, grids. I mean, gosh, can we get into grids, responsive grids, and like creating all of this stuff from scratch. You’re gonna see it more, not in the next lesson, but the lesson after. Because the lesson after takes the boxes concept and we’re gonna lay out real pages with just boxes.

1:48:33
And you’re gonna see, it’s like, you gotta create every grid yourself, you gotta do, that’s a lot of work. In automatic CSS, you have a library of all of the common grid structures available to you. Then you have a library of utilities that allow you to manipulate grid structure on the fly if you need to manipulate grid structure on the fly. And so it’s just like the time saved but people will say oh I don’t really like the ACS’s workflow. So what is it though? Do you not like tokenized styling? Do you not like BEM classes? Do you not like utilities? Do you not like all these helpful features? Which part of it do you? So I need some some specifics because you may find I’m not saying that there is never a situation where there’s a legitimate criticism that things could be better.

1:49:21
I look at ACSS every single day of my life and I use it on every single build and there are always times where I go that should probably be better, that should probably be easier, there should probably be this happening, right? Thus we have releases every single month. That’s where these new features come from because I actually use my own tool in a real world agency environment. It was built for us. It was built for agency work. It was built for a professional agency workflow. So and then people will come in and say, hey, that might work for your agency. But here I am in this situation over here. And if they make a bad case, then I don’t include it because we’re not going to include everything we’re not going to make it fluffy okay I don’t want a fluffy tool right with all this fluff and nonsense inside of it but there are people that come along and they make a really really fantastic case for something and then you know what it shows up next month or it shows up the month after that and there it is right there right because we listen to users too if a user can make a good case for something it’s going to show up it’s going to show up in the next month or two.

1:50:25
If it’s a big thing, it’s going to show up. It might not be in the next month, but it’s going to show up at some point. So that’s how we manage it. And you’ll see this in the feedback that people give. I say, don’t use it for five minutes and then make a decision. And don’t use it wrong. You go littering utility. This is not tailwind.

1:50:44
Don’t go littering utility classes everywhere. This is not how it works. There is a workflow to using automatic CSS and if you follow the workflow and bet and which means by default you’re just following best practices of modern web design. That’s all it is. So you’re following page building 101 you can insert a CSS into that workflow because it’s designed for a professional workflow. So if you’re following that workflow and you build one site with it you will have the hang of it after one website. After two websites, you will start to like it. After three websites, you will never want to build a website without it ever again.

1:51:23
I have websites that were built that I still manage before automatic CSS was ever even an idea. And every time I open that website, I absolutely want to jump off a bridge face first. I have nothing at my disposal, no utilities. I did things back then that I don’t even want to talk about anymore. Right. Just atrocities in web design. Things that if you found them, I would be going. These are felony violations. I would be going to prison. I would be going to a rehab facility.

1:51:56
But that was long ago. We’re in a fast moving industry. Things change. We learn fast. Right. And so we’re constantly getting better and we can’t judge ourselves by a site that we did two years ago, three years ago, four years ago, whatever. But the fact stands, I don’t have ACSS on a website, that’s when you realize the immense value that is there because you’re like, I don’t even know where to start. Like I gotta make all these utilities from scratch.

1:52:26
I gotta make all this whole workflow from scratch. It feels daunting, right? Now, if you’ve never used automatic CSS, you just feel like I’m just doing the necessary things to build a website the right way. But once you’ve had it, right, once you’ve had the shortcut, when that shortcut gets taken away from you, you get cranky, real fast, you get cranky. So that’s how you know the value that is there.

1:52:49
So I would say, and then you use frames, oh my God, once you’ve built a couple sites with frames and somebody takes that away from you, you probably wanna quit, honestly. I’m not gonna live in this industry anymore. That’s how it feels. It’s like, damn it, you took my, I was going so fast, so easy, you took it away from me. I want it back. That’s the kind of, that’s the way people really start to feel about this stuff.

1:53:16
Which is why you go into a Facebook group. I don’t ask people to go into Facebook groups and recommend automatic CSS and recommend for all of these recommendation posts that you see. It’s just because people are in a mindset of you got to try this. Because once you get like once you get two sites three sites into it you’re going to realize. And then you’re never going to want to do anything without it again. That’s just how people feel. So they naturally go talk about it. And then people get annoyed, like, I don’t want to see any more ACSS posts. I’m sorry.

1:53:50
I don’t know. It’s just you create a tool that has that much influence on people’s workflow. They’re likely very likely to talk about it. So it’s just kind of a natural or organic thing. We don’t do any, I don’t do, there’s no marketing for automatic CSS or frames. I don’t do advertising, I don’t do any, the only marketing I do is producing content. But I produce content to help people learn best practices. It just so happens that I created tools that assist in best practices.

1:54:22
But I did that for myself, because I have to follow best practices in the site that I’m already building for my agency. It’s just like a natural thing. And by the way, I was teaching best practices before I had any tools. And at the time, I was promoting other people’s tools because they were better than my tools because I didn’t have any tools. I hadn’t created any tools yet. So it’s just been a natural progression. Education and then I see a big need, hey let’s jump in and fill that need for everybody. Okay, that’s successful. Why wouldn’t it be?

1:54:54
Oh, there’s another gigantic need. Oh, let’s fill that need for people. Hey, look, successful. Well, why wouldn’t it be, right? So just it’s identifying really, really critical needs, building something that fills those needs really well. And then it’s like, you know, why wouldn’t it be successful at that point? And then the content creation just helps people understand the best practices and they’re introduced naturally to the tool simply because I use them.

1:55:20
Just like they were introduced to Oxygen in my Oxygen days. Just like they’ve been introduced to WS Form because that’s the form system that I use. Just like they’re introduced to everything else that I use. So it’s not like a, we’re gonna do content marketing to promote automatic CSS and frames. We were doing content before those things even existed. We do content to help people and build up the industry.

1:55:46
It just so happens that we’ve built tools that can really help people and they become aware of those tools through content. All right. Ruben says this is 100% true, but my apologies Ruben. We are two hours into this live stream, and I have no idea what this was in reference to. So if you guys are doing comments like this, please add the, you know, what was the topic at the time of the writing?

1:56:14
Okay, question in short, Bricks. We’re going to do, we need to put Kevin on a clock. Answer can’t be more than 60 seconds. So that’s the thing, you know, I try to give my goal with content, you’ll notice this, right? I’ve watched other content creators when I’m trying to learn something and the worst feeling is you watch their video which is so nice and short and concise. Man, 10 minutes? Wow, that’s so digestible. And I get to the end of the 10 minutes and I’m like, but what about this, but what about that, but what about that, but what about that?

1:56:56
And I have all these unanswered questions that I have to then go off and look for other videos for. So my goal is I don’t want to leave any crumbs, okay? I’m a clean eater, right? I pick up my sandwich, I eat my sandwich. I don’t want to leave crumbs all over my shirt and all over the table. That’s so messy, right? It’s so messy. So I create content. I don’t want to leave any crumbs behind. I want you guys to get the whole sandwich down the hatch. And so that’s, I try to think of what’s the other thing they need to know about this. What’s the other angle to this? What’s the other side of the argument to this? What’s the, you know, and I try to make sure that there’s no crumbs left behind. So that ain’t going to be packaged into 10 minutes.

1:57:37
If you want a 10 minute content creator, then there’s probably plenty of 10 minute content creators on YouTube and you could go watch all their videos, right? You can watch 10 of their videos in the same time you can watch this live stream, that kind of thing. But you’re not gonna have the whole story, right? You’re gonna only have a little snippet of what you need to know. How do components get listed in the bricks elements panel?

1:58:05
That is very very very simple. Where’s my screen share? Here we go. Okay, so I guess you mean like you’re talking accordions, modals, all of that stuff, right? I assume that’s what you’re talking about. We’re gonna go back to here. We’re gonna go to automatic CSS. And we’re gonna go into frames and they’re all right here. You just toggle them on they’re all off by default Okay, you know we don’t like take the bunch of components like here you go in bricks and it’s like I didn’t ask for those So you got to ask for them so you come into frames under automatic CSS you go hey, I want to activate the table of contents and the modal and the trigger and I want to use the accordions. Okay, save. And the next time you go into Bricks, you’re gonna see that they are right there in the panel for you to add to any page. So like add down and there they are. Bam, right there. So it’s as simple as that. You just turn them on and then there they are. Then you can start using them. All right, that was an easy one. There you go. Hey, two-minute answer. You happy?

1:59:14
All right, let’s go down. People talking about AI. Oh man, that was from way earlier. I bet this chat is way longer than I can get to. Okay, guys, I had strep throat three weeks ago, four weeks, maybe four weeks ago now. I’ve still got a little congestion. It’s I don’t know that they got like, you know, COVID and since COVID, everything’s like a super virus. Now it’s like strep throat hanging on for life for like four weeks. And it’s man, I don’t know what’s going on now.

1:59:49
Uh, all right. Could you recommend good resources to learn WP plugin development? A lot of WP job posting seems to be looking for devs rather than designers and custom plugins are a common requirement? Not really, no. I mean you’re going to need to learn PHP, JavaScript, all of that stuff. I mean good luck. Yeah, good luck. Do you ever use a staging environment for your clients? What’s the process use case for this? Yeah, we use a staging site for and in GridPane it’s as simple as like launch staging site and so like a one-click thing. Anytime we’re doing major work on a client’s live website, then we’re gonna do those stages, those changes on staging, and then when those changes are approved, we’re gonna push them live to the live server.

2:00:40
But if it’s small stuff, you know, client needs content updates, client needs to, you know, Bev wants to adjust the border radius to make things more boxy, then, you know, we just do those changes on the live site and it’s done, whatever. But if it’s something major, then we will move it to a staging site. All right.

2:00:58
Sound is distorted. Well, that was from a while ago. So hopefully, there’s no timestamps on these either. I wish there was timestamps. Stripe Goat says it’s fine here, so that’s good. All right, question, what would be the steps to scale a site? I’ll spend 30 more minutes with you guys. We got good viewership. I hate abandoning you, right? We’re like, we got all these people here, we’re giving good value. I don’t want to just abandon the stream. I got to give you, it’s like my kids, 30 minutes and we got to leave, okay? 30 minutes and we got to leave. Question what would the steps be to scale a site that took off and is getting high traffic and demand on its services? I assume you mean like server wise or something like that I don’t know I’m not a server expert so that’s why I use GridPane and that’s why I can reach out to their team and say hey we got this incoming which you know the frames launch I should have done that I made the mistake of not reaching out to their team ahead of time.

2:02:02
I just thought, hey, you know, the ACSS launch went fine on these servers, and so the frames launch should go okay on these servers. No, no, there was so much buzz for frames. I think it was five minutes after announcement. Five minutes after announcement, gone. Website, website, man down, man down. And we were scrambling to pick up the pieces from there. But it all worked out, it’s fine. We moved it to a gigantic server and then got everybody back up and running. And then everybody was was good to go from there. But I should have talked to grid pains team before we did that. And really, it was related to mostly related to easy digital downloads, which my gosh, if you guys want me to rant about a trash can of a system, easy digital downloads is a large trash can that creates large dumpster fires.

2:02:55
And I could go on for days and days and days. And I am so thankful for SureCart. And we are, as soon as possible, going to move everything. We gotta make sure their licensing system gets a little bit more robust and out there. But we will move to SureCart as quickly as we possibly can. Edd is, oh man, I’m just going to skip it. We’re going to move on. Okay. Make the site look better.

2:03:31
Bricks beta 1.8 is out. Everyone leaves Kevin’s live stream. No, they’re not. They’re going to sit here and they’re going to watch me pull up the bricks 1.8 beta Change log and let’s take a look at what is going. Oh god. Did we get to look at this together? I was just on their website. I didn’t see nothing about a bricks 1.8 beta All right. Let’s let’s go to Get bricks now, it’s bricks. I’m just gonna Google bricks change. Well, I never remember the the thing. All right, here we go Rick’s change I’ll pull up it on I’ll pull it up I can’t even talk man are we gonna make it another 30 minutes menu builder full change log all right I’ll pull this up for you guys screen share thank you by the way for putting this in the chat okay so this is fantastic guys breaking news breaking news look at live developments. Okay, so we got a menu builder. We’ve got a mobile menu builder. Fantastic.

2:04:33
Mega menu, update to Google Fonts API. Okay, new visibility setting under style layout, miscellaneous query loop, new is main query archive setting. Okay, good. Pop-up new setting configure okay I don’t really use pop-ups automatically stop playing audio or video inside pop-up that’s fantastic accessibility related default pages and post render post title h1 nav menu list element okay all right what everybody wants to see let’s just be honest everybody wants to see the menu builder right okay let me pull up my Bricks account over here and I will download this bad boy and we will install it and see if we can play around with a little menu builder. It’ll take me one second to get the file and then we will be off to the races. Gotta log in. Okay, put in the chat.

2:05:36
I’ll let you guys decide. Do we want to go off on this tangent. We got 110 people here Not everybody’s a bricks user okay, but so just in the comment now you got to be real fast on this get on the keyboard Do you want to see the new menu builder? Played with or do you want to keep going with Q&A we were here originally to do Q&A I committed to doing Q&A I Don’t know I don’t have to go off into bricks menu land and we’ve done two hours of Q&A, so there’s an argument there. But if you wanna keep doing Q&A, we will. If you wanna look at this Bricks menu builder, we will do that as well.

2:06:12
I will let you guys decide. And of course, I’m gonna lose my, oh my God, there’s just, oh, geez. I just now started scrolling down. I just now started scrolling down. There are a gazillion questions that I have not gotten to yet. Okay, I am so sorry. We’re gonna have to do this again. This is obviously a good thing.

2:06:32
Okay, people are saying yes, yes, yes, yes, yes, yes. Download Bricks, select another. How do I get the beta? By the way, I always feel like, Andrea, if you’re watching, Wajih, one of y’all, if you’re watching, Tobias, if you could throw the beta in Basecamp, that would be good. I always log in I’m like I don’t know where to get the beta from. Is there a special link in the changelog? Let’s go back to the changelog. Bricks it just says go to your account. Yeah see I go to my account it’s not there. It’s not under select another version. Or you could throw instructions in. I never, I just, I don’t know why. Am I the only person that has this problem?

2:07:20
Link in the change log. Yeah, but I’m there. I literally just, okay, here it is. It’s just the other link. There’s two links in the change log. There’s one at the beginning and one in the, in the actual 1.8. Okay, I got it. Got it, got it, got it, got it, got it. All right, let’s go into here. Let’s go into here, themes, add new, upload, okay, drag that, install. Replace active with uploaded, okay, bricks, settings. Yeah, right there. I was already ahead of you. Let’s go down regenerate Well, that’s new Doesn’t it usually list all the files that got regenerated. I guess it doesn’t do that anymore Interesting add new menu Now, I don’t know about you. Are you like me? I don’t know about you, but I just go straight to Let’s just see how intuitive it is, right?

2:08:26
You think I’m going to watch that video? Not yet. Not yet. Not yet. I will, but not yet. I want to just see how intuitive is this right off the bat. Maybe I should be in the header. That’d be probably the better place to be, right? And where’s the templates thing? Okay.

2:08:44
Yeah, I forget how to get to the templates area from here. Let’s go back here. Bricks templates and header. Edit with bricks. So let’s get rid of the chump menu. This will now be officially referred to as the chump menu. All right let’s get rid of that and let’s throw in the new menu element. What is it? What’s it say? Well I’m already stuck. Is that the same name? Is it nav menu? Oh, nav nestable. That seems new. There we go. Nav nestable, we’ve got drop-down links. Show at breakpoints.

2:09:30
We get a width and a height. We can align our items. Let’s just test. Let’s play around here. Okay, nav nestable. I just made it 100%. So what’s the problem? Guess 100% is not working there. I can set my ARIA label. It’s good. Here’s the top level menu, nav item, gap.

2:09:52
I guess so, this may require documentation. It doesn’t populate the actual like a WordPress menu. So this is going to be a kind of a manual menu thing I’m gathering. I haven’t looked at any videos. If he did a teaser, I haven’t looked at anything related to this new menu thing. So there’s a drop-down element. So I can add multiple of those. All right, let’s take a look at how this would work.

2:10:26
So it would be something like main menu, drop down, if you were going to BIMify this. Because I want all my drop downs probably to look the same, right? So we get a little consistency going. Alright so what do I have control of here? Content, okay I can enable mega menu on an individual drop down element, that’s good. So here’s the padding of the content which I assume is the body of the drop-down. So if I put like a 1M yeah we’re gonna have to inspect this. Yeah that’s the body that’s the body of the of the drop-down. Let’s go ahead and give that a background color while we’re here. Probably style background background shade, ultralight. Oh, okay. That’s the parent item. So my first question is, ah here you go, backgrounds, shade, ultralight. There we go. Okay. I want to offset that. So we can toggle on, oh you can toggle on hover, you can toggle on click click or hover okay that’s fantastic background border box shadow typography i’m not seeing a gap function which i would like to see multi-level okay understands see i can’t why did i lose my background color wait a minute did i didn’t undo this did i roll the tape go back did I undo that somehow I don’t think I did Save all right. I want to get a space between this this link. Maybe it’s just a margin I guess it would be on this layout panel That no that clearly doesn’t work I need to affect the body of this and create a gap between these two items and there doesn’t seem to be there’s an icon gap which is good let’s do something like one let’s do like 0.5 M on that so back to M’s rims all that stuff good good situation to use an M right here why do you want to use an M because that gap between this icon and text needs to be different if this text size changes Get it right. So that’s a good a good use case of M where rim would not be Nearly as helpful in that situation just a little you know, well nugget looking at looking at concepts over and over and over again I’m still lost on how I how I would get that without custom CSS I mean, obviously I can run right to the CSS area and I can make this happen.

2:13:17
But with the panels that I’m given, it seems like that should be a very important thing. Now, some people would say, well, Kevin put padding on that parent link. I bet if I have padding, see that? But now I have to do that on all my links and I’m forced to have padding. And what have I said about padding in the past? Preserve your box. Don’t manipulate your box if you don’t have to.

2:13:44
I don’t want that solution. That’s not the, and here’s an example of, I have an outcome I want to achieve. There’s probably five different ways I could get there. Padding is obviously one of them. But the list of cons associated with using padding in this situation is quite extensive in my estimation. So I don’t want to use padding to get there. I want to use a different technique to get there. Ideally, my technique would be this body of this, this actual dropdown panel would have a top margin.

2:14:16
That would be ideal. But I don’t see a way to do that in this panel because here’s my content area, which is the body of this, and I’m only given a padding box. I would like to see a margin box here as well. I Could transform it See, here’s path C and we’re gonna find path D and E and F and G. There’s a lot a lot of them Okay, so I could translate this Y 1m There you go. So I’ve achieved the outcome and maybe I decide a that’s actually a preferred outcome. Maybe since that’s the preferred outcome, they decided don’t give them a margin box. Let’s just give them a transform box because with menus that’s actually a desired outcome. Now I don’t get the feeling necessarily that it may be the desired. Let’s go to the front end. That’s why it’s not a desired outcome right there. I had a theory pop into my mind and I was like kind of not a not a desired outcome. Here’s why look at this See this see this now this would probably happen with margin to see these are the things we have to think about I’m gonna very slowly drag my cursor down and you’re gonna identify the problem right there. I can’t actually get to the panel because of the gap So we need a different way to address that Now in my mind, it’s like, hey, maybe that padding solution wasn’t so bad after all.

2:15:41
See, we weigh pros and cons. So now I go back to adding padding to that top. Now I’d have to do this to all of my top level elements. Otherwise you’re gonna see an issue with our alignment in our menu. Because these items do not have padding and this item has padding. But now I do have a visible gap, but that gap does not collapse my menu. You see this? Okay, these are the things you have to look at and think about. And menus are not a basic thing. Menus are not an easy thing to get right. So just kind of going through this and showing, demonstrating, you know, challenges that we’re going to run into.

2:16:22
And how the builder helps us solve these challenges or gets in our way when solving challenges. Now let’s test a little accessibility right off the bat here. Let’s do a little tab action. So we got tabs and a tab there. Let me add another link. Duplicate, drag that drop down there. So basic accessibility is I need to be able to bypass this drop-down without activating it. So if I tab tab tab tab tab that is correct. If I hit enter I can now access these links and they go away when I leave the drop down. This is very promising, very I’m going backwards and I feel like I guess it’s not well then it disappeared on its own. Alright there’s a little hmm trying to I’m just trying to break it honestly what I’m what I’m doing right now is I’m trying to break it. So we go forwards if I go backwards we don’t lose the menu, then I’m trapped in the menu.

2:17:40
It seems like that probably shouldn’t be the behavior because then I have to manually close it again, but I don’t necessarily, if I’m using a screen reader, I don’t necessarily know that it’s still open, right? So that may be something to look at there, but it’s good that I can skip it in general. It only opens if I want it to open. Now, what if I want that to be a top level link? Now, I tend to not. I say if you’re gonna make a submenu, don’t make this top menu a link.

2:18:14
Don’t do it, don’t do it. Because as a user, you’re always like, I don’t know if that’s a link or not a link, and I wanna click on the dropdown, but I don’t wanna go anywhere, right? So you’re never quite sure. So to me, best practice is, if it’s a dropdown, the link needs to be in the drop-down Don’t make the top level item a link as well But you can also see here because of that we have a problem with our styling So I got to go to our drop-down and I’ve got to make sure that we are styled with the rest of the links So that is my website’s action color and that there we go. Now everything looks nice and consistent. Okay Now I don’t actually want them to be my website’s action color consistent, okay?

2:18:53
Now I don’t actually want them to be my website’s action color or we can do like an action ultra dark situation Now I have to come over here and my question is from here I can I assume I can control all of my links from here Yeah, so you don’t necessarily have to have a BIM class on here to manage this properly Though I still might put one on there. So let’s go to the action palette and let’s do ultra dark on all of those. That’s how I want my menu to be. And this is good. Now what happens when we turn this into mega?

2:19:25
What happens, I don’t use mega menus, okay? I’m not a mega menu kind of person, but let’s see what happens if I turn this into mega. So I enable it and nothing has happened by default. I assume now though I can put like maybe whatever, oh, I can’t delete that. Hmm, that’s undeletable, okay. All right, well, what do we wanna try here? I guess changing widths and stuff would be something, maybe we’ll go a little 50 VW action.

2:19:53
That did absolutely nothing. All right, we’re off to a good start. All right changing the max width does but it goes off the screen. All right well let’s not use a VW let’s do something like well I don’t actually know what else would work here because a hundred percent is going to give you a hundred percent of the parent. Hmm okay what do they want you to do here? That’s my question Let’s see. I don’t have any drop-down mega. I don’t I’m not given any other options Okay Let’s think let’s think about this Technically 25, okay, it doesn’t work without both. No, it doesn’t work at all Why did 50 VW work So 50 works 25 does that’s interesting They didn’t give me any controls to reposition this Okay, this is an area where we’re really gonna have to think about what they want us to do here shouldn’t be Shouldn’t really be that difficult Now can my flex controls work here? There you go But the flex controls are gonna be tough if I can’t, you know, play with my width and stuff.

2:21:17
Now I guess I could give it a raw, just a raw width, but then I’m still, I’m still thinking about how they want me to position this after I do this. So I can do something like 60, well, so it only works in max width, but see, I needed to go from the right to the left. And it seems like they would give you a begin, now again, I could run straight to the CSS code and just whip this up and get it working.

2:21:40
But this is a menu builder in a builder, right? So I’m just trying to think through what do they want me to do? How do they want me to use these controls? So that’s gonna take some additional thinking and playing around that necessarily shouldn’t be done right now. I don’t want to do right now. So how do I switch that back? Okay so this drop-down is just disable. Okay we’ll be doing a training. There’s already in my head this is going to require a training on YouTube. So far though the menus that I I would build which are just simple drop downs. This is fantastic I mean light years better now we need to test mobile don’t we you need to see what is going to happen as we bring these breakpoints down. Okay we get a toggle by default and let’s go take a look at do we have it I’m sure we have a toggle area somewhere. Drop down okay so that’s for your main drop down. So I guess you don’t have to put a class on the drop down You can just you can kind of do everything from the parent right here That would probably be the keep menu open whilst okay. There’s your mobile menu that you can see now I’m not liking that right off the bat Hmm okay So these are the same elements just now within a mobile menu context and I guess I need to style them differently based on this new context.

2:23:15
And I guess doing that at that break point only applies the styles at that break point so the styles for your mobile menu are not going to influence the style for your desktop menu and so on. I just don’t like the starting point that I’m given here. It looks like a very drab kind of like gonna require some work show it break point width height align items justify content I mean we don’t want to do all of that right we want them to be centered most likely I can position them but where’s my I guess I would just use the gap at this point so that works see how my my drop-down right here has padding and the other ones don’t so that’s probably something I should have done here so I’m gonna actually get rid of this drop-down from the actual main panel. So if I go back here I just saw that panel I didn’t see it before and it looks like there’s some default padding in there which you know I didn’t really ask for but that’s okay. Content. I deleted the class like where did it get this styling from? From here, content.

2:24:50
Didn’t it get it from there? But I deleted the class, but it’s still there. It’s not here either. I don’t see a background color here. This is my problem with and this was in oxygen. I think you have this problem in breakdance. If you do stuff at the individual level with these items, it gets very inception-y. It’s like, what panel was I in when I did that? Like there’s a gazillion panels now, because now you have this main global panel where you can do things, and then you can go into each item, and each item has a panel, but then this dropdown is its own component with its own content panels over here.

2:25:31
It gets very inception-y. And this is why, by the way, guys, you know, diri.co, blog, let’s see, where was it? Hey, hey, I wrote an article called WordPress page builders suck for styling websites. You should go read that one, because it describes this exact challenge, that if I was writing CSS, there’s nowhere to get lost. There’s just writing the CSS, all right there, one place, hey, sass, keeps everything organized in one spot. I can nest things I know where all my instructions are coming from the minute I get put into a page builder and This is just a knock on all the concept of page builders. This is a knock. I’m in panel panel inception. I Got panels in my nightmares You do too much work in a page builder you go to sleep at night and your fucking brain is trying to open panels while you’re sleeping and it’s it’s a real problem does anybody have that price that just me that’s a problem my brains yeah it’s trying to open panels it’s trying to find settings it’s an absolute nightmare and so this is a but this is all page builders I think are like subject to this kind of because is just panel after panel after panel versus if I was writing CSS, number one I wouldn’t have to look for where things are. I wouldn’t have to say what do they want me to do in this situation?

2:26:59
What are they allowing me to do in this situation? None of that comes into play. I just simply write the CSS and move on with my life. So this is better for somebody who doesn’t know how to write CSS but for someone that knows how to write CSS it adds frustration that wouldn’t otherwise be there okay so that’s kind of what we’re running into right now I’m gonna have to spend more time with this and really dial in exactly what a great workflow would be for creating a standard menu here’s a workflow for creating a mega menu those trainings will be coming I’ve already mentally noted them down but before I can do the trainings I need to spend more time with this and I got to keep trying to break it and I got a I got to see what the best workflow would be and then I will do the trainings on them but what I will say is it’s already light years beyond the normal nav element light years beyond that normal chump ville nav element that bricks had before and the accessibility things it looks very very very promising out of the gate I’ll do some deeper inspection on exactly what’s going on with the different behaviors and so on and so forth but out of the gate just first glance I test it looks very very very good so that’s my first impression of what’s going on here and I want your guys’s first impression and do you feel the same way you know in these page builders if you’re if you do know how to write CSS do you kind of feel the the same way all right change it to static in the drop-down settings you’re styling too deep Tony says yeah look at the top level exactly okay I got it I figured it out I you you want to do everything at the top level.

2:28:52
I got it. This is an example of why reading the instructions are necessary. That is perfect, Tyree. And you’re absolutely right. But here’s the thing. Here’s the thing. And there are people, you know, who use ACSS and they get confused on something and they come in and Tony, you guys know Tony. Tony is the read the fucking manual guy, right? He will RTFM you.

2:29:17
He will. And so what I’ll say, my disclaimer on this is I will gladly go play with something to see how intuitive it is before I read the manual and before I watch the videos. What I won’t do is hop over to the Bricks Facebook group and go, how do you do this? How do you do that? Until I’ve read the manual. So I will absolutely go read the manual and watch the videos before I ask anybody for help. Okay, that’s good practice. You know, you wanna talk about best practices as a user of software, best practices.

2:29:53
If you can, hey, go play with it, go poke the box all you want and see if you can figure it out. But don’t ask for help until you’ve read the manual and watch the video. Then you can come in and ask for help. It’s just like a common courtesy, right? So yes, you can knock me for not reading the manual, but I will not go ask anybody for help until I have read the manual.

2:30:14
Tyree says, I hope Thomas adds more panels. No, no, no, no, no, no. We need less, we need less panels. A naked HTML builder with no CSS is a dream indeed So I’ve said the perfect page builder guys for a for like a real professional Would be a very limited set of elements. It’s like section div I love the block the container those for sure because they’re shortcut elements And then anything that gives you PHP or JavaScript functionality out of the box accordions modals carousels All that stuff is really, really, really important. But beyond that, just let me add those elements to the page and let me write Sass.

2:30:57
If a page builder can let me write Sass and then add those elements, and then do, of course, dynamic data and query loops, but I already said, PHP, JavaScript functionality for sure is important. But don’t give me all the chintzy bullshit. Don’t give me, let me cut, even Bricks is guilty of this I don’t need an author card I don’t need these are some of these are WordPress stuff so dynamic data but let me go down here so icon box WTF W don’t come on don’t be adding an icon box if you’re a bricks user don’t touch this element right here. In fact, I hide this element with CSS. Divider, oh my God, I’m gonna do this in page building 101.

2:31:45
Guys, if you ever add a divider element to a page, this is an automatic 10-year felony situation, okay? Don’t ever do this. I have built, I can’t tell you how many sites I’ve built for how many thousands and thousands and thousands and thousands of dollars. Never once have I added a divider element to a website. Never once have I added, and never once would I ever recommend adding a divider element to a, don’t touch this.

2:32:13
This is an automatic five-year rehab, probation, felony situation, okay? But it’s, you know, page builders are full of this kind of stuff. So we get down here and we’re like, oh, there’s your testimony. Those aren’t dynamic testimonials, I don’t think. It’s just a test, oh, it is, okay, it’s a slider. So it gives you, but just no, give me a slider. If you give me a, which Bricks does, why do I need this testimonials element?

2:32:38
This is not needed. This is not needed 100%. And we, you know, we could just go down the list. There’s element at, Bricks is not by far. In fact, I had five people complain to me in page building 101. Kevin, I’d switch to Bricks tomorrow, but they don’t have a CTA element like Elementor does. And I’m like, a CTA element is just a box with CTA text in it and a button, and you lay it out with Flex, that’s all it is.

2:33:08
You don’t need an Elementor pre-done element for that. Same thing with Breakdance, you don’t need pre-done, and by the way, these restrict your ability to add additional elements to them, so the minute you add in that kind of element, you’re stuck, and then Bev comes along and she’s like, you know what, we want an icon in all of our cards. Well, the pre-done element doesn’t allow you to add an icon, so you’re screwed. You should have built it the correct way from the beginning, right?

2:33:36
So all these elements, fancy stuff, alert, there’s a perfect example. Why do I need that? Why do I need that? What has this done for me? What has this done for me? It’s a, guys, it’s a blue box. But now look, I’m confined to what this alert allows. So can I add an icon to this alert? Don’t know. I’ve never added this thing to a page ever. Hey, look at that. My alert cannot have an icon. They just get added below the alert. So why? Do you know how fast I could make that just by adding a block and text and a class? Do I can I can add that what purpose does that solve? None. Okay, we just go down the list and talk about these so That’s why now it’s see see here you go. That’s why pine grows the go-to. No guys. No, no, no This is not this is not the go-to There are I’m trying to open it again. You can’t tell me this this Atrocious, atrocious-like workflow is the go-to.

2:34:53
And I know you can type them in, I get it, I get it, you can just type what you need, I get it. But it also doesn’t do the things I want it to do, it doesn’t do the things a page builder should do, in my opinion, out of the gate. How many times do you find yourself going, I need a section with no container? How many times do you find yourself in that situation? One out of 10? One out of 20?

2:35:18
One out of 100? If I had to think back, I’d say one out of practically never. One out of practically never. Because even with the container, if I don’t want a page width, I can make it 100% width and I’m still grouping my content properly. And then I still have the ability to put content outside of that container.

2:35:47
So there is no limitation to having a container unless it’s oxygen, right? Or breakdance. Then you have a limitation of having a container. But if it’s a brick situation, there is no limitation to having a container and I want a container in like 49 out of 50 49.8 out of 50 situations I want a container so what’s more efficient is it more efficient to give me a container or is it more efficient to constantly make me have to add the container manually so this is an example where a page builder could have helped my workflow but it’s actually slowing my workflow down over a page builder like bricks and then you just look at the UX you just look at the UX you this is what do we just talk about where’s the input field where’s the yes okay I can write all of my CSS in here here’s a question can I write SAS can I write SAS you’re gonna sell me a little bit more if I can write sass if I can write sass you’re gonna sell me a little bit more on it oh my god here we go this is I need a moderator sorry this is that was terrible this has happened before and this is why the streams are free don’t give me your don’t don’t do the super chat stuff don’t I don’t deserve your super chats as you can see half the time I can’t even share my screen correctly.

2:37:15
So I don’t deserve any super chats. I think a like is still a good thing to have, you know. But you know, you can save your super chats for somebody that can actually share their screen properly, no problem. But tell me, does PineGrow allow you to write Sass? What is my, where would I even get to it? Right here, this is a code icon. All right, that gives me my HTML. I got some JavaScript here. I love the fact that you know I just get to hover over each of these icons to figure out what they do. Look at this. Hey, look at this. Hold on. I got to annotate for this. I got to annotate for this. Oh this this thing’s gonna… how do I annotate without that panel coming up? Annotate without Does that get the job done?

2:37:56
No, shift command A, no, no, okay. I’ll just click it there, here we go. Do you like this? Isn’t this like a UX 101 violation right here? Tell me that’s not a UX 101 violation. If I can find a UX 101 violation right off the bat, you know what it makes me feel like what other violations am I going to find as I get through this? Refresh current page view, redo. Oh my God, this is UX 001 violation. This is just common sense.

2:38:34
Right exactly Tyree, exactly. That’s exactly how I feel. Pine grow is ugly. It is. But see you create this whole environment. I don’t know. What’s the difference here between opening VS Code and whipping up my theme and writing the SAS myself? Why are all these page builder tools here if I’m not gonna use them? So all these styling panels are here. If I’m not gonna use them, what else is this doing for me?

2:39:30
That’s what I would like to know. I mean, other than writing the HTML, but we already talked about like, it’s not really writing the HTML the way I wanted to write the HTML. Doesn’t seem so efficient. I don’t know. Every button in the UX is customizable, just remove it. Is that really the solution though? It’s like, hey, I’m on the PineGrowth team right now and we go hey you know what we’re gonna do we’re gonna put the same icon for two very different purposes and then if the user doesn’t like the fact that we’ve created this insane UX violation they can just remove it or they can change it to whatever they want. No like should we just do it right from the beginning and not make the user have to go through that step but you see the right arrow is more circular that is a door oh okay oh I didn’t catch it what a great note those are two different icons that is fantastic that is absolutely fantastic.

2:40:53
I bet you that’s the argument the guy in the boardroom made. But sir, I used two different icons. And then somebody fucking approved it. That’s even more amazing. What is this snowflake? Focus on page layout body no fucking idea what that just did I didn’t see anything change something’s happening over here it underlined this maybe I would have to add more things to the page to get it to to do something all right this needs its own it needs a first look I get it I get it you know if Adam Lowe uses it you know I’ve seen Adams tutorials and work and you know it’s very clear that it’s a quite a powerful tool but you know UX is very important to me UI is is important to me right and right now just first impression, it’s a it’s a mess.

2:42:04
There’s shit everywhere. And it’s it looks outdated. And it’s I mean, we haven’t even got into this stuff going on in here. And the way that break break points are appear to be managed over here. And oh, gosh, there’s just guys there are icons. This would give me nightmares. Alright, that’s enough of that. Alright, we’re gonna do, we’ve been here too long. I’m taking two more questions, and then we’re getting the heck out of here.

2:42:41
So before we build the website with the builder, we need to build the builder by reorganizing icons. Great point, fantastic point. You’re using it as default. Shouldn’t I be? I mean, I opened Bricks and I just started to use it and I didn’t have to be like, oh, it’s got eight of the same icon. Let me fix that before I get started. Didn’t have to do that in Bricks.

2:43:06
But then again, Bricks doesn’t let me write SAS, but WP CodeBox does so that, you know, there’s easy workarounds for certain things and I can if I can overcome The limitation and still be off to the races very quickly, then you know it’s good Do you know of any builders other than quickly that has a built-in modal pop-up optional SAS editor have you kicked the tires? No, no, I don’t. I told Thomas, I said, hey, Thomas, we need SaaS. And that would be a really great step up above other page builders automatically. But I don’t know, I don’t know if that’s coming or not.

2:43:51
PineGrow is a big fat exit ramp from dependents on page builders, and yes, you can write SAS I Mean you’re you’re you’re basically saying that this page builder is an exit ramp from a dependence on page builders So I don’t know that I can a hundred percent get on board with that or it is a page builder All right Pinegrow is a page builder So you are kind of depending on a page builder if you’re using Pinegro. Correct me if I’m wrong. I mean, I know you don’t have to use the, you got, I saw, you can write the HTML.

2:44:33
You can write SAS. So you don’t have to use the page builder functionality, but it is effectively a page builder. It’s a UI for building websites. Let’s see. So somebody is saying Pinegrow is not a builder. But I’m confused because what I was just looking at looked a lot like a builder. Okay. Let’s do one last question. Then we got to get out of here. A lot of people talking about that mobile menu. Oh, I regenerated breakpoints. Was I clicking on the wrong thing?

2:45:24
What a chump. All right, back to questions. I’m looking for the questions. I had to scroll way back up. Do you alter the element CSS for various breakpoints as you go, or do you do the mobile design once you’re done with the desktop design? This is actually a fantastic question. This is the question that we are going to end on because it is such a fantastic question. So let’s get into it. By default if you notice and you’ll notice this in page building 101, if you use clamps, if you use tokenized styling, if you use utility classes, it makes it very, very easy to more or less account for every all mobile behavior as you build.

2:46:12
If I was not using a framework like Automatic CSS, if I was not using tokenized styling, if I was not using automatic responsive techniques, then I would probably design the entire desktop, get it approved, and then or develop the entire desktop because usually I’m working from an existing design. Okay, so following the design, I would build it out on desktop. And then once that’s approved, I would go to the client, right, green light, it looks great and explain to them only look at this on desktop, we have done nothing on mobile. Just look at this on desktop and we need your approval. Then they say yes, that all looks good or Most commonly, you know what they say we want to make some changes they go through a little punch list kind of phase whatever And we change some stuff around fix some stuff up if I had done the mobile optimizations of that page I now have to do potentially work at the desktop for the changes that they want, and I have to go do breakpoint changes again based on those changes.

2:47:21
So you’re doing work over and over again using that method. So to me it’s safer to go desktop development, get a green light, now we go take care of mobile. So that if they have any changes at desktop, we’re not doing mobile stuff twice, right? But I don’t even have to worry about that because the minute you introduce a framework the minute you introduce tokenized styling The minute you introduce concepts like fluid responsive typography and spacing and all of that Because my typography is already handled at every breakpoint automatically all my spacing section spacing card spacing gaps Margins everything tightens up on mobile automatically handles itself. Grids. Almost all, as you’re going to see in page building 101, almost all page layout is based on grid. And grids are very easy to make responsive, especially if you’re using a framework. Because even if I use BIM classes, right, and so my grids, my, maybe I create a services grid or something.

2:48:19
Well there’s no utility class for services grid, so I have to create a custom grid. But I have grid tokens in automatic CSS. So I simply drop in a var grid 3 that makes my 3 column grid. I go to the next breakpoint which takes half a second. I go var grid 2 and then it’s 2 columns at that breakpoint. I go to S, var grid 1, bam, done, move on. So in that way I am doing breakpoints as I go, but it takes half a second. It’s not rewriting, you know, repeat min max functions and all of that stuff. It’s just dropping tokens in. So it’s so fast and easy that I just do it as I go, and then if the client decides it needs to be two columns versus one column, it’s literally a half second edit, right?

2:49:00
So more or less, when you use automatic CSS, especially if you use frames, because frames is already done for you, mobile and everything, and you’re using tokenized styling and automatic responsiveness, you build it on desktop, and then you go to mobile, and it like already looks fine. It already looks exactly how it needs to look.

2:49:21
The only situation you get into is you start doing some stuff with absolute positioning. You know, absolute positioning is always going to create mobile complications. So, cause it’s no longer responding to things that other elements respond to. You’ve like taken it out of the flow of the document. So that’s the only time where, but in those cases, I do tend to go in, I’m not just going to do that on desktop.

2:49:45
Because if the client approves it, I just want it to be done. I don’t want to have to go in and do a bunch of extra work. So when I’m doing absolute position to elements, I will handle mobile responsiveness for those elements at that time before the client ever sees it. Just because I just want it to be done and I don’t want to have to deal with it later on. So that’s kind of the answer that I gave to that. Hopefully that makes sense. Hopefully you guys have gotten a lot of value.

2:50:12
See now I’m just sitting here with a blank page and setting the camera. And yes, Derek, I am hungry. I am 100% hungry. What I may do, how about this guys? How about this? To be fair to pine grow because pine grow is not like bricks it’s not like an oxygen it’s not like a breakdance it’s not like a quickly it’s its own environment it’s its own beast of a thing maybe adam will come on should we try to get adam to come on i’m sure there’s other pine grow people but he’s the he’s the only PineGrow person I know.

2:50:49
Maybe I can get Adam to come on the live stream with me and we can go through PineGrow together. And he can hold my hand and we can gallop through the daisies of the PineGrow field. And he could show me the ins and outs of PineGrow. He could show us all, he could show us all a workflow in PineGrow just to see, just to see. Is it interesting? Do we like it or do we want to stick with our traditional page builders what do you guys think I’ll let you guys decide I’m about to shut off the stream which means I am NOT going to come back and look at the chat if you have a question that was not answered there was a lot of them I scrolled past lots and lots of them when we got into this bricks tangent of menus I will answer them if you put them in the comments of this video. You got to go extract your comment for your question from the chat and go put it in the actual comments because I do get notifications on actual comments on the video and I will answer your question there and then we will do this again because this was a good turnout and I think everybody got a lot of value. So that’s it.

2:52:01
Page Building 101 next lesson drops tomorrow. Peace.