Card & Icon Framework Progress Sneak Peak

Hello, hello, hello.

How are we doing today, friends?

Mmm.

Got Steve in the house, Marcel, Dahunzi here, John.

Excellent.

Case is here.

Nice to see you guys.

Nice to see you guys.

This is a very casual live stream on a lazy Friday afternoon.

Just figured I would give everybody a sneak peek.

Been working very hard on this card framework, an icon framework.

And this is not like an official preview of it or sneak peek or anything.

In fact, there may be an issue or two here and there, and we can investigate those.

But I do want to just kind of give you that sneak peek, that glimpse into what’s coming, because you’re going to want to use this feature ASAP.

This is one of those things that has just been really, really, really necessary in the world of web design for a while now, I think.

And the way automatic CSS kind of, it presents unique opportunities for doing things like this that normally aren’t doable in very easy fashion.

So this is going to be something that I think almost everybody is going to start using very heavily.

I think it’s something you’ll start to see other frameworks adopt.

I think it’s something that you might even see builders try to adopt in some form or fashion.

I don’t know.

But yeah, it is.

It’s I mean, I’ve been playing with it a little bit and it’s it’s it’s fantastic and it’s getting fun.

It’s getting more fun.

Let’s go ahead and look at the chat here and see what’s going on.

Oh, we got like, man, I didn’t expect Friday afternoon.

I mean, we got already seven to 70 people.

I need a new project to work on so I can give bricks a test run and hop on the ACSS train.

Yes, absolutely, Marcus.

We would we would love to have you.

OK, man, Mark’s here.

Mark Zemanski’s in the house.

We got we got we got some friends here.

OK.

All right.

Oh, Tyree.

Surprise live.

Yes.

Yeah, it’s pretty much a yeah.

Just a nice little surprise live.

All right.

Let’s get to it.

So first things first, I’ve got this blank slate.

This is where we’re going to start.

This is our little playground here.

Let’s bring this kind of front center.

So in the ACSS panel and by the way, in the in next week’s release and I usually we release on Thursdays.

I don’t know if I’m going to wait until Thursday.

It just depends.

It just depends that we might go earlier next week because I skipped this week’s release.

So we don’t necessarily have to wait until next Thursday.

If it’s ready, then it’s then it’s ready to go.

Both of these things are going to be an experimental, though, but you’re going to see these two new areas inside of ACSS on the main dashboard.

One is for cards.

One is for icons.

So if I click on cards, you’re going to see card framework experimental.

This will be turned off.

You just turn it on if you want to start using it and experimenting with it.

Now, when something says experimental, you know, if you’re doing a small brochure site or something and and if something changes or breaks and you’re willing to go fix it, I mean, you can use it on that kind of thing.

Don’t I wouldn’t use it on any major projects or things like that?

Experimental means like we’re playing with it.

We’re getting feedback from users and things could very well change or adjust.

We might find, you know, oh, that was a dumb way to name that variable or something.

We rename the variable and boom, something breaks.

Right.

So this is what experimental means.

So, you know, use it with caution, essentially.

Okay.

But you have light cards and you have dark cards.

You have default card styling.

This works very much like forms.

We’ll go over all this in just a second.

And then in icons, you have the same thing, but you’re going to have a little bit different layout.

You have some different icon sizes.

And if you watch the live stream where I was live developing this a few days ago, things have changed since then as well.

There’s a lot of new goodies in here.

A lot of just it’s, it’s really, really, really starting to come together.

But you have dark icon styles.

You have light icon styles.

You have boxed icons.

You have non-boxed icons.

You now have support for icon lists.

And then there’s some various options in here, which we’ll talk about in just a second.

Okay.

So do you have to set much up?

No, not really.

You just, you just turn it on.

It’s very much like a lot of things in ACSS.

You turn it on and you can just start using it because the defaults are very, very, very sensible.

Now, if that does, if the defaults don’t fit what you’re looking for or what you want to achieve, that’s when you open the dashboard and you start making some tweaks and making some adjustments, but very quickly, you’re going to be able to arrive at your destination.

And then everything is set for the rest of your project.

And as you’re going to see with the workflow, it’s very, very hands-off.

You can almost get away with like, you know, obviously I think it’s still a good idea to put a BIM class on everything, but you can actually get away with a lot because the card framework like picks up whatever gaps you’re leaving behind and kind of covers for you a little bit.

Not really an excuse to be lazy.

I would still auto BIM everything, cross your T’s, dot your I’s, things like that.

But as you’re going to see, it just, it makes things very easy.

So what I’m going to do, I’m going to do a little three column grid here, and we’ll start to put some cards.

Maybe we’ll do like a blog post card as an example.

Okay.

So I’m just going to use utility classes real quick.

We’ll just do a three column grid.

And then let’s go with a two on L and then one on M.

Okay.

And save.

So we have a responsive three column grid.

That’s going to stack nicely at each break point.

We’re good to go.

Now, what I want to do is put a card in there.

So I’m going to put a block and here is my card.

I’m going to go ahead and name it.

Let’s name this article card.

So we’re just going to make a generic article card.

Now, what I tend to do here is I do a media wrapper and I do a content wrapper.

Okay.

So I’m going to go with a block block.

All right.

Excellent.

Right here.

All right.

This is going to be my media wrapper, and this is going to be my content wrapper.

Okay.

Safe.

Now let’s go ahead and I want to, I want to add my media, obviously.

So let’s go in and add media.

So that’s going to be an image.

It’s going to be our featured image, which we don’t need to worry about looping anything quite yet.

I’m just going to put a placeholder in here for now.

Okay.

Now in my content wrapper, we’re going to go heading and we’re going to go text and I’m going to make that text a paragraph.

Okay.

And then what we would probably want, maybe let’s just throw a button in here.

Let’s just throw a button in here.

And I know this is not the, well, we could use an ARIA label to make it, make it accessible, but read more.

Okay.

And let’s just throw a button primary class on there.

So we’ll do button primary.

There’s my read more.

Okay.

Now, if you notice, um, I did not put classes on anything yet.

I like to do HTML structure and then I put my classes on, but you’re going to notice something normally when you put your classes on, nothing happens because you have to add styling to those classes, right?

Um, you’re going to see a lot of this come to life when I just put the classes on.

Okay.

So I’m just going to auto BIM this real quick.

So we’re going to go to BIM.

This is going to add my classes.

So I have article card, article card, media wrapper, media content, wrapper, heading text, basic.

I want this to be just a text or something like that.

And then we’ll have button there, sync labels, apply classes and save.

Now, essentially my card is styled, right?

All right.

So that’s, and that’s done.

Now let’s look at it on the front end.

So I’m going to go to the front end.

Now these are just the, this is kind of like the defaults.

You can do whatever you want here.

Okay.

It’s not like, Ooh, automatic CSS gives you a card style and that’s it, right?

You can tweak and adjust everything that you want to tweak and adjust.

But what you should notice is ACSS just styled that card for me.

Right.

Uh, let me go back to builder and I’m going to do my, uh, card.

Well, actually, you know what, let’s do this.

Let’s delete that.

Let’s loop this.

Okay.

So we’ll go to article card and I don’t know if I have any posts in here.

Let’s see if we do posts and good.

Let’s see.

Let’s go back.

See if we have, we can throw some in if we don’t have any, there’s a hello world.

Okay.

We’ll go ahead and we’ll give this a featured image.

So pop that in, save.

Excellent.

Let’s go back and let’s add new post.

Okay.

A second post and let’s do, I don’t think I can do my Ipsum in there website, ipsum.com.

All right.

Let’s go back in and where’s my posts.

Okay.

Put that in and featured image and let’s do this one and we’ll do one more post.

So we just get a quick loop going.

All right.

Let’s do a third post.

All right.

Put that in and get another featured image in.

All right.

Let’s do that one.

All right.

Set featured image, publish, publish.

Okay.

Save and refresh.

Okay.

So there’s my loop.

Now I can put in my dynamic data, right?

All right.

Let’s go title.

Let’s go excerpt.

All right.

And let’s limit that to 30 and then, or 20.

Yeah.

Let’s do 20.

Okay.

We can also stretch this grid so that all of our cards are always exactly the same.

Okay.

And on our button, we will do a little margin auto on the top.

Okay.

And that will align all of our buttons.

Okay.

Now let’s get rid of this junk and let’s refresh.

Okay.

And let’s do our featured image real quick because we forgot that one.

So let’s get that out of there.

Let’s go featured image.

Let’s save bang.

Okay.

So one, one key point here, and I also want you to notice the radius of the card versus the radius of the image, right?

So one thing I added, which is a real pain in the ass for so many people, one, because they don’t know how to calculate it.

And two, you can’t just calculate it.

If you really want it to be scalable, maintainable, unbreakable, you have to calculate the radius based on the card padding, which means you have to have a specific card padding variable to use in the calculation.

Otherwise, if the card padding changes, your calculation has to change.

And if they’re not linked together in any form or fashion that you’re, they’re going to get out of sync.

Okay.

That’s not good.

But look in the card framework, you can actually go in and you can go down to, let’s see borders.

And there’s a little concentric radius option.

And if I uncheck that, look at how the, it uses my normal website radius for my cards, which is, you know, that’s pretty much the default.

But if you’re the kind of person that’s like, I really like concentric radiuses on my cards.

Okay.

We can just toggle concentric radius.

All of your cards are going to have concentric radius, which is calculated based on the padding in the card.

Now, how does automatic CSS know what padding you’re using in the card?

Because it’s a variable and you can actually control the card padding from right here.

Like if I wanted my space L, I could actually just come up here.

Like you can, you can do whatever you want with your card spacing at any time.

And under light cards, here’s where I’m controlling my background, my heading colors, my text colors, my link colors, my button styles.

Okay.

If I wanted this to be outline variants, let’s save here.

Look, anytime I put, like I put button primary on the button, right?

But because it’s a light card in the card framework, I’m instructing that to make those outline buttons instead of solid buttons.

So I can have solid buttons all over my site, but it’s like, oh, but in my light cards, I want them to be an outline button, right?

Okay.

So all of this stuff that you’re looking at is completely, let’s do like a white background.

We can do a white background on these.

Let’s, let’s try a dark card.

Let’s try a dark card.

Okay.

So I’m going to get out of here.

Let’s go with, we’re just going to, we’re just going to put a modifier.

A little bit harder to do because we’re in a loop.

Okay.

Let me turn off the loop for just a second.

I’m just going to duplicate this.

Actually, we’ll, we’ll leave that alone.

We’ll, we’ll build a new card.

We’ll build a new card.

This is the easiest thing to do.

We’re going to have to use a mix in and I don’t want to get into the mix in territory yet.

We can absolutely do it in a, in a loop, but I don’t want to jump that far ahead.

So let’s just do another kind of card.

Let’s do an avatar card.

So this is going to be like a, maybe a team member card, like a very basic team member card or something like that.

Okay.

Let’s do another, let’s do a four column grid.

Okay.

So let’s do a four column grid.

So we’ll do, what am I selecting?

Let’s select this.

All right.

Let’s do grid and let’s do an auto four.

Okay.

So it’s an auto grid, which means it’s going to be automatically responsive.

And I’m going to go ahead and put in a block and this is going to be my let’s, what do we want to call this?

How about profile card?

Okay.

Profile.

So it’s like a team profile.

So let’s go, I’m not, I’m not going to put the class on it yet.

Let’s put a, let’s put an image in.

Okay.

And let’s put a heading in.

We’re going to make this a very simple card.

So up there, I did a media wrapper and a body wrapper and all that.

I’m just going to throw some things into this card.

So image, we’ll do heading.

We’ll do text, which is going to be there a little bit of their bio.

It’s a little snippet.

We’ll make that a paragraph.

Okay.

This is the person’s short version of their biography.

Okay.

Click to learn more.

Something like that.

I don’t know.

Okay.

Person’s name.

We’ll do Jane Doe.

All right.

And we’ll go ahead and put an image in here.

That’s, you know, this is not Jane, but it’ll do.

It’ll do.

Okay.

All right.

Next up, let’s do, yeah, that’s about it.

I don’t, I don’t even think we need anything else.

So there’s a profile card and I’m going to auto BIM this one.

Now the only difference is I’m going to call this avatar.

I’m going to give it a very specific name.

This is a, it’s an, it’s called an avatar card.

So I’m going to, and this is all going to be mapped out in the framework, spelled out for you.

There’s only really two or three things you need to know in order to make the framework work the way that it’s supposed to.

One of them is that avatars need to be called avatars.

Okay.

But we’re going to have an avatar right here.

And then we’ll just call this like bio or something like that.

Now I’m free to name these, whatever I want.

Like these are not pre-programmed, predetermined class names and automatic CSS.

None of that has happened.

You are free to do whatever you want to do with your, with your names.

But I do want the name to contain the word card.

Okay.

So profile card, and then we have avatar and then we have heading and then we have bio.

Okay.

So I’m going to, it’s going to duplicate this a couple of times.

And now what you’re looking at is an avatar card, right?

But I’m going to take my profile.

Look, look what happened to the image and all this other stuff going on.

Right.

We’re going to go center this and we’re going to go with a center here and perfect.

So now I have like a avatar card.

Let’s go to the front end.

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

So I’m going to open automatic CSS cards.

And you’re going to notice down here that avatars are something that are accounted for because it’s a very common thing to place in a card.

Right.

So I have full control over like the size of my avatars that are in my avatar cards.

And these avatar cards can look however I want them to look.

Right.

I’m just whipping this up.

But these are the fundamental things that you, that you have control over avatar border with avatar border style.

You can reference very easily other things in the system, like your global border with your global border style, whatever you want to do, or you can go rogue, like you can go rogue and do whatever you want.

You can do notice.

My radius is not my website’s normal border radius because for my avatars, I like them to be circles.

Right.

So we have an avatar radius.

You can control the aspect ratio.

Very nice.

Okay.

Now let’s do a dark version of this card.

Remember I’ve done no work.

I’ve done no like setup or anything else.

I haven’t told it what classes I’m using.

I haven’t, I’m just, I’m just naming things cards and everything is going to be very consistent and everything is going to be very controllable all from a single place.

And this is going to happen across my entire website.

So anytime I want a dark card, I have two options.

I don’t know which option is best.

