WDD LIVE 090: Let’s Build Something in Etch

Hello hello hello what’s up everybody oh we’re already starting off with a thumbs down that’s

fantastic we’re getting started early oh the haters their haters are out they’re out in force

right now they’re very they’re very riled up they’re very triggered how are we doing today

how are we doing hello peter and dunzi denatas and uh anja carl is in the garden recovery

recovery the patio furniture oh yes we did have some storms they didn’t get too bad though

so that was good that was good all right we ready to have some fun today who was in the

were you guys all in the demo yesterday or did some people miss it

hmm we’ll give everybody a minute to get in here before we really really really jump in and dive in

please show how we can style child elements from parent element in etch um let’s see uh yeah if

you want to ask questions you can go ahead and ask questions uh just hashtag cue them so i can find

them hey what’s up toby good to see you uh good good looks like a lot of people were in the demo

that’s fantastic this will be in 4k unlike uh zoom’s terrible 720p uh which gets even worse

when it gets uh live streamed to youtube i suppose what does let’s just start here what does zoom do

with their billions of dollars what do i mean what do they do i don’t i don’t why are we

why are we streaming in hyper compressed 720p to YouTube from Zoom? Why? I don’t know why that is.

Why can’t I choose the channel I want to, I want to live stream to for a webinar that I’m paying

thousands of dollars to run to Zoom? Like when you connect your YouTube account, it just forces you

to be able to stream to an account. You can’t like if an account manages multiple channels,

That’s why I couldn’t Zoom to the,

I couldn’t live stream to the Etch channel

because it wouldn’t let me select it.

It wasn’t an option.

I don’t know what Zoom is doing.

I don’t know what they’re doing with their money.

Let’s see.

So this is an OG chat

after the cram 3,000 people demo from yesterday.

Yes, this is the OG version.

Okay, all right.

Yeah, it’s very, man, I don’t know.

It was a little bit of a bummer.

And then we didn’t have closed captions turned on in the Zoom, but apparently it forced them to run on the live stream for YouTube.

I don’t know.

We probably won’t use, I don’t know that I’ll use Zoom again.

I could have just, I should have just live streamed.

I don’t know.

I don’t know.

I don’t know.

People signed up.

I felt like they wanted a private link in a private room or something.

I don’t know.

I don’t really know.

The one benefit it gives you that is a legitimate benefit is it captures all of the Q&A in one area to make it really, really easy to go through and answer the questions and Markham is answered and things like that.

I really, honestly, can’t think of any other benefit.

And that’s not worth the thousands of dollars they charge for their webinar rooms.

So, yeah.

Okay, let’s see.

How many people were in the audience, Matty?

We, the peak, I think was a little over 1800.

And then there was also 400 to 500, I think watching on YouTube in combo to that.

And then I got a lot of messages from people that, you know, Monday is kind of a tough,

I guess a tough day of the week for people.

Monday, midday.

So I got a lot of messages that people were just going to have to watch the replay.

So they weren’t able to make it to the actual live stream, but it’s good.

And I mean, we didn’t really, this wasn’t really marketed, certainly not like the first

event, right?

This was just kind of a casual, hey, we’re going to do this demo on March 31st, be there

or be square, get in or don’t get in.

And then that’s just kind of what we did.

So we’re not, I mean, it’s really, it’s to keep the momentum going publicly because only

the people that were previously in could even see what’s going on.

We wanted to just kind of put our progress out there for people and keep the momentum going and get them excited and hopeful for September.

And we’ll probably do a little bit more effort in September.

But yeah, yeah, yeah, yeah.

Okay, well, I think everybody’s here.

So what I’m going to do is share my screen and we will take a look.

I found this website right here, this vibrantpractice.com, and it’s got some interesting

things. You know, we could do this hero. We could do, this is just a bento grid of images.

Not super exciting, this little section right here. We could do, the one I thought was maybe

a little bit more interesting was this, these cards, because we could also, these are a great,

a perfect use case for components and they’ve got a little bit going on they’ve got a little

bit going on in them you know uh and it’s not really components that I don’t think that there’s

really a case for looping these like in this particular section but definitely making

components out of them for sure um you know there’s just some interesting stuff going on

So I’m really thinking probably something like these cards.

Do something dynamic.

Yeah, well, you consider components to be dynamic.

That’s pretty dynamic, right?

Are you putting the progress on YouTube now?

Oh, I think I know what you mean.

Yeah.

So I’m going back to doing my videos,

getting back into video production.

and the big difference now is that every video I create will just now be done with etch so yes

that will by default it’s not like a they’re not dedicated progress videos it will just kind of

naturally show the progress as things are going what about modern sass websites like resend raycast

what about them josh what about them I’d be interested to know if etch will be able to use

things like motion, which is really popular at the minute. We will have an animation engine in it.

Yes, it’s not a top priority. I know that I will tell you right now that animation is probably the

biggest fad in the industry at the current time. And it will likely not stay that way.

If I was making a prediction, and I’ve talked about this before, the reason being is there’s

no measurable ROI in animation, though it does add a lot of cost to projects. And companies tend to,

you know, not like to just light money on fire. And so once they find out that, okay, well,

that would have been a lot cheaper to do without all that animation, and we would have gotten the

same results, they will probably just stop doing all the animation. You know, it’s the cool thing

right now. It’s the fun thing right now, but there’s been a lot of these fun, cool things that

because they have no ROI, if they have a high cost, they go away.

And I think animation falls exactly into that bucket.

Okay. Yeah. Ruben. See, Ruben, even Ruben hates animation. Even a breakdance user hates

animation. Imagine that. Okay. So yeah. Just joking. Just joking. All right.

I don’t know. Why don’t we try to do these cards? Nobody really sounded off

with highly opinionated what we should do. So let’s go spin up a new website. Okay. And we’ll

call this, what is that website called? Vibrant. Okay. Vibrant. I don’t know. Let’s do our branded

domain. Vibrant. Okay. We’ll keep that for 15 days. We’ll create a site. Did I select a blueprint?

I don’t even remember if I selected a blueprint. No, I did not. I just created,

I just, it does help to create the blueprint. Let’s use the etch blueprint. Okay. Vibrant what?

I’m going to have to give it a new name now. Vibrant practice. Okay. Vibrant practice. All right.

And 15 days create site.

Okay.

And then this one can actually be deleted.

Yeah, you can go ahead and ask questions regarding etch.

Happy to answer anything.

You can ask non-etch related questions as well.

Like you always said about crappy websites, there’s lots of crappy animation.

Got that right.

Got that right.

For sure.

Yes.

There’s a place for classy and good animation.

Yeah, there is.

There is for sure.

And if clients are willing to pay for it

and they understand that it may not, you know,

add anything to the bottom line for them

and they, but they still love it

and they still want it,

then totally you want to,

you want to be able to deliver it for them.

And the easiest way to do that delivering

is if you don’t have to do it all by hand,

if there is a tool that allows you to expedite that,

then for sure, that would be awesome.

I mean, we’re planning on having animation.

It’s just if you tied me to a chair and you’re like, when should we spend all the time and

money on the animation side of things?

Would it be like before loops, like making loops even more powerful than they are?

Would there be more ROI in looping third-party data from an API or in animating something

on a website?

I think that looping third-party data API, probably a lot more powerful and a lot more

ROI focused, right?

and there’s just an endless list of examples like that where we can weigh the pros and cons

and then you see why it starts to trend towards the end of the list

um all right vibrant practice let’s let’s go let’s get started let’s see what we can see what

we can whip up um nope i don’t need that to be permanent thank you okay so we’ll review the stack

real quick it is just uh acf acss etch and um we don’t even need the font thing anymore that just

allows you to upload the files because wordpress blocks them and uh that’s it okay so let’s go

edit with etch and let’s add our section and let’s go flip back and forth between uh what we’re

building so i’m just going to add a uh heading you saw this yesterday actually with our intro

we’ll just go ahead and make an intro component again it’s going to be very similar the this is

like the perfect example I built an intro yesterday that literally had every single one of these

elements this obviously looks different why does it look different because it has different fonts

it has different colors but literally it’s the same pattern that’s why we call these things

patterns right and that’s why this is why frames is so like we have an intro uh frame we have a few

of them and you can find this exact pattern and just not have to build it and like but this is

it’s just funny how I I look at websites for a living because like I I build frames and we have

to build patterns and we have to know what the common patterns are it’s just I just picked a

random site and here is the exact same introduction pattern that I used in yesterday’s demo on a

completely different thing. So just funny how that works. All right. So what we want to do is we want

to add our heading, text, text, and a link. Now, somebody asked about clicking and dragging these

onto the canvas. And, you know, I think because they’ve used a builder in the past that allowed

them to do that. And once you realize that, okay, like it’s just, it’s what, this is fairly objective.

Okay, how fast or how long would it take me to click and drag this into where it’s supposed to go versus doing this?

Do you really, do you think I can win dragging and dropping?

I don’t, it’s not possible to win that race dragging and dropping.

And so we look at things like this and we say, hmm, okay, should we make it drag and drop?

Like what benefit would that bring?

And it turns out it doesn’t really bring any benefit at all.

So we shouldn’t do it, at least definitely not yet, not now.

Like there are other things to do, okay?

Why are these on the bottom instead of the side?

You know, someone’s like, can I put those on the side?

Well, the initial reason that they were on the bottom is because they’re easier to get to.

The mouse travel on a normal monitor is shorter on this axis, the block axis, right?

This is shorter mouse travel than constantly going to the side a lot of times.

Depends on what I’m doing, obviously, and where I’m going.

But also because it kind of lives with where your other core things are going on.

And so your eye travel from like looking at HTML, for example, to what elements do I need next?

kind of containing everything in the same generalized area right um now it could end up

being a preference at some point but again uh we have to prioritize things so it’s just where it

lives for right now uh okay so let’s go ahead and let’s say that this is going to be okay that says

services up there i’m not gonna i’m not gonna bother matching the fonts and all of that

Uh, but we will make this say services and then we will paste that in there.

Um, okay, good.

What were they doing with, okay.

All right.

I don’t know what they were doing there.

Uh, there’s like, I thought some formatting might’ve gotten in there, but I’m not sure.

We’ll take a look at it in a minute.

All right, let’s do this and let’s see what this button needs to say.

The process.

Okay.

Uh, we’ll go over here and say the process save.

Okay.

Fantastic.

So I’m going to make this, we’re going to, we’re going to give these, we’re going to,

we’re going to BIM-ify this thing.

I just call these things like very generic names, like intro, especially because we’ll

call it section intro.

How about that?

Section intro heading.

This is going to be the headline.

This is going to be the lead.

This is going to be the CTA.

Okay.

And then we’ll go ahead and right click and we will create the BIM classes for these.

So all the BIM classes are created.

Someone saw me do this yesterday

where essentially we can go in

and reference all from ACSS.

Let me pull this up.

So we can reference.

Okay, ACSS is deciding to play.

Can’t tag me.

There we go.

All right.

So all of these styles that are global defaults

that are assigned here are variabilized

or they’re tokenized.

So you can easily reference them.

You can reference them for every level, but you can also reference them for all.

And so whenever you’re doing something like taking text like this, I want to know why.

There we go.

It’s got like the line breaks in it or something.

I hate when developers do manual line breaks like that.

And it’s just don’t do that.

It’s not cool.

So obviously we want this to look like a heading.

We can make it look like a heading, but we need to make it look like a heading in a

maintainable fashion, which means that the heading styles have to be tokenized in case the heading

styles ever change. This paragraph that is supposed to look like a heading should also change as well.

It can’t like get forgotten. We have to create these like unbreakable situations where we know

things are likely to change in the future. We don’t want our fake headline to just break because we

decided to change things. And so we can easily come in and reference things like my H2 size.

I can say my H2 font weight or on this particular site, all headings have the same font weight.

I can do heading font weight, or you can even do fallbacks like H2 font weight with a fallback

of heading font weight. Okay. There’s a lot of different ways to approach this. This, by the way,

is why you need inputs that actually give you the proper amount of real estate, because I need to be

to see what the hell is going on here. You get all these builders with these little cramped,

tiny inputs because they were all designed in an era where the only thing you could ever type in was

60 pixels or 2M or one rim or whatever. And they were not built for a variable first workflow in a

modern era. These are designed for a variable first workflow in a modern era. And that’s it,

plain and simple plain and simple we can do heading line height we can do heading letter spacing

okay and it’ll just reference all these even if they’re not changing now it doesn’t matter because

if we change these values in the future it will update them okay but I’ll leave that for right now

all right so this one we want to make it a little prettier it’s going to be like it’s going to be a

box okay it’s obviously going to have a box shadow of some sort and it looks like um the box shadow

really gives it its shape it’s literally just padding with a box shadow attached to it and

then we’ll have to change the primary color in just a second where are where are we at what is going

on here okay hold on zip uh let me go into vibrant practice make sure we don’t want to not be logged

in. That’s not cool. Let’s save. Okay, there we go. We got logged out somehow. I’m going to copy

all of this HTML and I’m going to refresh this. Okay, good. It kept it anyway. All right, we’re

safe. We’re safe. But if it had died, copying that HTML, I can just paste it back in. It’s fine.

Okay. Yes, there’s Andrea trying to rescue me. He’s telling me. I have to turn off my notifications

too. Until this evening. Yeah, let’s do until this evening. Okay. Yeah, something happened

with the login. I don’t know what he was trying to tell me. Let me put my phone up here.

New password. Yeah, I don’t, but I didn’t reset the password, did I? I don’t remember resetting

the password. All right. Oh, you know what? It looks like, oh yeah, we did lose some of that.

We did lose some of that by getting logged out.

Why did zip log me out though?

I literally just got in and I didn’t change any passwords.

Okay, let’s do a section intro and heading.

We’ll just go through this quick now.

We don’t need to explain it again, right?

Headline, heading.

This is going to be the lead.

This is going to be the CTA, okay?

Right click, create BIM classes.

Let’s do the heading since we were working on that anyway.

So the font size here, we’re going to go with text S. We’re going to go text decoration. Did they uppercase it? No, they did not. We do want the font weight to be 400. We want the, everything else should be good. Maybe it’s got a little bit of letter spacing in it. Nope. Doesn’t even have any letter spacing in it. Okay. Let’s go with layout. We’re going to go with padding. We’re going to go with, actually we’re going to do padding block 0.5M and then 1M on the inline.

We’re just going to eyeball this.

That seems about right.

That seems about right.

