Live First Reaction to Bricks Builder for Wordpress

0:00:00
What’s up everybody? First question is are we live? Second question is the audio working and I got to figure out how to… Alright, it’s showing me views. I’m going to run it down here too. Alright, let’s see. Looks like… Oh yeah, okay, good. Alright, so aside from not knowing what I’m doing with BRICS, good morning, Jason. Yeah, we’re going to be looking at BRICS today, but we’re also going to be looking at YouTube live streaming because I don’t live stream on YouTube. This is the first time I’m live streaming. So I would like to do more live streaming. I think it would be good to do AMAs, it would be good to live stream a lot of different things.

0:00:49
But this gives us a really good opportunity to, number one, teach Kevin how to live stream, number two, teach Kevin how to do some stuff in BRICS. So the first thing I want to do is just invite those of you who have used BRICS before. I literally have not like… I didn’t even install it. I had Andrea on my team install BRICS. So I’m literally going to be opening this for the very first time. I intentionally haven’t touched BRICS because I wanted to do… I’ve been itching, man, I’ve been itching. I intentionally haven’t touched BRICS because I wanted to do this completely fresh live on YouTube just so we can… Here I am, I’m a new user, right? How easy is this thing to use or to not use? And let’s just see what the general experience is. I think, you know, for Thomas, like as a developer of BRICS, it’s like, you know, you want to see somebody.

0:01:45
I think this would be valuable for him as well. Maybe he’ll show up. I don’t know. But I think it would be valuable for him to just see how a brand new user uses BRICS and works through the process of setting things up. I know that as the developer of Automatic CSS, I would love to watch people do that for the very first time. So it would be very, very beneficial to my development path. Yeah, we’re going to dive right into BRICS. I don’t know how long this is going to be. I’m planning on it being up to two hours long. But we’ll see. Maybe I run out of steam. Maybe I get stuck. I don’t know what’s going to happen.

0:02:23
But for those of you who have used BRICS before, feel free in the comments or the live chat or whatever. I’m going to try to keep my, my, in fact, I’ve got a screen here. I’ve got a laptop down here where I can look and I’ve also got on ecam, it’s showing me the stream as well. In fact, let’s go through it real quick. So we’ve got Jason, a mod, Andreas here, awesome, Lester, good morning, good morning. What’s up, Bart? Stratos. All right. So we got Kennedys here and I’m wondering what the delay is. I don’t know what the delay is on, on YouTube’s live streams. But like I said, use the live chat. Let me know if you have any tips for me as I go through this or if I get stuck, I might say, hey, you know, what do I do next?

0:03:08
You know, drop, drop a, a comment in the live chat and let me know. We’ll also just for those of you who are maybe not using BRICS yet, just kind of semi interested in BRICS. If you have questions about agency stuff, development stuff, we can do it, a semi AMA while we do this because I’m going to be going kind of slow because I don’t know what I’m doing. And you know, we can fill in some gaps and things like that with AMA type questions. So all right, shall we get into it? That’s the question. Let’s go ahead and do it. So I’m going to go ahead and start screen sharing here. I’ve got my fresh BRICS install. Let me take a look at the plug-ins real quick so we can see what we’ve got going on. I do not have automatic CSS activated. I have it installed because I am curious, you know, what’s going to happen when we activate and what might work, what might not work, things like that.

0:04:03
This is a very important step, by the way, in the development of automatic CSS BRICS is the next platform that we are going to support, aside from oxygen. For those of you who use Gutenberg, I believe that Gutenberg is going to follow right after BRICS. So that’s going to be another important step, but in order to integrate with BRICS, I have to know how to use BRICS. I have to know what BRICS is trying to do and how it behaves and things like that. So this is a very important step in that. And then I’ll be developing probably a mini site with BRICS just so I can get a handle on all of the ins and outs. Then I’ll start development on automatic CSS compatibility for BRICS. And I’ll also probably start doing BRICS tutorials as well because there’s a really, I like the BRICS community. I’m in their Facebook group from what I’ve seen. It’s a really good community.

0:04:51
So I would love to do tutorials for BRICS as well. Alright, so we’ve got automatic CSS disabled. We’ve got happy files, metabox, and short pixel, which we don’t really even need. And then WP grid builder and WS form, which we won’t be using either. So that’s it. It’s a pretty clean slate. Obviously, BRICS is not a plugin, like oxygen is. It’s a theme. So if we go to appearance and themes, there it is. We’ll see it there. And then we’ve got these other useless themes in here as well. And I’m guessing that we start up here with this. So I’m just going to hit getting started. I know that I do know that the templating system is a little bit different in BRICS than it is in oxygen.

0:05:33
I believe it’s more like divvy where you create like a header template and then a footer template. And then you can maybe mix and match them. I don’t know. And I’m not sure what the deal is with the body template is. But I just want to go through all of these panels real quick and see what we’ve got going on. So welcome to BRICS. All right. So I’ll open that. That’ll probably come in useful. Features. I don’t care about the features or creating my own elements or really the roadmap. But I do want to see what’s going on with templates here. Okay.

0:06:05
So we’ve got that first question I would have is like, can I just, because it is a theme, right? Can I just add a page? And in fact, we don’t need to add a page. We can just edit the homepage. Can I just like open a page and start editing and see something on the front end? That would be like my first question or do like an oxygen. Oh, as time you like, you got to create a template first. All right. So here we are. Let’s see what we have at our disposal. We have a container, which is a div I’m guessing. So I’m just going to add one of those. We’ve got a heading, which, okay, that’s interesting behavior right off the bat. We have our heading was added outside of our container, whereas like in oxygen, if you had a section and then you had a heading, it’s going to add it inside of the section.

0:06:49
And I know there’s a lot of, I’ve seen some comments from people in the bricks community like, I hate when they compare it to oxygen. That’s what people are going to compare it to, okay? And you know, I’m coming from the oxygen world. So obviously I’m going to be comparing it to oxygen. But let’s see. All right. So is there a, okay, there is a structure panel. It’s open by default. That’s good. So now I can see that my header, my heading is inside of my container. All right. What else do we have? We have basic text. We have rich text.

0:07:18
We have a button element, an icon and image video. We have dividers. Icon boxes. All right. I’m a little wary of some things like this because I don’t know. Typically they, like in oxygen, they feel very limiting when you use these. A list. Let’s just throw that in there. I want to see it. Yeah. So I don’t know. There’s a lot going on there. I just added a list element and there’s a lot going on. I see items. I see prices over here.

0:07:49
Let’s get it inside of our container. The drag and drop is feeling very, very smooth like except I just dragged that out of the container. All right. So let’s put that in there. Yeah. So there’s like right off the bat, you know, it’s like, all right. I wanted a list. Now I’ve got some sort of pricing table. Yeah. Let’s, let’s, how do we delete things? Let’s get to there. All right. There we go. Good. All right.

0:08:15
So what else do we have at our disposal? The courtians tab. Those are fairly useful. All right. Let’s see what people are saying here. Delay is three seconds. All right. Cool. Bricks is a theme. Major issues in classes in the current version. Not yet ready for automatic CSS. Okay. All right. Good. Cool.

0:08:32
All right. Cool. All right. So. Oh, it has to be built in form. All right. There’s a map. There’s an alert. All right. Animation typing. Is that an animation? Is that what I’m guessing? All right. There’s a countdown. A counter.

0:08:47
There’s pricing tables. Progress bar. Pitch heart. Team members. Testimonials. Code. Template. That’s an interesting template. All right. I’m wondering if that’s like a reusable part in oxygen. Like an oxygen has these reusable parts. This may be like a mini template kind of thing. Not like a full page template, but a template of a component. Logo. That’s interesting.

0:09:10
That would be like, why isn’t that just an image component? Yeah. Because there is an image component for sure. All right. There’s a gallery. There’s audio. There’s a lot here. All right. There’s an SVG. But that icon leaves me to believe that that’s like a shape of some sort. Or are we selecting? Oh, okay. All right. So you can put in your own content. Or a file.

0:09:32
Okay. Well, we don’t need to look at that right now. Let’s keep going. All right. There’s some dynamic content down here. It looks like post title, sort of metadata. All right. There’s a lot. There’s a lot going on here. A lot of it is. See, I would almost like, you know, if you’re. I understand. I understand like the element or kind of like we got to give people all these preset things. If it’s a designer, not a developer using it, they’re not going to necessarily know how to build. An icon box or an alert box.

0:10:08
Like, but to me, these things are just it’s almost like, can I just turn these off? Can I just like not have these showing? Like this is a very, very simple thing to build, right? I feel like it doesn’t need to be a primary component. But that’s just me. But I understand maybe why it exists. But it would be nice to almost get like a streamlined version of. I just I just want the good stuff, right? Like accordions, tabs. Those are legitimately things that are a lot more complex to put together. So it’s really good to have those as a preset module. But simple things like lists and icon lists and icon boxes. To me, these things just kind of clutter the tools area. I don’t know. What do you guys think about that?

0:10:51
Hello from Italy. Hello, hello, hello. All right, cool. All right, so I pulled this thing up. I was like, well, why don’t we maybe try to build something like useful, right? Like we can, I just, I don’t know, I just grabbed this random website. And maybe we can try to get some of this done. I’m not planning on doing the entire thing. But let’s just see if I haven’t even looked at like, or is anything that we’re putting on here. First of all, what I’m noticing is, let’s get the heading. All right, here’s the container. So we’ve got this site width right here. And I’m guessing that that’s set in the back end setting somewhere. But I’m noticing that my container, if I’m using this as like a section, doesn’t have any padding by default, which means that I’m probably, well, automatic CSS, what I would do is I would make, that’s actually going to be tough, because there’s no section element, right?

0:11:44
That’s serving as a section. If we HTML tag section, section, section, there we go. Okay, and let’s save this real quick. And I want to, let’s maybe add some padding real quick. Oh, God, where are we, where are we going to go to do that? All right, lay out padding. We’re just going to keep things very simple today. So we’re going to go with, all right, let’s do rims. And I want to do eight rim. And then bottom, I want to do eight rim as well. Okay, excellent. Now I don’t have any left-right padding. And I’m wondering what this is going to do by default on mobile. Ah, see, that’s, you know, that’s a big problem for me. All right, so obviously my content now is touching the edges on mobile.

0:12:33
So this is why oxygen section module is actually very brilliant, right? Because there’s a preset thing called a section, and it has your default section padding within it, so that you don’t have to do these things on every section. Now, yes, you can make a class for section, but then the question is, do you want to add a class to every single section that you add to a website? And like, no, we shouldn’t have to do that, right? So I think what I would do right off the bat with automatic CSS is, if you add a container in bricks, and it’s set to be a section, it would have your default padding within it, just automatically. That’s the kind of thing that I would look to be, you know, that would be helpful, right? All right, so I’m going to go back to desktop, and we’re going to just add some left and right, and this is going to be rim, and this is going to be rim.

0:13:21
I heard something about being able to set these to rim by default maybe. I’m just going to do two and two, and then now we have like a legit actual section, but it still doesn’t have an inner content module, right? And so now my question is, what if I set a background color on this container? So let’s go to style and, oh wait, hold on, what’s this? Inner container. Ooh, okay, hang on, hang on, things just got more interesting. Let me delete all this. Let’s go down here, and let’s go to rim, rim. Do I have to change all these like manually like this? All right, let’s go to 8, 2, 8, 2, and nothing happens.