That’s why I put them in.

Okay.

Um, it, you can tell automatic CSS, which style of card you prefer as your default.

Remember we have light cards.

We have dark cards.

You can tell automatic CSS by default.

If I don’t tell you to be something else, I want you to be this, right?

So it’s going to be light by default.

Um, we can set it to dark, right?

Um, and then when you start creating cards, they’ll all be dark by default.

Like, and then you can go ahead and customize them.

You know what, what the dark ones look like, whatever notice, like I didn’t do anything other than tell ACSS because those were default cards, right?

If I want my default to be dark, they’ll all turn dark.

Cause I didn’t tell them to be anything else.

Right.

Um, if I want to be light, they’ll all be light.

And we’re going to get into icons in just a second and how these things all work together.

Um, okay.

So there’s alt.

So you can have an alt card.

You can ask for the alt card style, right?

Or you can ask for a specific card style.

So I can ask for dark, for example, here’s how I’d ask for dark.

So I call this profile card.

I’m going to do profile card, double dash dark, right?

And immediately I’m going to get the dark card style.

Now I’m going to go ahead and save that.

We’ll go back to the front end.

And then I’m going to show you how we can go ahead and customize this one as well.

So when I go to cards, I go to dark cards.

Here is your background.

So now I can do whatever I want and I’m in the primary palette right now.

I don’t have to be that.

You can go, you can do whatever you want.

Okay.

Primary ultra dark heading color is text light.

Maybe I’ll try primary light.

Let’s do that.

Okay.

Whatever.

Um, let’s do text colors light muted.

I like that.

That’s fine.

Uh, link color.

I don’t have any links in there, so we don’t need to worry about that right now.

Icon style is dark.

Oh, my avatar border radius.

I’d like to make that primary.

Let’s keep it primary in the dark cards.

Okay.

So now I just made my little dark card style, right?

Okay.

So that’s one way that you can ask for the dark card.

Uh, let’s see if the other way is also working.

So you could say profile card alt, right?

And I also get the dark card.

Now, what is the difference here?

I think what we’re going to see, uh, is I haven’t actually tested this.

Uh, we’re going to, we’re going to test it right now together, but if I make my primary card style dark, notice that I’m, that one is alting, right?

It’s becoming the opposite of whatever the primary is.

So that is a, maybe a scalable, maintainable way to, Hey, I, this card is supposed to be different from the others.

So you’re saying, I want it to be the alt style.

And it actually doesn’t matter what your primary style is.

Um, or actually, sorry, it maps to the primary style at that point.

Uh, versus if you call the dark one specifically, it would never switch because you, you told it to be dark.

It’s always going to be dark.

If you tell one to be light, it’s always going to be light.

But if you say be alt, whatever your main is, it’s just going to be the opposite of that.

Um, so you saw that one update in real time.

And if I go back to light, it’s going to go back to being dark because it’s just going to be opposite of whatever the primary style is.

So you have those two options, right?

You get to decide, do I want it to be the alt of my default scheme or do I want to call a specific style like dark or like light?

Okay.

Uh, I can actually leave that on.

Um, now, does this prevent me, does the card framework prevent me from doing other kinds of cards, right?

These are a little bit basic so far.

Um, so let’s go in and let’s do a, another section and we’ll do a grid of, um, we’ll do a grid of four again.

Let’s do an auto four.

All right.

Same thing as we did last time and I’ll do another block and we’ll come in and we’ll call this like, um, we’ll call this background card.

Okay.

I’m going to do a background image in this card, but I’m not even going to use the background image property.

I’m going to use a real image and I’m just going to put it in the background and I’m going to overlay some stuff on top of it.

Uh, and we’re just going to see if the card framework interferes with our ability to do this or if it actually helps us do this.

Okay.

Uh, so let’s work through this together.

So what I’m going to do is I’m going to put an image in here and this is actually going to be my background image.

So I’m going to go with, uh, let’s, let’s do this one right here.

Okay.

And then what we’ll do is I want to put a, a content wrapper in here.

Now up here, I called this, I believe content wrapper in this first one, article card content wrapper.

I just want to show you that those names don’t matter at all.

Like I could, I could just call this body.

Right.

And then in here, I want to do a heading and I want to do text.

Uh, and then maybe I want to do a link.

Okay.

Let’s, let’s do a text link in here.

Perfect.

Okay.

And we’re going to do heading.

Yep.

That’s going to be text.

And this one’s going to be link.

Perfect.

Those names don’t matter either, actually.

Okay.

So now what I’m going to do is background card.

I’m going to auto bin this.

Notice my image can just be called image.

Like it doesn’t, none of these names, you can do whatever you want.

None of these names matter.

Okay.

So the next thing I’m going to do is I’m going to take this image and we’re going to position this absolute and we’re going to move it into the back with Z index.

Okay.

So I’m going to go layout position and we’re going to do absolute and I’m going to give it a top left bottom right of zero.

That’s going to stretch it to all sides.

I’m going to do a hundred percent width and a hundred percent height.

Cause images are weird like that.

Like, you know, they don’t always follow their inset property.

Um, so, you know, backwards compatible or just full compatibility.

You want to generally do a hundred percent width, a hundred percent height.

Um, and then what I’m going to do on my background card right here is I’m going to go with set a minimum height because now the image is not physically there to control the height of the card.

I just want to set a minimum height of like 400, 500 pixels, something like that.

I’m going to take this image and I’m going to move it into the background.

So we’re going to go order, no Z index minus one.

Okay.

And then I’m going to take this body right here, or actually I can do this on the card itself.

We can just move everything to the bottom down here.

Perfect.

And let’s go, that’s an age two.

Okay.

So card heading just like this.

Um, now I’m thinking about whether we should have a programmed in like media overlay kind of thing for cards.

Uh, haven’t gotten that far yet.

I’m still thinking about it.

You can do overlays however you want to do them right now.

Like I’ll show you one sneaky way to do it.

Here’s a sneaky way to do an overlay where you don’t need an extra wrapper.

Uh, if you’re going to do it on an image, it has to be a figure element, but you can come in and you can root and then you can do a before pseudo element on this.

This is why it has to be a figure because, uh, images don’t support pseudo elements.

Uh, but the figure wrapper does.

Okay.

You give it blank content, uh, position it, um, absolute, and then go instead of zero and then go border, border, border, border, border image fill.

Nope.

We don’t want all caps fill one and then linear gradient and then red, red.

We could just do that just so you can see exactly what it’s doing.

Uh, this is like a very shortcut sneaky attack.

It’s like a sneak attack way to have an overlay.

Uh, and then all you have to do to make this an overlay is actually give these transparent values, right?

So I can do like black trans 60.

Uh, and then for here, I can do like black trans 80 or something like that.

And so I get a nice little dark gradient, uh, kind of thing going on.

Right.

So we’ll save.

And, um, I’m going to say that this is, cause technically now this is a dark card, right?

Um, so I’m going to do background card, double dash dark, and that’s going to give me my dark card styling because that is in fact a dark card.

And this is one where I wouldn’t want it alt.

Like I would want to say, this is always dark.

It’s just always going to be dark.

So, um, let’s go ahead and duplicate that a couple of times.

And I want to talk about a couple of things that the card framework actually did for us right there.

Um, I want to make this a three column grid.

Okay.

Well, we’ll just leave it like that.

That’s fine.

All right.

So let’s refresh, come down and take a look.

Okay.

Um, Oh, let’s make this a link.

Let’s make this a link.

See if this can be controlled as well.

So we’ll go custom URL pound sign there.

All right.

And then custom URL pound sign there, custom URL pound sign here.

Okay.

Those are actual links.

Now let’s refresh.

Let’s go down.

Let’s open automatic CSS.

So if you, if you aren’t advanced at CSS, you don’t realize what you did not see when, when I was doing that.

So when I made that image absolute and I put it in the background, a lot of times there would still be another step involved to getting your text to show up on top of it.

Okay.

Um, which is a, an isolation of isolate.

It’s like resetting the Z index stack.

So I, we do that automatically with the card framework.

Also, you never saw me change the card to position relative so that the absolutely positioned image would be contained inside of it and attached to it.

Right.

The card framework has done that automatically already.

Um, the border radius that you now see, you wouldn’t see the border radius using that technique normally without providing an overflow of either clip or hidden.

Now we can’t do overflow of hidden because that would hide any pseudo elements you’re attaching to your card, but we do an overflow of clip, which still clips the edges so that you can see the border radius, but doesn’t stop you from doing other things like pseudo elements.

So that was all done for you.

Right.

So there’s a lot of headaches and like places where people would have gotten stuck.

Maybe that the card framework was just already pre configured to handle.

Um, and so it actually made this style of card easier to build than it otherwise would have been.

Um, and notice I never, I never had to put the border radiuses on.

I never had to do anything right.

I just, everything, I just threw the elements in.

Uh, I just had to position the image essentially.

And then the card framework kind of took care of the rest.

Um, now you can override things.

So concentric radius right here.

Okay.

Let’s take a look at this as an example.

What the card framework does is it applies a lot of global styling that you have, obviously you have control over, but it does it with very low specificity, which means it’s always easy to override whatever you need to override.

So like on my background cards right here, um, this is where you would refer probably to the documentation, right?

Um, in fact, I think we go, or you can just inspect your cards.

You can always do that too.

So if you’re comfortable inspecting and just seeing what the name of the, the thing is that’s doing the work.

Um, so let’s do, I think it’s called card radius.

All right, let’s do card radius and then just do radius.

And now these cards, like not all of them, uh, but these cards are back to my default border radius for my website where all of these others will stay concentric.

Remember I asked for all of my cards to be concentric.

And some people will be like, well, what if I, what if I got like one kind of style card and I don’t want it to be concentric?

Well, it’s as easy as that.

You could just set the card radius back to zero or whatever you want.

Like any, any value will do.

It’s just, everything is done with custom properties, meaning you just override the value of the custom property on whatever you want to manually manipulate and you’re good to go.

And the card framework is doing 95% of the work for you.

And then you end up doing 5% of the work, uh, with your cards.

Um, so you’re not locked into anything.

It doesn’t prevent you from doing anything.

It doesn’t make things more difficult than they would have been.

It just kind of does everything for you or most of everything, and then helps you tremendously along the way.

Um, I’m going to stop for just a second and see, uh, how we, how we looking in the chat.

Um, I’m wondering why he hasn’t enabled the setting for putting the tabs in the sidebar just as arc.

Is there a, is there a setting for that in, in brave?

I’m not even aware of this.

Not even aware of this.

Okay.

Uh, my OCD with the radius can now be put to rest.

Absolutely.

Absolutely.

Um, okay.

How are we doing on, okay.

We got good viewership too.

Uh, are we excited about this?

This is why I need to know before we move on.

We’re going to move on to icons.

We’re going to move on to icons here.

I’m just going to take a little break and see.

Um, now, by the way, if you don’t want automatic CSS to hijack everything that you name a card, you have control over that too.

So there’s a setting right here that says automatically style cards.

You can turn that off.

And then if you turn that off, what you’re going to come down and do is you can use manual card selectors.

Uh, so you could use the class card.

And so you would say card, and then the name of your card on any cards you want automatic CSS to auto style.

Um, you can actually exclude cards.

You can turn on auto styling and then exclude specific cards.

If you want to, um, you can put in other manual card selectors.

This is just accepts a list right here, like, um, comma, my other card.

And now my other card would be auto styled by ACSS.

So if you don’t want it to manually or automatically do it, you can manually do it just like this with these manual card selectors.

Um, okay.

We’re not going to save any of that.

We’ll refresh.

Let’s take a look at, uh, all the things you can control, right?

Um, so you have card padding, card content gap, uh, which is content gap divided by two.

So you have control over the gap in your card, the card text size.

I don’t know if you guys noticed, but my text in my cards got automatically a little bit smaller because I’ve set it to do that.

Um, you have full control over that.

This is the heading size.

Notice that it didn’t matter.

Let me, let me go show you.

It does not matter what tags I use H2.

And then this one’s going to be an H3.

And then this one’s going to be an H1, like whatever you needed to do there for accessibility purposes or whatever does not affect the design, the styling, because the card framework is saying, we’re not looking at the tags.

We’re looking, we’re just controlling the size of the heading.

And because automatic CSS maps all its text sizes, the heading values, uh, if I go back to cards and I come down, I’m just saying, Hey, be the size of whatever my H3 is.

I don’t care what your tag is.

Just be the size of whatever the H3 size is.

And that handles it for you.

So that’s another thing that you don’t have to do and don’t have to worry about and can never break.

Um, and then you have your icon stuff, your avatar stuff.

Um, okay.

So let’s get onto, let’s get onto icons now.

Oh, oh, we could do one more thing.

Hold on.

Let me grab, I think I have, I think I have one on this other page.

Let me go.

I wanted, I wanted to grab a switch real quick for dark mode, light mode.

Um, let’s go to icon framework.

Let’s edit with bricks on here.

Okay.

Let’s open this up.

I just grabbed, this actually is a little manual switch, uh, that we have for free on our code pen.

Uh, let me put it up here in this section.

Can I paste it?

Did it let me paste it?

I probably shouldn’t have, uh, probably shouldn’t have left that other page paste paste paste is doing absolutely nothing.

Okay.

Uh, let’s go back and let’s go to icon framework again.

Let’s grab that.

I’m just going to, I’m just going to save it as like a code save as global element.

Do I want to do that?

I don’t know if I want to do that.

Maybe I, maybe I do.

I don’t know.

I never use global elements.

Let’s see if it’s available.

So I think it’s down here.

Yeah.

There we go.

Okay.

There’s a little, there’s a little switch.

Uh, let’s wrap it in a container because we want it to be kind of aligned up there.

Okay, good.

Fantastic.

All right.

Um, so now dark mode is obviously working, right?

So these light ones are turning dark.

Everything’s turning dark.

This one’s staying alt, whatever I want to do.

Now these down here don’t look great because they were dark automatic, like by default, right?

We don’t want dark things typically to change to light like this.

So where do we go from there?

Well, we got another feature in automatic CSS.

We’re going to see if it’s set up to work yet with this card framework.

Um, we just need to know the name of our card, background card right here, background card.

All right.

And it might even be background card dark.

Let me close this.