Okay, let’s close that so we don’t have too many tabs open.

I can take this while I’m here.

Or did I already put that in?

I already put that in.

Okay.

And let’s just give it a box shadow.

So I think under, yeah, we can’t do box shadow here yet, but that’s okay.

I can just do it down here.

Box shadow, 0, 0, 0, 30 pixels red.

So I need 30 pixels right here and 0 right here.

um okay well 20 and let’s see I mean I mean it’s it’s pretty close it’s pretty close guys

so now I can just come in and reference that’s probably their primary color maybe like a primary

semi-light maybe a maybe it has some opacity I don’t know let’s go ahead and grab their primary

color which is right there we’ll pick color from page we’ll steal why is it not actually looking

at the thing that, what is this tool even doing right now? Let’s come down. Is there a, let’s try

this contact one. So we’re going to try that again. Pick color from, well, it’d be nice if the header

didn’t disappear when I did that. There we go. But I think, is that giving me, oh, it’s, I gotta be

quick. All right. It was giving me like the hover value. All right. So let’s go into ACSS. Let’s go

to color palettes go to primary let’s just drop this in I think that’s going to get us I don’t

know if that’s exact but it’s going to get us close okay so our primary color is the way it is

let’s go with button primary so a little bit of a command enter gets you the attribute bar

and now a lot of this stuff is done in ACSS actually right so we can come in here to buttons

and links we have our global all button styling that we can manipulate if we want which I believe

to because these buttons are gigantic and they obviously need more block padding. So if we have

our padding down here, let’s see, padding. Okay. So this is going to be our block padding. Let’s do

1M there. And that’s probably good enough. And it looks like we just need to, we just need to

reduce our border radius in general. So I’m going to go with like three pixels there. Just like

barely barely barely they’re rounding the corners not not much okay and then what we want to do is

we want to do our text on our so we have text color on our button right here and I’m just going

to say this is primary ultra dark I actually could have just flipped through that with my up down

arrows but we do something like primary ultra dark would work and then we’ll just check the

hover style on that we probably want to be ultra dark there as well so just flip through those

Okay, that’s good enough for now.

I’m not trying to make everything exact.

I just want to get the general vibe.

Okay, let’s do this.

I had to take those line breaks out again that they put in.

All right.

And then we’ll just quickly whip this up.

So font weight is heading font weight.

By the way, you can just copy these to your clipboard.

Let’s do our H2 size there.

And let’s go font weight.

We can just do letter spacing and then we can do line height.

Okay.

All right.

That’s good enough for now.

All right.

We will make this into a component.

And what we want to do is text prop, text prop, text prop, text prop, text prop.

That’s one, two, three, four, five.

So one, two, three, four, five.

And then we’re going to say this is the heading.

This is the headline.

This is the, and I’ll say like, yeah.

Okay.

we’ll just leave it we’ll just leave it like that this is the lead this is the button text and this

is the button url or button link you can call them whatever you want to call them let’s just link

these up real quick so that’s going to be the heading that’s going to be the headline this is

going to be the lead this is going to be the button text right here and the button link i’ll just copy

to my clipboard i’ll select the button right here i’ll come down and we will paste in props.button

link. All right. I can preview back to preview now here, save, and we’ll save actually over here as

well. Let’s go look at this on the front end. And we can see now that we have a, yeah, we have a

component there. Okay. Next thing we want to do is we want to, we want to add that property for

it being centered or not. And by the way, you can put as much or as little effort into these things

as you want. Am I required to create a component out of this? No, I’m obviously not required to

create. If I wanted to just do it static, like you would do it in bricks or you would do it in any

other builder and just move on with your life, you can absolutely do that. There is no requirement

to go the extra step of creating a component. Is it smarter to create a component? Yes, it’s way

smarter to create a component. How much variability do you need to bake into your components? That’s

up to you. That’s completely up to you. I can center these things and maybe I make a decision.

Maybe here’s the good thing about components, which by the way, my, my losing some section intro

data at your element container flex start gap. Let’s look at this for a second. What is

going on here with my, hmm, hmm. I’m going to take that. I feel like, well, obviously this is

supposed to be content width, right? And I’m wondering why it’s not happening to be. Actually,

what I’m going to do is add another section real quick. And I’m going to see if for some reason,

This section is behaving differently once it crashed when I got auto logged out.

Let’s go here and just see.

Okay.

I think it was just a CSS rendering issue temporarily.

Oh, was that the still?

No.

Okay.

It’s when there’s only one.

That’s a very interesting thing.

Let’s bring this into here.

And let’s, oh, that’s even more interesting.

Save.

Okay.

I think we have, I wonder if this is caching.

Do they have caching on zipwp?

All right.

Now that’s behaving width-wise, and it’s not behaving with our gaps.

And I’m thinking a flex direction column, flex start, align, gap, gap, gap, gap, gap.

Okay, hold on.

Let’s go to spacing.

Do we have auto?

We do have auto spacing.

That’s on.

Let’s go gap of.

Let’s just put this in here and see if it takes it.

Or if there’s something else going on.

Okay.

How about this?

We’re going to go into edit component.

We’re going to go.

We’re going to do.

Actually, I like this up here instead.

So let’s go flex.

And let’s set it explicitly to column.

And let’s explicitly set a content gap.

Okay.

Let’s save there.

And now we should, it should be perfectly fine on the front end.

Let’s go test it.

Okay, looks like it’s behaving.

All right, sounds good.

All right, let’s go ahead and yeah,

let’s build in what we talked about

with our variability here.

So I just wanna add a Boolean prop.

That Boolean prop is gonna be is centered.

This is like one of the easiest ones to do.

What you’re gonna do is you’re gonna copy the key, okay?

There’s a bunch of ways to do this.

I do it with a data attribute, but you can absolutely do it with some sort of utility

class workflow.

You can use these props however you want.

There’s probably no less than like four different ways to have an is-centered situation happening.

The way that I’m doing it is just one example of how it can be done.

And the way that I’m going to do it is with a data attribute, okay?

so I’m going to say data intro centered equals and I just wanted to say true or false right and

this prop this boolean prop outputs true or false depending on the toggle switch right if it’s on

it will output true if it’s off it will output false and so this is eventually going to say if

the toggle is on it’s going to read data intro centered equals true and then because it’s a data

attribute you can just style it like any other selector and eventually you will be able to do

this I’ll show you so notice it put it down here put it in the html right there which I could have

just written it down there if I wanted to but if I I prefer to use the I prefer to use this command

bar right here and then what what was the other thing I was going to say oh yes eventually I would

be able to actually do this okay data intro centered centered equals true and I would be

able to add that as a selector to this element so that it can be styled right here on its own

that is coming that is planned okay it’s not there yet so what I have to do now and it’s not I mean

it’s not all that much more like it’s just different okay you can just use CSS native CSS

nesting which which is the ampersand is essentially a reference of this class right here and so if I

reference that class and I attach another part of the selector to it like data intro centered equals

true I am now styling that thing and so I can say background of red and I think we have to preview

so we can preview that prop, right?

And now we see that it’s red.

I can do whatever I want to it.

In this case, because it’s entirely for the purpose

of whether this thing is centered or not,

I would like to align items to the center

and text align everything to the center.

Now we go one step further and we say,

well, I only want that to actually happen

because remember on mobile,

I probably don’t want it centered on mobile.

And it wasn’t centered a second ago.

like that’s actually how I want it on mobile. And so if you want it like that on mobile and you only

want it to be different on, let’s say desktops or laptops or even horizontal tablets or whatever,

any break point that you feel is where it should change, this is the point where you would use

a min-width media query, okay? Or other term for it is a mobile-first media query. You might hear

Mobile first. If you don’t know what mobile first is, that is taking a min width approach to break

points where it’s, I’m looking at this and I’m saying, that’s how I want it to look on mobile.

That’s the default. That’s how I want it to look on mobile. And then I’m going to go up from there.

Okay. So I’m only going to make a change at bigger devices. I’m not going to make the change

everywhere and then undo the change at lower devices. I’m going to leave it the way that it is.

and I’m only going to change it at bigger devices. That’s a min width media query. Okay. And so you

can write media and you do min width and then it’s just the break point. And in this case,

I’m just going to pick a random number 769 doesn’t, I don’t really care. It’s not a client site. We’re

just making it work. Right. Notice that when I pasted that in to that media query, it is showing

here. But if I go preview, now it’s to the left. Why is it to the left? Well, because I only told

it to change at 769 and up. And this is previewing 768. So this is what it’s going to look like on

tablet and mobile. And this is what it’s going to look like everywhere else. Okay.

So will you be able to do this in this left panel over here? Absolutely. Of course. However,

think about this. Think about this. It’s not going to work the bad way that it currently works in

every other page builder. In every other page builder, when you select a breakpoint, this custom

CSS goes away and you are presented with a blank slate of what is supposed to happen at that breakpoint.

The problem is you can’t see anymore what’s already happening at other breakpoints. And so you’re

playing this game constantly of flip back and forth, okay? And then when you have four breakpoints

or five breakpoints, that’s a terrible game. Nobody wants to play that game. And then you’re

putting different values in these panels at different breakpoints, which again creates that

game of, oh, hold on, what was it before? And so the panels will clear because they have to. You

have to be able to put a new value in. Obviously, there will be placeholders to tell you what is

already happening in terms of the value. However, it’s okay that these clear. You know why? Because

this will never clear. You will see all of the media queries right here, and you will see all of

of what’s happening. So you have the bird’s eye view of what’s going on here while you still do

every part of your workflow over here, if desired. Now, if you don’t mind writing a media query,

which by the way is going to be triggered with functions and recipes and things like that,

then you can just write it down here. Okay. Again, there’s etch. Etch allows you to use the workflow

that you prefer. There are three, four, or even five ways to accomplish the same thing.

and you just determine as a user which one you like best, okay? There’s the easy ways. There’s

the more technical ways. There’s a hybrid approach. You can do whatever you want. You’re not limited

in that form or fashion. You’re not pigeonholed into doing something a certain way. It just is

what it is, and so now what we have, for those who aren’t realizing it yet, is we have an

introduction that can be centered or not centered, right? Okay, and so in this, and then we can have

different instances of this where they can be controlled independently of each other they can

all have independent content it’s very very very easy to create this and make this happen

all right let’s go ahead and do and I’m going to steal this color here this is going to become our

base color and let’s grab that all right we do want to try to match this just a little bit just

a little bit so I’m going to go back into our color palette go down to base I’m going to drop this in

and that’s pretty much going to cover our text.

I can go to our text in backgrounds now

and under backgrounds,

I can see that we have base dark,

base ultra dark, base light.

That should all be good.

Default text color, yada, yada, yada, base dark.

It’s pulling base for all of these,

which is great.

A little save, it’ll update the swatches here.

And now you can see right away,

my text is essentially using the base color now.

And if I need a background color,

I can have it very easily.

like this looks like a base ultra light. Okay. And so now I can come in and I can say BG base

ultra light. And now I’m getting that color. Okay. So that’s what all of these tokens and all of

these utility classes just help tremendously with managing all of this stuff. And I’m seeing here

that I want to obviously limit the max width of this paragraph. Very easy edit component, grab the

lead, come into dimension, and then max inline size, I can do something like 50 characters. Okay.

I can save. Now it’s limited to 50 characters. Maybe a little bit more. And by the way, you can

preview this in here. So again, you can click the eye toggle and now you are getting the preview.

The only thing is when you click the actual element, it has to show you the key to be able

to change the key. Right. So I’m going to go to 60 characters on that instead of 50 characters. But

different item, it’ll switch and show me the preview again for this one. So I can see now that

that is exactly how I want it. And I can just go ahead and hit save. I’m not going to worry about

much else going on with this introduction. I think people get the point. The cards,

the cards in this section are much more interesting. So there’s a lot going on with these cards.

This is part of the card down here, by the way. So this part of the card is clickable.

When you hover it, there’s a lot of things happening.

Like this icon, it doesn’t actually change.

What it does is it rotates.

If you look at it carefully, it doesn’t change from a plus to an X.

It just rotates.

The other stuff gets light.

This paragraph appears.

And then this thing stays down here and is the same at all times.

And we want to make this, this is the exact kind of thing you want to make a component.

The exact kind of thing you want to make a component.

Oh, what I was going to explain to you about the intro. I decided right now, the only variability

I wanted to add in was whether it’s centered or not centered. But if I get to another section on

the website later on, even a different page, and I’m like, oh, my introduction needs to have this

variability. Well, it’s a component. So you could just edit it and add that variability in at that

time. And now that possibility is everywhere, but none of your previous components are affected by

what you just added. So that’s like, that’s the maximum flexibility that you get with like

properly architected components. You can build in the complexity when it’s needed. You don’t have to

imagine what all the complexity is that’s needed and build it all in at once. You can just build

it in as you run into the scenarios where it’s required to have it, which is very nice.

Okay, so what are these things called?

What should we call this thing?

Let’s just call it a main feature card.

It’s like a feature card.

We’ll just say main feature card.

It’s not like a basic feature card, you know?

It’s like a pretty involved feature card.

Let’s just call it main feature card.

We’ll call it main.

Actually, this is our grid.

So we’ll call this feature main feature grid.

Literally the hardest part of all of the stuff that we do

is just naming things.

That’s the hardest part.

Let’s go to flex div.

And we’re going to say that this is a main feature card.

And then we really need to figure out

what our structure is going to be here.

Obviously, let me put pro mouse on.

Okay.

This is obviously like a box, right?

And then this is going to be below the box.

And I like to do these on the stream where we go slower.

We’re not 100% focused on etch right now.

We are doing what we always do,

which is let’s try to teach something.

Let’s try to learn the process.

Let’s try to, you know,

like there’s so many people look at this.

I just got a thumbs down on that, by the way.

Why would we get a thumbs down on that?

I don’t, you don’t want people to learn.

So many people look at a layout like this

and I know they think to themselves,

I don’t even know where to start.

I don’t even know where to start.

And so that’s why we go slow.

And I show you, here is where you start.

This is where you start.

I don’t know how this is gonna work.

I’ve never built this card before.

I don’t know how this is gonna work.

But what I do know is I can start with a box

and a heading under it inside of my main box.

So this needs to be a box.

You need a box for all of this.

And then look, it’s a battle of the thumbs up

and thumbs down going on right now.

I’m telling you, the trolls are out in force

and they hate no matter what.

It doesn’t matter how good you are.

They hate.

They hate.

That’s all they can do.

It’s all they know how to do.

