WDD LIVE 080: Live Work Session (ACSS Icon Framework & Centralized Support Form)

Good morning, everybody.

Let’s get some volume going right here.

Welcome, welcome, welcome back.

It is another Tuesday.

We’ve got a lot of stuff to do today.

This is going to be a little bit of a first.

I’ve obviously done web design stuff on WDD Live many times, live builds, things like that.

But this is the first time that I’ll be working on automatic CSS live.

So that should be fun.

That should be fun.

We are working on right now in the works two very, they’re complex, but very powerful and very necessary things.

One is the card framework and one is an icon framework.

And these are actually going to work together.

So the card, because obviously you can have like icon cards, right?

But the card framework obviously is for managing cards across website projects.

And the icons would be for managing icons across website projects.

Both of which I think need a lot of standardization.

There’s no official standardization in the industry for these things, but I think there should be.

And it’s just going to be, it’s going to be great.

So we’re going to talk through that.

You’re going to see some dev stuff in action.

You probably learn a lot and see behind the scenes.

A lot of good reasons to kind of tune in and hang out today.

Let’s see.

Let’s say hi to everybody in the chat.

We got Suzanne, Justin, the Hunzi in the chat.

Welcome, welcome.

Peter’s here.

Steven’s here.

Jamie Lynn is here.

You also, you know, we’re, you know, I’m building something.

I’m working through something.

Like I’m not, I don’t have all the answers mapped out to exactly how the icon framework should work.

Exactly how the card framework should work.

This is part of the process.

So you guys get to be part of the process today.

I might bounce some questions off you.

I might ask for some opinions.

Okay.

So you got to be ready to go in the chat.

We all got to be on point today.

You know what I’m saying?

Like, yeah, yeah.

You got to help out.

You got to help out.

Can’t be slacking.

Okay.

We got a lot.

We got a good showing here so far.

We’re already over a hundred.

I mean, this is fantastic.

Okay.

Let’s do one thing.

One quick announcement.

All right.

I published on Monday, I published this article on, it’s on automaticcss.com.

You can go to the blog section.

You can click on it.

The state of ACSS as we near the end of 2024.

I would highly, highly, highly recommend that you read over this recap, especially if you feel like you’ve been out of the loop at all with where automaticcss is, where it has been over the past few months, where it’s going.

This is a real, what its relationship is with etch.

This is a really, really, really good recap.

Okay.

It’s not a long read.

Everybody that’s read it so far has had very, very positive feedback on it.

It will get you up to speed very quickly.

Okay.

So I just wanted to point that out.

That is live.

It’s published.

Definitely should go check that out.

Okay.

Let’s take a look.

I’m just going to kind of get right to work today.

Now there’s kind of two things on the agenda.

One obviously is the icon framework.

Going to be working on that.

Going to be talking through that.

I don’t know if I’m going to look at how that interacts with the card framework yet.

The card framework is not finished either.

I essentially got to the part of the card framework where icons were involved.

And then I was like, all right, I’m going to have to pause here.

It’s like a chicken or egg kind of thing.

It’s like one relies on the other.

Okay.

So now we have to think through the icon framework.

Both of these kind of have to be done more or less at the exact same time, even though they’re not always used together.

It’s just the fact that sometimes they’re used together.

Therefore, one can’t really exist without the other one.

Cause I have to know how they’re going to interact with each other.

There’s obviously a lot going on with both of these things because there’s a light icons and dark icons.

There’s light cards and dark cards.

Okay.

We just got to start somewhere.

There’s, there’s so many things to talk about, to discuss, to think about, to consider.

So we’re going to, we’re going to get, we’re going to get to it.

So what I want to do here is we’re going to bring up a local and we’re going to bring up, let’s see here.

Let’s open VS code.

Let’s get this.

The only thing that’s going to suck about this is I always do this on two monitors.

I never, and you guys can’t see both monitors at the same time.

So I’m going to have to do this swap back and forth between things, which I’m going to have to really get good at the command tab shortcut here, which I hardly ever use, but I think, I think we’ll do it today.

All right.

Let’s go ahead and see if we can get started here.

What’s up, Mark, Mark Zemanski in the house.

Hey, Mark, if you want to queue up that next WP town hall, if you want to, if you want to enter it on the website and get it, you can, I mean, you could even schedule the space if you wanted to.

That, that might be good.

That might be good.

Okay.

We should be rocking and rolling now.

Let’s see.

Oh, I’m, am I on the other screen with this?

You can.

Oh, it’s in the, I don’t want you cam live.

Okay.

All right.

Our local should work now.

It does.

All right.

Let’s go to icons.

So I want to show you where I’m at so far.

And this is, you’re going to, you’re going to think that this is like great progress.

You can be like, wow, that’s fantastic.

It’s still only like 20% done.

Okay.

Of where it needs to be.

Let’s open this and let’s, okay.

So this is like an unstyled.

This is like a page where you just throw a bunch of icons on here.

Now the key is I have a mix of SVGs and icons using the eye element.

So you’ll see some of these are SVGs.

Some of them are eyes.

Some of them are filled icons.

Some of them are stroke icons.

These are actually icons.

As you can see in a dark section, we have a couple sample cards here with icons, two different sets of icons.

We’ve got what we would call like social icons down here.

And then there’s the context of what happens if an icon is in a card or a container using clickable parent because icons have to be hoverable.

They need, they need hover styles.

Obviously they need hover styles to trigger even when they’re not actually in the link, which happens with a clickable parent context.

Um, there’s an old school card, which I’m planning on wrapping in a link, but that should kind of work by default.

Uh, I’ll, I’ll, I’ll show you where I’m at kind of with everything and how everything works.

I’ll just tell you right now, it’s in shambles right now.

I mean, it’s an absolute shambles.

It’s, it’s at the early stages.

So I’m trying to put pieces together.

I’m trying to think through some things and that’s kind of how this all works.

Right.

Uh, but I’m going to go down to icons right here.

Let me just move this out for a minute and you’re going to see icon framework experimental.

I’m going to go ahead and toggle this on and I’m going to save and we should see this page come to life.

Yeah.

Okay.

So this page has come to life pretty well.

Right.

Just by turning on the framework.

Um, and you can see here that we’ve got some icon sizes.

We’ve got a global icon style, some dark icon style, some light icon styles, as you can see placeholder, right?

There’s nothing there yet.

Um, options, nothing there yet.

Right.

This, this is, we’re in, I’m in progress right now.

Okay.

This is what it looks like to be in progress, but, uh, I do have icon color for the dark icon styles.

Um, icon background color.

One thing I’m thinking about is if you think about icons, I mean, typically you want icons to look the same across the entire website.

Um, and part of that is whether the icon is what we might call boxed or not boxed, right?

Every icon you’re looking at here is boxed, which means it, it is, it’s self it’s contained within a box.

Like that’s not the actual icon, right?

The icon is the F and then the box style is created with CSS, created with padding.

It’s creating with some CSS techniques.

Uh, it could have a border at that point.

It could, a lot of things could happen.

Right.

So to me, one, one thing I wanted to work on here, and I still got to think my way through it is people elect to have to, for their icon style to be boxed or not boxed.

Um, one thing that they can do is change the size of icons using utility classes.

Like you’ll have your normal icon size.

That’s what I was starting to get at right here, where you have a normal icon size, which we might say is like medium.

That’s your default icon size.

Uh, then you can have a small, you could have a large, you could have, maybe we should have all t-shirt sizes available, but what I don’t think should happen or would happen on most sites is you wouldn’t go from like, if you want to make it small, it wouldn’t go to not boxed.

Like if you, if you’re, if your icons are going to be boxed, they should all be boxed, right?

Regardless of whether it’s a small, medium, large, whatever.

So what I’m thinking about right now, you do need, you do need to be able to set a different padding size per, uh, per icon size.

Now I started out trying to do this with M units because I thought that would be the best way to do this, but actually because of the way icons work, when it, when it was, when it’s an SVG, it’s not a problem.

And this is, this is the challenge with icons, man.

They’re, they’re an absolute dumpster fire.

If an icon is done with font size, which are the eye icons, right?

Like font awesome.

For example, these are actually like fonts.

And so they use font size and then the M values will throw off the padding versus when an SVG is being used as the icon.

Cause an SVG, the pad is not setting a font size.

Therefore the padding value is going to get calculated differently.

So you actually, and you can see it right here.

What I said, I said, we highly recommend you use a static pixel value for your icon padding.

This is what causes font icons to have the same padding value as SVG icons.

These are things to think about.

These are, this is a, this is a very challenging situation that we’re, that we’re looking at here.

Okay.

As you can see, there’s only S and M, M has padding, S doesn’t have padding.

Why is this?

Because it’s in shambles.

We have to, we have to keep working on it, right?

Step by step by step, just piecing this stuff together and thinking about different things.

Now, how did I pick up, how did all these things know to get styled by, cause we’re not hijacking every icon that is available on the website.

We can’t do that.

That’s not safe.

It’s not a good idea.

It’s a terrible idea.