Let me close that.

Okay.

Uh, let’s go to automatic CSS.

So if you go under color palette and you go down to where your color scheme is managed, we have this feature called color scheme protections that nobody else has.

Um, and what we’re going to do is we are going to drop in the class background card and we might need the dark one if this works at all.

Oh, there you go.

Good.

And now it’s essentially protecting our background cards from changing scheme.

This is programmatic color scheme protection for dark mode.

So, um, cause this is a perfect situation where it’s like, I don’t want that thing to like, it’s already dark.

Like if we’re going to go dark, I don’t want those things to go light.

And so now they will not go light just like that.

You just take the selector, you just drop it in and now it will not go light.

Um, so that’s, that’s nice and easy.

Great.

So perfect.

All right, let’s, let’s switch back here and let’s manage some icons.

All right, let’s get into the builder.

Let me go back in.

Let me see what people are saying in the chat.

Uh, yes, yes, it is very juicy stuff.

Very juicy stuff.

Okay.

Um, definitely excited and dreamland.

Um, yep, yep, yep.

Okay.

Looking great.

Is this in a beta version of ACSS?

No, we don’t really do beta versions anymore.

Um, we do experimental features.

This is experimental.

You can turn it on and opt into it.

Um, okay.

Why don’t you use the command UI for switching between page?

This is just my local dev install.

I don’t think it’s on here.

Um, I need to practice with it too and just get, get used to it.

Uh, okay.

Excited.

Not anymore.

You always over deliver.

I’m hyped about the etch query vid I saw today.

Yeah.

Yes.

Very much to be hyped about there.

All right.

Let’s, let’s do icons.

Cause they are a pain in the ass, right?

All right.

Let’s go container.

I’m just going to add some down below real quick, um, to show you the secret of icons.

All right.

So we’re going to go icon and we are going to choose an SVG for one of them.

Uh, we will choose this X icon.

All right.

And then I’m going to duplicate that and I’m going to duplicate that again and let’s go container.

Uh, let’s go row.

Okay.

So these will just be in a nice little row down here.

So this one, I want to be a font awesome brand and we’ll find the X logo for font awesome brands as well.

So it’ll be actually, let’s use this one right here.

Okay, good.

Uh, notice it, it automatically is a different size.

Now, why is it a different size?

A different size?

Cause bricks feels the need to put a font size of 60 pixels on icons by default, which you can’t override.

You can’t change at the global level.

I don’t understand it.

Uh, don’t ask, um, that, yeah, that’s, that’s essential.

It’s essentially what’s going on.

Okay.

Um, what else did I want to do?

Oh, maybe like a, what else can we do?

Can we do a, I like an eye on icon.

Let’s just, let’s just go with a completely different library.

They don’t even have, look, they don’t even have the X icon.

They just have the old bird.

Okay.

Let’s try that.

Um, I don’t know if this one’s fill or stroke.

Uh, this one definitely is fill and I don’t know which one this one is over here either, but I don’t really have to care.

I don’t think.

Okay.

Now notice that automatic CSS, just because I’m adding icons hasn’t decided to do anything yet.

Right.

It’s like, okay, you added some icons.

Um, all you have to do, like the secret, the secret to getting icons picked up is you come in here and add a little attribute called data icon.

Okay.

And if we add that to each of them, we’re going to go, it doesn’t even have to have a value.

You’re just going to data icon it.

Okay.

Uh, data icon bang.

And now the minute I put the attributes on, I’m getting icons, I’m getting them styled.

I’m getting them whatever.

Now they’re under the control of automatic CSS, which means they’re under the control of you.

Right.

So we come over here, we go to icons now, and we’re going to see, we have global icon styles where we have a, uh, we can choose.

Do we want our icons to be dark by default?

Do we want our icons to be light by default?

Um, you can control your icon padding here, which if you watch the other day, I said, you should probably use some static, but no, no, I figured it out.

You can, we got it to where you can use relative values now, which means you don’t really need a padding for every icon size.

Uh, I’ve, I’ve played with 0.35 M.

Um, like I’ll show you 0.25 M 0.15 M these small M values in here actually work really well across pretty much every icon size.

Um, so when I go to icon sizes, now you’re going to see for the padding, I just referenced the global icon padding value.

You could come in here and hijack it and, you know, set it your own value, but I don’t really think you need to.

Um, we’re going to, I’ll show you small and large and all of that.

Um, also notice that it’s just small, medium, and large.

There was extra small, extra large, extra, extra large.

It’s a lot of options.

And I was like, I don’t know, I just don’t think people need that many options in most cases.

But if you do, if you do, you can just come down to options down here and go expand icon sizes.

And now you have all of those options available to you.

So if you need more of them, you can get more of them, but I’m just going to go turn that off.

I feel like, you know, most sites you can probably get away with three, especially since your icon card, which, Oh, we didn’t, we didn’t build an icon card.

We need to build an icon card.

Um, your icon card can be controlled separately.

You don’t have to use up one of your icon sizes for your icon card.

Okay.

So let’s go, uh, icon sizes.

That doesn’t matter right now.

Here’s our dark icon styles.

Here’s our light icon styles.

You can throw a box shadow on them.

If you want to, let’s see if that, uh, snaps into action.

Uh, it looks like it does.

That might be a really light shadow.

I don’t know.

Or, or maybe it’s not.

I’m not sure.

Nope.

It is.

You can see the shadow there.

It’s just very light.

Um, you can, you can do your own shadow.

Let’s just see zero, zero, 40 pixels, zero, uh, red.

Okay.

Let’s see.

Let’s get some.

Yeah, there you go.

So like you can do whatever you want here.

You can do whatever you want here.

Um, let’s go ahead and save.

Let’s get rid of that.

All right.

So you have a nice little box shadow, by the way, if you don’t, uh, put any values in these inputs, no, nothing is output on the front end.

So if you leave that, it’s not going to be like box shadow, none, or it’s just going to not output a box shadow property.

It’s just, you didn’t set it.

So you don’t need it.

Um, we’ll do icon list in just a second as well.

Okay.

Now let’s see how we could play with the sizes, right?

So I’m just going to use a icon double dash, and then we can do like S.

So if I, and you can do this with one icon individually, you can do this with rows of icons.

You could do this with pages of icons, whatever you want to do, but this is how you get your small version, nice little utility class.

Uh, now, of course you could go in to any, remember everything is done with custom properties, right?

So if I went in and I did icon size, icon size S like that, uh, look at that one, that one, that little one right there is just an S now, right?

Or I can say it’s an L now, or I can put a custom size on it.

I don’t, I’m not forced to my global icon sizes, but, um, this is how you can control one off.

I could, I could also do that at the container level right here.

So root, if I just did icon size and I said like 50 pixels, right?

They’re all going to be 50 pixels, 60, 70, 80, like whatever you want to do again, it doesn’t, stop you from doing things that you might want to do or that you might need to do.

Um, it just helps you.

That’s all it does.

It just helps you.

Um, let’s go talk about the boxed style here.

So boxed icons would be in global, um, icon sizes or options, boxed icons.

There it is safe.

Okay.

So if you don’t like the boxed effect and you don’t have to have the boxed effect, uh, if we go back to global icon styles, you see some inputs have gone away, right?

Um, those inputs look padding gone, right?

Cause those are part of the boxed effect kind of thing that we’re going for.

So the dashboard is also going to hide things that you don’t need to see and that you can’t really control when you’re not in that mode.

Um, but if I do want my icons to be boxed, I can box them and now they’re all boxed, right?

Uh, okay.

So let’s see, we want to do an icon list.

Maybe let’s do a, and I’ll show you guys how to, how to make a list.

Uh, let’s do another container.

Okay.

If you never made a list in a page builder, not every page builder allows you to do it like this, but I’m going to do a div.

That’s going to be my unordered list, right?

So if we go in and do unordered list, and then I’m going to put a div inside of that and that div is going to be the li.

So we’ll call this list.

We’ll call this list item.

Uh, we’ll go display, uh, HTML li.

Okay.

Perfect.

And then we’re going to put an icon in that list item.

And then we’re going to put text in that list item.

So this will be my list item, actually my, my icon list item.

Okay.

And then we are going to make this an SVG and we will choose, uh, the little alien.

Okay.

Let’s put him in.

Perfect.

Um, okay.

So now what I want to do is BIM and I’m just going to, yeah, we’ll just do list list item.

This is a basic, I will call this icon list.

How about that?

Icon list list item icon.

Uh, let’s do list item icon and let’s do list item label.

Okay.

Uh, you don’t have to do that.

It’s just, that’s more proper BIM.

Uh, so let’s do apply classes.

There we go.

And on our list item, I can just set this to flex now.

So let’s display flex and row and then my column gap 0.5 M and yeah, it’s looking pretty good.

Okay.

Let’s save and let’s go list item, list item, list item, list item.

Excellent.

And in my list, I can also gap this out now.

So let’s go to, how does it hide the gap property?

Uh, let’s go to, or you can throw a utility class on there.

Okay.

Let’s do that since, since it doesn’t want to, doesn’t want to help us out.

Um, list.

Oh, is this not a display flex?

That’s probably why.

Okay.

Uh, display block.

Yeah.

Oh yeah.

Okay.

Can’t do that.

All right.

And then if we do list none, uh, we should get our, like get rid of the bullets, get rid of all the shit we don’t need, get rid of the padding, get rid of the nonsense.

Um, that’s, that’s good.

All right.

Let’s do 0.5 M get our, get our list spacing.

However, we want it 0.75, something like that.

Save.

Okay.

Let’s go to the front end.

Excellent.

All right.

Um, let me see if we’ve put this icon in CSS.

Okay.

No attributes.

Okay.

I’m going to have to investigate that because it’s, um, it’s picking up the icons by itself.

Normally what you do is you say data, data icon list.

So if I go on this list and I go here, I call this data icon list.

So I’m telling it, I want it to be an icon list powered by ACSS.

It’s going to get the styling.

It appears to be getting the styling by default.

So we’ll investigate that, but now I’m going to come in and go to icons.

I’m going to bring this over here.

So it’s right next to what we’re doing.

And you can see, I have boxed list icons because somebody did mention, well, I love boxed icons, but not when I make them in lists.

Right.

Um, so if we don’t want our list to be boxed icons, then now they’re not boxed icons.

Now you notice that they’re off, right?

Their positioning is off.

There’s two offsets that you can actually put in for your icon lists.

Uh, I’m going to reset this and I don’t know if it’s taking effect right now.

Let’s see.

Block offs.

Yeah, it is.

Okay, good.

Um, so let’s go three pixel like that.

Cause we took away the boxed, which takes away some of the sizing.

Um, and we can also have control by the way of the icon size in your list.

So you can really just sit here and dial this in however you want to and get that perfect.

But that those values right there, if I went to boxed might not be appropriate.

Right.

So let’s save and let’s see what happens.

See, they’re not like the offsets not looking good.

I might want to go like minus two pixels now because the boxed changes like it’s positioning, um, in that space, but you have these offset features that allow you to just instantly like realign, uh, exactly what you’re doing.

So control of the size, control of the offsets, whether it’s boxed or not boxed, that’s going to give you full control of your icon lists.

Uh, let’s do hovers, right?

What if you made this?

What if you wrap this with a div?

And what if you said like, this is going to be a link.

Okay.

Follow me on, on X.

Right.

Um, and let’s put this in a text as well.

So let’s say, follow me on X, follow me on X.

We’ll make this like a span.

Okay.

And then what I want to do is I want to put those things next to each other.

Right.

So this is probably where you would be.

You would, you would come in and do, I don’t want to do an ID.

Okay.

You want to do like social follow link or something right here.

And then you can set this to flex and then you can set this to align to the center.

Perfect.

And then you could control the column gap a little bit better, maybe X, S something in there.

But now that I have a wrapper, I can actually say HTML tag is a link and custom URL and bang.

Okay.

Follow me on X.

Excellent.

And let’s go back to the front end.

Okay.

Um, so one thing I’m going to try, cause I think we have to tell ACSS, cause now what we want the icon to hover, right?

We want the icon to have a hover.

So I’m going to say data icon hover, and we’re going to see if this picks it up.

I was tweaking a bunch of this stuff before as we were working on this.

Okay.

It’s not doing it there unless I, let me check my hover settings.

Uh, let’s go to icons.

Let’s go to icon, dark icons, light icon styles, primary.

Uh, yeah, it should be going to like semi dark.

Okay.

Let’s try it in.

Let’s try it if it’s a link itself.

Uh, cause there’s two ways that this can happen.

So let’s go to custom URL.

Let’s just, we’re troubleshooting here real quick.

Okay.

There we go.

So we’re getting our hover style.

When it’s a link itself.

It looks like I need to fix when it’s just wrapped in a link.

Um, cause it’s not picking up that actually, let me go to probably maybe needs data icon.

Let’s take a look at this.

Let’s take a look at this.

Okay.

A data icon hover.

Let’s just do data icon.

Let’s go style attributes back to data icon.

Uh, okay.

Maybe the icon itself.

Did it have that?

Yeah.

It had data icon.

It had data icon.

What if we go data icon hover here?

I remember how I set this up.

Okay.

Yeah.

I’m going to have to look at that for sure.

All right.

So hover styles when it’s inside of a link.

All right.

But if we look at it, when it’s a link, you can kind of get the gist of what’s going to be happening.

So I’ll go back and put this as a link and we’ll go back to the front end.

This is the, you’re going to be able to control these, these hover styles.

Now I’m going to make an icon card and the icon card is also going to have other links inside or other icons inside of it.

Like these social follow links.

Cause I want to take a look at a situation that happens there.

So I’m going to go all the way down, make a new section.

We’re going to make a new grid.

Let’s do grid auto three.

Okay.

So we’re going to do three icon cards and we’ll go block.

This is another kind of card.

That’s very, very, very, very common, right?

You’re going to see these icon cards all over the place.

So we’ll call this icon card.

We’ll call it my icon card.

Cause I think in testing, I already used icon card.

Um, let’s go with, I can do my block block thing again, where I can go, you know, top wrapper or header or whatever you want to do.

We can, we can say icon wrapper.

How about that?

And then let’s go with content wrapper again.

And in our icon wrapper, we can put in our icon and I’m going to choose, let’s see, uh, let’s do three different ones, right?