They’re small, small, small people.

Okay, so we got our main box right here called Feature Card.

What I want to do is I want to put another box in it, which is another Flex Div, and

then I just want to drop my heading down below that.

So I’m going to drop my heading down below that.

When you’re in Etch and you have something selected and you click, they’re going to become

children.

If you hold Command and click, they will become siblings.

So that’s like a little bit of the distinction there.

I’m going to call this my media wrapper because to me, when I’m looking at this box, this is

like media going on here, which I say media because it could be an image.

Image is a form of media.

A video is a form of media.

I build more abstractly to where if you wanted to replace the image with a video, you could

do so without having to change the names.

If I use the word image in the class name and then it becomes a video, well, that kind of,

that doesn’t really work very well, does it? Or vice versa. But if I use the word media,

hey, I’m not limited suddenly. Somebody could switch that out for a video and it still makes

sense that it’s media, right? Okay. That’s kind of the why behind why I named that the way that I

name it. All right. And then we have our heading down here. And so, all right, we did step one.

like I got my box. I got a couple boxes on the page. So now we got to go back and we got to make

our next decision. Clearly there is an image inside of that box. Um, and this should be,

these are images that mean something. Okay. If we go back to page building one-on-one,

you can use CSS to use something called background image. That is not a real image. That is a fake

image that is rendered by CSS. It is not an image rendered in the HTML of the page. It’s not crawlable.

it’s not indexable, it’s not anything else, okay? An HTML image is a real image. You actually put

an element in. And the general rule is if the image means something, which in this case to me,

they do, they’re not purely decorative. Like they’re kind of important to the context of the

page and what’s going on. And you probably want them indexed in Google image search perhaps and

whatever. So I make them real images. If it’s purely decorational, which to me is like

abstract shapes or some completely meaningless, completely darked out, you know, background image

that’s nobody’s really paying attention to that you can use CSS background image for. But in this

case, like it’s a prime part of the communication that we’re doing on the page. All right. So I’m,

I use a real image for this. So inside of my media wrapper, I want to have my media. Now we’re

go see if we can grab this save image as okay let’s go to download save image as and seems like

they are it is actually grabbing the image that’s in there okay great so let’s go here let’s click

this let’s go to media library and actually we can just probably shortcut up here it’s probably this

one and this one and this one okay and we’ll just say use that media and by the way if you put your

alt in here okay doctor in a lab coat or something and I say use this media it will automatically be

your alt in etch as well I’m going to go to main feature grid main feature grid we’re just going

to drop a class on there real quick I’ll say display of grid grid template columns of grid

three one fr on the rows and now it’s going to look more like a card okay because it’s actually

sitting inside of our grid.

Let me catch up with our chat here real quick.

Sorry, accidentally the thumbs down,

trying to thumbs it up two times.

So well, Tyree, Tyree,

you’re giving me a complex Tyree.

All right, I think we’re good.

There’s a lot of questions in here.

We will get to the questions.

We will get to the questions, don’t worry.

Okay, what is the heading supposed to say?

A unified system for functional,

integrative and longevity medicine. Fucking awful. It’s terrible, terrible. Unified system

for functional integrative. That was like, literally, they all got in a boardroom together

and they were like, what’s your favorite industry keyword? And one guy was like, functional. And

another one was like, it’s got to be integrative. And another guy was like, longevity medicine.

And they were like, we’ll just take them all. We’ll take all those suggestions. We’ll just put

them together in one headline. Yeah, that’s a bunch of gobbledygook, as they say. All right,

so let’s paste that in. And next thing we need to do, if you’re going step by step and you’re

just trying to figure out what can I do next to make this work better, okay? So we need to

continue, if we’re going to auto-bim this, ideally, ideally, you get all the things in that you need,

but you don’t actually have to do it that way, okay? You could stop here and auto-bim if this

is all you’re comfortable doing so far and then work your way to it with more details and then

add what’s needed. The only difference is for the elements you add later, you would need to just add

the classes manually to them, right? AutoBIM can do all of it in one swoop, okay? But not everybody

can look at this and really understand the exact structure that is necessary to make this work

without getting started on the styling, okay? And so I’m going to show you, if that’s you,

if you’re like, I can’t go any farther without starting to add some styling to figure out what

the hell is going on here. If that’s you, you can totally auto BEM right here. Okay. So just look

and see media wrapper. This should be called a media, right? It should be called media. And this

should be the heading. That’s fine. Let’s right click. Let’s create the BEM classes. Now we can

start styling and then we can add more elements in a minute and we can just manually add the classes

to them. Okay. They’re all going to start with main feature card. So the thing I want to do is I

want to probably add a gap here. Okay. So I’m going to go down to gap and I’m going to use

something called card gap. Card gap is a contextual variable. People that aren’t, if you’re not

familiar with ACSS, like it’s, it’s, it’s obviously a lot to explain. You don’t, I don’t need to

explain it all. All you need to do is watch and go, Oh, here’s the, here’s the thing I want you

to notice. Never am I using what are called magic numbers. I don’t just make up a number. I don’t

could just go, well, 20 pixels looks pretty good. Let’s just stick that in there, right? Never,

never. That’s not, that’s not the modern approach. That’s not the approach you should be taking to

things. And I saw somebody in the recommendation, they were like, you should, you should make the

mouse wheel scroll up and down the values. Hell no, no, never, never. There will never be drag

handles. All those things do in builders is they make it easy for you to use random magic numbers.

And then people wonder, why is my spacing off? Why does this look out of balance? Why is this out

of proportion? Why is there no gutter on my website? Why is there da, da, da, da, da? Because

everything’s not standardized. Everything’s just random. You want to avoid magic numbers at all

costs. And tokens allow you to do that. And then we contextualize tokens so that we can do the same

thing in all these different places and everything is mad consistent. And you get the benefit of,

I don’t have to, I don’t ever have to inspect and say, what’s the value they’re using? Oh,

okay. Let’s just put that in. Oh, the value changed. I guess I got to go everywhere that

I wrote 30 pixels and I got to change it. Like we don’t play that game. We don’t play that game.

And this is why I can move very quickly. I don’t have to think about values. All I do is plug

tokens. It is a completely tokenized workflow, which you can do without ACSS. You just have to

do all the work to create your own tokens, which is, you know, it’s not a small task. Okay. So see,

I got a gap in there. The next thing I’m going to do is I’m going to notice that this has rounded

corners. Okay. Now I also want to make sure, so if you were to put in, I’m going to show you a

problem with, I think what they’ve got going on here. Let’s go to unsplash. I’m just going to show

you a problem you might run into if you don’t see it ahead of time. It doesn’t really matter

what image I choose. What I’m looking for is a horizontal image, okay? Because when they gave me,

let me resize this real quick. When they gave me the tall images, it worked, but you know, like

Bev or a photographer, they might want to switch this out. And what if they don’t give you a tall

one? Okay, what would happen? So we’re going to grab this. We’re going to get the one that I just

put in. There it is. And let’s use this. Oh, our entire card shape changes. That’s not good.

And then what if you put some wide and some tall? They’re not going to be the same.

So the first thing you have to work out here, and I’m looking at this card as,

do I have to absolutely position this image and then control this media wrapper height?

Or can I perhaps do this some other way? Because there are things that are

on top of other things, which means that something has to be potentially absolutely positioned here.

Is it going to be the image? Is it going to be the things that float on top of the image?

There’s actually probably more than one way to approach this and solve it. And ultimately,

it may not matter, but we have to work our way there and figure it out. The process I’m going

to start with is I’m just going to set an aspect ratio on these images. If I force this aspect

ratio to happen, all cards will be the same size, except for the potential to have different heights

in the heading lines, okay? But for now, it seems like, and again, sometimes you just guess along

the way, and you just make your best educated guess as to what needs to happen. I’ll show you

what it looks like right here. So I’m going to go to dimension. There’s an aspect ratio, and you

don’t even need to know the aspect ratio. I’m going to do four by three. You can literally work your

way there. Uh, four by let’s do five, five, two. There you go. You can just, is that, is that right?

I don’t know. 2.5 divided by three. Then you eyeball it and you’re like, okay, I don’t know.

That seems to work. If you didn’t know, you can use any values here. You don’t need like

commonly accepted aspect ratio formulas or anything like that. You literally put whatever

fraction you want here. Totally up to you. So let’s go to border and let’s go with a border

radius of, I can do card radius. That’s the contextual one. And I think on this site,

and this is why I’m using the contextual card radius. Remember what I did with the buttons,

the global radius. And now actually what we should do is look, okay, there’s a radius here.

There’s a radius here. There’s a radius on buttons that is different.

and there’s a radius here which is different than the radius here. I for one am well this looks

maybe like it’s a concentric radius for this thing right here so this is actually probably the global

radius that’s the global radius the button is not using the global radius. You want to determine

what is the global radius the radius that shows up most often on a website that is what you would

program as the global radius. These all look very consistent. It’s the buttons that are different.

Okay. So what I’m going to do is I’m going to open ACSS. I’m going to go back to borders.

And here is my global radius right here. And you could measure this if you want to. I don’t care

to. I’m just going to put a 15 pixel in there. You’re going to see, okay, that’s about right.

You could even say 20. You could do 18. It doesn’t really matter because you can change it at any

time. That’s what’s fantastic. I can build the entire site and then change my radii and good to

go. It’s inconsequential because everything is tokenized and everything is the way that it should

be. The beauty of ACSS also is that like you can literally design the entire website. If you know

what you’re doing in terms of what tokens you’re using where, you can do the entire site without

setting it up and then just go in and put in all the values and then the site is supposed, it looks

the way it’s supposed to. It’s mad flexible. If you just follow the process, it’s mad flexible.

Okay, so now what I’m going to do, because I changed my global radius, all I have to do is

go back to my buttons, because my buttons are allowed to have a completely different radius.

Look, they just referenced the global radius, but they don’t have to. I can just put in three pixels,

and now buttons are three pixels, and the global radius stays the global radius.

So this is why you contextualize things.

We have a button context versus a card context

versus a global context.

These are the common contexts that you find on a website,

which is why this is so flexible and quick.

It’s quick.

Okay, like you say we’re working towards

where we wanna be.

Like, well, look what we’ve done so far.

And now I have the ability to swap any image in here

and it doesn’t matter because its aspect ratio is forced.

My card is not going to break.

So this is good.

So the next thing we want to do is figure out how the hell we’re going to get these floating

elements in here, or perhaps this blur, like you decide next, what do I want to do?

Do I want to do the blur?

Do I want to do getting this paragraph in here?

Do I want to get this pill thing in here with this button right here?

How am I going to contain all these things?

First things first, all of these show up at the exact same time.

To me, it looks like they are all self-contained in one additional box.

If I make one additional box, I actually probably need two additional boxes.

So a box for this and this, maybe.

Hold on.

I’m trying to think about it.

Well, do I?

I’m trying to think of the best way.

Because again, there’s three or four different ways to get there.

And I’m trying to now, in my head, I’m calculating.

I’m weighing pros and cons that I know.

Okay, I can make that absolute.

I can make this absolute, but do I want to do that?

Maybe I just want to put them in the same inner container and I want to flex them apart.

That might be the better approach, okay?

These are the pros and cons that you weigh.

If you’re not able to weigh these pros and cons without actually doing something, that’s

totally fine.

You just do something.

Just do something.

Just start.

Just do the next step.

And then if it’s not working, you can undo it and you can do a different approach.

Or if you find a con along the way, you can be like, ah, that’s a deal breaker.

If it’s a deal breaker con, then choose a different method, right?

So what I’m going to do is, first of all, I’m just going to start with getting another

container in there and then maybe that paragraph.

And to me, that container is going to be absolutely positioned.

It’s going to stretch the entire height of this image, this media wrapper that’s going

on.

And then I can put a paragraph inside of it and I can position the paragraph that’s inside

of it.

That kind of sounds like a lot, but it’s not all that much.

So in my media wrapper, I’m going to add a flex div and we’re going to, we’re going to go ahead

and I need a little more real estate. So I’m just going to grab myself a little extra real estate

here. And then I’m just going to call this the overlay and the overlay can actually be used for

other things. And if you think about it, like all those things are actually overlaid. Um, so it

probably makes sense to contain them inside of a box called overlay. Now I want my overlay and

remember, I don’t have a class on this yet. So it’s main feature card overlay. So I just hit here,

command enter, right? Main feature card overlay. That’s not hard to do on your own. I auto-bimmed

everything else. It’s easy to add a manual class. I want to display this as flex for sure,

but I want to position this as absolute. And I want my insets to just be zero. Okay. So zero and

zero. And if you don’t know, oh, by the way, I want my main feature card anytime, or actually

my media wrapper, anytime you’re going absolute position on something, you’re going to want to

make sure its parent is relative, right? Parent is relative. And now it’s going to be contained

inside of that parent. So I’m just going to put a background color on here of red so you can see

what has happened. I put a flex div inside of that other div. I positioned it absolute. And when you

do an inset of zero, what it tries to do is it tries to attach itself. Imagine a box that’s like,

can be molded like clay. It tries to attach itself to every corner. If it tries to attach itself to

every corner, it will just automatically be the size of the thing that it is in. And that’s exactly

what happened. I have a giant red box now, but it doesn’t have to be red, does it? It doesn’t have to

be red. Right now, it can be maybe a different color. Maybe it can be base, dark, trans,

40 or something. Ah, ooh, it looks like an overlay now, doesn’t it? Okay. So I just gave that box a

background color that’s overlay-like. And now I can see if I want to put other things in it. And

what would it look like if I put other things like a paragraph inside of it? And let me just throw in

some ipsum content here so i’m going to say ipsum short it’s going to give me some ipsum content

oh look at that i have that okay so i’m just going to call this overlay text and i’m going

to add a selector to it main feature card overlay text now i’m styling what do i want to do to this

i want to make it white so i’m going to say color is white okay um pop quiz does anybody like i

could do this or I could do this. Are they the same thing? They look the same. Pop quiz. Why aren’t

they the same? They’re not the same. I’ll give you the answer to that. They’re not the same. Why are

they not the same? Why are they not the same? What else can I do in my overlay while you guys answer

the pop quiz question? I’m going to come down to padding and I’m going to say, I want this to have

card padding. Oh my God, that just looks perfect out of the box. Why? Because cards are contextualized

and that just kind of happens to work.

But if I needed to change it,

I could always go to my card framework

and I could go to spacing

and my card padding is right there.