So the idea that I came up with is to use a simple data attribute.

I say simple, it’s starting out simple.

It may not end up some, I don’t know.

We don’t know where this is going.

Um, nobody has a crystal ball.

So they all have this data attribute called data icon on them.

And if they have data icon, they’re getting styled, right?

Uh, let me pull up a couple of things here.

So we’re going to go to icons.

We’re going to go to, we need classes.

Uh, we’re going to need vars.

We’re going to need, uh, we’re going to need, uh, we’re going to need, uh, that’s probably it for right now.

We’re going to need icons dot Jason.

Okay.

So we’re going to need these three files, but right here, you can see if it has data icon, it’s getting, it’s getting the styles.

Now, eventually these will be packaged into like a mix in.

Um, you might get a recipe for this at some point.

None of that’s going to be known until further on down the, down the line, how this is all going to work.

Um, as you can see, we’re using some global variables here, uh, custom properties to set the very important things.

Some icons when, uh, especially when they’re I elements and, um, you know, just depending how, how, how it like in bricks, bricks is notorious for this.

They actually set the icon in a before pseudo element.

So that had to be accounted for as well.

Um, brick sets an atrocious default font size on the bricks icon class, which gets added to every icon automatically atrocious.

We had to reset that.

That’s terrible.

Um, then there’s, then there’s handling icons for when the icon is a link versus when the icon is inside of a link versus when the icon is adjacent to a link, like in clickable parent, that’s, we’re going to figure out how to handle that as well.

Um, okay.

So this is kind of where we’re at right now.

Everything centers around this data attribute called data icon.

So if you have data icon, we’re hijacking it, we’re styling it for you, but that’s all good because that does all the work for you.

Uh, what I want to do right now, the easiest thing we can start on is getting the other sizes geared up here.

Okay.

Um, because if you look here, I have icon size S M L and that’s it.

And really what we need is we’re going to need an Excel.

Okay.

Um, and then we’re going to Excel, Excel here.

Um, how is the resolution by the way?

Do I, I, I don’t want to scale this up if I don’t have to, cause it’s going to affect how much I can see and what I’m doing, but I, I will, if it’s absolutely necessary.

Um, I don’t know.

We’ll, we’ll just for consistency purposes go with XXL, uh, as well.

If you’re going to do t-shirt sizes, might as well do all of them.

Uh, they’re small.

Let’s go with, uh, excess on here also.

Okay.

I’ll, I’ll look at chat in just a second.

All right.

So we got excess S M L XL, XXL.

That’s fantastic.

Uh, we’ll come down here uh, to icon sizes.

Let’s add those two icon sizes here as well.

XL, XXL.

Uh, this is essentially the list that will control the loop output that’s right here.

So this each size and icon sizes, we’re looping through the, uh, that list and we’re creating, if I can pull up icon here.

So these, these utility classes right here are being generated from this loop right here, which is referencing this list right here.

Um, okay.

So now we have those sizes.

Uh, we need to add them to the dashboard.

So what I’m going to do is going to go back to my Jason file here.

Let’s go to icons at Jason.

Okay.

Let me look at chat.

It’s readable.

It looks great.

Okay.

Scale up.

Uh, good for me.

D one 23 seems where the old ones.

Yeah.

Okay.

Let me see if I can, how, okay.

That’s not awful.

I scaled it up a little bit.

That’s not, that’s not atrocious.

I think I can think I can work with that.

Okay.

Uh, so what we need to do is bring up the dashboard and let’s dock this thing over here.

All right.

This is what the area we’re going to kind of be looking at right now.

So I have this accordion for icon sizes.

I’ve got small S M.

Uh, what we need to do is add all the rest.

So that would be, that would be the easiest thing to start with.

Uh, so M let’s take this padding right here and drop it down here as well.

Icon padding S S.

All right.

Um, small icon padding.

Okay.

Icon padding.

That’s going to have to be S for live preview.

Okay.

Let’s take S and let’s go X S.

All right.

And I’m going to change.

I’m going to worry about tool tips and such later.

We don’t have to worry about that right now.

All right.

So we’ve got X S we’ve got S we’ve got M we’ve got L let’s go double dash.

Let’s select those.

Okay.

M.

Oh wait, I’m sorry.

I just, that was supposed to be L.

Okay.

L L L L.

Okay.

Let’s go do that again.

XL.

All right.

That looks good.

And let’s do XXL.

Okay.

Let’s go.

Let’s go back.

There we go.

Okay.

M L.

Oh, those labels are wrong.

XL XXL.

Okay.

No problem.

Super easy.

Let’s test these, uh, in just a second.

Okay.

All right.

Medium.

And then we need the main labels.

We need the main labels done.

Okay.

Normally I do this with music, which would be way better.

Uh, but we’re not going to do that today.

So yeah.

Okay.

Uh, how do we want it?

Do we want to write it out?

Like extra Oh, that’d be like extra, extra large.

Uh, I don’t know if I like that.

We’ll leave it for now.

Extra large icons, large icons, medium icons, small icons, extra small icons.

Okay.

Let’s go back.

Go extra small, small, medium, large, extra large, extra, extra large.

All right.

We got a lot of icons.

Um, a lot of icon sizes.

Let’s test them out real quick.

Uh, let’s go ahead and save that.

And let’s go into the builder.

All right.

You should be able to technically use these on, um, on like rows of icons, groups of icons, whatever you want to do.

So there’s S and then X S.

These are all working.

Um, is irrelevant.

Large.

Let’s, let’s do this.

Let’s go container.

Let’s just duplicate these a few times.

Okay.

So this will be icon X S.

This will be icon S.

This will be icon M.

This will be icon L.

Probably the best way to do this.

This will be icon XL.

This will be icon X XL.

Uh, and then this one can just be deleted, I guess.

Oh, there’s already, there’s already a problem there.

These are with what the SVGs.

These are eyes.

These are eyes.

Hmm.

Okay.

Hmm.

Hmm.

Hmm.

I, well, we’re not changing.

Okay.

Yeah.

Icon size, icon size, size.

Let’s see why that’s blowing up.

Why is this one blowing up right here?

Data icon bricks, icon font.

Okay.

Font size icon size is not defined.

Uh, I don’t know.

It should be.

It should be.

Oh, icon size M icon padding M not being a generated.

Okay.

Let’s go to, let’s go to tokens.

All right.

Each prop value and icon default styles, icon prop value, light styles, dark styles.

Okay.

Um, yeah.

Yeah.

That, that, that actually, that makes sense.

Okay.

Let’s go to automatic CSS.

Go to icon.

Uh, let’s go to the beginning.

There they are.

Yeah.

Okay.

That’s a problem.

Icon background, icon background, hover icon color, icon color, hover default value, dark styles, value.

That, hmm.

Hmm.

Hmm.

Hmm.

Hmm.

That’s coming from this map right here.

I don’t think these, those probably don’t need to be in there.

Let’s see if we can get this.

Okay.

That’s good.

Um, I wonder if these need to be icon padding.

Oh, that did not help.

Okay, I don’t know why these are not being output.

Icon styles, icon sizes, icon default styles.

That seems like it should be working just fine.

Each size and icon sizes and icon size, size, icon size, size, icon size.

What do we actually want those to be?

Yeah, icon size M, icon padding M.

Okay, icon size M, icon padding M.

Icon size M, icon padding M.

That should match that just fine.

Let’s see if this loop works.

All right, let’s see what the error is.

We’re getting an error of some sort.

Icon size size.

Oh yeah, we’re not going to be able to do that, are we?

Let’s get rid of the padding first.

Simplify.

Let’s simplify.

Let’s go, let’s just test.

I just wanted to get this loop to output something.

There we go.

Okay, XSS, S, M, L, XL, XXL.

Okay.

I think all sizes, this is not going to be possible this way.

We’re going to be able to do that.

We’re going to have to change this into a map from a list.

Let’s try this.

Being able to type is helpful.

Okay.

Now I can also just retrieve a value, even though they’re the same.

Okay.

And we’re going to say each size value.

Yeah.

Yeah.

Yeah.

Yeah.

Okay.

Hold on.

How do we want to do this?

Okay.

All right.

I’m going to come back to this in a minute and think about how I want to do this.

Icon size XS.

We actually need the bars.

Okay.

Actually, no, no, no, no.

We’re fine.

We’re fine.

We’re fine.

Yeah.

Okay.

This is going to be S, M, L, XL, XXL.

They don’t, they’re not going to show, actually, they’re not going to show values here because they don’t have any values here.

They’re getting their values from the dashboard.

So that actually doesn’t, I mean, we can just test this if we wanted to, like size L, 32 pixels or something.

And then L, okay, good.

We got another error.

Let’s see what that error says.

Located error.

Icon size.

Icon L, 32 picture.

Bars, tokens.

No, that should, that should not matter.

All right.

Yeah.

Yeah.

It’s still screaming at that.

Okay.

Okay.

I wonder if it’s going to give an error on the front end, though.

No.

It doesn’t.

Okay.

