WDD LIVE 034: Live Frames Build + Q&A/AMA

0:00:00

Hello, hello, hello everybody.

Good morning.

So we’re doing things a little bit differently today.

Let me go, oh we’re also back to Ecamm, we’re also back to Ecamm.

I was not satisfied with the StreamYard streaming quality and they could not do anything else

I was streaming at 1080p and that’s the highest resolution that they, and clearly it was not 1080p like it doesn’t it didn’t look like 1080p so Now I never tried it with just a single location stream.

I might give them one more shot, but As it stands we’re back to ecam live I don’t even and I haven’t used ecam live in like a month or two so give me Give me a second to figure out where my screens are okay here’s comments and reactions all right good good good sound is really bad or low low low hold on hold on hold on hold on okay preview main camera okay options audio speakers I know why hang on hang on hang on hang on we got a reason we got a reboot to the mixer hang on I don’t even know if you guys can still hear me. 0:01:31

I can’t hear myself anymore. So if you guys can still hear me, the Rode mixer has to reboot and it takes like a minute.

So just hang tight.

Can you guys still hear me? I know it’s bad but can you still hear me at least?

Like a little bit?

Anybody, anybody, anybody?

Let me get this. Okay.

The one thing about this road mixer is it’s like rebooting a fucking computer from like 1996. It’s like it takes forever to reboot.

0:02:52 All right, it’s coming back online.

Hold on. It’s coming

0:02:54 back online.

Let’s see. Can we can we choose a different audio source now?

I gotta get back to Ecamm. It might have done it by itself.

Let me check. 0:03:02

Speakers. Okay.

Main stereo. Let me check.

0:03:06 Ah, speakers, okay.

0:03:08 Main stereo.

0:03:09 Can you hear now?

Are we good? Are we good?

Okay. I’m not using this today because we’re doing live.

The audio will be a little worse than normal because I’m not gonna use this mic. I’m not gonna use the SM7B.

I don’t like things in my face when I’m trying to actually work. So yeah, but at least better than, I think you guys were hearing the built in speaker on this Mac over here.

Okay, wow, what a start, what a start. Alright, we got 80 people here, so that’s fantastic.

The other, yeah, there will just be a little more echo than normal. So here’s the thing.

There wasn’t a lot I looked in the list of sites to critique there wasn’t anything that really caught my eye or super interested me. I also wanted to just kind of mix things up a little bit as we often try to do here on WDD live and you know we have never done live builds before I do live builds inside the inner circle I do work sessions with Kevin.

Actually, this one’s going to be a little bit different than the way that I do it there. There I just play music and we chill and I just work.

We all work together. It’s called like co-working with Kevin.

It’s fantastic. It’s fun.

This one will be actual like I’ll be explaining things as I go because the whole goal obviously is to learn and I might even ask for input from you guys. We’re going to, we are going to take our time.

I might build a little and then come back and look at the chat and then I might ask questions or answer questions or we’re just going to, we’re just going to chill and work through building a frame today. And literally I was just like scrambling.

I didn’t even know like this was a last minute idea. As you, I scheduled the stream like, you know, 50 minutes ago.

Normally I schedule it like three days ahead. And so I didn’t even have any like concept of what to build.

Like what were we gonna work on? So I was literally on Dribbble, I was looking around, I was looking around on OnePage Love, I was looking at, I couldn’t really find anything.

I mean, a lot of frames, if it’s like standard kind of layout stuff, it’s already done. Like it’s already done, we’re not gonna do that work again.

Um, so I’m always looking for like new ideas, new concepts. And I went back into our frames, um, list of like ideas, uh, of things that we might want to do.

And I found the set of cards. Uh, so I’m going to share my screen here.

Let me see which screen I’m sharing. Um, okay.

Oh no. 0:05:56

Oh God. 0:05:56

Ecamm is like, we have an update for you. No, no, not now.

This would not be a good time. All right, let me bring this over here.

And so I found this. And let me get back to I want to see he cam over here.

Okay, and I want to see our chat. Fantastic.

Okay. So I think this is what we’re going to work on today.

There’s this it’s this I don’t know. Oh, it looks like it’s a theme.

Okay, swoop. So somebody on the team had marked these as a potential option, and basically what it is is you see is profile cards, but when you hover, we get the name of the person, we get their title, and then we get their social icons.

And we also get this darkened overlay back here, and then it all kind of animates in, and then you also see that the person, actually it zooms on the card when we hover. But as always, we check these kinds of things and see like, hey, did they cross their Ts?

Did they dot their Is? What does the Dom look like?

So if we do a little inspection here, and I wanna go slow because a lot of people are like, I wanna know more about your process of how you build things and how you think about the different aspects of what you’re building and why you do things the way that you do. And so instead of just like, hey, let’s build a card and I’ll talk you through it and all that, this is how I start.

I mean, this is to do the whole process. This is to do the whole process.

This is how I start. I look at something, look at the DOM, right?

What did they do right? What did they do wrong?

I mean, the first thing that we see right here is we don’t even have a grid. We’re not using CSS grid here.

We’re using Flexbox, which creates odd alignment issues because they’re doing a margin right of negative 30 pixels on stuff. And it’s just, I mean, this is like old school, how do you build a grid with Flexbox?

Because we either don’t know how to use grid or I mean look at this there’s like there’s padding bottom on here look at this this is this is what’s there’s no gap in here they’re not using gap they’re using a padding bottom of 30 pixels I mean this is like whoa man 2008 called and they want they want their grid back and then we just have divs we just have a bunch of divs there’s no no real semantic HTML here no unordered list no list items no articles no no nothing here and then we open this up and we’ve got a bunch of nested stuff we have an image that’s not in a figure tag we have yeah just oh we have an empty an empty link and that’s always good link with no anchor text it’s always always an added benefit to to your cards and then we check accessibility you know we come over here I click like before the grid so this should be the first like focusable element we have no focus dials zero zero focus house what so I don’t have any idea what we’re focusing on right now what ideally what would happen is see this hover effect well that should be the focus effect too. When somebody focuses on the card, which the whole card needs to be clickable, when somebody focuses on the card, it should have the exact same effect, the exact same things should happen.

And that lets the person kind of navigate with the keyboard through these cards exactly the way I’m navigating through the cards with my mouse. The experience should be exactly the same.

we get an announcement of these links or these cards which we can’t I’m not going to do it here on audio I did it like right before I started the stream it doesn’t announce things properly I mean this is a it’s an exam and and you know I don’t necessarily know that this is query loop compatible it’s almost certainly not done with a query loop if we’re gonna build one for frames, then it’s gotta have all these things that this example doesn’t have. And then we wanna think about additional scalability and maintainability, like with the use of probably locally scoped variables.

So those of you who did page building 101, I mean, we’re gonna have to put a lot of concepts from page building 101 together to build this. But I mean, what do you is this can hear you same low volume?

Is there something wrong with the volume? Can everybody hear?

Maybe turn your volume up on your on your speakers. I feel like the volume is as high as it goes.

I’m looking at the meter on the mixer and it’s it’s suggesting that there’s no problems. But let me know.

Let me know. The other thing I want you to let me know, okay, Nick says volume is fine.

So is this an all right frame? Is this a decent frame?

I found this last minute as an example of what we can potentially do. And if you like this kind of concept where we build something live, and I also want you to see the challenges that are gonna arise.

I already know there’s gonna be a challenge. And hopefully we can find a solution for it.

See the thing is with, when we use like the clickable parent technique and we’re thinking about accessibility and we’re thinking about things like that, you can’t do certain things. Certain things cannot be done without workarounds or you just have to make concessions.

Like for example, we’re gonna make the heading, the person’s name, we’re gonna make that the link, right? And we’re gonna make that expand to the entire card to make the entire card clickable.

We can’t animate the heading when we do that. If you’re using transitions to animate headings, that breaks the clickable parent technique.

So we either have to find workarounds, which can cause other problems, or we have to make concessions like, okay, we’re not going to animate the heading, we’ll animate everything except the heading. You’ll see as we get, I already know that that’s based on past experience that that’s going to be a challenge.

So yeah. Luca says, I’m specifically interested in the micro interactions of the appear disappear phase.

Yeah. 0:12:14

Yes. 0:12:15

So we see right here like these, can I draw? Yeah, there you go.

These icons all come in at different, either different speeds or different times right so we might need to adjust the duration of each icon as it comes in or We might delay each icon as it comes in we’ll see You never know until you get there, and I think a lot of beginners and intermediate You know even intermediate developers sometimes. They well, I guess it would be more beginners probably not even intermediate Beginners are just like I have no idea how to do this so I’m not even gonna try.

I encourage you to try like I encourage you to get as far as you can. Start with what you know you can do and then just keep going piece by piece by piece.

That’s exactly what we’re gonna do right now. I don’t know everything that we’re gonna need to do to build this card like right from the jump.

I have an idea, I have an idea of it but then you start doing it and some things break or some things cause other problems and you have to problem solve. It’s a process of problem solving.

And if you solve enough problems, you can eventually arrive at where you wanna arrive. Okay, so I’m at Bricks in our, yeah, our source website for frames.