0:14:07
Okay, all right, I don’t know what this is. Someone help me out. What is the inner, what is inner container for? I put a container, what is inner container for? Do I have to put another container in the container? Let’s try that. That seems like it wouldn’t be the thing, but elements, container, container. All right, let’s put the heading in that container. So we drag and drop. Oh, okay, okay. Maybe I was right. Container in a container.

0:14:45
Okay, it’s like a two-step process though, right? And see now we’re not going to have our problem on mobile. Okay, well that’s good to know at least. All right, so, better to add a container, and inside a container, the first of the section, and the others for the content. Okay, good, well I just figured that out. All right, so we’ve got a container inside of a container. We’ve got our heading. That’s cool. Let’s do the background image thing. Because I just talked, or not background image, just background color.

0:15:15
Background, here we go. Background color. Oh no, that’s an image. All right, hang on. Background color. Oh, it’s a little icon. Okay. Okay, yeah, all right. So we need to make this full width. Right, how do we make this full width? Is there a default setting for this somewhere? So if I select my container, style layout, it’s not in layout. With, I can’t imagine that this would do any, oh, it does, okay?

0:15:51
All right, well, the first thing I’m going to do is inspect this. So I want to see what’s going on here. So we’re going to save preview. That’s cool. All right, so. All right, but that’s not viewing it on the front end. Save preview, edit, template, structure. I just dive in. Guys, I don’t, here’s the thing. Like, I don’t, uh, I don’t read documentation, unless I need to. Like, I do that on purpose, though, because I do like to just see how intuitive is something before I dive into documentation and all of that.

0:16:23
Plus, you guys don’t want to see me read documentation. That’s not, that’s not fun. All right, I just want to know how to get to the front end. View on front end. There we go. All right, let’s inspect what’s going on here. All right, so we’ve got a section. We’ve got a div inside of that section. All right, background color. Why are all these. Blank. All right, well, let’s get out of preview mode back to builder. Remember, I put, I put things here, but I remove them, but they weren’t removed from the code it looks like. Like, there’s, the instructions are still there.

0:17:04
They’re just empty. And I’m not sure, because it’s throwing flags, right? Like, how do you make that go away? Is that a bug? Is that, um, yeah, I don’t know, I don’t know what’s going on with that. Okay, so it’s using Flexalign Center. And then it has a default width of the site width. Okay. All right, I get it. And then so when I put width of 100% on there, it’s just going to override that. And then, all right, so we’re going to go with 100%. But see, then your inner, your inner container goes with it. All right, so how do we get a page width inner container?

0:17:52
Do I have to then know my, yeah, it’s going to be right here. I have to know my, and then, all right, so 110 rim. And then we’re going to have to do margin right of auto and margin left of auto. And that’s going to get me basically where I wanted to be. But that’s a lot of manual work. Is there a way to do that faster? You don’t have to do this on like every section. You have to delete the style before deleting the elements bug. Okay, click white dot on left to reset style. This thing right here. But okay, let’s go to this contain a gotcha. Okay, cool. Now let’s see what our output looks like. So I saved that. I notice it refreshed on its own.

0:18:45
That’s pretty cool. Yes, nice. It’s clean. Okay, good. All right, that works. And we have pretty clean. Like we’ve got our main, which is interesting. So we’ve got a main by default. What controls the main, right? Because in oxygen, you can set your own main. And it actually allows you to create templates where content may be outside of the main. And not inside of the main. We did a tutorial on this in the inner circle. So I’m wondering if we have control over this main tag at all. Because that is important in some instances.

0:19:22
But I like the fact that we have main. We just have a clean section. We have an inner div. And then we have our h3. So like HTML wise. It’s looking like it’s pretty clean output. All right, so that’s good. So we’ve we’re looking at something on the front end already. We didn’t have to build a template or anything like that. Let’s go now dive into templating. I think would be the next best step. So I’m going to go out. Back to dashboard bricks. And I, all right. Here we go.

0:19:53
Templates. Let’s look at the settings first. How about that? All right. So we’ve got general post types. I guess we’re assigning this to where bricks can edit posts and pages. All right. Load Gutenberg data and bricks. Yeah. Yeah. Let’s turn that on. Save bricks data as Gutenberg data. Don’t know what that means. That’s a documentation thing. SVG uploads.

0:20:13
That’s cool. Okay. I guess you don’t need another plugin to enable SVG uploads. Disabled bricks open. Disabled bricks SEO meta tags. Open graph meta tags. One disabled. These because I would use rank math for this. Generate custom image sizes on. Enable delete bricks data button. Disabled skip links. Okay. Is there a skip link in here? All right. We’re going to check that in a minute.

0:20:39
Convert save settings. Okay. So there’s all of our general settings. Here’s our builder access, which. Code execution. I guess we’ll turn that on for administrator. And then templates. Disabled default templates. If no template conditions are set, bricks shows published templates on the front end of your site. Select the setting to disable this behavior. Make sure to set. Yeah. I think I would want. Yeah.

0:21:06
I would want to make sure I assign templates. All right. Someone’s calling me. Let’s turn that off. Public templates. Don’t want to do that yet. All right. Good. Save settings. All right. Let’s check our builder settings. Don’t want to disable auto save. Builder mode dark. Yes. Yes.

0:21:28
Yes. Confirm delete. Enable to show. Okay. No. I don’t think we need that. Performance. All right. All right. Good. API keys. I like the unsplash integration. I think that will come in very handy. Oh, custom code. Okay.

0:21:47
So does all. Here’s my question. Bricks users. Does all custom CSS have to go in here? Or is there a CSS editor inside of the builder? Stratos said no. You can’t do it faster. You can’t do it faster with automatic CSS. I guarantee you. That section problem is the first thing I’m going to solve with automatic CSS. Absolutely. All right. Good. Good.

0:22:11
Good. Good. Good. Good. And we got 96 people watching. That’s not bad. All right. So. Templates. Let’s do it. Add new template. I have no idea what I’m doing. We’re going to call this the header. And. What else do we do?

0:22:28
We’re going to call this the header. And. What else do we got? Template tags. No idea what those do. Template bundle. I guess template bundle is. I don’t know what template bundle is. Maybe that’s where you compare templates together. I don’t know. We’ll look that up in just a second. All right. I’m going to publish this header. Select template type header. All right.

0:22:56
I think I got that. I don’t see anything else that’s very relevant here. So I’m going to edit with bricks. Where do I sign it? I didn’t see that. All right. We’ll look at that in a minute. Click on any element. Okay. Here we go. We’ve got it. We’ve got to build this thing right here. And in fact, let me save image as. Downloads green light logo. Okay.

0:23:19
So we need a little nav. We need a button. We need green light up here. So. Is there a header element? No. Okay. So we’re going to go with container. We’re going to go with another container. Those one has to be inside the other. All right. I’m going to. I’m going to make a class for this. We’re going to call this. We’re going to call this section.

0:23:50
Yeah. Oh man. All right. We’re going to call this. We’re going to do a section header. That’s what we’re going to do. So we’re going to do section header. Okay. And then on section, we’re going to go 100%. So where’s our layout size with 100%. Boom. All right. So there’s that. We’re looking good. On the inner section.

0:24:21
Okay. So it’s going to be section inner like that. And then we are going to go with back to layout. So padding. Right to rim. Left to rim. Okay. Let me put something in here so we know what’s going on. Let’s do the image. So we’ll add an image. No image selected. Okay. I don’t like that UX right there. We’re going to watch this delete. See, I would expect that if I added an image, oh dear.

0:24:59
Hold on. Stay on page. I’m clicking the wrong things. Image. If I add an image, I want to like interact with the settings of the image. You know what I’m saying? Like why do I say then go select the image I just added. All right. So here I am. I selected the image content. I got to go back to the content tab. All right. There’s a few extra clicks here. I’m going to select the image. We’re going to pull this in.

0:25:27
And add it. Okay. Good. This is going to have a class of logo. And we’re going to go to layout again. Width is going to be 20 rim. 15 rim. Something like that. Okay. All right. Now I can see what’s kind of what’s going on. So this container is the section inner, right? And that is going to get a width. Actually, it should be a max width of 110 rim. And then our margin, right of kind of type an auto here.

0:26:10
Auto. Cool. Auto. There we go. All right. We’re getting there. All right. So we’ve got this. All right. No need to drop down for units. You can directly type with units. Okay. So I can just type like five rim or something. Okay. All right.

0:26:31
So you can change container. Just container. I think a lot of big users use a child theme for all their CSS. All right. Don’t they have a section div in bricks? No. Yeah. There’s no section here that I’ve found. Okay. All right. Let’s keep going on this. So our section inner. Okay. This is where I would need to write. Oh, here’s CSS right here.

0:26:59
Okay. Fantastic. All right. So section. Enter. And then. But this is going to be. Header. Right. It doesn’t close my tags for me. That’s fine. Whatever. All right. Section. Section.

0:27:22
Enter. Let’s do padding of. I’m looking for. I think I already added some padding up there. Let’s see what happens here if we do this. So I’ll do eight rim top and bottom. Not for the header though. The header is going to be. Maybe two rim. And two rim. Okay. So that should be good. Section. And then section. Enter.

0:27:52
I think it’s going to be easier to manage here. Right. Section section inner by default is going to be padding. Eight rim and two rim. And then of course we would have to do like, you know, some mobile optimizations for that. But at least now. Oh yeah. No, we don’t want to do this. Hold on. Section. Now we don’t want to do that either. Okay. I’m going to have to do padding left to rim and padding right to rim. I just want this section to have.

0:28:23
Normal section padding left and right. And then we’re going to use these. Modifier classes, whether it’s a header or a main section. Or maybe even a large section or whatever. I don’t have automatic CSS insults. So I can’t do anything with that. We got to kind of do this stuff from scratch. But that’s that’s a good starting point for our header padding. All right. Now what I need to do is I need to get a nav going. So we’re going to do a menu of some sort. There we go. Nav menu. Okay. No nav menu found.

0:28:55
Content. Select nav menu. So I’m going to have to do that in WordPress. Okay. So let’s go, let’s save this for a second. And let’s hop back to the dashboard. And let’s go to appearance and menus. And manage with live previews. That’s from bricks. Okay. It must be create a new menu. Main menu. Okay. Add items. We need testimonials pricing FAQ, book a demo.

0:29:27
Testimonials pricing FAQ, book a demo. Login sign up. Login sign up. Usually these buttons, I actually put in these menus. Like I would literally put, it wouldn’t be a page. It would be a custom link and it would say add to Chrome. Because of how menus are typically handled. And then I would style the thing differently on mobile than it is on desktop. On desktop, it would look like a button on mobile. It would look like just a link in the menu. That way you don’t have to worry about your CTA being left out of your mobile menu and things like that. But I don’t know how easy that’s going to be with bricks. Because I don’t know what I’m doing. So, okay. Did we get a menu?

0:30:22
There it is. All right. So now we should be able to refresh the builder. Well, that’s refreshing. Oh my gosh. Look at that refresh time. That’s a little bit different of an experience. Okay. So, I don’t think we have grid at our disposal here. And we’ve got this. I know. Flex is here by default. Center. There we go. Horizontal row.