Let me try to change something real quick.

Let’s go to icon sizes.

Let’s change L icons to 60 pixels.

All right.

Let’s see.

Where’s L?

It’s like this one or the next row.

Yeah.

Okay.

Good.

All right.

Let’s just see the actual real output here.

Icon L.

Icon L.

Icon L.

Yeah.

All right.

No, no, no.

Sources.

Okay.

I think it is outputting here.

But why?

Icon size M.

Icon size L.

Okay.

All right.

I think I know now.

The loop for classes loop.

Icon size.

Icon size M.

Icon size L.

Icon size L.

Yeah.

That should work.

Why isn’t it?

Icon L.

Oh, we got to fix the, oh, we changed the list to a map and now we got to fix that other loop.

So the classes loop is going to be fucksville because it’s referencing the wrong format.

Okay.

Let’s go back here.

Let’s save.

And let’s see if that fix.

There we go.

There we go.

It’s coming to life.

Okay.

Mm-hmm.

Why is this?

Okay.

The icon padding.

Is that still in the loop?

I thought I took that out of the map.

Let’s see.

No, I didn’t.

Okay.

Let’s take padding out of there.

Because padding is going to be related to every size.

So now what we can do is we can come to the tokens loop and we can actually go icon padding.

Size is.

Icon padding.

No, we’re going to need a separate loop.

We’re going to need a separate map for this.

Icon sizes.

Or I can do two values.

I wonder if anything else is going to be related to size.

Like padding is related to size, but I don’t know that anything else is going to be related to the actual size of the icon.

Those two things together are really what determine the size of an icon.

So I could actually do two values for each item inside, but then it wouldn’t be called, I guess you could still call it icon sizes.

It’s going to, it might overcomplicate the, might overcomplicate the situation though.

How do we want to do this?

How do we want to do this?

Icon sizes.

Icon.

Icon padding.

Icon size.

XS.

Icon.

Hmm.

I wonder if.

Let’s test copilot out here too.

Let’s go.

I think.

I think this is this.

I don’t use these.

I don’t use.

I don’t use multi values in maps much.

I think this is the syntax for it though.

We can always go to.

We can also test out.

Let’s go to.

Now let’s do this.

Okay.

What’s the syntax for a, for multiple values in the SAS map.

Trying out notion AI these days.

Seeing.

No, no.

I, I want two values for each key.

There it is.

Okay.

That’s what I thought.

Okay.

All right.

Uh, let’s, let’s try this.

This is, this would be interesting.

Um.

We’re essentially just going to map the padding to the size.

And let me just grab this.

Bang, bang, bang, bang.

Okay.

S.

Uh, let’s go M.

Let’s go L.

XL.

XXL.

Now that’s going to break all my loops.

Uh, but icon.

Uh, icon.

Hmm.

Icon sizes.

No.

I need, I need to get like the, I need to, I need to map get the inth child.

Okay.

Oh, actually I can just, you can just feed it these maps.

Uh, and actually icon padding.

Okay.

Let’s take that.

Okay.

I need to get the second value for each key and assign it to, what is it?

Icon size padding.

Is he rocking zero VS Code extensions?

That’s pretty gangster.

Very few, very few, very few.

Icon size padding, XS.

No, dog, I don’t know.

I don’t want it to be a map.

Well, Icon sizes.

Yeah, that seems over-engineered, but we’ll rock and roll.

Come on, dude.

Switch.

Thank you.

Yeah, that seems heavily over-engineered.

Each value and icon sizes.

I guess you kind of do have to loop through it to get it.

Okay.

So, well, I mean, we could just test it.

Like, each…

I don’t even want to call it that name, but that’s all fixable in a minute.

Well, looky fucking there.

Let’s go to the front end.

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

Okay.

All right.

Layout.

Does it explode?

Yeah.

It fucking exploded.

Okay.

No, that’s correct.

Ah, yeah, yeah, yeah.

It exploded because the sizes.

Okay.

This is…

We just got to fix that real quick.

All right.

All right.

We don’t want…

Go to vars.

Actually, it’s this tokens loop.

We just need another icon size padding.

Okay.

Let’s get these names figured out.

So, I want icon size…

I want icon sizes.

We’re just going to call this icon size…

Icon sizes map.

So, then that is a name we’re not even going to care about.

We’re going to initialize a blank map here.

And then we’re going to loop through it.

Each key value in icon sizes map.

And we’re going to say icon sizes.

Icon sizes.

Icon sizes.

Map merge.

Icon size.

Padding.

No, we don’t…

No, this is going to be icon…

Not icon size sizes.

Icon sizes.

Map merge.

Icon sizes.

Key inth value one.

Okay.

So, this is going to grab all of the…

That’s going to grab all the first values and assign them to icon sizes.

And then we’re going to say…

Icon paddings.

I don’t like that, though.

I don’t like that.

It just seems dumb.

It seems like a dumb name.

In icon sizes map.

Icon paddings.

That just seems…

Just sounds so dumb.

Icon paddings.

Key inth value two.

And then I can go to tokens.

Icon.

Each value in icon paddings.

Each value in icon sizes.

Icon size.

Icon value.

Padding.

Something, something, something, something.

Something.

Save.

And we’re back.

Okay.

Now we’re outputting globally all icon sizes.

All icon paddings.

And now what we can do is we can see if our icons…

This would be in icon sizes.

So, let’s do Ls.

L definitely does not need to be 12 pixels.

So, let’s go to 20 pixels.

Oh, look at that.

We even can fucking live preview it.

Okay.

This is good.

This is good.

This is good.

This is good.

Let’s go 15 pixels.

Save.

I’m guessing that’s going to work for M as well.

Probably not because that’s the default. 20 pixel.

Yeah.

Okay.

Icon padding M 20 pixels.

It just doesn’t have live preview.

So, let’s go to…

Let’s go back to icons.json.

Let’s bring this over here.

Icon M.

Icon M.

Icon size M.

And…

Okay.

So, the CSS variable icon size M.

Icon…

Si…

Size…

S.

For this one.

Icon size XS.

Icon size S.

M.

L.

Icon size.

Icon size.

Small icon size.

Okay.

Icon size XL.

We’re going to ignore the tool tips for a little bit.

XXL.

Okay.

Now we should have a live preview of all of those.

Let’s go to dark icon style.

No.

Okay.

Okay.

Icon padding.

Just do something crazy.

There you go.

80.

80.

80.

80.

80.

80.

Save.

Okay.

They’re all 80.

That’s fantastic.

But why aren’t some of them live previewing?

Oh, that one is.

Okay.

And that one is.

And…

L.

Also is.

And M.

M.

Not so much.

Okay.

S.

You are.

XS.

You are.

Also.

What is this row up here?

Okay.

That’s XS.

What the fuck?

Okay.

Hold on.

XS.

What is…

That’s S.

Okay.

All right.

Well, that’s probably easy fix.

It’s probably some fucking fat fingers in action here.

XS.

XS.

XS.

XS.

XS.

S.

S.

S.

Or maybe not.

Hmm.

Oh.

Oh.

XS.

Right there.

Okay.

Okay.

Back.

Test again.

XS.

Are you with us?

Yes.

S.

Are you with us?

Yes.

Okay.

Good.

All right.

Reset.

M.

Are you with us?

Probably still not.

Okay.

What is wrong with M?

Icon size is not M.

It’s just icon size.

Should be.

Let’s go back.

Reload.

All right.

Come on, M.

Come around, M.

Hold on.

Let’s save.

Okay.

Now.

Can’t do it.

Okay.

Where’s…

Is this the M row?

I don’t even know what I’m looking at here.

That’s the S row.

Here’s the M row right here.

All right.

So icon M.

These are all going to be using…

Yeah. 48 pixels.

Okay.

Oh, you know what?

Yeah.

There’s icon padding. 80 pixels.

And that would be referencing icon padding M.

So that should be…

So that should be…

Should be live previewing.

Okay.

Well, we don’t want that.

Let’s go to…

Do I hate…

I hate icon land down here.

All right.

Icon size M.

Icon…

CSS variable.

Icon size.

Icon padding.

Yeah.

Well, I’m also looking at padding versus…

Let’s just…

Let’s move this to M.

Actually, all these…

It should be…

That should just be fine.

Okay.

That’s probably…

That’s probably what it was.

Why does craft keep opening itself?

How about you stay quit when I tell you to quit?

Okay.

Okay.

Reload.

Icons.

Icon sizes.

Come on, M.

Yay.

All right.

M is back in action.

Okay.

All right.

So we’ve succeeded in…

Let’s reset all this shit.

We have succeeded in creating a bunch of different sizes, all with different paddings.

This is a default icon.

So it’s…

It’s going to stay with our default size.

Icons.

Icon sizes.

Yeah.

Medium.

Okay.

Let’s make this 18 pixels like everything else.

What just happened there, though?

What?

What…

Yeah.

What’s that doing?

Oh, it’s when I don’t have a…

It’s when there’s no unit.

Okay.

I don’t think that’s an actual…