So we can do our alien for one.

All right.

And then in our content wrapper down here, we’re going to do our heading.

We’re going to do our text and we’re going to put a button this time.

We haven’t done the button thing.

I got to show you the button thing.

Very important.

Okay.

So let’s go button primary.

Unless I showed you the button thing up there.

I showed you a little bit of it.

I didn’t show you the dark light, all that stuff going on.

Okay.

Um, all right, let’s put that in and let’s say this is a icon card and let’s make this a paragraph.

Awesome.

And let’s do Ipsum short.

Awesome.

Okay.

So I think our icon card is pretty much ready to go.

This is going to be called text.

That’s going to be called button.

That’s fine.

This just needs to be called icon.

That’s it.

So it just needs to be called icon.

And I think pretty sure, pretty sure my head’s spinning from icon.

I, if you saw the code, you would understand, you, you’d understand there’s a lot going on.

It’s a lot going on.

Okay.

Let’s apply the classes for my icon card.

And maybe I think this does need maybe the data icon.

Let me see.

There you go.

Okay.

That one needs the data icon too.

That’s how you signify, um, the data icon plus the card name or the, I’m sorry, the icon name.

So when we look at this on the front you’re going to see, let’s inspect and you’re going to see, uh, right here, my icon card icon.

Let me zoom in.

Cause this is probably like terribly difficult to read.

So it gave it the class, my icon card, double underscore icon.

So this is all based on BIM.

And if you’re using BIM, which you should be doing, and we have auto BIM and ACSS.

So like, it’s just a no brainer.

So it’s the best method.

It’s an auto method and automatic CSS.

Um, the card framework is looking for the class with a double underscore of icon, right?

That’s how it knows along with the data icon, um, attribute, it knows that’s the main icon, but you’re free.

And let me duplicate this a couple of times.

Okay.

So we have three icon cards.

And by the way, I’m just going to go, let’s, let’s make this one dark, right?

So I’m going to say my card.

I said, my card icon.

It really was supposed to be my, my icon card.

Um, let’s do dark here.

And now that’s going to turn dark.

Look what the button did by the way.

Um, look at the icon did.

Okay.

Some, some things going on there.

All right.

Let’s go back to the front end.

Perfect.

And come down.

So we have a dark icon card.

We have light icon cards.

Our text got smaller.

My text is here.

Let’s open this up.

Let’s go to cards and let’s go to default.

Let’s come down.

So this is what I mentioned that your icon, size, very much like your avatar and avatar cards is independently controllable, right?

So you don’t have to, you’re not stuck with the sizes that we looked at earlier.

You can do whatever you want to do, um, with your icon cards.

And then you can even just like with the avatar say like, Oh, well, I want my icon, my icon cards.

I want those to be circles.

I don’t want them to be, uh, anything else.

Right.

So we can go ahead and hit save on that.

Um, what else do we want to take a look at?

All right.

Let’s go to the dark cards, button style.

So you don’t have to do all of the styling controls for your cards, just like you did for your buttons.

Once your buttons are set up in ACSS, you can actually just reference their, their style.

Right.

Um, so I put a class of button primary on all three cards, but obviously those buttons do not all look the same.

Um, and I’m calling the primary light button style, right?

If I called primary and I hit save, it’s going to go back to being my primary color, which maybe I actually like that.

Right.

And that’s only happening on my dark cards because I’m in the dark cards.

You get to choose which button style you want for dark cards separately as for light cards.

Right.

So I could go back to using primary here.

Now they could actually just be all primary solid across the board.

Right.

Um, or you might say, Oh, when I go to dark card, I actually want, that’s when I want the button outline variant, right?

So I’m going to hit save and then we will see, we should get the button outline variant there, button outline variant.

Let’s refresh.

Okay.

There’s a little bug for you to fix.

Okay.

You will get the button outline variant once this is a little further down the road, but that’s the idea where you can just assign completely different button styles based on the kind of card dark versus light, et cetera.

Um, but this icon card, this avatar card, this kind of card, um, like for a blog post or standard media in it, that could be a video.

Doesn’t really matter.

I’m thinking about some other things for this, like an overlay I think would be fantastic.

Um, maybe even referencing overlays that you’ve already programmed into ACSS.

For example, let’s go here and see if this works.

Uh, this is a figure element.

Let’s make that a figure element.

And then let’s say like overlay of one.

Look at that.

So I have like a programmed overlay, uh, style in this website that I was messing with, which you can actually go to automatic CSS backgrounds and texts, and you can go to textures and overlays and that’s overlay one right here.

So this is the overlay setup for creating that overlay right there.

And like I, you just saw, I just instantly like applied that to those cards.

Now, does that need to be part of the card framework or should we just let people do it like that?

I, I don’t know.

I don’t know yet.

I mean, the problem with that is it’s utility class based.

It’s not really programmatic.

So it’s nice that that’s in a loop, but if you have cards that aren’t in a loop, you would have to add it to the media of every single card in the grid.

And then you’re managing that across the website.

I don’t know.

That’s where I start to feel like maybe we can just make it programmatic where it looks for double underscore media, for example.

And now the media would be in control of the card framework.

And then you could apply an overlay and it would be maybe a custom overlay or one of your predetermined overlays.

That’s always an option there as well.

I’m still thinking through that part a little bit.

But yeah, this is, this is kind of where we’re at here.

If you want dark icons, okay, there you go.

So you throw icons in and you’re like, I want those to be dark.

Oh, cool.

Icon dark.

Now they’re dark, right?

Same thing that you did with icon size.

So if you want these to be in the footer and they need to be small, that’s, I think, what I was going to show down here.

So let me grab, actually, I’ll just do it.

I’ll just do it here.

So let’s do, let’s take this button out of this one.

Okay.

And let’s go with a block.

Okay.

And let’s throw an icon in here.

Excellent.

And let’s choose, this is going to be font awesome brands or actually do I have SVGs of these?

Yeah, we’ll just do this one.

We’ll do this one and YouTube and Facebook.

Okay.

So we’ll do this one and let’s go.

I want to see if it needs the data.

It should need the data icon attribute.

We’ll see.

So let’s grab this one as YouTube.

Let’s grab this one as Facebook.

Okay.

Facebook right there.

Let’s actually do a fill, even though the others are solid, just to show you, like, it doesn’t really matter if they’re solid.

What is bricks doing?

Say, look, I can see the F there and I don’t see an F there.

All right.

Let’s refresh.

Sometimes think, there we go.

Sometimes the canvas loses its mind a little bit.

All right.

Let’s go flex row on these.

Fantastic.

Let’s drop this column gap down just a little bit.

0.25 M, 0.5 M, something like that.

Okay.

So yeah, right now it’s not picking up, right?

Because we do need the data attribute.

So data icon.

Now it’s going to immediately pick these up and let’s put that attribute in there and let’s put that attribute in there.

Perfect.

And now I want those to be small, right?

Now already they’re not because they don’t have underscore icon on them, which they shouldn’t.

They are not going to be the official icon of this icon card, right?

They’re just separate icons, but they still get all the icon styling.

But this would be called something like icon card like share or something like that.

And then what I can do with icon card share, because I don’t want to use a utility class.

Like I could do icon S obviously and make them small.

Okay.

But you’re, you’re using BIM.

You’re not supposed to do that.

You’re not really supposed to combine a utility class and BIM in that situation.

So what you would want to do is come in and this is where you simply hijack and just say icon size.

And then you can still reference icon size S if you want to.

Okay.

And we’ll save there and then we’ll refresh on the front end.

So now I have an icon card where I have these icons down here.

We can even make them links, right?

So if they were going to be real links, custom URL, pop that in custom URL.

Let’s go link, custom URL, bang.

I really wish bricks would make that the like number one option.

Custom URL, bang.

Okay.

Nice.

Save.

And now that I’ve done that, we’re going to see that I have the hover styles on them.

That one didn’t get its link for some reason.

What did it do?

Okay.

Custom URL.

Let’s save.

Let’s refresh.

Okay.

There we go.

But now these should still be within my control.

Like from icons, I’m like, my, you know, my, my, my smalls are looking a little too small there.

Okay.

We should be able to just bang, just bump those up, just dial these in.

You know, I like 20 instead of 16.

Now let’s do 22 instead of 16.

20.

Let’s go 20.

Okay.

Save.

So now I’ve just dialed in my small icon size, right?

My hovers are taken care of for me.

All this is good to go.

Notice that one was a fill.

One was solid.

Doesn’t really matter.

There’s, they’re just taken care of.

They’re handled.

Um, these can be SVGs or fonts or a mixture of both.

Uh, it doesn’t matter.

It’s going to be taken care of for you.

So really, really, really good stuff.

Powerful stuff.

Saves a lot of time.

Uh, I’ll do some questions if you guys want.

This is kind of where we’re at right now.

And like I showed earlier, right?

We’re, we’re having full dark mode, light mode.

Everything is compatible working.

Okay.

I’ll just pay for this card and icon as its own plugin, not even under ACSS, uh, super time saving.

Trust me.

I have spent months of my life making cards for customers.

Yeah.

Yeah.

There’s so much stuff that you just, you, you find project.

It’s like, why am I doing this over again?

I’m just, I’m doing the same work.

Oh, okay.

Card padding, uh, cardboard.

Okay.

Card border radius.

Not to mention guys that this border right here, let’s, we didn’t even talk about that.

Okay.

You start to see how all this stuff maps together and starts to work together.

Um, we have in automatic CSS, a global border and divider system where you set a default border style for your website, which includes the radius, the width, the style itself, the color for dark, the color for light.

You have a light border and a dark border, and you can deploy these wherever you want.

Right?

Well, now let’s go over to cards and let’s go down to borders and look at this use global border style.

It’s like, I already defined my border style.

Why would I want a different one on my cards?

Now, if you do want a different one on your cards, that’s fine.

You just undo use global border style.

And look at this.

You can do a border width, border style, border color, border.

You can do everything manually if you want to, but if you’re like, I already set up my global border style, I just want to use that.

Okay.

We’ll just use that then.

Right.

Um, so it’s starting to link these other areas of the framework in here.

Just like I talked about textures and overlays, put baking those into the card framework where I set up this overlay style over here that I really want to use on my media.

I should just be able to tell the card framework that that’s what I want to use on my media.

And it just does that.

Right.

So, uh, really, really, really powerful stuff when it starts to like one part of the framework is able to talk to the other parts of the framework.

Just like you saw with buttons, we get this whole button framework.

And now when I’m doing cards, I can just call one of those button styles into the specific card style.

And now they’re just playing together.

Right.

Very, very powerful stuff. mixed for me says 80 plus watching only seven likes get to liking.

Yeah.

It’s a really good point.

It’s a really good point.

If you don’t know the streams don’t like themselves, right?

None of these videos will like themselves.

So it does take you clicking the little thumbs up.

The ACSS panel can float outside of bricks and still work.

Um, no, no, this is something that, I mean, we can make it work.

Um, but people have to, they’re asking this about etch too.

And I’ve just started responding.

Name one web app that works in multi-browser, right?

Web apps are not software applications on a desktop.

Like you guys are used to working like, okay, I got VS code open over here.

I got this thing open over here.

Okay.

There, there, or like, um, uh, Figma or something like if you’re using the Figma app, maybe you can have two instances open or something like that, but those are not web apps, right?

When, when you get into web app territory, there are, there are limitations.

Uh, okay.

Can we have light and dark versions for the icons, light and dark versions for the icons?

Yeah.

That’s what you, yes, that’s, that’s what you’re looking at right here.

So see, these are dark and these are light.

Uh, if we look at the card down here, see, these are, it’s a dark icon and then here’s a light icon.

Now, what if you wanted light icons in your dark cards?

You know, if you’re like a psychopath like that, right?

Um, I’m just kidding.

It’s a joke.

Uh, let’s go to, uh, let’s see, icon style.

So I’m in my dark cards, icon style, and I can just say, I want the light ones and save.

And now you’re going to get the light icon style.

Okay.

So you can call either one or you could say custom.

Now custom isn’t set up yet, but you’re going to be able to manually style the icon and the icon card.

Uh, but you can call in either of the styles, dark or light into your icon cards.

Uh, and if you’re wondering about like how you configure, you know, you’ve got two ways to really dial in your dark card.

Okay.

I already showed you where you’ve got all the colors available to you.

Right.

But if you’re like, I just can’t really dial it in exactly how I want.

Well, what it might be is a problem with your actual color shade that you’re using.

And at that point, you might want to just change the shade a little bit, which is where you can go over into color palette and go to primary.

And, uh, I want to do semi light here.

Okay.

I think that’s the one that we are looking at and let’s go to 45.

We might not be able to see it until we save.

And is that semi light?

Did I choose?

Did I choose semi light?

I don’t know if these are math.

So these local properties, we have to bake into the root of the color scheme system in order for them to be controllable that way.

Uh, let me see which one I use.

Let’s go to card.

Let’s go to dark, semi dark.

Okay.

Uh, so color palette, primary semi dark.

Okay.

Now there we go.

We can, we can do it.

Okay.

So you can just slightly change your lightness.

You can come over here.

You can start dropping down like saturation.

If you wanted to, I wouldn’t want to touch the hue very much because the hue is obviously the actual, the color, right?

Um, your, your hue really matches across all of your shades for the most part, when you see different colors, right?

But they’re the same hue family.

The only things that are changing are their saturation and the lightness value.

And so you have full control over that, right?

So you can, I want this to be dark.

So I’m going to dial it in this way.

And then let’s do, let’s do that.

So I get a completely different look.

And then what I’m going to do is go back to my cards and now dark cards.

And I’m going to go to icon style dark.

Cause I don’t like the way that this dark icon is looking.

So I’m going to go to icons, dark icon styles, and then icon background.

And I can start to play with this.

Um, we can go into semi light or something.

I don’t even know.

Just going to change it.

And now it updates, right?

So now I have more contrast on that icon style.

You know, you can sit here and just tweak, play, whatever, just dial in whatever look you’re, you’re going for.

Um, but, and you still have visual live preview of almost everything that’s involved here.

So that’s good.

All right.

It says more questions, please scroll up.

All right.

Let me see.

Let me go to hashtag Q.

Have you guys been using the hashtag?