0:30:53
Cool. All right. We don’t have a lot of room here. Let’s go to. I still haven’t gotten the answer to my question of, is there a way to set a site width by default? Or is this just determined by your settings on your inner section? Which now I have no idea where I put that. It’s on this class section, inner. Lab. This is why I like writing custom CSS by the way. It’s in the style sheet. I can find it. But if it’s in these panels, you get a little loss sometimes. Okay.

0:31:26
So we need to do. And I haven’t. I haven’t set my HTML. Let’s go down here again. All right. Let’s try this. Okay. Now my rim should be my rims. All right. So now we go to. We want like 1366. Okay. There we go. Now we have more room to work with. Okay.

0:31:52
So this is going to be our menu. And I’m going to do menu. And I’m going to do menu. Main. And then this is going to get a. Margin left of auto. Be nice like a type. Oh, that’s interesting. Okay. I’ll do I have to hit enter. Okay. Good. I was like, why wasn’t it doing anything? All right. I’m also going to put a gap on this.

0:32:27
Section inner, but not here. All right. Let’s just do this at the ID level. I don’t know where gap is. Gap, gap, gap, gap, gap, gap, gap, gap, gap, gap, no gap. Okay. Well, we can solve that problem. We’re going to go. Oh, well, oh, hold on. This is not going to work because this isn’t like the. Is this like this is the custom CSS for the element, but didn’t am I defining classes in here? Have I been doing this wrong? Have I, if I, if I, I mean it’s working, right? But can I just put like gap to M? Let’s take off the margin left on this for a second.

0:33:09
I just want to see what the heck is going on. Menu. I don’t like the fact that it doesn’t remember the last element I was like or the last class I was editing. Right. Menu, main layout, left auto, let’s delete that. Okay. And yeah, we don’t, we don’t have a gap. So I don’t know. I don’t know what to do about that. All right. Margin left of auto. Can go back. But at least we have a navigation. So that’s cool. Let’s sit save and let’s see what we’ve got on the front end.

0:33:42
All right. And that’s what I’m worried about. Like how do we, we need to assign this now. So this does go to preview. Preview edit and WordPress. There we go. Okay. Featured image, template bundle. All right. Someone tell me real quick. How do I assign this? Oh, gap is on the content as far as I know. Click settings icon at the top then general for site layout settings. Good call. Good call.

0:34:11
Okay. While you guys tell me how to assign a template. I’m going to go back in here and see if we can do that last tip. Click the settings icon at the top then general for site layout settings. Settings. Template settings. Header. Header location. Top sticky header. Sticky condition. Aha. Okay. Now we’re getting somewhere. All right. So we want the entire website to have this header.

0:34:37
Good call. Very good call. All right. There are global settings for the width that’s inside the builder. Okay. Page settings. General. Site layout. Boxed wide. Aha. Oh, shit. Have I just done this at the beginning? Boxed max width. That just changed something. I swear I saw something change.

0:35:22
Maybe I was just breaking it and then putting it back to the way it was. Content background. Site backgrounds. Okay. Boxed. All right. Let me go back to edit the main page then and let’s see what effect that has. Because that’s an interesting. That’s very interesting to me. All right. Let’s go to pages. At least we have some sort of a header now. We’re going to edit with bricks, the homepage. All right. Settings.

0:35:55
Page settings. General. Oh, okay. We’ll see. This is per page though, right? Now that’s not what I want. I don’t want boxed. I want wide. I just want the inner content to have, you know, a max width every time. Root container margin. Root container padding. Root container width. Okay. 1366. So now if I add a section or sorry, not adding a section, I’m adding a container.

0:36:35
It still adds it at 1366. But at least my inner would be at 1366, right? And then, okay. So I would just have to set that this would go back to section. Oh, that’s, see, I don’t know if that’s going to work. Because now that my section class, which has a size on it, it just has width, yeah, width 100%. It can’t become, it can’t become 100%. It’s being constrained by that width that I just put on in the global settings. Theme styles, page settings, general, wide, boxed. Yeah. See, if I take this off, it goes to 100%. So this still seems like a problem to me. This still seems like that’s not what would I use that for, right? Because if I can’t override, like if it constraints all of my containers to that width, how do I get a full width container, right?

0:37:40
There must be an answer for that. All right. Well, anyhow, I see that we can disable the header on per page basis, disable the flutter. That’s good. Change the page background. Space between header and flutter element margin. Some of the stuff’s just going to have to, you know, take getting used to. There’s our custom CSS. Okay. I am terribly afraid that I’ve put custom CSS in the wrong place. All right. So we’re going to go back. It should definitely probably have been up here. But this adds inline CSS to the head tag. This doesn’t create a style sheet. Is there a way to do a style sheet?

0:38:23
Like you can in oxygen. It’s like the one thing, like one of the biggest things I love about oxygen is the fact that I can just go, bam, bam, bam, I can add style sheets for days. And it all combines them into one style sheet and like it’s fantastic. I don’t like the fact that, I mean, there’s some things I don’t like about how the style sheets behave in oxygen. But I do like that. First theme style, global settings for width, template settings are under each template on the right where you assign the type of template it is. Okay. Theme styles are global, not per page. Theme styles. Select a theme style or create a new one to style your website. Okay. It seems like a good first step create create style name digital gravy create. Ooh. This looks kind of fun.

0:39:22
Alright, so add condition. Entire website. It sounds like a good first start. General here we go. I still think we’re going to run in the same problem. I still think root container is not going to be helpful whatsoever because I still don’t know how to make a full width container. If I do that, if I use this setting, I don’t know how to make a full width container. Alright, but that’s that’s cool. Element margin, like is that all margins are all elements have the same default margin that seems a little chaotic. Uh, root container margin, or container padding. I got to look at the documentation for this. I don’t know what a root container is. I box height, light box width. Alright colors. Primary color. Secondary color.

0:40:22
Light color, dark color, muticolor. Light color, dark color. Light color, dark color. It’s not making a lot of sense to me. Um, because like, like an automatic CSS, right? You can have a light version of any color you have, or you can have a dark version of any color you have. You don’t have like a assigned light color, right? Um, because you could use a lot of different light colors for various purposes. So light color semantically doesn’t give me any information on what were, like what this thing is for. Same thing with muted, same thing with like, alright, I guess border color that’s a use case, but I don’t know. Um, like a lot of things have different, a lot of borders are colored differently throughout a website. Okay, so I’m just, I’m just sick of a primary and secondary for right now. Alright, so content, we have links, can style our links. Okay, that’s good. Typography, here we go.

0:41:30
Alright, so color font size. Alright, we’re going to do something real quick here. Here’s what we’re going to pause. Because this is the, and I’m spoiled. I’m spoiled by automatic CSS. Like when I start a website in oxygen, or pretty soon in bricks, for example, I would not have to make decisions on any of these things. Like this would all be just done for me, and it would be customizable from the ACSS dashboard very easily. You don’t have to choose sizes like I want my sizing to be according to a mathematical scale. So I don’t have to make these decisions. I want control over the scale. I want it to all be responsive. I don’t want to have to deal with break points. Like I kind of, I’m seeing the same thing with oxygen where if I set this at 4.8 rim, as my H1 font size, where then do I, can I do that here?

0:42:29
So I can choose what it would be at each break point. That seems the way that it would work. But I don’t want to deal with any of that stuff, right? That is not, why didn’t it save? That’s the H2. Okay, so yeah, I don’t want to deal with any of that stuff. I want, I want this all done for me, right? So I’m going to go back to the dashboard, and we are just going to see what happens. So I’m going to go to plugins, activate automatic CSS. We are going to refresh the builder. Refresh, refresh, refresh. I don’t know what’s going on. I’m getting that little jump. Does anybody know what this jump is caused by?

0:43:17
Right there. You guys see that? Custom colors for header and buttons only. Read the blue box. Alright, I’ll read the blue box. Let me go back. Alright, so I’m going to go to, I was in theme styles under digital gravy. Those were custom colors for header and buttons only. Colors. Oh! Ha! The blue box! I ignore blue boxes by default. Alright, appables are heading or button style settings only create and use global colors through your own custom color palette. Is that in the back end somewhere?

0:43:56
Is that somewhere else? Look, just semantically, I would think that I’m on my theme style and I’m customizing colors. So, alright, I now respect that there is a warning here or whatever this is, but it’s not really, it’s telling me now to go somewhere else. It’s like, oh, you want to customize your colors? Go to this other colors place. Just a little, I don’t know. Okay, so what happened? Like, where’s, did this ever refresh? I don’t think it refreshed. There we go. Okay, let’s see if anything has happened on the front end with regards to automatic CSS. Don’t think it has H3. Yeah, definitely not. It’s also the most important thing for me to customize it at 1.8 REM.

0:44:44
Okay, but my question is now, can we use a variable from automatic CSS? I mean, we can go let’s view page source. Here is automatic CSS style sheet right here. So, it’s definitely there to be used. So, I’m going to go to back the theme settings, theme styles, typography, H1, font size, H1 font size. I’m going to set this to var text. XL and that is not doing a damn thing. Okay, save. So for those of you using bricks and automatic CSS, oh well that’s not an H3. That would be the first start. Alright, so we need to make this an H1. Save. Front end. Inspect. There it is.

0:45:45
Oh, I put R text L. That’s not going to work either. Let’s go back. Oh gosh. Alright, so we got to go back to theme styles. And then typography. And then to heading. And then there we go. var. Is it right now? It’d be nice if I didn’t have this tiny-ass box to type in. Save. Wait, what am I doing? That’s not- that doesn’t go there. Focus. That’s where it goes. This should be set- oh, it’s switching it on me. That’s why it’s confusing. And I can’t paste. There we go. Oh, look, that’s what it does. It puts it over there when I hit enter. See, it wasn’t me. It wasn’t me. I wouldn’t type it in this box over here. When I hit enter here, it puts it over there. And that’s clearly not what we want.

0:46:35
Yeah, so that’s not going to work. This is a- this is a no-go right now. Alright, we need to fix that ASAP. That is huge. Like the ability to use variables- it just has to happen. It has to happen. It says- alright, so Jason, you same variables work in bricks just not in colors. So you’re saying that when it puts it in this box over here for the unit, it’s actually working. Like that? That’s actually working. Alright, let’s go to the front end. Now it is. You’re right. So now, yeah, looks like the left side expects the numerical value. Yeah, it does. Well, I mean, it should- the left side is the value, right? So the var should be the value. It shouldn’t put the value in the unit box. Right? It’s- the var is not a unit. It’s a value. Okay, so if I go to typography and I change my scale, for example, so let’s go to typography scale. Let’s do perfect fifth.

0:47:52
Let’s change our base text size to 20. We’ll leave out at 16. So we save. Go to the front end. Do we get a bigger heading? Yes, we get a bigger heading. Okay, excellent. So now all of my heading should be good to go if I put vars in there. So we’re going to kind of duplicate how easy is it? Usually an oxygen, the duplicate buttons up here. Let’s go here. Okay, that’s editing. Here’s- I believe this duplicate. Okay. All right. So now we have H2. This would be H3. This would be H4. I can tell that H2 is wrong. H5. And then I’m going to duplicate again. And this would be my H6. Tag H2. All right. So let’s go back to theme settings, theme styles. So normally in- like an oxygen, this happens automatically.

0:48:57
But when we create this for bricks, we’ll make this happen automatically as well. But this needs to go and also be a var. This- this needs to be text- Excel. And then I’m going to hit enter on that. And then the H1 needs to be XXL. And then we’re going to hit enter on that. This one- oh geez. Okay. Theme styles. H3. All right. This needs to be- so we did XXL, Excel. This needs to be L. Then, heading 4. It needs to be M. And then heading 5. I don’t like how it covers it up.

