WDD LIVE 075: Slow Live Building New Frames + Q&A

What’s up, everybody?

It is my favorite part of the week.

We are back.

WDD Live.

Another Tuesday.

Manos is in the house.

AT Williams.

Curtis, welcome.

Sarah.

Justin.

Andy.

Calisthenics Ireland is here.

Rob is here.

Striped Goat.

Got all the OGs in the house.

Looking fantastic.

The Hunsies here.

Welcome, welcome, welcome, everybody.

What are we doing today?

We’re going to be doing some live builds.

Um, we’re going to, we’re going to do some explorations of some, some things.

Uh, I’m getting back into, you know, you, you’re gone for WordCamp.

Uh, actually got a cold after WordCamp.

So, um, took a little bit of, took a little bit of a break with that thing.

It thankfully cleared it up pretty quick.

Um, but still have a little residuals going on.

Uh, but then before that, the etch launch and I, I’ve been, I haven’t been building, building for like, you know, a month.

I did the little, uh, speed build thing that kind of got me back in the swing of things.

But you gotta, you gotta keep up a rhythm.

You know what I’m saying?

You gotta keep up a pace.

Uh, or, or, or things start to slip.

Uh, so we’re going to be doing some frames stuff today.

Just kind of kill two birds with one stone.

We get a WDD live.

We get some, maybe a new frame or two.

We don’t even know.

I’m not going to do like easy ones.

We’re going to, maybe, we’re going to tackle, tackle something.

Um, so we might get one, we might get two.

I don’t know.

We’re also going to kind of take our time and go slow so that people don’t get left behind.

We can answer questions.

So if you have a question, hashtag Q, hashtag question, uh, that will put it in the queue and I’ll be able to find it and, uh, answer it as we go.

Okay.

Derek says, Hey, at least you survived Portland.

Barely, barely, my friend, barely survived Portland.

Um, yeah, sir.

Uh, I found interesting strappy headless CMS.

I wish WordPress would have the same phone.

Yeah.

I, the grass always seems greener on the other side.

It’s not necessarily the case.

Obviously I’m not, I’m not looking outside of WordPress.

I’m not panicking.

I’m not, I’m not even really interested in the conversation anymore.

Um, it is what it is.

It’s, it’s, it’s, it’s gonna, it’s gonna work itself out.

It’s going to blow over.

It’s going to be fine.

We’re all going to go back to normal.

Uh, we have to remember that we’re in a little bit of a bubble, right?

The vast majority, there’s millions and millions and millions and millions of WordPress users, most of whom have no idea what’s going on right now.

Like they, they don’t even know about it.

They don’t even know there’s a thing happening.

Uh, and so it’s just like, it’s a, it’s a massive ecosystem.

Uh, we are all in a, like a little bubble that likes to yell a lot.

And, uh, we have to remember that we have to keep that in mind, right?

Like the, the entirety of WordPress is not panicking.

They’re not even caring.

They’re not even knowing.

Uh, and I think it’s all just going to work itself out.

And it’s just, you know, a bunch of rich people yelling at each other essentially.

So, uh, yeah, it’s, you know, let’s move on.

Let’s do our work.

Let’s do our good stuff.

Let’s do our, our, yeah, stay in our wheelhouse and just, you know, get things done, produce value, cash checks, do our thing, like do our thing.

Right.

Okay.

Um, so let’s, let’s take a look at what we, oh, oh, wait, hold on.

There’s, there’s some news today outside of WordPress news.

Uh, two things in music, actually two things in music.

I’ll just update you guys.

Some of you like to stay updated on this kind of stuff.

Uh, Nick D I’m obviously a big fan of Nick D.

I like independent artists.

I like indie artists.

Uh, Nick D big fan, uh, new album out, new album out.

Um, it’s called Sycamore.

It’s, it’s, uh, it’s pretty dope.

So go listen to that.

And John Bellion, who I think is one of the most brilliant, uh, musicians of all time, uh, has a new song.

Now this is, I believe the intro to a coming album.

Okay.

Uh, and the important part about this is that apparently he’s been in a, in a record contract for the last six years that has kind of put the, put a kibosh on, on stuff he wanted to do or the way he wanted to do it.

And he had to wait to get out of that in order to, to, to actually produce new music for himself.

He obviously produced a lot of music for other people, but, um, probably all the top artists that you like, John Bellion’s got like a hand in it.

So, uh, just absolutely brilliant.

Uh, but he has a new song out.

It’s called Kid Again.

Go, go listen to that.

And I would, I would watch if you want to really understand the, like the, the genius of John Bellion is he does a lot of the making of videos.

Like he shows you how the songs are made and it’s really, really, really cool to watch.

So there’s a making of Kid Again.

Uh, I would go watch that, maybe even watch that first and then go listen to the song.

Uh, but it’s, it’s just really cool to see people’s, uh, creative process.

Right.

Uh, so yeah, this is a, and if that’s the intro to the, that’s like the intro to his album, he kind of uses it as like a, just kind of a, um, flex.

It’s just like, just, if you took a song and you’re like, I’m not really going to make a song like a traditional, I’m just going to flex my skills in this, in this three minute span.

Right.

That’s kind of what that is.

So, um, yeah.

All right.

Uh, so those, those two things I think are, uh, are cool.

Uh, show us the album on screen.

Okay.

Well, I can, I can pull these up here.

Let’s go, uh, share screen Spotify.

Okay.

Here’s Nick D’s right here.

Uh, so this is Nick D’s, uh, Sycamore albums, 20 songs, man, 20 songs.

And this guy releases, if you don’t know, this guy releases a new song every Friday, uh, or maybe it’s every two weeks on spot on Spotify.

I’m also in his private group.

He releases one in his private group every week and then one on Spotify every other week, I think.

So, uh, and then he, he’s just releasing albums.

What, what else?

What else?

Um, Norman San also has, you go, you go Norman San, this, this man, I’ll tell you right now, this, this, when you say underrated, right.

Or, or, or maybe not discovered yet.

Right.

This is off, off, like, you know, take, take what you think is, is, uh, like an eight out of 10.

I don’t know.

I don’t even know how to describe it.

It’s just, he’s so different.

Um, but obviously like the skill levels off the charts, right.

So it’s very hard to rate the, the skill level, but at the same time, hardly anybody knows who he is.

Right.

Very underrated, very, uh, just unknown at this time.

Uh, but you know, like, okay.

So go in here.

Problematic is the latest album release, right?

14 songs.

Uh, absolutely dope.

But you got to go back into like, I miss mixtapes.

Uh, this is absolute fire.

Like, uh, which, which like dress up, for example, like just absolute fire.

I think I can actually play these because he’s not on the label.

Like there’s no YouTube can’t, I don’t think YouTube can take it down.

I don’t really know how it works.

Um, but I mean, these are just, they’re just absolute fire.

So, uh, yeah.

Uh, so this is, this is, that’s the old one.

Let’s go to problematic.

This came out in, where’s the date?

Oh, it just has the year.

I think it was like a month or two ago.

Um, so problematic, Norman Sand, Nick D, Sycamore.

And then of course, John Bellion, right.

Um, we’re going to go here and there’s, there’s kid again, this new single right here.

But then, like I said, watch the making of, uh, just absolutely, you know, these are, these are dope artists and you should support them.

And, uh, it’s fantastic.

Okay.

That was just a little bit of a, um, yeah.

Kevin Gary does billboard.

Uh, yeah.

Mark, we’re, we’re talking music just to get warmed up today.

Just to get warmed up today.

Okay.

Um, somebody’s tagging me, but I don’t know what it’s for.

Uh, where, where’s, where’s the tag?

What is that for?

Somebody’s talking about a coastal town.

Uh, I don’t know.

Okay.

I don’t know.

I think you guys are having a side conversation, but I don’t, I don’t know why I got tagged in it.

All right.

What are we going to build?

What are we going to build?

We had two options today.

I think what we’re going to go with, let me go over here.

Uh, I was going through, people do submit, uh, frames.

Like they say, Hey, I like this.

I found this layout.

I really like it.

Can you build it in, in frames?

Right.

So I was going through that.

I, and I, I did come across this.

It was actually submitted by Tony Crockford.

Who’s a, uh, he used to be on our team, retired, you know, uh, kind of a legend in the, uh, in the ACSS and, uh, frames world.

But anyway, he posted this layout and I was looking at it like, Hmm, like it’s, um, I mean not, and we’re not just looking at layout.

We’re looking at use case.

And we’re also looking at like, okay, we have a lot of frames in the library.

And one thing we try to do obviously is create as much variety as possible and uniqueness as possible.

We don’t want to create frames that are like other frames.

And then I start looking at things like this kind of layout and I, and I’m putting myself in the shoes because we don’t really know what people are going to use it for.

You could, you could use it for a lot of different things.

Uh, what this is showing is like categories and then images, and then there’s this card.

And then this, maybe this card takes them to where there’s more of these kinds of images.

But then I, I was thinking like, it’s not actually just for like image galleries.

It could be really useful for features, product features.

So instead of category one category, you could have product one, product two, product three, and it’s showing parts of the product.

And then the card takes you to the product page.

It could be features, um, in, in just terms of like, if you have a service and there’s different feature categories and you want to put imagery to that.

Uh, it could be for case studies.

So this card would take you to the case study, but surrounding that card would be images from the case study.

There’s like so many different ways you could use this.

Um, just services in general.

Like, even if you just like, um, just take something simple, like, um, pet, like a pet service, like dog training or dog boarding or something.

So you have the card that is obviously the service information will take you to the service page.

And then there’s just some like supporting images, kind of like B roll type images around it.

And that just creates a, it’s like, Hey, we’re not just going to create boring service cards again, or boring feature cards.

Again, let’s create more of a visual experience around each item.

That’s like what this layout could kind of give us the ability to do.

And so I thought about building this.

There’s some, obviously some grid stuff going on here, but there’s tabs stuff going on there.

And then, you know, so there’s some good variety there to see how this stuff might be built.

And when I do this live and I do it kind of slow, I also like to take a look at something like this and show the thought process of how you think about how this thing might be used.

Uh, all the various ways.

Can it be query loop compatible?

Can it support dynamic data?

How would that work?

Um, and then we, we can, well, why am I, why is it zooming?

Why is it zooming?

Circle, what are you doing?

I just clicked on it.

I didn’t want to, I didn’t want to like inspect it.

Uh, let’s go back down and find, I think it was toward the end.

Uh, let’s see.

Where, where did that layout go?

Okay.

There it is.

Right there.

Uh, okay.

Yeah.

I didn’t, let’s not click it.

I didn’t, I didn’t want to zoom in.

Um, yeah.

And then, and then think about the process of building.

Like where would, where do you even start when you’re trying to do something like this?

And eventually you want to get it to the dynamic data area.

But like, do we start with dynamic data?

Do you build it static and then map the dynamic data?

And like, you know, so we got to talk through all that.

Cause a lot of people don’t really know.

They might look at something like this and be like, I don’t even know where to start.

I don’t even know where to begin.

I can’t.

There’s maybe they have so much sense of overwhelm.

They just are like, I can’t do that.

Like, let’s just not do that.

Let’s just do something easier.

Right.

Okay.

So that’s kind of why we want to, uh, tackle things like this.

Now there was one more.

Uh, it was this.

It’s kind of, it’s a little similar, but it does different things.

Um, it is a tabbed layout.

Okay.

And what I found interesting about this is, okay, you have, you have talking points to sell something, right?

Well, your talking points change depending on who you’re talking to.

And this is one of those layouts that kind of gives you that opportunity where it’s like, they’ve obviously created segments or what I call buckets.

Right.

And so one bucket is I run a business.

Another bucket is I’m a designer.

Another bucket is I work in sales.

Another bucket is I’m a marketer.

And what I like about this is like, when you click on one, it gives you a testimonial that matches that thing.

So a, from that kind of person, Hey, here’s a testimonial from that kind of person, a person like you.

And then next to that, it’s like, here are the top five selling points for that segment for that bucket.

And so if somebody chooses, I’m a designer, they’re going to see five different selling points and a quote from a designer.

If they say I work in sales, five things that people who work in sales care about.

And then a quote from somebody who works in sales.

This is another really good concept for how, not, not just how to lay out content, but how to focus on conversion style content.

This is content that really does a tremendous job of selling and converting, right?

It’s just, it’s not just generic content.

It’s content that’s well thought out.

It’s there for a purpose.

It’s laid out this way for a reason.

It makes it easy for people to bucket themselves.

It makes it, and you could also do, because this is tabs, you could do conversion tracking on this, like, or not just not conversion tracking, but interaction tracking.

Like how many people, what percent interact with the, I’m a designer bucket, right?

What percent of people interact with the, I work in sales bucket.

And you could start to really just understand your audience better.

And the kind of people that you’re driving to your website.

Anytime you can bucket people, anytime you can create segmentation, anytime you can map copy and testimonials to that segmentation, really, really, really good things are probably going to come out of that in a lot of different ways.

So that’s why I find a layout like this very interesting.

And this is kind of how we think about frames.

Like frames is a, frames is not a hyper creative layout system.

It’s not trying to win design contests or design awards or anything like that.

What it’s trying to do, what it is, is a hyper conversion layout system.

It’s focused on layouts that are known to convert.

Okay.

And that’s why we’re interested in things like this.

So I don’t know.

Let’s do a quick vote.