Oh, oh, oh, I could just change it at any time.

These things are very, very easy

when all of the common contextualized areas

of a website are completely tokenized.

It is an absolute joy.

It is easy to do your work.

You don’t have to do any thinking.

You just work.

You just work.

VAR is easier to maintain.

not the same because you’re using a VAR token that you can then, but I would not change.

Here’s the thing. Here’s the thing. I would never change. Where did my, here we go. I would never

change the value of that token because then the token name would not make sense. So there is

another benefit. There is another benefit. I would never make, I mean, I could override white to make

it red in some sort of crazy edge case, but that is not the primary reason why it’s tokenized.

It’s, you can rewrite the token with another color if you, okay, yeah, everybody’s on that.

I mean, technically, but there is a, like a, you could put the nail on the head.

You could put, there’s one case where you put the nail on the head.

There it is.

Michelle got it.

Michelle got it.

When you switch to dark mode.

So a tokenized white is compatible with dark mode, light mode.

A static white is not compatible with dark mode, light mode.

Okay?

So that is the big, and I don’t know if we’re going to do dark mode, light mode in the future.

It’s just safer to use the token.

It’s just, there’s no downsides to using the token.

There is a downside to a static reference, whether it’s that or this, it doesn’t matter.

There’s no downside to that.

There’s only upside.

I’m going to do things that have upsides and no downsides as a general rule and a general principle.

Okay, so let’s keep going.

Guys, this overlay is just a box that can have its stuff aligned just like any other box.

Look how easy that was.

I now have my paragraph in the exact same spot.

Now, there’s one potential problem here, and that is, well, I don’t know if it’s a problem yet.

I don’t know if the overlay and the paragraph have to arrive at different times in the animation.

I don’t think that’s going to be a problem.

I don’t do a lot of animation.

I don’t think that’s going to be a problem.

But it doesn’t matter if it is.

We can find a workaround.

We can find a workaround.

Point is, I’m working my way to where I need to be, right?

What if I put in another flex div?

And I’m going to go ahead and say that this is the overlay content.

Okay, so I overlay text and overlay content.

Let’s see here.

Yeah, I want that flex div to be on top for sure.

What do I want to go inside of overlay content?

They have, I mean, it’s like a fake button.

It like looks like a button.

Well, this is going to be fantastic to do

because it probably has the same exact padding as buttons do,

but it obviously looks different.

It obviously looks different.

Okay. And then, and then there’s this icon thing over here. Uh, let’s go to huge icons. Let’s just

search for plus. Okay. Plus. And let’s go ahead and put in the, can I have a plus that’s just

naked? There we go. I want a naked plus. Uh, let’s go black and let’s download our SVG.

Actually, I don’t know. Yeah, we don’t, we don’t actually technically have SVG support. Well,

not, it’s not icon support. Um, I, I, cause Gutenberg, I don’t think can render just naked

SVGs like that. We, we have to engineer some sort of a way to do that for Gutenberg. Um, so we’re a

little bit limited right now. So what I’m going to do is I’m going to cheat. That’s going to be a

white icon. I just need, I’m not going to be able to change the color of the icon is what I’m getting

at on the fly. So I’m just going to download the one that I actually need. And we’re going to,

we’re going to just make it white. Okay. And let’s just download the white one. All right.

All right. Sounds good. So we’re going to go in and I’m going to need two things in here. I’m just

going to put in a paragraph and a paragraph. Okay. I’m sorry, a paragraph and an image.

And this image right here is going to be, now we do have SVG support. So normal WordPress

installation, you try to upload an SVG, it’ll go, eh, eh, file not supported, right? Then you got

to go to the, you got to stop what you’re doing. You got to go out to plugins. You got to download

a plugin called Safe SVG. You got to install that plugin. Now you can go back to your media. Now

you got, okay, well, you don’t have to do all that dance. We just enabled SVG support. So you can

just, you can just use an, you’re allowed in Etch to use an SVG. You don’t need anybody’s permission.

All right. If you’re an admin, I think, I think it’s only for admins. All right. So this is going

to be overlay text and this is going to be overlay icon now uh i can try something here like we say

data icon and i’m wondering do i even have the i don’t even know if i have the icon framework turned

on uh and i have never even it is turned on i don’t even know if i’ve i’ve never tested it in

in etch before. Icon style by default is boxed. Boxed icon style by default. Okay, let’s do a

little save. I wonder if it’s going on the front end, but not in here. Again, these are the things

that we have to continue testing. Let’s see. Let’s make sure that data icon is in there. It is.

Okay, well, the card or the icon framework may have a little bit of a limitation, but

we’ll just, we’ll keep going.

Overlay text.

We’re going to say this is the main feature card and this is the overlay text.

All right, perfect.

What do I call this?

Overlay, oh, overlay content.

Okay, main feature card, overlay content, overlay content.

Perfect.

All right.

This is overlay text has the var white.

This has the var white as well.

I want to call that overlay button because it’s not really, it’s not the same as overlay text.

If you didn’t know, you can click this little thing and it’ll remove that class.

And then you’re free to put any other new ones on here that you want.

So main feature card overlay button, because it is, it does kind of look like a button.

All right.

So we do want to color this white.

And awesome.

Okay, I have this flex div called overlay content.

We can say the flex direction here is row.

And if we do align items,

or actually would it be justify now,

space between, there we go.

And if I go with the main overlay,

which is where all of that stuff is,

let’s see, justify content here,

probably space between it, all we need to do.

What does that button say up there?

Built for personalized medicine. Built for personalized medicine. All right, save.

So now let’s just go to the front end and let’s look at our progress. So we’re just inching closer.

That’s what you want to do. If you don’t know how it’s all going to work in the very beginning,

you just inch your way closer to the solution and you cross your T’s and you dot your I’s as you go.

I’m noticing a little bit of an issue here. Does any, we’ll do a pop quiz.

What fixes this right here?

What fixes this right here?

I hate the delay that’s on YouTube.

That is the one good thing about the Zoom live stream.

No delay.

You don’t have to sit around and wait for answers to show up.

Okay, they got it.

Overflow hidden.

Overflow hidden.

And that goes on the media wrapper right here.

I believe that’s under visibility, overflow.

You can actually do overflow clip as well.

Okay, so overflow clip.

It should be in this context, it should be the same.

What I’m looking at now is overlay media wrapper.

Oh, that’s very interesting.

Let’s see what’s going on here with this.

Okay, because you guys are right.

You answered the question correctly,

But we should.

Media wrapper overflow clip.

Main feature card.

Shouldn’t need it here.

Yeah, it’s not that.

Main feature card media wrapper.

Main feature card overlay.

Shouldn’t be there either.

I actually might need a little phone a friend in this one.

Because that is not doing, even on the front end,

This is not an etch thing at this point.

It is a what the hell is the browser not clipping for?

Feature card, main feature card, media wrapper, main feature card.

Is the radius?

No, we can’t put the radius on the parent.

The radius is on the media wrapper.

Or is it?

Did I put the radius on the parent?

I did not.

I don’t think so.

No.

ah that’s why that’s probably why that’s why that’s why that’s why um overlay media media

right here bang you want to remove it from that media wrapper you want to put it on on here uh

it’s easier to do it here border radius of radius okay border radius of radius okay solved

all right see how you you step yourself closer closer closer closer closer closer

all right let’s take a look at it again take a look take a look see and actually i’m seeing now

um those things are not supposed to be white right here okay these are not supposed to be white so

when you’re deleting styles you know normally in a builder you got to go find the inputs and click

little buttons and go clear style clear style clear style the good thing about the css you can

literally just, it doesn’t matter if there’s one property in there or 50 properties in there.

You could just, you could just go delete them. This is going to be main feature card overlay icon.

Okay. Just like that. Awesome. Unfortunately, we downloaded a white icon and there’s nothing we

can do about that right now, but that’s just working through some limitations. Okay. How about

we make the paragraph, the overlay text right here, opacity of zero. I would imagine that’s under

visibility, opacity of zero. Seems good, right? Maybe what we should do is tackle on the media

wrapper, a hover style. So we’re going to say and hover. There will be inputs for doing this.

But as I’ve said before, this is where a UI in every builder I’ve ever seen tends to fail.

Um, it, they’re really bad for managing hover styles.

And if we can engineer a better way to do it with inputs, we will for sure.

But almost always it’s better to manage hover states in CSS.

Like it just is like, and I explained this in page building one-on-one that if you really

want to do this work, like you, you just need to learn CSS quit.

It like use the inputs when they’re faster, but you got to know what’s going on so that

you can do, you can, you can skirt around the inefficiencies of a visual interface because

there’s always some semblance of inefficiency in some regard somewhere. And when that happens,

you want to work around it, right? So what we want to do is and hover. So when we hover the

media wrapper, and then we want to target the overlay text, okay? So that is main feature card

overlay text. So media wrapper, okay? Main feature card overlay text. This will also be easier when

is here. See that? See that? See that? Okay. We could just change. We set the opacity to zero

and we’re saying, okay, now when somebody hovers the media wrapper, which is essentially that

entire area right there that’s housing our media, we’re just going to change the opacity of that

thing to back to one. All right. So that gets you that. Now we don’t want it coming in like that.

That’s a pretty abrupt, right?

So what do we do?

Well, we need to go and we need to change our overlay text here.

And we need to say that we’re going to transition this.

We’re going to transition what?

Well, we’re going to transition the opacity.

Well, how, how, what’s the duration of this transition going to be?

I don’t know.

0.3 seconds.

What’s the timing function?

I don’t know.

Ease.

Ah, good.

Seems to work.

All right.

So now, yes.

it would be nice if we had a ui that helped you through that right you will have one you will have

one eventually you will have one it’s a top priority right can’t have it in six months but

uh it is a top priority you will have it so when you see me do stuff like this

it’s still easy for me to do that there than it is to find the input for it

um even if we had like i think what are we going to call it we’re going to call it um

what was effects that’s what we were going to call it effects so you’ll see an effects

tab right here you click on effects you’ll have transition you’ll have a bunch of

cool stuff in there but again it’s it’s not there yet okay so but look I mean we got we got to where

we need to go right all right sounds good the question here is are we managing this separately

from the overlay we don’t know what we’re supposed to be doing yet we’re just trying to inch our way

the final outcome. And again, I am stressing this out and taking my time because I don’t want to

lose beginners in these kinds of things. Beginners are very easily left behind. And so if we go at a

normal pace, they will just throw up their hands and be like, I don’t know what the hell. I don’t

know what’s going on. And they’ll just leave. Okay. I agree with that. I feel like hover styles are

always tedious yes um filter color tab too yeah filters will be in there as well uh it will all

be there it will all be there um okay so we need to yeah let’s let’s take a look at how does the

blur even happen how does the blur even happen and this is actually um yeah okay let’s do it it’s a

backdrop filter, right? Back, drop, back, drop. Look, it’s auto suggesting it for me. Okay.

Backdrop filter, um, five pixels. And this is actually where, cause I don’t do backdrop filters

all that much. You can’t be afraid of looking at documentation. Okay. So we’re going to go to

backdrop filter. We’re going to throw a blur in there. You can do other things like you can invert,

you can do a sepia you can do a lot of different things we’re just going to take that first

suggestion right there and we’re just going to blur it right um so we’ll go blur it’s a blur

function five pixels and you can just step this up seven eight what’s it supposed to be

well look at what they did i mean that’s pretty damn blurred so what we need is we need a value

that’s pretty damn blurred that’s a pretty damn blurred value right there a lot of people would

go like, oh, let me inspect it. Let me, did they use 20 pixel? Did they, we have to get out of the

mode of this idea of like pixel perfect websites. You are building to the, the, what would it be

called? I can’t think of a great word for it, but it’s not the exact specification. It’s the,

it’s the personality of the design. That’s what you’re, that’s what you’re building to the

personality. Nobody is going to come along and be like, what the hell, man? It’s supposed to be an

18-pixel blur instead of a 20-pixel blur. Nobody can know. Nobody’s going to know. Nobody’s going

to know. We can use that meme. They’re not going to know. Nobody’s going to know. It’s literally

the, is it pretty damn blurred? Okay. Pretty damn blurred. We checked the box. It’s pretty damn

blurred. Okay. So you have your backdrop filter here. Now, how are we going to do this? The main

state is probably zero pixels, right? And then on the hover of the media wrapper, which by the way,

this is where nesting really comes in handy. It gets a little bit, it’s a little bit complex.

You got to be careful with it. Okay. You can, you can easily get lost in it if you’re not careful,

but with this one hover statement, I can control multiple things going on here theoretically,

right? So I might go main feature card, and then this is going to be my overlay. All right, overlay,

and I want the backdrop filter to blur to 20 pixels. Okay, see that? See that? See that? Okay.

Now, what I want to do is I want to go to my overlay, and let’s see. I want to go to my media

wrapper. I’m sorry. This is where, no, I want to go to my overlay and this is where I would manage

my transition for my backdrop filter. Okay. And I’m pretty sure that’s a transitionable property.

We’ll find out in just a second. Okay. There you go. See that? See that? Or just, you just

work your way step by step, get to where you want to go. Also, this thing needs to look like,

does it need to look like a button? Yeah, it does. And then it just needs to change color essentially.

Okay. So here’s my overlay button right here. I’m going to go to layout. We’ll go to padding. And

actually what I want to do is I can do button padding block, button padding inline. These are

just ready-made tokens that will reference my button padding. The next thing that I want to do

is I want to add a border and I want to do a border of button. I believe button border. See,

you get into this area where you can also come in and you can go to cheat sheet. You can go to

variables and we can go to button and we can look at these and we can go, okay, here’s everything.

It’s button border width, button outline border width. This does look like an outline button. So

I’m going to go with button outline border width. I can even just copy that to my clipboard.

I have my button border style, my button border radius.

All of that is good.

Okay.

So let’s go with a button outline border width here.

Perfect.

Button outline border width here.

We’ll go with button border style.

And we’ll do that on the block and inline.

And then our radius will be 50 VW because we want it to look like a pill and button border

color.

This is a, what, I mean, what button color is that even?

What button color is that even?

It’s actually, it’s actually,

it’s actually the same color as text dark, I believe.

Okay.

Yeah, there we go.

And if that looks a little thick,

it’s because our button border is a little thick.

So buttons, we’re going to go to global, all buttons,

and then border styles.

Here’s your outline width.

I can just change that to one pixel.

And this should update in just a, there you go.

There it is.

There it is.

It just updated.

Okay.

All right.