I’m gonna go into the frames here. We are gonna add a new frame.

And this is going to be called, these are called profile cards and frames. So they’re like a person’s profile.

I should have called them avatar cards. That would have probably been a better thing to do.

There’s a lot of things, you know, a lot of decisions you make and then months later you’re like, why did I make that decision? That’s fucking stupid.

And this is one of those cases. It’s just, it’s an annoying thing that irks me.

If you’re annoyed by the fact that these are called profile cards I’m with you. I’m just as annoyed as you are.

This is going to be profile section golf. I always start with the section frame then we go down to the atomized level of things.

Alright so this is going to be a section over here. I am your author for today.

This is going to be a section and This is going to be in the template bundle of profile, okay? We don’t have a featured image yet.

We’re gonna save this as a draft. We’re gonna edit with bricks Let’s see question what does the down arrow under our team do nothing on my end down arrow under No, it doesn’t do anything.

It’s just they put it there, I believe, as like a visual cue to like, hey, look down and find our team. But you’re right, it’s the same icon as drop downs and toggles.

And so I don’t think a normal person would want to click that because you know, they’re not like us. But we are like, that’s usually seen on a toggle or a drop down.

I wonder if it does something and it doesn’t. Okay.

Could we have another choice for a potential frame? I agree, I think another frame would be good as well.

More beneficial if name and job title are visible. I’m not a big fan of hiding information in the first place, frames, testimonials would be good.

Well, I don’t know, do you guys have an idea? What’s wrong with this one?

You don’t want to you don’t want to see this one because it has because the contents hidden It’s hard to make switches last-minute, you know Justin says it’s a clean professional minimal frame. I love it.

This is what’s amazing about this is what’s really fun especially about building something like frames is you know literally every any frame any any idea any concept I could bring up on the page. And 50% of the people are gonna be like, fucking build it, let’s go.

And the other 50% of people are gonna be like, I hate that frame, let’s do a different frame. So I don’t think this is a winnable situation necessarily.

So team Keeley says we don’t need any more team cards. But then 50% of frames users would be like, I don’t have enough team cards to choose from.

It’s just fun. It’s just really, really, really, it’s really fun.

I love unwinnable situations. And the point is, yeah,

0:16:32 and the point of stuff like this too

0:16:33 is if we’re doing it for learning, you’re gonna learn how to do certain things even if you don’t wanna build this exact thing.

It teaches you approaches for other concepts. Okay, we’re gonna rock and roll with this one.

Hey, here’s the thing. If you want, let’s just do this.

If you guys like this concept, if you like this, you know, format for some WDD lives, submit concepts and then we’ll choose from the ones you guys submit. We did this last minute.

I picked this last minute. We got to rock and roll with what we got.

Can’t please all the people all the time. 0:17:09

That’s right, Carl. That is absolutely right.

Okay. I can see some use cases for

0:17:10 this.

It’s a great opportunity to learn some stuff around animation. Crack on I say.

Okay. All right.

Let’s do it then. Let’s rock and roll.

All right. So I’m gonna add a section and the way that I do it in frames because you know it’s again we want to cross every T dot every I.

I put classes on everything as I add them typically just to make sure nothing gets missed I always go back and review obviously, but it’s just good to kind of have this process So this is going to be called its profile section profile section golf They all have the FR extensions on them And then I’m going to name everything here profile section golf And then what we want to think about is what we’re going to name the grid. This is pretty standard so this is going to be profile grid golf profile grid golf and the reason this is not like fr profile section golf double underscore grid or something like that is because this grid could live anywhere in any frame right the frames is modular so you can take this grid of people cards and put it anywhere you want It doesn’t have to live in profile section golf.

Okay, so it can’t be named as a child of profile section golf It’s its own block essentially. So it’s FR profile grid Golf.

All right, FR profile grid golf and we’re gonna call that this profile grid golf okay and then what we’re gonna do is we’re gonna stick a card in here that’s gonna be a block and this is gonna be called profile card golf this is also its own block because you could use this card anywhere right so it’s not a child. FR profile card golf.

Okay, so effectively now we have three block elements. All right, now what we’re gonna do is make this a grid.

So we’re gonna display this as a grid. We’re gonna go with grid three.

They use three columns, we’ll use three columns, that’s fine. We’re gonna do a gap of grid gap for right now and we will pause there.

Okay, so I’m gonna see if I can save. Can I easily save these images?

I can. Let me bring up downloads.

Let me just delete all my downloads. Okay, and then let’s save these.

You know, I’d love it if they named it something like, can we not name it Amy Walker or something like what is image 86 copyright spelled wrong. So we’re not going to know who’s who after we save these images.

Another fantastic detail. All right save, save, and save, and save.

Now for us, we use placeholder images right so we have this little avatar person. So like if I insert an image right here, go to placeholders, and then we have this dude, right?

But the problem is, is he doesn’t really give the full effect, right? So when I develop the frame, I do actually use real images.

Then I just swap them out with these blank avatar people. All right, so we are going to go into, let’s go to gallery, and let’s throw these people in here.

So downloads, throw all these people in here. Question, why are you using Ecamm and not the other app?

Did you already say why I’m working in the background? Sorry.

Yes, I already said why. It’s because the screen, well, Derek, you, you, Derek, Derek, you are one of the ones I believe that complained about the screen resolution of StreamYard.

And now you’re like why isn’t he using StreamYard? Yeah because the resolution wasn’t good enough.

Okay let’s see where do you want to submission of concepts? Good question, good question.

Kevin at Geary. co Kevin at Geary.

co just send them there. I think we actually need want more content frames.

Okay Manny throw me some content frames ideas and we will we will tackle that Do an about us page. I would love to see your thought process on how to make it more interesting Well, this is a sec.

This is part of an about us page, right? This is a section that would go on and about us page Mm-hmm.

How about creating a visually hidden title the link and a visual title that is animated. Yeah, I’ve thought about that as well That’s an option we can look at for sure.

It uses a dummy element, which I try to avoid. Like if at all costs, if we can avoid a dummy element, we should try to avoid a dummy element.

But if we can’t avoid a dummy element, then maybe. .

. But the thing is, is if we’re visually hiding it, that’s already.

. .

It probably, yeah, it may still work. It may still work.

We put a span on the text. Yeah, we can try it.

We can try it. 0:22:29

Okay, let’s go. 0:22:30

Select an image. Let’s throw this person in here.

Okay, we’re gonna wrap her in a figure tag. And she is going to be, I’m also gonna put a media wrapper in here.

So we’re gonna wrap, let’s actually back up a step. Let’s go with a, if we look at this, actually, yeah, we probably don’t need a media wrapper for this at all.

We probably do not need a media wrapper. Let’s throw that image back in there.

All right, this is going to be fr profile car golf double underscore media. Okay, and then we’ll select image, bring her in, insert.

Okay, excellent. The next thing I want to do is I want to, because that overlay is only when you’re hovering, and it can be an element that can have its own transition effects and such, I just want that to be a separate overlay element, right?

So we’re gonna add a div, we’re gonna call this overlay. This is gonna be fr feature card golf double underscore overlay.

That’s fantastic oh oh this class already existed in here for some reason fr feature card golf yeah but there is no card I checked beforehand these are these are classes from something else Nope. Okay.

FR feature card golf overlay. Delete, delete, sure.

Save. Refresh the builder.

Because anytime you delete classes, my experience, better refresh that builder, my friend. Where did align content start come from?

That’s not a thing. Okay.

FR feature card golf double underscore overlay. And now nothing should happen to that box.

Thank you. Okay.

We’re back in business. All right.

Now what we’re going to do is I know this overlay has to be positioned absolute, right? So immediately we’re going to go to FR profile card golf.

We’re going to set the position here to relative. Okay.

Now we’re going to go to overlay and just an inset of top, right bottom, left zero position absolute. That’s going to make it take up the entire card.

And then what we want on this card is a gradient. It’s not a normal thing.

And now comes the question of, do we immediately go to our CSS box and do it there? Because I want to use locally scoped variables.

I think I’m still going to use, at least for now, I’m going to use the overlay area. But we are going to use locally scoped variables.

So when you’re doing gradients, just this is what I tend to do. So I’ll come in and again, it’s kind of like what I do with pseudo elements.

It’s like make it as ugly and obvious as possible and then it’s easier to dial things in, right? So I have like a red and blue gradient and what we need is, you can kind of see like it’s darkest at the bottom, it gets lighter and really should get transparent as it gets to the top.

Both colors have transparency but up here doesn’t really need any darkening at all whatsoever. So in our example the blue is the dark is going to be the black area okay and the the red area is going to be our transparent area and it’s almost like just fine like that.

So if I just take our red and I turn it to transparent You’re gonna see what we get now and all I need now is for the blue to be like a black You know with transparency and so we can bring in something like black trans 60 and see people are always like why do you need? The transparency variables, I don’t use too many.

This is why this is why I mean, if you if you if you do things like this constantly, transparencies are like some of the most helpful utilities imaginable, right? The idea that I need to go create manually transparencies for all my colors.

I mean, that would that’s sounds like a nightmare, right? I love them all all there just from automatic CSS providing them in a library.

