Day 2: Today we build the hero section | Bricks website build: MyxoTech

What it says on the tin. Come join me and let's build the hero section of myxotech.com, including the claim with that frame that opens on the right edge and lets the content flow out!
/* Here's the full playlist */
• Full Bricks Website Bu...
/* Recommended shtuff */
Sridhar Katakam's CSS for outlines:
brickslabs.com/outlines-for-e...
// My edited version of the above CSS:
// (this makes the outlines only appear when the mouse cursor is actually hovering over the canvas and it doesn't require the PHP snippet from Sridhar's article)
body.logged-in:not(.admin-bar, .bricks-is-previewing):hover [class*=brxe-] {
outline-style: dashed;
outline-color: rgba(0,135,255,0.50);
outline-width: 1px;
outline-offset: 0;
}
body.logged-in:not(.admin-bar, .bricks-is-previewing):hover [class*=brxe-]:before {
outline-style: dashed;
outline-color: rgba(89, 0, 255, 0.35);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: 2px;
}
body.logged-in:not(.admin-bar, .bricks-is-previewing):hover [class*=brxe-]:after {
outline-style: dashed;
outline-color: rgba(255, 153, 0, 0.35);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: 4px;
}
/* Chapters */
00:00 Recap: open question from day 1
00:29 Hero structure: placing the elements
02:42 Background effect: diagonal line
07:34 Naming elements, entering contents
09:33 Styling the claim
18:16 Building the claim frame
26:39 Background nudging + anti-aliasing
28:22 Finishing up the claim frame
33:00 More styling, BEM magic in AT

[@vaughanprint]

The frame element around the hero text content is one of those touches that can really add a lift to a layout. Becoming proficient in Bricks makes these a breeze. I would have tried a lot of stuff when using Divi but the builder wasn't inclined to lead one in that direction. It would be curious to see if post Divi 5 weter Elegant Themes make an attempt to pull the builder in the direction of something like Bricks. There are some hint, like where they added a free form CSS editor where one can use the selector keyword, a bit like root, but so far it doesn't perform to the level of the root dynamic selector. In any event, wIth all the exterior services that Divi provides, including all the AI stuff, I couldn't wait and jumped to Bricks eight months ago.

[@mr.matt.eastwood]

Saw this frame on a website called winwinit dot eu that I randomly happened upon. I looked into the DOM to see how they built it and then shamelessly stole the concept, knowing I can just straight-up rebuild exactly that (with my own tweaks as I want them) with in Bricks without needing any duct tape or WD40. Thinking back to my Beaver Builder days, it would have been so much more difficult to cleanly build this. With Bricks, it's just so straightforward! I really wanna take a look at Divi 5 when it comes out. I'm really happy we have a proficient Divi user in our roster for an upcoming Bridge Builders episode, that way we can look at Divi 4 and then again Divi 5 when it comes out. About AI, I'm kinda torn. When I see Elementor, Divi etc. shoving it into their builders, I'm so happy Bricks is doing none of that. On the other hand, I wonder if that just makes me a cranky old man about to become obsolete. ;-) Thanks for watching @vaughaprint !

[@samjansen6510]

You only use Advanced Theme or also ACSS? I see AT in the video seems pretty good. I only have ACSS license currently

[@mr.matt.eastwood]

Only AT on this build. I have an ACSS license but haven't yet used it. I'm starting another project right now (recording that too, including conception and design in Figma) and I think I'll make this my first ACSS project. Thanks for watching! I can very very highly recommend AT, it's dynamite.