So we’ve referenced some button properties so that we can keep those globalized with our

button styles.

But we also threw in some just unique styles for that button right there.

We’re going to go here, align items to the center.

We’ll put those things in line with each other.

And man, let’s just go back to the front end.

We see we’ve taken the next step.

Okay.

We’ve taken the next step.

We’re getting some transitions going on in here.

This is all very well and good.

okay next thing that we’re gonna do and i’m now realizing that they actually i copied what they did

um built for personalized medicine what is their actual link i’m i’m wondering now what is their

actual link what did they link up here there’s an svg that’s not linked what did they actually

add the link to did they link the entire thing I don’t see a link here here’s the card oh there

it is they linked service nope hold on there’s the service block okay they linked they linked the

entire wrapper not ideal not ideal uh not ideal i mean probably the most built for personalized

medicine none of this see none of did they add an aria label what does this announce as

let’s do a little test can i get excuse me where’s my helper nope not that

There we go.

Voice over on braid.

Vibrant vertical line application.

Hold on.

Control center.

Hold on.

Hold on.

Display.

Sound.

There we go.

There we go.

Holy smokes.

shut up

talk about beating people’s eardrums to absolute death you see why i said that’s not ideal

it’s not ideal it’s not ideal um you need contextualized you need you need a contextual

actual link um and then you need to extend that to the parent okay um yeah that’s not

that’s not the best approach that is not the best approach um

okay oh you couldn’t hear it you had to have heard it oh I know why I know why I know why

it’s got to be this hold on hold on oh you’re gonna love it you’re gonna love it you’re gonna

love it. Just, just stay tight. You’re going to love this. Tell me if you can hear, tell

me if he can hear this now.

Voice over on brave etch blueprint voice over off.

Do you hear that now? Just give me a yes.

Oh, you’re going to love this. You’re just going to love this. Just, just, just wait

for it you’re going to love this. I need to make sure you can hear before we do it. Okay.

Okay. Okay. Okay. This is so fun. This is so fun. You’re going to love this.

You ready? You ready? Here we go. Oh, hold on. Hold on. It’s, it’s,

what is it? Shift command F. Okay. Hold on. Let’s, let’s get back to it.

Okay. Ready?

Voice over on brain entering vibrant menu, 12 items, closing menu link,

become a vibrant practice. Link, link, link, link, link, link, the link built for

personalized medicine. Go beyond the basics.

Vibrant helps you connect the dots across a complete set of data points and workflows that matter in root cause and longevity focused care.

Built with security at the core doctor smiling at a patient.

You are currently on a link to click this blueprint.

Webcom voiceover off.

Woo.

Woo.

That’s a lot.

It’s a lot of reading.

It’s a lot.

Every single link somebody focuses on is going to read out like that.

That’s wild.

that’s nuts that’s nuts you don’t want to do that to people um okay so ideally what we do

ideally what we do overlay button uh i want to take i want to i want to say built for personalized

medicine okay i’m going to replace this with a link we’re going to go into our overlay content

right here let me get back to my sidebar overlay content let’s drop a link in there oh not a loop

don’t nope not the loop uh let’s drop a link in there and perfect and then we’re gonna put that

same class on there it was called overlay content so uh main feature card overlay

content uh wait was it was it overlay was it overlay content no it was overlay button wasn’t

it overlay button okay uh main feature card overlay button okay there we go we didn’t we didn’t lose

it. Let’s go to typography and let’s do color of text dark. Okay, perfect. That’s a bit better.

That’s a bit better. See, I have the class with all the styles so I could change the element and

then just pop the class back onto it and not have to worry about it. And then the content I copied

to my clipboard. So it still says built for personalized medicine that we could do this.

And then what I can do is I can extend the link, okay, to, I’ll put an href in there,

And I can extend the link to the entire card,

to the entire card or the entire media area of the card.

Man, I haven’t done this manually in so, in so long.

Okay.

Does that extend our link?

I always use my recipes for this, which,

okay, yeah, that works, that works.

That works. See, it’s all clickable now. Now, I’m going to, mine’s going to read out. You ready?

It’s not going to be, it’s not going to have a focus style, but it is going to, should read out

properly. Voice over. Entering a link built for personalized medicine. You are currently on a link.

Voice over off. We don’t have to, we don’t have to beat people’s ears to death with all of the

content inside of the card. We can just give them the actual proper link. And now what we want to do

is we want to change the focus.

I do have recipes for this,

but they’re all configured for bricks, right?

Focus parent.

Let me expand that.

Focus parent.

Recipe.

Boom.

It’s going to drop all this in there,

which I can probably replace roots with ampersands

and probably get away with this.

Let’s see.

Let’s see.

Let’s see.

Where’s my focus currently?

It’s on that button right there.

And no, that’s clearly not working.

So, oh, you know what?

It probably dropped in.

This is very dangerous at this point

because these are not formatted for this.

Oh, and focus.

Yeah, that’s correct.

And focus within.

Let’s take this out of here.

And before.

These are very dangerous to use.

I wouldn’t recommend this until they’re reformatted.

they’ll still be formatted properly for bricks but they need to be these recipes are all going

to move natively into etch uh focuses within outline box shadow none uh focus within outline

var focus with solid focus color focus offset outline none that all looks actually correct

um it depends on focus with focus color now that should all be that should all be fine

unless let me go to transition options uh

that’s that okay uh oh that’s sorry i was looking at something different it’s looking

like two different things. Could you shadow as well? I don’t know. I don’t know. We’d have to

debug. This recipe is untested in inside of this environment. So it’s no, yeah, no surprise that

it’s something’s wrong with it. But point being, when you read it out, you can see the difference

of reading out an actual readable link that makes sense. And then versus everything that’s inside

the card, which is a terrible approach. Okay. So what we’re going to do here is this is overlay

button. So main feature card overlay button. We need to go back to our media wrapper where our

overlays are happening. Main feature card overlay, overlay button, right? And then we have a button

border color is white uh white okay and did i did i use that’s the question did i use my

variables here let me get a little extra real estate here okay so button padding blog when i

went to border button border i didn’t see i referenced just text dark so we’ll just go the

opposite we’ll go with text light okay so media wrapper we’ll go with uh border color of text

light text light text light auto wrap thank you that’s good and we’ll also do the color of text

light and there you go and it’s already transitioning because it’s uh i think it’s

part of the button family. Okay, let’s go review. Boom, boom, boom, boom, boom, boom, boom. The icon

would be transitioning exactly the same if we had support for icons, but nevertheless, you see that

we’ve essentially arrived at where we want to be. And at this point, you would just say create

component, and now it becomes a component. And you want to replace all of the editable areas,

all of the things that need unique content with props, which is this one. Oh, we can, we can do

the animation of this if you want to real quick, but I want to just do the props real quick. So this

is one, two, three, the image being four. Okay. So let’s just go ahead and one, two, three, four.

We’ll just call this the card button text. Okay. I will just say button text like that. And then

you don’t have to use the word card over and over. These are actually scoped to the component.

So you can use the same exact prop keys on other components without any conflicts.

We can do the heading and then we can do the featured image. Okay. Was there? Oh, the link,

the link, the URL. Okay. All right. Perfect. We’ll call that link. All right. So we’re going to take

the button text. We will actually, we’ll do this targeting right here. We’ll drop that in. We’ll do

our heading, which is right here. We’ll drop that in. We will take the featured image, copy that to

the clipboard, go to our media and in the source right here, I can drop that in. And then we go to

our link. I’ll copy that to the clipboard. I’ll find my link right here and I’ll come in and drop

that in. So all of my props are now mapped. And if I go back to the component, main feature card

right here. Preview. Say I’m previewing this. It’s not previewing an image because I did not put a

default value in for the image, which is fine. It’s giving me a semblance of a placeholder. So

it doesn’t really matter. Let’s go ahead and save our component. Excellent. Save featured image.

So one thing you’re noticing, what do we obviously need to add very soon is when you’re creating

these props, text, Boolean, you need one for image or really what we call media. So you can have a

media specific prop. That way, if I go back out here, right here, I’ll have my little media selector

inside of this prop. Notice it’s just a text field right now. That’s not ideal. So we create a media

prop and you’ll have a media selector as an input right here, which would be ideal. That would be,

that would be nice. For now, go back to the editor and we’re going to go, actually we’ll go

completely out to Word. We need, it would be nice to have a back to WordPress. So I can actually

skip the editor side of things and just go back to WordPress. And this is why obviously magic

areas are atrocious, right? Because nobody wants to do this. And by the way, I want to copy the

relative path to these, not the static path. Okay. So we’re going to go in and we’re just going to

say that’s my featured image because we’re not pulling these through a loop, right? We’re not

pulling these through a loop. This default data is actually the content that we want and the link

can go wherever we want it to go. Now this is a component. I can duplicate it two more times

and I’m back here in my media library. So I can do something like grab the other image that we’re

supposed to be using. I can come in and now I can see, and I’m going to give you some examples of how

these things add total flexibility, right? So let’s go in with this. Notice it can have its own unique

little image and it can have another different heading. So what is the other heading supposed

to be? Let’s just pull that in. Let’s do this. All right. We’ll pull this in and we’ll put that

here. Perfect. All right. And I think you get the point, right? I don’t know that we have to do

the third one. But now look, so they can have their unique content, but if I ever need to alter

the structure, I can go in and I can start editing. Notice I can edit any instance of them.

Imagine that these needed to flip-flop their position, okay? So it’s like, man, I wish I had

put that icon before the link. So I hit save on my component and now they’re all like that.

They’re all like that, but they still have their own unique content, right? This one can still have

button one. This one can be button two. So I have full control over HTML and then of course styling,

but I also, um, you know, can have unique content in every single one.

Uh, okay. Let’s do, I think, I think that’s enough for, we can, we were, we’re kind of out of time.

Uh, we did say we were going to start, uh, you know, limiting these to 90 minutes, but I went

ultra step-by-step on this. I spent a lot of extra time going ultra step-by-step to try to

not lose anybody. And if you notice, I do want you to notice something. At what point did I touch

the HTML? At what point during any of this did I touch the HTML? I believe it was at no point.

At no point. So you can hide this box. You can’t do it yet, but you will be able to hide the HTML.

The point is, is that if I do need to touch the HTML, if I get into a situation where I need to

touch it, I can touch it. Or if I prefer to touch it, I can touch it. Do I have to touch it? No.

Do I have to look at it? No. So for those who are like, oh, beginners are going to see that HTML.

They’re going to run for the hills. Well, no, they’re not. Okay. They’re not, they’re not pansies.

Okay. They’re not. But they can, they can hide it. They don’t have to, they don’t have to touch it.

They don’t have to look at it to do their work.

What part of what I just did was harder than in bricks or something, right?

What part of that was more difficult?

The only thing is that I had more things,

I had more options at my fingertips, like creating a proper component.

It was actually easier, in my opinion, I think we can agree,

to map the props to where they needed to go.

I think that part was easier, right?

So what part is harder?

What part is harder?

There isn’t a harder part.

Do the inputs, some of these need to get more robust?

For sure.

They can get more.

This is level one of the inputs.

So they will get easier in that fashion, perhaps.

But in terms of the code you’re looking at, again, watch this.

Watch this right here.

You ready for this?

Okay.

Let’s pretend this doesn’t exist.

Let’s pop this like in here and just shrink it up as much as it’ll go.

So now let’s pretend we’re not looking at it.

We don’t have to look at that.

I have no bottom bar now.

I only have a left-hand sidebar I can work totally like this I can work totally like and if you’re

like well Kevin what happens if you need to get to that custom CSS again it’s right there it’s right

there this is a toggle back and forth between those two modes now I prefer this where I expose

the both of them at the same time but you don’t have to do that that’s the beauty of etch you work

the way you want to work. You don’t have to use anybody else’s workflow. You don’t have to see

panels you don’t want to see. You could just do the kind of work you want to do. If this is what

makes you feel safe right here, these inputs and that’s it, and you only want to see the CSS in

very rare instances, you can do that. You can totally do that. Okay? Now, by the way, I would

literally like, I would recommend you do this just for the purposes of watching it, write it.

You know, like when I, when I go to here, let’s go to, these are all components now. I’m going to

edit a component. Okay. And I click on a box. I’m seeing what it’s writing. Like as I’m doing,

look at this. I’m seeing what it’s writing as I, I didn’t write any of that. I wrote none of that.

I wrote the before. And then I dropped in a recipe that wrote this part for me. Okay.

The inputs wrote all of that.

And you can just see what it’s doing as you do it.

And you’re learning the language.

And you’re learning the syntax.

And you’re learning the format.

And when I did my CSS live course, when I taught CSS to people who weren’t super comfortable with it,

I told them, your main goal is to just get comfortable doing a little work in this area.

Because once you have just a small degree of comfort, it will demystify itself.

And once it starts to demystify itself, you will start to gain ground very, very quickly.

You will gain skill and ability and experience very, very quickly.

And then you will be able to do things that you just could not do a few months ago, you

know?

And that is the benefit of working in an environment that not just allows this, but empowers this

and recommends it, right?

And is dynamic in the sense that I can fill out an input.

I mean, we can watch it right here.

Okay.

It’s going to, it’s going to fill this out for me as I do it.

All right.

Does that make sense?

What’s going on here?

See the padding block down here.

Now watch, I’m going to, I’m going to change this to, I’m just going to take away the button.

Watch what’s happening in the input.

Look at the input up there on the top left.

It’s real time.

It’s real time.

I can change it in either place, right?

Or I can watch it author itself.

Take it away.

It’s gone.

Look, it’s not there anymore.

I add it, there it is.

Real time, I can see what it’s doing.

And you come to the conclusion and you say,

ah, I could have done that.

And these names that you’re looking at,

this is teaching you.

You can’t look at this and say,

oh, I don’t like that.

I don’t like what that’s called.

I wish it said something else.

That’s what it’s called, dude.

That’s the name of the property.

Do you wanna learn or not wanna learn?

That’s the problem with other builders.

They don’t teach you because they took the names and they were like, ah, we think people

can’t, they can’t do that.

We’re just going to make our own names for things.

And you don’t learn anything.

You spend three years, you learn nothing.

In Etch, you spend three weeks in Etch, you’ll be starting to do magician stuff that you were

never doing three weeks prior, right?

This is the benefit.

This is the benefit of an environment like this.

All right, let’s go to, this is why I love this because I’ve always been using the inspector

to change CSS items to see what it changes.

And now Etch does that for me.