0:49:44
Like I got to go out of this one to get to this one. This needs to be S. Oh gosh. You can’t use the cursor in there very well. If you hit up or down, it’s- it’s so weird. Because I’m like looking at this thing is being selected. And it’s not really selected. It’s like, that’s not what I’m editing. All right. This is going to be excess. All right. Save. All right. Let’s see what the- what the heck happens here. Let’s also owl space this. Hey. It works. No, it doesn’t. I already see there’s a problem with it.

0:50:22
Because of how this targeting works on- on a section. I bet you have put padding on the first one. Or margin on the first one. Oh no. Wrong click. Inspect. And then this is going to be H1. Oh maybe it didn’t. It worked right. Okay. Good. All right. So there’s our headings. Do these all have variables on them now? No. This one’s getting its font size from somewhere else. It’s getting 2.1m. That’s H2. H3. Yeah. These aren’t- these are not- these are not working the same way. And I don’t know why typography heading H1 is.

0:51:09
I’m just going to quickly inspect. Oh gosh. Don’t- don’t. Okay. Oh. It’s taking the V off when I paste. Okay. This- this has to be- I understand that they work technically. But it’s the user experience of typing these tiny ass boxes. And it putting it in the unit side. Okay. Save. But at least now we have typography. Like we don’t have to make any decisions here. All right. So- so now if I change this back to 18, and I change my scale back to something, I can save. And then bang. All my typography changes. All my typography is mobile- mobile responsive. There it goes.

0:52:07
Nice. Okay. And then if I wanted to override my H1, I could still probably do that and say maybe, all right, I want the min to be 3.6 rim. And I want the max to be big. I want it to be a big heading for our H1. That’s going to be 8. And there we go. Nice giant H1 and we got our normal H2H3H4 all the way down. Okay. Cool. Cool. Cool. All right. We are back in action. So I understand now that there’s a theme settings, global styles, all of that going on. That’s good. Let’s see what this inner section has. So section inner had styles. Because when I’m looking at it here, and the way I’m looking at it here, guys, it’s very important things.

0:53:00
I’m seeing a page width here and I’m seeing full width here. And I honestly don’t know why that is. Because this has a 136 rim. It doesn’t appear to be respecting that whatsoever. Inspect. Wait 100%. What are we on here? Yeah. I don’t see where we have the width set here. What am I missing? What am I missing? Why is this showing up correct in the builder? In fact, I’m going to refresh the builder. All right, it looks like this in the builder, but doesn’t look like this on the front end. I have no caching installed. I made sure to turn all that nonsense off. I don’t know. You could try using those inside the global CSS. V missing from bar. Yeah, we got it. UX does not agree for variables thus far. I think the page width thing is a bug in the RC. Okay. Well, that would make sense. Okay. Cool. All right, guys. Well, I don’t know what we can… Let me do it.

0:54:19
Here’s a section down here. Let’s do a clean section. So we’ll add a container in here. All right. And then I’m going to add the section inner to this. And see, that should theoretically… Okay, here’s that CSS I added earlier. We’re going to take this out because that may be screwing stuff up. And now I’m going to go back to theme styles. No, where did I have it? Page settings, page settings, general custom code. This is only for this page, though. Where do I add custom CSS for the entire thing? The entire website. I want this to apply the entire website. I don’t know where. Content. No. Custom CSS, custom CSS, anybody know. Where can I… I just want to add global CSS. Where do I global CSS? Either in customizer or child theme. Okay. Is there a way to generate a child theme or outside the builder and the brick settings? Well, I don’t want to be outside the builder. I want to be at least here. I can deal with the customizer if that’s where we’re going to do it. But… Alright, publish. So, section header… Where did section header root come from? I swear I never typed in the word root. I never did that. Section header… This was section inner. Bricks trying to do stuff for me or something. If you’re trying to do bricks… Alright. This should actually be up here.

0:56:08
Now see, we’ve lost our… I’m just going to do it here. Section, section inner. We’ll do max width… 136.6 rim and margin 0 auto. Okay, publish that. And it’s not doing anything to that section right there. This thing has stubbornly decided that it’s going to be full width regardless of what I ask it to do. Okay, I’m going to take… And we’re going to go to this green light thing. So, green light makes it easy to leave feedback on any website. Add a heading and we’re going to do… Why does it add an H3 by default? It’s a question for somebody. Why does it add an H3 by default? It should add at minimum an H2 by default. I would say H2… You can make a strong case that H2 should be the default. Heading 1 is okay. It’s too easy to forget that it’s adding 1 sometimes. H2 should be the default. 100%. There’s no reason to make H3 the default. So, this needs to be an H1. Alright, so we’re going to do this. Green light makes it easy to leave feedback on any website. Save, refresh. Okay, there we are page width. I’m just going to delete this. This section can go in the trash can. Nice. Okay. Why is my header all whacked out? Let me refresh the builder. There we go. Okay, good. This is what I expect to see. Alright, let’s look at this. We’re going to add another text below here. So, we can actually start building something. I don’t know. I think I’m getting the hang of it. Basic text.

0:58:10
Does anybody else find it annoying that it doesn’t put the text in the thing that you were just working with? And you have to like, where do I drag it? Here we go. Is this how you drag things? No. Oh, I can’t get to this one. Okay, maybe I can do it here. There we go. Alright, just some quirks I got to get used to. I’m already seeing a line height issue with our headings as well. So, let’s go back to the theme styles and go to typography and go to heading one. And it’s got to be in here somewhere. 1.2. Okay. And then on my h2, which I can’t get to without closing that, I’m going to also add line height 1.2. And then on my h3, I’m also going to add line height 1.2. Okay, so we’re good there. Let’s do owl s. Oh, that was clearly put on the wrong section. Yes, I’m sure. Okay, structure. It’s on this inner owl s. Now, I just added it to the h1 or at least in the builder it did inspect, but not on the front end. It’s adding it in the builder, but not on the front end. Okay, so whatever. Alright, we’re going to do a heading. Alright, style is width. We’re going to do, let’s just try this. Let’s just do width m or l. There we go. And then with l here or m maybe, there we go. Cool. Alright, so yeah, this is automatic CSS stuff working. So clearly our heading at the custom size that I gave it is way too big. If we look at this one, it is font size 60 pixels. So it actually needs to be six and all we have to do down here on our override is change this from 8 to 6 and hit save. And now we will have exactly what we wanted for our main headline. Okay, good.

1:00:24
And we need to be bold. So that would be under theme styles. Typography. Having one font weight. Let’s do 800. I’m not using the same font, so it’s going to look a little different. Okay, alright, someone tell me why I’m getting this flash of like, you know, I think it’s, I think it’s has to do with the logo here. Here would be an interesting thing to look at, but I can’t get back to the header from here. What’s all this up here? Templates. Header. Edit. Oh, that’s convenient. I like that. I like that. Alright, what we’re going to do is try to add attributes to this. Because I think a lot of times with SVGs, you get this flash of like, it shows up gigantic and then snaps into its normal size. Even though I gave it a, with the 15 rim. How do I add attributes? Like I want to add a width and a height via the HTML. Is that in here somewhere? There it is. Add attributes with. Shit, I forgot what it was. Okay, it’s 150 pixels. Alright, so we’re going to go width of 150 and height of, let me look at this on the front end, inspect 31. Okay, save. Golden. Except it’s, it’s, it’s like, notice there’s no layout shift anymore. But there is this weird like, why is it loading like that? Is that, is that some sort of lazy loading thing that’s going on? But it shouldn’t lazy load things that are in the header. So, I don’t know. Settings turn lazy load off inside brick settings. Yes, sir. Alright, let’s go to settings. Oh, is it way, way, way back in these settings? Like I saw it. We saw it at one point. Performance. There you go. We’re getting somewhere. Good stuff. Okay. Alright, we’ve got this up here. We’ve got this going on. What else do we need to do? It’s for the documentation. Who needs documentation? I’m going to figure this out as we go. Alright, I’m not going to put this thing in here. Let’s go to unsplash. Let’s just put in like, here we go. Nice. Hold some family photo. Save as family photo. Oh, no, don’t do that.

1:03:23
Download family photo. Okay, scoosh. No, we don’t want to open it. Scoosh, please. Thank you. Thank you. Resize 1920. Download. Save. Replace back to here. Download. Edit with bricks. Get out of menus. Get out of here now. Okay, I’m selecting the container that I want to add the image to. I want to see if it actually adds an image to this container. It does. Okay, good. So now I select there. I do this. I pull this in. I insert. Okay, we take a look at this. That is in fact full width. Okay, and then we’re just going to do radius of M. And that did absolutely nothing. Okay, so we’re going to go to style border. Border. Border again. Okay, got it. All right, so we’re just going to do one rim. Oh, oh, hey, whoa, what’s going on? Oh, because I linked it. Okay, I don’t remember linking it, but that’s cool. All right, so there’s our one rim border radius. That looks really good. All right, so let’s save this. We’re going to go to front end. How do I get to the front end again? Do I have to go through preview to get to the front end? Or can I just inspect things? Maybe I should just learn to do it in this little preview mode. So if I do preview mode, can I inspect? And is this an accurate inspection of what’s going on here? Looks like it. Okay, that’s fine with me then. All right, so this is 884 width. All right, so we’re just going to do. Oh, that’s can. Yeah, all right, back to builder. Okay, good. I don’t know. I kind of like that. I just got to get used to it. So I’m going to go to style attributes, add attributes with height. Save. Okay, preview. Oh, when you refresh it, refer now. Okay, that’s not going to work. We got it. We got it. Oh, no, no, don’t do that to me.

1:06:07
Now we’re out of the builder. All right, so go back. All right, but we’re getting there. All right, so why do we have so much padding? Layout. Okay, I don’t think I need this anymore. Let’s get give it to that. All right, this is the problem with having to go back to the customizer to do your CSS work. A lot of extra stuff. Yeah, see, I never put a top and a bottom padding on any of these classes, but I’m getting clearly getting some top and bottom padding. Maybe I did it on here. I don’t know. Been doing a lot of stuff. I don’t, I don’t see any padding anywhere. Click the bricks logo. You can preview by clicking the bricks logo. All right, let’s try that. Yeah, but it takes you out of the builder. I guess you just got to do it like a command click on it. Yeah. Okay, that’s fine. Whatever. That works. I would like it if that opened in a new tab by default. That would be helpful. All right, so there’s that. What else we need to do? Let’s do two buttons. Okay, that’ll be interesting. All right, I’m in the section. I want to edit. I’m going to add a button. I’m a button. All right, yes, you are. I really want to duplicate button up here. Really, really want to duplicate button up here. I don’t like going way over here and then into this and then doing this. Okay, so we need a solid button, which is really a gradient button and then a book a demo button. Okay, I’m not going to do all the details on this stuff. Basically, what we wanted to say is add to Chrome and book a demo.