I mean, I already know which one I’m going to build first or attempt to build first.

Maybe we get to both of them.

I don’t know if we will.

We’ll see.

But I just want to see which one you guys might be more interested in.

So we’ll call this one B right here.

Get ready to vote on your keyboard.

This one’s going to be B.

And then this one is going to be A.

Okay.

So we’ve got that one is A.

This one is B.

I think they’re both equally valuable.

It just depends.

It just depends on what you guys think.

Okay.

B, B, B, A, A, A.

Okay.

The thing I want.

Okay.

It’s like A.

It’s like 50-50.

Of course.

Always.

Okay.

Fantastic.

B, but I really appreciate Tony.

Okay.

A, B, B, A, A, A, A, A.

Okay.

I mean, I don’t.

It’s not.

It’s not lopsided one way or the other.

So we’re going to win regardless of which one we choose.

We’re going to lose regardless.

And that is life on the internet, my friends.

That is.

And then there’s this.

There’s this guy.

Jazz.

Here with the ABBA.

Just hit us with the ABBA.

And then you’re just.

You throw in the towel at that point.

Yeah.

It’s not.

It’s not possible on the internet.

Okay.

All right.

Well, let’s go ahead.

I mean, we should at least, you know, start building.

So I’m going to do create new blank.

Actually, I should not do this on a blank website.

Should I?

Yeah.

I should probably do.

I should probably do this on the bricks frames website.

Okay.

Even though the dynamic data side starts to get a little mad.

You know, I try to keep that kind of stuff out of this website, but whatever.

Maybe we can build it here, then bring it over to a zip WP install and then do the dynamic data stuff over there to show how it might work.

Maybe we could do it that way.

Okay.

The next problem that I have just right off the bat with all of these, we’re going to do this one.

It’s like, what do you call this thing?

You know, some people might call it a gallery section.

Some people might call it a feature section.

Some people might call it a content section.

Some people might like, what exactly is it?

And then of course it could be used for many different things.

Services, portfolio.

So many things, right?

I tend to default to like feature.

You’re just, you’re featuring things.

That’s that.

We have a lot of feature sections because it’s like, it could go into many categories and we map it to multi-category, but like, what is the primary one?

Like, cause it has to be feature section something.

I’m just going to go a feature in this regard.

This is honestly, a lot of times the hardest part of this.

Let’s go feature.

Now we have to see what feature sections have we already done.

Uh, let’s go ahead and sort by title.

Okay.

And 29 items.

So we went well into Zulu.

We came back to B’s, C’s, D’s, E’s, E’s.

Okay.

Uh, we need a word that starts with E.

Somebody, not an animal.

It can’t be an animal.

More like a city.

A city would be good.

Anybody have any E words that they want to use?

You get to name the frame.

Okay.

We’ll play name the frame on WDD live today.

Who has an E idea, uh, for the name of a frame.

We, we tend to stick with what we did the UN alphabet to start.

Now we’re into cities.

Typically Edmonton.

Okay.

Brad was first, first on the keyboard.

So we’ll do feature section Edmonton.

All right.

Uh, we’re going to say that this is a section.

Uh, this is a section type.

We’re going to go a bundle of features, but see, this is where I don’t even, do we have a portfolio?

We do.

You could do a portfolio here.

Uh, you could do, do we have services?

We have services.

Um, I mean, heck you could do team members like this, honestly, like the team member card and then just random images of the team member around them.

Like you could do it that way too.

Uh, I, that probably wouldn’t be a common use case of it, but, and this is where you’re, as if you’re a frames user, you want to get into the mindset of like, I mean, I can really use a frame for anything.

Uh, it doesn’t matter how it’s categorized.

Let me just look at it.

Let me brainstorm.

Okay.

I could use it for this thing here.

Use it for that thing there.

You’re not like, Oh, it’s gotta be for features or it’s gotta be for services or something like that.

You could use it for a lot of different things.

All right.

Let’s save that.

Let’s go to edit with bricks.

Feature section Crawford.

Uh, Derek.

Oh, engine in honor of WP engine.

Look, you know, we don’t have to stir stuff up already, Derek.

It’s like, we just got calmed down.

We just were like, Hey, we’re not going to talk about that.

And now Derek’s poking the bear again.

All right, let’s go.

This is good.

Cause we can flip back and forth with this.

Okay.

So where would you guys start with this?

I’ll tell you where I’m going to start.

I’m going to start with the low hanging fruit.

Let’s get an intro in here.

Uh, and we already have an intro frame, which is fantastic.

So I’ll just add a section.

We’ll go up here to templates and we’ll type in intro and we’re going to use intro alpha.

Uh, Oh shit.

I see.

I hate this.

Okay.

Bricks changed this layout and it’s, it’s actually way worse now than it used to be.

Um, let’s do that again.

Go to templates.

Let’s go to intro.

The main button, the main icon should be for inserting the damn thing, not editing the damn thing.

Like it’s edit should not be the first icon in the list, right?

Insert is the thing you would most often want to use in this scenario.

Uh, all right.

Let’s put intro alpha in.

That’s fantastic.

And in this frame, if you notice, we don’t need a lead paragraph, but I’m going to keep it there just in case.

You know why?

Cause it’s easier to remove it.

If you don’t need it, then add it.

If you don’t have it.

All right.

So we leave the intro the way that it is.

Uh, the next thing we’re going to do, you see that we have some, uh, tabs.

We’re not going to worry about the tabs.

I think what I’m going to tackle first is just, let’s just get a grid going and let’s put in a car.

Now this is, this card’s got some spacing issues and things like that.

But as you see, this one needs a dark overlay.

We’re going to make a real image for this card, not a background image.

Um, why?

Because we don’t know for sure that the image is going to be purely for decoration.

Uh, so we get advantages by making it a real image.

Namely, um, you can have lazy loading.

You can have alt tags.

It’ll index the image.

You can have, uh, just a lot of advantages to using a real image and it’s not really that much more difficult.

So that’s what we’ll go with there.

Uh, let’s just, let’s get a grid going.

All right.

So let’s go back and we’ll use this container right here.

We’re going to call this before I forget feature section Edmonton.

Very important to stay organized.

Okay.

Uh, so this is going to be feature grid Edmonton, isn’t it?

Feature grid Edmonton.

All right.

You could also theoretically guys use this grid.

This is why I’m also have to thinking in atomic design principles.

So if I go back, the question would be, for example, could we use this grid layout outside of tabs?

Like we’re not going to do the tabs thing.

Is this grid layout still useful?

And the answer obviously is yes.

So you have to kind of build it with that in mind.

Like, can we just extract that component and use it somewhere else?

And if that’s the case, it needs to be its own block in BIM, B E M right.

It needs to be its own block.

So that’s why we’re just going to go a feature grid.

And I’m not even worrying about the tabs situation yet.

All right.

So we’re going to do feature grid Edmonton.

Let’s just put some images in here and see how we want to tackle the alignment of this stuff.

Right.

Let’s grab.

Where is now?

We need to collapse the frames thumbnails.

I want my gallery.

Okay.

These are all just like kind of placeholder type images.

Let’s do this dude with a fancy watch.

All right.

What we really need is just kind of objects in this grid.

And ideally, we need one, two, three, four, five, six of them.

Let’s go back.

And two, three, four, five, six.

Okay.

Now, is this how we’re going to do it?

No.

We obviously need a card in there and all of that.

But this is going to get us started.

So we’re going to do feature grid Edmonton.

Feature grid Edmonton as our class.

We’re starting because now we’re going to style.

And when you’re going to style, you should know.

I’m going slow.

Okay.

You got to style your classes.

You’re not going to style at the ID level.

So now is the time to start adding your classes.

And then you can start adding your styles.

We’re going to go with display of grid.

We will put a grid gap in.

That makes perfect sense, right?

If you’re using automatic CSS, use a grid gap in your grids.

Fantastic.

And now we get to the part where we need to talk about the grid structure of this.

Okay.

So we obviously are going to span some things, right?

We’re going to span this card both on the row axis and the column axis.

We’re going to span this image across those axes.

But what we really need is the, well, I guess the, think of it in the smallest grid structure in terms of these little squares.

One, two, three, four.

If you’re going to take two more of these squares and put them in here, how many would there be?

There would be four.

So what I’m seeing is a four column grid.

And then one, two, and three.

Looks like just three rows, right?

That’s what it seems to me.

Now I am dyslexic.

So as we go through, my brain tends to miscalculate things and do things backwards.

But that’s why we’ll just, we’ll go slow.

We’ll take it easy.

So what do we want?

Well, if we want a four column grid, I mean, we can just do four columns like that.

The other thing I want to do is feature.

I’ll go back and show you what we just did and just, just to make that happen.

Cause some people are like, what the hell just happened?

Feature section Edmonton.

Need a class on there because I also want to go row gap and container gap.

Now in most sites where you have auto spacing on and automatic CSS, you don’t have to do this, but we turn it off in the frame site because we don’t assume you have it on, right?

We want it off because we want to make sure all the gaps are where they need to be in case you also have it off.

Now the question is, should you have it off?

No.

I mean, only a psychopath would have auto spacing off in automatic CSS, but we do have to assume maybe you are a psychopath and have it off.

And so we need to make these frames work regardless, right?

Okay.

So let’s just, let’s just stop and look at what we have so far on the front end.

And then we might go into questions.

Then we’ll come back and okay.

So we got a intro in our section.

We got a four column grid with six items in it.

Let’s do one little recap here on how we got that grid structure.

So in normal, non-automatic CSS life, you would have to type in the grid template columns that create a four column grid.

In automatic CSS land, you simply right click the input and you choose the number of columns you want and voila, it’s done, right?

So that’s all I did right there.

All right.

Let’s go ahead.

And Rob says frames.

So simple.

Even psychopaths can use it.

Yes.

Okay.

Arc web browser, happy files, plugin in media.

Oh, okay.

That’s I think an answer to somebody else’s question.

Derek says, oh no, Kevin froze.

Did I, did I freeze?

Am I, let’s just check.

We need to check now.

Are we good?

Am I frozen or not frozen?

Derek, is it, maybe this is just Derek.

Maybe you didn’t pay your internet bill this month.

Let’s see.

Is it just Derek or is it, or is it me?

Let’s jump in chat.

Let me know if I am, let me know if I’m frozen or not frozen.

I’m going to answer some questions here as we let people catch up on what’s going on.

Not frozen.

Didn’t think so.

Okay.

Derek, check your, check your bill.

Who’s calling me?

Is that Bev?

Bev’s already out.

She doesn’t like, she doesn’t like how this grid is going.

She’s got some opinions.

Okay.

Just kidding.

It’s not Bev.

It’s a telemarketer.

Okay.

Let’s go to search hashtag Q.

Let’s answer a couple of questions here.

We’re going to, we’re going to just pause, take some pauses to answer some questions.

Okay.

Let’s see.

Over my time here.

I’ve learned that I’m not the best at asking questions.

What advice do you have to develop the ability of asking better questions?

Well, that is a good question.

And the quality of the answers that you get does depend on the quality of the question.

What I would say, here’s the biggest thing, and this is answering support tickets.

This is answering how to questions in general.

People will say, how do I do X, Y, Z?

And they’ll give you very specific things, right?

I want this to do this, to do this, to do this.

And it’s very difficult to answer a question like that when you don’t know why.

Like, what is the end result you’re trying to achieve?

If you just say, I want to, I want to create a four column grid and I want this, this, this to happen in the grid.

Like, it’s like, why?

What’s the use case?

And what are you trying to achieve?

Because I can tell you how to do this, this, this, and this, but I can’t tell you if that’s the best way to do those.

Like, if I don’t know why, I don’t know if that’s the best approach, right?

So they’ll ask a very specific question and it assumes that they’re, what they’re asking is the best approach, right?

There could be five different approaches and you’re taking one approach and saying, how do I do this?

I mean, I could answer that question, but first we need to know if that’s even the best approach, right?

And oftentimes it’s not the best approach.

So really when you’re asking a question, make sure you give the why.

What am I trying to achieve?

Okay.

And then if I know what you’re trying to achieve, I can help you with the best way to go about that.

Or what we might theorize is the best way to go about that.

Sometimes you don’t figure out the best way until you’ve done it one way and you run into a roadblock and you’re like, fuck, it’s not going to work that way.

Or it’s not going to work well that way.

It’s going to be very hacky that way.

Let’s go back.

Let’s try again a different way.

But we can’t do any of that if we don’t even know what you’re trying to achieve, right?

So tell us what you’re trying to achieve.

Okay.

Some frames are not respecting the radius settings in ACSS.

For example, CTA section Sierra.

Is there a way to force all frames to always follow or we just need to edit it?

Not respecting the radius versus CTA section Sierra.

CTA section Sierra.

Well, I mean, let’s go to templates.

This is CTA section Sierra.

Well, okay.

Here’s the thing about this frame, right?

This frame was for a very specific kind of image, which is a cutout image like this, right?

Now, it’s not to say that you have to use a cutout image for this kind of frame.

Like you could use probably any image.

But it’s designed for that because, you know, like here’s another one I think that would work.

Boom.

Right?

And so this creates a great look.

Now, is that to say you can’t use a regular image?

I mean, let’s see what happens when we use a regular image.

It looks fine.

It looks fine.

I mean, it’s fine, right?

Now, the media doesn’t have probably, let’s go to border, border, border.