Yeah, absolutely.

Absolutely.

Does Etch crash currently?

No, I’ve never once had Etch crash.

What we saw at the beginning of this stream was the zip WP install logged me out while

I was in here, which caused it to crash because it couldn’t communicate with, it couldn’t

communicate with the database.

Because I don’t know why it logged me out.

But yeah, I have yet to,

there’s not been an instance where anything crashed.

Yeah.

Oh, we logged you out.

Yeah, how did you log?

I don’t know what happened.

I don’t know what happened.

They must have been doing something.

Okay, let me answer questions.

We’re going to spend a little extra time here because I went extra slow and I know the advanced

people are like, oh my God, get on with it. Build the card already. Right. But like I said,

we were making the case that, you know, this is a tool for beginners. Honestly, it’s a tool for

beginners, beginners that want to learn and beginners that want to take the right approach

to things. So we have to go slow when we’re talking about all these classes. We have to go slow when

we start to make a component and we talk about props and we start linking those up. And when

we’re doing hovers and when we’re doing absolute positioning and very, very easy to lose people,

it’s very, very easy to lose people. So we got to spend extra time on that. We don’t want to lose

beginners. We want beginners here. We want nothing more than beginners to do this stuff the right way

and use the appropriate tools. Right. But I will, I will spend some extra time and we will answer

some questions. Okay. Pretty sure you were getting DDoS because of the bombs you were dropping on

the BEVs. Could be, could be. All right. I’m going to get out of the chat and I’m going to hashtag Q

and we’re going to go straight to questions. Okay. Please show how we can style child elements from

the parent element in etch. Okay. I will do that. This is not the proposed current workflow and I’ll

I’ll explain why. The proposed current workflow involves SAS, right? So, oh, I got to get out of

component editing mode. So I’m going to add a section to the page. Here’s my new section right

here. And we’re going to say that this is a heading, a text and a button. Okay. And I want

the heading to be ahead of the text. Did I add a button or did I add a div? I think I clicked div.

I think I clicked div. Okay. Let’s get rid of that. Here’s our container. I want the button,

which is a link. It’s called, maybe we can cover that real quick. Why is the button called a link?

Well, it’s not really a button. It is legitimately a link, but buttons are not buttons. Okay. If

you’re new here, and this is, I’m not talking about in etch. I’m talking about in web design,

buttons are not buttons. The thing you see that visually appears to be a button in 90% of cases

is actually a link. You want to take a link and you want to do something like this.

You want to style the link as a button.

That is very different from something called a button element.

And we’ll do a little pop quiz.

I like to do these pop quizzes on these streams.

What is the difference between a link and a button?

Let’s just put that in.

Who can say the difference in the limited amount of space

that YouTube gives you in the chat?

We’ll do a little pop quiz.

And I need to switch back to chat to see the answers

and we’ll get our grade.

Who is first on the keys?

Who is first on the keys?

Since we have access to HTML, do we need dedicated code block

or is it possible to just add code to a div?

It depends on what code you want to add.

If you want to add PHP, you will do that right.

I’m going to bring my HTML editor back.

Let’s get it on this side.

You will add the PHP right here inside of the HTML.

This is where you will do that.

If you need to add JavaScript, you will add a code block to add JavaScript.

Buttons are for triggering on-page actions.

Link is for navigating to another page.

That is the best explanation that I’ve seen in the chat so far.

I mean, Justin got it, but Justin abbreviated his a little bit.

And since we’re helping beginners out today, we want a little more verbiage.

Helps out a little bit.

So we’ll give props to Strike Goat.

That’s exactly it.

A button is for triggering on-page events.

A link is for taking somebody to another page.

Okay, so we want to, this is going to be,

we’ll auto BIM this as intro two.

So we have heading, lead, and link.

We’ll just do that, that’s fine.

Create BIM classes.

There we go, we’re done.

See, you don’t, that’s my goal.

And by the way, this is level one of auto BIM.

You have to keep that in mind.

Level one of auto BIM.

It’s going to get auto BIM renaming, auto BIM replacing,

auto BIM copy styles from one thing to another.

It’s going to get many, many, many layers.

It’s going to get far more powerful.

So we’re building this from the ground up, by the way.

So if you’re familiar with AutoBIM in automatic CSS, it’s going to be way better than that.

We are building it from the ground up.

We’ve learned a lot since that first edition of AutoBIM was built.

And it’s only going to get way, way, way better.

Okay, so we have intro to, and we want to do intro to heading.

It’s as simple as this, right?

So at intro to double underscore heading.

So you’re using nesting, right?

now the problem with this at oh sorry it’s not it’s not joined okay it’s a child so you have to

have your space here this is not actual BIM right this and this is kind of doesn’t have the same

advantage of BIM I’m going to show you why it doesn’t like does it get the job done yes is it

totally workable yes yes it has one downside all right we’re going to go to now when we sass power

this, this downside will completely go away. So we’re in a phase right now where this CSS box is

not in its final form. Okay. And once it’s in its final form, oh my gosh, it’s going to be a rock

star. Okay. It’s just not in its final form yet, but we’re going to take a trip to the front end

and we’re going to take a look at this. We’re going to see where the red is coming from.

Okay. And we’re going to hover over this and you see, so proper BIM specificity would be 010.

This has specificity of 020 because two classes are being referenced, okay?

Versus all of this happening in a flat format.

And I’m fairly certain once we have SAS power here, we’re going to be able to flatten that

back to 010.

Now, how big of a deal is that?

Probably no, not at all.

Probably not at all.

All right.

So no, no huge issue, but it is ideal to keep your CSS as flat as possible and your specificity

as low as possible.

But this is literally styling components or styling child from the parent, right?

Intro to double underscore.

What was that called?

Lead.

Okay.

Color blue.

Color, color.

my ring finger was like, no, no, I don’t think I’m, I don’t think I’m going to work. I don’t

think I’m going to work right now. There’s a blue lead paragraph styled from the parent.

Now I will show you a magic trick because the next thing that you’re going to ask,

the next thing that you’re going to ask is Kevin, what if we have to reference this class

from its parent? Oh, oh my gosh. Like in relation to a specific parent. So we’re going to have this

section, right? Which is my section. Okay. We’re just going to add a class called my section.

And we want from this element to style this class. Like what if we gave it a background,

but we only want it to have a background of red when it is in a specific parent.

Ooh, Ooh, can we do it? Can we do it? Is that a limitation of not having a root selector?

Is that a limitation of not having a root selector?

No limitations.

No limitations.

This ampersand in nesting CSS, this is vanilla CSS, this is not SAS.

Vanilla nesting allows you to reference the current element in context to a specific other

selector by inverting where you put the ampersands, right? So normally you do ampersand and then my

section has to be a child of the other thing, but you can actually reverse it and say, what if it’s

a child of this thing right here? What if this thing is a child of this thing? That’s where I

want my style to take place and you can see there. Yeah, this is, I mean, wow, that’s fantastic.

That’s fantastic. All of these are going to be selectors, by the way, like you’re going to be

able to do like my section ampersand and just enter and just style that it’s going to, it’s

going to end up as a pill right here, a little badge that can actually have styles attached to it.

So if you’re, you would rather do it that way, which then will enable the inputs on the side.

okay obviously when you do stuff like this you can’t use the inputs currently but when you can

do this then uh you can by the way i want to do something on my keyboard i haven’t done this yet

i haven’t done this yet i was informed by the team ahead of the stream that if i did this you might

see a proof of concept for something and i i’m 100 i have not touched this yet uh but we’re gonna see

what the hell happens when I do it. Oh, oh, oh, let’s do it again. Search is not great. Let’s

just click this. Things are being added. Oh, oh, oh, oh boy. Oh boy. Okay. All right. I don’t know.

It’s looking, it’s looking decent. It’s a POC. It’s a POC. I don’t even know all of its capabilities,

But it does something.

It does something.

Here’s the selected block.

Oh, I can delete the selected block.

I can duplicate.

I can create a component from here.

Let’s try that.

So here’s my selected block.

I’m intro two.

And I’m going to create a component.

Oh.

Oh, okay.

Then I can just add things inside of it.

Can I do that?

Oh, I can.

Hmm.

Hmm.

okay that’s promising that’s promising let’s cancel that okay you’re seeing it here live

I don’t know things are happening all at all times I don’t know there’s always

I wake up and it’s like hey there’s something new happening uh it’s command k command k

there is a bit of a delay in it I don’t know if it’s the animation onto the page or I don’t know

what the dealio is as they used to say in the 90s uh but we should check on that because when i hit

command k there is a three second it’s literally nope that’s instant now but i’m already in like

some sort of command k mode i don’t know but the first time i call it it’s like a little delay so

we might want to check on that but all they told me is it’s a proof of concept that’s all i was told

but yeah that’s fun that’s real fun

command k will conflict with plugins like command ui every keyboard shortcut will conflict with

somebody’s keyboard shortcuts which is why there’s going to be a shortcut manager and then you are

just going to be able to manage your keyboard shortcuts to your heart’s content and you have

no conflicts because you are the manager and sole author of your keyboard shortcuts in itch

how do you manage a pseudo element oh well great question my friend

look at that it’s so easy i’m managing a pseudo element uh padding

Pseudo elements.

Whipped them up.

Whipped them up like magic.

Once again, just as with hovers,

way easier to do pseudo elements in CSS than in an interface.

I’ve never seen an interface that handles pseudo elements in an efficient manner.

It’s always a click, click, click, click, click, click nightmare.

You end up in click hell and panel hell.

And I mean, look what I just,

It’s just, you got to take my word for this stuff.

This is why this is the Mac Daddy layout.

Because some things are, look, some things are, I don’t, nobody wants to type flex direction

and grid and all this stuff over and over and over again.

Inputs, inputs, inputs, inputs.

But you got to understand for some stuff, this is unbeatable.

This is unbeatable, especially with nesting.

It is absolutely unbeatable to just do it here.

So just learn a little bit.

Just learn a little bit, get comfortable a little bit, and you will be a rock star.

And your life will be way, way, way, way better. Okay. Um, this did not auto wrap space M.

Okay. There we go. We tried to do something with the auto complete here. And there’s a little bit,

sometimes when I hit the closing bracket, it doesn’t expand, but sometimes it does,

by the way, look at these tokens. Yeah. I want to, I want to like, look how easy this is to just

step up. And this is, this is like, I want to sliders. Okay. Well, these are like intelligent

sliders, right? Um, that these are all ratioed out on a mathematical ratio. So they always look good

in relation to each other. But you know, one thing I hear all the time is Kevin,

I can’t use automatic CSS because I want to build custom websites. Okay. Okay. ACSS was designed

to build custom websites. Okay. So that’s number one, but they’re like, but, but, but, but, but I

want, I want a value in between space XS and S. And it’s like, do you really? I mean, do you really,

but okay. I understand. I, I, you usually often don’t, but sometimes you do. That’s fine.

Um, okay. There’s an in between, there’s an in between, there’s an in between. There’s a lot of,

There’s any literal outcome that you are not limited in any form or fashion.

There’s a lot.

You could do whatever you want.

What is stopping you?

What is stopping you?

Nothing is stopping you.

There is only upside.

I say this all the time because it’s very important.

I like to play games where there is only upside and no downside.

There is no downside to using a framework like automatic CSS.

There is only upside.

If there was a deal-breaking downside of some sort, I wouldn’t use it.

It’s what I don’t do.

I don’t play those games.

I don’t play those games.

This is why I don’t use the Elementors and the Divvies and the Beavers.

There’s so many, like, a laundry list of deal-breaking items.

And I just, nope, nope, nope, nope.

There’s no downside to using automatic CSS.

By the way, I’m not stopped from doing this.

It’s not like, oh, my God, ACSS is installed.

It’s now illegal to do 0.5M if I need to do that.

It’s not.

Well, you just do whatever you want.

Do whatever you want.

Do whatever you want.

You’re not stopped from doing anything.

Okay.

Let me go to back to, we got to go back to queues.

Queues, queues, queues.

Okay.

Oh, one of the installations I think you were using,

Yabe Web Font, any plans to implement local fonts

to etch yes uh will will this wdd be viewable later yes every stream is automatically uh viewable

afterwards how many licenses have you sold since yesterday how many oh we already answered that

question how many people were in the audience consider using mail the streaming software okay

yes i will um zoom trust me i will not live stream with zoom anymore does etch allow any html tag or

is it restricted to allowed gutenberg html tags what about security like in the case of bricks

every HTML tag will be allowed currently Gutenberg can only render the HTML tags that we have

parsed properly but we are in the process of adding all of the parsing for more more more more

and soon very soon yeah you will essentially just be able to do whatever you want you can

literally copy an entire HTML code from a page and paste it in and it will render inside of etch

and then all of those will be have parsing attached to them which means they will automatically

once you save author everything to blocks as well um okay

if frames are redone in etch will frame still be needed the plugin will not be needed you will put

your license key somewhere in etch and it will unlock the pattern library for you inside of etch

uh where will other elements be present when it develop like tabs accordions etc is it in the

bottom bar? This is, that’s a really good question. This is a quick bar. You can put whatever you want

here. Everything else will live in a drawer that comes up and you can easily get to things inside

the drawer or you can command K things onto the page, uh, just like this. So, but this is going

to be programmable by you. You will drag things out of the bar into this quick bar and you can drag

things off of the quick bar into the drawer. So you can hide what you want to hide. You could show

what you want to show. The drawer is probably going to be organized by like dynamic elements,

third-party elements. Like it can have form elements. It could have like whatever. It could

be organized. Right. And it’s going to be, I would say less used items. You want your most used items

at your fingertips and then things you don’t use very often can just live in the drawer.

Okay. Maybe Edge should automatically rename the props of a component based on the class name

it targets. Components are automatically named based on the structure panel name. That’s the

best way to do it, but check this out. So if I go in here to main feature card, for example,

I’m going to edit this component, right? See this main feature card, another name. It can have

another name, which by the way, okay, let’s go ahead and save here. Notice it says main feature

card in the structure panel, but the actual component is another name. So your structure

panel names can be different from your component names, which is very, very, very flexible.

They’re the same by default, but they don’t have to be. Okay. So these are editable areas. You can

even give your component a description, right? You can say, this is what it’s for. You can write

little notes to yourself or write a little love note to Bev or your, well, Bev’s never going to

see it, but you know, someone on your team, if you wanted to do that. Okay.

What about rich text or something like WYSIWYG editor,

bolding, underlining, linking?