Oh, it looks like you have.

Okay.

All right.

How soon sure cart in frames?

Um, I’m waiting on their, their new version that it all hinges on their new version that they’re releasing is off topic question.

What software do you use for local hosts now?

Or is it still local WP?

Uh, no, I’m using Docker.

Um, it’s all linked to VS code and yada, yada, yada.

So, uh, but I don’t use like a separate local kind of thing anymore.

Okay.

Any thoughts on fluent community seems to work?

Great.

Haven’t looked at it yet.

Uh, is it okay to use pixels in the ACSS side fields?

I always use rim.

I was under the impression it is a must.

Um, yeah, this has been explained, uh, since like day one, it’s, it’s worked exactly the same.

I think this is in the docs when you read on typography.

Uh, but everything that references a pixel value and automatic CSS is automatically converted to rim.

Um, automatic CSS does not use pixel units for anything.

And it’s, it’s converted to rim based on your root font size right here, which is vastly more powerful because it actually makes it safe to change your root font size.

If you put actual rim values places, you can never change your root font size because all of those rim values will break.

Um, if you have pixels like this, which auto convert based on the root font size using a variable like automatic CSS does, everything recalculates immediately when you change your root font size and nothing breaks.

Uh, so this is much safer.

Plus people don’t know how to think in rims.

It’s actually a, uh, it was a, I wanted to have this debate live, uh, cause I won’t say the person’s name.

Uh, they actually haven’t been around for a while, but they were arguing with me online about, about thinking in rims.

Okay.

And they were like, cause I, I was making the case that you need a reference value.

Like you can’t just be like 1.2 rim.

And, and they were saying, yes, you can, you, you, you could just think in rims.

And I’m like, you can’t think in rims.

He’s like, you can.

And I’m like, you can’t.

And then I started coming up with these examples and I’m like, let me give you, let me give you this example.

It is actually a noise, the shit out of me.

Okay.

You call up a pizza company and you’re like, ring, ring, ring, ring.

You never been to this pizza company before.

And they say, you know, what, what size pizzas do you, do you have small, medium, and large.

Okay.

Fantastic.

How much does the large feed?

Wow.

It depends on how many people, how much people eat.

Okay.

But what we can tell you is it’s eight slices.

The fuck does that do for me?

What does that do for me?

I don’t, are they small slices?

Are they big slices?

How big’s the medium?

I don’t, there’s no reference point.

These are relative values, right?

Small, medium, and large is a relative value.

Eight slices is a relative value.

I don’t know what, what you didn’t tell me anything about the slice, my guy.

Like I need to know.

You can’t think in relative values.

Rims are relative values.

You need some sort of reference to what is that going to like end up as, right?

A static, it has to be mapped to some sort of static value.

So we think in pixels, but then they get converted to rims and that is based on your root font size.

And as we know, you know, one rim at a hundred percent is very different than one rim at 62.5%.

And this is why you can’t think in rim values.

So, uh, yes, that was the, that was a fun, it’s, you know, I wanted to have the debate live, public, whatever, but, uh, it never ended up happening.

Okay.

Uh, let’s see.

Can we get like card primary to follow primary colors, card secondary to follow?

I don’t think you would want to do that.

Um, it’s a little bit over engineered.

I think you, you have, as you notice, this dark is using my primary colors.

You’re, you’re rarely going to have like four different card styles or something on a website.

Um, now if you do right, what you will often see sometimes is there’ll be like an accent color or something.

Right.

And so, and it’s, people will do the, you know, they get all these cute ideas like, well, yeah, you know, blog category one, I want it to be orange and blog category two.

I want it to be yellow.

And this, these are the ideas that people come up with.

And that is totally okay because you can use what you should use is not all these different card styles.

That’s not what you should do.

It’s not what you should do.

You should come in and let’s, let’s see if we can kind of just do this on the fly.

Um, so we have, uh, my card icon.

Okay.

So you, and by the way, if you’re looping through these things, that’s probably the best way to do it as well.

Uh, but you would come in with something like data attributes and you would say data category is birds or, uh, or data category value is birds.

Right.

So I’m going to save here.

And then you can imagine like over here, this, this card, uh, would be data category.

And then this would be like trees.

Okay.

So we’ll save, we’ll go front end.

Now, a lot of people don’t even know what the hell that just did.

So let’s go learn that first.

Um, let’s go to, all right, there’s the card right there.

So look how this one says data category birds.

And this one says data category trees.

Now what you would want to do, and you can do this with primary, secondary, whatever.

Okay.

Um, what you want to do is now hijack one of the card styles when this data attribute with this value is present.

Right.

So we’re going to look for example at, uh, let’s do it.

Let’s do a, let’s say we can do a custom border style here.

So let’s do a automatic CSS.

Uh, and again, I haven’t tested any of this.

We’re just doing things on the fly.

So let’s do cards, uh, default let’s do, I don’t want to use a global border style.

I want to go five pixels.

So I actually haven’t even tested this custom border style yet.

Uh, border color is primary.

Okay.

And let’s save there and just see what we get.

Okay.

Look at that.

So all it does, I didn’t say it was going to look good.

Okay.

I, but they all look like this now.

So I just did a custom border style.

Now let’s go in and see how that’s done.

So we inspect this.

Now there will be full documentation on all this.

So you just read the documentation and you’ll know exactly what to do.

Right.

Uh, but you come in and you’re going to see that border width.

So you have card border width, which you can play with card border style, card border color.

Okay.

Card border color.

All right.

So we have data category equals trees.

So on my card icon with a data category equal to trees.

Okay.

And all this little I does right there is it makes the word trees, the capitalization of that doesn’t matter now.

Okay.

Um, so what we want to do is we want to do a border check of five pixels, solid red and see, Oh, there’s that tree card.

Look at it.

Look at that tree card over there.

So you can say, whenever it is trees, I’m going to do a, what was it?

Card border color.

Right.

Uh, let’s do red.

Look at that.

And so now you could say, I want it to be, I don’t even know what colors I have activated here.

So secondary, let’s just use secondary.

Right.

Uh, so we’ll say secondary and then I’ll save.

And then you can also duplicate that and say, ah, but when it’s, I don’t even remember what the other one was because I come up with stupid names and then forget them.

Okay.

This was birds.

All right.

So data, data category of birds.

So I’m going to go here and then this is going to be birds.

And when it’s birds, it’s going to be primary light or something like that.

Save refresh.

Okay.

So this one’s primary light.

Cause it’s birds.

And this one’s green because it’s trees.

And then this one’s the normal one because it’s the normal one.

This is how you handle these different styles.

Because here’s the other thing too, is you’re, you’re only changing one or two things perhaps.

Right.

And so you just hijack the variables for those things.

And then you hijack them based on something like a data attribute, which can actually be put on dynamically.

So when you have something in a loop like this, watch this, uh, these article cards.

So I’m going to go to attributes and I’m going to say data category, and then I’m going to go to value and we’re going to say post terms category, and I’m going to save, and then we’re going to refresh.

And this is actually going to output the category names.

Uh, oh, it’s giving, hold on.

Let’s go to, uh, I think we have to do plane.

You got to do like colon plane.

I think maybe let’s try that.

So let’s go inspect.

And look at that.

So these are uncategorized.

And so now watch, I can say, what, what if you wanted a visual indicator?

Let’s go to article card, visual indicator, uh, that you haven’t categorized something, right?

So data, uh, what did I call it?

Data category.

Dude, I, what, what am I calling these things?

Okay.

Let’s go.

I have the worst short-term memory in existence.

Okay.

Data category equals uncategorized.

Okay.

I border card border color red.

Okay.

Save refresh.

Ah, they’re all red.

Now I’m going to go in and I’m going to edit one of these, uh, posts.

Okay.

So watch this.

We’re going to go posts, posts.

Uh, let’s go to categories real quick.

So, Hey, watch this trees.

Okay.

And let’s do birds.

All right.

There you go.

Now let’s go posts, third post.

This is going to be in the category of birds, not uncategorized.

Right.

Let’s go back and let’s put this one in the category of trees.

And then we’re going to leave the other one uncategorized.

Okay.

And then here’s the thing about this.

If you want, so I mapped, let’s go down here.

Very important.

I mapped these rules to the, the class, my card icon.

You would not want to do that if you wanted this to happen globally.

Okay.

So let’s go back here.

Automatic CSS, global CSS. let’s take this out.

Let’s take the roots away.

Okay.

Save.

Okay.

And let’s see if we can get this to work.

Look at this.

So we have birds, trees, uncategorized.

Right.

And now that’s happening.

Look at this.

It’s happening globally everywhere.

Right.

So you could do a lot, a lot, a lot with these, with this data attribute, hijacking styles kind of thing.

It can be dynamic.

It can be like, you can get a lot of magic happening.

You don’t need like a thousand card styles, right?

You can do the same thing with buttons.

You can do the same thing with icons.

You can just put, use a data attribute that makes it some specific thing that now it’s in its own category and hijack one little part of the styling.

You can leave all the other styling the way it is, hijack one little part that you want to be different and you’re off to the races.

Let me go back to chat and see what people are saying about that.

Will existing frames be retrofitted with this new card system?

Yeah.

Yes.

Let’s see here.

Make sure your questions have cues attached to them.

Did you just arrow up and down in the variable selector?

Uh, yes, I did.

Yeah.

If you’re here.

Yeah.

If you’re like, um, cards, dark cards right here.

Yeah.

Yep.

It, it knows what color family you’re in and it will just cycle through, uh, all of the options in there.

So you don’t have to retype them or know what they’re called.

You can just cycle through them.

And then if I went into like secondary, right?

Um, let me do secondary.

Good.

Oh, that one’s buggy.

Secondary light.

There you go.

So we’ll take a look at that.

I think if you’re on a shade already, it’ll cycle through the other shades.

If you are not on a shade, it’ll shit on itself.

And that’s, uh, yeah, exactly.

See, I can just easily make these secondary dark, secondary ultra dark.

You can go back into whatever, whatever you want to do.

I’ll, I’ll leave it at that.

Um, let’s get rid of that ugly border style too.

Let’s go back to default.

Let’s go to, uh, use global border style.

Let’s stop doing all this custom stuff.

Notice I didn’t clear the inputs for custom.

Okay.

But they, the styles went away, right?

Um, if I go back, they’re still going to be there.

So if I wanted to like, you know, come back to whatever I was doing custom at some point, I don’t have to clear these out.

I can just turn them off essentially, and then go back to whatever my global border style is.

Um, so that’s nice.

Um, okay.

Let’s go to back to hashtag Q.

Let’s see what we got.

All right.

How are we managing icon sizes in mobile versus desktop versus other dimensions since icons on mobile, got to be bigger sometimes to account for fat fingers or smaller.

Is it just, uh, if it’s just a market icon.

All right.

Good, good, good question.

Um, let’s, let’s play with this real quick.

Like one thing that I would think to maybe do, uh, is like a min function or a max function.

Um, let’s see if we can, if we can handle this, right?

So let’s go to icons and let’s go to icon sizes.

And we are actually, let’s do maybe in that icon card.

We could try it on both, but let’s try it in the icon card first.

So let’s go to cards, um, icon size right here.

Let’s do a min.

All right.

And let’s do 50 pixels and then five VW or something.

And maybe, yeah, let’s do, let’s try VW and let’s just save.

Let’s see if it blows up.

Okay.

It shouldn’t, you know, it should, it should be able to handle it.

Let’s just start to, why are we, what are we doing?

What are we doing?

Okay.

Let’s go here.

Bring this down.

Look at the icon size.

Look at the icon size.

Let’s go down back to where it was.

Look how much smaller that icon is.

I mean, I just pulled that out of my ass.

I just guessed out of my ass right here, but look, I mean, that’s now I, I would argue it’s maybe getting a little too small, right?

Um, so this is where I can just quickly come out of here, go back and automatic CSS and say, so you don’t know what a min function does.

A min function chooses the minimum value.

And this is a, this is a clusterfuck in your head, especially for dyslexic people.

It chooses the minimum value, which effectively sets a maximum that the size can be, but it will scale down to the minimum, right?

So 50 is, well, either one, depending on the screen size, you always want to pair it with one static value typically and one relative value, right?

Um, so notice it was getting a little too small.

So I can say like 7.5 VW instead of 5 VW.

And it is going to just constantly choose the minimum, right?

So right now on this wide screen, 7.5 VW would probably be bigger than 50 pixels.

So it’s choosing 50 pixels, but on a small screen, because 7.5% of a small screen is very small, it, that would be smaller than 50 pixels.

It’s going to switch to using the VW value, right?

Um, so this is going to naturally just scale this.

A lot of people think like clamps are the only way to scale things, but, uh, dimension stuff very often is better to use, uh, uh, like a min function, right?

Look at it.

You can see it scale.

I wish it wouldn’t jump around as I, as the grids fill themselves out, see it scaling right there.

Now it’s going to go from, and we can actually measure it, right?

Inspect.

Let’s go with, uh, 50.

Okay. 51, right?

And it’s going to go down below that.

Inspect.

Okay.

47.

Let’s get up out here.

Okay.

75.

And it never gets bigger than 75.

Now, why is it 75?

I don’t fucking know.

Let’s go in here and figure out why, uh, 7.5 VW.

I don’t, maybe it’s something to do with the math.

Um, I’ve never tried a min input and any, or a min function in any of these inputs before.

Let’s see what it’s outputting is.

That would be probably the first good thing to check.

Let’s go in here.

Oops.

Let’s get this one going.

Okay.

Uh, icon size, min, actually is a correct, that is a correct value.

Yeah.

There’s nothing wrong with that.

Nothing wrong with that.

Hmm.

Okay.

Maybe my brain is just not, um, parsing that properly right now.

Uh, but that’s what I would do.

That, that is the easiest way to get responsive icons.

I mean, obviously it’s working, right?

Um, that’s the easiest way to get responsive icons.

And you can already do that with the current infrastructure that’s in place.

Okay.

Uh, let’s see.

How are managing icons?

Okay.

I’ve did that for the icon list.

We can’t work with pixel offset since the font size and spacing will affect it.

And if we manage it globally, that can mess up in other icon lists.

Right.

Uh, no, cause you can always override it per icon list.