1:08:10
I just want to get them like side by side, which we’re going to need a container for that. And I’ve heard something about nesting, but I think we should be okay. So if this button goes in there and that button goes in there, that should be nice. We’ll flex horizontal that. There’s our gap right there. That’s nice. One rim. Actually, we’ll just do var space s. Bam. Okay. Let’s see if the button class does anything. I highly doubt it will, but maybe it will. I don’t know. So we’ll do button primary. Not really. It did some things. It didn’t really do what I wanted it to do. But that’s going to make note of that to fix that. Okay, so this is where you would come in and style the. Okay, it’s getting the color from that primary color I said in bricks earlier. I get that. Alright, so I’m just going to I’m just going to make a button, a standard button class here. And then we are going to make this contain our padding. So I’m going to do a 0.5m 1.5m 0.5m. I don’t like the fact that it tabs down to the unit. Like I don’t need to go to the unit because I’m allowed to type the unit in the box. Right. So it should just be done. Alright, so now this one can be button.

1:09:52
What just happened? Oh, when I switched back. Wait a minute. Hold on. I don’t know what’s going on. No, I just assigned this padding to button. Oh, I guess it just didn’t apply it. Okay. Alright, button primary. I need to take that off. Yes. Okay. So now our buttons look alike. Our button can also have a border style. Border. There we go. Okay. Radius. Var radius. S. You can’t do it here. Right. Am I gathering that? Yeah. This is this is this has to be fixed. That ain’t going to work. Okay. One in. Alright, excellent. This is going to be button outline. And its style is going to be backgrounds of none. Border color is going to be primary. Is this my primary color? This has the same problem with oxygen of color 10. Hey color 10. I don’t know how that’s helpful. It’s color 10. But yeah, so we can’t do bars. That’s what I’m being told. So you can’t go bar primary, which would be super freaking helpful. Can’t do that. Okay. So I don’t know. I guess that’s my primary color right there. So we’re going to choose that with is going to be 1.5.

1:11:43
I’m just going to link those up. Didn’t do a damn thing. Okay. Button outline border border 1.5 pixels solid. That’s why I didn’t do a damn thing. I didn’t have a style. Okay. There we go. So now we have an outline button and we have a solid button. Alright. Good. Let’s move on. There’s a divider. There’s a lot of ways I would do that. And let’s let’s check on you guys in the chat here. What do we got going on? You can add unsplash API and search. Yep. I saw that. That’s really cool. I do like that a lot. It opens a new tab with a front page. It does read my comment above. I think you can right click to duplicate. Can you? Oh. Oh. Oh. That’s very handy. Okay. Cool. Alright. Um. Extra clicks right click over element. You can preview with the eye on the right and come back in the builder. Yeah. Um. Okay. I guess when you preview it’s doing an auto refresh. It didn’t look like it was, but maybe it is. Alright. So I don’t have to refresh when I’m in that mode. I just got to get used to that. Enable the open a new tab toggle and bricks main settings for the toolbar logo link preview. Geez. Alright. Builder. Dark. Of course. Thank you, sir. Thank you. Okay.

1:13:25
Alright. That’s good. Let’s refresh the builder now. And now if I click the bricks logo, it should open in a new tab. It’d be nice if that was the default, but I get it. Okay. Whatever. As long as it’s there, it gives me control. Okay. You have to change the default to your style in the colors. Oh. Oh, no. Oh, no. We’ve lost our buttons, friends. Our buttons are gone. I guess I didn’t save. I thought it auto saved. Okay. Alright. But yeah, it auto saved, but it didn’t auto save my style dog lost my styles. I’m not doing all that again. It’s through that. Okay. Yeah. Yeah. Clearly it auto saved my buttons. They didn’t auto save my classes and my styles. Okay. So the next thing we want to do is we want to make another section. Wouldn’t it be nice if I could just make another section, but I can’t. I got to do this like dance right here with the dual containers thing. So I am going to add another container, which adds it inside. And I don’t want it to be inside. Oh gosh.

1:14:53
Which one is which? Okay. Bring that down and out. Got it. Okay. This is going to get my section class. I’m got another container inside of there. That’s going to get my section inner. And I’m ready to rock and roll. Okay. I’m not going to worry about the divider right now. I’m going to do a lot of what I’d probably do that with pseudo elements. And I wouldn’t even put a physical divider in. But whatever. All the features you need to give clear actionable feedback. Heading. I’m heading. H2. Theme styles. Typography. H2. Font weight. 700. With M. Well, it helps you be spelled the class right. Still in doing anything. Why didn’t with them do anything? Save. Preview. Inspect. With was working up the.

1:16:07
Oh. What’s that? Why is there a span in here? And the span didn’t get. This put the wrong with them on here and didn’t didn’t didn’t put my with him. I said put with them. It didn’t say it didn’t it didn’t do it. What’s wrong with it now? Why can’t I select anything? Save. Refresh. That might be a bug. I’m going to refresh the builder. Okay. Cool. All right. Let’s come down here. Yeah. It never put my real with them on there. I don’t like that you have to. I’m not. I’m not. Doug. What do you? Why? Why are you not working? Is that not assigned?

1:17:08
It’s not showing it as being assigned even though it’s like yellow right here. What am I doing wrong? Look, it’s not. I’ll look at it on the front end too. It’s not assigning that class to this heading. What am I doing wrong? Thank you. Copy the text in. Oh, the span is from copying the text. Well, why didn’t say that anywhere? Here goes my heading. Okay. I don’t know what’s going on. Why is this with them not being applied? Now it’s applied. What is the difference? What is the difference between what I just did and what I did earlier? I don’t know what was happening. Try to click on the external link when you are in preview.

1:18:10
I’m not going to use the combo class as getting applied. Now it’s doing it. But before it clearly was not. Now we need to do this. We don’t have grid. We’re going to do a container. First, I’m going to select this one. Then I’m going to add a new container. Which clearly doesn’t look like it has any spacing. Just ran into the problem again. I put OwlS on this container. And it’s not there. Do you have to type the period? I don’t think you do. Right? OwlS. It did not put that class on here.

1:19:08
I promise you. It did not put that class on here. It’s not there in the list. It says there’s one active class. But I can prove to you that that class is not on that container. This may be a bug. Someone inspects. There’s my container right there. Here’s what I applied it to. There’s no OwlS. We don’t know what’s going on with that. Clear. I can’t get it to do it. Try clicking the class instead of hitting enter. Let’s try that. Let’s clear it. OwlS.

1:19:57
Yes, that worked. Okay. Let’s do grid. What is it for? Global class created. Then we’re going to add a container again. That seems to be working. What is this? What is this? What is this? This is going to be a features card. Then we’re going to add our image. We’re going to add text, which is going to be probably a heading. Okay. Let’s add a heading.

1:21:04
Excellent. That should be an H3. Comment in seconds. Select the image. Nope. Nope. Stop. I’m going to add a feature card. This is going to be a feature card. This is going to be a feature card. It should have been feature card icon. Let’s go back and fix that. Feature card image. We want a feature card icon. So, let’s see. Style layout with 10.

1:21:57
Let’s try again. It’s 6.5. Let’s do 5. All right. Then, I’m going to have to put attributes on this. That’s what I learned before. Actually, don’t know. Save. Refresh. Inspect. Hight is going to be… Oh, it’s a square. Duh. Okay. So, height.

1:22:29
50. Okay. That’s good there. Feature card. I already have feature card heading. All right. There it is. So, layout. Layout. Margin. Top. Var. Space. M. Did it not type?

1:22:54
Oh, gosh. Yeah, it doesn’t. Half the time when I type var, it does not put the V. Space. M. Good. Okay. I don’t… I hate how those cards look. That’s the way that it looks. So, we’re going to clone. Clone. Clone. Clone. Clone.

1:23:20
Can you do this with a keyboard? Kind of. There we go. Okay. Container. All right. Let’s do gap of M. Nice. I think the row gap wasn’t exactly the same, but I don’t know. Maybe just because no borders. I can’t see it. Let’s do a gap of L. Okay. There’s not… I mean, it’s working for the most part.

1:23:53
I mean, there’s definitely some stuff we’re going to have to address that are BRICS specific, but it’s getting there. Let’s do… So, all we need to do now is grid L2. I’m just lost my laptop. I’m just going to just went to sleep. All right. So, we’re going to do grid L2. And we’re going to do grid M1. Save. Do we have a responsive grid? Yeah. Good. Okay. That should have been probably grid S1.

1:24:33
Yeah. Now, where are your breakpoints managed in BRICS? That would be another question, because we’ve got to match our breakpoints in automatic CSS to the breakpoints in BRICS. Yeah. And also, I don’t have the site width set. I don’t think properly. Yeah. I would need to go to view for this one. This would have to be 1366. Save. And then I would have to make my breakpoints match what’s going on in BRICS, which I don’t even know where those are right now. So, I can’t do that. All right. But we’re going to save… All right.

1:25:11
I don’t know. We built some stuff. Let’s look around now more at the builder. So, we’ve been just kind of interacting with it. Let’s check the live chat, too. Okay. Would ACSS version for Gutenberg work with something like quickly? Yes. That would be the goal. But we’re probably going to need a Gutenberg version and then probably a quickly version, too. Because how a builder structures things with HTML depends on how the classes can target the elements. And so, if they do funky stuff with the HTML structure like oxygen does, then we have to create an override file. We basically created automatic CSS that it’ll work out of the box if you’re writing code, right? But then we have an override for every builder that it has to support because the builders treat things differently. Not only do they have different HTML structure, they apply default styles like oxygen’s buttons apply default styles.

1:26:07
And we have to override those default styles to make automatic CSS work with the buttons. Every element in a builder has to be looked at from an HTML standpoint and a default styling standpoint. And then we have to decide what are we going to override, how are we going to override it? What should be the best behavior, things like that? And it’s a complicated process. So yeah, that’s what we have to do. And so we can’t just say, oh, it works in Gutenberg. Therefore, it’s going to work with quickly. Therefore, it’s going to work with generate press or whatever else uses Gutenberg. What else we got? Okay. How long until bricks catches up with oxygen builder? There’s things about it I really like. Yeah, I mean, there’s a lot of things I like about it too. I would agree that it’s probably going to be a year.

1:27:02
Depends on what oxygen does, honestly. If I was oxygen, I would be on notice right now. Like, you have about a year. And that’s when people are going to really start making some decisions. And what you do over the course of the next year could very well, you know, you could, you could keep the gap, right, that you have now. But if certain things aren’t done over the next year, that gap could close. And that gap could even become the opposite, right? Bricks could overtake oxygen in a year. As far as they’ve come in the time that they’ve taken thus far, they’re at a much faster pace. And they have the benefit of a more modern framework that it’s developed on. So, I’m just being honest, right? I, the success of my channel and a lot of the things I’ve built right now relies heavily on, on oxygen being successful.

1:28:12
I want oxygen to be as successful as possible. But I’m also not like, I’m never going to be a shill for any, any one thing. I’m never going to be like, oh, you know, this thing that clearly has been overtaken is still the greatest. Like, I’ll never do that. I’ll just move to the better thing and I’ll build, I’ll make sure that I continue to build the community around the better thing. So, I’m just for the better thing, I’m for the best thing for my agency and for people that I give advice to in general, right? So, I’m not going to shill for stuff. You know, if bricks and oxygen can both be really big, I don’t like the fact that elementary is as big as it is. I don’t like the fact that divvy is as big as it is, because those are not good tools. Like, I want, I feel like if oxygen and bricks and those similar, it’s like, tools similar to this could be at the top.