It’s set to zero radius.

Why is it set to zero radius?

Because with those cutout images, you don’t want radiuses on those.

It can cut off part of the image that actually should not be cut off if you’re using an aggressive radius or something like that.

So with this frame, given how we wanted it to be used, we zeroed out the radius.

Now, if you want to use it a different way, like, oh, I’m using it with a full image, not a cutout image.

I want the radius.

All you have to do is clear that.

If you have auto radius on, just clear the zeros.

Or just say radius and apply that to all sides and you get your global radius.

Remember, automatic CSS is a global border radius.

It’s right here.

If we go to borders and dividers, borders, border radius.

This is a global radius for your entire site mapped to a variable that’s just called radius.

It’s like, hey, I want radius.

I want radius.

I want radius, radius, radius, radius.

Anywhere I want radius, I use radius, right?

That’s mapped to this value right here.

That gives you global control over all radii across the website.

And life is good, right?

So you see how I just fixed that frame for my use case real quick?

But that’s not to say that border radius wasn’t working on this frame.

Border radius was purposefully zeroed out on this frame because the kind of image we suggest using is not suitable for border radius.

But if you want to use it for a different purpose, then yes, you have to override that decision and do the next appropriate thing, which in this case is var radius.

All right.

Now, I have to be very careful that we don’t save any of that.

So let’s put this back to zeros the way that it was.

And I actually need to get this back to because this is, I think, actually saving.

Maybe it’s not.

It’s not going to save that image.

But just in case, let’s go to placeholders.

Let’s make sure that we get that back to where it should be.

Okay.

And then, all right, I’m fine with just deleting that now.

Hopefully that explains that.

Let’s do one more question.

Then we’ll get back to what we were doing.

How do you get your desktop items in the left column?

You’re able to access media library without exit to WP media.

No, I do have to go to the media gallery.

I think you’re talking about happy files, but that’s in the media.

Oh, you mean like when I go to add an, oh, right here.

Yeah, yeah.

This is happy files.

This is happy files.

But it’s still the default.

It’s just a folder system, essentially, for the media gallery.

But yeah, it’s called happy files.

Okay.

All right.

Let’s go back to chat, and we’ll go back to answering questions in just a moment.

Some of you are putting questions in.

They don’t have the hashtag.

They’re going to get lost.

Okay.

All right.

Well, let’s just see how we could start to approach this.

Now, what I’m imagining is we have a card in position number one in this grid.

So not an image, but a card.

But if I go to feature grid Edmonton, I’m going to say that we’re going to put CSS.

This is where I really prefer to go custom CSS here.

Because I don’t, we’re going to have a mix of elements in this grid.

It’s probably best to control the grid structure from the parent and not worry about the children much at all.

Right?

So to do that, we’re going to go to root.

We’re going to select the first direct child.

That’s essentially what this does right here.

And if you don’t know or you’re not sure if you’re selecting the appropriate thing, you can do what I call a border check, which is just apply a very ugly five pixel solid red border and see where the border shows up in the canvas.

Okay.

And you can see right here that I am in fact selecting the first item.

Right?

Okay.

So grid column.

Let’s say two.

Span two.

That’s actually going to be three.

Okay.

And so that puts that right there.

One, two, three, four, five.

Uh, actually let’s, there’s a, there’s going to be a few ways to do this.

We know we want it to span two.

Right.

Um, and let’s say grid row span two also.

Um, did we do our grid template rows?

Um, okay.

Let’s go one, two.

Now, now it’s, this is where you’re, especially if you’re dyslexic, recognizing how these stacked on this side, one, two, three.

Let’s go look at the original, uh, one, two.

And I’m doing a different cause we’re going to, we’re playing with the order of these in the dom.

One, two, three, maybe that’s four.

Maybe that’s four.

Um, so, okay.

Let’s go back to the parents here and let’s go down.

Okay.

Let’s do root and we’re selecting another direct child in child four.

Now the way I’m imagining this grid is being handled is you want a specific number of items.

This is not a grid where you can just query an unlimited number, right?

You can’t really have too little, like too few, and you can’t have too many because this grid is based on symmetry.

Let’s go back.

This is a symmetrical grid and it’s like, it kind of just needs to look like that.

There just kind of always needs to be the same number of items in the grid, especially if you’re going to put a card in there and you want the card to always be in the same position in the grid and the, you know, you don’t want to break the grids.

Like imagine if this last image just wasn’t there.

Like this would, it wouldn’t, it would look like an unfinished grid.

Like, ah, why is there a gap there?

Why is there a space there?

Right?

Um, so this is where you would want to make a note on the front end.

Now these, this kind of thing does add complication to how you’re adding data to the website, right?

Um, you could easily get in a situation where you create a breakage and we want to take a look at how to maybe prevent that as we go through this.

Um, okay.

So let’s do a border check border five pixels solid red.

Okay.

There’s the fourth item.

Let’s just see what happens.

Grid column span two and grid row, uh, span two here as well.

Fantastic.

Okay.

Great.

Okay.

And you see that the grid is kind of nicely filling itself out and we don’t actually have to, and I actually might argue that it’s a little out of order in the, uh, in this example, like, should the card be the right most thing?

Um, like I like that it’s in the top, but I don’t know that it should live at the, in the right.

It may, it may make more sense for it to just live as the first thing and everything else exists around it, which is kind of what we’ve already achieved in our version.

Right.

Imagine that this is the card and everything else kind of exists around it.

Um, now the other thing we might want to do is we want to make every child in here a square.

Um, but let’s go back and because not all these things are going to be images, which adds a little bit of extra complication as well, but these are definitely squares.

These images appear to be squares.

Um, okay.

So the next thing, what we want to think about is maybe we do want a child, uh, class.

So we have feature grid Edmonton.

Let’s do feature grid.

I’m, I do get a lot of lag on this website in bricks, bricks.

There’s a ton of classes on this website.

There’s a ton of layouts and it is starting to become a problem, um, which is not good.

Uh, so feature grid Edmonton double underscore, uh, and let’s do media.

Okay.

See the lag on that.

When I, when I click that media media, uh, actually I can just delete these bang and then just duplicate them again.

Okay.

This is the benefit of, of, uh, doing that at the parent level because my grid is still good to go.

All right.

So we have media on all of these.

That’s fantastic.

Now let’s come in and say, oh, well we, we missed, we messed up again.

Those need to be figures.

So let’s try that again.

Three, four, five, six.

Okay.

Uh, now we want to go one to one on our aspect ratio.

We want to object fit cover.

These fantastic.

All right.

Uh, we also probably want to go with our, our border radius.

Now you might be thinking, well, Kevin, my site doesn’t have border radius.

It has zero.

That’s okay.

That’s okay.

It’s a global radius system.

If your global radius is zero, you should just set it to zero.

And then these radiuses don’t matter.

They go away.

But if you ever need them, they’re still there.

Actually, it’s like, it’s, it’s the best way to manage global radius.

Uh, people, some people don’t grasp that completely.

Um, but it is the best way to, to handle that.

All right.

Uh, let’s take off the five pixel solid reds.

We don’t need those.

Okay.

So now let’s just pause and just see where we’re at now.

Right?

So we’re obviously getting to a better place.

We’re getting to where we want to be.

What I would say now is a good time to go with this card situation.

Let’s replace this image with an actual card.

Um, yeah, no wrappers on the images.

Um, that’s going to change in just a minute.

We’re solving one problem at a time, right?

One problem at a time.

Right now, the problem that we’re solving is how this grid structure is going to start to play out.

All right.

Then we’re going to solve another problem.

And we need to talk about why the wrapper actually must exist in this scenario.

So sometimes you could say the wrapper is optional.

I always say add the wrapper because it doesn’t really cost you anything.

Uh, but it gives you extra flexibility in the future.

But this is actually a situation where the wrapper is not optional.

It’s objectively necessary.

And we’ll talk about why that is.

Um, all right.

So let’s see.

We’ll, we’ll pause in just a minute.

And you, and you can ask some of these questions.

Most of these questions are not about the frame, but if you have questions about what we’re doing right now, obviously you’re going to ask questions about what we’re doing right now.

Hmm.

Okay.

Yeah.

My first thought when I saw the example was how is he going to manage the dom?

Exactly.

Um, so that’s why I think the card should be first.

It should be the first thing that is accessed in the dom.

Uh, now, whether that’s visually first or just dom first, that’s probably up to you.

I, I actually think in this, it would be better for it to be visually first as well.

Like you’re taking the most important information and presenting it first to the person.

Uh, everything else in here is kind of B roll.

Essentially.

It’s like accent imagery.

It’s not really all that important.

It’s not going to link to anything.

Um, the primary data should probably just come first.

Um, but again, we, we could, we, we’re flexible.

We can change that.

Um, all right.

Justin says root all direct children aspect ratio one.

I wouldn’t do it because here’s the problem you’re going to run into the card, right?

Um, maybe the card has to grow a little bit.

I don’t know.

It’s just situation where I would rather not try to constrain the card.

It probably won’t have any negative effect to do it that way, but there are multiple pathways to doing all this stuff, right?

You could do this same exact thing, probably five different ways.

Uh, this is just the approach that I tend to take.

All right.

So we have a class on everything called media.

Uh, we have a grid feature grid Edmonton and what we’ve so far created.

I’m going to take this media out right here and I’m going to add a card in its place, which is going to be a block.

We’ll put that first.

Okay.

So there’s going to be our card and we’re going to call this feature card Edmonton.

It has to be a new block.

It, and again, going back to atomic design, I guess the question would be, uh, let’s go back to the example.

Could you use this card outside of this grid outside of this context?

And the answer is yes, obviously.

So it is not a child of this pattern that we are creating, uh, from a BIM standpoint.

It’s not an element.

It is a block in itself.

And this is, I like that we’re doing this because this helps people understand BIM better as well.

Uh, so if we go back here, this is not, I’ll show you the distinction, right?

I’ll show you the distinction.

So you could say card where you go like feature grid Edmonton double underscore card.

That is an element child of this grid block, right?

In terms of BIM, but that’s actually not the best thing to do for this scenario.

The best thing to do for this scenario is to treat this as its own thing.

Feature card Edmonton.

Cause now I can take feature card Edmonton and I just go use it anywhere.

I want to use it.

Right.

Which is great.

Now let’s look at the structure of feature card Edmonton.

Dude, these, the tab situations out of control sometimes in arc.

I get it.

I get it.

Why it’s like, it’s actually convenient, but it’s still visually it’s, there’s a lot going on.

There’s a lot going on.

Okay.

So we need mainly everything is pretty much just contained.

Everything kind of goes in the same container.

I mean, I’m going to do an inner wrapper just cause it’s, it’s helpful in some cases, uh, might give us more flexibility.

Do we need it?

Probably not.

Okay.

It’s a little bit of an insurance policy.

Maybe we’ll, maybe we’ll try to go without it.

Maybe we’ll try to go without it.

Uh, no, we’re not going to go without it.

Cause I, it is going to give us some additional flexibility that we need.

So I’m going to do, uh, we’ll just call this inner.

Right.

And then the HTML elements that I need is going to be the heading first.

I need heading, text, text button, right?

Heading, text, text button.

So we’re going to go back here and we’re going to say heading, text, text button.

So there’s your HTML elements that you need.

Now we know this one right off the bat is going to get a, um, an actually not action.

We don’t want to be using action anymore.

We want to use button primary.

All right.

So button and primary.

Good.

So we got our primary button in there.

Next thing we need to do is talk about heading hierarchy.

All right.

So let’s take a look at that.

Try to cross as many T’s dot as many eyes as you can, as we go.

This section has an H two, right?

So a card heading is needs to be the next thing down, which is the H three.

All right.

So we’re going to make this an H three, uh, which I believe it already is, but we have to remember to explicitly make it an H three.

Cause here’s the problem with bricks, right?

If you don’t explicitly make it an H three, if I go up to settings, template settings, just a, uh, I’m sorry, theme styles.

And I go to, what is it?

Typography.

It’s one of these, um, heading.

Maybe it’s heading heading right here.

You can choose what you want the defaults to be.

And if somebody has the default to H two, look what it does.

It makes it an H two, right?

Not good situation.

Um, we didn’t find that out for a while that it works like that.

Cause when you go to it, uh, we had to go back and correct a lot of frames.

It’s showing H three.

It’s like, all right, that’s what it’ll be.

That’s just what I want it to be.

That’s good.

Like, but if somebody changes the default, it’s not going to be that unless you explicitly set it to that.

Now it’s going to explicitly be that, right?

Even though you, you didn’t like, nothing’s changing yet.

Except you’re explicitly saying that’s what it should be.

All right.

These need to be paragraphs.

So we’re going to make those a paragraph.

These are little things you will forget if you don’t do them right away.

Uh, this is going to be an accent heading.

We probably want this to have the websites, global accent heading style, right?

Um, so we do accent heading.

FR accent heading is the global, uh, accent heading style for frames.

But then we also wanted to have a BIM accent heading as well.

We’re going to auto BIM this in just a second.

Uh, so let’s do, this is your card heading.

Uh, for here, we’ll do at Ipsum short.

At Ipsum short.

Had a little typo in there.

Uh, so that’ll get me my Ipsum for this.

And this will say call to action.

We’ll remember that we need to, uh, link this.

Link, link, custom URL, pound sign.

We’ll do.