Oh my gosh, Branislav, is that the correct pronunciation?

I cannot reveal.

I will just tell you this.

Rich text elements are trash in every builder I’ve ever used.

They are absolute trash.

Etch will not have a rich text element.

If I have anything to say about it,

it will have something far better, something far better,

which I am not going to reveal,

And I’m not going to discuss in detail because I don’t want, look, we’re not, we’re not ready

to prioritize it yet. And I don’t want somebody else. I don’t want these other people running out

and being like, oh, we did it first. And, and then I, then I, this happens, this happens to me all

the time. I mentioned things on a live stream, pops up somewhere else. Then I do it because I had

planned to do it originally, which is why I mentioned it in the first place. And then that,

those people are like, no, we did it first. We had the idea. You took the idea from us. Okay.

I’m not playing that game.

Not playing that game.

We can go back to the live stream records

and see who talked about it

when they talked about it.

All right.

But I’ve learned my lesson.

Learned my lesson.

Okay.

When we’re ready, you’ll see it.

And then you’ll go,

fuck, that’s way better.

That’s way better than a text area element.

That’s what’s going to happen.

You are going to see.

And once again,

it’s something that you’ve never seen

in an environment like this.

But it’s already planned.

And we already know exactly what we want to do.

And so, Branislav,

if you like those kinds of areas,

You are going to be in absolute love with this thing that we’ve got cooking.

Okay.

Is there any plan to create a bridge from F4F to Etch?

Token-wise, yes.

Token-wise, yes.

Also with ACSS, yes.

Structurally, it’s not really, it’s a mess because Figma is not a development tool.

And I’ve never seen anybody do it successfully.

So yeah, I mean, you can make it happen,

but it’s a mess under the hood.

It’s a mess and we don’t want to make a mess.

So if we can find a way to not make a mess, okay.

But right now it has to be a mess

and we’re not going to do that.

But the tokens, yes.

You will go click, click.

All your styling from Figma will go

and just magically appear in ACSS

or magically appear in etch.

If you’re not using ACSS, whatever you want.

Um, how are you handling gutters, ACSS props?

Automatic CSS handles gutters automatically.

Um, I’ll pull it up to show you.

So, um, here we go.

Spacing and we’ll go to standard spacing, section spacing, gutter right here.

It’s responsive automatically out of the box.

That’s your min value.

That’s your max value.

It clamps between them.

And so you can, uh, you can adjust this at any time and make your own little custom gutter.

I usually go like 80 pixels and then actually drop this down usually on mobile to even more.

Something around 16, 14, something in there is good.

But yeah, you can totally control your entire gutter situation from right here.

Okay.

What do you mean by SAS mode?

This is going to be SCSS.

CSS, it’ll be SCSS.

If you’re not familiar with SAS, don’t worry about it.

You can write vanilla CSS in SAS and it will process just fine.

but it adds a lot of superpowers.

You can have mix-ins, you can have functions,

you can have maps, you can have loops,

you can have so much stuff.

It’s just amazing.

You can have SAS variables,

which are far more powerful

than native vanilla CSS custom properties,

as they’re called.

It is just a new world, opens up to you.

But if you’re not familiar with that world

and you’re scared of using it,

you can totally write vanilla CSS

and nothing will change.

Can you try a hero, a content grid

and the image on the side

that touches the edge of the screen?

Uh, yeah, I mean, we can try, we can try various things. Let’s just go ahead and delete this, um,

section and let’s go to, uh, let’s go flex div, flex div. Let’s go in here. Let’s add media.

Let’s grab something from the media library and, uh, let’s grab this one right here. Use this media.

Let’s grab a heading text and a link in here. We can do something like content gap on here.

uh we can do something like grid uh two how about grid auto auto two uh do i have auto grid turned

on i don’t even know if i have auto grid turned on we’ll just go with that kind of grid uh let’s go

with the stretch class let’s grab this actually i’ll just align these to the center that should

be align uh no align items yeah center we’re gonna have auto uh justify sorry uh we’re gonna have

autocomplete in here. Very, very, you won’t have to, you won’t have to do this. Justify. Oh, it’s

just, yeah, that should be justified content. No, that should be align items right there. That

should be on, let’s take grid auto two off of here. We should have align items unless I don’t

have my flex classes turned on. That’s a, that’s a possibility. Spacing. I might be using pro mode.

I don’t know in any of these blueprints what I’ve configured them for, but we go to options,

utility.

I do.

I promote on.

So it’s expecting me to use BEM.

When you’re using promote, it gets rid of all of the, all, it’s like takes you from a utility

first workflow to a BEM workflow, essentially.

And it only leaves the utility classes that are useful outside of a BEM context.

So, but let’s do this.

We can just show you, we’ll just turn off promote and that should enable all the things that

to do there a second ago okay let’s save this and let’s go back the stretch class is now working

which means align items to the center is not going to work which means justify content to the center

is going to work here see okay so now I can use a utility first workflow it was configured for BIM

it was not configured for utility first because I don’t recommend a utility first workflow I don’t

use the utility first workflow let’s make this an h1 anyway you asked about content grid

I’ve never tried it inside of etch um and let’s see we would do so it’s content

full there we go okay I don’t want content full I just wanted to see if it was going to work

um we can do content feature okay so you cannot do there’s no utility class for content

to full right um so let’s see we’re going to need a we’re going to we’re going to put this

we’re going to say container one two three we’re going to have by the way a button you click to

generate a unique class if you want to do something unique to this element and you don’t care to bim

it and you just want a unique class generated real quick quick real just short-circuited real quick

i might have had a stroke real quick on the fly you just click a button it’ll generate one of these

stupid you know uh classes it’s like an id but with less specificity gets the job done um and then what

we can say is grid column and we do uh content and then full is that correct grid column content

full grid column content full seems like seems like it should be working uh let’s go back and see

first of all content grid should be on it is um okay we’re not defaulting sections to content grid

Let’s just go see. Let’s take a look-see. Let’s do a little debug. Okay. Let’s go to inspect here. Okay.

There it is right there. Okay. Width of content grid, width of 100%, grid column,

content. Oh, content start. I bet it’s content start. I don’t know why I was, uh, content start

full, full. I have to go read my own documentation on damn content grid and haven’t done it in

forever. I usually do it with the bricks, right? Click context. This is what happens when you use

context menus all the time. Um, grid column content start. Is it, first of all, let’s display this

grid let’s get this grid going okay where are my name feature max full oh it’s probably full

maybe it’s full end full end there it is right there content start full end content start full

end i thought we used to be able to do no that still doesn’t like that still does not like that

um content start stretch any content grid experts in the house

um let’s go down here yeah that’s what i thought dave uh content start full end

it’s literally assigning it to the it’s kind of bothering me that these aren’t named areas

right here that they’re numbered areas because they should be named areas i don’t know if that’s

just a feature in chrome that i have to turn on though um full start full because full worked

let’s let’s let’s just do this there’s full work here

no oh i wonder if it’s a width issue

but when i did the utility class it worked let’s see what the utility class is doing

because that definitely went full

display grid grid column full so what zero one zero like literally look i’m gonna copy this

watch this watch this let’s take this off let’s go to here

literally going to paste exactly what was working a second ago i bet

now we’re going to try it now we’re going to try it grid column

It’s a width issue.

I’ll tell you why, actually.

And it’s because Bricks uses width and max width backwards.

And ACSS is primarily designed currently to work in Bricks.

And it doesn’t have the proper max width declarations on this content grid situation.

And this is what happens when, okay, so going back to ACSS is designed to work in a builder

that does things right.

Unfortunately, we had these situations where we had to handle these.

And apparently this part was not handled for Bricks specifically.

It was just handled that way in general.

And so we’ve identified an area where content grid in this case,

we need some refactoring to now work with the proper width max width context.

And then it should be, it should be working.

We’re just gonna have to isolate that different context to Bricks installations.

Which by the way, if somebody is on the team,

you can make a little note that I’m going to have to do that. I’m going to have to refactor

content grid and isolate the other version over to bricks. Okay. This is what content grid does,

by the way, though. It allows you to easily break. It’s essentially a replacement for what

used to be breakouts. Because you can notice I didn’t have to alter the padding of this section

or remove the gutter or anything like that.

And then I can manipulate this back at a break point

to not be in that grid column.

And I have a feature column.

I have a feature max column.

I have a lot of wiggle room.

This is only one example of using content grid.

So I’m glad we found that though

because those kinds of things need to be buttoned up.

Okay, let’s go back to hashtag Q.

okay did sass mode dynamic data parsing css panel it’s my curiosity it’s it’s on the list it’s on

the list yes does etch plan to support tailwind yes uh our facets plan for etch yes any quick

example of how etch would manage container queries versus media queries well there’s no media query

manager yet uh yeah i mean i can i can i can show you sure why not let’s talk about it um

so you’ll have a semblance of a breakpoint manager this breakpoint manager will allow

you to choose your own icons that’s what’s going to show up down here you have the ability let’s

close her out. Let’s close this out. Let’s go back to here. You have the ability to label,

create your own labels, which by the way, will create, there might be a separate area for this,

but imagine that when you create these labels, it’s going to create reference functions and

reference recipes. So like an auto expansion for media queries by referencing the name of the label

or a mix in that references the name of the label. Those would be auto created for you most likely

because nobody wants to reference these values statically.

By the way, notice here it says accepts all modern values.

This is the new media query syntax,

the modern media query syntax.

These less than, greater than, greater than, equals, et cetera.

And then you choose what’s previewable down here.

So that chooses, like you can create breakpoints

that don’t necessarily have to show up here,

but you have mixins and functions that are able to reference them.

And then notice here, this little dropdown arrow,

you would be able to manage container queries

in the same place.

So you would flip between managing breakpoints

and container queries and all of the same situation,

except for probably the icon, would happen.

These would be names, like you could say card.

So here’s my card container query,

or even like my main card or my icon card container.

You can have an infinite amount of them

and you would manage your container queries in much the same way. And then you could even

potentially have a breakpoint mode and a container query mode where you’re like, okay, I want to

preview what this container query is doing. You could click the icon and maybe at that point it

would have an icon still. You would be able to click the icon and preview a container query

on the canvas, right? So you can see when it’s triggering, what it’s doing, is it doing the right

thing. Yeah. So does this help? Does this help understand how breakpoints are going to manifest?

And by the way, this is mine. I haven’t really even discussed this with the team yet.

There’s 11 of us. So we all take concepts and we get together. We look at it. We yell at each

other for a while. And then it turns into some semblance of this, but usually way better. And

is just the ideas and how it is currently uh and notice this is going to be in a modal so um it’ll

this is all happening in the builder but it’s not going to be in a side panel or anything like that

we’re going to introduce the concept of modals for a lot of these settings areas and uh yeah

i think there’s only two questions left and then we’ll get out of here

okay

anything about a clamp calculator like you have on your site or is that not needed just thinking

um clamp calculator it’s my second stroke of the day um clamp calculators are completely

and utterly unnecessary

even fields i’ve seen fields in builder interfaces where it gives you a min and a max

you need to know with automatic CSS is a different context and a different situation.

When I go here to typography, I go to H1, for example, it gives me a min and a max.

You would never want this in a builder. Now it makes sense in a framework

because this framework, when I put in values here,

It creates, it generates min max tokens that can then be used safely other places.

It also generates a clamp function and clamp function.

Also, um, the middle value is a math formula that references my website’s content with

their, their clamps to do clamps correctly, especially for things like typography and

spacing and on and on and on.

Now you can do one-off little clamps here for like the image width or something in a, in

a, in a weird situation.

that’s fine. But for things that are used globally throughout a website, everything has to be

tokenized. The min, the max have to be tokenized. The middle value has to be calculated based on

your website’s content width. There’s a crazy NASA formula for doing it. You never want to deal with

that kind of nonsense. But the idea that people would just go around willy-nilly putting min,

max values everywhere and let the builder generate clamps, that’s the same as using magic values.

You’re just using magic numbers everywhere.

They’re responsive magic numbers,

but they’re magic numbers nonetheless.

So it makes sense in ACSS

because ACSS is going to generate tokens

for all this stuff

where a builder is just going to accept

your static values

and then allow you to use magic numbers.

It just doesn’t make any sense.

It doesn’t make any sense.

Can we please have a poetry block?

All right.

Well, we now know that Dove Burr

is Matt Mullenweg.

Okay.

Thanks for coming, Matt.

All right.

Glad to have you.

I don’t know if Etch will have a poetry block, Matt,

but, you know, we will.

How about this?

How about this, Matt?

If you want Etch to have a poetry block,

I’m going to need you to submit a ticket and get.

You may even need to become a contributor.

I’m just going to let you know up front.

You know, maybe if we get a little five for the future money,

We could put a poetry block in there.

It’s very possible.

But I think maybe you’re going to have to create a contributor account.

And then spearhead that for us, and we’ll see if it passes and gets added into core

at some point in the future.

All right.

Will the April alpha have ACSS baked in or will?

No, it’s not going to have ACSS baked in.

You see that we have this.

there’s the idea that it could potentially fire, uh, in a panel like this. Um, but it like,

we’re not going to rebuild it again. We just spent $70,000 or whatever it was rebuilding it for,

for this version and for, um, all of the magic that it does in terms of live preview and all,

and SAS and all that good stuff. This is SAS by the way. Uh, well, this is just add font face

declarations, but this is a SAS editor. And by the way, this has instant SAS preview,

instant SAS preview. I don’t know if it works in etch. Let’s just, let’s just check it.

Guys, that doesn’t happen anywhere else. This is, I don’t think SAS people even realize that this

might’ve been even possible. Normally with SAS, you have to save and it runs a pre-processor

and it figures out what you did and then it converts it into CSS.

Like these are the kinds of things we’re talking about.

This is the technology that we engineered.

It’s essentially, there’s my third stroke of the day,

instant SAS processing on the fly.

That’s going to be in Etch.

So when you write SAS in Etch, you won’t even have to save to pre-process it.

You’ll have it instant like this.

okay just happens i don’t have to hit save i don’t have to pre-process it this is nobody’s

heard of this nobody’s heard of this in the world of sass okay acss has been doing this for a minute

for a while okay um yeah this is uh these are the kinds of uh we’ll accept your contributor account

which I’ll have to stay the pineapple.

Yes, exactly, exactly.

Okay, I’m telling you,

like you’re, again, let me remind you,

like you’re seeing six months of a,

like you can’t even fathom

what this is going to be able to do