1:29:08
That’s what I would prefer. Now, I understand why they aren’t, right? Because, I mean, I don’t know, elementary supposedly makes it very easy for non-dev people, designers, whatever to come in and build a website. But to me, it’s, it’s, it’s atrocious. Like, I open elementary and I’m, I just want to jump off a bridge. So, and the underlying, the HTML output is a travesty. Like, it’s just terrible. I, I never would recommend elementary, I, I never would recommend divvy at this point in time. So, if bricks and oxygen could be at the top, they don’t need, there doesn’t need to be one, right? There can be a few that are really, really good options. And then it comes down to preference.

1:29:53
It’s like, oh, I prefer the user experience of bricks. I prefer the user experience of oxygen. Those are relevant arguments. It’s not a relevant argument to say, oh, I prefer element or because it’s easy. It’s like, but you’re built, like you’re building on trash. Like the, the output of element or is absolute trash. And it’s not good for the people you build sites for. Like, that’s, that’s critical, right? So, I have clients. I want the client to have a clean, fast, well-coded website. I don’t want to build it on element or because it’s easy for me. It’s not easy for me, but I can’t make that argument, right? If it was easy for me, that’s not a relevant argument to me. Because I’m not doing something in the best interest of my client.

1:30:40
And so, that’s the argument I would make. But when you have bricks, which has clean code output, and it’s just really well done, and you have oxygen, which is clean code output and really well done, it’s a valid argument to say, I like the user experience here versus there. That’s a valid argument. Okay. What’s your opinion of Brizzy? I don’t know, because I’ve never used Brizzy either. I’m redoing a website that was done in element or it’s using like 120% memory. I’m a server. Yeah, exactly. Okay. Development of oxygen is much slower after four betas, so many bugs, bricks, impressive development speed.

1:31:18
You want ACSS to work with bricks, but please, for this video, just experiment with what the builder has to offer without ACSS. I mean, we are. We are looking at what the builder has to offer without ACSS. I mean, well, right off the bat, you can’t, you simply can’t create a grid unless you’re going to write custom CSS, because there is no grid functionality in bricks right now. I know it’s coming, but it’s not here right now. So, the question is, do you want to see me just pop a few classes on here, or do you want to see me write custom CSS for grid? I mean, either way, you’re not seeing what the builder can do, because the builder doesn’t support grid. So, I could do it in Flexbox, but this is not a good use case for Flexbox. This is a perfect use case for grid, which isn’t there. So, but some of the other things, I mean, you’ve seen, right?

1:32:07
Like, okay, we use the width class up here with L. I’ll take that off. What would I have done instead? I would have come to layout, and I would have gone to max width right here, and I would have set this to RIM, and I would have set it to something like, you know, 56 or 64 or something in there. I don’t know, 80, you could do it like that. So, there’s how would you use the builder? You could also do 68CH, right? So, it changes it to 68CH, which, oh, looks like doesn’t work in here. So, maybe this has to be 100% first. So, with 100% max width 68CH. So, it looks like CH is not a working unit. I mean, I don’t think I’ve done anything wrong, right? Let’s look at the front end, and let’s go refresh.

1:32:59
But see, like, there’s a big difference. Now, look at the situation I’m in, right? So, you want me to do something with the builder, and I’m fighting with the builder, right? I’m fighting with the builder, trying to figure out why is it behaving the way that it is? When really all I had to do when I’m armed with automatic CSS? I mean, people ask all the time, like, well, I don’t understand why you use a framework. I mean, because I get the same result every time. Like, I just do something, and I get the result that I’m looking for. There’s width M. I can take that off. Maybe I want width L, like I had before, okay? I put that on. I know what the result I’m going to get is, and I get it every time, and I’m not fighting with a builder. And then the next time I do a width, like, on this, right here, I know, hey, on this page, I’m using width L for these, okay?

1:33:44
So, I put it on. Now, there’s a bug, obviously, where it’s not actually adding these classes. Okay, there we go. So, now, this is consistent with this, whereas if I had used a random, like, I went to layout max width and chose a random unit, I’d have to remember what that value was. I’d have to be like, oh, I use a max width of 64 up there. So, now, down here, I’ve used a max width of 64. And then if we’re using, if there’s multiple developers, the developer has to go inspect and say, oh, what width was he using here, right? Versus, oh, he’s using width L, okay, so I come down here and pop on width L, and I’m done. I don’t care about values or anything like that. It’s much faster, it’s much more consistent, right? Then you get into something like this, where, hey, grid doesn’t even exist in this builder, but I was able to build a grid with three classes. These are what frameworks do for you.

1:34:34
And if you’re moving from builder to builder, and you can use the same framework on two different builders, you end up where you’re in a situation where you definitely don’t have to rely on the builder. Like, the builder just exists as an interface, but I can just add my classes that I did in oxygen inside a bricks and get the same exact output, and I don’t really have to figure out where the things are in the bricks builder. I get, yeah, it’s nice to know where they are, but it’s also nice to just be fast, right? And consistent, and know that the thing is going to work. So, like, that’s the whole point of frameworks. Super consistent, and then you saw in the beginning, when I was like, just setting up bricks, where it’s like, all right, I’ve got to decide what every H1 value is going to be at every breakpoint. I’ve got to decide what every H2 value is going to be at every breakpoint, what every H3 value is going to be at every breakpoint. No, why shouldn’t I just install automatic CSS and my H1 through H6 are already taking care of. They’re already responsive. They’re according to a mathematical scale. And then if I need to adjust the scale, I can adjust the scale. If I need to adjust the base size, I think I can adjust the base size. If I need to override a size, I can override a size, but I’m not sitting here setting up from scratch, making these decisions that really don’t need to be made.

1:35:47
They can be made for me. So all of that goes to show why the frameworks are so important. Zion Builder Next. Yeah, I can definitely do a live look at Zion Builder at some point. Have you kicked the tires of quickly, very oxygen-like native to Gutenberg? No, I’ve looked at, I watched a video, I watched the actual quickly video. That’s all I know about it, but I have not used it. I will say, I absolutely hate the name. I hate how it’s spelled. To me, it’s not good branding. But yeah, I don’t like the name. That’s going to be a hard thing to get past. Names are important to me. But if it does something like oxygen inside of Gutenberg, I also will say, I think Gutenberg is an absolute trash can. I despise using Gutenberg. I don’t like how it looks. I don’t like the UX whatsoever.

1:36:43
It’s going to take something really impressive to make me want to use a Gutenberg-based environment. It’s probably going to have to do something like this. It’s going to have to transform the actual look of the Gutenberg environment rather than just adding settings panels inside of Gutenberg. That’s going to be a tough sell, just being honest. All right, let’s continue looking through here. Primnaf says that Zion UX is an absolute wreck. I hope not. Again, if Zion can be great, I want it to be great. I want all these to be great. I want to have more options. I don’t want the elementors and the divis of the world to rule the day because they are, they’re just not good. All right, let’s look at what else we’ve got going on. There’s a structure panel. Templates already looked at. I do really like how you can just jump to a template from right here. I hate an oxygen having to go back to the admin, go to oxygen, go to the template section, grab my open the template, then hit edit an oxygen.

1:37:52
It’s a lot of extra clicks. And here’s what I will say. People complain about the oxygen builder loading speed. That actually is, I think they’re limited in that fashion of how fast they can actually make it. And it is faster and 4.0 and it is fast and Firefox. I actually don’t have a big problem with it. What I have a problem with is some of the other UX decisions where, for example, I’m in the builder, and I believe, look, look right here. Okay, this is a good example. The ability while in the builder to say, I want to go edit the pricing page. And I click it inside the builder, like I just noticed this, just sitting there right in front of me. And now I’m on the pricing page. Whereas in oxygen, you have to go back to the admin, go into pages, edit the page you want, edit an oxygen builder, and then finally, you can edit the page. The ability to just jump, like, here we are.

1:38:45
Pages, go to login. I mean, that’s not an actual page, but whatever. That is really, really important. And that is speed of development, right? Take the oxygen builder loading time out of the equation, these UX decisions are speed of development. So that can be improved dramatically. They don’t have to rewrite the entire builder in some more modern framework. They can just make simple UX improvements like this. Now, they already have a template preview selection, right? If you’re in a template, you can preview at any page, any post, right? Why can’t they make a switcher where you can just switch? So I can go FAQ, privacy policy, whatever, back to the homepage. Here we go. Get a little loading time. Bam, you’re done.

1:39:32
You’re there. That is actually really fast, really efficient. That is how it should be done. So they can make improvements like that in oxygen without having to worry at all about builder loading times. Yeah, Andrew says, worst spelling ever for quickly. Absolutely. Like, I even knew the name of it, and I was like, is it with a K? And I knew it was some crazy ass spelling, but I was like, is it with a K? Is it with a K? I guess, see, and then a K? Okay, and then a C? Is it both C’s? Is it two K’s? Like, there’s, I know. Yeah, it’s awful. Editor enhancer has to jump between pages. Okay. That’s another add-on, though, right? Like, that shouldn’t have to be an add-on.

1:40:13
Kind of like copy-patient, and have to be an add-on, things like that. How to build community this toy is buddy-pressed and not like. Yeah, I don’t think I’m a fan of buddy-press either. To the point that even the mouse was not showing, did the same inside bricks, and it’s not super fast. Did a website of oxygen with multiple queries inside a page, and became very unresponsive, extremely slow. Yeah, if there’s multiple repeaters, if what I’ve noticed is, it’s the amount of DOM elements in general. If your page has a lot of DOM elements, basically a lot of divs, it’s going to, it’s going to bog down. It’s going to get very, very slow. And I don’t know if that’s the case inside of bricks. I haven’t noticed any lag whatsoever thus far, but we can just, I don’t know, why don’t we just test that here? So let’s just go clone. Clone. I’m just going to clone the shit out of this. Let’s see what happens. Does it bog down? Does it get slow?

1:41:14
Okay. So now I’ve cloned this a bunch of times. I mean, there’s a lot of DOM elements, right? So now we can say that we’re going to come in here and we’re going to clone this one more time, but I’m just going to take this grid out and just do some things. And the question is, now where am I? Okay, here’s another good thing to look at. Oh, this is the problem, right? No, there we go. It did select it. It did select the element inside. So we’re good there. Can I delete this from here? Yes. Okay. I’m liking this right click menu. The right click menu is a really good, really good thing. All right. So let’s just try adding another image. Image. There’s an auto save more recent than the version. Oh, dear, that’s scary. That’s a scary notice. All right. I’m going to select this. I don’t know. Are we having trouble adding an image?

1:42:17
No. There’s the image, but it’s not in my container. Now it is. All right. Am I getting any lag? Let’s see. Let’s add this thing again. Normally in oxygen, the what’s going on? I can’t see the image I selected. All right. I’m going to refresh the builder now. Maybe we’ve done too many things. Let’s see what happens. There it is. Okay. All right. Let’s just make changes to it now. So normally this is where the lag comes in. So when I start going into these panels in oxygen, and I start typing in here, I start getting stuff going wrong. So we’re going to do 1m here. Link that up. All right.

1:43:08
I’m not seeing a border radius. So it’s certain things. Oh gosh. Never mind. Sorry. I’m in the wrong box. 1m helps when you’re in the right box. All right. That was pretty good. Let’s do. Let’s just add some classes. Because I also get a lot of lag in oxygen when I’m adding classes. This is a class. And then I’ll just do like another class. No. I mean, there’s no, there’s no lag that I can detect. Let’s change the width of this. So we’ll do max width of 64m. There you go. I don’t know. It’s so pretty snappy. Add a solid border to it. We’ll do. Let’s go to border. When this panel’s open, okay. Yeah. They’re still down here.