Okay.

So we have a card with an inner.

Now, what we also need is an image for the background.

So I’m going to put media in there.

And then I’m probably going to put a, there’s a bunch of different ways to do the overlay.

But in frames, what we tend to do is with a blank box.

We do a blank box overlay, uh, style.

Again, there’s many ways to do overlays.

You can actually do them with border images, which I’ve been doing a lot lately.

Um, but I don’t think we’re going to go to that degree on this.

We’re going to kind of just keep this in line with how we’ve done other frames.

Uh, so I’m going to do an image, uh, and this will be the, we’ll call this background image.

Right.

And then I’ll do a div.

I’m going to pop that div up here.

Uh, this div is going to be the overlay.

Right.

Okay.

Perfect.

So now I’ve got overlay and I’ve got, uh, my background image in here.

That all looks good.

Let’s just auto bend this.

All right.

So instead of card, what, what do we want to say?

We said feature card Edmonton feature card Edmonton.

So we’re going to get the enter the heading.

Ooh, this is not text basic.

This is the, uh, accent heading.

And then this is the, we’ll call this the, we could call this the description.

Uh, we can call this CTA overlay background image.

All those are fine.

We’ll sync the labels, apply classes.

Now everything should be good to go.

All right.

First thing I’m going to do is I’m going to go to layout position relative on this.

Excellent.

Um, and then what I’ll do is let’s go on the overlay.

We can just go right to that and say position absolute.

Position absolute, uh, insets on all sides.

And we’ll go to the background image here.

And we’ll go to position absolute and we’ll go zeros on all sides.

Fantastic.

Okay.

Uh, we probably want to go with a Z index of minus one.

Where’s the Z index living these days?

Where is it?

Where is it?

Where is it?

There it is.

Minus one.

Okay.

Fantastic.

Uh, probably also feature card Edmonton right here.

Uh, want to go with an isolation.

I actually think there is an isolation box somewhere.

Uh, let’s search for isolation of isolate.

There we go.

Cool.

All right.

Save.

Excellent.

Now, um, background image.

Let’s just pop in a placeholder for right now.

Uh, let’s do this little guy.

Okay.

Um, excellent.

And then our background image when it’s position absolute, we also explicitly want to go a hundred percent on our width and a hundred percent on our height.

And then we always want to make sure we object fit cover this fantastic.

And now you see, we have an overlay as well, which we can essentially just assign a background color or gradient or whatever we want to use.

Uh, if we did something like neutral trans 70, 60, something like that, we’re going to get our overlay style.

You see our content is living on top of this.

Uh, I can just say typography is going to be text.

Uh, we’ll say text light muted on all of that.

Okay.

Uh, the inner, do we want the isolation isolate?

No.

Okay.

Let’s go.

Let’s go with a Z index of one.

Okay, good.

And then our heading, we’re going to go typography and we’re going to go with text light.

So we have light muted on the text.

We have light on the heading.

Uh, we want to take this inner and we can essentially just space everything out with content gap.

Um, and then what we want to do is we want to, we can do this on the inner or we can do it on the card itself.

Probably going to do it on the inner.

Uh, let’s go ahead and apply some padding.

First, we want to flex grow this probably flex.

Where’s our flex grow to one, one.

There you go.

That’s going to extend that to the full height of my card.

And it’s like, now I have a card inside a card where I can just go, uh, whatever padding I want.

Uh, maybe Excel is probably the most appropriate for this.

And then I can probably just align everything to the center of this card.

Let’s see what our, uh, yeah, it’s all aligned to the center.

Uh, it’s probably the best way to handle this kind of layout.

You don’t want to do, I would, I would see people do space between on this and it just, it, it would not, it would not be great.

Um, this is actually a dark card.

So we don’t want to go with button primary.

We want to go with button neutral.

Um, and then we want to do actually, okay, we let’s do button neutral light, button neutral light.

I think we have that set up on the frame site.

We do.

Okay.

All right.

Let’s just take a look at what we’ve got so far.

Let’s go back to the front end and take a look.

See, okay.

Um, we want to make sure that our card has its border radius as well, which again, is the same as the rest of the border radius on the website.

So we’re going to take feature card Edmonton.

We’re going to go down to border and we’re just going to choose radius.

Right.

It’s not a value.

It’s just a global token.

And you’re going to see here that there’s a common problem.

We’re not getting a radius.

Almost always 9.9 out of 10 times when you have an image in a card and you’re trying to put a border radius on the card, the image is spilling into where the border radius is.

Right.

And so you can’t see the radius, even though it’s there.

And that’s called overflow.

It’s overflowing the edge into the radius.

And so what you need to do is hide the overflow.

9.9 times out of 10, that’s the problem that you’re facing.

Right.

So if you take feature card Edmonton and you go find overflow and you set it to hidden, you’re going to see your border radius.

Let’s go back and refresh.

There’s our border radius.

Right.

So we have a dark overlay, real image in the background, not a background image.

We have a nice looking card situation right here.

We’ve got a bunch of, you know, other images going on here.

They could be whatever we want them to be.

Now we need to probably start talking about query loop compatibility.

We need to start maybe bringing in the tab situation.

Okay.

But let’s pause.

Let’s answer some questions and then we’ll move on to that part.

Yeah.

You could do overflow clip as well for sure.

Okay.

Let’s see.

What is, never knew about the isolation box.

Yeah.

They added that, I don’t know, five, six, seven releases ago.

I think you used to have to type it manually all the time.

Okay.

Let’s hop over to questions.

Let’s hop over to questions.

See what we’re up to in question land.

In a parent child FAQs, I use the same template.

I vary the content using a data attribute as a switch with CSS.

How can the child display the parent’s featured image?

Hmm.

Parent child is same template.

Well, you’re, you’re already querying the posts, right?

The questions are posts.

And so you’re querying those.

And if you give them a featured image, you should just be able to pop in a media element and use the dynamic featured image tag to pull that in.

Unless you’re doing something else super fancy, that should, that should do the trick.

Can you give me a brief explanation on how to use the border image technique?

Just curious.

Hope you have time for it today.

We might be able to get there.

I want to finish what we’re doing here.

But we might, we might be able to.

I don’t know.

Can you please create a tutorial on how to create bricks, a bricks templates library?

I want to create my own in my agency site.

Not sure what you mean.

Like what we did with get frames.

We just use a custom post type.

They’re just all posts.

What we do is we pull, we actually create the post automatically using W, a WP all import cron job from, sorry, that’s the cold getting, still getting over residuals.

From this site, actually.

This site exports any new frames to the source site or to the marketing site, we’ll call it, every night at midnight.

It just kind of puts those in automatically.

It’s pretty cool.

What is the best way to clear the unused classes after you finish developing the website?

I wouldn’t even worry about it.

Honestly, I wouldn’t worry about it.

It’s not, it’s not worth worrying about.

Not a question, but a suggestion to include documentation that highlights components that were designed for specific use cases, like for the cutout pick.

Yeah, it’s, it’s, um, it’s something that you actually just have to, uh, deduce when you’re like taking the time.

First of all, it creates a lot of extra time and management and custom fields and custom data and about to add these notes to specific frames.

And then one out of 10 frames users goes and reads the notes.

Um, more often than not, they just, they run into the same problem.

They don’t even care to look at documentation and they come ask us anyway, and we have to answer them anyway.

So it’s like, it’s just, we found it’s a lot of extra work for not a lot of value.

I was trying to think outside the box, but could this work as a homepage hero section telling a story with images and layout?

Yeah, uh, absolutely.

There’s nothing stopping it from being a hero section.

When adding a box shadow to a loop item in a slider, the shadow gets cut.

How to prevent this overflow clip instead of overflow hidden.

We’ll probably do the trick.

Maybe, uh, I believe that’ll do the trick.

Yeah.

You need to move to overflow clip instead of overflow hidden.

Try that.

Uh, now there’s probably multiple containers going on in any kind of slider situation.

It, depending on which ones have overflow hidden, multiple could have overflow hidden.

Uh, you’re going to have to, the inspector is going to be your friend, right?

The ACSS line height using EX on headings fails on Firefox.

It works fine in Chromium.

Do you guys test these in multiple browsers?

Uh, yeah, it shouldn’t, it shouldn’t have any failure in Firefox.

Um, you pull this up over here.

Okay.

This is Firefox.

Pretty sure, um, this is using, I mean, we could double check.

That’s the calculated line height, uh, heading line height right here.

Four pixel plus two EX is in the calc right there.

Uh, so this is an example of this working perfectly fine in Firefox.

Firefox has no issues handling EX line height.

So I would say you might be doing something wrong.

I don’t know.

Uh, but yeah, we, we checked multiple browsers for sure.

Okay.

What is etch?

Uh, it’s top secret.

I mean, we already revealed it.

Uh, but the, the revelations have passed.

Okay.

Let’s hop back in.

Please show how you are accessing, accessing automatic CSS.

Um, well, you can access it right here.

There it is.

Right.

Or shift command O will bring it up as well.

Uh, then you can dock it.

You can pin it.

You can do whatever you want with it.

Shift command O will hide it again.

This will bring it back.

Um, so there’s the ways to get it.

Now, when you’re in the builder, there’s also this little floating button down here that will, that will bring it in.

Uh, and then sometimes you have a problem with the pinning.

Let’s reset the pin.

Okay.

But this, this, here’s the thing that confuses people.

This bubble only shows up in the builder because there’s no admin bar.

Now, some of you load the admin bar in the builder.

And if you load the admin bar in the builder, this bubble won’t be there.

This bubble is only existing when there’s no admin bar trigger, right?

If there’s an admin bar trigger, this bubble will not show up.

Okay.

So it’s, it really depends on your setup.

Um, you can always get to it with the keyboard shortcut, but, uh, whether the bubble is there is dependent on whether there’s an admin bar with the trigger in the admin bar.

Uh, that’s been a little point of confusion, but, uh, there’s always a physical trigger and a keyboard shortcut.

There’s always one or the other.

If the admin bar is not present, there has to be a physical trigger.

That’s when the bubble shows up, right?

If there’s a physical trigger in the admin bar, there won’t be a bubble, but that’s the reasoning.

There has to be a physical trigger and there has to be a keyboard shortcut.

It can’t just be one or the other.

Okay.

What does isolation isolate do?

It creates a new stacking context, um, for your content.

So if you are doing Z index negative one, for example, uh, it, like I did Z index negative one on, on this background image.

If I add a background color, right.

Um, as well, the color will show up on top of the image, uh, which is not usually what you want to have happen.

And so you can create a new stacking context and say, I don’t want it to go behind the canvas of this element.

I want it to sit on top of the canvas of that element.

So that’s what isolation isolate does.

So if you imagine Z index is like layers and Photoshop, it’s like these layers.

If I do isolation isolate, now I’m creating a new count.

Like let’s start over zero, one, two, three, four, five from here.

I don’t know.

That’s the best way I can explain it.

Uh, let’s see.

Okay.

Let’s, let’s go back to what we were doing.

Let’s, let’s start tackling tabs and such now.

Okay.

So what we have right here is a, is a grid.

I should actually convert this to a block and then probably wrap it in a container.

All right.

Okay.

And then this is feature section Edmonton.

Uh, let’s do container.

Sorry.

This would be over here.

Feature section Edmonton.

And then we’ll say container.

Um, and maybe, maybe a better name for that would be, let’s wrap this in.

We’ll say tabs container because that’s essentially what it’s going to do.

It’s going to contain our tabs.

Uh, and inside of this, we’ll call this tabs container.

And inside of this, we have our grid, which can live on its own, which is good.

Right.

Um, so now in our tabs container, we want some tabs.

So let’s go get some frames tabs and let’s bring those in.

And then we have content for tabs.

Let’s see.

Media, media, media.

We’ve got our card.

Okay.

That’s all good.

Let’s open our tabs.

We have our navigation.

We have our content wrapper.

We have an item wrapper and then we have an item.

And I think we don’t want to break our structure here.

Let’s bring this grid in.

Okay.

That looks like it’s going to work just fine.

I think we have to keep our tabs item and our tabs item wrapper for sure.

And our content wrapper.

And we have our navigation up here.

Okay.

Fantastic.

Here’s our list.

We’ve got three items.

Let’s go item wrapper item.

Yeah.

We need three of these.

And what I want to do is let’s go ahead and save.

The canvas has a hard time keeping up with the rendering of all these things, especially when you’re using duplicate, which Brick struggles with anyway.

Let’s just make sure we haven’t broken our tab situation.

Okay.

Tab two, tab three.

Now to guarantee that we’re looking at the real thing, let’s change out one of these images.

Let’s go gallery.

Right now we’re doing everything static.

We will handle dynamic stuff in just a minute.

Okay.

But right now we want to verify that we have some functional tabs.

Okay.

Save.

Now let’s go check this on the front end.

Okay.

So we have tab one, tab two, tab three.

See how we have different content in each tab.

So we’re looking really good.

Right.

Okay.

Let’s go back in and let’s go to frames tabs.

And we’re going to call this feature section Edmonton tabs.

Okay.

Now we could call this, we could actually, we could treat this as if it’s its own block.

You could do feature tabs Edmonton, but it’s like how many, you know, atom frames do you want to create?

Okay.

Now the bricks has a problem with components like this in the sense that some things can only be done at the ID level and some things can be done at the class level.

And that’s really annoying.

Right.