Okay, so now what we’re what we’ve achieved is profile card golf with an image which is wrapped in a figure tag. We have an overlay with a gradient on it, which is fantastic.

And now what I think we’re gonna do is we’re gonna put a wrapper for our content, okay? So I’m gonna add a block and this is where we’re gonna place our content.

Now, what I don’t know is are we going to position our block at the bottom or are we going to make the block take up the whole thing and just position our content at the bottom. You could maybe do it both ways you know there’s a lot of a lot of roads that read that lead to the same place in in web design.

So we just have to go well I don’t want it in the overlay what are All right, let’s call this content wrapper. All right, we’re gonna say fr profile card golf double underscore content wrapper.

Excellent. And then what I want to do with this is also position this absolute.

Okay, so and I think when you position this absolute now that answers the question. We are going to have to make it the full size of the box.

Otherwise, our clickable parent link that we’re going to do later is not going to take up the entire card. All right, so we’re going to go position absolute on this.

Same thing that we did more or less with our overlay. And then we’re going to add, let’s at least get some content in here now.

So we need a heading, we need a little text link. What we’re also going to need to do is test this with a query loop.

So we’re gonna have to quickly build a little CPT action. We’re gonna tackle the social share icons in a moment.

We won’t even worry about those for right now. Alright so this is gonna be fr profile card golf double underscore and we’re gonna call this heading.

And then this is gonna be our title. That’s her title.

I’m actually going to call this name. Let’s go edit this heading and call this name.

So that’s the person’s name. That’s the person’s title.

This is all fantastic. So the fact that this now is the full size of the card, we’re just going to use Flexbox to position the content in here And I’m really hoping this doesn’t cause any Issues later with stuff when we try to animate.

I don’t think it will I don’t think it will but you never know All right, so padding here is going to be Let’s do space M for right now That’s gonna bring that in We also want to add a little bit of a row gap here and I’m gonna go content gap divided by two and then on Typography we’re gonna go with white. Okay, and is this an h3 heading h3 heading?

Is this a paragraph? paragraph Okay That actually probably doesn’t need to be a paragraph It probably needs to be a span because this isn’t actually a paragraph of text.

It’s just the person’s title Like that and because that’s not a paragraph of text and it’s just her title We’re gonna make a little adjustment on this we’re gonna go Divided by four. Okay Save see I can use these calcs to just Dial in it’s still a ratio of the of the main content spacing But it makes it so easy to just a little closer, a little closer.

I really like the the calc technique here. Okay.

Profile card overlay not feature card. Profile card overlay profile card overlay.

What you talking about Willis? Profile card overlay.

Feature card. Oh, profile card profile card.

Golf overlay. Okay, good, good, good.

Did I do everything else right? Content, yep, yep, yep.

Okay, it’s just that one. Got it.

Okay. Derek says 127 people watching, only 39 likes.

This is not a, that is not a good ratio. You are right, my friend.

Derek is 100% correct here. I did notice that you finally updated your Chrome browser.

Congrats. I don’t even know if I did or not.

I don’t even know if I did. I can see why Kevin is investing in an auto BIM feature.

I could actually use auto BIM right now but I don’t I don’t want to bring that extra thing into the mix right now. It’s still beta technically but it is it is working.

It is here and it’s fantastic. It’s guys oh let me just pause to tell you right now.

For those Frames users who like to import a frame, you know it’s got all the Frames classes, right? And then you’re like, no, no, no, no, no, I want to create my own classes and copy the styles over to those classes and then get rid of the old Frames classes so they’re not in my database.

I want to keep my classes database nice and clean so that if I ever need to import that frame again, I get a clean version of that frame. If that’s your workflow, AutoVim is gonna save your life and you are just gonna love it.

I mean, you are gonna be absolutely ecstatic because you can do that in one click. You can do that in one click.

Well, maybe two clicks. It might take two clicks.

Yeah, two clicks, two clicks. Which is way better than the 50 clicks that it probably takes you right now right you’re gonna love it it’s right around the corner my friends it’s right or what’s today what’s today today Wednesday Monday Monday or Tuesday it’ll probably be in your hands Monday or Tuesday all right let’s keep going all right what are we doing here why does my why does my whole screen look dark oh cuz I’ve dragged somehow dragged the overlay out of its wrapper here okay I think our content is oh yeah there we go overlay goes on top of the image let’s get things in the right order all right so we’ve got name we’ve got title excellent now the problem is is these things show up oh you know what I’m thinking now I’m thinking now we need to go profile card golf we’re gonna write CSS here to alert people that we’re gonna have some CSS here.

Okay, root and we’re gonna define some locally scoped variables. Let’s go with overlay color and that was what black trans 60 or something we used.

Okay, then I’m gonna go back to my overlay and we are going to go to color two here, and this is gonna be overlay color, all right? And now what this allows people to do, so they don’t have to go hunt down, where is the overlay coming from?

I wanna change the color of the overlay. They can just do whatever they want.

Actually, action, every color on this site is exactly the same, because it’s a wireframe site, it’s all blacks and whites. So we can’t see another color, but obviously I could remove it here, right?

Actually, I could just put a normal value in. Let’s just put red.

Okay, so see, they can just, right here, they can just change how the overlay is working. That’s nice and simple.

Black trans 60, awesome. Okay, so now what we wanna do is we probably want to, and because this is gonna have child elements doing things when you hover the parent element.

To me all the CSS should be in the same place. It should not be spread out across all of the elements.

It’s like hey I want to affect everything possible from like one centralized location which is the parent element profile card golf. Okay so let’s get the first thing first before we make anything disappear.

The question is can we get her to scale, can we get her to get bigger when we hover the card. So I’m going to do a root of hover here and I’m going to say when we hover the card because we’re on the parent so when we cover when we hover the card we got to do something to the child and this is where a lot of you people asked about the root selector.

I just said you people. A lot of you people asked about the root selector and how this helps with some of this stuff in the custom CSS box.

So I named her media, right? Double underscore media.

I don’t have to write fr profile card golf out again. I can just put root double underscore media and that’s going to target her or should target her and how do you know if it does or doesn’t?

You do your border check, right? Border five pixel solid red.

Like, are we targeting her? And clearly we’re not.

So what’s the problem here? FR profile card golf double underscore media.

FR profile, oh, well, when we hover. Sorry.

Okay, so yeah, see, we are. Now when we hover, we get a border on her.

Now do we need a border? No, we don’t need a border.

What do we need? We need to scale her.

And then let’s do 1. 1.

See that? Now you’re like, well, that looks janky as hell.

And you’re right, we’re not where we need to be yet, right? It does look janky as hell.

What are the problems that we’re running into? One problem is that she pops out of the box, okay?

Like see how there’s the border of the box and she pops out of the box. We don’t want to see that.

And then she also does it like, like a horror movie, right? It’s like, there’s no transition.

It’s just bam, there she is. Okay, so we got to solve those two problems.

How do you solve, let’s just do pop quizzes throughout this thing. How do you solve her popping out of the box?

Pop quiz, pop quiz. Justin’s already got it.

Okay, overflow hidden. So right under scale 1.

1 we’re going with overflow hidden. And now, nope not on that though, we’re hiding overflow on our parent.

Okay, so we go to the parent element, overflow hidden, and root profile card golf. Oh it does help when you put a colon.

See this? Now we have no more overflow.

Okay. Now who is going to.

. .

Okay, there we go. Carlo already got it.

Good job, Carlo. So now we need to transition.

Alright, so here’s the thing when you’re doing these transitions. Now I’m gonna come down here and I’m gonna I’m gonna start commenting the CSS.

Okay, because we. .

. Oh!

Trick. A trick.

I just discovered this trick. Really good for workflow.

See, I have to keep like scrolling. Every time I, first of all, you’re here, right?

You’re like style. Then even if you’re, let’s say, usually you’re not in the CSS panel.

So you gotta like close this, because I can’t even freaking see hardly the CSS panel. So I gotta close this, then I gotta open this, then I gotta scroll down, all right?

Check this out. So we get this, and we just type CSS, and it brings it right there.

It goes to that tab, and it brings it up. I don’t even have to scroll down.

I’ve been trying to get this into my workflow lately. I’ll tell you what Bricks really needs.

Content, style, CSS. We just need a third tab, and when you click the third tab that says CSS, it looks like this, and the CSS box is up higher, right?

So we don’t have to constantly scroll down. Maybe even the whole damn thing is the CSS box, right?

So why is filters here? Anybody know why filters is here in the CSS?

I don’t want filters here. We don’t need filters here.

Let’s get that out of here. Transition.

Why is that here? I don’t know.

Let’s get that out of here. If I ask for a CSS box, I want a CSS box, and I want a big one, and I want one that I can, you know, it’s not all cramped.

This feels so cramped. Give me some more space to do my work.

Who’s calling me? Okay, all right, so we’ve got overflow hidden.

This is gonna be, we’re commenting here. So we’re gonna say this is going to be our media, okay?

And then, so I’m targeting root media, and we’re gonna put the transition here. You don’t put the transition on hover of the item.