1:44:05
All right. Border width 5 all around. Let’s do top right bottom left. This is not the, yeah. These are not good labels. Yeah. The top left top right bottom right bottom left. Yes. That’s the order that it goes in. But these labels are not good labels. I don’t know how I understand you don’t have a lot of room there to put labels. But it’s a little confusing. Okay. So we’re going to do 40 here. Now, unlink, unlink. Thank you. 140, 140. Okay. 40 is clearly way too big. 2020. Oh geez. Because I can’t tap through real quick. I’m changing things down here. There we go. So I want to do something funky.

1:45:09
Okay. Now you wanted to add a border to it. So we did five pixels. We need to go solid. And then we need to go. And then here’s where somebody said our colors. All right. So clarify right here. Right now. Like I don’t see a tab for choose. Oh, it’s right here. It’s weird that I would be selecting the color palette. But hold on. Digital gravy is not there. Maybe I didn’t make one yet. Did I not make one? Okay. Let’s, let’s go back here. Steam styles colors. But this was only heading in button style.

1:45:44
So we never found this. We never found our color palette. Where is our color palette? Is it back in the admin? So bricks, settings. Custom fonts, sidebars. No. I don’t see anything here for color palette. All right. Where’s color palette guys? I need help. Phone a friend. Where’s color palette? This is not color palette. Right? Because it says it’s only heading in button styles. You make it within the color picker of an element. Okay.

1:46:24
All right. Well, here’s my element. Border. Border. Color. Oh, right here. I’m going to add your first color. Add your first color. Selecting a color value above and then click save. I have to do this with hue, lightness, and saturation. Or, okay, I can do a hex code here. Let’s do an RG. Oh, okay. I would like the normal color picker here, I think. All right. We’re just going to do this and a little bit less saturation and a little bit more lightness.

1:47:13
There’s our color. All right. Save. All right. Did it save it? I’m clicking the button. Okay. I guess it saved it. I see a swatch. I don’t know. That’s a little confusing. Did it save it or not save it? I’m afraid to do something different. Like, what do I do now? Save here? Oh, dear. Oh, no. Oh, no. We have a lot of them.

1:47:42
Okay. Yeah. That’s a problem. Options are always good. Bricks is awesome because of the speed. How some UI issues to fix. I think. Yeah. I can’t right click and delete them. Okay. There’s a list view. All right. This helps. All right. Delete. Yes. Delete. Yes. Delete. Yes. Yes. Okay. There we go. Can I name it?

1:48:23
I am getting a little bit of lag. Let’s edit. Primary. That’s good. Update. Save. No. No. I don’t do that. Okay. I think it’s good. Primary. There we go. All right. There you go. There isn’t tiny bit of lag. It’s not oxygen-style lag. But it’s- there isn’t a little bit of lag. Okay. Click Save at bottom too.

1:48:56
So that’s how you make. So now what if I go to this element up here? Okay. I’m selecting that and I go to border color. There it is. Okay. Good. And it’s called primary. That’s good. All good. And I can even change the name of it. But what happens if you change the name? I guess if you’re using variables, it’s probably like oxygen. It uses the ID of the color. I don’t know. Okay. I’m done exploring that right now. Let’s see what else we can do.

1:49:30
I mean, this is all standard stuff. Let’s look up here. So we have history and revisions. So I can go backwards through here on our history. Here’s my auto saves. It looks like. So that’s good. We already saw how we can jump between pages. States. This I don’t know what’s going on. Okay. States. Here we go. Ah, here you go. You can create a pseudo class.

1:50:03
All right. That’s cool. So we’ll do hover. And on hover, we want this to get. We want the width to change. Maybe. 64 rim. Save. Preview. Yeah. Okay. Got it. I mean, you would never want to do that. But I got it. All right. Back to builder. So that’s where the states are done.

1:50:34
It is a little odd that that has its own kind of place up here that it’s not like in the panel of the element. Like if you. I don’t know. If I click out of there, it turns it off. So why is it up here instead of inside of the actual panel for the element? I don’t know. Let’s delete that. So. States. Active. Clear. Got it. Okay. Good.

1:51:09
Undo does not work properly. Support recommended getting rid of CT part in url. Okay. Yeah. Biggest issue with oxygen in the bugs. They don’t seem to fix for a while. I have an issue with classes are being applied to other elements I didn’t apply to. I don’t think I’ve ever had that problem in oxygen. How to make background color transition with automatic CSS button utility class. Easy to forget that you’re in the pseudo state and start editing other options as well. Yeah. I can see that. I can see how that would be a problem. Okay.

1:51:48
Um, oh, we’re getting a horizontal scroll issue as well. And I don’t. Oh, oh, look at this. When I was adding images before, it was adding them to the bottom. Outside of the container that I was in. That’s another good. I mean, it’s weird. Like sometimes it’s adding. An element to the container I’ve selected, but sometimes it just decides to add it outside the container. At least that’s what it appears. Let’s refresh. I want to see where this padding is coming from. Oh, it’s applying a margin. No, that was.

1:52:34
See, margin top and bottom is zero. Oh, it’s now coming from automatic, because I turned automatic CSS on. Ah, there. Okay. So in automatic CSS, I just happened to, I just because I use these classes a lot. Remember when I said automatic CSS is built for if you’re coding from scratch, right? So when you’re coding from scratch, you would put a section class on a div. And then you would put a, or really it would just style the section. And then you would put a div inside called section inner. And automatic CSS is picking up the fact that I use section inner in bricks. And it’s applying our default section padding. So that’s helpful. That’s why these sections have padding. If I turned off automatic CSS, they wouldn’t have any padding. And you would have to go add your padding manually.

1:53:25
And then you would have to decide at every breakpoint what that padding is going to be. Or you go get a manual clamp function. But if you use clamp, you also have to have fallbacks. It’s kind of a mess, right? So you just add automatic CSS and all that stuff is taking care of for you. All right. What else do we need to look at anything else? Footer. Let me do a footer real quick because of the way these templates work. So I’m going to go to templates, add new, and I do footer. And then I select footer. And then I publish. It should be quick now that I know what’s going on. Okay. So there’s our header up there.

1:54:11
We’re going to add a container here. This is going to get our section class. We’re going to add a container inside of here. This is going to get our. It added it, but I couldn’t tell it it added it. Section inner. And I’m also going to do a BG of base ultra light. Wrong place. Okay. Let’s clear that out. So take that off. Yes. We want that to be on here. BG base ultra light. There’s my.

1:54:50
Background. Now I’m just going to say heading. Now this is going to be an age two. I don’t like the fact that I have to change that. This is going to be called or we’re just going to say this is my footer. Okay. Save. Now I believe I assign it here, right? Template settings, conditions, add condition, entire website. I can also exclude where this shows up. That’s cool. What if I had a second condition? Okay. I can see how that would work. Delete.

1:55:30
Yes. Okay. Good. No. Stop it. I’ve like this is area is actually a see that. This is actually part of the button. Like you don’t actually click right here. You can act if you click here accidentally. It’s going to add one. Okay. So that’s good there. Save. Oh. Oh.

1:55:53
You don’t need to look at. Queering something. We need to look at a repeater. We need to see if we can do that. Okay. So there’s my footer. It’s assigned to the entire website. This is good. So let’s go look at the front end. Look at that. All right. Let’s also do this real quick. Page speed dot web dot dev. Just shits and giggles here. See what happens.

1:56:24
Still a little performance analysis. All right. What do we got? I’m using a macro PC. How much RAM? Yeah. It’s a Mac one mini. It’s a Mac mini. It’s an M1 chip. It’s got 32 gigs of RAM. I don’t know. 16. 16. I think the defaults eight and upgrade to 16. 16 might be the max.

1:56:49
Because the M1 uses RAM differently than most computers do. So you don’t need as much. I guess you don’t really need a section and a section inner unless you’re doing some sort of full width background color or image. You could just use section inner without a wrapper. Not really. I mean, yeah. Theoretically. But the problem is when you don’t, you can’t predict the future, right? So if you build a bunch of sections that don’t have inner dives, you end up having to restructure the entire section when a certain type of change needs to be made. What’s going on here? And so you end up kind of screwing yourself in the future, right?

1:57:36
So yeah, it might be more efficient when you’re building to do something like that on certain sections. But in the future, you’re screwed. There’s always good to future-proof your development. Same reason why I add dives around images in like repeaters and things like that. Or areas where we’re going to use the same image multiple times, or not the same image, but the same element structure multiple times. I add a div around the image because if I need to add pseudo styling to the image, well, you can’t use pseudo elements on images. So there needs to be a div there. And if you’ve used that card 50 times and you didn’t put a wrapper around your image, you can see the problem, right? All right. Layout shift. I’d like to compare this side structure to oxygen and to see what happens. I don’t know.

1:58:34
It seems like it should be a little faster than that. Now, I don’t have any caching turned on. I’ve done zero optimization. But really, the page isn’t heavy, except for these two images. Those two images are pretty big. But all these SVGs are like inconsequential. And everything else is just layout styling. There’s two images on this page and a lot of text. This shouldn’t be too heavy. Take a look at the HTML semantics. I did do that earlier. We did look at that. It’s pretty clean HTML output. You got to remember to change your section tag to a section every time, if you’re wanting to use sections.

1:59:21
Because it doesn’t do that by default. That’s another downside of not having a section element. But I mean, you see there, there’s my outer wrapper, there’s my inner wrapper, there’s my H1, there’s my text. Okay. So this actually should not be a div. That should be a paragraph tag. And I don’t exactly know where to change that. Where did it go? Display block visible. Oh, it’s on content maybe? There it is. P. So now that would be a p tag. But again, okay, so here’s, you know, I added a text element, right?

2:00:05
And it decided that it was going to be a div by default instead of like a p by default. So I used little things like that. You got to use to, I guess. All right, let’s try to query something. I’m bored. Let’s go do something more difficult. So let’s go, I don’t even know how to get back to the admin. Here we go. The WordPress icon. Okay. So I’m going to go to MetaBox and Posttypes. And we’re just going to say, FAQ. FAQs. FAQ.

2:00:40
Okay. Labels. Add new. Add new. Advanced. Public. Hierarchal. No. Don’t care. Don’t care. Got all that. Okay. Publish. I am going to go to taxonomies. And we’re going to do FAQ categories.

2:01:00
FAQ category. I don’t think I care about anything else except assigning these to the FAQs. Publish. Add new FAQ. Okay. How does Bricks work? It. Actually, I don’t want to use Gutenberg for this. Let’s go back here for just a second. MetaBox. Custom Fields. Add new. FAQ question. Oh no. This is going to be FAQs.

2:01:34
Sorry. FAQs. Add field. Text field. FAQ question. Add fields. Text area. FAQ answer. Publish. Okay. Add new. No. All FAQs. How does Bricks work? Oh.

2:02:04
I forgot something. MetaBox. Custom Fields. FAQs. Settings. Post-site. FAQ. Update. Moving really fast. Trying not to. Let’s not miss things here. Okay. Bam. How does Bricks work? It works pretty well.