I’m going to take off animate active tab.

I’m going to, for the most part, do a lot of this at the ID level because I can control a lot of the tabs styling from one single source of truth anyway, but the class is there as insurance essentially.

But I’m going to do most of this stuff at the ID level.

So tabs wrapper, we want it to be horizontal.

That’s fine.

Tabs item padding.

Let’s go ahead and remove.

Okay.

So we can see the padding get removed from the items up here in the navigation.

And I want to reference our frame.

See, we’re not really doing any, we don’t really need any visual padding.

Okay.

At least I don’t think so, so far.

So that’s fine to remove that.

Let’s go into content item and let’s remove the padding there as well.

I don’t think we need any padding in the item itself.

Okay.

That’s fantastic.

Background color.

We don’t need any background color either.

Excellent.

Okay.

Tabs item grid layout.

Do we want to do this with maybe grid one so that we can do a little bit of a content gap?

I think that might be the way to go.

Okay.

Let’s look at our situation on the front end now.

Fantastic.

So we’ve got our tabs kind of separated from our actual grid down below.

If we go back to our source frame, that’s exactly what we’re looking at right there.

I think those are a little far away from the grid.

So I’m happy with our content gap being there.

What do we want to do with maybe our tab item active?

What do we want our item active to be?

We don’t want it to have a background.

We want it to have a border.

And we want the bottom to be solid.

And then we probably want this to be, we can just choose a color.

We can just choose a color for now.

Let’s do BG light.

Let’s do BG light.

Save.

Okay.

And let’s take a look at what we’ve got.

So now instead of a background color on our tab, we should just have an underline effect on our tab, which we do.

Okay.

So let’s go back here.

Tabs item.

Tabs item.

Active.

Border.

Width.

Hmm.

I don’t know if, oh, that does.

That is going to work.

That is going to work well for this.

Hmm.

What we probably need to add here.

I’m not liking that.

I’m not seeing it is it’s fine.

It’s fine when you’re going to go full width tabs, but that’s not always what you need.

Right.

Sometimes you need max content width tabs.

And in this case, you’re going to want to gap them out.

And I’m not seeing a gap property.

Now I can do it manually.

Right.

Custom CSS, but I would like us to have a gap box.

So Andrea, if you’re watching, Nuno, if you’re watching, Brendan, if you’re watching, make a little note.

We need a gap box in tabs item.

Pretty sure that’s probably already flex already.

So we could easily put a gap box for, for the people.

You got to do this for the people.

Right.

Um, there’s our tabs right here.

Let’s inspect this and see.

This is FR tabs list, which is a global for all for all frames tabs are going to use this.

So FR tabs list.

We should be able to just custom CSS this real quick.

Let’s go into, and this is where feature tabs Edmonton really comes in handy, actually, as our insurance class.

So we do that and then that, and then we can just border.

Let’s do a border check.

Five pixel solid red.

Make sure we’re getting the correct thing.

It looks like we are.

Let’s gap.

And our gap on this, we’re just going to go space XS.

Excellent.

Uh, would it be, I don’t even know what direction I guess they’re going.

Yeah, I guess that would work.

Okay.

Justify content to the center.

Get rid of our border check.

And now look what we have.

We have centered tabs.

Okay.

And we can space those out however we want to.

Let’s look at the source frame.

A little bit more, a little bit more spacing.

Uh, so let’s go instead of XS, let’s do S or M.

And now what I like to do is I like to abstract these away.

Um, yeah, we’ll, we’ll do that a little bit.

We’ll put CSS here just denoting that, Hey, there’s some custom CSS here.

I don’t know how much of this we’re going to have to do, honestly.

So, but we’ll, we’ll just start.

So we’ll say, uh, we could say nav spacing.

Okay.

Space M.

And then we’re just going to change this to nav spacing.

All right.

And that just kind of gives an abstracted variable that kind of should make sense to people.

And they can just worry about changing stuff up here and not worry about what’s going on in the custom CSS down below.

Cause now if I just change this, it’s like, Oh, I want to change the spacing of my nav.

Okay.

Well, you can just change this to whatever you want and you’ll get all different kinds of effects.

And it just gives you a little lever to pull, uh, that kind of uses plain language instead of you having to decipher what’s going on in the CSS down below.

Okay.

I’m liking our little situation here.

Now I’m thinking now we probably want to start handling our dynamic data, right?

Okay.

Are we ready for dynamic data?

That is the question.

I think we are.

You know what?

I’m actually, I think that this card actually it, yeah, it needs to be an H3, but I want it to look like an H2.

So I’m going to go typography, right?

Click H2, right?

I’m not changing the tag.

The tag is still H3.

I’m just grabbing the ACSS H2 heading size, uh, and sticking it in there.

And now we have an H2 heading.

And so now that card is going to look a little bit more like it’s lifelike in, in this size, um, rendering.

Okay.

Let me go back to chat real quick and see how we’re doing in chat.

Are we, am I going slow enough?

Like I always have trouble figuring out the pace.

Are we going slow enough to, that you can kind of stay with us and understand what’s going on?

Hmm.

Uh, let’s see.

Kiri now in stereo.

Kiri now in stereo.

I don’t know what that means.

I didn’t change anything.

So we’re, we should have always been in stereo.

All right.

All right.

SK says pace is fine.

Great pace.

Okay, good.

And sometimes, like, I don’t know, we just get off to the races and I think I’m going too fast.

And sometimes I’m like, I’m going to talk extra to explain this extra.

And then I’m like, maybe we’re going too slow.

I don’t know.

Let, let’s go with dynamic data.

I think, I think we can, we can go with dynamic data at this point.

Uh, are all these images wrapped in figure tags?

I think they are correct.

Okay, good.

Um, all right.

To do dynamic data.

Cause I don’t want to do it on this website.

I want to do it.

Oh shit.

What just happened?

I don’t know.

What just happened?

Oh God.

What just happened?

I’m pretty sure we’d already saved.

So we’re good to go.

Let’s look up Edmonton.

Uh, feature section Edmonton.

Okay.

Let’s edit.

I save a lot.

Uh, so yeah, we should be good to go.

We’re good to go.

All right.

Um, what is the easiest way for me to get this out of here without publishing it?

Probably just go to Bricks templates and Edmonton and export template.

Okay.

That should be good enough for now.

Uh, let’s just go in and see how this would work.

Blank website.

Um, what kind of website are we going to create my friends?

Let’s do a, hmm.

Hmm.

Hmm.

Hmm.

Hmm.

Hmm.

Hmm.

Hmm.

We could do, let’s do a travel site.

And these are going to be areas that we, uh, that we take people to areas that they can go to.

Right.

Uh, so we’ll do travel site and we’ll go from blueprint, uh, bricks, blueprint, create site.

And yes, the answer now officially is I have switched to zip WP, uh, from Insta WP.

I don’t know.

It’s just better.

I don’t know what to tell you.

Okay.

Installation in progress.

Uh, we’ve done it at Derek says BJJ site.

We’ve done those before.

I’ve used that plenty of times in examples.

I trying to do something fresh, you know, how do I add the frames components to my bricks builder?

Uh, well, that’s very easy.

Uh, you go here, you go to frames and you go to components and you toggle them on and that’s it.

And then they’re, then they’re there.

Now, what I would also recommend you do is you go to options and you go to bricks enhancements and you do hide redundant bricks components.

That’s going to hide all the bricks versions of what’s available for frames so that you’re only using frames.

Um, and I would also enable pro mode for ad elements cause that’s going to get rid of all the chintzy bullshit that you shouldn’t be using anyway.

Uh, and it’s only going to give you like core stuff, like the, the stuff you should be using.

All right.

Let’s go to bricks frames.

Now, where, where are we?

We want to go to zip WP.

This is going to be our travel website.

And then we’re going to open WP admin from there.

Excellent.

And then we need to import that frame.

So we’re going to go to bricks templates.

Do you import here?

Yeah.

I think you imported here.

Um, choose files.

Okay.

Downloads template import.

And now we have Edmonton.

Look at that.

Now we have Edmonton, but let’s go ACF.

Let’s go post types.

Let’s go destinations.

Destination.

How do we, how do we, how do we want to approach this?

Should that be categories?

Or do we want to do like, how do we, how do we want to do this?

If you query the destinations and then you query thinking how maybe, maybe that whole thing can be, maybe it doesn’t have to be, maybe it doesn’t.

Yeah.

Maybe it could just be destinations.

We can do featured destinations.

Cause this is more like what, if you had a hundred destinations, you wouldn’t be using this kind of layout.

Would you?

But if you had like five featured destinations, then this would make sense.

This kind of layout would make, so maybe what we need is destinations and then we need a taxonomy and we can feature certain destinations and we’ll, we’ll just do it that way.

Maybe we’ll try to do it that way.

I don’t know.

I think, I think we have to get going before we like figure it out.

Right.

It’s one of these things where you’re just going to have to solve the problems as they arise.

Uh, okay.

URLs.

What do we want to do?

What do we want to do?

We want to go take, get rid of the front URL prefix.

So we’ll just save that.

So we have destinations.

We, oh, you know what?

I usually make these plural and I forgot.

And now you can’t change it.

We’re fucksville people.

That’s what we are.

Uh, okay.

Taxonomies add new and we’ll go destination.

Uh, uh, actually.

Hmm.

I call this, I call this, uh, we can do visibility.

I use the word visibility a lot because you could do hidden featured.

You can, it’s, it’s like controlling the visibility of these objects.

Right.

Let’s try visibility.

Naming things on the internet is, is, is the hardest, is the hardest thing.

Um, would you call it visibilities?

Visibility.

I’ll just, I’ll just, I’ll just do this.

Um, post type.

We want to say it’s applied to destinations, advanced configuration.

I think we still have to do the front URL prefix.

Rewrite.

Okay.

Save under destinations.

We now have a visibility control.

Like we could say hidden.

Oh shit.

Come on.

That’s bad UX.

Do you see that UX problem?

I just ran into hidden add new visibility, but we could also do featured.

Right.

Okay.

Um, all right.

Let’s go to all destinations.

Add new destination.

Let’s do Sonoma, Sonoma, Arizona.

Be nice.

Right.

Let’s just, let’s just live in our dreams right now.

That’s what we’ll do.

Uh, we’ll say that this is a featured.

Okay.

Throw out.

You guys help me out.

I need destinations.

Give me destinations.

Really good destinations.

Uh, somewhere you might want to visit a featured destination.

Where are we going to take people?

Where are we going to take people?

My friends, uh, throw them in the chat, taking suggestions.

You helped me build the site.

Uh, let’s see.

All right.

While the delay happens.

Okay.

There we go.

Oh, Sedona.

I’m sorry.

You’re right.

You’re right.

You’re right.

Uh, and I’m from Arizona, man.

Uh, we’ll chalk that up to live streaming.

Hold on.

Where, where are we at here?

Where are we at?

Uh, oh, add new destination.

Okay.

Let’s go backwards.

Yep.

Yep.

Yep.

I want to go backwards.

Sedona.

Sedoma.

Sedona.

Uh, and let’s see if we can fix this.

All right.

Nice.

Nice.

Nice.

Nice.

I hate that there’s no like enter.

There’s no, I’m like, did it, is it going to get it?

Did it save it?

You just have to like click out of it.

Okay.

Um, you can’t just say like India.

Oh God.

Come on.

Come on.

Come on.

What is it?

Ilse?

Ilse?

Ice?

What’s your name?

I don’t even know your name.

Why are you trying to stir up shit right now?

Why are you trying to stir shit up right now?

Oh, leave it alone.

Leave it alone.

Uh, I would do the Grand Canyon, but we’re already doing Arizona.

Santa Fe, New Mexico.

Okay.

We’ll take that one.

Santa Fe, Santa Fe, New Mexico.

All right.

That’s not, it’s not that because it’s not in.

Yeah.

It’s not.

It’s definitely American.

Okay.

Hmm.

Destin, Florida.

I got married there.

So we have to choose that one.

Destin, Florida.

I think we’re good.

All right.

We’ll just go with three.

We don’t need to get, we, you know, we’re not building a real site here.

Okay.

We don’t need to get crazy because I got to go find photos for all these fucking places now.

Um, okay.

So let’s go Santa Fe now.

Cause I think we forgot to feature this.

So let’s say featured.

And, uh, Sedona, we did.

Destin, Florida.

We need to feature.

Featured.

One thing I do need to do, which I wish this was the default, like taxonomies, visibilities.

Uh, where is it?

Where is it?

Uh, URLs.

No, no, no, no, no, no.

Where’s, where’s hierarchical.

Oh, here it is right here.

Safe.

Okay.

Um, you gotta get the, uh, you gotta get the check boxes going.

Okay.

Add new destination.

Uh, let’s do one more.

Cause I’m, I’m going to make this not featured.

And that way we know whether we have, uh, done our job right or not.

Okay.

We’re not doing Portland.

We’re not doing poor.

This is not, it’s not a featured destination.

Not a featured destination.

Uh, let’s do Tuscany, Italy.

God.

Look at SK has got all the good ones, right?

See, this is the man you need.

When you need suggestions, SK is the man you need around.

Tuscany, Italy.

This will not be featured.

Okay.

So unfortunately, Tuscany is not going to get done.

All right.

Let’s go to pages and let’s go to add new page and let’s call this featured destinations.

All right.

Publish, publish.

And let’s edit with bricks.