You set the transition on the base thing, and it’s gonna cover the hover and and the base okay so the forward and back of the transition so let’s do 0. 3 seconds ease mmm-hmm we’re getting there aren’t we we’re starting to get there we’ve got our first effect taken care of all right now we also have to see what else we’re going to tokenize right I typically do things related to the transition because Transition because not everybody’s comfortable with transitions.

Okay, so we want transition Duration and this is going to be 0. 3 seconds, and then I just replaced this with a little transition duration Okay, and then this would be the transition function is going to be we’ll switch this to ease in out and Then I just replace this with transition function.

Alright and we’re still got a perfectly working scenario here. Profile card golf.

I’m gonna go to border and I’m gonna go to FR card radius. It’s gonna bring in whatever your radius is for every single card on the website.

Overflow is already set to hidden so shouldn’t have any issues with seeing our border radius. Fantastic.

Okay anybody have any questions about what we’ve done so far? Have we, does anybody, did we lose anybody?

And that’s, I like doing this live because in trainings, I, if you’re lost, I just gotta keep going. I don’t even know you’re lost, I can’t talk to you.

I can’t see what you have to say. Ah, let’s see what the chat says.

Janky is a slang term for something run down of poor quality or unreliable. Oh, did somebody not know what janky meant?

Okay. Also need SaaS support in the Brick CSS area.

That would be absolutely phenomenal. I brought it up before and I’ll just be honest, okay, when I emailed Thomas about it, he didn’t seem too excited about doing it and it kind of left me a little heartbroken, okay, because I really do want SaaS in here.

You know who does have SAS in the builder? Quickly.

Quickly got the components, quickly got the SAS in the builder, quickly got a lot of things. 0:41:22

Okay? 0:41:23

A lot of things. I’m probably going to do a video on top five page builders of 2023.

Just to let you guys know, Oxygen is not number two anymore. It’s not number two anymore.

It’s number maybe three, maybe even four. I don’t know.

It’s going to be an interesting video when it comes out Overlay should only show on hover. Okay.

That’s the next thing you want to do overlay only show on hover All right, so we’re gonna come down here and we’re gonna say that this is gonna be our overlay stuff All right, and so we are going to do our root. I’m still learning this little keyboard shortcut right here root overlay and We are going to say that this is We’re already positioning it absolute let’s translate it Let’s translate it See I can never remember which axis is which?

Let’s do 10% because I want to see where it goes 20% 30% 40% see it see it leaving the screen I’m giving you like a frame by frame what’s about to happen okay 60 70 80 if we do a hundred percent it’s just going to translate it all the way down okay and then what we need is on hover of the parent element on hover of the parent element we’re going to do something I’ve run into this a couple times now there’s a little bit of a bug a little bit of a bug okay I hit our our tab and it just writes R I don’t know what it’s I don’t know why I don’t know why but now I have to write it like a chump I gotta go root okay and that’s annoying to type because of the percentages all right so root hover root overlay now what are we going to do guys well we’re gonna translate it back okay so how about just 0% 0% look at that, but now it’s janky again How do you make it not janky? How do you unjanky eyes the things that are transitioning in?

Well, you go back to your root overlay and you pop that transition on now The question is do you want that transition to be the same time as the other transition, right? So we can do something like I’m gonna have to var this.

So var transition duration and var transition function. Okay and then I probably 0.

3 seconds ease in out 0. 3 transition duration transition function transition duration transition function.

Okay if you’re trying to be too fancy ease okay oh yeah all right we don’t necessarily want that effect do we that might not be the effect that we want what we may want to do here instead of a translate is just opacity is that what they’re kind of doing on this one is that the effect yeah that’s probably just an opacity effect right all right so instead of translate we’re gonna go with it’s the same concept you go the opacity of zero and then here you go with opacity of one all right and then you get the that’s probably the effect that we want okay now I don’t even know if you want let’s see yeah I mean you could go you can almost bring that in that overlay in a longer. Now I don’t know if you can calc transition durations.

See there’s just some things that I don’t think you can. I don’t think you can.

It would be nice if you could. Like I bet this will not work.

Like if we take our normal transition duration and multiply it by, I don’t even know how that would work,. 3, I mean you could just add like 0.

3 seconds, so I almost does that work 0:45:18

Let’s just let’s let’s see this 0:45:20

Okay, oh, I love it, okay That’s nice. See that locally scope variable now just unlocked a whole bunch of power.

So we have what basically is like our base transition duration and we can use that base to do other things for specific elements. I really like that.

Really, really, really, really. You could just dial this in however you want it all day.

The other thing we’re gonna need, I know that we’re gonna need this for the social icons, is gonna be a transition delay. Probably a transition delay.

And then we’re gonna use that, we’re gonna be able to use that we’re going to be able to use that calc it looks like to be able to stagger our delay. I don’t know I don’t know now I don’t even know if that’s going to help us at all.

We’ll put a delay of 0. 3 seconds on here as a base.

We’re not going to use that yet maybe it’ll come in handy I don’t even know. All right guys so now what we need is the heading and the title.

The title, the title we can, these, see the title I think is just gonna have to appear because we can’t translate it. The minute we translate it we can’t use clickable parent.

We’re gonna see if this looks stupid though, if it looks dumb without the title being animated in. We’re gonna animate the opacity of the title, but we’re not gonna translate the title.

We’re gonna translate, I’m sorry, her name. I’m talking about her name.

This is the title right here. Let’s start with the actual title, okay?

So we’re gonna come down here and we’re gonna say, this is gonna be our content. 0:47:06

All right. 0:47:07

And we’re gonna say root and then title. And we’re going to do what we did, or we’re gonna probably do this two ways.

We’re gonna use opacity and translation, but I’m gonna just start with translation. Okay, so we’re gonna translate this.

We’re gonna translate this 0%, 100%, okay? And it’s actually not going off of the card all the way.

Let’s go 200% on that. And then when we hover over the card we want to bring that back we’re also gonna we already know we got to put our transition on here and I’m just gonna steal this line right here so I don’t have to write it all again like a chump okay so there’s that now when we hover the card we’re gonna bring that back all right let’s go dude it won’t it oh when caps lock is on it breaks it

0:48:02 Look it works

0:48:04 if caps lock is on No, worky.

No worky. Okay.

All right. So now we’re gonna bring in title No, this is root hover and then you can’t do it twice.

You can’t the keyboard shortcut does not work twice apparently It was on a different element, but it’s not working on this on this card. All right, so let’s go with the title.

All right, what are we gonna do? We’re gonna translate this back to zero, zero, and then that’s why you’re gonna need to see an opacity, because it’s not fantastic.

I actually wanna take this line. Oh, this also needs transition function.

Okay, just making sure we’re crossing T’s dotting I’s here, not leaving any any lingering nonsense behind. 0:48:58

Just trying to dial in a 0:49:00

0. 05.

Okay, let’s go opacity of 0 and then opacity of 1. And it’s probably coming from too far away.

There we go. It’s actually fine now.

100% still works. So now it’s got a little bit of an opacity coming in.

Okay. Now the question is going to be what about this heading?

Is the heading going to look terrible when it comes in? So we’re going to steal this.

I think I called it name, right? I didn’t call it heading, I called it name.

We can’t translate it. We can just go opacity 0 and then root on hover I’ll just steal this whole line right here this is going to be the name okay opacity of 1 and we need a transition on there let’s go with this okay and this needs to be the full this actually we might even need to add to it now.

That should be good 0:50:29

Okay 0:50:31

I’m not sold on it, but we’ll see the question now is can we get this? Name to be a link and can we get clickable parent going so external URL is a pound sign We need this entire card to be clickable I can use the clickable parent class on here.

Here’s the other challenge that I was using. For a card like this, we’re gonna make an adjustment.

For a card like this, I think it’s actually better to use bricks interactions. For the is hover state, because then you can actually see what you’re working on.

The problem now is that once you’ve hidden things, you can no longer see them to work on them, right? Like they’re not there anymore, between the two states of hovered and not hovered.

Now I can constantly hover over it and see what’s going on, but it’ll never stay in that state without me hovering. So I can’t do anything over here while I’m hovering.

So, and I’ll just, I’ll do this so that people can, I guess, get more experience with the Bricks Interactions feature. It’s not something you have to do, but it’s kind of like a nice to have kind of thing.

So let’s go to Profile Card Golf. 0:51:47

Let’s go to Interactions. 0:51:48

I’m on the class. And I’m gonna stop in a minute and see if, what the chat, what’s going on in the chat.

So when we mouse enter this, when we mouse enter this element, I want to set an attribute the attributes going to be a class the value is going to be is hover and I’m going to do that on self right and then I’m going to add another one that is on mouse leave and on mouse leave I am going to remove the attribute and the attributes going to be the class is hover okay and I’m going to do that on self as well. And if we go to the front end, we’re going step by step here, right?

We see profile card golf here, so I’m gonna collapse it. And notice when I mouse enter, we’re getting this class is hover.

And then when I mouse out, we’re losing the class is hover. And so now what I can do is I can go into, I can get out of interactions, I can go back down here.

See, I have to scroll and I’m not even, I gotta scroll like twice. This is no good.

So I just type CSS up here and it brings everything into view. All right, so now everything that is using the hover pseudo class can just use a actual physical class is hover.