So you’re, you, you have a default icon list, which is almost every time you have an icon list, that’s what you should be doing.

Cause you want consistency, right?

It’s important to think about what, what is the main 95% use case?

What do we want that to look like?

And then if you have a use case that’s different from that, you can simply hijack the variables because everything is variabilized.

So in that one-off instance, you could just hijack the variables and do whatever you want to do.

The offsets are done with variables.

You can hijack them.

The icon size is done with variables.

You can hijack it.

You can do whatever you want to do.

You don’t need to build it all into the framework because you’re, you’re building too much infrastructure for edge cases.

The framework is supposed to handle the 90%.

And then the 10% leverages the framework when a framework is done correctly, like where everything is variabilized and you could just hijack one-off little pieces and you’re still leveraging the framework, but you’re not over-engineering the framework.

Okay.

Um, would it not make sense to center the icons inside the list item using flex?

Really good, uh, question.

The answer is no.

Everybody would, that you would think that that is the case.

Uh, the answer is objectively no, and I’ll show you why.

Okay.

Um, let me see if I can demonstrate it.

So let’s go to icon here.

We’re going to come into this content.

This is why right here.

This is a proper icon list.

Okay.

Let’s reload.

This is a proper icon list.

Now it doesn’t look good because this is all, this is wide as hell.

All right.

Let’s go, uh, width and let’s bring this down something like this.

Okay.

And at this point we would want more gap in our icon list.

Uh, we’ll just use a variable here.

So we’ll just do a space M something like that and let’s refresh.

Okay.

So here’s an icon list.

You don’t want this icon.

Here’s what would happen if you used flex and this icon, I would argue now needs to be probably a little bit larger.

So we could go in and say icons, icon list.

So this is what your icon lists were going to look like.

Um, you can do something like this.

And then this is where this offset really comes in handy.

Uh, you could actually align to the top if you want.

That’s acceptable, right?

What you wouldn’t want is that icon floating in the center of this paragraph, which will happen if you use a line to the center with flex.

Um, and what will often happen when I go back to using the, uh, single line list items, like we had before, you will see people align flex to the center because all of their list items are one line.

And they’re like, oh, this is the easiest way is just flex align center.

And then on a smaller screen, a couple of those lines will break to a second line and the others won’t.

And now you’ll have icons that are way off alignment, uh, that you didn’t even realize was going to happen.

So flex center align center with flex is a disaster for icon lists.

Um, you want it to be positioned somewhere near the start, like the first sentence, uh, typically.

Uh, and I would also argue here that this column gap needs to be a little bit bigger in these list items.

Okay.

So let’s do 0.75 M or even one M something like that.

And let’s refresh.

We’ll save this.

We didn’t save it.

So yeah, I, I would avoid, I don’t know why it didn’t save.

Let’s go back.

All right.

Let’s go icon lists.

Uh, or maybe it did save might be another little thing we need to look at here.

Yep.

All right.

It’s not keeping its, uh, icon size, but you get the point, right?

And even, even when they’re small, the alignment is fine.

And let’s actually take one of these to a single line.

So there’s just a little bit of an offset that we have to, uh, play with.

I like, I, I think you could dial this in where it works for both.

Let’s go to icons, icon lists.

Let’s go with this offset, something like that.

So now, that’s proper alignment.

Okay.

Cause it’s aligned.

Essentially the center of the alien head is the center of the first sentence, which also works when it’s only a single line.

This is really how you want to do your icon lists.

Now, let me see if I can get it to flex a line to the center.

Let’s go with, uh, this, this is going to be the fucking problem you run into.

Look at that dog shit.

That is not, this is not what you want to have happen.

Okay.

Cause it looks great.

Look that it looks great for the single line, but the minute there’s more than one line, it’s like, well, what is that icon doing?

Why is it just like floating there?

That doesn’t make any sense.

Right.

That’s what you want to avoid.

Okay.

Remember the 45 degree banner tutorial long ago, would you be willing to add card banner functionality?

Uh, it’s already there.

I mean, that that’s already kind of what it was designed for.

Let’s just put in a, uh, text.

Okay.

And let’s say we’re going to do a span here and we’ll just say new something like this.

Uh, it’s called a, it’s called a ribbon.

Okay.

Ribbon, uh, and then ribbon top, right like that.

Okay.

And then I believe you have something like a ribbon offset.

So you can go this profile card.

This is where, you know, you have to, I have to read my own documentation half the time because I hardly ever use these.

Um, let’s do ribbon offset one M one M.

Okay.

Let’s go to automatic CSS docs and let’s go to ribbon, uh, ribbon.

Okay.

Ribbons.

And let’s come down position relative overflow hidden.

Those things are already on the card.

Okay.

You’re already good there.

Add ribbon, ribbon, top, right, top, top, right.

So you have ribbon offset.

You have all these right here.

Okay.

Uh, is that all of them?

Let me see ribbon.

Okay.

These are all the ribbons you can play with right here.

So we’ll just paste these in.

There you go.

Okay.

Select them, tab them.

All right.

I was ribbon offset.

All right.

We’re going to put that in.

Let’s see.

Offset minus two rim minus one M.

I don’t know why the offset’s not working.

We’ll look at that in just a second.

Ribbon width.

I don’t think I need ribbon padding.

I don’t think I need ribbon background color.

I want that for sure.

Okay.

Primary ribbon, text color, text size, text shadow.

Let’s see what’s going on here.

Ribbon offset, ribbon profile card, ribbon.

Okay.

Let’s take a look at this.

Inspect, uh, span ribbon, top, right ribbon with important ribbon, uh, ribbon offset, ribbon offset.

That’s actually working correctly.

Ribbon transform.

Yeah.

Yeah.

That’s working too.

Ribbon width 30 rim.

Um, I wonder if it’s the over, I wonder if there’s some weird overflow thing happening, um, or a Z index thing happening, perhaps.

I’ve never done this in a, in a car.

Let’s do this.

Let’s go into a, we, we need to do a little science experiment.

Let’s go section here and let’s just do a ribbon here.

Okay.

Uh, let’s go to container.

Let’s go to height, uh, 40.

Doesn’t really matter.

Uh, let’s go BG of anything.

Uh, well, not primary let’s go neutral.

Okay.

And then let’s go ribbon, ribbon.

Okay.

Uh, and let’s go ribbon top, right?

Okay.

And let’s go, this is a ribbon.

Excellent.

And let’s go ribbon background.

Was it background or background color?

Maybe background color.

Yeah.

Okay.

All right.

So this ribbon’s working.

All right.

So what we need to do is diagnose.

I’m, I’m wondering if it’s something with the overflow clip, the property that’s on the cards.

And this is why we got to do all these experiments, right?

Um, okay.

That is a, that is a ribbon that’s working.

Let’s check it on the front end.

Okay.

That ribbon is working.

So the question is, why is it not working in the card itself?

So what we’re going to do, let me actually do this.

Let’s bring, uh, cards, mix ins.

Okay.

Cards, mix ins.

We want line height.

Uh, where is it?

Where is it?

Where is it?

Where is it?

Where is it?

Okay.

Isolation of isolate is a potential culprit.

Overflow of clip is a potential culprit.

Okay.

Save, save, refresh.

Okay.

And re fresh here.

Okay.

No, that did not fix it.

All right.

Let’s see.

Span.

We want to figure this out.

What is inline size ribbon width?

That is all good.

Um, let me see it.

Okay.

All right.

Diagnostic time.

Live diagnostic check.

Okay.

The inline size is definitely necessary.

Inset block start ribbon offset minus two rim.

Why?

It doesn’t look like it’s offsetting.

Oh, well, let’s try this.

Let’s just, oh, wait a minute.

Hold on.

No.

Okay.

Let’s bring this down.

The only thing I did differently down there is I put these on here.

Ah, okay.

I wonder why they don’t pick this up from the parent.

You would think that they would pick up from the parent.

So let’s go for, uh, 70, 80, something like that.

Okay.

Good.

So let’s save.

That was the only, that seems to be the only problem is I was putting the things on the parent on the profile card.

Um, they, I mean, I would think that they would pick up from there.

I would think that they would pick up from the parent.

Okay.

Now I want, I want overflow.

Now we should be able to bring these back.

I don’t think these, these are not interfering.

Okay.

Let’s go here.

Save.

Good.

Okay.

So you don’t need, um, ribbons in the card framework because ribbons are already in the framework in general.

Right.

Um, so any, any time you want a ribbon on a card, you could just, it was, it’s as easy as throwing it in, putting the ribbon class on.

Um, now I, I don’t know if there’s a ribbon recipe.

I don’t know if I ever put the ribbon recipe in.

It would be at ribbon.

If there was, uh, let’s just, let’s just try that real quick.

So let’s go to, because there you are using utility classes there.

Um, I, I would, when you do it in a loop, it’s not a problem.

Right.

Uh, but let’s go, let’s get rid of this, get rid of this.

Okay.

And let’s just see if there’s, if there’s not, okay, there’s not, uh, I will make one.

So this would allow you to map that ribbon, all that ribbon stuff to a custom class, uh, where you could do like profile card double underscore ribbon, and then you expand the recipe right here.

And now you’re not using utility classes at that point.

Um, so I’m going to bring up linear here.

Okay.

Uh, let’s go to cycles current.

Here we go.

Let’s go ribbon recipe.

Okay.

Okay.

Okay.

Okay.

All right.

Good.

Great question though.

Was it great question?

All right.

Did you see your test command UI?

What do you think about it?

Uh, just very briefly for like 18 seconds.

Can you please show again how you made the card dark?

Yeah, yeah, yeah.

Super easy.

Um, let’s stretch this.

So they’re all the same stretch.

Okay.

So see how this one’s dark.

Watch this.

I just take whatever the card is called double dash dark.

Okay.

Now it’s dark and all of the styles, including the avatar border and all of that changed in the link, all of that changed to the settings I have for my dark card, um, which we already showed how to control, but yeah, it’s, it’s as simple as that.

I can take it off.

If I want, it all goes back.

How would you call and display new ribbon with a custom field?

Um, so you would do it like this.

Let’s see if we can do this on the fly.

So you need a control point for it from WP admin, right?

Uh, so I don’t have Let’s do this account my account.

Okay.

Let’s just get this installed real quick.

Where’s downloads, downloads, downloads.

I hate their dashboard and this is all EdD nonsense.

Uh, I don’t want to burn my license key.

So one second, let me go to orders.

You can never find the keys.

It’s like, you can find a license.

No, no, no.

I actually don’t need the license.

I just need the file.

Okay.

Let’s, but the file is not like on the page.

Uh, do I have to go to orders first and then click on an order and then no, still, still can’t, still can’t find the download.

Okay.

This is fantastic.

There it’s under licenses.

Why the downloads are under licenses?

That’s great.

First place I would have thought.

Uh, all right.

Upload.

We go downloads where, where did it put it?

Let’s try again.

Downloads.

There we go.

Okay.

Install.

All right.

So what we’re going to do is, this is how I do it.

Typically we can actually do it with a, uh, probably a taxonomy maybe is even, is maybe even better.

So let’s, let’s try this.

Let’s go to ACF taxonomies and you’re going to create a taxonomy called like display.

All right.

And you could use this for a lot of different things, uh, display display.

Okay.

And then you assign it to different post types.

You could actually assign this to multiple post types.

Um, so let’s make it public, whatever, whatever, whatever.

I don’t think we actually, I don’t think it actually matters.

So let’s go to public or post display.

And then you could say, um, new, you could do hidden.

You could do new.

You could do, you could do a whole bunch of things like to control different display properties of different things on your site.

Um, so I’m going to create one called new.

Um, I’m going to create one called hidden.

All right.

Like we could do, I’m just to kind of show you like some things you could, might be able to do with it.

Um, now what I can do is go to my posts.

And if we have a post that is new, right, we can go down here to display.

Uh, one thing you do want to do, I, I will pay them money.

I will write a check right now.

ACF.

What do you have to do to, to make this happen by default?

I always, you have to go to advanced configuration.

You got to go to, um, or no, sorry, right here.

Hierarchical.

Okay.

There you go.

Just to get some check boxes.

That’s it.

That’s all I want.

Some check boxes.

Okay.

Let’s go to posts, a third post.

And see, now I have check boxes down here and I can say new and I can see all of my options.

Fantastic.

Um, let’s go ahead and hit save here.

All right.

Um, now let’s go to, we’re going to have to do this on our post up here.

So let’s, let’s recreate the ribbon again.

See how we do this.

A real little refresher, right?

Uh, let’s go text.

Let’s pop that in.

New.

We just put the text on the ribbon that you want it to be.

You can have multiple ribbons if you needed multiple ribbons.

Okay.

Just put multiple labels on the same, uh, ribbon.

Um, then you just manage your conditions.

You’ll see what I’m talking about in just a second.

Uh, but you go ribbon, ribbon top, right.

I, I really think we should probably assign a color by default to that.

We never have, but, um, you probably should.

So let’s go take this out down here.

So again, we’re going to go ribbon background color.

We’ll go, we’ll stick with primary.

It’s working pretty good.

There’s a different size cards.

We have to control our ribbon offset.

Let’s go with 70 pixels, something that works for this card.

And it works for the new badge.

You can go like 80, 90, something like that.

Get it real tight up into that corner.

You know, let’s go ahead and hit save here.

And now what we want to do is we want to put a condition on here and we want to say like the category, um, post or do we have to do dynamic data first, dynamic data and then category post terms category.

I think it’s a different, when did they start doing this?

By the way, when did they collapse all of the options?

Uh, can we, can we undo that?

Cause like, I, I hate having to click and open these.

Um, I think it’s term term, term, post terms display.

That’s probably what we’re, what we’re looking for.

So show if it is new, right?

And I don’t know what the output is.

If it is caps, not caps, if it matters, let’s see if this works.

This is what you want to do in theory.

I also want to do this.

I want to just, we can double check if our output is working.

You can come down here with one of these sneaky data attributes, data, uh, do data display status, something like that.

Um, and then you can go dynamic.

Now it’s display post terms display.

And then I don’t know if you want to do these as plain or have to do these as plain.

I don’t really know.

All right.

Let’s look at the front end.

Let’s inspect this and see if we’re getting the output properly.

Okay.

Oh, look, display status is blank.

All right.