And now what we need to do is we need to put in our little layout feature section at UCI.

Clicked edit again.

Horrible UX.

Horrible UX.

All right.

Feature section Edmonton.

I want to insert it.

There we go.

Okay.

This is going to say featured destinations.

And let’s take this heading.

That’s, that’s very, uh, very conservative on the width.

Okay.

Let’s go 20 character width.

Um, all right.

Now we have our tabs.

We are waiting on content.

Okay.

How do we want to do this?

I think what we’re going to need to do, it’s going to be two query loops.

I’m, I’m thinking you’re going to query the navigation and then you’re going to query the content and the queries essentially need to be identical queries.

Right.

Um, and you’re always going to query the item.

So we need one of each thing, one of each thing.

Okay.

Now we don’t have any images in there yet, but we, can we at least get text on the page correctly?

Right.

So let’s query this item.

So let’s query loop this.

And let’s say we are going to say destinations, right?

So we want our destinations, but we’re going to do a tax.

Actually, no terms include featured.

So should be very easy to, to query these.

Uh, let’s go tab one.

We’re going to say the post title is going to give us the name.

Bang.

Look at this.

Okay.

We’ve got our featured destinations.

And now our tab item wrapper tabs item.

The item wrapper is the thing we need to loop through.

Okay.

So we’re going to query, we’re going to do the exact same thing.

Query our destinations.

Fantastic.

And just to see what we’ve got, this is essentially going to be the post title right here in our card.

Fantastic.

And let’s go view this on the front end and see how we’ve, where have we gotten so far?

Okay.

Ooh, we have a, um, ooh, let’s think about, oh, you know what I didn’t do?

That’s what, that’s why you have to make sure the queries match.

Uh, we didn’t say that this is going to be featured down here.

So you need to terms include featured.

Okay.

All right.

Save and refresh.

Now we have Dustin, Florida, Santa Fe, New Mexico, Sedona, Arizona.

Look at what we’ve got going on.

Look at what we’re cooking in the kitchen.

All right.

Now we need a featured image for each of these.

Cause I, what I’m imagining is the featured image is the background image of the card.

Right.

Uh, so let’s go to unsplash.

Let’s go Destin, Florida.

Uh, it doesn’t really have to be Destin, Florida.

Okay.

Just got to kind of look like it might be Destin, Florida.

You get my, you get what we’re doing here.

Okay.

So we’ll, we’ll get that one.

We need Tuscany, Italy.

Okay.

Wouldn’t know.

Wouldn’t know if any of these are Tuscany, Italy, but I’m gonna, I’m gonna download here.

All right.

Uh, what was the other one?

Sedona, Arizona.

That’s going to be our Sedona, Arizona right there.

Okay.

Uh, let’s go to, I’m going to bring up photo bulk.

Okay.

And I’m going to grab, uh, downloads, bang, bang, bang.

Those three, bring them in.

And we’re going to say to resize and rename.

And these are going to be destination.

Okay.

Start, save, bang.

I’m going to go back in here, uh, to the backend.

Um, let’s just go here while I’m here.

Destination site.

All right.

That’s a little OCD.

I just caught it out of the corner of my eye.

I had to fix it real quick.

I didn’t want it to say sandbox.

Okay.

Uh, let’s go to Tuscany, Italy and set feature.

Now do I’m having trouble with this new WordPress layout where they’ve done this sidebar differently.

My brain is like looking in a certain spot that it’s looked for the past like 10 years and, and stuff’s in a different place.

Okay.

Let’s go create destinations.

All right.

Let’s go in, uh, in our downloads, resize folder, bring these in.

Bang, bang, bang.

Okay.

Now you wouldn’t normally do this destination zero, zero, zero.

Okay.

You would want to make sure the file name is the name of the thing itself, but we’ve got places to go and things to do.

Uh, this needs to be Tuscany, Italy.

Okay.

Save that.

Let’s go back.

Uh, let’s go into Destin, Florida, set featured image, Destin, Florida, uh, save, go back and go to Santa Fe.

Wait, we didn’t, we didn’t, what did I do?

What did I do?

Did Tuscany, Destin and Sedona?

Uh, remember Tuscany is one we were not doing.

So fuck.

All right.

Uh, guess what?

Tuscany you’re in, uh, featured.

Okay.

Save.

Let’s go back.

Actually it’s, let’s just feature them all.

We already did the loops.

The loops didn’t have Tuscany in it.

Right.

But now they will.

So we can just include Tuscany.

Um, either way I would need to get a Santa Fe, New Mexico.

So I guess what we’re going to do is sorry, Santa Fe, you’re out.

All right.

Did that keep the image?

It did keep the image.

All right, good.

Let’s go to the front end.

No, I want to go to pages and view.

Feature destinations.

Tuscany, Italy.

Destin, Florida.

Sedona, Arizona.

Okay.

Look, Tuscany is in.

All right.

Um, now we can go here.

We can refresh our builder and then we’re just going to pull in our featured image into that card.

So let’s go into the card and we’re going to go to background, remove the static image and just look for the featured image.

And look at that.

Okay.

There’s Tuscany, Italy.

There’s Destin, Florida.

There’s Sedona, Arizona.

Come on, Sedona.

Why, why did you have to be a problem?

Why?

Like everybody else is not being a problem.

Why are you being a problem?

Sedona, Arizona.

Set featured image.

Sedona, Arizona.

Thought we did this.

Guess we didn’t.

All right.

Let’s go back.

And let’s view on the front end.

There we go.

Sedona, Arizona.

Man, this is just fantastic.

Now what we’re going to do.

The hard part.

Okay.

We need other images.

There has to be other media.

There has to be a description of the destination.

The description of the destination.

And there has to be, oh, you know what we’re going to do?

We’re going to go easy on this.

This is going to be static.

And we’re going to say, guess what?

Featured destination.

Okay.

Let’s solve one problem at a time.

Just solve one problem at a time.

Keep moving forwards.

You’re unstoppable.

Just keep telling yourself that.

I’m unstoppable.

Okay.

And just keep moving forward one step at a time.

Positive self-talk does help in web design.

It does.

All right.

New Mexico, girl.

You’re killing me.

No Santa Fe.

No Santa Fe.

What’s wrong with Santa Fe?

Well, hey, we took it out.

Oh, oh.

You’re saying because I took it out.

You’re upset because I took it out.

Okay.

Maybe we’ll get it back.

Maybe we’ll get it back.

We’ll see.

All right.

Let’s talk about now how to get this description in here.

Okay.

Very easy.

This is a very easy.

You should know how to do this already.

Let’s go back.

Let’s go to ACF field groups.

And we’re going to go add new field group.

Destinations.

Destinations.

We’re going to come down here.

Give ourselves a little.

Do you go WYSIWYG or do you go text area?

How do you make the decision?

I’ll tell you how you make the decision.

If you want some fancy shit, like you want to be able to bold some stuff.

Maybe you want to put a link in there.

Then you go rich text.

You go WYSIWYG.

Right?

You go WYSIWYG editor right here.

If you don’t want any fancy stuff happening, you can just go.

You can get by with a text area.

Now, when in doubt, if you’re like, I don’t know, then I’d probably go with a WYSIWYG.

Okay?

But there’s a thing you have to do when you go with WYSIWYG.

And I’m going to show you.

It’s an important little distinction.

You don’t want to miss it.

If you’re taking notes, it’s a good time.

Grab the pen.

You’re going to need to take a little note right here.

All right?

People do this wrong all the time.

I’ll show you exactly what’s going to happen.

All right.

We’re going to call this destination short description.

No, no, no, no.

We’ll just say destination description.

No, no, no.

We’ll say short description.

Because you might have a long description somewhere else.

You know what?

Let’s not over-engineer it.

Let’s just go description.

All right?

Destination description.

I do this a lot.

I just waffle back and forth.

All right?

Save.

We do need to remember to assign these to destinations.

But now if I go to destination and I go to, for example, Tuscany, Italy, you’re going to see I have a destination description box.

Look at that.

And then what I’m going to do is I’m going to head over to Claude and I’m going to say, write me a travel description for Tuscany, Italy.

Selling me on why I should visit Tuscany.

Okay?

Now, actually, what I’m going to do with Claude here, I’m going to say Claude.

Okay.

I want you to write some really awesome travel descriptions for cities that I give you.

These should be two to three sentences long and should persuade the reader to visit the location.

Okay?

Bang.

Okay?

Let’s go, Claude.

Let’s go.

All right.

I’d be happy to help create some enticing travel descriptions.

Well, thank you, Claude.

Glad you’re on my team.

All right.

Tuscany.

Tuscany, Italy.

Let’s see what you got, Claude.

Look at this.

Look at this.

Okay.

Bring this in.

Tuscany, Italy.

Bang.

Pop you in.

Save.

Okay.

Now, we need to check on our length here.

We need to check on our length.

I actually want to do character counter.

Let’s count characters.

All right?

We’ll show you some stuff we can do with our friend Claude here.

Okay.

Characters. 474 words. 74 words.

I’m already thinking this is going to be pretty long.

Let’s cap it there. 300 and…

Okay.

We’re going to go Claude.

Hi, Claude.

You don’t actually need that.

I just…

You know, you got to treat these…

You never know what the AI is going to do to us in the future.

You should treat it with as much respect as you possibly can.

Hi, friend.

Okay.

I really need these to be less than 300…

What was it?

I’m getting my characters.

Yeah.

Okay.

Less than 300 characters.

Let’s just use character counts.

That’s probably the best way to go.

Characters.

Okay.

All right.

All right.

Good.

Okay.

Okay.

Tuscany.

Tuscany.

Italy.

All right.

There it is.

Bang.

All right.

Let’s grab that.

Let’s go in here and paste.

Good.

Get any additional nonsense out of there.

Save.

All right.

Let’s go refresh or just get back into the builder here.

Perfect.

Okay.

And we’re just going to say that this is the destination description.

Now, you see how this is a paragraph tag from the frame?

This is going to be a problem here.

All right.

Save.

Let’s go view this on the front end.

Okay.

Look.

Look at the extra spacing.

And if we inspect this, you’re going to see we have double paragraph tags.

Usually what happens?

Yep.

Or sometimes empty paragraph tags.

Look at the empty paragraph tag.

Okay.

If you’re going to use content from a WYSIWYG custom field, let me get back into the builder here.

You must change the wrapper container to a div.

It cannot be a paragraph.

Okay.

So save.

Now we’ll go back to the front end.

And I don’t know why it’s doing this in the same tab, even though I’m holding command.

But now I don’t have the extra things.

And look at this.

I got my nice little Tuscany description.

So I’m going to say Destin and Sedona.

So let’s go back to Claude.

Destin, Florida.

Okay.

It’s going to give me one for Destin.

And then Sedona, Arizona.

All right.

Well, it’s writing that.

I’ll go back and I’ll do these.

All right.

So we’ll go Destin, Florida.

Put that in.

Save.

Go back.

And then let’s go back to Claude.

Let’s grab our Sedona.

And Sedona, Arizona.

Pop that in.

Save.

And now let’s go back to the front end and see what we got.

So there’s Tuscany.

There’s Destin.

There’s Sedona, Arizona.

Look at this.

Look at this.

Okay.

Now our little button here can say, I hate how this keeps taking me out of the builder.

Okay.

So our button, watch what we’re going to do here.

Our button is going to say, learn more.

Right.

But what we’re going to do is we’re going to say, you can do this two different ways.

You can do this with hidden text, which I can’t really do inside this button.

So we’re going to do ARIA label, right?

ARIA label.

And I’m going to say, learn more about, and then I’m going to inject the post title.

So on screen readers, this isn’t just going to say, learn more when people select it.

It’s going to say, learn more about Tuscany, Italy.

See that?

Okay.

Or learn more about Destin, Florida.

It’s going to read out the entire thing to give the screen reader user context as to what they’re actually clicking on.

Okay.

Let’s go back to the front.

I really like, why won’t this open in a new tab?

It’s killing me not opening in a new tab.

All right.

We’ve got our card.

Our card’s done.

Our card is, this is a check that box, right?

We are done.

Look at this.

This is fantastic.

Got our descriptions in, got our background image in, got our learn more.

We can inspect this and see where it says ARIA label right here.

Learn more about Sedona, Arizona.

You guys see that?

Okay.

We understand what we’re, what we’re doing here.

Now we need our other supporting images.

And this is where you get into a little bit of a chaos situation.

Okay.

It’d be nice to use an ACF gallery field, but you can’t query gallery fields in bricks in a custom grid.

Like I’m doing, I’m in a custom grid situation.

Out of the box.

You got to be a PHP person.

Okay.

You got to PHP it.

I don’t PHP stuff all that much.

I try to avoid it.

Right.

So, so when I’ve looked at this, I’ve, I’ve come up with a workaround, right?

I’ve tried to figure out a workaround for this.

What we can actually use is an ACF repeater field.

All right.

And I’m going to, so I’m going to show you how to do this, but we need to query these additional images right here.

So first off, we need some additional images.

So we’re going to go to unsplash again, and we’re going to do Sedona, Arizona, Sedona, Arizona, and let’s just grab some additionals.

And it doesn’t really matter what they are.

So like, we’ll grab this one and actually let me go delete my downloads folder first.

Let’s go copy all that stuff.

Don’t need it.

Okay.

Let’s get this one.

Let’s get this one.