I can bring that in here. I can bring this in here is hover.

And I can find this one as well is hover That should be all of them Okay is hover and now is is hover Okay All right, which one did I miss name is hover root name opacity one name name. Oh Oh, is govr.

Now govr does not work nearly as well as hover, as you can see. But now look what I can do.

I can statically hover the card, right? If I just want to constantly see the hover state of the card, I can.

And that’s actually a good use case for this little box right here. There’s not many good use cases for this box, but this is one of them.

Okay All right, so we’re good to go here All right. So now I’ve got this we’re gonna we’re gonna try to get this clickable parent going without the class Okay, let’s do this here as well So I’ve got my overlay.

I’ve got my content. I’ve got my name name Let’s go in here Name and I should probably do now if we’re gonna have like children comments Here’s our content.

Here’s our named content. Okay, and then here’s our title content Again, just or trying to stay organized Crossing T’s dotting eyes.

We’re moving very very very slow If you weren’t here in the beginning just so everybody can follow along and nobody’s getting lost. We’re not trying to race We’re not trying to race through the development here.

We’re just going step by step, being very methodical, talking through everything. 0:54:55

Okay. 0:54:56

So I want clickable parent. So what I wanna do is I wanna take this root, okay?

Name, but I want the a element that’s inside of it. And I want to position that absolute, okay, name a, let me look here, let’s look back at the DOM.

Let’s go back and look at the DOM name h3 a I’m, oh, I am a heading, okay. Before we do this, let me grab this, let me go straight up clickable parent here.

I just want to see, I’m fairly certain it’s going to break it before we do this. Okay, we’ve got a whole clickable card which is fantastic.

I want to actually put this to like Google, somewhere that I can actually see. Name, yeah, got to get out of here.

Okay, back to here. Let’s go to Google.

All right save and I actually also want to do the focus while we’re here. Okay that’s good click goes to Google.

Nice okay fantastic. All right that delay of the of the overlay is a little is a little much.

Let’s go down here and root media overlay plus. 75, let’s do like.

35. Okay, let’s take care of our, see I can’t focus on the card.

I’m trying to focus on the card with the keyboard, can’t do it, okay? So what we’re gonna do is root is hover, root media scales.

We’re gonna steal this line, comma, and add another rule. Root focus, we’re going to scale the media and then basically the same thing here

0:56:55 Okay root

0:56:57 Focus on this element.

We’re going to opacitize the overlay and Then we’re going to come down here again, and we’re going to say root focus name. Okay, I should show up on focus now.

And then the title needs to show up on focus. Focus here.

Okay, and let’s just go test that out. Okay, oh, you know what we’re gonna need now is, and that’s clearly having problems, root title root focus.

It might not be those. Hold on, let me think about this.

We need to focus the parent first. All right, so root focus within find the focusable element, outline none, box shadow none.

So get rid of focus styles on the children and then root focus within gets a focus style. Probably should have done this first.

We worked a little backwards. Stepping our way through we want to make sure we can just focus on the box first.

Okay root focus within we’re gonna want a box shadow here of 0002 pixels and then action color which is just going to be black on this website. Save, back.

I also need to take off this class is hover. Probably not helping anything.

Hey! Alright so we can focus on the card, why are our children not behaving?

Where are the children? Okay, so root focus, root title.

Let’s just test something real quick. There it is.

Okay, so it’s it’s not root focus. It’s root focus within.

Okay, let’s go up here focus within focus within focus within focus within Focus within focus within focus within Hey Okay, we actually don’t want that fugly box shadow. We want something more along the lines of that and actually probably just do like black trans 10 or something like that.

Let’s bring that down. Oh dear.

Oh yeah 40 goes here. 0 goes here.

Save. Okay.

Now the question is, let’s go back here. What do we have?

What do we have? Features, locations, we got nothing for, oh god, we got meta box on this site.

I’m just joking. I’m just joking.

I’m just joking. Okay, let’s say people, person, persons, people, add new, add new, person, persons, people, people, person, add new people, person, plug people.

Okay, labels, add new, new, new, new, new, people, okay, publish. People add new.

Okay, what is her name? Amy Walker.

Amy Walker. You’re on the team, Amy.

You were hired. Said featured image.

Publish, publish. Back, MetaBox.

Custom fields. Add new.

People. 1:01:02

Add field. Text.

1:01:04 Text.

1:01:05 Title.

1:01:06 field text text title okay assign this to people people person people publish back to people okay what is your title Amy designer okay update you know we also haven’t done?

We got to do a little card structure action here, okay? So profile grid golf, before I forget, before I forget, we are going to change this to an unordered list.

We are going to go to padding zero. We are going to change this to an article style, this HTML tag Not a link an article an article We’re going to wrap this with a block This is going to be list item list item Okay, and we’re gonna change that to list item save refresh DOM check Okay, we have UL, an unordered list with a list item with an article.

Still focusable, still hoverable, still clickable. Okay good.

Let’s keep moving on. Now what we’re gonna do is add another person.

We’re gonna add Natalie Green who is a project manager. Natalie Green, project manager.

Give her a featured image. All right Natalie, you’re hired.

David Jones is a web developer. Add new.

David Jones, web developer. David, you’re hired.

Publish, publish, refresh the builder. Okay, profile section, grid, list item.

We want to loop the list item. You don’t want to loop, you don’t want to loop the card, you want to loop the list item.

We need the thing that needs to repeat to be the loop. The LIs are the loop.

Everything in the LI will also loop. Post we need people.

There they are. Profile card golf image.

Get rid of the static. Come in with the signal.

Signal it’s featured image. Okay.

Content wrapper name. Get rid of it.

Title. Archive.

Site. Post title.

Where is my title? What did I name it?

Let’s go all the way down. Hmm.

Metabox. Meta box, custom fields, people, title.

What is that ID? That’s not a.

. .

we’re gonna lose our data now I bet because I’m changing that ID. We’re gonna lose our data but we’re still early on in the process we don’t want you know nonsense in here.

So David Jones is a web developer go back Natalie Green don’t even oh she was the project manager right update go back Amy Walker was designer maybe I got those backwards but it’s okay okay David Jones, Natalie green, Amy Walker, refresh the builder, save, refresh the builder. Now that custom field should be accessible here.

Title title, dynamic data title. Hey, there it is.

Save refresh, focus, focus, focus. Hover, He looks too well dressed to be a web dev.

Okay. Somebody said refresh permalinks.

I think we’re all right on permalinks, but doesn’t hurt. Doesn’t hurt.

Okay, what else? Let’s go.

Let’s go give it a chat here. Type CUS into the search box instead of CSS and only the custom CSS what hold on hold on search but it doesn’t oh oh thank you for that thank you for that who was that who was that shout out to Ion Kennedy big shout out see us why what’s that stand for?

Custom CSS, oh you’re right. Stands for custom CSS.

You learn something, that’s why we do what we do. This is why we’re on WDD Live.

You guys, I mean, just learning little shortcuts, little tidbits, little golden nuggets. 1:06:46

Okay. 1:06:48

Okay, guys, we’ve got, are we done? Are we done?

Did we accomplish our goal? We’ve got clickable cards.

We got focusable cards. We’ve got proper semantic HTML.

Is there anything else that we So, locally scope, name, okay. Let me look at something real quick.

All right, we go back to the chat, change the URL to not Google. Okay, let’s do, how about this?

Change the URL to not Google. Okay let’s do, how about this, should we add a modal?

Oh I didn’t add the social links, good job Calisthenics Ireland. What about, how are we doing on time?

We still got time. We could, let’s do the social links and then maybe a modal for like, you click on it so instead of and we’d have to do some some changing around we have to change that to a button instead of a link we can bring up their profile in a modal why is the data lost when an ID is renamed that’s so bad I know I absolutely hate it it’s actually better in metabox than ACF I believe unless ACF fixed this I haven’t actually tested it.

In ACF, if you used to change the, like any part of the custom field, it would lose its data, as far as I remember. But that was a long time ago.

So in all fairness, I haven’t rechecked that. MetaBox, you can change almost anything except the ID of the input, and then it’s gone.

It does not transfer that to the new ID, and that’s, you’re right. That’s why you wanna get everything right before you add too much stuff to the database because if you have to go back and Change something related to a custom field you might be in a world of hurt my friends Okay, so in our content wrapper We’re going to have a div and that div is going to be our social links wrapper We’ll just call it social links, okay Okay, we got to get out of here and we got to go FR profile card golf double underscore social.

I can just call it social. Let’s just call it social.

Try to keep these like short, you know, let’s not get too long. Social.

All right, we’re going to add a icon element because this is for frames. I would add an SVG element.

So if I was doing this for me, I would add an SVG element. But because it’s for frames, we have to use an icon element.

We’re still gonna use an SVG, but we have to use the icon element. So I’m gonna come in here and click on social.

And what I actually wanna do here, see this is where it gets annoying, right? Profile card, golf, we’re gonna come down to, let’s go cuss.

No, no, no, we want CSS. Because we want is hover, okay?