2:02:27
It’s an RC. It’s to be expected. Okay. Update. We need a couple more. So let’s do add new. Is the code output pretty clean? Copy. Paste. Yep. It’s pretty clean. Okay. Publish. All right. Last one.

2:02:56
FAQ. How much does Bricks cost? I don’t know. I think it’s like $149. All right. Publish. Publish. All right. Let’s go to. Refresh the builder. This would be good too. Because we’re adding a… We’re adding a repeater. Whatever they call it. I don’t even know what it’s called.

2:03:23
To a page with a lot of stuff on it. So if we’re getting any lag, we’re probably going to get it here. All right. So let’s duplicate this section. Clone. Cool. Get rid of this. Delete. FAQs. Frequently asked questions. Oh my gosh. Can’t type. Okay. Delete.

2:04:02
BG base ultra light. All right. Let’s add what do we do? I don’t know what to do. Where do we add a query builder thingy? I’m going to look around. But if anybody knows right off the bat, go ahead and let me know. What do we have for time? 1204. We’ve got to finish this up. It’s been two hours. I’ve got to get off. I’ve got to work to do. Add container.

2:04:33
Got it. Okay. Add a, I never want to know that. Add a container. There’s my container. Content. Use query loop. Query. Type. Post. Post type. FAQs. Order by. None. Order.

2:04:55
Let’s do random. I like random. Post per page. Three. Offset. Zero. Ignore sticky. Include. Type. Post terms. Users. Include. Where do I do the actual like the type? Taxonomy query. Metacquery.

2:05:22
I haven’t assigned any categories yet. Oh, there it is. I already chose it. Sorry. All right. Space now. So now I guess it’s done. Do I have to like hit apply anywhere or is it just done? Let’s add a container. So we’re going to add a first. Yeah. Let’s add a container. I think it added one. I think it’s an additional representation. The one was added.

2:05:53
Container. Container. Why did it? Okay. Whatever. So what we’re going to need to do is go back to grid three. No, I don’t want to grid. We’re going to grid two. And I’ve already done this wrong. We’re going to add a container here. It didn’t put it in there again. All right. Sometimes it puts it in there, sometimes it doesn’t put it in there. All right. This is my grid two.

2:06:23
It’s also going to have a gap Excel. I’m going to put another container in here. I’m going to clone that container. I’m going to drag the FAQ heading into this container. Along with this. Along with this. Okay. Good. This is my query. I’m going to drag that into this container. Excellent. I think that’s the way I want it. No. Oh, it didn’t go anywhere. Okay.

2:07:02
This needs to go in there. Container. Container. There’s my query loop. Okay. I built my query. Now I need… Why do I have two? I think this can just be in here. Let’s do that. This one can just be deleted, I think. Okay. So I’ve got my grid. I’ve got that. I’ve got that.

2:07:39
And I’ve got that. Okay. Perfect. I’m going to drag the container for the card. All right. And it added it, but it didn’t… Again, there’s no visual representation, at least obvious to me, that it added it there. And it also didn’t select it. Right? Like it doesn’t… I added it, but it doesn’t. Then I have to go select it manually. I don’t like that. All right.

2:08:04
So this is going to be FAQ card. And we’re going to go style, layout, spatting. We’ll just keep this simple. 2M, all around. And then I’m going to add a heading. This is an age 3. I did not click the button that many times. Oh, oh, oh, this is the repeater. This is… Okay. I get it. I get it. All right. So this is going to get a class of FAQ card, double underscore heading. We’re going to add text. This text needs to be changed manually in the content tab to a P, which probably should happen by default.

2:08:49
This is going to be FAQ card answer. Okay. And then I’m going to figure out how to put in content. How do we do that? Let’s look here. Container done in the container. Search for a post query loop in Able. I think it already… Yeah. I already did that though. All right. How do I insert content dynamically? Reset link. Content. Ah, here we go. Little lightning bolt.

2:09:35
All right. This is going to be the FAQ answer. Nope. Don’t do that. Okay. This is going to be the FAQ. Okay. So I delete what’s here. I click the lightning bolt. And then I can do FAQ answer. And what I can do is on that class, layout, margin top, 1m, safe. I can also grab this entire FAQ card. Actually, I don’t want to do that. I want to grab the container, which should be my repeater, right?

2:10:27
This should be the repeater. So this is going to be FAQ’s wrapper like that. And then this should get a gap. Style layout. Because I think it’s already flexed. Yeah, it’s flexed vertical. RoGap is going to be 2m. I’m clearly not on the right thing. But this is not where I did my query loop. The place I did my query loop should be the place I put my GAP class. And that’s not work. Well, maybe this. Let me look out on the front end. We’ll know if we also do this. We’re going to do style, background, color, of white.

2:11:26
And then let’s do border radius 0.5m. Save. Notice I’m not seeing what the others are doing. But I don’t know. Maybe that doesn’t matter. Yeah, there’s no gap there. And I don’t think it would work putting my GAP on the main container, like this container. Maybe it will. It did. Okay. So that’s odd. Because it’s like this isn’t the container I used to create the query. But whatever. All right.

2:12:12
So there’s our FAQ’s. Can we make this bad boy sticky right here? So now we’ll go to CSS. So I don’t know if we just write, writes that, oh, look, I am getting lag. Position sticky. Look at that. So we are definitely getting lag. So kind of the same issue when you’ve got a lot going on in on the page. Now maybe the, oh, it’s having trouble saving too. Oh, moment of truth. Are we about to lose what we just did? All right. Let me see the comments while we’re waiting on this. Now we’re getting into the territory of, should he refresh?

2:13:04
Or should he not refresh? Okay. There we go. It’s saved. So we’re going to have to refresh. Maybe a refresh. We’ll take away the lag. Lightning bolt, lightning bolt, lightning bolt. Cool. Yep. All right. Good. Back to this. Style CSS. Position sticky.

2:13:25
Top zero. Doesn’t look sticky to me. Well, he’s not in the builder. Say position sticky. Yeah. And I gave it a top. It should be working. Where’s the builder? Okay. There we go. Container. Container, container. Container. Container here. Probably, we need stretch.

2:14:08
Maybe style. No, it’s under content. No, that’s not, that’s space evenly. I don’t want space evenly. Okay. Now, yeah. They’re not in their own div. So this needs to be removed from here. So that’s effectively acting as the column and then we need another container. That’s how it added it inside, see? It’s tough to know what I’m adding what to. So I’m going to have to do this in the structure panel. So heading here goes there. Now this container can actually be set to sticky. The lag’s better but it’s definitely still there.

2:14:57
Top zero. Still no sticky. You need to write root before the class so it would be root position sticky. Oh, do they have a preset position, positioning sticky? Display, Flax, HTML. Where is it? It’s not here. Under Layout. Yeah, here we go. Sticky. Top zero. We’ll do like 2.5%. Okay. I just need to know why it wasn’t working when I wrote the CSS. And it’s something with…

2:16:04
Use root to target the element wrapper. That’s what dude buddy was saying. Okay, so I’m going to go to Layout, Positioning, take that off. Take that off. Just clear that. Clear that. There we go. Style back to CSS. This, the lag’s definitely… So do you do root like you do in normal CSS like where you put the colon ahead of it? Or is it some special thing with bricks where you just literally write the word root? There’s a search icon at the very top, you can search from there. Yeah, that’s not doing anything. That works. No.

2:17:23
Oh wait. It works for a second. It worked once. Root position sticky. Okay, I’m doing it like that. Okay, that is working now. Okay, got it. So that’s just… Okay. Understood. All right, so we did a query. We did stickiness. We did a bunch of other stuff. First look, first look. Okay, let’s go back to camera I think.

2:17:56
Final thoughts. I think that there’s definitely some UX things you have to get used to and that’s to be expected. That’s always to be expected. Read the caption under the CSS text area where you enter CSS explains how to use root. Yep, yep, yep. Okay. Seem for you shouldn’t need to do that though. Like why isn’t that just the default if it’s a… Is it because you can create classes there? I don’t know. I don’t know why you would create classes there. Is there an explanation? I don’t know. All right, final thoughts is always there’s going to be stuff that you just have to get used to with the different builder. I do think there’s some UX issues that can be ironed out.

2:18:43
I think that there’s some really good UX things that are improvements over the way oxygen does stuff. I’m going to keep playing with it for sure I have to. I’m going to build this mini site in it and I’ll start making sure that every automatic CSS feature works really well inside of bricks. As far as switching to bricks at this time, definitely not ready to do that. But I am going to monitor it very closely over the next year. I’ll be doing tutorials inside of bricks. I want to keep getting more and more and more familiar with it. And then maybe the speed of what I’m doing inside the builder. Obviously that will improve. I really like the query builder. I think that’s a lot like that experience of that query builder is a lot better than an oxygen. Really like that. I’m still iffy on where CSS goes. Like I’m big on being able to just write custom CSS to get things done. And right now it’s a little bit up in the air of like where is the best place to actually go and do that.

2:19:50
As far as the child theme because this is a theme and not just a plugin for those of you who use bricks. Is there a way to just quickly generate a child theme? Does bricks have that? I haven’t seen it anywhere. You know just browsing around. But is there a way to quickly generate a child theme? That’s a question that I would have. That might make life a little bit easier. But I still don’t know where you would edit CSS like, you know, while being able to see the site and see what you’re working on. Everything you say is true but compared to the youth of the product that’s already very good. They don’t have the same development time since their creation. Yeah, absolutely. The speed that they’re moving at is very, very impressive. And I even said pretty blatantly like oxygen has a year. Like you’re on notice if you’re the oxygen dev team like it’s just fact like you’re on notice because it can very easily if.

2:20:45
Oxygen’s development speed doesn’t continue at a. I actually I would say it doesn’t accelerate. There’s going to be massive competition here. Yeah. So I would love to know what you guys think you use like if you’re in the inner circle definitely will have a discussion thread about bricks. I want to hear what everybody thinks about their pros and and then I want to see what the cons are as well. I like the way that the the theming is done here. I was never a fan of oxygen requiring the header and footer to be in the same template. I really do like the granular approach of here’s my header template. I can assign it wherever I want to sign it. Here’s my footer. I can assign that wherever I want to sign it that that I think is a big big big improvement. I’m trying to think off the top of my head too you know like big things they need to fix the variables in the builder using variables in the builder for colors is an absolute must. Not having your variable magically go into the unit field and be in this tiny little box that you can barely see what you’re writing that that all has to improve like dramatically to be very usable. But overall for where it’s at and for how long it’s been in development and like I’m impressed with it. Okay. I am impressed with it.

2:22:03
So whatever I have is a criticism. I’m still impressed with where bricks is at and what it’s able to do and the general overall user experience. I think there’s some things that need to be ironed out and made better. Obviously that’s always the case. That’s the case with automatic CSS. There’s a shitload of stuff that needs to be improved. I think with automatic CSS and it’s the same story right. It’s a young product and so that’s just the natural it’s the natural course of things. But yeah I’m excited about where bricks is going. Thank you guys for tuning in to this. I’ll be doing more lives if you like this kind of stuff specifically for AMAs. We can do oxygen AMAs. We can do agency and freelancer AMAs for business related stuff. We can do SEO AMAs. If you like this live approach and you want to be able to have more of this interaction versus just watching videos. Definitely let me know in the comments. But that’s it. I think I’ve spent a time on this.

2:22:59
We’re almost at the two and a half hour mark. I got to get some lunch. I got to do some work. Alright, I’m out. Peace.