Let’s get this one.

Let’s get this girl.

Cause when you have people in your photos, that works even better.

How many is that?

Four.

Okay.

I need one more.

You need five images.

You need five supporting images, uh, for each of your things.

Uh, here’s people that look like they’re traveling in that destination.

So let’s throw that in there.

Okay.

Fantastic.

Let’s go back to photo bulk.

I obviously, you know, if you know how to do all this stuff, then, um, this is kind of a boring part, but there are people who don’t know what the workflow is, but like, where do I get some images?

Where, how do I optimize them for the web?

How do I, like, I’m just purposefully kind of doing every step of the process.

Right.

So for those of you who are bored, try to think about other people, right?

There’s other people here and they don’t, they don’t see all this stuff, uh, all the time.

So I’m going to start.

So I’m going to start.

And actually we’re going to say, this is Sedona and I’ll say start and I’ll hit safe.

Okay.

And now what we’re going to do is we’re going to go back into ACF land.

All right.

Why is that acting like that’s not saved?

Let’s go back ACF back to field groups, back to destinations, add field.

This is going to be a repeater.

And what we’re going to repeat is our, uh, destination images, destination images.

And in here we are going to do an image.

And this is going to be the destination image.

Just like that.

Okay.

Uh, I think array is fine as the, we’ll see, we’ll see.

We’re on a journey together.

We are on a journey together.

Uh, all right.

So we have destination description and destination images.

Destination images is a repeater field with a destination image inside of it.

And table block row.

I don’t think that’s going to matter all that much.

Let’s go to destinations.

Let’s go to Sedona.

And now you see, we have an image down here.

I can add a row, add an image, and then I can go inside of here.

I can say, these are going to be all of our Sedona images.

I’m going to grab them from right here and pull them.

Fantastic.

How many are there?

One, two, three, four, five.

Perfect.

And I believe I can just select all of them right here.

And it’s going to automatically create my repeated rows, right?

It’s kind of like a gallery.

Honestly, it works very, very similar to how a gallery would work, but it gives you extra flexibility in how you’re querying the items.

All right.

So I’ve essentially just created my destination images gallery for Sedona.

I’m going to go ahead and hit save.

And we are going to go back to the builder.

Okay.

Now what do we need to do?

Hmm.

Uh, let’s go.

So this is where we are going to be forced to have a wrapper.

You have to wrap this.

And we’re going to call this media wrapper because you can’t query images without a wrapper.

This is where I said in the very beginning, it’s not an opinion that you need a wrapper.

You actually physically need a wrapper.

Okay.

Okay.

Let’s go.

First, we need a class for that probably.

So we have, what do we call this?

This is a feature grid Edmonton media.

That makes this feature grid Edmonton media wrapper.

Bang.

Just like that.

Okay.

Okay.

Now we need to query loop this and we are going to choose the ACF repeater.

And inside the media, we’re going to get rid of the static.

We’re going to go dynamic.

And we actually have to use the ACF short code for this, which is destination image.

And large.

Do we need large?

What size do we actually need?

I bet we can get away with like 768.

And let’s see if we are, let’s see.

We are on a journey together.

Let’s see if we are querying anything.

Sedona.

Look at it’s almost too easy.

It’s almost too easy.

Now you would want to put your alt tags in, right?

Let’s go to Tuscany.

Okay.

Let’s go.

We can go back to unsplash here.

Tuscany, Italy.

Fantastic.

Let’s go.

We already, okay.

We did that one.

Let’s grab this one.

Let’s grab this one.

Let’s actually, I want that one.

Let’s grab, ooh, this one.

Vibrant.

There’s, look, look at these, look at these nice little people in Tuscany, Italy, enjoying themselves.

Okay.

Let’s go here.

Photo bulk.

Done.

Yep.

Yep.

Okay.

Bring this up.

Downloads.

Where’s Tuscany?

One.

Uh, this is, you know, we probably need a gallery.

That’s probably the better way to do this with the gallery.

Okay.

Tuscany, Tuscany.

Actually, I don’t want that one.

I want this one.

Uh, I want that one.

Three.

Uh, four.

Okay.

We need one more.

We need one more.

Did I not get one more?

Uh, whatever.

Just do, there’s going to be a duplicate in there.

It’s fine.

Uh, let’s bring those in and let’s go ahead and say Tuscany.

Okay.

Start.

Save.

Okay.

This might be the last one we do.

I’ll just, I’ll go to questions after this.

Obviously, we’re just kind of doing a bunch of repeat stuff now.

So Tuscany, Italy, uh, destination images, add row, add image, destinations, Tuscany.

Got to keep all your stuff nice and organized.

Okay.

Be a good student of the game.

Downloads.

Let’s go back to columns, uh, resize.

Here’s all of our Tuscany’s and let’s go ahead and select.

Now, what happens if we select more than we need is a question, right?

Save.

Okay.

Let’s go back to the front.

Now we have Tuscany, Italy.

Look at this.

This is just marvelous.

We just don’t have Destin in there.

Um, but let’s see, let’s see what happens if we threw in an extra, uh, an extra row.

An extra row.

Let’s just throw them in again.

Okay.

And then let’s refresh and look at what we have.

So one, two, three, four, five.

We need to make sure, uh, let’s go back into our builder so we can limit this with the, with the loop itself.

Right?

So let’s go to the loop that controls the media.

And, um, Oh, actually, you know what?

This is one of the problems with querying from a repeater.

Um, we’re not able to say only five of them.

We’re not only to say only five.

Uh, let’s see if we can tackle this a different way.

Field groups is where we’re, we would need PHP.

You would, you’re going to need, let’s see bricks.

We have begged bricks to fix this for so long now.

Uh, it, it happens with relationships and it happens with repeaters where you lose all of the controls.

Uh, not good, not a good situation.

Uh, description images, uh, presentation, validation, maximum rows, five.

Save.

Now we’re physically saying a, it, when you’re doing the repeater itself, uh, you, you can’t have more than five rows.

Um, one, two, look at that.

One, two, three, four, five.

Look at that.

And I don’t think, look at this.

We can’t add another one.

So now we can also say, by the way, um, if you’re going to use it for this purpose, right?

You can say ACF destinations, destination images, validation, minimum rows, five.

It’s like, dog, you got to have five.

Okay.

We’re not the way we’re using this.

You got to have five.

All right.

So it’s going to force people who are putting in the content now to have five images.

Um, all right.

So Rob says, what was that about relationships losing control?

When you do bi-directional relationships with query loops and bricks, uh, it looks like this.

See that you don’t have any controls.

There’s nothing I can choose.

Like if I go here and I choose query loop, look at all these controls that I have and I can like limit it post per page.

Right.

Um, but I lose those controls when I query from a repeater or a relationship.

And we have begged bricks for probably a year and a half now, two years now, uh, to give us the controls on these kinds of things.

And we still don’t have it.

It’s very unfortunate, very unfortunate, but look what we’ve done guys.

Look what we’ve done.

We created number one, we created a new frame and then we just validated the fact that we can actually dynamically populate these tabs and this grid with dynamic data for a real use case.

This is fantastic, right?

I mean, this is, I feel like we got a lot accomplished.

Um, let’s go see our work.

Okay.

Um, that one’s still, Ooh, you know what?

Even though ACF cut off at five, it’s still actually a six in the database.

That is a unfortunate thing.

So to fix that, you’re going to have to go to destination, destination images, uh, validation, maximum of six, save, go to destinations, go to Sedona.

No, it was Tuscany.

Sorry.

It was Tuscany.

Go to Tuscany.

Delete that last row.

Save.

Save.

Save.

Go back.

To validation.

Five.

Save.

Get rid of all the tabs because we’ve got too many open.

And go back and see our destinations now.

Okay.

Now we’re good.

Now we are good.

And obviously you could put in Destin, Florida.

You could add more featured ones.

Um, now how many are we going to feature?

Good question.

We got to put a cap on that for sure.

I would say five is the max, right?

So if we go to our item loop for our navigation and we say post per page five, and then we go to the loop down here and also say post per page five, it’ll never have more than five in the tabs.

Five featured.

Uh, then you could control the order.

So when you feature a new one, it just puts the new one in and replaces one of the, the oldest one essentially gets replaced.

That’s how this can be managed completely dynamically, which is really, really, really nice.

This is the frames tabs component.

Uh, this is feature section, feature section Edmonton for frames.

A lot of good stuff going on here.

We’ll get back to questions now.

Uh, there is that.

I mean, look at this.

This is very, very nice.

You can use this for a lot of different things.

A lot of different things.

Okay.

Um, yes, I know.

Calisthenics Ireland, you can add some PHP and it will change the, yeah.

You got to do a custom, uh, PHP query.

Okay.

Kevin might have a soundboard effect for clapping.

I, I, I, I do, I do somewhere.

It’s really dumb.

It’s a really dumb one.

I need to get a better one.

You know, I need to get a better one.

Okay.

Uh, any, any, let’s go back to questions.

Let’s go back to questions.

Let’s go hashtag Q.

Okay.

Oh, I’m in the favorites tab.

I got to get out of the favorites tab and into the normal tab.

Okay.

What is an ARIA label?

Well, uh, here we can, we can probably hear it.

Let’s see what, uh, what audio are we on?

Main stereo.

All right.

That should work.

So cover your ears.

This might be loud.

Or, or not.

There we go.

Voice over on our feature destinations, destination site window feature destination voice over off.

Destination site.

Destination site.

Web content has keyboard focus.

Okay.

So let’s go to the right.

It’s on the wrong audio channel.

It’s on the wrong audio channel.

Hang on.

Hang on.

Hang on.

Hang on.

Hang on.

Let’s bring up a system settings.

Let’s go to sound.

Uh, output output output output.

What in the world?

Okay.

Rodecaster to input main stereo output main stereo.

Okay.

Should be right now.

Let me know if you guys can hear this.

Voice over on arc feature destinations, destination site window feature destinations, destination site web content has keyboard focus.

You are currently on web content to enter the web area.

Press control option shift down arrow.

Sorry.

I was controlling the, uh, I think I can turn down the audio of just that channel.

Okay.

Can you guys hear that?

Could you, could you hear it before we go any further?

You have to make sure you can hear.

Otherwise anything we’re about to say is going to be irrelevant.

Uh, let me go back to chat.

Comments and reactions.

Whoa, whoa, whoa, whoa.

Chill out.

Chill out.

Chill out.

Okay.

I got to get to the bottom of the chat window.

Yes.

Okay.

Good, good, good.

They can hear it.

All right.

Um, so we’re going to go over this button right here.

All right, here we go.

Link.

Learn more about Tuscany, Italy, Tuscany, Italy tab panel.

You are currently on a link to click this link.

Press control option space.

Voice over off.

Okay.

If you don’t have the ARIA label, it will read the button text, which says learn more.

And a screen reader user is like, learn more about what?

Like I, I don’t know what I want to learn more about, but we add the ARIA label.

The ARIA label gets written, read out instead of the button text.

Right?

So you get this.

Link.

Learn more about Tuscany, Italy, Tuscany voice over off.

And then when I’m on Destin.

Okay.

Let’s refresh.

Go to Destin.

Link.

Learn more about Destin, Florida, Destin, Sedona, Link.

Learn more about Sedona, Arizona voice over off.

See that?

And because we made the ARIA label dynamically, it’s going to read the right thing for each one.

So to refresh that on the button, style, attributes, ARIA label, learn more about, and then I’m injecting the post title, which is the city name.

Okay.

Let’s go back to Q.

Okay.

All right.

This felt like a working hours of Inner Circle was working while you were building this great frame.

Yes.

Yeah.

These are fun.

The only difference is when I do, when I do, what is it called?

Co-working with Kevin in the Inner Circle.

Typically, I just work.

I don’t talk through it.

I just turn on music and I just, I just work, work, work, work, work.

And then people can watch.

They can ask questions.

They can do their own work while I’m working.

And we’re all listening.

It’s, you know, it’s just a hangout.

It’s a hangout.

But this is a little bit different because I kind of explained every single step of the process.

Okay.

Why did you have the hidden taxonomy when not featured will take care of it?

That’s not what hidden is for.

Hidden is for, sometimes you want to publish things.

But when you loop through those types of things, like I want to publish destinations, but in loops, in certain loops, I want to not show that thing.

Because actually, like I could feature something, but not want it to show up in this featured loop, for example.

And in that case, what I could do is when I do my loop.

Okay.

Let’s go to here.

I could say, I could set this particular loop up to say, include featured exclude hidden.

And now if it’s featured, it’ll show.

But if it’s featured and hidden, it won’t show because I’m saying hide it from this particular loop.

It gives you more control over visibility.

I do that a lot with custom post types and stuff because there are oftentimes where you want to publish URLs, but you don’t want them to show up in certain loops.

Right.

And this could be like, sometimes it’s temporary.

Sometimes it’s like, oh, you know, it’s there.

Maybe we’re going to send direct traffic to it, but we don’t want it shown on all over the website for right now.

So you can just hide it.

Right.

It’s just, uh, cause there’s no other control really for that.

All right.

Let’s see.

Do you not hate the full view inside Gutenberg?

Like in a location under dots view, I hate having to click the WP icon to go back.

Uh, yeah, I, I, I kind of do.

I kind of do.

I’m not, maybe not enough to change it.

I don’t know.

Uh, I, I hate a lot of stuff about, about the default WordPress, uh, admin.