So now I can see the entire card all at once. Alright so in social we’re gonna click on the icon and we’re gonna say that this is an FR profile card golf double underscore social icon.

Alright and then what we want to do is we want to go to the content tab and we want to not use a library we want to use an SVG and we are going to use Facebook X and Instagram we’ll just do Facebook X and Instagram all right so let’s go here and I’m gonna use this Facebook icon and I’m gonna tell you right now this icon element in bricks kind of sucks. It’s a little trash canny because even though I’m doing this on a class, it’s not going to carry any of this information over to the other icons.

It treats them all as separate, it’s almost like you’re styling at the ID level. So what we’re forced to do here in a situation like this is go to our CSS tab.

Let me write cuss. There we go.

Okay, and I’m gonna come down here and we’re gonna say social. Actually no, we don’t need to do this in social.

We just need to go up here and make links for this. So we’re gonna say social icon size and we’re gonna do like 1.

25 M and social icon color. We’re gonna do white for right now, okay?

Now they can behave as if there were classes on them, but the class that I added to the icon is more or less useless on the icon element in Bricks. I’ve already submitted it as a bug, weeks and weeks and weeks ago, I’m hoping it gets fixed very, very soon.

Okay, so for here, I gotta come in, and the other thing I hate about it, look, there’s a color right here and a size right here, but if you open, there’s size and color here too. Just the sizes and colors, sizes and colors everywhere that we don’t actually need.

Cause some of them work and some of them don’t. Like if I put in a color here, okay, it does work here.

It doesn’t always work. It depends on the kind of icon you’re using, but then I can change it right here.

I mean, we can set it in two different places. I mean that’s fun Will the size work here?

See this this field totally useless But if I go here now It should work. Yep.

See now it works So I’m gonna put a fill in here and we’re gonna go to raw and we’re gonna say icon color and That does not work there. Okay, does it work in our other area?

Does it work here? So fun.

I love playing this game. Oh, it was social icon color that helps to helps me name it right social icon color not working there.

Is it working here? works there.

See what a fun game. What a fun game we’re playing right here.

So we can remove the color from there And then this is icon size social icon size There you go and now from here see now I don’t have to play that game right once I have my locally scope variables I don’t have to play the game anymore see now I can just change everything from here and that affects all of them And then I can just say oh well we want these to be read and I can get all red I can do whatever I want This is why CSS is much better than builder input fields like much more friendly. It’s much more predictable You know exactly what’s gonna go on Okay, usually most of the time.

All right. So now I need another icon.

So this is gonna be oh, you know what we need Hmm Well, here’s the thing too. I don’t I don’t actually like this.

These are gonna be dummy elements. Because what I would do is, this is the kind of thing where if I’m tabbing through people’s cards, I wanna tab from David to Natalie to Amy.

I don’t wanna go David, David Facebook, David this, David that, David that, David that, David that, now Natalie, now Natalie this, Natalie that. Like oh my God, so annoying, right?

We wanna indicate that we’re gonna give access to social icons, but they’re not gonna be clickable because the entire card’s clickable, right? So the way I would approach this is these are dummy icons that let you know, hey, this person’s social info is here if you just click on the element.

You click on him and a modal comes up and now everything is tab-able inside the modal. You can get, so it’s only like, you only have to tab through people’s shit if you want to tab through their shit, right?

Was like, I selected that person, I wanna tab through his shit. Okay, then that makes sense, right?

But if I’m just trying to go from person to person to person, making people tab through everybody’s shit, it’s not the approach I like. I don’t think that’s a great approach.

So on the card, these are going to be like dummies. And then in the modal, they can actually work.

Do you guys agree with that? You guys agree?

Let me know. Let me know.

What do you think? Do you even know what I’m talking about?

Am I have I lost you? Have I lost you?

Okay, um, question, what spec is your Mac your builders performing much better than mine? This is I I don’t know.

What is this thing? It’s a Mac Studio with the M1 Max chip and 64 gigabytes of memory.

Hopefully that answers your question. Okay Sylvia says sounds good.

Sounds good on the social icons. Alright so and we’re gonna have to do these differently then.

Oh we only need three. Okay.

All right, so social, let’s get out of here. Flex.

1:16:07 Okay.

1:16:08 Wait, wait a minute.

1:16:11 Social.

1:16:12 Why did that seem to affect other things?

Okay. And why was it already in a row?

Profile, card, golf, social. 1:16:19

Hmm. 1:16:20

Okay. Does it have a gap?

No, it doesn’t have a gap. All right, let’s go 0.

5M on the icon gap. We should probably throw that in as a variable just because people are already gonna be changing stuff related to the icons right here.

So let’s do social icon gap and let’s do 0. 5M.

Now I can come over to social and say this is gonna be the social icon gap. Okay.

Alrighty then. Let’s go test that real quick.

0. 25M, 1.

5M, look at that. I can just dial that in nice and easy.

Okay. Now we’re gonna go to this icon right here and we are going to swap it with Instagram.

And then we said X as well, right? I think I have an X icon somewhere.

Insert. Hey, that’s pretty good.

Okay. Now that I’m looking at them, it appears that they need to be a little smaller than they currently are.

So I just come here to icon size 1. 25 M, 1.

15 M, and just dial that in a little bit. Okay, why is our Facebook icon look inadequate next to the others?

I think the others are like nice and the Facebook’s like missing something. Alright, we’re gonna call this Facebook, we’re gonna call this Instagram, we’re gonna call this X.

Okay, alright, now we need to animate this bad boy right. Alright style, oh my kids just got home.

Anything could happen now guys, anything could happen now. Alright we don’t need it, we cannot translate the rapper, we have to translate the icons themselves.

So social icon and this is gonna, this is gonna call for an in child situation most likely. We’re gonna get ourselves into a little bit of an infant-child situation.

So we’re gonna come down here. By the way, when I’m developing frames by myself and not, I still talk to myself exactly like this.

So if anybody was curious, it’s just how it goes. Alright, so social icons.

Okay. Alright, so what do we call it?

What do we call it? Social icon, that’s all we need to know.

Social icon. Cuss, there we go.

All right. Root social icon.

Let’s just get started. Let’s just get started.

Okay, let’s let’s translate them a little bit. Translate 0%, 100%.

There they go. They actually don’t need to go off the screen, right?

Because you’re not going to see them at all anyway, like when it’s not hovered. So we’re pretty good.

All right. Root is hover.

Oh, that time it did it. It did give me the the root the shortcut work that time.

Social icon. So is hover translate 0% 0% okay root is hover root social icon root social icon translate 0 0 0 0 okay let’s go take off let me get my actual CSS okay that’s not on there save front-end I just want to see something okay that’s good so now it just needs the opacity and it needs a transition and then we’re pretty much good to go on that.

So, however is, let’s do this too. Let’s put the, why can’t I select that?

There we go. Okay, let’s keep everything organized.

We need our transition. Let’s just grab this.

This is actually the situation where we’re probably gonna have to transition these separately okay almost certainly okay transition translate opacity is zero and then opacity is one okay save refresh okay that gets them all a little bit? Alright let’s let’s see how we’re gonna approach this.

So if I have root social icon first child and I say transition delay 0. 2 seconds.

Let’s just see and actually let’s make it kind of like we do with a red border make it as ugly as possible make it as obvious as possible just to make sure that we’re getting the right thing going. See that?

See how it’s like it’s like absolutely obvious that we’re affecting something okay and I used a transition delay function earlier I created one for this exact situation that I knew was probably going to be coming so transition delay and Then I can say and I’m just gonna make this easy. Let’s just do inf Childs 1 okay, and then I can do 2 3 2 3 2 3 Now they all use the same delay at this point in time.

So if I hover you see how they delay? Okay so now I want to calc it if possible.

Calc is going to be plus 0. 2 seconds, it’s really 0.

1 second. We can change this probably to 0.

1 second. And then this would be 0.

2 seconds. So let’s steal this.

Steal this, put that there. Oh, I tried to focus it a second ago.

1:22:36 What happens here?

They just go in. So the timing function of

1:22:42 this, we can just remove this timing function.

What would that just be? See I’m not a transition expert.

You just ease them in. No, no, that doesn’t work either.

Trying to get them to not, if we want to, I mean it doesn’t actually bother me that they go out the same way that they came in. But we could look at that as a potential thing to fix.

I wouldn’t even call it fix. Where are the.

. .

too many brackets. Okay, there we go.

It added an extra bracket. Okay, the real question here is, are they too slow?

I think they’re too slow, right? Okay, so transition delay, delay, delay, delay, point, let’s do like 0.

025 or something like that. And then this can be 0.

002, 0. 02, this might zoom through I don’t know my brain doesn’t my brain doesn’t calculate transitions very well 0.

5 0. 5 0.

05 just trying to there we go that’s pretty good maybe a little maybe a little bit more. Transition duration,.

3, transition delay,. 5.

1:24:30 Maybe if we don’t calc this, let me just see what it,

1:24:34 if we use our normal transition duration, what’s that gonna look like?

That’s better, that’s better. 1:24:41

Okay, and I don’t even have to worry 1:24:43

That’s better 1:24:45

That’s better 1:24:47