at the year and a half mark, let’s say.

Because we’re doing, it’s just like with ACSS.

Do you realize ACSS was the first framework

to have a dashboard?

Okay, then it was the first,

it was the first framework to have clamp functions that, by the way, that did the math for you on,

on this and that were, and that were related to each other by a math scale. It was the first

framework that did that. It was the first framework that had a, a user editable color system like this

with auto-generated shades and auto-generated transparencies. Okay. It was, there’s a laundry

list of these things just did not exist. There is no other card framework. There is no other icon

framework that I know of. Form styling, styling the entire form with a single utility class and

being able to control all of that. And then we gave live instant preview in the dashboard that

loads in the area you’re working because we wanted to eliminate the magic area of the backend

dashboard. It’s just first after first, the same kind of innovation that came to ACSS is the same

kind of innovation that is going to come to etch just in different contexts and different ways.

but that’s like what we do. We don’t just create another thing. It’s always the, hold on, hold on,

hold on. Why isn’t it being done this way? Oh, well, this is way better. Why don’t we just do

it this way? And just constantly thinking, and we’re actual users of the tool. We’re not a team

that sits around brainstorming and going, I wonder what we could bake in that might be potentially

helpful. What we do is we actually build projects. And when we’re on projects, we’re scratching our

head going, I don’t know why that’s done that way. Like when I’m in a builder and then you learn

what should and shouldn’t be done just by, you know, default. But here’s an example. You know,

people were like, oh, you can create components inside of Elementor. Well, I mean, not like we do,

right? But they’re a thing that they call components. But the first time I tested it,

I was like, oh, that’s neat. Let me go try that. And then I wanted to make one and it was like,

oh, you can’t do that here.

You got to go, you got to go out here.

You got to do it.

You got to go to this other place.

And then I wasn’t

is a magic area. The, um, the, the settings for the builder is a magic. Why? I’m in the damn

builder. Why don’t I, why aren’t the settings here? It’s just unexplainable things. They’re

just unexplainable. Um, like the, the sync between, like it was, did we enjoy the game of where is my

styling coming from? Oh, well that’s in an input. Oh, that’s at that break point. Well, that’s in

the style sheet. Well, that’s another this. And that’s, we don’t, why didn’t anybody before us go,

that’s not a fun game. Let’s engineer a way to fix that. That’s what we actually do. We run into

headaches and complications and problems and we go, that needs to be fixed. We don’t just live with it.

We don’t just, ah, yeah, that’s unfortunate, but it’s just the way it’s going to be. Like,

we are constantly trying to innovate it and make it way, way, way better.

Okay.

Yeah, I would go to, look, I think there’s, maybe it’s manifesto, if I remember correctly.

By the way, this site is under constant DDoS attacks.

So if you go there and you notice it’s slow or it’s down or it’s, we’ve been battling,

we’ve been battling this incessantly.

Look at this list.

These are all the things.

These just things did not,

nobody was contextualizing spacing.

Nobody had smart spacing.

If you don’t even know what smart spacing is,

I mean, you can’t imagine the power of smart spacing.

But again, nobody was contextualizing spacing.

Nobody was auto-spacing things.

Auto-spacing things with zero specificity

so that it doesn’t actually matter

when you don’t need the spacing.

Again, icon framework, card framework, border framework, divider framework, texture and overlay

framework, single class form styling, auto BIM, variable expansion and validation. Who is expanding

variables and calcs and all of that, right? Recipes. These were all innovated by ACSS.

So this is exactly what is going to happen in Edge. And it’s already what’s happening. You already see.

Where have you seen an if block before that you just drag things in and out of conditions?

And that wasn’t my idea.

That wasn’t my idea.

This is why you surround yourself with very talented other people, okay?

Because I always go, here’s what it needs to do.

And then, you know, a Chris or a Wadji or a Mateo or a Reinhardt or a whoever goes,

oh, well, in Svelte, it’s done like this.

And that would be way better if we did it like this.

Or in Vue, they do it like this.

Or, well, Svelte does it like this and Vue does it like this.

And we already know which one is better.

Let’s do it like that.

Yada, yada, yada.

Those conversations always happen.

The collision warning system.

Chris comes out of nowhere.

He’s like, I think I have a way to, and I’m not going to tell you how it’s done,

but hijack essentially a certain way that CSS is processed by the browser.

And we can, well, I really don’t want to give away too many details,

but he just comes out of the blue with this thing

and architects a way to build a collision warning system for styles, which solves a major problem

in tools like this. That wasn’t me, right? I knew collisions were a problem. I didn’t know it was a

solvable problem, right? Until Chris showed up out of the blue and goes, I think I have a solution

to that problem. And I was like, that’s awesome. We’re 100% going to bake that in, right?

And this is the problem with teams of one and teams of two.

They’re very limited.

They’re very, very limited.

That can’t happen on a team of one or two.

If it was just me, those things would not happen.

So as much as I can, as much as I do bring to the table with ideas and problems that

need solutions, and here’s how I think we should solve it, it would be severely limited

if it was just me.

Severely limited.

And then again, you have a team, maybe like an Elementor or a Divi, who might have 30

I don’t know how many people they have working on a thing at any one time, but the reason they don’t

come up with this stuff is because they’re not thinking about you. They’re not thinking about

the problems we’re thinking about. They’re thinking about how to make it easier for my grandmother.

Well, solving problems for my grandmother doesn’t solve problems for me. We go back to the initial

premise. If you create software with the wrong premise, you get the wrong answers. Not necessarily

that they’re wrong, just they’re wrong for us. Okay. So that premise is so important for people

to understand that it doesn’t matter how much money Elementor has. It doesn’t matter how big

their team is or how genius their team is. They’re building a product for my grandmother. They’re

not building a product for me. So they’re not going to solve the problems that I want solved.

So their money, their purse, their people, it doesn’t matter. It’s inconsequential.

They’re not working on the right problems.

So, yeah.

Okay.

How many years have you been involved in these things?

How much time did you dedicate to learning them?

Can you please share?

I started building websites when I was probably 10.

We’re talking like GeoCities.

We’re talking like all the early front page.

And by the way, I was very heavy.

When I started learning, I was already on the train of like, I would rather not write all the

HTML by hand. I would rather not write all the CSS by hand if I don’t have to. And so Dreamweaver,

FrontPage, you know, all these tools that kind of took that visual approach in the very beginning,

that’s where I started. And I just stayed very front end the entire time, right? And then,

you know, hobby sites, hobby blogs, things like that. Had a brick and mortar martial arts studio

for the majority. Well, I guess the, yeah, the majority of my twenties, I guess. And I was

running that. And then I was like, I don’t like being tied to a location. I don’t like being tied

to a schedule. What the hell am I doing? And then the guy I was partnered with, I should tell this

story because it actually, it ties in really well with the experiment, but the ultimate decline of

big advertising contracts that I was signing and then backing out of late last year. I won’t name

the companies, but it was a lot of money. It was a significant amount of money where I was going to

experiment with doing sponsored videos. And, um, there were, there were fairly large checks.

And I ultimately was like, I’m not going to do that for a very specific reason. It actually ties

back to, uh, some of the stuff that was happening when we were running the martial arts studio.

Cause I had a partner in that studio that was all about money, all about, uh, no standards don’t

matter. Just pass these kids, just, just give them new belts. Cause every time they come to a test,

they write a check and that’s just what we need to do. We’re a business and we need it. And

I had enough of that. And I was like, I’m not doing that. And I first, I tried to fight against

it for a very long time. And so you’d be like, that kid needs to test. It’s been too long. And

I’m like, he’s not ready. And he’s like, he needs to test. It’s been too long. He’s going to quit.

If he quits, we won’t have the revenue. Plus we get the revenue from the belt test, blah, blah,

blah. It’s a fucking belt factory. That’s what these people run. They run belt factories. And I

was trying to fight against it until I realized I can’t win this. And I just have to get out of it.

And so I finally had enough and I got out of doing that. And I was like, by the way, I also just,

I want to work anywhere and I want to work on my own schedule. And so that sucked anyway. Let’s do

our own thing. And I went back to, you know, I’ve got these skills online. Let’s go back to doing

stuff online. But I’ve been doing this stuff, you know, since I was 12, essentially.

Yeah, dream. All of them did. I’m pretty sure front page wrote horrific code too.

What’s the collision warning system? Okay, I’ll show that. Then we got to get out of here.

It should work in this one.

I believe they fixed the bug.

So let’s go hashtag heading.

So that’s going to be an ID.

It’s going to be an ID of heading.

I’ll do heading, heading one, two, three or something.

Okay.

And then we’ll also add a class.

Okay.

Of my heading.

So I have these two things right here.

Did I not, I don’t think I put the, maybe I did my, my heading.

There we go.

Okay.

So I have an ID and I have a class, obviously.

Well, if you’re a beginner, an ID will defeat a class.

Doesn’t matter the order they come in.

An ID will just always defeat a class, okay?

And I’m testing this with an ID

because I don’t think we tested it with an ID.

So I want to see.

But if I go to my heading one, two, three right here

and I go to color and I say red

and then I go to my heading,

we’re going to see that red is shown as the inherited value.

But maybe I forgot.

Maybe I forgot that I put the red on it.

Maybe I come back a month later

and I want to change the color of this heading.

on this class, my heading. And I say, I really want that to be green. It’s not green. And why

isn’t it green? Well, it’s green because the ID is winning. But if we don’t have a collision warning

system, you won’t know why it’s not working. And then you’ll have to inspect the page, but you

don’t even know how to inspect the page because you’re a beginner, right? Yada, yada, yada, yada,

yada. Okay. So notice that the label has turned yellow. And if I hover over it, it’ll say the

value is overwritten by heading one, two, three. And if I click that, it’s going to take me to

heading one, two, three, and I can easily fix the conflict. I can decide, oh, okay, I really want to

make it green here where it will actually turn green. Or I’m going to say to myself, why the hell

did I style that at the ID level? I don’t want to do that. I want to use my heading and now my

headings green will actually work. But the collision warning system is letting me know

that it’s not working here and why it’s not working here. And it’ll actually take me

to where I need to fix it. Okay. And make a new decision. So that is the collision warning system.

And that’s not just for beginners. That’s like, that’s very helpful when you have advanced stuff

going on and you’ve written a lot of rules and you’ve got a lot of classes, it’s very easy to

create a competing style. And it’ll be like, why is that not working? And you don’t know if it’s

the browser causing it. You don’t know if it’s the builder you’re using, causing a conflict.

You don’t know if it’s a style you wrote. You don’t know if it’s an external style sheet.

This will literally tell you, it doesn’t right now, but it’ll literally tell you it’s overwritten

by XYZ style sheet.

I’m pretty sure we can even tell you what line the style is coming from.

Once again, you don’t see this anywhere else.

We find problems.

We engineer solutions.

We don’t just sit around brainstorming what might be cool.

That’s not what we do.

We identify real problems and we develop real innovative solutions for those problems.

This is just a temporary UI.

You’re not seeing the actual UI.

This is just like for, okay, does the functionality work?

The UI for it is coming.

Yeah.

And then as Daniel said, you end up using important because you can’t find the style, right?

So if I do green, let’s do this.

notice I can put important in here anytime I want. When I go to heading one, two, three,

uh-oh, look at this value overwritten by my heading takes me there, shows me why,

right? So vice versa, it works and it is able to identify important values.

Does it show a warning or some indication when creating the same class name? Let’s try it.

Okay. I’ll, I’ll, it’ll, so my heading is down there, right? Is it going to create a second,

my heading? No, just doesn’t do anything. It’s like, dog, you already got that there.

You already have that there. I can change the name, right? So I’ll say a different

name. Okay. And then I’ll click out a different name, a different name. Okay. So it’s kept the

styles and it’s just, it’s, it’s essentially found and replaced. I don’t think that’s exactly

how it works, but that’s essentially what it’s done everywhere, which you can’t even do that in

VS Code. That’s why these builders are the best of both worlds. If you want to do that in VS Code,

you would have to literally go find and replace every instance. You can do that with a command

in VS Code, but you do have to like at least, you know, read them and make sure you’re doing the

right thing or you have to use regex or something like it’s, you know, it’s not that easy. That’s way

easier. I can right click. I can delete it. Now it’s gone from the database. Okay. So we’re going

have a whole class management UI. All of that is going to exist for sure. Yeah. Important should

be avoided at all costs. Absolutely. Which is why you need a collision warning system that tells you,

hey, you got something going on over here. You might want to take a look at it because that’s

what’s winning right now. Then you can make a new, you can make a new decision. Would that work even

if the class is present on other pages? A hundred thousand percent. Yeah. It would be useless if it

didn’t. It works site-wide. It will rename the class site-wide and replace site-wide.

I would love to take a look at HWP during a live stream today as well. Can I showcase a sandbox

version? If you, that would suck because the timer on it is not very long. Let’s do this.

If you are a legit content creator with a legit channel, which I know you are, Lex,

but I’m talking to everybody right now, okay?

If you’re a legit creator with a legit channel, you can message our team,

and we can get you an installable file early, like maybe now, okay?

I got to talk to the rest of the team, but we can probably get you an installable file,

and you can just use that, and that’ll make life easier for you,

and then you won’t have to worry about the sandbox.

We can’t do that for everybody, but if you’re a legit content creator,

and you want to do that,

go ahead and either DM me.

I would go in the community,

do it from inside of the Edge community,

DM me in the Edge community

and we’ll get you taken care of.

So like Dave Foy,

Lex,

Mark Zemanski,

you know,

anybody else like a rat,

Toby,

Cracker,

anybody else?

I can rattle off the top of my head.

If you have a license,

which I assume you do,

okay,

because you’re going to message

inside the Edge community,

then I will get you

a copy. Okay. I got to get out of here. This is, this has been fun. It’s been, it’s been great.

It’s been fantastic. We found some additional things to, to work on and improve, which is

always good. And yeah, I will see you guys again very soon. All my videos now will start being done

in Etch. So we’re going to have a lot of fun and you’re going to see the progress over the course

of all the videos that I’m doing, which is going to be also fun. And it’d be fun to look back.

Remember what Etch looked like at the six month mark, you know, when we’re a year down the line,

that’ll be good as well. So I’ll be back very soon. You’ll see more of me. Don’t worry. You

have till Friday. If you don’t have a license, you have till Friday to get your license in this round.

And that is it. When will we be able to download Etch? I don’t know exact date,

but definitely in April, definitely in April. All right, guys. Peace.