I don’t think that’s an actual problem.

Let’s make all these 24 pixels.

And see…

Right now, just the padding ratio is a little…

That’s a little bit better.

Okay.

24, 24.

Okay.

All right.

We’re good.

Now, let’s think about the next thing we need to…

Oh, jeez Louise.

What on earth has happened here?

Okay.

Icon size.

Icon size.

Icon size.

Icon size not defined.

Why?

Why is it not defined?

All right.

One thing that we’re doing that we have to account for with this icon size versus the actual sizes of the icons is…

There needs to be a default icon size.

So I think what I did is I have XSSML, XL, XXL.

If we come down to the map, we have…

Here’s our sizes.

But I need to have just an icon size, which always maps to M.

So it’s like a default icon size.

And then just default icon padding, I think, as well.

So this is probably just managed here.

Where we’re going to throw in two static ones.

Okay.

Let’s do icon size.

And we’re always going to map that to icon size M.

And then icon padding is always going to map to icon padding M.

But then I’m going to let the loop run right after that.

Which should be fine.

There’s icon size, icon padding.

And then you have all of your sizes there as well.

We can let this loop run after also.

Let’s drop some inline comments in here.

So let’s go generate icon size tokens.

And generate icon padding tokens.

I’ll do here.

Generate dark icon tokens.

Generate white icon tokens.

Generate global icon tokens.

Okay.

Generate standard icon tokens.

Okay.

Values default to M.

All right.

Hold on.

Hold on.

My daughter needs me to open something once.

All right.

Okay.

Friends.

Let’s see what’s going on now.

Amazing.

Amazing.

Okay.

We fixed that shit show.

Okay.

So M now.

I’m thinking like M.

M is like there’s context to these icons.

Like I’ve debated like should we then have a card icon size.

But then this goes into the heart of the card framework, doesn’t it?

So if I go down to cards now, because you can see down here, obviously if you’re going to do an icon card, you’re going to need a bigger icon for that context.

So, and there’s icon.

Here you go.

Icon size right here.

Let’s see what, that already may be using a card icon size.

So let’s open cards and let’s go here.

So, yeah.

Card icon size already there.

Okay.

Fantastic.

So here’s the problem.

Here’s the problem.

How are we?

Okay.

Card icon size, 48 pixels.

What do I have icon size set to?

Because now what I can do is just check to see if I’m actually manipulating.

Yeah.

So the M icon size, in fact, all these are set to 24.

But when it’s a card icon, and we’re still going to need to mark this with the data attribute of data icon.

So I’m thinking, oh my gosh, dude.

I’m thinking, the icon, it’s the VS Code.

I can never find the fucking VS Code icon.

Okay.

Card icon size, 48 pixels.

Let’s go to card classes or mix-ins.

Probably in mix-ins.

Okay.

All right.

All right.

Do we have an icon section?

We do.

Ah.

Okay.

We’re targeting class equals icon, which is fine.

We probably also need to do data icon.

Okay.

So if there’s a, you know what?

You know what?

I don’t think we can do that.

Because we have to be able to handle, and this is why I did this layout like this, where there’s multiple icons in a card, but only one of them is the designated card icon.

Now, how do we know that it’s going to be the designated card icon?

This goes to the framework, the card framework, where we kind of, you got to follow like a standard.

Okay.

And the standard that I chose, you know, using BIM is essentially that if this is going to be the official card icon, this is called icon card.

So this would be icon card double underscore icon.

And that’s going to make it the official icon of the icon card.

And now we have to figure out why that’s not picking that up, because I think it’s already set to do that.

Okay.

So icon card icon.

Is card class icon with height.

Oh, okay.

I see.

We’re going to have a specificity issue here, probably.

Let’s just see if this was important.

Oh, wow.

Doesn’t even like it.

Doesn’t even like it then.

Okay.

All right.

We’re in a little specificity battle here.

Let’s go look at this.

Icon and class equals icon.

So it’s whatever the card selector is looking for double underscore icon, setting a width.

I can put this in here just for now for testing.

I just want to see this actually work.

And then we can figure out the specificity battle from that point forward.

There we go.

There we go.

So now if I go to card, cards, and I go to icon size.

Now I’m just managing the icon size in my cards, which is nice.

This is a separate context from everything else.

I’ll save that.

Saving properly.

This is good.

Okay.

Now, now it’s going to be a matter of, okay, so this is how I’m imagining it would work.

So you have a row like this, social icons, where you can actually just come in and essentially set an icon size where I could be like, okay, I want the icon size to be icon size S or XS or something like that.

This, this is the path to how you would do this all in bulk, like, and at the BIM level.

And I have to figure out why that’s not outputting the way that it’s supposed to, but that’s the idea.

So icon color is being set.

Here’s social icons.

Icon size is set to icon size XS, but I need to look at what the actual size token is that’s being used.

Hmm.

Hmm.

Hmm.

Hmm.

Hmm.

Hmm.

Hmm.

Right here.

Right here.

Why are all these grayed out?

Okay.

O2O.

The icon size should be set right there.

And for some reason, it’s not.

What is, oh, oh, okay.

Width, height, 24.

This shouldn’t, this shouldn’t matter.