Okay, and I don’t even have to worry about the other thing that we’re not gonna link these we’re gonna do any of that. Okay Third one needs a longer delay One two three, they’re coming in in the right order.

It looks like to my to my eyes. Oh Yeah, you’re right.

You’re right here, correct Just slightly right? There we go.

That better? Now it’s not happening on focus, so we need, okay, a social icon right here.

Grab these, comma, focus within, root social icon. get the same effect when I focus.

Nice. Okay.

Modal time? Modal time maybe.

Still need to add ease in out function variable. I did.

Didn’t I? I did right here.

Transition function on our social Okay, let’s get to the, let’s get to, we got 30 minutes. Let’s get to the modal.

And guys, it’s open questions, okay? I know, yeah, see, some people are asking questions.

That’s fine. I’m trying to go back time to time, time to time, time to, yeah, my brain is broken now.

And answer some questions. But with all info hidden initially, the whole thing looks like a simple gallery why would people hover I think people are naturally gonna hover well here’s the thing too we haven’t added our intro so if I go here my templates and we say intro and we decide which one do we want like I can go probably alpha is a good one to use so we’ll bring this up into here profile section golf is going to get a row gap of container gap.

And now if you have this section on a page, right? And so we’re basically saying, hey, here’s our team, meet our team, like people are naturally gonna hover over this because you know, they see photos or like, can I click it?

Can I do something with it? People, I don’t think that’s gonna be a problem.

But yeah, this is a section so it’s gonna have an introduction, good copy, right? It might even say like, you know, hover below to see our information or click a person to read our bio.

You know, you can add copy here that can make it even more obvious. Okay, so now we’ve got our section going.

Let’s go ahead and add our modal. All right, so we’ve got a list item.

We want this to be our modals inside of our list item. We’re gonna use the frames modal for this.

There it is right there and I actually think I have a profile frame. Profile modal.

If I template tag modal show me modals it’s right here but would that be I mean would that be as fun would it be as fun to just cheat you know it’s kind of cheating if I just like just use a frame here but I the problem is I don’t have another design in mind for a profile modal and so I would need another design in mind to create one let’s just use this for now sometimes cheating is okay let’s drop profile modal into this modal. Okay.

And therefore this modal itself we can just style at the ID level. So we can just go to clear out the bottom or the the padding on the container itself.

Width of Close icon. I don’t usually like those outside.

In fact I wonder if this. .

. I wonder if.

. .

some of those modals I put my own close button in. I’m wondering if we should do that on this one.

Okay, let’s go with top space and bottom auto auto. It’s fine for right now.

Body container with L. We probably should make this modal scrollable with a max height of 90 VH because we don’t know how much content is actually going to go inside this modal.

I feel like I’m not seeing the correct preview. There we go.

I was seeing like extra padding in the modal and stuff like Bricks was not keeping up with what we were trying to do here. And now I see the icon, the close icon in the modal as well.

It does not need a background color. It needs its own SVG which is going to be that right there.

Okay, and then our height and width. Oh, that’s, that’s ginormous.

We don’t need ginormous close buttons. Okay, a normal close button will do.

All right, perfect profile modal alpha. How are we going to trigger this?

We’re gonna say, profile modal alpha should trigger it. F R profile, no, no, no, sorry.

Profile card golf. Profile card golf should trigger this bad boy.

Close selector is the default. Okay, person’s name.

Let’s get their avatar. 1:30:41

Featured image. 1:30:43

Hey, there he is. Why are we getting parse error info?

Okay, let’s just keep moving. Let’s ignore that.

Let’s pretend like that’s not happening. Let’s go to post title.

See, if you ignore it, it just goes away. You just pretend that’s not happening and then it figures itself out.

Okay, this is gonna be the title. People title, there you go.

1:31:06 Oh, got your errors again.

1:31:07 It’s probably because it’s MetaBox, honestly.

Okay, so let’s go down here to our footer social icons. I am going to delete this part and maybe use the same icons that we used a minute ago.

But then I’m wondering is that going to be affected by our CSS? Yeah, we probably should not use the same icons okay let’s use these and these already have hidden accessibility text okay yeah I think we’re good we need to get rid of this font awesome nonsense that’s going on let’s use this Facebook icon let’s use Instagram icon bring in the Instagram icon that’s an SVG SVG there you are.

Okay, tick-tock can go away YouTube is going to turn into X right? Yeah X.

Okay. We need our X icon Get rid of font awesome bring in X Okay insert And then our label is going to be follow me on X.

Label going to be follow me on Instagram. That’s correct.

Follow me on Facebook. That is correct.

These are all using hidden accessible. Okay okay.

The only thing I want to change is not the color but I want to go width and height are going to be social icon size. This should still be able to grab that data from our locally scoped variables.

Okay and then we’re gonna have to do that on this one. Again the classes don’t work here.

Height, icon size, icon size, icon, icon, icon. I’m activating the class just because but it doesn’t actually do anything.

Save. Okay, website Ipsum.

Here’s some body copy about this dude. Let’s go people, people, open people, open David.

Give him a little bio update. Okay.

we can get rid of this content static is post post post content right post content yeah post content is this a where’s the HTML for this element why can’t I see what it is oh is it a post content element it must be a post content element I don’t know oh dear okay let’s refresh refresh the builder. Okay, all right.

I think we’re, I think we’re looking good. This X icon is a little aggressive.

It looks bigger than the others. It’s not from the same icon family, I guess, icon pack.

Golly, I mean, come on guys. Does it get any easier than this?

I don’t think it gets any easier. Let’s go to to modal style border radius fr card radius bam bam thank you okay let’s hide this in the builder for a minute we have to do one more thing can’t forget this cross and T’s dotting eyes guys this cannot be a link anymore.

Name, this cannot be a link anymore because we’re not navigating anywhere. We’re not navigating anywhere.

This is a. .

. ingrain this in your mind.

You only use links when you’re navigating somewhere. If you’re firing an on-page element it is it has to go from a link to a button.

Okay? So and this complicates the matter.

This complicates the matter because we can’t make this a button because it’s an H3. 1:35:16

You know what we have to do? We have to put a button inside the H3.

1:35:19 Look at the, look at how the A’s are structured, right?

So if we inspect here, see how the A element, the clickable element is inside of the heading? Flat monkey says, good evening, everyone.

Good evening, flat monkey. It’s actually afternoon for me but same thing.

How to disable remove the default bricks icons. I don’t know what that means.

What do you mean? Just swap them out with SVGs and it removes them.

In addition to gallery alpha are there any other frames with galleries in the works? Yes.

Work smart not hard. Maybe if you have another transition to the is hover class for the social icons and set it to zero then it just disappeared not sure not cheating that’s what frames is for it’s cheating if we if we do it on a stream where people are supposed to be learning how to build these things from scratch even if it was seen as a gallery people would hover to zoom the image and then find the lovely surprise also okay okay okay okay okay we don’t have any other questions to answer right now if you ask a question a while back ask it again because I’m not scrolling all the way back through the chat.

So just ask it again. Chat’s not moving very fast, it’s good.

We gotta fix this situation right here. So we’re going from a, I don’t know what, I’ve never seen this before in my life, this error, error.

Now, I don’t even know if MetaBox is up to date on this site, I don’t know what’s going on, but it is what it is. It’s fine on the front end.

Okay, we’re just gonna work through it We’re gonna power through it. So what I’m thinking we need to do is Our name is our heading we need to wrap this in a div This is gonna be our No, sorry.

I’m doing this backwards dyslexia strikes again, okay The name See I can’t I can’t put this inside of the name because it’s not technically a container. We need this to be FR profile just hang with me, hang with me, this is the shenanigans when you’re in a page builder you’re not writing HTML you got to do crazy shit.

Okay FR profile card golf heading because that’s semantically what we’re going to make this custom h3. So this thing, this box, I mean go back and watch PageBuilding 101.

Everything is a box, right? Heading is a box, everything is a box.

You can do whatever you want with your boxes, okay? So this is a heading 3, right here.

Inside of the heading 3 we have the span element which is actually the text of the button. So fr profile card golf button.

Okay, excellent. Let’s check the DOM.

See what we’ve done. What have we done?

Inspect. Oh, I never made that a button.

Okay. Button div.

1:38:50 I don’t know why button’s not in that list.

1:38:52 It’s like a predetermined thing.

This also needs to get a background color of transparent. Transparent.

Okay. Save.

Name. Okay, let’s check it now.

Dom check, inspect, so we have a yeah there’s your h3 button span and then get rid of the a. Okay at name get rid of that get rid of that get rid of that.

Okay now check the dom again. Refresh.

You don’t want to leave any junk behind. You make big changes you got to make sure you don’t leave any junk behind.

H3 spam that’s it. This button is going to fire our modal.

Clickable parent off of here onto the button. Excellent.

Save. Still get a modal.

Okay, all right refresh. Still get a hand, still get a modal.

Focusing now. Enter gets me a modal.

Enter closes my modal. Like it.

Okay, got to fix that color. We defined our color on name.

Is that where we did our type I know we did it on the content wrapper so on name I want the actual label to be white 1:40:31

and 1:40:32