So this is why I did this.

Cause I, I didn’t see the ribbon.

Like I thought I would on the new.

And then I was like, all right, let’s check our display set.

It’s not outputting any value for the display status.

So display status, post terms display.

Let’s take away the plane and see what that does.

Okay.

Display.

Oh, there you go.

Right there.

It’s actually on the first one.

Oh, a third post is first.

I’ve, my brain went to the third post cause I did the third post, but our loop is backwards.

Okay.

Um, so it is outputting and display status and we do need plain.

All right.

Display plain.

Cause it’s outputting a URL, which we don’t want.

So let’s go in there.

So there you go.

So is new.

Right.

Um, so what I need to do is take that and then go back to my condition on my ribbon.

This was my ribbon right here.

Um, so we’ll go back to my conditions and, um, well, it actually should be working the way we set it up.

I don’t think show it if post terms.

Oh, right here.

Post terms display plain equals new.

Cause essentially if it’s outputting a link, which you don’t want, it’s not going to match this right now.

Let’s go to the front end.

Hey, we have a new post.

Okay.

So you can mark things as new.

You could also come in here and, uh, on our loop right here, article card, you could add a condition and you could look for dynamic data.

Again, dynamic data.

And you would say, um, display post terms display, and we need to plane it.

Okay.

Uh, is not equal to hidden.

Right.

So display it if it’s not equal to hidden.

And now what we can do is maybe go to one of our posts and go to a second post and say, you sir are hidden.

And there it goes.

It’s gone from your loops.

Right.

So this like taxonomy of, uh, just controlling the display of various things.

Um, I’ve created ones called hide from loops where it, you know, it just hides it from loops, but it’s still appears in navigations or wherever else.

Um, you know, there’s a lot you can do with conditions, with custom taxonomies, uh, with these ribbons and look, I, how long would it have taken you to make that fucking ribbon?

I’ll tell you right now, if you don’t know how to make a ribbon, it would have taken you a fucking hour or two.

Right.

Now, maybe with chat GPT, you get a little bit further faster, right?

Still a pain in the ass.

If you know, Hey, automatic CSS has ribbons built in.

You could just go, you just let automatic CSS do it.

Very simple, very easy.

These are the things that, and again, I don’t, you don’t really find that in other frameworks.

You don’t find, you know, ribbons just hanging around in other frameworks, but we look for things that are, you know, pains in the asses.

And it was like, Oh, we’ll just solve that for you real quick.

Okay.

Can we combine this card feature with a slider, uh, or even a logo slider with icon feature?

We can combine this card feature with a slider.

Yeah.

Yeah.

I mean, you could, you could throw these in a slider all day for sure.

Yeah.

That won’t impact, uh, that won’t impact it.

Okay.

Let’s see.

Can of worms warning.

Will existing frames be retrofitted with this new card system?

Yeah.

Yeah, yeah, yeah, yeah.

They, they, they will.

Um, okay.

We have light and dark version of the icons.

Okay.

We already did that.

Make sure any questions have hashtag Q on them.

Uh, yeah, we got into a lot of different territories today.

Like, you know, we expanded outside, but look at, look at the consistency of, of, I mean, my ribbon matches my button.

And if you, if you wanted your ribbon to be dark, I mean, it’s as, it’s as easy as you have full control over your ribbon, right?

Um, cause again, everything is variabilized and then you don’t even have to know the names of your colors really like, or the values of your colors.

Obviously it’s just like, all right, let’s call it a different shade.

You know, um, you got ultra dark right here.

Put an ultra dark ribbon on it.

Um, you, you could do, you, you could do probably a gradient, you know, um, whatever you want to do.

You even have like a, I think, yeah, you could control the shadow ribbon shadow.

So check this out.

You can go ribbon shadow and you could do whatever you want here, like 60 pixels.

You can make it super ugly.

Look at that.

Nice little red, nice little red shadow on your thing.

Or, or you could say, I want it to be in my, like, I don’t want it to be a black shadow.

I want it to be an ultra dark shadow.

Uh, that’s trans 20.

Okay.

And now it’s a, it’s a shadow inside of your primary family, ultra dark, dial it into whatever you want.

It’s easy.

It’s easy.

You’re always working within your tokens.

It’s just very tokenized workflow as a very friendly, efficient workflow, right?

Yeah.

Variabilized.

Yeah.

Everything, when everything is variabilized, um, and look, I’m doing this on the ID level.

Like I’m not even touching my, my classes.

Right.

Um, and we might even put a ribbon control in the dashboard for like, what is your default ribbon style going to be?

Uh, and then people will always ask like, you know, what about if I’m not using ribbons?

I don’t want to, I don’t want to load those classes.

I don’t want to load.

Okay.

It’s fine.

Go to options, utility classes, come down and corner ribbons, turn it off.

All the code goes away.

All the infrastructure goes, it’s not there anymore.

You don’t need to load it if you’re not going to use it.

Um, so yeah, it’s there if you need it and if you don’t want it or don’t need it, it doesn’t have to be there.

Super easy.

Okay.

Uh, what else?

What else?

We got, I got a little time.

I got 10, 15 minutes.

You can ask whatever you want about ACSS, about web design, about card frameworks, icon frameworks, whatever.

Let’s go take this off because it’s bugging my OCD.

Uh, let’s do that.

There we go.

Get that list under control again.

That’s nice.

Okay.

I mean, you do a lot with this, by the way, this has only been under development for nine, like eight, nine days, right?

Um, there’s still a little bit more to do.

And then of course, when it comes out this week and you turn it on and you start playing with an experimenting with it, if you’re running into any issues, uh, you’re going to report those and then I’m going to clean them up and then we’re going to expand this a little bit more.

And then very soon, this is going to be one of those, one of those things.

I’m just going to predict it now where once you started building websites with the icon framework and the card framework, it’s going to be another layer that you’re like, I don’t know how we actually did this before this.

Right.

And, and you end up working on a site where the card framework is not on or the icon framework is not on, uh, or ACSS doesn’t exist.

And you, you just want to jump off a bridge face first because you’re like this.

I don’t want to do all that work.

I don’t want to do all that work.

I just, I used to have it done for me.

Why isn’t it done for me now?

Uh, and you immediately are like, how do I install ACSS here?

How do I, how do I go to that framework thing?

Um, it’s just tremendous.

This and that it, everybody proves it to themselves when they try to, they use it for a little bit and then they go try to do a site without it.

And immediately they’re like, fuck this.

Uh, going back.

Uh, you just, it’s, it’s too, it’s too helpful.

It’s too helpful.

I asked previously, but didn’t get an answer ACSS for non WP websites.

Um, it’s something we’re going to talk about.

Uh, but right now it’s, it’s a WordPress plugin.

So there’s a lot to think about.

There’s licensing implications.

There’s dashboard loading implications.

There’s, um, framework implications because there’s a lot there that is, um, based on this working in page builders.

You know, uh, a lot of it is page builder agnostic and doesn’t rely on it being a page builder, but there are some parts of it where we would maybe need to refactor a little bit just to clean things up.

Uh, yeah.

So it’s not an easy, it’s not an easy, it’s not like a plug and play kind of thing.

What do you think about a contrast checker inside of ACSS?

Um, it’s not an ACSS thing.

It’s more of a builder interface thing.

There will be one inside of etch.

Uh, but it’s like, you need that kind of builder interface type thing to do it properly.

And we don’t control the builder interface.

That’s why we’re building etch.

Not just to make a way better experience than anything that’s ever been created, but we all, we, we just came to the realization, like we have to control this.

We’re tired of living under somebody else’s thumb and we’re tired of things not working the way we want them to work and the way that they should work and, uh, not knowing what’s coming next.

And just, there’s too many downsides.

Now, now we can do whatever we want and we can do it right.

And we can innovate the way that we’ve innovated with ACSS.

Okay.

You, you’ve never seen a card framework anywhere else.

You’ve never seen an icon framework anywhere else.

You never seen half this shit anywhere else.

And we’re going to bring the same exact concepts and ideas and innovations to etch because I have a list of a hundred different innovations that should be in page builders that aren’t.

And, um, those are going to be coming.

So that is why.

Okay.

Back to questions.

Do you, do you will support bricks in your videos?

Also, if etches release, um, once etches able to, once I can make videos with etch, all videos will be in etch.

Now it’s not a, um, I mean, here’s, here’s the unfortunate reality that you’re, you’re going to arrive at.

Okay.

The same reality happened by the way, when I use bricks and all my videos.

So when people do page building one-on-one and they, they, we start out in the early days of page building one-on-one, where I’m kind of flipping back and forth between different builders.

Cause I’m trying to show how they do things a little bit differently.

And I can’t remember what episode it is.

It’s, it’s early on, maybe episode four, five.

I just kind of abandoned all the other builders.

And I just start using bricks for all the rest of the videos.

And everybody that does not use bricks comes to the same conclusion because they’re going through and they’re like, I can’t do that in elementary.

I can’t do that in divvy.

Uh, I can’t do that.

I can’t do that.

I can’t do that either.

I can’t do that either.

Can’t do it.

But I need to be able to do that.

But I can’t do that.

I can’t do that.

I can’t do that.

And they get sick and tired.

And they’re like, why the fuck can’t I do that?

And they start to get angry and upset.

And they’re like, why doesn’t that do that?

And then they’re like, I think I’m going to, I think I’m going to try bricks.

And then they try bricks.

And then they, again, they follow along with the videos and then they’re a convert.

And they’re just like, I don’t know how I ever used that thing before.

Um, the same thing is going to happen with etch, uh, where I will start using videos and I, I, I, I’m not going to be able to go back to bricks because the things that etch is going to do and the way that etch is going to do them, you’re going to see it.

And you’re gonna be like, ah, I can’t do that.

And the other things I can’t do that.

And the other, I can’t do that.

Oh, that’s really okay.

All right.

And then you’re going to be like, I think I’m going to have to give that you try.

And then once you do it, you’re never going to go back to the other way.

It’s a new era of WordPress.

It does not work like the other page builders work.

It does not follow their lead.

It does not, it re-imagines all of the things that they do wrong.

Um, and it re-imagines the workflow in general, and it gives you access to things nobody else gives you access to.

And it works in a different way.

And that is just what’s going to happen.

And that’s just a natural part of innovation.

Right.

Um, you know, when somebody drove up with a car, all the people on horses were like, ah, fuck, I think I, I think I need to get one of these car things.

Uh, and now we all have cars.

Right.

So yeah, this is just the way it’s going to work.

Does ACSS get included in etch or a separate plugin?

Uh, it’s, it’s separate.

It’s, um, so the builder is the builder and you can use a builder without a framework.

Right.

And people are like, I mean, you’d probably be a psychopath to use, to not use a framework.

Right.

I’ve, I’ve made that argument before.

In fact, I would, uh, I always bring this up.

I mean, I write these things for a reason, but very good arguments.

And I, and I, I used a title that is, uh, abrasive.

Okay.

Uh, and people may dismiss the title when they first read it and that’s okay because they’re not ready yet.

They’re not ready yet to understand and digest.

Right.

Uh, but it says a CSS framework is required for maintainable web design.

Now, is that, um, technically true?

No, like you could, you could do maintainable web design without a framework.

Is it true in the context of the arguments of the article and in the context of being a professional and doing professional work?

Yes.

It’s true within that context.

So you read down here and you start to come to the realization of why that is true.

Um, and I would highly recommend that you, that you read it.

It’s very detailed and provides tremendous examples.

It’s actually just one example, but it goes through all the details of the one example.

And when you go through the details of one example, like a button, right, there’s a simple, very simple thing, seemingly simple thing, a button.

And you understand the thinking that is involved in standardizing how you handle buttons.

And then you, if you did that work on your own, right.

And then you come to the realization that, oh, I should be doing this for everything that I touch in, in my workflow.

And then you look at the amount of work that would be required to do that.

You quickly come to the realization that, okay, this needs to be frameworked, but I’m not getting paid to do this frameworking thing, right?

You could, you could either be working or you could be frameworking.

Your clients pay you to work.

They don’t pay you to framework, right?

So if you’re doing all this frameworking over here, you’re not getting paid for any of that.

Okay.

Your client’s paying you to work.

So you pay 99 bucks or 149, or you get your LTD, right?

Of ACSS.

And the whole thing is done for you.

You just, you plug it in.

You don’t even have to really set it up.

You can go watch my video on all the things it does without even setting it up.

You just install the damn thing.

And just, then you just start building according to its workflow, which we outline in ACSS 101.

And it’s done.

It’s a done deal.

And you don’t have to spend any time frameworking.

And now it’s not to say there isn’t a learning curve.

It’s a little bit of a learning curve, but if you compare the learning curve with doing your own frameworking, the learning curve is about, uh, you know, 1% of that time versus, you know, it’s a mountain.

It’s a mountain.

Like you, you are going to spend tens by the time you get anywhere near what ACSS gives you out of the box.

If you added up your actual time, cause time is money, right?

And time is valuable.

And time is the thing that you can’t actually get back.

If you added it up, even if you are at like a $50 an hour kind of rate to get anywhere near what ACSS has done, you would be tens of thousands of dollars in the hole.

Like you have to bill yourself like that much money.

It’s just, it’s stupid.

It’s just dumb.

It’s just really dumb.

All the people that are like, I just, I just framework on my own.

I just do my own thing.

They, they have, they have wasted tremendous amount of money, right?

Over just saying, I’ll just, I’ll just take that one and I’ll just use that one.

And by the way, it’s an ongoing process.

Like CSS is evolving and changing.

There’s refactoring that has to happen.

You don’t have the dashboard.

You don’t have live preview.

You are not even going to get in the realm of the same universe, right?

And you’re still going to waste a bunch of time and money doing it.

And that assumes you’re even doing it right.

Because when you start frameworking, you start to realize you actually don’t know what the best methods are.

It takes a lot of like looking and practice and experimenting and letting you, our framework is battle tested by thousands and thousands and thousands of users, right?

So those are things you don’t have to do.

You don’t have to make any of the mistakes, right?

It’s just, it’s just a dumb value proposition, right?

That you can go here, plans and pricing.

I mean, look, look at this.

Why is it?

These are, it’s just, you will make this shit back in 18 minutes.

In 18, remember that ribbon?