What are the best practices for importing frames with the intent of renaming classes?

So you can import the frame again in another section with the frames, original FR classes.

Uh, I mean, we’ve gone over that before, but like, here’s intro alpha.

The first thing you want to do is you want to open ACSS and you want to go to options.

And, uh, actually, is it under frames, additional options?

Um, nope.

I think it’s under maybe just options.

Uh, maybe it’s under bricks enhancements, import original classes for templates.

So you want to turn that on.

Okay.

Uh, and then what you’re going to do after you turn that on, we’ll just turn that on and save.

Okay.

And then I can get rid of the, uh, dashboard here.

And on this intro alpha, I would just BIM this.

Now you can’t BIM feature section Edmonton because as we’ve discussed in the past, it has no element children.

This is not a BIM situation.

Um, it just, it, it’s a block and it has no elements, right?

It only has other blocks in it.

Intro alpha is a block.

Intro alpha has children that are elements.

So this can be BIM.

So you hit BIM on this and instead of intro alpha, I’m just going to say intro, right?

So it’s going to say, or I say, uh, intro centered or whatever.

Um, yeah.

Or centered intro.

It can be whatever you want, right?

You got to come up with your own names for things.

Uh, but then I hit, uh, apply classes.

I’m going to sync labels.

And now essentially that is centered intro.

And this is centered intro heading centered intro accent heading centered intro lead.

Right.

Uh, and now I could go change this up, style it up.

And I could import a fresh version of FR intro alpha because I have that setting turned on, but that’s essentially what you’re going to do.

Um, and then once you do a centered intro like this, I would recommend right click and save as template and put this in your native library for this install as centered intro.

And that way, when you are building another page, uh, let’s just add section, section, section.

Let’s pretend I’m on another page down here.

I can come in templates and centered intro is right here and I can just insert it.

And I don’t have to worry about going to the frames library to get it.

Uh, it’s right here.

All right.

That is the answer to that.

When are we getting the external link indication on links through ACSS, the arrow icon next to external links, super excited for that feature.

Well, you could already get it if we want to limit it to HTML entity arrows, but if you want to be able to use custom icons, that’s going to be a little bit trickier, right?

So I’m thinking about releasing it just for support for HTML entities, which if, if you don’t know what that is, um, it’s, it’s, it’s, it’s all the, it’s, it’s any of these like, uh, where’s a whole, there’s should be a whole library of them.

Um, here we go.

Yeah.

Like there’s a whole library, right?

So there are a bunch of arrows in here that you could use.

Um, there’s thick arrows, there’s thin arrows, you know, there’s a bunch of different.

So adding support for this would be very straightforward.

This is probably where we’re going to start, but then I already know, I just know.

Okay.

I’m just bracing for impact.

It’s like the minute I released the feature and you can use all of these things.

It’s not going to be good enough.

People are gonna be like, I want custom SVG icon support.

Like that’s going to come.

Right.

Um, so I was thinking, should we just go to that extent and then release the feature or can we just get away with doing this?

You know, maybe we do it in phases.

We’ll see.

You could tell me right now, is it good enough to just do this?

Right.

Is it?

Yeah.

You just need a little tiny arrow, right?

This to signify it.

And, but people like to get fancy.

They like to get fancy with it.

Can’t please everybody.

Probably a dumb question, but I’m, am I right in saying that I BIM all my elements before doing any styling and not the other way around?

Correct.

Correct.

Now you could do, there’s, there’s three ways to do this.

There’s the wrong way, there’s the inefficient way, and then there’s the efficient way.

Okay.

So we can take a look at this.

So we will go to, let’s get rid of, we don’t need all these tabs.

Okay.

Let’s get out of here.

Let’s go do a new page.

I’ll just do a little card.

I’ll do a little card to show you, right?

Add new page.

We’ll say little card.

All right.

We’ll publish, publish, edit with bricks.

Okay.

So we’re going to make a little card.

We’re going to go div.

We’re going to make a little card.

So the wrong way would be to, well, the wrong way would it be obviously wrong, right?

Where you’re styling a bunch of stuff before you add any classes.

Then you’re going to be like, ah, I just did a bunch of work for no reason.

I got to undo all those styles.

I got to apply those to the classes instead.

Right now, auto BIM 2.0 is going to have a feature where you can just copy from the ID into the class that you’re creating.

But that’s not here yet.

So the right approach would be, yes, classes come first.

Now, some people, maybe if you’re more of a beginner, you probably can’t put all the necessary HTML pieces in place before you start styling.

And I get that, right?

But if you’re a pro, what you should be able to do is look at a design, okay, like this card right here and go, all right, well, we got the outer div.

That’s obvious.

I’m probably going to want an inner wrapper for additional flexibility.

And then I’m going to go heading, text, text, button.

Okay.

So this is the most efficient way, right?

Where I see what I want.

So I’m going to go block.

And inside that block, I’m going to go heading.

And I’m going to go text, text, text.

And I’m going to go button.

I think we actually only need two texts.

I’m going to go paragraph.

I’m going to go paragraph.

And then I am good to go.

All those things are needing to be inside this block though.

Okay.

And then what I would do, um, again, you know, how advanced are you?

You could auto BIM right now.

And you’re looking at this situation.

Okay.

But if you’re more advanced, you know, what is this?

This is my little card, right?

And then this is my, uh, inner wrapper.

I could just call it inner.

And then this is my CTA.

And this is my accent heading.

And this is my description.

And this is my real heading.

And then as long as I sync labels, this labeling work that I’m doing here is going to get transferred to right here.

Right.

And then I just need to put things in the right order.

So there’s the description, there’s the accent heading, and there’s the CTA.

And now they all have their classes, right?

Little card heading, little card accent heading, little card description, little card CTA.

And I’m good to start styling now.

Right.

But if you can’t work that out in your brain before you start styling, then you’re going to have to do it a different way.

So you would have to do it like this.

Let’s do another container.

Let’s do a div.

And you would say, all right, this is going to be my little card two.

And then I’m going to put a heading in.

And then you’re like, all right.

So I’m going to say this is going to be, you’re not really going to be able to use auto BIM all that much.

Right.

Little card two heading.

Because you’re, you’re doing things in pieces and because, you know, you’re, you’re having to get structure first.

You’re like, all right, now I just need to see what I see.

Right.

So let me get some spacing going on in here.

Maybe let’s get a background color in here or something.

Okay.

I see what’s going on more.

I’m going to add my first text element in here.

This is going to be a P, but now I’m going to have to add a class to it before I can style a little card two.

This is going to be the description.

Okay.

And then I, you know, I do my Ipsum thing, Ipsum short, uh, put that in fantastic.

And then I’m going to go onto the next piece and see how slow this is.

And this is what auto BIM fix.

But in order to do auto BIM, you really need to be able to analyze something and see, oh, I know exactly what elements I’m going to need.

Wrapper, wrapper, heading, heading, text, text, whatever, button, button, button, put it all in there.

Then just go auto BIM and, uh, you’re good to go.

And that’s ideally what you want to get to.

Like if you can’t do that right now, that’s what you want to aspire to be able to do.

Oh, let’s see.

Let’s do what time is it?

105.

Oh, we got to go dog.

It’s like, oh, it’s two hours.

It’s two hours.

It’s flew by.

This always flies by.

Okay.

Let me get back to the chat.

Let’s see what the chat’s doing.

HTML entities is more than enough.

Okay.

Well, if that’s more than enough, then that is the next thing I will work on.

I do have some time today and tomorrow.

So I can’t, there is about, actually, let’s do this together.

Let’s, we’re going to do an ACSS release together right now.

Cause I actually need to get this one out.

So we’ll do that together.

And then we’ll get out of here.

Cause I mean, I am working.

So, you know, we don’t have to leave just because I’m going to do one other thing.

So if you want to see, it’s all ready to go.

I just need to package it up and release it.

So let’s do that.

Should we, should we expect an Ipsum long shortcut?

I’m working on it.

It’s really comes down to how you parse out the separate paragraphs.

So, but yes, that, that is the plan that there will be an Ipsum long.

Okay.

Let’s go visual studio code.

Um, I think this is all ready to go.

Terminal, new terminal, NPM, uh, run, build, zip.

And this is going to be, yeah, 3.015, which I believe, uh, let’s go ACSS.

The cold is getting to my throat now from, from a couple of days ago.

Okay.

I think I already have the change log created as well.

What we probably should do.

Hmm.

Always a good idea.

Uh, let’s go get frames.io slash dashboard before we actually let’s, let’s, I, I always install it on a real site.

Uh, we already did testing of all the things that were done, but I, I like to just take the package, put it on a real site, you know, make sure, make sure nothing blows up in your face.

Get frames.io.

Come on.

What, what is the, where are we at?

Where are we at?

Okay, good.

Plugins.

Let’s see what version this is on.

Come on now.

Admin on the site is not, is not liking life.

Okay.

3.010.

All right.

This would be a good one then.

Uh, let’s go ahead and add new plugin.

And dude, this, this is on like, Andrea, if you’re watching, I figure out why get frames.io’s admin is on death’s door moving like Biden over here.

All right.

Let’s see.

Branches.

ACSS.

Dist.

3.015.

Fingers crossed.

You always got to do it on a live site.

Always on a live site.

It’s, it’s what your clients would do.

Uh, let’s get it done.

3.015.

Replace.

Replace.

Don’t worry.

We have backups.

It’s, uh, it’s on an automated backup schedule.

Oh gosh.

When, when you hit the two hour mark, everything is, it’s no holds barred.

Everything is on the table.

Let’s get to the front end.

Can you save 3.015?

This site in general is on, it’s on like, there’s something going on with the site.

The admin’s not, not right.

The, the, something slowing the site down.

Okay.

Um, yeah.

I mean, nothing, nothing has exploded.

I wouldn’t expect anything to.

It’s not a crazy, it’s not a crazy release.

But we did get a successful upload, successful install, successful save.

Uh, let’s go back to ACSS.com.

Change log 3.015 in draft mode.

Okay.

So this is going to have the overlap alt recipe.

This is going to have the list none recipe.

Uh, we changed the old overlap, which was, I can’t remember what it was, what it was.

Yeah.

Overlap is now the simple overlap.

Overlap alt is now the adjacent section overlap.

We have the list none recipe.

We have grid recipes now.

Okay.

So all standard and uneven grids now have recipes.

Uh, men with media query recipes are now available.

We added a tertiary color support to color recipes.

And we fixed broken variable causing Gutenberg to lose its styling.

Uh, so let’s go ahead and publish that.

And let’s go to downloads.

Downloads.

Automatic CSS.

And let’s go down to this area.

Here we go.

Uh, nope.

Not upgrade paths.

Here we go.

Add new file.

Fucking hate EDD.

Dude.

I so absolutely hate EDD.

It is.

Every time I look at it, it is the bane of my existence.

Bricks.

Uh, uh, dist.

3.015.

Bring it in.

Okay.

Insert.

There we go.

Do we need any of these others?

I don’t think we need 12 or 13 anymore.

Let’s leave 14 and 15 available for people.

Uh, version number is one five automatic.

Uh, we have to save in order to switch this update file.

Somebody was messaging me.

Okay.

Uh, we have to refresh this.

EDD is done.

I have to tell you how, how awful EDD is.

Uh, let’s switch this to one five now.

Save that.

Let’s go out.

Once it saves.

You know what takes a long time to save consistently is freaking Gutenberg, the editor, dude.

Uh, all right.

We have to go to settings and we have to go to cloud flare.

And we have to.

Purge everything.

Purge everything.

Now we have to go visit site.

We have to look for 015 up here in the top.

We have to see 015.

We have to grab the change log new incognito window 3015.

Make sure it appears there as well.

Now we’re going to hop over to here and we’re going to say, uh, announcements.

And look at this.

You guys do it with me.

ACSS 3.0.15 is now available.

Pop in the change log.

Publish.

Bang.

Look at that.

And then we pat ourselves on the back.

Both sides.

Okay.

And then we log off.

Uh, the Hunzi says he sees it.

Uh, looks like we’re good.

Okay.

Um, now that’s the, normally we release on Thursdays.

The reason I released that just now is because that contains a hot fix for that Gutenberg styling issue.

There could still be a release on Thursday.

There could still be a release on Thursday.

And it could have the external link.

Because we were on WDD live.

Because you showed up to WDD live.

Because you asked for it on WDD live.

Maybe I can fit that in for Thursday’s release.

So keep an eye out.

Thursday’s release might have support for external link, uh, arrowing.

I don’t even know what we’ll call it.

Uh, but indication.

Indication for external links.

Uh, thank you for that.

Uh, I think it was SK that was, that was asking for that.

Um, and that’s it for today’s stream.

I do thank you guys for your support.

I didn’t even look at the numbers.

Looked like we had pretty good numbers though.

Um, I’ll be back again.

It’s every single Tuesday at 11 a.m.

Mark your calendars.

Um, you know, be here.

This is where all the cool kids hang out on Tuesdays at 11 a.m.

Friday, we have an inner circle office hours meeting.

If you’re wanting questions answered on business, pricing, sales, yada, yada, yada.

Uh, just agency related stuff.

I would definitely RSVP and attend that.

And then we should have a co-working with Kevin session happening very soon as well.

But, uh, that’s it for today.

Love you guys.

Peace.

Yes.

Thank you.