That shouldn’t matter. let’s get these out of links first for now um because that just complicates the issue let’s just let’s simplify anytime you’re having a problem you just fucking simplify it a little bit make sure there’s not other stuff going on that doesn’t need to be going on right now okay we essentially need to find out why these are we’ll look at this now icon size icons social icons icon size okay uh let’s make sure nothing is set in nope no custom css there can i override it here icon size yes yes i can okay so why can’t i override it here root icon size i can it was the variable you’re in no it doesn’t okay um okay that’s got to be an undefined token i’m assuming i’m assuming it just doesn’t no it’s it’s it’s definitely defined does it just happen to be the same fucking size that that’s probably what the problem is icon size so what did i what did i ask it to be xs that’s the problem my gosh dude it just happened to be it just happened to be the same size i was already looking at that’s why i didn’t see anything changing okay um so yeah so this is the and then then you would obviously for your xs icons you would adjust your padding okay that’s the next thing we’re gonna have to figure out why why that padding didn’t change uh oh i know why uh yeah yeah yeah yeah okay that that’s gonna be okay that’s gonna be a downside of setting the size via via this right here because variables can’t do two things at once right so this is where we’re probably going to want to go back to a data attribute kind of approach um and and i’m thinking data attribute almost on well i mean yes you would you would do it like this manually so you would do icon size is yeah this is what you would do icon size xs icon padding you just have to remember to do these at the same time we could we could we could do it with a data attribute approach but look at that that’s perfect okay um we can also do it with a recipe so to make it easy on people there i have to think through that i have to think through that but now i’m free to come in and say because that’s a little small so i’m going to go 16 pixels and i’ll leave that at six on the padding and i can really just dial in what i want my like xs icons to be um which down here that’s affecting these as well uh you can notice they already have hover styles that are programmable um this one is a clickable parent card so it has a little bit different context that we have to deal with actually i undid the links on those anyway but if they do have links you can style them already so that’s done in dark icon styles icon color and then you have your hover styles right here so that’s nice so we we we’ve effectively fixed the card situation so any card that i’m doing um this can be an icon card let’s go this is also using the card frameworks you can see right so let’s do another icon card notice it gets the card styles like it’s just i just made up a new class but it aren’t it automatically gets the card styles because it’s i have it set to automatically uh find cards um and then all i have to do here so another icon card icon would be this so another icon card double underscore icon and bang now that’s picking that up as a as the official icon of that icon card and giving it the same size and styles as this other icon over here um this still has social icons so it’s going to match what’s going on over there that’s kind of like its own little uh thing all right so okay let’s review a minute here so we’ve done we’ve mapped out all of our icon sizes we’ve paired those with their own padding values so those two things can be mapped together that’s very important when you’re setting icon sizes um we can set whether we’re using dark or light icons as the default we have an icon radius that automatically maps to our website’s radius i mean you could come in here and do 50 vw and now all of your icons are circle icons what we need to do next is handle this boxed situation where because are you guys on the same page with me that like if you’re going to use boxed icons you’re going to use boxed icons you’re not going to randomly alternate from like well these are going to be boxed and these aren’t going to be boxed like i that seems like very chaotic to me it wouldn’t be a good design like choice right um so i think what we need to handle is just somebody opting into because here’s the thing if you’re not going to use box icons you don’t need padding padding does not need to exist in fact should not exist and then at that point borders are irrelevant borders on icons are irrelevant if you’re not going to use box padding is irrelevant background color is irrelevant if you’re not going to use boxed once you opt into saying my icons are going to be boxed now we have to give you padding border um whatever else i just said right i think it should be something you opt into i’m gonna i’m gonna go to chat real quick here yeah so boulder says yeah you got to have consistent icon shapes icon in an icon let’s say contact versus icons for social the former wouldn’t be boxed the latter might so in that situation you wouldn’t um well we we could have a we could have a utility class that turns off the boxed styles at that point so for like one-off cases because remember what we’re trying to do the framework is trying to cast a wide net and handle almost everything but then you can handle outlier situations with simple utility classes or some other like just turning things off or whatever in in one-off scenarios um so i’m not concerned with like finding a perfect balance i don’t think i’m you have to be okay with perfection not really existing and you want to say i want to cast the widest net in the most efficient scalable maintainable way possible and then i’ll handle outliers separately um that’s kind of what i’m trending toward right now okay okay uh also ratio will allow you to adjust these ratios and multipliers based on screen size or context if necessary this must come from a okay i think just use a ratio between icon sizes and padding consistent and balance eg ratio three yeah i thought about doing ratios um i think icons are one of these things where so coming from a design perspective i don’t know any designers that consistently use an icon like ratios for icon sizing they already a lot don’t do it for typography um so i’m just i’m just thinking like the most straightforward approach is just mapping these sizes manually based on the design or based on the look you’re going for i don’t think ratios would i mean it would be it would be great it would be fine if you could override them i’m thinking about infrastructure and just like that’s a lot of work it’s a lot of extra work for a situation where most users are probably going to opt for manual sizing values and they’re not going to use the ratio so you you guys would have to convince me that a ratio is really important to have if if you can convince me that a ratio is really important to have we could make it based on a ratio but i’m right now i’m not convinced um we could have an exclude parents list like we have for so many other elements that way we can exclude links or buttons yeah exactly exactly right um yeah that would be yes there would be like an exclusions area here like you could say okay in this card right here um i want to i i want to you not be boxed or something like that that that’s that’s that’s always a possibility what we i think we’re decided that that it is a good idea to opt into box styles it’s kind of like the box layout situation right where you have to opt into a box layout for your website so you go to layout you go to box layout you opt into a box layout okay um that’s i think that’s the direction i’m going for so this would be an options um what we need is an option for box styles and then we’re going to have to figure out how to handle how to handle that okay so let’s let’s go to vars um up here with the options so uh let’s go option boxed icons uh let’s turn this on for now option boxed icons okay let’s go to let’s go to jason here um let’s go to let’s just grab a toggle that already exists from here and we’re going to have to go down to icon options let’s pop this in here and we’re going to say option boxed icons all right and then this boxed icons okay uh probably find a better name for that i would think um i i’m i’m thinking i’m thinking boxed icons should be the default uh the argument i would make for this is like a boxed style for icons actually hides a lot of icon imperfections and also when you’re worried about icon content alignment having boxed styles really really helps really really really helps with perfect alignment um in various scenarios so for that reason because you can always turn it off um i i’m thinking boxed should be the default so i’m gonna i’m gonna default this to on uh we can get rid of this style primary and tooltip okay use a boxed um used use boxed styling for icons now we’ll we’ll make that better later okay uh let’s go back let’s refresh let’s go icons options there’s our boxed icons let’s save oh dear hold hold hold hold the phone what have we oh did i reset all these no i didn’t think i did size s s oh they are all the same size okay 16 24 30 i just i need to see some differences here it’s starting to scare me when i see them all looking the same like what happened 60 and uh 92 okay there we go i just need to see a little hierarchy calm calm me down here i thought we lost some things we didn’t we didn’t lose anything though we’re good okay all right so now we have an option now what are we going to do with that option is the question okay so uh let’s go to the mix in the controls uh we don’t even have a mix in for our styling yet okay that that’ll add complication um let’s let’s separate this out real quick this is going to be this is going to be in here okay let’s put all these things together that don’t actually matter okay this is going to be static uh this is going to be all right color colors uh let’s put background in there um let’s go dimension start to put some sanity in in here box size and content box can go up there um pad padding padding we’ll keep that in dimension let’s go borders border radius let’s go uh transition okay great fantastic so what did we say now now now now now now now we think about something now we think about boxed styles this is this is where i might go with this okay so padding is a boxed style um border radius would be a boxed style uh height and width are not background is a boxed style okay so we have three boxed styles so far i don’t think anything else um border when we do border which i haven’t done yet will be put in here as a boxed style okay fantastic so let’s leave those in boxed styles now what we can do all right if option um boxed icons is on and we’ll just put these in there okay all right and let’s go blow this up now so let’s go icons options boxed bang bang okay they’re no longer boxed um all right um here’s the thing now uh uh we’re gonna have to do some logic in the json file okay um because we don’t want to show we can’t be showing padding when you can’t actually do anything with it right we don’t want to show background when you can’t actually do anything with it so let’s experiment with that real quick uh let’s go to let’s go to json here all right we’re gonna go let’s start at the top let’s start at the top let’s start easy and just see if we can make something happen here all right so this is gonna get display win um option box icons i like that okay so let’s do it with s xs and s okay refresh icons icon sizes good stuff you have to cheer for yourself every now and then okay it’s very important you know you i don’t have a cheerleader in the room with me and there’s no in the office i work by myself from home very important cheer just take a break cheer for yourself from time to time it really helps with the morale uh it’s just it’s great okay let’s go do this on padding let’s go do this on padding l let’s go do this on padding excel on xxl let’s go do this on radius oh look you can even control i set it to you can even control that remember that data attribute data icon you can actually set that manually right um you can override it essentially so radius is one of those that’s going not show up um icon default style dark dark okay dark styles our backgrounds uh that would be this hover container and background combo okay the light’s not done yet let’s go back and refresh oh fuck oh fuck just broke something okay that’s what that’s that’s probably you do a lot at once there it is it’s commas commas commas commas can ruin your life in json files they can they can uh let’s go to icons let’s go to save uh we don’t even need to save this okay no paddings no backgrounds now i turn them on everything comes back to life this is an area where once again you got you gotta you gotta cheer for yourself a little bit okay can’t be a slave driver of yourself you know you gotta be gotta get yourself hyped sometimes okay uh is there an acss plugin beta version um no no there’s no uh i don’t know what you mean by beta version um no i stopped doing betas what i do now is experimental so there are experimental features uh they’re always off by default obviously um you activate them if you want to play with them and if they break your site you turn them off um we don’t need a beta necessarily because you’re in control of whether that experimental feature is running amok on your website or not running amok on your website um so the card framework right now is experimental we also have an experimental area under options experimental and you can do some other you know site-wide settings that are currently experimental and we ask a bunch of people to test those out give us feedback make sure they’re stable we we i turn them on on like all my sites because i don’t care if my sites break or not um and i you know i try to use them and then they graduate out of experimental and become part of the official framework right okay so um what i want to do now this is good this is really good because now you could just easily i mean look at this look at this let’s just recap real quick you can go icons you can go off with the boxed you can go off with the entire icon framework and look at this look at this dog doo-doo that you’re starting with right here you just throw in icons on a page just throw them on the page and i don’t have to do anything to them i don’t care if they’re svgs i don’t care if they’re eyes i don’t care if they’re fills i don’t care if they’re strokes all i’m gonna do is i’m gonna turn on the acss icon framework and then i’m gonna i want boxed icons on my website i don’t know about you so i’m gonna i’m gonna turn on the boxed icons i mean look at where we’re at with this look at where we’re at with this right out of the gate okay what i want to do is handle this section in here which are these would be these would be light icons right because they’re on a dark section um these are dark you can actually do this logic either way uh and you know being uh well yeah yeah i don’t i don’t know i don’t know i don’t know i don’t know where i was gonna go with that i was gonna say being dyslexic i fight with myself all the time like should it be should these be called the light ones because they’re on light or should they be called dark because they’re actually dark and then down here i’m like ah i mean should these be light because they’re light but they’re the same as the dark up here or should they see this breaks my my i’m my dyslexic brain cannot handle this uh this little logic situation right here all right but we’re gonna work through this the question is how do you tell acss which like by default they’re dark because we have a default selector right you can go to a global icon there’s default icon style darker light right right now i’ve got it as dark so they’re all gonna be dark which is weird too because the the text is dark but the background’s light i get it i i i don’t think there’s a i don’t think there’s a good way i don’t think there’s a perfect way to assess the situation here the way i’m handling the logic is if it’s on a light section and you can see it it’s probably a dark icon okay and if you’re on a dark section you’re gonna have to use light icons and figure out what you want those to look like and it’s going to come down to what you’re actually doing with your designs at the end of the day um and you could totally reverse the logic on your own if you wanted to reverse the logic you just use them the opposite of how it’s fine it should be fine it shouldn’t be a problem right the question is how do we tell automatic css that we want an icon to be light or dark are we going to do this with utility classes are we going to do this with data attributes are we going to do this with both i don’t want an icon a data attribute to have to be on every individual icon i think a situation like this you want to tell it just this parent element should be determined that all of its icons are going to be light or dark right that would probably be the easiest way to do it so we could start with utility class for this um and this would be called like icons icons um or just use you know what we can just use icon itself we have we we have the word icon double dash size we can do icon double dash and it it can actually work for individual icons or for groups of icons that shouldn’t be a problem whatsoever so let’s take a visit back to classes um okay and we need to reference our map we need to see what our map looks like so we’ve got and yeah and what do we want to do what do we need to change it’s it’s going to be the dark styles okay dark color color hover background background hover so if we loop through light let’s get this on the same page um color hover this map needs to be on the same page with this down here okay so we’ll do background hover and light background hover okay so those two are equal now and i’m thinking if i if i’m thinking about this properly we just loop through the light map loop through the dark map to generate some utility classes okay we’ll call these style classes we’ll say each size value in icon uh what are they called icon light styles in icon light styles and yes we’re gonna go no that’s no it’s not what no no no no no no copilot you’re you’re fired you’re fucking you’re so fired you’re so fired okay um icon light no what are you doing copilot what are you doing icon light um uh oh no i did size i did size i i confused copilot uh each prop let’s each prop value okay um let’s do prop here and let’s do value there each prop value in light styles is mapped to icon light let’s duplicate this loop and let’s do dark icon dark styles okay let’s just take a trip over to our output let’s search and fucking nothing absolutely nothing on the output as expected right okay uh icon light color hover doesn’t exist it’s right it’s it’s 100 right okay let’s go hover here let’s go let’s do the background while we’re here okay there they are there they are okay um okay i see the problem here i see the problem here where are my classes okay let’s go back down to here so we don’t actually want to output the prop um and i’m not i’m not going to be able to see we have to remember i’m not going to see any values in the output here because they’re not they’re actually nulled they’re all nulled in this in this copy right here so um but for uh demo purposes we probably could use some values here uh so our light color for a light icon would probably be something very light right let’s do primary ultra light and then the hover uh i would say is primary light oh dear that okay primary light and then for our light background that would be dark right so let’s go primary ultra dark and then just do primary dark here okay um take that whoa whoa whoa okay take that out we get there we go we get some actual values now okay color color hover but now we need to fix the loop um okay we actually um okay we actually um okay this actually needs to be icon prop i believe icon because these are it’s it’s the props we’re trying to override um icon dash prop okay um but but uh this loop is fucksville this needs to be out of here here icon dark okay this will group them uh there we are okay and then same thing with this loop okay thanks thanks thanks a lot all right icon light icon dark this will make things look like they’re supposed to okay that’s much cleaner um okay i think i think we’re good there all right let’s go to the problem is we don’t have any of those things in our we don’t have any control over them because light icon styles is empty so now what we’re going to do is we’re going to go to json and we’re going to look for uh light uh dark styles dark dark dark styles okay let’s just grab this and this that gone this duplicate dark okay yeah yeah thank you thank you thank you thank you thank you thank you thank you okay okay light light light icon styles everybody good are we good we good we good we good all right they need different defaults though um icon light color primary ultra light color hover primary light ultra dark dark okay i come back around hover hopefully all the commas are in the right place okay icons light icon styles dark icon styles fantastic okay now go refresh here and let’s try out our let’s go icon uh these are going to be these are going to be light right right all right icon light icon light icon light okay save okay nothing has happened always a good sign i think i already know what a problem might be it’s going to be another specificity issue um maybe perhaps let’s see where let’s see if it output anything first first off did i save did we regenerate ah there we go there we go um is it just because i don’t have um is it just because i don’t have it because i think these colors just match each other let’s go uh bg yeah there we go there we go let’s just leave that background color off for now let’s just deal with this situation okay all right see now my brain’s totally fucking confused that’s that to me i would describe that as a dark icon wouldn’t you what what would you guys describe is this a dark is this light what what are they what are they here’s set a up here here’s set b right here we need to vote we need to it’s election day after all we you got you got to vote this is completely broken my brain at this point i don’t know which one’s light and which one’s dark are we looking at the icon or we look at the box layout backgrounds because then if you turn the box off you’re going to be a whole different situation okay um it will be nice to have an option to switch automatically icon color based on the parent background color if it’s ultra dark dark background automatically switch yeah yeah obviously yeah color relationships have to come into play here but i mean that’s why i said we’re we’re we’re 20 down the runway right now i mean there’s so many things so many things still left to do and think about okay all right um it’s based on the background says john okay the background dark equals dark in my brain okay i can go with that i can rock and roll with that now i’m gonna i’m just gonna throw a little i’m gonna throw a little curveball at you right here okay because you you go do all these dark styles and then you go i don’t really want them to be boxed so those ones you just told me were dark what are they now what are they now right ah ah we’re stuck we’re stuck they look pretty light to me see see huh it’s a problem isn’t it it’s a problem these damn icons these damn icons and their and their problems yeah but they’d still be on a dark background i get it i get it they would be on a dark background but the icon itself is light it’s like when you say text light you want light text you want you you’re asking for light text if you say icon light you should be asking for a light icon right it’s not about the context that it’s in it’s about what you’re asking for right i don’t know i don’t know i don’t know programmatically change the icon to dark the dark background is missing now i don’t i don’t know we can do that i don’t know if we can do that it’s gonna be a little heavy-handed now you could say hey the the logic is based on the background of the section or the element or whatever but that’s still confusing too you know imagine if this one would be light how it’d be in relationships relationships are mapped to the backgrounds right um but i still don’t know that that’s going to influence this at all but i’m gonna i’m gonna turn this back on just for now let’s do it your way let’s just let’s do it your way for right now okay um let’s do it your way for right now all i need to do to do this is to flip the defaults okay so if we just flip our default value why do i keep opening that let’s flip our default values so let’s start at where are we at here let’s go uh okay there’s default styles let’s collapse default styles where is is this one there we go dark styles okay so icon background primary ultra let’s just do primary dark okay and we’ll do primary semi semi dark on hover and then for icon oh then go back up here so i guess we do primary light and primary semi light on hover okay all right and then we’ll go down here and this will be primary ultra light and then this will be primary light this will be primary dark primary semi dark there’s our new values let’s refresh let’s go to icons dark icon styles reset reset reset reset okay reset reset reset reset reset save there we are okay so now you guys are telling me these where’s my where’s my mouse these are dark yeah and these are light are we on the same page this is what we want i mean look at how seamlessly those change by the way uh let’s go change to light we want light as our default let’s see what happens there oh my god this is just it’s like magic in your in your fingertips why did these change though why did these change i think i know why i think i think the problem i ran into and i was just doing it for testing purposes let’s go to here i was doubling this to double the specificity but i’m thinking some shit’s about to fall apart some stuff is about to fall apart yeah look at this alignment alignment we’re missing now less fell apart than i expected it to though and it’s because of bricks this is all bricks’s fault honestly uh let’s go let’s go here and see what’s going on um hmm yeah they so it’s actually font awesome but i think this comes from bricks if i’m not mistaken like this is in a no i guess it’s font awesome’s own style sheet so they put a class called fab which is not short for fabulous um and they put it on all of their icons and what they do with it is uh and then ion icons does the same they look at all this they do they try to look at that they change the display to inline block nobody can ask for that nobody asked for that okay okay quit doing stuff if you’re going to do things that nobody asked for do it with no specificity i mean look at you you’re out of control with this zero one zero this is i mean quit doing this stuff now we’re in now we’re in a specificity battle we don’t need to be in and how do i fix this how do i how do i how do i the only way i can fix this is to go one up on the specificity and now we’re in other problems in other situations all these people with their with their with their their their their their defaults their specific defaults look at bricks bricks trying to throw a font size 60 pixel on every icon who who asked for that who asked for that how do i turn that off bricks oh i go to my theme styles let me go to my theme styles real quick let me find the icon element oh there isn’t one there’s an icon box that doesn’t do me any good i didn’t do any good how do i how do i get rid of the 60 pic i didn’t ask for that how do i get rid of that i got nothing here there’s nothing here for me nothing here to get rid of this why why are we doing it why why are we doing that don’t be doing that here i am with my nice clean data icon which i was going to use specificity zero on because you shouldn’t need anything but i got to use at least one and now i got to use something different than one and this is this is not this is not this is not well done okay this is where these builders they they doing too much okay they get in the way they do too much they do it for no reason you don’t need to do there’s no reason to do this there’s no reason at all this is what i got to sit here and deal with i i should send an invoice over to bricks send an invoice peggy peggy get an invoice to bricks and to ion icons and font awesome three hours extra okay we’ll get that taken care of all right let’s um i i i don’t know where to go from here i don’t know where to go from here with this um i i could i could attach now now we’re going to put ourselves in different situations where i i i could say i could i could say oh dear oh my what just happened what is going on are we still here i don’t know what happened it took me out to the login screen of apple are we still here are we still here trying to sabotage me okay let me know if you could say i know there’s a little delay let me let me see if you can you still hear me can you still see me i went all the way out to the apple login screen i don’t even know if you guys could see that okay uh let’s go to what i was about to do we could do a like a is svgi and i think that’s only going to add one small tiny layer of specificity okay it says we’re here all right let’s um let’s save and see what that does ah there we go there we go and now if we look at it we’re just playing with specificity here yeah look at this so now i’m a zero one one instead of a zero one zero it’s the tiniest bit of specificity that i can add to get the job done and i i think we’re back in action here okay why not use the same bg verse text argument for light and dark i’m dyslexic too yeah well right now what we need to figure out is i’ve got a okay yeah yeah this would be um so icon dark would now get you your dark icons oh that’s beautiful that’s beautiful okay i’m liking it i’m liking it i’m liking it all right now okay okay now what happens now let’s put ourselves in a different scenario now let’s put these are the things you have to now i want to reference this okay we’re going to go to we’re going to go to giri.co slash blog okay and i want everybody to read this if you haven’t read this okay a css framework is required for actually is this the yeah yeah that’s the that’s where i made the argument for okay this is where i make the argument you’re either working or you’re frameworking a working is you’re working on billable stuff and frameworking is you’re working for efficiency and for yourself but nobody’s paying you to do that right and this just kind of goes to show all the fuckery that we’re going through right now to come up with a framework for managing icon styles across a website um nobody paying you to do that you’re paying me to do that for you right that that’s what we’re doing here this is the tremendous value of just having all this shit figured out for you done for you centralized done on every website on every single project it’s all the same it’s all going to stay the same very very valuable because what i was about to say is we’re going to put ourselves now in a situation where we say icon card which i don’t even know um that this is going to do anything right now because the card framework is still not complete we need to not be clickable parenting this stuff let’s simplify simplify simplify okay let’s go dark card light card okay all right fantastic light card dark card now where are we at i don’t even know where my brain is at with uh the card the card framework now where did we even leave off okay so if we just do a little inspection here i don’t think there’s any targeting in here for what is going to happen when it’s a yeah we don’t even we don’t even have the style into the mix in okay that’s going to be a whole nother situation whole nother situation that i don’t know that we can manage right now what time is it 12 30 we got 30 minutes that’s not going to be a good use of 30 minutes because it’s going to take way longer than that okay so let’s figure out what we want to do next uh let’s go let’s go border let’s let’s manage borders i think we can do that i think we can do that with the final time we’ll q a we’ll do a little q a if possible um okay let’s let’s get this done so let’s go to vars let’s look at what we have for border here i don’t think we have anything for border all right so we’re going to go icon light border and uh first of all i’m going to take these uh we we can leave the defaults i get i guess okay um all right icon light border is going to be var border i i would really like to because we’re going to we need to leverage the global border system we’re not going to try to create a whole i mean we are going to have the options it’s actually going to be like cards so if i look at cards how this is done in cards go to cards and i say what is what has happened with our okay there we go uh let’s go to cards and let’s go to borders so there’s an option to use the global border style but if you don’t want to you can set a manual width style color yada yada yada right i think we’re going to have to do that the exact same way for icons it’s unfortunate i wish people just use the global border system but if you for some reason you need to abandon the global border system so now uh option uh option use icon icon light use global border on by default okay great fantastic now if that’s the case if that’s the case icon light border okay we’re gonna have to map all three of those properties to the to the icon border icon border okay let’s let’s let’s do this first let’s bring this down here option icon dark use global border on for both of those let’s get a switch i don’t think it’s smart to do too many things at once let’s go step by step by step at least for my uh pea sized brain we’re gonna have to go step by step so uh let’s go to icon dark color combo that’s color that’s background and then we’ll do an option switch um which is option i’m in i’m in dark so let’s do id icon use global border okay use global border okay use global border i’m actually going to need to we need a container we need uh id yeah okay let’s go icon dark border container all right let’s go border styles and option no type is uh what is it section section container um don’t need a default value for that don’t need a tool tip for that uh we do need content and we’re gonna need some brackets and that and then we’re gonna take that and slap it in okay refresh uh we don’t need the builder right now let’s refresh here oh definitely broke something um um oh fucking commas man whoever this jason guy is made a bad decision with the the the comma stuff okay uh let’s go let’s go to let’s go to icons dark icon styles there’s my border style section use global border we can turn that on or off okay now we work through this as let’s leave that up let’s bring this over here so um icon light border width okay let’s just use that’s sure whatever okay icon light border color icon light border style fantastic okay um now in our border container let’s do a steal a select input from right here and bring it down here okay icon light oh fuck i’m doing all the light okay light use global border all right let’s bring these down here dark uh yeah okay sure i don’t the values don’t matter right now okay um icon icon dark border style icon dark border style dark dark border style uh select default solid solid uh this should copilot itself out great okay um default solid options this display display win um um icon dark use global border is off icon dark use global border is off fantastic okay that’s gonna be the style now we need the color give me something give me something suggest me something suggest me something is there any way to force copilot to make a suggestion i’m just start doing it myself maybe it’ll catch on hey there you go thank you okay fantastic all right um default one pixel icon dark use global border see it’s dumb it’s really dumb sometimes off um okay okay you can uh the tool tips are are no good either okay get rid of that we’ll fill those in later okay icon dark border width um this should be probably yeah color right border color dark border color text var var don’t care about the value yet display win is off default value save all right any missing commas nope all right icons uh dark icon styles global border off there they are okay fantastic um but we’re gonna use well okay now let’s think about this logic here okay okay hmm icon how are we how are we first of all let’s get let’s get uh let’s get the output here is this cards no this is icons okay this is correct okay okay well box styles it’s gonna be in here right border var so this is gonna be icon border um yeah okay all right we might need yeah yeah yeah yeah yeah yeah okay i think about this okay now there’s a lot going on now there’s things there’s things that now have to happen in like three different places now so my brain is trying to work through how exactly we want to approach this all right um where’s my map okay all right all right first thing we want to do is get these output in the map so that we actually have tokens for them so border width icon light border width that’s correct that’s correct that’s correct that’s correct okay now down here icon like border color border so yeah okay that’s good that’s good that’s good okay let’s go look at our output icon light border width light border color light border style dark border width dark border color dark border style fantastic okay the radius oh um the next thing yeah icon radius is not related to the colors so that’s fine we want to default we want to default icon just like we did with go to tokens just like we did with these so let’s think about this icon border um that’s not exactly what i was thinking let’s null this for a second icon icon icon well yeah icon icon border okay we want to package this all in for all okay so if if those three styles are let’s go to you let’s go to vars i think something’s gonna have to happen right in here uh dark border styles okay use global border is on actually um actually there’s a little bit of extra logic that we have to put in here for uh for uh for the map mm-hmm oh the other thing too i was just thinking about with box layout box layout is gonna have to control like like pat like padding for example like this right here if option boxed icons is if option boxed icons is on then we need to loop through these i don’t need to we don’t need to be looping through these unless that option is on the sizes we do need to loop through this actually can move down here yeah yeah yeah yeah yeah yeah that’s good okay now that we now that we did that we need to test that real quick so off we should see those disappear from our output there they go okay good fantastic same thing with border though so you can’t be doing border stuff um there this icon border right here generate icon padding tokens how about generate boxed icon tokens and then this can go inside of that if statement okay icon light icon dark now handling the logic here for these light and dark because the remember the background property right we’re gonna need to we’re gonna need to add some logic in for that so because essentially let’s look at the map yeah so if we’re outputting light styles we don’t need to output any of these unless boxed is on we have a light styles map that might be how we finish actually here we’re gonna we’re gonna run out of time um how do we want to do this each prop value in light icon styles icon so we’re gonna need to separate this between hmm hmm hmm like color color color color color color okay i’m not gonna handle that right now it’s two two different things that have to happen in order for that to happen okay this might be a good a good a good stopping point we haven’t actually done anything really with the output yet we do have something called icon border and i just need to i just need to map all the values properly so i’m going to take a break i’m going to do q a with our last 10 minutes we’ll do some q a um okay let’s do some q a let’s do some q a i don’t even know if this is going to be you know i got we got 108 people watching i think you know viewership hasn’t been i don’t know what the peak was i can see why this would get it it gets exhausting after a while it’s a little tedious after a while right sitting here figuring it out it’s a it is interesting i think to a you know a good chunk of people but we’ll do a poll we’ll see if you guys want to do this again we will do q a now for the last 10 minutes so what i’m going to do is search for hashtag q you can also tell me in the comments if this kind of stuff is helpful or interesting or whatever uh let me go to here okay when is the next wp town hall this week in fact let’s see if mark threw it up there while we were working on this wp town hall.show uh it’s not scheduled yet okay so we’ll get that scheduled this week though does boxed equal circle 2 yes uh boxed would equal a circle uh layout yeah uh will this work for icon links um icon links would be a situation where well i mean yeah i mean theoretically i don’t know if you want those to look like all your other icons though because they’re they’re typically used in a different context but like if i went into the builder and we did a well like okay here’s an icon so let’s wrap this in a div and oh yeah sure whatever all right let’s wrap this in a div and oh that’s okay yeah there we go let’s just throw some text in here like um follow on facebook right and let’s do text xs um text x s and let’s do uh row um flex i never use the uh i never use these but hmm center no no no we want center center center center center center center this center right here okay um follow on facebook and now we could just make this a link right let’s just see what happens so html tag a link and select link type custom url pound sign save um let’s go few on the front end there you go and you have hover look at the hover working automatically i didn’t have to do anything i didn’t have to do anything it’s just fantastic i’ll just change the gap to xs there look at this look at this now your typography you go text xs a little looking a little small go 15 and 15 now our text is a bit bigger save there um yeah i mean great look at that it’s zero effort just zero effort right you got a you got a icon links got your hover styles already pulled in it’s great right it’s great okay um makes more sense to not make m the default but let m be m and then allow the user to just input the size that should be the default since the default should be the commonly used on the site design i mean m is the default for everything else text m is your default text um padding m is your default padding section m is your default section padding it’s uh that’s just we have to follow how it’s done in the framework when we need to control things well that this is the yeah this is the beauty of this like on an individual icon i could come down here and really target any anything that i’ve already done right so like icon color red and that one icon is going to be red right um icon background uh linear gradient red blue i’ve now got a gradient boxed background style like you can literally do whatever you want on any end of it or even groups of icons look at that this is like you know you’re it’s going to be very super powery right like you’re going to be able to do tremendous things and i’m doing this while my global padding and all that and size all that’s staying the same it’s untouched right but i could just quickly quickly manipulate i mean i don’t think we understand necessarily like you know the flexibility that this is potentially going to provide general where where are we where’s custom code here we go um look at this i mean look at this that we’re able to do i mean this is just um you can do whatever you want here uh now we’re now we’re in uh let’s let’s the area of just let’s go ahead and go like i want primary um those those are light icons right let’s do primary light and let’s do var primary dark look at this look at this semi semi dark okay let’s go primary i mean i’m just doing this at the page level to manipulate large swaths of icons you do this on the uh template level specific brand templates give different body classes i mean look at look at what you’re going to be able to do the control the control you’re going to have it’s too easy it’s too good right and i’m not even i’m i’m i’m 20 of the way through this through working on this um yeah if you can’t think ahead i mean this is tremendous tremendous put an lfg in the chat if you like that kind of thing if you’re if you’re like oh oh i see now oh i see now what’s going on right okay put an lfg in the chat right let’s go to hashtag q all right um what about using something like that for the padding calc icon size times 0.4 yeah you could you could already do that for sure you could already do that um does color scheme alt class work on the icons uh it will it will this has to be compatible with both color scheme think about the just try to wrap your brain around this right that this is going to be compatible with color scheme it’s also going to be compatible with automatic color relationships inside of the card framework or outside of the card framework there is nobody has even come close to managing icon styles in this form or fashion it will it won’t even be close um this is what like leading the charge like innovation um you know thought leadership that’s that this is what this looks like this is why you have to sit around with headaches going all right how are we going to do this how are we going to approach this all right how’s this logic going to work all right and we we haven’t even got to the hard part the hard part of this like once you start going all right compatible with dark mode light mode all right compatible with automatic color relationships now now that’s going to take us into a territory of like brain breakage it’s going it’s going to be it’s not going to be easy this is not going to be an easy uh scenario but we’re going to get there we always get there i always get there okay it’s good it’s going to happen you have to have faith in yourself you have to celebrate uh the little wins that you have along the way and you just got to know we are going to get there we are absolutely going to get there how to select color transparencies in acss right click context menu uh that’s an easy question very easy question so you would come to uh like this and um let’s say i want to go background right so i right click here’s my colors see that little carrot right there that little down arrow signifying that there are transparencies available for that so i just hold command and when i hold command all the options fly out and then i can just come down and i can choose any of the transparencies that i want and now i’ve set that background color with transparency right there so it’s all about the command key and then the same thing for same thing if you’re you’re doing sizes of stuff um or actually like breakpoints like if i was going to do a grid for example see all those little arrows they indicate all of these things have breakpoint options attached to them and so that’s what allows you to quickly come in and go grid 3 grid l2 grid grid m1 whatever whatever combinations you want to do um but the command key or the control key on pc i believe is the secret to accessing all of those um you could also do i mean think about like box doesn’t even have to have a background necessarily guys you could um you could come here to let me go back to where i was controlling this at the body level because you could do icon background and say transparent right so now what you would say is um i’m just gonna say border uh and we’ll just say border right um let’s save and let’s see if this outputs uh let’s go to let’s go to borders and dividers borders uh with one uh primary dark trans 10 uh oh it’s probably yeah okay all right border color dark let’s try let’s just do black for a second let’s see if this is going to work and pick it up i want to see why i wonder if i’m gonna have to do oh because border set to icon border already so i could just i could just override it like this i guess there we go okay that’ll work and then i can put this back to whatever i had it to so borders borders instead of black let’s reset it back to um this this would actually match the the were these the light or the dark were these the light or the dark oh yeah see now that flips the logic because you go transport we did lose our that see that’s the problem i was alluding to earlier is it was only a dark icon because we had a dark background but what happens when you abandon the dark background you go for something else right i think it’s going to be a situation where you just have to use it within the context of what you are doing on that particular site because now these are light icons they’re not dark anymore um and that that will absolutely break your brain now thankfully it should be easy to fix so we go to icons and we go to uh dark i well yeah so okay so what we do is we just say well it was light hold on did we put a class on this we put a class on this section no we did not okay so these should be the default icons we want the default to be light aren’t these dark down here this this breaks my brain dude absolutely breaks my brain these are dark these are light so if i go to light let’s just go to light for a minute okay icon color um that’s not primary dark that is not primary dark right there what’s going on yeah oh yeah i’m overriding them that’s why that’s why that’s why it gets a little chaotic it gets a little chaotic at times okay um let’s go to page settings custom code yeah that’s why okay hmm there we go all right let’s do primary dark and then we’ll do primary dark on our on our border but i you know it’s not my default border style i’m just gonna go um this would be one pixel solid var primary dark also i don’t know if that looks great but i was just showing how you can do outlined uh icons as well essentially um primary dark trans that’s where transparencies come in really helpful 20 something like that there you go you can kind of do whatever you want dial it in but that’s the idea all right your thoughts on the direction of the arc browser i don’t know i abandoned it i i just i don’t understand that move i just when brands do shit that i just doesn’t make sense in my brain i’m like i i don’t know i’m not with it i’m not with that okay uh i don’t know what they’re doing what are they what are you doing what are you i don’t understand what what are you what are you doing what are you doing arc this isn’t the browser company what are you doing does this make any sense doesn’t make any sense so you know what i don’t have time for the fuckery so i’m i’m i’m out for that reason i’m out um okay let’s go back to chat we’ll just say bye there’s not many questions today so i think everybody was just here to chill and hang out it’s gonna be a crazy day it’s crazy day guys in the us of a it’s a crazy day we don’t know what’s gonna happen um i’m just doing i’m just doing work i’m just head down doing work um you know i gotta do softball practice tonight it’s all i’m concerned about it’s all i’m concerned about i’m just trying to get my work done all right what do we general feelings before we leave um are you hyped about the icon framework do you see the value of the icon framework let me know you know it does help when users are hyped about certain features and things ross gave us an lfg john hussey oh yeah got a lot of lfgs that rolled in this is great this is great yeah i think people are gonna really like this i mean this is gonna be because it’s it’s one of those areas where it’s just a massive let’s let’s recap i mean it’s a good idea to recap so let’s go to icons and let’s say hey boxed icons gone look at this just everything falls apart when you don’t have acss this is this is the world before acss’s icon framework right here look at this dark desolate world that nobody wants to let nobody wants to live in this world right here and so you say hey acss help me out help me out all right let’s turn on the icon framework things are coming to life remember box is going to be on by default look at this everything managed look at our look at our cards look at our card icons right i can just start start customizing and manipulating to my heart’s content i haven’t touched a single style on any of these icons not not not nothing not one thing that i touch on any of these individual icons this is all done globally from the top down the only thing i added was that little data attribute data icon that’s it right here data icon all of the magic runs through this one little attribute called data icon and i’m going to try to keep it like that that i’m going to try to make that the extent of it okay there may be other optional data attributes that we can use but the only mandatory one is data icon and as long as data icon is there then we are good to go all right um yeah everybody everybody sounds hyped i won’t be able to read your comments after i shut off the stream so but i am going to have a final question for you leave this in the comment like not the chat i’m sorry i won’t be able to read the chat i’ll be able to read the comments on the stream in the comment section though uh what i need to know is do you like the behind the scenes watch me work on automatic css framework stuff or is it a situation where it’s like all right i’ve seen it once i don’t necessarily need to see it more right um let me know know your thoughts on that side of things because we can do this from time to time or we can mix it as a concept for wdd live right if you guys like it you want to see more of it we can bring it back as a concept next month whatever or just say ah yeah it was interesting but i don’t need to see it more in the future right because i know you guys aren’t probably using sass to the level that it’s used in automatic css you’re probably not uh maybe not even using sass at all um now there are some things you learn about general css as we go through that obviously but i don’t know you have to tell me you have to tell me all right um that’s it i gotta get out of here more things to do i love you guys thanks for your support i’ll be back next tuesday and uh take it easy today take it easy today okay