How much do you bill per hour?

Okay.

Now how long would it take you just to do that ribbon?

Just to do that ribbon, right?

You’re already in the, in this territory right here.

You’re already in that territory.

That’s one, one little thing, not to mention all the other stuff that’s going on here.

So it’s just, it’s, the price is, is just stupid.

It’s just dumb.

And you, you will come to that conclusion very quickly when you read this article right here.

Okay.

A site built with bricks.

Can we import into etch?

Really good question.

I mean, not right now, but we want etch to have an HTML parser.

So you can take the output because bricks is clean HTML.

So you could take the clean HTML output of bricks, paste it into etch, and it will turn into etch blocks.

And then you can attach the style sheet as well.

Oh, look, it just logged me out.

That’s fantastic.

You could attach the style sheet as well.

And it will also, by the way, by nature of etch, also write all of those things to Gutenberg blocks.

Core blocks, by the way, not proprietary blocks.

So yeah, that’s, that’s going to be fantastic.

Okay.

So using variables.

As soon as you start using variables in your own CSS code, it technically is some sort of framework, a very small one, but still.

Yeah, exactly.

No.

So if you go back to the article, this is a, people jump to conclusions, right?

When they read headlines, they jump to conclusions.

So you jump to the conclusion of, because you know, I have, I built a CSS, right?

So you read a CSS framework is required for maintainable web design.

Nowhere in this article does it say that a commercial framework is required for maintainable web design, just a framework.

So yes, you can create your own framework for sure.

And that would be the framework you use for maintainable web design.

But a framework is required for maintainable web design.

Not mine, not a specific one other than mine.

Like it could be yours.

But what the article says is it’s dumb to make your own when there’s a commercially available one that is, that is just built for exactly what you are doing and exactly what you need.

Because of that, that value mismatch, the time mismatch, all of that.

Right.

And, and just the fact that a lot of people, you know, there, there are things in ACSS, like going into the typography, going into the fluid responsive spacing, the math scales, all of that stuff.

The way that most people do math scales is not, it’s a very manual way.

And it’s still a pain in the ass.

Like they’ll go to, what is that?

There’s some generators out there.

They’ll copy it.

They’ll paste it in.

Let’s, what is the main one called that everybody uses?

Um, it has a cute little name.

Let me see if you, if you guys know in the, it’s slipping my, my brain right now.

Anybody know what it is?

It’s got a cute little name.

Uh, God, it’s like right on the tip of my tongue.

It’s right on the tip of my tongue.

I know somebody is going to be able to throw it in here.

Hmm.

Nobody, nobody, nobody.

Dude, it is so frustrating when something is right on the tip of your tongue and you can’t, you can’t get it out.

Maybe you should change the title from a CSS framework to CSS frameworks.

No, it’s not tailwind.

No tailwind is a framework.

I’m talking about the generator.

There’s an online, it’s just for typography and spacing.

Um, it’s, it’s not a framework.

It’s not a framework.

It’s just a, it’s just a fluid scale-based generator here.

I should probably just Google it.

Utopia.

My gosh, dude.

Utopia.

I told you that a cute little name.

Um, okay.

So they do something like this.

Well, first of all, this is calculated wrong, right?

Um, let’s go up and see if it asks, okay.

It does ask for your website width, right?

13.

Let’s say my website width is 1366 and my base font size is 18.

And then I want this type scale right here.

Okay.

So you’re going to come down here and you’re going to grab all of this stuff right here.

Okay.

And then you’re going to plug it in manually.

And then you’re going to change the names because this naming system is absolutely atrocious.

This doesn’t even make any sense.

Like the, there’s a negative one, but you can’t even tell it’s an, it just looks like a BIM modifier.

I mean, this is the stuff that’s just not thought through at all.

So the names are bad.

The, the dash syntax is bad.

And then all these are manual clamps.

So when you go plug them into like, uh, you know, a website, right.

And you want to change one of these sizes.

You want to adjust the size.

Do you realize, I think a lot of people don’t even realize you can’t just change the minimum and maximum because this number right here is calculated based on the minimum and maximum.

You have to redo that math.

And it’s based, based on the content width of your website.

So if the content width of your website ever changes, all of these have to be recalculated every single one of them.

And if you’ve manually adjusted any of them, you can’t just go back to the generator and regenerate.

It’s going to undo all of the customizations you’ve made.

Like this is, this a nightmare.

People don’t realize how much of a nightmare that this is.

There are people when, when I say ACSS has fluid typography, right?

They’ll be like, Oh, you could just go to utopia and do that.

Those people have no idea what they’re talking about.

Zero idea what they’re talking about.

Um, like in ACSS, you can go, let’s go to the, to the front end here.

Let’s just show what I’m talking about.

Right.

Typography.

Okay.

So if I change one, I can change my root font size without anything breaking.

That’s another thing. all of those will break all of the, look, they’re all based on static rim values.

We just talked about this earlier.

If you change your root font size, that scale right there is fucksville.

You have to regenerate it all and you have, you lose all of your customizations.

Okay.

Done right there.

So is that true in ACSS?

No, I can change this to whatever I want at any time and nothing is going to break.

Then I can change these base sizes.

Then I can change these scales.

I can just play with these scales and do whatever I want.

Resave everything.

All the math is going to remath.

And all of my manual overrides, like if I was manually overriding H1s or H2s or H3s, whatever, those are going to stick and they’re going to stay.

And I don’t have to worry about redoing any of those.

And I never have to do any math.

I never have to touch any math.

I never have to regenerate anything.

And when you’re trying to make changes on the fly, this is so helpful and so efficient.

And you don’t realize how helpful and efficient it is until you try to cheapskate your way through with something like this.

Because this shit is a nightmare, an absolute nightmare.

And I don’t know about you, but again, I get paid to work.

Okay.

I don’t get paid to deal with this nightmare right here.

And the more that needs to change, the more the nightmare grows.

And this is just one area.

Now, now do all this with your spacing.

And now, now come up with contextual spacing concepts.

And now come up with contextual color concepts.

And now deal with dark mode, light mode.

And I can just go down and on and on and on and on and on and on.

And it just makes no fucking sense in modern.

When ACSS exists, it makes no sense to try to do any of this stuff manually.

Zero sense.

You will be underwater.

Again, go back to the pricing.

You will be underwater.

I think I closed it.

It was $79 for the freelance plan.

You will be underwater in an hour and a half.

You’re already losing money.

What are you doing?

You’re already losing money.

Okay.

It’s just, it doesn’t make any sense.

Now that’s a long winded way to say a framework is separate from a builder.

You can use a builder without a framework if you’re a psychopath.

But you would need both because ACSS is a completely, look at this infrastructure here, right?

You can’t, I mean, and again, this just goes to show, right?

You know, I love the people too.

They’re like, it’s just some CSS.

It’s all it is.

Some CSS.

Yeah.

They’re, they’re the R word.

You know, you know what the R word is, right?

I don’t know.

Were you allowed to say that yet?

It needs to make a comeback, honestly.

Look at this, right?

We can open all of these things.

These are all everything.

These are all features, right?

And this is even, none of this is the dashboard.

None of this is the dashboard.

This is, this is just the framework.

And each one of these files looks something like this, right?

Looks something like this.

Looks something like this.

All right.

This is not shit.

You don’t want to be in this business.

I’m very good friends with Mark Westgard at WS Forum, right?

When he came up with the idea to build WS Forum, he thought it was like, oh, this should be fun.

This would be a fun little project, right?

And then I can sell it and it’ll be great.

Yada, yada, yada.

And, uh, you know, he will, he will, he will tell you now, he will tell you now, uh, you do not, if you have the idea that you’re going to go into the forms business, you don’t want anything to do with the forms business.

It is so much insanely deeper than you would imagine when you are at the start of it.

Right.

Um, and so WS Forum, same way.

If you look at the infrastructure, that’s why, and people will be like, oh, WF Fluent, this, that, the other thing, the one click stuff that he does, the integrations with CPTs, the, the, like the truly advanced shit that other form systems don’t actually do.

Um, people just, they don’t know.

And I get it.

You don’t know until you, if you don’t know, you don’t know if you don’t know.

Uh, but that’s why you have to take people’s word for it who do know and who have been there.

Uh, but it’s just, yeah.

Anytime you hear something, it’s just some CSS.

It’s just in this, it’s just, you can make your own.

These people are, are, are, they’re not smart.

They’re just not, this is a, this is a, there’s a low IQ take.

It’s a low IQ take.

Okay.

Um, all right, let’s do a last call for questions and we’ll get out of here.

Last call.

We’re going to wrap it up.

It’s five, 10.

I’ve got to go on a walk.

Got to get some exercise.

Knowledge is power.

It is.

It absolutely is.

Hmm.

Once you use it, you can never go back.

I install ACSS even for a one page website.

Yeah.

I mean, you have to, it really doesn’t matter how many pages there are.

Like you just have to, you have to use it every single time.

And, and really, if you think about it, I’ve made this, uh, from a pricing standpoint, when you’re pricing projects, when you’re explaining pricing of projects, we’ll just do this to close out because I think that’s actually very valuable to people who work in this industry.

If you tell it, well, first of all, a client may come to you and say, Oh, I just, I want, I’m looking for a good deal.

It’s just a one page.

I just need a one page website.

You’ll hear that a lot.

Or, uh, even if they don’t say that, if it ends up being two or three pages or something like that, and you give them a quote, you give them a quote, like $5,000.

Okay.

And let’s say it is a one page website.

You give them a quote, $5,000.

Now in their mind, they thought like a step might be a seven page website.

I’m just making numbers up.

So if you said seven pages, $5,000, that might make sense in their brain.

But the minute you say one page is $5,000, that doesn’t make sense in their brain.

And they start like, I don’t understand.

It’s just one page.

Can’t just whip it up.

Right.

The first page of a project, these projects are very front loaded.

If you think about them, right?

So you got to do the header, you got to do the footer, you got to do all the color stuff, set up, spacing, set up, typography, set up, all that.

Now you fly through this with ACSS, obviously.

Right.

But it’s a lot of decision-making on the front end.

Then when you get to the design aspect of it, okay, what are cards going to look like?

What are my background patterns going to be?

What are my background colors going to be?

What are my color relationships going to be?

What am I, do you understand how many decisions have to be made?

Guess what?

Those decisions that you are making page one are now already made for page two, three, four, five, six, seven, eight, nine.

It’s not that, oh, it’s just one page.

It doesn’t matter.

I have to make all of the decisions anyway.

All of those decisions have to be made for the first page.

I can’t do anything else until I make those decisions.

So you should be charging with that understanding that there is a lot of front loaded work.

To get to page one is expensive.

To get to page two is very cheap.

It’s much cheaper to get to page two and three and four and five than it is to get to page one.

Because when I make my cards that have to live on page one and I go reuse those cards on page two, no more decisions, no more challenges, no more, nothing.

I just use them on page two the same way I use them on page one.

So it doesn’t really cost that much to make a second page.

Doesn’t really cost that much to make a third page.

Now you want more architecture.

Now that starts to drive the price up.

And if you don’t know how to price these projects, my whole pricing thing is available in the inner circle.

You could just literally steal the entire pricing spreadsheet.

But those are the things you need to be thinking about.

So when people say, oh, it’s just a one page website, I’ll use Wix.

Oh, it’s just a one page website.

I’ll use Squarespace.

I’ll use the static CMS.

No, use your stack, the same stack you use for every other website.

Because the minute you switch to a different tool or you say, oh, I’m not going to use this thing.

I’m not going to use ACSS as just one page.

You are in a land of inefficiency that you’re not used to working in.

And you are just making the project more expensive for no reason.

Right?

Use the same stack, every single project and be done with it.

And that is the stack that you master.

And that is the stack that you work the most efficient in.

And it has no downsides.

Everybody’s happy.

But yeah, I see so many people like, you’re right.

You’re right, Bev.

It’s just one page.

I’m going to cut that price down for you, Bev.

We’ll just do that for $1,200, Bev.

Normally, we would do it for $1,200.

But you’re right.

I don’t know.

It is just one page.

I guess I can’t argue with that.

No.

Quit talking yourself out of money and into a nightmare.

You are going to be in a nightmare.

You got to do a lot of work to get to page one.

Okay?

So you need to charge accordingly.

That’s why I say project minimum.

My project minimum was $5,000 at one point.

It bumped to $7,500.

And then that means if somebody needs a one-page website, that’s where the minimum kicks in.

That gets you to the first page.

Now, keep in mind, that’s accessibility.

That is usually copywriting involved there.

That’s discovery.

That’s proper design.

That’s a lot of things.

Right?

We’re not just whipping it up.

It’s a professional process.

But to get to page two, what if it was going to be a two-page website?

So let’s say the minimum, let’s just use round numbers, was $5,000.

Okay?

And let’s say you want to set your minimum.

So you have $5,000.

What is it to get to page two?

Well, it might be $5,500.

See?

It didn’t go to $10,000 because I added a second page.

Right?

It’s just all of that work front-loaded to get to page one has to be accounted for and has to be paid for.

And then we can get to the rest of it at a different rate.

Okay?

But getting to that first page is a tremendous amount of work and decision-making.

Not to mention the server setup, the deployment, right?

The DNS shit.

Because you know, you should charge $5,000 just because Bev doesn’t have her two-step auth code.

For fucking sake, you’re trying to get into her GoDaddy, and it’s going to take you three hours because she doesn’t have her two-step auth.

She doesn’t remember her password.

She’s not available when the text message gets sent.

You know, you know this.

Okay?

Those are the kind of things you have to, just one page, guys.

Just one page.

See what I’m talking about?

Okay.

So front-load your pricing because that one page is a hassle.

And then it’s a different price for the rest.

Okay?

All right.

I got to get out of here.

Hopefully that was helpful and slightly entertaining.

I’ll be back on Tuesday for another WDD Live.

We have another WP Town Hall next week.

I’m going to be doing a live work session with Kevin in the Inner Circle next week.

So next week’s going to be kind of action-packed.

Plus, the card framework gets released next week.

The icon framework gets released next week, both in experimental mode, so you can fully play with them and deploy them and see what you think and give me feedback.

Next week is going to be a fun week.

Okay?

All right, guys.

I’m out.

Love you.

Peace.