If I wasn’t getting errors in the builder, oh That’s not background white here save Refresh there we go Okay Nice Okay. Nice.

Excellente. Okay.

Is that it? We can tab through there.

We can tab through there. Do we need to do anything else?

We got David’s. How about David’s profile modal alpha header avatar avatar layout now I want border border border radius top okay so then we just need what overflow hidden overflow hidden is already on there why doesn’t the avatar have a border radius why don’t you have Oh, we removed avatar radius.

1:41:36 Okay.

Makes sense. 1:41:38

Makes sense. All right.

Border, border, border, border. Let’s just do FR card radius.

It’ll match the card. 1:41:46

Save. 1:41:47

Refresh. David’s got a border radius.

Looking slick, David. Looking slick.

Any questions? Change the doc tag to h3 the what tag error could be bricks 1.

9. 1.

Let’s see what I’m using. Why is that a known thing, Derek?

Is this happening for other people too? Yeah, I’m on 1.

9. 1.

1. Tobias says, why is it a button element?

I missed the explanation. So button elements are for firing on-page events.

Links are for navigating to other pages. So if you are doing a modal, which is what we’re doing here, we’re not going to like a page for David.

We’re firing a modal for David. So it’s a button instead of a link.

Div tag corrected in the next comment, change the div tag to h3. Yeah.

Yeah, I believe I did. We should our DOM should be nice and clean now.

So that’s the content wrapper, then we have an h3 and then we have a button. The button has text.

Everything’s the right color. Are we done?

Did we do everything? Wait, why did our focus style change?

Why is our focus style an outline now? Let’s go up here to profile card golf.

Let’s check because we did change some things. Root focus within focus.

Root focus within should have this box shadow style. For the avatar radius I’d calc it down a tad so a little tighter than the modal radius.

Yeah you could do that. You could do that.

I think that’s a personal We need to diagnose this. 1:44:00

You know what I think it is? 1:44:02

It’s the, this is interesting. 1:44:05

This is interesting. 1:44:06

It’s focusing on the items in the modal, even though the modal is not fired, I think. No, it’s not.

But there’s something like, look, I’m gonna tab once. Now I’m gonna tab again, and it does not go to the next thing.

It goes there. There’s a, there’s, oh, hold on.

Yeah, it’s focusing twice on the card. And I’m wondering if that’s because of the modal.

And now I’m thinking if we need to fix something in perhaps the JavaScript. Cuz now I don’t even know if I can select the thing that’s social article, article.

This is the modal. You can, what is it?

What is it? Tab index?

Tab index? Is that what it is?

I don’t think this is going to work. But I think it’s tab index without a without a dash.

I think it’s just one word tab index. No, that didn’t do shit.

Something is it’s I think it’s something related to the modal is not fired Don’t let anything about it be focusable. I Think that’s what’s going on right now I’m gonna have to ping waji gonna have to ping waji on now, and that’s why we do this though.

We got to find 1:46:11

these edge cases 1:46:13

Let’s take out the Let’s take out the modal for a second. Put that up here.

No. It’s still it happened when we switch to the button.

So it does not look like it’s related to the modal because the modal is not even in the loop anymore. Let’s leave it out of the loop for right now.

What else do we got going on in here? If we look at the DOM, I’m gonna select this parent element.

It would actually be the L. No, it’s profile card golf is catching the clickable parent technique.

And let’s set this to focus within. See that that works correct.

Oh I remember this you guys can’t see what I’m doing over there. Okay.

So if I’m on article card golf and just a little tip you guys can check you can check focus in the inspector right either focus or focus within. 1:47:40

That’s doing nothing. Let’s turn this off and do this.

1:47:43 Focus within, focus, doesn’t do jack shit.

UL, focus, focus within, doesn’t do anything. Okay, so now, okay, hold on, I have an idea.

I have an idea, I have an idea. I have an idea.

I have an idea. Profile card golf, CSS, focus, root focus within, focus.

1:48:12 Aha.

1:48:13 Root.

1:48:14 Now I got to think of the DOM structure in my mind.

Root focus within. 1:48:20

Focus. 1:48:22

I’m wondering if I put the if I call that button out specifically So, what is that that’s root double underscore button If there’s a root button with focus Do I need to do that anywhere else I Don’t I don’t even know now. 1:48:51

See, Andrea pinged me and he was like, the button’s taking the focus. But it’s not supposed to because I’m telling,

1:48:56 I’m telling any focusable element, look, I’m telling any focusable element in this to have an outline of none and a box shadow of none button focus styling focusing on the button bricks element right, but See this right?

Oh shit. Oh, no.

Oh, no, don’t do it. Okay.

I gotta I gotta refresh the builder You can’t use command Z in the in the in the CSS area your shit will blow up The smithereens. Okay, let’s go back.

Let me make sure my brain is calculating this properly. It doesn’t help that I have to constantly fucking scroll down to that box.

Okay, up here. This line right here is saying if there is a focusable element within this card, no outline, no box shadow.

Focusing on the button element breaks it. If you want all the icon text to disappear at the same time, you can add a transition to the hover focus within.

It says it’s different to what we have already. 1:50:19

Yep. Okay.

1:50:22 Why here if the button is if we’re using the buttons focus, why isn’t this erasing it?

What am I missing in here 1:50:32

Is root 1:50:34

focus within root title. Yes, no style, but it’s not skipped.

Hmm. Okay.

So what you want me to do then is go to the button. Okay, you want me to go to the button you want me to go you want me to tab index that away.

So what you want attributes, that’s not going to fix the outline, is it? Maybe it will, maybe it will.

Let’s go a tab index of minus one on our button. But then nothing now that doesn’t that fixes the duplicate focus problem.

But it doesn’t fix our box shadow. Let’s get rid of this tab.

All right, Focus within focus. Now in my mind I’m like, is it?

Okay. 1:51:39

Root focus within box shadow. This should be styling the card.

This should be styling the, 1:51:44

this should be giving this soft box shadow on the whole entire card because there’s a focusable element inside of the card. Tab index is zero is the default tab index so it wouldn’t it wouldn’t do anything.

Tell me why we’re seeing the outline style on the card when we’re telling the card to have this style and no style on voxel bull elements within that’s all we have to figure out right now we figure that out and we’re done by the way I can put the frames modal back inside this card I mean we’re still functional it’s just we’re not getting the exact effect that we wanted we’re actually getting both effects now. 1:52:50

Okay, maybe this then, maybe this then. 1:52:52

Outline, none. Done?

Are we done now? Save.

Refresh. No.

Outline, none. 1:52:59

No, wait, hold on, sorry. 1:53:00

Yeah, that should have done that. 1:53:02

That should have done that. Just needed important.

1:53:04 That’s all you need?

A little important action? Okay, golly.

This is why we build frames by the way, because people don’t want to fucking deal with this shit. Come on now, who wants to deal with this shit?

You just want to add the thing and it works and you move on with your life, right? Yeah, important on outline, yeah, exactly.

Yeah, I got it. That’s I yeah, that was my thought to pop to my head the exact same time I mean shit.

It’s like a situation. It should be working.

Why isn’t it working? Well, let’s import in it and then see what’s going on

1:53:48 Yeah, there’s no reason why

1:53:50 It has specificity no reason why that needed important in my mind but I don’t control the CSS gods so all right tab I mean look at this I mean look look at this I mean we can just go in this is fantastic I think we’re done I think we’re done if you did not talk to yourself while you work it would not be as entertaining yes I talked to myself as well or maybe it’s a dyslexia thing.

It might be. I mean, yeah, because it helps my brain process.

Like when I’m talking myself through, it’s like if I just sit there and think sometimes it doesn’t work as well. I’ve got to send this over to a team person to review.

We always have somebody else typically review the frames, unless I’ve just like studied it for a long time. But if you built it, sometimes you miss a detail or two So this will be available probably in a couple days We’ll swap this out.

We’ll get all these faces out of here and put in our normal avatars and such but yet another frame To add to the library. It’s been fun.

I don’t think we have any time for any other no We do we have three minutes if you have any other questions about anything questions about anything We can answer them. Did you find this, let’s just start here, did you guys find this entertaining slash informative slash valuable, is this a good format, should we do this from time to time, should we mix in stuff like this, should I let people suggest different sections People with frames are so damn lucky.

I agree. I agree.

I still think it’s the 1:55:43

default ACS button focus styles on the button causing it, but the thing is is 1:55:46

those focus styles don’t have any specificity and they load first in the style sheet. They don’t load last.

So bricks should easily be able to override them, that’s what I didn’t understand. All right, good.

People seem to like this format. 1:56:09

Okay. All right.

1:56:12 All right.

That’s it for today then, guys. Thank you for being here.

I’ll be back again next week, another WDD Live. I don’t know how often we’ll do this format.

Maybe we’ll do another one. It really depends on if there’s any good sites to critique, you know, if there’s any decent sites to critique, maybe we’ll do a little mix, we’ll do a critique, we’ll do a little bit of this, just to mix it up every now and then.

Okay. Love you guys.

Thanks for the support. Thanks for being here.

And I’ll see then. Okay.

Love you guys. Thanks for the support.

Thanks for being here. And I’ll see you again very, very soon.