0:00:00
Yo, hey, how do we have, we got a hundred people like just waiting, waiting. The stream hasn’t even started yet. What’s up everybody? Welcome back. It is another Tuesday. It is another WDD Live. We’ve got Dan in the house. We’ve got Amanda, Ian, Ernesto, Marcus, Mark, Manny, the Hunzi, Pedro, Michael’s here, Callisthenics Ireland, D123.
0:00:29
Of course, Andrea is in the house. Klaus is here, Steve, Andre, David, man, lot of familiar faces. Livio, I love it, I love it, I love it, I love it. I love it. Kevin Geary equals whilst cooking for the basement team, I guess. I don’t know, yeah, basically like what has happened,
0:00:48
I’ll just give everybody an update, I’m too dumb to work on the back end of Automatic CSS 3.0, right? So I was like, well, y’all are having so much fun over there, I’ll just go cook up my own shit. And so, yeah, I think that it’s very important. Every once in a while, sometimes I plan this, sometimes it’s spur of the moment where I just like, I just want to do a little cooking, you know, like, I just want to, I want to try to, you know,
0:01:16
identify a common challenge and then like, what, what can I cook up? It’s like, you know, maybe a little solution. Now it’s very important. I’ll tell you, I do this quite often. And, um, I’ve, I’ve talked about this before. I mean, you don’t, you don’t just hit like home runs every single time you step up to the plate. Like I’ve got a lot of ideas that you know I went down different rabbit holes and shit just it’s like okay That’s not really gonna work. That was a dumb idea But you’ve got to do those things to try to find some like winning concepts, right?
0:01:49
And I don’t even know if you know what we’re gonna look at today is a winning concept. I have no idea yet I’m only I’m only I don’t know three hours three four hours into this whole thing. I mean, I’ve gotten a good amount done in that time, but still, what we’re looking at is very fresh here. And there’s still things to figure out. There’s still things to sort out. There’s still maybe like some, I don’t know. I don’t even know what we’re about to see, really.
0:02:21
It’s gonna be fun though. It’s gonna be fun though. So we’re gonna talk about what was the challenge, and what are we trying to solve here. I’ll talk about some facts about it. I want to show it to you, obviously. We’re all going to take a look at it together. But first I just want to continue saying hi to everybody.
0:02:39
How many people, okay, we got 127 in the house. I think the stream is going to continue to pick up here as YouTube sends out its little notifications. Okay, but dude let me tell you the work and education you’re throwing out there for free that’s gold right there seriously leveling up my game. Hey Amar I am I am glad to hear it glad to hear it I was just on a call yesterday actually a consulting call with somebody who was like man I like I’ve been doing the inner circle thing the automatic CSS thing the frames thing it’s like when I found you I was doing websites for like a thousand dollars. I have now a five thousand dollar minimum. I think
0:03:16
it’s about to go to a seventy five hundred dollar minimum or somewhere around there. He’s got too much like he’s just he the call was about like how do I start growing a team because I’ve got too many projects I can’t I need more people and I need to know like who do I find first where am I going to find these people how do I make sure they’re good when they come in the door like you know so these are the these are the problems I like to create for people. That is the best kind of problem to have, right? Okay.
0:03:42
Manny says, Kevin, I need more frames for Figma videos. Hey, those will be coming. Tommy, he won’t let me get my hands on the next iteration of it. So he’s cooking up something of his own over there. I don’t know, but we will get it as soon as possible. Okay, drop some likes on the stream. We got to get the YouTube algorithm to help us out a little bit.
0:04:05
I’m giving people a little bit of opportunity to get in the door here, because once we’re into this thing, people are going to come in, and if you come in in the middle of it, you’re like, what are we watching right now? I don’t even know what’s happening. So the more people that actually hear the setup and the context and the introduction, I think the better. The agenda for today is we are gonna look at this concept
0:04:28
called a Cards API. I don’t even know if that’s a good name. I don’t even know if that name makes sense. It’s really more like a Cards framework, but that sounds kind of boring, honestly. It could potentially have a better name. And it is along the lines of something like an automatic CSS almost for Cards,
0:04:47
because the things I like to do, I’m like, well, if I don’t have to do that I mean if it just can do it for me without getting in my way without getting in my way but if you could do it for me I mean why not why not just have it do it for me right that would be nice okay so so we will get into it Marcus good to see you good to see you post the recurring revenue retreat joining in to see what your products are all about hey I am glad to have you today, Marcus. I did put this out on Twitter and on Facebook,
0:05:18
which I don’t normally do, and we’ll just see. I mean, I’m brand new to the, I haven’t been using Twitter much prior to this. I’m starting to use it more and more and more, but maybe a few new eyeballs will come in from over there and from Facebook as well. Let’s go ahead and start diving into the concept. Oh, I was about to say my agenda.
0:05:42
Yeah, the agenda is we’re going to look at this Cards API concept. Then we are going to potentially look at some new automatic CSS 2.8 features that are very nice, very handy, very unique. Then we’ll just do a bunch of Q&A. I will say this, as we get into this cards API thing, let me go ahead and share my screen. I’m gonna pull up these, this is Figma, okay?
0:06:09
I’m gonna pull this up in Figma. We’re gonna be working on, this is what we’re gonna be working with today. And it’s kind of, there’s so much to talk about. It’s like, where do we start with this. Everything here, well, yeah, I’ll get to that later. You can ask questions. Maybe I’ll pause every now and then and be like,
0:06:32
you have questions about that? This is not baked into automatic CSS yet. This is not, this is all like literally sitting in my WP code box. Like it’s, this is, that’s how fresh all of this is. And I’ll just do my best to kind of explain how the process works. But first I want to take a look at these cards.
0:06:51
And typically when you’re working with a designer, I mean this is very common, right? You’ll get back like here are the cards you requested. So they know we’re gonna need blog post cards, they know we’re gonna need team cards, they know we’re gonna need feature cards because we’ve given them the wire frames. They see like a card component is kind of a unique thing
0:07:10
where it’s a self-contained concept, yet at the same time, it can have so many different variations. Yet at the same time, if it’s a good design, typically, a lot of the commonalities between those cards are still there. For example, like card padding, card gap, the space between elements in a card. Of course, you have the card heading size, the card heading color, when you use an icon, what is the color of the icon? When you put buttons in cards, how do those look? How do those behave?
0:07:46
Is there a dark variation to the cards? This would be considered the dark version of these cards. And what happens to all of these things when the variation is dark? And what about the border radius? And what about the box shadow? And so where you look at normal layouts in web design, just a general content layout or something like that, something that’s not a card, things
0:08:10
can be, there are consistencies obviously in the spacing and the typography and all of that, but it’s not like a self-contained component thing that you can work with. And also that stuff doesn’t tend to repeat all that much, whereas cards you guys know, I mean we could have grids and grids and grids of cards and cards all day and like lots of cards and there could be on a huge website there could be thousands of iterations of those cards and obviously we look at this and we say well we know we want maintainability and we know we want scalability. Those are those have to be there.
0:08:43
We can’t be just willy nilly designing up individual cards and just throwing it out into the world like we got to be able to control those things because we know clients change their mind, we know websites get re-themed, we know a lot of things that are gonna happen in the future, right? We gotta account for all of this stuff as professionals. And so we know we have BIM, right?
0:09:04
We have block element modifier methodology for naming our classes. We have component functionality coming in Bricks. And it’s already here in builders like quickly and others. So that does help a lot, right? But in the construction of the cards themselves, I think that there is a lot of room for improvement because when I’m building cards on a website,
0:09:29
if I’m gonna build this card right here, keep in mind, it’s not like card, card, card, okay? When you’re naming things, it helps to know what that thing is used for. We could call this maybe a bio card or like a profile card or an about card or a team card or something like that, right? And it’s up to you. It’s up to all of us to come up with the name of what these things are going to be, but
0:09:54
we want to name them so we know where it’s being used and how it’s being used. And we also want to be able to control this independently from these other instances, right? Because if you notice this layout right here, this left aligned stuff, is not the same as this layout over here where this is all centered. You also see that this has different elements, right? This has like the star rating, little mini component inside of it. The buttons are different widths on these. This one uses a full width photo where this one uses more of like an avatar style photo. This one doesn’t even have a photo,
0:10:29
it uses an icon instead for its media. Like these things are very different, but at the same time they’re very similar. Look at all the similarities. The border radius is the same on all of them. And this is like for consistent UI, I mean you wouldn’t want to see like a square card on one page and then a rounded card on another page. You typically wouldn’t want to see
0:10:52
cards with wildly different paddings. This one actually has a very much the same padding it just has all of its content centered so none of it is actually making it all the way out to the edges but it still shares what we could call something like card padding. All of these share relatively the same between the content inside, the aspect ratio of these images down here on the dark variant, the dark variants all share commonalities, right?
0:11:22
And so when we’re constructing cards, we have to be able to create unique things, but at the same time, we would like it to have shared styles almost. And I was thinking, right, how do we approach this? Right now you don’t. You can have a library of variables, but when you’re constructing a new card,
0:11:43
it’s up to you to put the padding variable in where you need the padding every single time. And it’s up to you to put in the color variables, and it’s up to you to put in the button class, whatever you’re using for that. And you just have to make these decisions constantly and do these steps manually over and over and over and it’s a big waste of time because it’s like I mean if you’ve Done it like I’ve done it It’s like you’re building your third card like imagine I built this one and then imagine I built this one and now I’m on to This one and I’m like I’ve got to set the padding again Got to set that box shadow again got to set this thing again and again and again and it’s like I already did this
0:12:21
Two other times why am I doing it again? Even though I’m using tokens, so they are shared values, I’m still having to do it. And the having to do it part is the part that kinda sucks. Because it’s wildly inefficient. You get that feeling as you’re doing it. And so what I didn’t want to do, because I’ve seen people before, they’ll use a shared class.
0:12:43
It’s like, let’s put a class of card, and that’s gonna do some of our little base styles. Now, they haven’t gone to the level that I’ve gone to, because I have to over-engineer pretty much everything. No, I’m just joking. But I do, what I do, my process is, I over-engineer it, and then I back it off, right? It’s like, over-engineer it,
0:13:01
like, make sure you cover all the bases, but then find a way to back it off, find a way to make it simpler, find a way to make it easier, okay? And so, then that’s the second phase of the engineering. And I don’t even know that I’m there yet. I’ve done a little bit of that. Again, I’m only a few hours into this entire concept that we’re going to look at. But then you bring in an additional layer on top of this. Now, this
0:13:25
could be used vanilla and what everything I’m about to show you and I know I’m not like hyping it up on purpose. I honestly don’t know if it even deserves a ton of hype. I’m just trying to lay context out so everybody understands how this came about because it’s not just sitting around going well what kind of magic can I just invent today that has no relevance to anybody no like the whole point here is like I’m showing you the relevance like where this idea even came from because I don’t like the shared style class idea because you still have to remember to put a class on every card to define the base styles and we know that that’s kind of a problem.
0:14:01
That’s what we call littering, right? You’re littering that class all over the place and instances where you forget it. What if you build a whole grid and you forgot to add the base style class? Like maybe it’s, you know, I don’t know what situation you’re in. Maybe you’re coming back to the project three months later and you forgot, oh, this project has a base card class. We got to add that to get our base styles. And sometimes you just whip up a card and you forget to add the base styles.
0:14:23
You just add them again manually and then like the problems. I’m always looking for like where’s the failure point in this workflow? Where is our potential to forget something or to do something wrong or out of order or whatever? And so that just opens the door to some potential for forgetting, right? And so my concept was no, I want this to be automatic, right? Kind of like a lot of stuff in automatic CSS, which is why it’s called automatic CSS, by the way. So, my concept was, I’m about to lay it out,
0:14:58
and then we’re gonna take a look at how it actually works in practice. I wanted the API, or the framework, or whatever we’re gonna call it, to just know that I’m building a card. And when it just knows that I’m building a card, and I can still name the card whatever I want. It can have whatever BIM classes I want it to have.
0:15:15
There are a couple rules here and there. And there are a couple little rules. But more or less, I can name them whatever I want. I can do whatever I want with it. And it just knows that I’m building a card and says, hey, here’s the default styles you requested. So that all those decisions are already made for me and all of it is already applied for me.
0:15:34
It’s already done for me. And then what I can do is I can change it if needed because what it does is it says, hey, here’s all those default styles, but it gives you those defaults without any specificity whatsoever. There’s no specificity in the defaults, which means I can still do whatever I want with classes,
0:15:53
I can still do whatever I want with ID styling, I can still do whatever I want with inline style, we don’t know. We don’t know what we wanna do. What we do know is it’s not going to stop us. It’s not going to hurt our ability to create different variations of cards. Now we’re going to take a look at what that looks like actually in practice. And again, the goal here is that I’m able to build this card, which is wildly different
0:16:17
from this card, which is also wildly different from this card, but all of the similarities are shared, which gives me a single source of truth for all of the styling of these things. This is compatible with component functionality. So when Bricks releases components, you will still probably want to use a system like this. And so we are going to go over here into WordPress and we’re going to go here and we’re going to say card page and we’re going to publish. Now there’s a little bit of magic that you haven’t seen yet it’s part of it that I cannot show you because it relies on automatic CSS 3.0 which nobody has seen yet and you’re not allowed to see and so
0:16:58
we can’t do that part of it but I will tell you more or less I think I think again I’m only a few hours into this I think the workflow will be you go into bricks like this right and you either over here or right here, you add what amounts to a base card component, right? And then you tell the framework, you tell the framework, here are my desired defaults for these common areas. And we’ve got a whole library cooking, right?
0:17:29
Because that’s what I did, I analyzed cards. It’s like, what are all the shared styles among cards of all different types and styles? And how can we bake this into like a concrete library of what to name these things, how to create the tokens for them, how they should behave, okay? How are we doing by the way?
0:17:47
Are we good? Are you tired of me giving context? Are you ready to see something? Okay, everybody in the chat looks positive. Everybody in the chat looks like they’re having fun. It’s hard for me to keep an eye on the chat while I’m doing this, but I will take a break every now and then. Okay, so what you haven’t seen, the only thing I’ve done, I will tell you right now, because what you’re about to see is going to look like magic. Okay, and I just want to preface this with the only thing you have not seen is I told the system what the defaults are.
0:18:17
the buttons, the borders, the icon, I already told it, like how big should the icons be? What color should the icons be? All of that, okay? All of the shared stuff, that’s what I’ve already informed the system of. And I can’t show you that part because that part relies on Automatic CSS 3.0,
0:18:34
which you don’t have yet, okay? But you will very, very, very soon. And I’ll tell you right now, this kind of thing, the reason I’m so excited about this is because the concept of automatic CSS 3.0 and this just work beautifully together. It’s like they were made for each other almost. So this is it’s just going to be fantastic, right? So that I would imagine that little setup process would take you a couple minutes, not not very long at all, okay? You go look at a design like this in Figma and boom, boom, boom, boom, boom,
0:19:14
couple defaults set up, you’re good to go. Now what is the next step? The next step is you start building cards, whatever cards you want to build, right? So what I have not told the system, I have not told the system what these cards are going to look like. I have not told the system
0:19:30
what I’m going to name these cards. So when I give them names, those are just out of thin air names. The system does not rely on knowing the names of these things. There are not predefined classes already sitting in the database so that when I add these things, that’s how the magic happens.
0:19:45
There is none of that. There is none of that happening. So we’ll talk a little bit about how this all comes together but that’s what you need to know. That none of this was predetermined in the system other than shared commonalities and that’s the whole point of the framework right and so we’re going to see can I build this can I build that can I build this and what is
0:20:07
that process actually look like and doesn’t save us time there’s also some behavioral things within this like for example is a card clickable or not clickable should the entire card be clickable or not clickable okay there’s things like that that are baked into it what about focus styles should the focus to the hover styles and the focus styles match each other automatically out of the box? Like things that if you didn’t know how to do it on your own, it would take you a while.
0:20:32
It would take you a while. But this is all actually gonna happen just automatically, right? It’s the whole concept, right? All right, here we go. Let’s go ahead and let’s build a section. Now, of course, I will be using some automatic CSS like throughout this, okay?
0:20:47
You don’t have to, this actually could work vanilla without automatic CSS. I don’t know why you would want to do that, but it is compatible with that. I’ll also say that this methodology, this system does not use any JavaScript. It does not, it’s all 100% vanilla CSS. There’s no magical scripts running or anything like that.
0:21:11
So what I’m going to do is I’m going to take a look. I’m just going to get bounce back and forth. And the one thing I try to remind myself of is like, Kevin, look, you could just like flex on them and like just bam, whip this up, okay? But there are a lot of people here who are like, I legitimately don’t really know how to build carts, okay? I legitimately don’t know how you would even approach this.
0:21:33
And so in every video I’ve done, in every stream I’ve ever done, I’ve tried my best to account for beginners and I’ve tried my best even though we could just blaze through to just go slow and just kind of explain the steps and I think that would actually help a lot in this regard because you don’t want to see it happen too fast right because then you’re not even gonna you know I’m gonna really pick up on some stuff that’s that’s happening so the first thing I’m gonna do is attack this card right here and if
0:22:00
I think maybe I should get ProMouse on. Let’s go turn ProMouse on. Okay, can I draw? Okay, there we go. So we talked about this in Page Building 101. You wanna think in boxes, right? So I know that I need a box right here, okay? I need a box likely right here, okay?
0:22:21
First of all, a big box, okay, down here. So I would call those big boxes my media wrapper and my content wrapper. And these are just names I’ve always used, okay? So you wrap your media, you wrap your content in general. Now, we’ve also talked in Page Building 101 about grouping associated content. And I’ll show you why these concepts really help, okay?
0:22:41
Because I could absolutely just throw in a heading, text, text button. Just inside the content wrapper, heading, text, text button, right? But I like to group associated content you’ll see why that happens so here is associated content it’s kind of her name and her title a person’s name and title if you think about it live together yeah that’s associated content so I say as a concept group those and you also
0:23:07
notice sometimes the spacing between groups of associated content is different than the spacing between those items themselves. And when you group associated content, it gives you a lot more flexibility. It creates an extra wrapper or two, but it gives you tremendous flexibility that you, by the way, cannot get magically in the future. If you decide later on, oh, I needed to group those things,
0:23:31
and there’s already 500 iterations of that card, you’re fucksville. So you’re not grouping them now, right? So you might as well group them in the beginning when you have the chance. This is kind of like the best practice workflow of building a card. So we wanna group associated content here, all right?
0:23:49
We wanna have this and maybe the button, those are not really associated content, so those can live by themselves inside of that content wrapper. That’s what we’re gonna do, okay? So I’m just gonna duplicate this block a couple times because this is an auto grid Which means I need a few items in there to see the actual grid structure So this is our primary card right here. And if we look at this, what do we need first?
0:24:13
We need the media wrapper and we need the content wrapper. Okay, and again, I could blaze through this I’m trying to go slow to keep everybody on the same page. Keep everybody with us. All right, even the beginners, hopefully you can still follow along. What is the answer to what goes in the media wrapper? I mean, that’s to be plain as day, right? We need media. So we’re gonna add an image here. And we’re gonna go use the image
0:24:38
that we already have in our library there. Okay, good. We got our image in there. The next thing we’re gonna add is our, let’s collapse this, okay? I’m gonna name this real quick. What should we call this? I mean, like I said, you could name it whatever you want.
0:24:53
Let’s name it photo card. I don’t know. Let’s name it photo card. All right, there’s photo card. All right, so we bring, actually, I’m sorry. That is our media wrapper. Let’s name the correct things. All right, this is our photo card.
0:25:08
So we’ve got photo card and we’ve got media wrapper. And then this thing down here happens to be what? Our content wrapper. Now, what did I say we needed in our content wrapper? We need another wrapper, that’s gonna be for our header area, and then we just need text and a button. So inside of our content wrapper,
0:25:25
we’ll add another block, that’s just like a div, but it’s automatically set to display flex by default, yada, yada, yada, okay? We’ll open up our content wrapper over here, the next thing we need is text, and the next thing we need is a button. All right, we are gonna name this BTN.
0:25:41
That’s one of the rules of the framework, by the way, okay? You wanna name that BTN. If you don’t want things to automatically happen, you just name it something like button, like the actual word, button. But if you name it BTN, things are gonna happen to it, okay? All right, we want this to be her bio, right?
0:25:59
And then inside of this group right here, this little block, we’re gonna have the heading and we’re gonna have text there, okay? Now, there’s some other things regarding like the order of elements and stuff. We’re not gonna get that deep into it today. Like typically I like the content wrapper to come first and the media to come second.
0:26:16
So we’re structuring the DOM well and then we’re gonna use order to flip them. And okay, we’re not gonna go that deep into it. That’s not the whole point of this live. So we’re gonna call this header. You obviously wanna name everything, okay, in your structure panel for organization purposes, but also because we’re gonna use Automatic CSS’s
0:26:37
auto-bim feature to bim this entire thing in just like a second, right? Okay, so let’s just review what we have. We’ll go top level. We have a photo card, okay? We have a media wrapper with media inside of it. We’re gonna name that media. Okay, media goes in a media wrapper.
0:26:56
The next thing we have is a content wrapper. Inside of that we have a header that groups our associated content, our heading and our title. And I’ll just put this title in real quick, CEO, just so we can see that. And then we have her bio next. Can we get her bio here?
0:27:11
Let’s go ahead and grab that bio. All right, bang. And then we have the button down here. I think that’s supposed to say learn more. Excellent. Okay, so we’ve got everything named in our structure panel, right? We have everything that needs to be there is there.
0:27:27
Let’s go ahead and auto BIM it. So auto BIM and automatic CSS is basically you click this little button that says BIM. This is not part of Bricks. This is an add on feature of automatic CSS. So it’s gonna have your root stem, right? Your block name, that is photo card. And look what it’s gonna do.
0:27:43
It’s gonna apply classes to all the children using that block name, double underscore, and then the names of the elements from the structure panel. So really when you’re organizing in the structure panel, you’re doing two things at once. You are staying organized, you’re also setting up your BIM naming, okay?
0:28:03
All right, now we’re gonna go apply classes and now we just have a card. And it’s pretty much just happens like that. Okay, so I’m gonna go to Jessie Stock. We got to put her name in here. And she is a founder and CEO. Now you notice like, it doesn’t know, okay, like that this is a title
0:28:22
and that titles have to be this color or something like that. This is where you take over as the developer. You’re like, okay, thank you for the defaults that you’ve provided me. I think I’m gonna go ahead and take over now and I’m gonna continue customizing this card. Now it’s good if you customize the card.
0:28:41
Okay, you saw that like this button, you saw all this, okay, it just happened. I didn’t give it any other, I didn’t do anything. And I told you a minute ago, we can name this whatever we want to, okay? It didn’t pick up on the exact, I didn’t, there’s no pre-programmed photo card in here with all these elements.
0:28:57
We can do whatever we want. So I’m gonna come in here. Now it’s nice if you continue to use the API or the framework, like whatever we wanna call it, right? So this is called a card gap. Any spacing between elements in a card is a card gap, right? And we also know how we can calc card gaps okay so we can do something like card gap divided by two and with automatic CSS it’ll auto var
0:29:21
that and it’ll auto calc it for you if you just hit enter and so now we have half of our normal card gap spacing in that little group area right there which is which is nice we could do stuff with the colors now we could do stuff with line height I’m going to come in here with the title and we’ll go to typography this is the automatic CSS color system if you’re not familiar with it, right? So I can come in and I think we’re using actions. So we’ll do like action ultra dark, but we’ll just use like a 60% transparent version of that.
0:29:49
And let’s go check what our actual design is. Okay, notice that it’s a full width image is actually what the design is calling for. But the system, the framework gave me card padding around everything. And this is why you group associated content. I’m about to show you why, exactly why you group associated content right now.
0:30:09
So for this particular card, I need card padding, okay? But I don’t need it on the outsides. I need it in my content area right here. And so again, what did I say a minute ago? The defaults are non-specific defaults. I can override them at any time. I want in any way that I want so now I come into the content wrapper Which is grouped content, and what do I say card padding guys? I am NOT if you’re still in the magic number train like oh just fucking
0:30:38
2.2. Ram let’s just go with that this is not how you want your life to be okay? Everything should be tokenized Everything should be relative to something else, right? So I have a standard card padding that I want to use in my cards. That’s what I’m going to use, which is nice because when I come to this site three months later, I don’t have to be like,
0:31:01
oh, for our card padding, what were we using? Was it 1M? Was it 1RM? Was it a clamp function, something fancy? No, I don’t need to know. I don’t need to care. What I do know is it’s card padding. That’s what I know it is.
0:31:17
Okay, so I’m gonna come in here and then I’m just gonna take, because I get auto gaps in everything. Notice like the spacing between all this was already done for me, except for the adjustment that I made. And now we basically more or less have exactly what we see there.
0:31:32
Okay, so I can come into media as well. And then this is the part of the API where I’ve only been working with this for, okay, yeah, there we go. I didn’t know if it was on, is the border radius on the wrapper or is it on the image? It’s on the image, okay. So now we go in, now look what actually has occurred here.
0:31:47
And this is not the end of the magic, okay? And you guys see how I was able to get padding in here, but not here because of the associated content, the way that I structured the wrappers. And that’s how I’ve always done it, okay? That’s not just part of this new thing. That’s just standard, that’s why I said it’s best practice, because it gives you tremendous flexibility
0:32:06
in how these cards end up being produced, right? Like I could even come in to that card, that photo card, and say, you know what, I don’t want to zero it out completely, I can go like something like space XS, or in fact, you know, I’m training myself not to even use, yeah, type, wait, what loser wants to type these days, right? I would just like to right click and select my stuff. So as you see there.
0:32:32
So now I can get that look right there if I wanted to. I can get again, whatever I want to. You can even go rogue. I mean, I wouldn’t really recommend it, but you can go rogue if you want to. Just toss some pixels in there. I think what you’re probably not seeing here too is a little border action on these cards.
0:32:51
We’ll leave it right there for right now. Maybe I wanna bring, maybe when I do that, maybe when I give it a little bit, I’m just showing you that you can do anything. Like you don’t, it’s, the system is not stopping you from doing whatever you would wanna do. I can bring that radius back if I wanted to. Okay, that’s not the end of this magic.
0:33:07
And let’s go, Pedro is like, what kind of sorcery is this? Yeah, that’s what I’m talking about, right? Like, I mean, we could all just be, hold on, hold on, we gotta get this comment. Just got back from training, just hit the nastiest bow and arrow transition, hit the locker room and saw WDD was starting. Shicey, my man, those are jujitsu terminologies
0:33:25
for anybody who is not up. We got a little bow and arrow choke. Oh, that’s one of my favorite chokes, honestly. Yeah, it’s, I love it, man. Okay, props to you. Thank you for being here. All right, let’s look at some more magic. Let’s look at some more magic because this is not the end of the magic right. So we know best practice
0:33:45
for linking up cards. Okay so I want to use something called clickable parent. If I want this entire card to be clickable I want to use something called clickable parent. Clickable parent basically you put the link on the heading of the card because that’s the most relevant piece of content for the card. Learn more is not relevant text and so for screen readers for accessibility purposes you don’t want every card in your grid to be like learn more, learn
0:34:10
more, learn more, because the person’s like the fuck am I going to learn about? I don’t even know what I’m about to click on. You got to tell me. If we link the heading we know we’re about to click on Jessie Stock. Ok you like her last name? Jessie Stock. She’s a stock photo right?
0:34:23
Ok never mind. I’ll be here all night. Alright so this button right here is actually a dummy button this is not a real button okay what we’re going to do is we’re going to make Jesse stock the link but we have to use some magic and this magic is you know I’ve taught this on on on streams I’ve taught it in videos we have utilities for it in automatic CSS but it’s called clickable parent where you area of this link to the entire card itself. Ok?
0:34:53
Alright, so what we want to do is we want to click on our heading, we want to come in here to content, and we want to give this an external URL. Now I will say what you’re about to see is toggleable. Is that a word? Toggleable. Imagine in the automatic CSS dashboard, for example, you could be like, when you’re doing your cards, your card framework setup, you’re like, and it’s asking you, it’s like, do you want to use clickable parent on your cards?
0:35:19
You’re like, yes. Or you can say no. It’ll say, do you want to use, do you want your hover styles to be the same as your focus styles? Yes or no. Do you want focus parent, the focus parent technique, which basically means when we make a card clickable, we take the link style off of the heading, because you guys know when I make this a link, normally it would change colors, which I don’t want it to have happen
0:35:41
because that’s not what the design says. So I would have to undo that. And then I would have to, when we focus on the card, I would have to make sure that this link doesn’t actually get a focus style because that’s not what we’re focusing on. And I would need to make sure the focus style
0:35:57
actually inherits the hover styles. Guys, this is a lot. You’ve got to, you have to do a lot of work to build a card. Ok, not anymore though, not anymore. So now I just I put in my link here and I’m going to go to photocard. I think this does this automatically but I’m just… yeah it did. Ok, it looks like it did. Ok, save and let’s go here. Now, I mean, I mean there’s some things that have happened here. Clearly, I got clickable parent automatically all I did
0:36:29
was give the heading a link that’s all I did I got clickable parent automatically I got hover styles on that button is changing color there’s a transition that has happened here the box shadow in the back is transitioning the the card itself is translating vertically a little bit okay and the whole thing is click. And when I tab to it, this is my keyboard doing this. When I tab navigate, it’s automatically got focus parent styles on it. And again, these are,
0:37:03
I didn’t tell it what we’re gonna name these things. I didn’t tell it, I didn’t tell it what was gonna happen. I’m just using best practices to build a card. And it’s just doing things for me that it knows I very well want to do because I told it I want to do it okay all right so that’s card number one how are we how are we feeling right now should we continue slow slow clap for the stock joke okay let’s see all right I think waji likes it I think waji likes it how we doing how we doing all the CSS is just so automatic I it’s almost like
0:37:41
the oh that’s why it’s called automatic CSS yeah yeah now keep in mind this is even I don’t even know like I haven’t even convinced myself yet I mean I think I’m fairly convinced that this needs to be an automatic CSS but it is not an official thing that we’re looking at we’re looking at what Kevin played around with on a Sunday afternoon and and this is where we’re at so far. Notice that the media, like there’s a lot of little details that you probably wouldn’t notice at first glance.
0:38:11
The media is automatically object fit cover. The media automatically inherits the card radius. I also have an option where you can toggle this on to where the media inherits the card radius and when there’s media in the card the card actually inherits a what the fuck is that radius called what’s the radius that’s the the media radius plus the padding somebody give me the name chat give me the name because it’s escaping my brain right now the media also hasn’t the desired aspect ratio on it okay because we know the
0:38:48
aspect ratio in cards is important okay so it’s already got an aspect ratio set it’s already got this border radius set it’s got everything that needs to happen it could have an overlay if I wanted it to have an overlay there are so many things that are beyond what we’ve seen so far right okay let me come down concentric radius thank you my gosh Pedro Pedro saves the day concentric radius okay how does it determine what is a card? Okay, we will get to this. Do not worry.
0:39:19
All right, just got here now, what’s going on? I told you, did I say people are gonna arrive and be like, what is actually happening right now? Okay, hold on. Okay, is this a separate plugin? No, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no,
0:39:40
no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, card and it’ll be a Jesse icon card. Let’s just call it a Jesse icon card. All right, so if we’re looking once again, I need a Icon, okay, that’s obvious. I Probably need a content wrapper again And then I probably need a header wrapper again to group associated content and then I need the text So let’s do this again from scratch so you guys can see it We’ll go
0:40:12
So let’s do this again from scratch so you guys can see it. We’ll go block in here, okay? We’ll add our icon. We don’t really need an icon wrapper. It’s not really the same as like an image, okay? So you can just throw, you can just toss an icon in there. I think that’s fine. Actually, you know what?
0:40:32
I think, when in doubt, this is kind of the principle. When in doubt, if you’re like, do I need a wrapper? Do I not need a rapper? When in doubt, when in doubt, you just add the rapper. It’s way easier to be like, oh, that was a rapper I didn’t need. Nobody’s gonna kill you for that one. But if you have 5,000 instances of the card
0:41:03
and you’re like, we really needed that rapper, Jack, what the fuck were you doing at the controls? How are we gonna get that rapper now? So see, you don’t wanna be in that situation. So if there’s ever a question like, do I need a wrapper? Do I not need it? Just give it a wrapper, right? It’s not that big of, I mean, compared to Elementor, right?
0:41:21
Elementor gives things 8,000 wrappers. So you giving it one extra wrapper is not going to break the bank. All right, let’s wrap this in a block. So that gives us a wrapper there. Let’s name our things as we go, because I know everybody tends to get, we can still call this a media wrapper. We’ll leave that as an icon, right? This will be our content wrapper.
0:41:39
This, you know, naming things really helps everybody who happens to be watching. Okay, so what do we have inside of our, oh, that is not what we’re looking at here. Here we go. We need another block for our header, and then we need text right there, okay? So we are going to put inside of our content wrapper,
0:41:56
we’re gonna put, and you can do it like this too. You can just go heading, text, and then text again So this is going to be our bio Right. This is going to be our what was it? My short-term memory is absolutely terrible. This can be like tagline I’ll just name some things differently just so you can see Okay, so there’s tagline. There’s a bio and then we want to group these things now I will say you know if Thomas from bricks is watching I don’t think he ever is but like the fact that I can’t click both of these and then just group them,
0:42:25
I mean that’s something that the Gutenberg trash can can do. So it really irks me that we still can’t do that. So I just have to say wrap with block for one of them and then put the other one inside of it. All right, so we’re gonna call this a header. All right, and actually I’m gonna switch, I’m sorry, I’m gonna switch, I hate having this microphone in front of me
0:42:43
while I do this, it’s actually slowing me down, so hang on. All right, I switched mics, so I’m on this one now. It’ll be slightly more echoey, but it’s gonna help our workflow situation. I’m like looking around the microphone to try to do this. Can you guys still hear me?
0:42:58
Are we good? Okay, oh, the other thing I forgot here, just so we’re crossing Ts and dotting Is, those should be paragraphs, not divs, okay? People watching are like, what are you doing? All right, so here we are. We’re gonna do the same thing with this. This is a P, this is a P.
0:43:11
I’m keeping my eye on the chat. So yeah, you guys can hear, right? Yeah, yeah, yeah, okay. All right, so her heading is gonna be Jessie Stock, once again. All right, we’re gonna go in and pick our icon out here. I’m gonna go with an SVG file and we’re gonna go with this, okay.
0:43:30
All right, I tried to go with a crown because as you’re gonna see, she’s the best, right? So it’s, well, it says that right here it’s the best oh this is actually for her like agency okay all right so we’re gonna put that in there good and then we’re gonna take this little blurb that she wrote and we’re gonna put that in yeah so her content is good right obviously she’s the best okay so we’ve got let’s review what we’ve got. We need to name this. We’re going to call it a Jesse icon card. And again, we can name it whatever we want to. That part does not matter.
0:44:08
Well, it matters a little bit, just a little bit, okay, but not specifically doesn’t matter. All right, so we’ve got our Jesse icon card. We’ve got a little media wrapper. We’ve got a little icon. We’ve got a content wrapper. We’ve got a header. We’ve got a heading. Oh, what does this need to be? That needs to be called the tagline. Thought I already did that. And then this needs to be called the bio. Okay, what is our next step? Our next step is to auto BIM this, right?
0:44:34
So I’m gonna hit BIM, and it’s gonna assign classes to all of these elements. Okay, we’re gonna hit apply classes. And my God, we just have an icon card. I mean, that’s just what we have. So I’m gonna grab the header. I wanna make a little adjustment here. We know what that’s going to be right? It’s going to be card gap divided by two. I kind of want to do
0:44:54
that again just like I did it over here. This is a tiny bit of repetition still. If I can get rid of some of this repetition I will. But you know right now we’re only a few hours in right? This is the best we can do. But I mean my god that the icon is that it’s gone to a different size. It’s a different color. I mean this is what are we looking at for our blueprint here? I’m using different fonts obviously, but I think I’m done. I think I’m just, it just, that’s like you’re, that’s kind of using a lot of default styles. There’s not much else I have to do there.
0:45:28
Okay, that means we can move on to the third card. Yeah, Daniel’s like, wait, what, exactly. Right? Right? That’s what I felt as I started getting into this a little further. Okay, let’s build the big one Oh gosh, this one surely surely this one can’t this one can’t work. I mean, there’s so much going on here Yeah, Jamie Jamie Lynn Ross says yeah getting rid of some repetition would be ideal we don’t ask for much Let’s see. What else?
0:45:57
Mm-hmm. Good bird trash kid could do it. Let’s see, are you guys using heading or basic text element for headings? Headings, yeah, you use the heading element. Really need multi-select in the structure panel to wrap multiple elements, I agree. It’s called a doubt wrap. Yes, I love the name. Rashad, I love the name. It will give it a doubt wrapper.
0:46:21
It’s like, hey, I doubt we’ll need it, but maybe we do, right? Okay, let’s build this card. We’re gonna call this a, we’ll call it a Jesse profile card, okay? And now, you know, well, I won’t even get into all that. Let’s just call it a Jesse profile card. Let’s refresh here, see where we’ve gotten so far. There we go, okay.
0:46:42
So now we’re gonna build our Jesse profile card, okay? And I’ll just show you right here, actually. We’ll just say this is gonna be a Cassie profile card. Like I, literally, I’m not, it’s not just cause it, and up here we went with photo card, it didn’t even say Jessie, so it’s not, like it doesn’t have to be, like I said, it doesn’t have to be specific.
0:47:02
So Cassie profile card. So what is Cassie profile card gonna have? Well, we know we have media, which also needs a media wrapper. So we’re gonna go media wrapper and media. Let’s just do that right now because this card is big. So we’ll add this in. We’ll go block and I’ll open that up. Let’s collapse this one right there so we don’t need to look at that one. And then inside of that is going to get our image which is going to be our media. Okay. And I’m
0:47:28
going to name that media and I’m going to name this media wrapper. Okay. I’m going to select my photo. By the way, you could query loop all of this very easily. So all this is query loop compatible that you’re seeing. All right, so we’ve got our media in there. And notice, I mean, this media is not even close to what we need. This media is not even close to what we need. I’m actually gonna make a little adjustment because this is where you have to tell the framework that you’re doing something different, right?
0:47:56
Okay, but this different thing is common. That’s why what we’ve, well I keep saying we, what I’ve identified is these patterns right? So a pattern is that cards can have media but they also commonly have what the industry collectively calls avatars right? An avatar. Okay so what I want to do here in my structure panel is yes I have a media wrapper but this is going to be an avatar and actually this can be an avatar wrapper or it can be a media wrapper. This part doesn’t actually matter but we do want to instruct it, hey this is not just
0:48:37
standard media, this is actually an avatar. Right, okay, so we’re going to put the avatar in. The next thing that we need is I think a content wrapper would be good here. So let’s put in our content wrapper next. So we’ll go here. And again, I’m going purposefully slow so that any beginners can, you know, follow along, stay up with us. Content wrapper, we’re just going very methodically through this.
0:49:02
Inside of my content wrapper, which houses all of this, by the way, okay, is going to be a header box. And you can actually see them a little bit in Figma, as Figma requires you to do much of the same thing. I don’t like that these two things are grouped together necessarily. I would tend to group these things together because follow steps tend to, I would think, go with the follow button. Like this is our follow area, right?
0:49:28
So in my mind, I would group it differently than this designer grouped it. This part doesn’t really matter all that much. You can do whatever you want here. But we know we need a header. We need a little container for these little stars right here So let’s put in our header next. All right, so we’re gonna go in here We’re gonna add a block and that’s gonna be our header. This is inside of our content wrapper Just trying to get our structure down
0:49:50
And then inside of the header we need a heading and text. All right, so we’re gonna do heading and we’re gonna do text. Oh Text okay, and what are we gonna call that text that is going to be her title once again So this is going to be title Her heading is fine. Just like that. Okay. What else do we need in our content wrapper? Let’s do this little follow area. Okay, so we’re going to add a wrapper for those We can use a div if you want to use a div like this doesn’t require Blocks or anything like that so you can just use a plain old div. Let’s go with a follow. We’ll go with a stars.
0:50:27
This actually doesn’t even need the word follow in it. Let’s get into a little atomic design principle here, okay? This little stars thing is actually not, should not be really associated with this card. Now, we’re gonna do it that way for demonstration purposes because I don’t wanna get off into atomic design land and component land of building and web design, but you would wanna make like a separate stars component
0:50:52
and just drop it into this card. Because you’re probably gonna use this little stars elsewhere, like when you make review cards and things like that. So this thing actually is a block on its own that should live separately from these cards, but we’re not gonna go that deep into it. Because now we’re definitely gonna start losing
0:51:09
anybody that’s a beginner, right? Okay, so icon’s gonna go in here. Let’s go ahead and get my icon here, SVG. Let’s go in here, grab our little star. Okay, there it is, nice and cute. So what do we wanna call this? We’ll call this a stars wrapper. And I’m gonna leave this as icon, okay?
0:51:29
Now I could absolutely just call it star, but I’m gonna leave it as icon just to show you one little trick of this, okay? But again, I don’t know if this is the best way. Didn’t I just say I was gonna leave it as an icon? Sometimes my brain doesn’t do what I just previously, what my mouth just previously said we were gonna do. Okay, so there’s our stars wrapper.
0:51:51
The next thing we need is just our biotext, right? Let’s just throw that in. So let’s go with our biotext here. This is gonna be our CEO, it’s our little title, okay? She’s got a keen eye for keen eye for marketing trends. I hate that little overlay thing that floats around Okay, let’s stick that in and now I want another box and this is going to be for our follow content right here Okay, so we are going to put that in All right. So here I am in my car. There’s my avatar wrapper. Oh, did I put content wrapper inside avatar wrapper?
0:52:24
You definitely don’t want to do that. This is another reason why we’re going slow. It’s like you can make mistakes if you go too fast. All right, this is her bio right here. Next thing we want to add is that next block. Okay, and see, and Bricks is doing this to me a little bit. Why did it add that block? This never happens. Only when you live stream does this happen,
0:52:44
but Bricks is just throwing shit in random places. Okay, so here’s the block. Let’s call this a follow footer. I don’t know like naming things on the internet is hard Okay, let’s go in here So our follow footer is gonna have a button in it and then it’s gonna have another group for this little row Situation right here. So I’m gonna throw a button in here Notice I’m not styling as I go or anything like that If you get the structure down properly all of your styling should work itself out
0:53:12
And then of course, I mean, the reason why we’re here is because it just, it styles itself, right? So I don’t even have to, I don’t even have to make any decisions. This button says follow, okay? And then in our follow footer, we also need a block for that associated content, that little row.
0:53:27
We’ll call this follow stats, okay? And then we’re gonna add a block in there, and that block is for one stat, okay? We’ve got, how many stats, fam? Or as the streamers like to say, how many stats, chat? We’ve got three stats, okay. So we’re gonna throw in a block,
0:53:48
and then there’s actually going to be three of those, but I don’t wanna go ahead of myself, because then I’ll have to go backwards. So we’re just gonna call this a follow stat, and then we’re gonna add something to that, two text elements. These are going to be spans. So we’re going to go span and we’re going to go span. Okay, this is going to be a follow stat value. And I would hate to make classes out of all these things, right? Thankfully, I don’t have to follow stat value. And then this is follow stat label.
0:54:12
So we have a follow stat, a follow stat value, a follow stat label. Here’s what this looks like 5896 posts, 5896, 5896, and then this would say posts. Okay, so we’ve got one stack right there, right? There’s one stack. Now I’m gonna duplicate that two more times since we had three stacks, yeah? Okay, okay, what else do I wanna do? Is there anything else left to do?
0:54:33
Do I have every element in here? I want this to be button, right? That’s part of the API. You wanna make sure that says BTN if you want automatic things to happen to it. We’ve got our avatar wrapper, we’ve got our avatar. We’ve got a content wrapper with a header inside of it, which has a heading and a title.
0:55:01
A stars wrapper, which has icons in it. We have a bio, we have a follow footer with a button, and we’ve got follow stats wrapper with follow stats. We’ve got follow stat values, and we have to do is BIM that shit right like we got to add classes to all of that stuff okay so I’m gonna go with my Cassie profile card and I’m gonna hit my little trusty autobim and this is all gonna get done for us right it’s all gonna get class classified I don’t think that that word doesn’t really work in our in
0:55:38
our context. Okay, I’m gonna apply. And wow, some things some things have happened. Okay. Again, it’s going to do the defaults, and it’s going to be like, all right, now, now, dog, you need to take over. Like, I’m not going to do everything for you. I can’t possibly know what you’re even trying to accomplish here. You put all this custom shit in here. What am I supposed to do with it? Right? But all the details, all the defaults are there for me.
0:56:04
So now I can just start doing my job, right? Which is like, okay, why don’t we center that? Why don’t we just go to the entire card? Because I’m noticing that all of this stuff is like center aligned, okay? So why don’t I try to use some inheritance here, go centering on that. Let’s go with the card header,
0:56:22
probably do some centering in here. We also want to do probably some flex in there, in our, and remember, everything has a class on it, right? So everything I’m styling now is gonna apply to this card and any thousand other iterations of this card that I want to work with. So I’m gonna come into the stars wrapper here and let’s go with, there’s a bunch of ways
0:56:44
to skin a cat here. This actually needs to be display flex, okay? Because I used a div on that, which is not display flex by default. All right, that’s perfect there. We can align self to the center. We’ve already got that going on. Now, part of the API that allows me to customize this,
0:56:57
see these stars, because they’re icons, are the same size as this icon right here. But that’s not what our design calls for. These icons are small. This icon was big. So the default doesn’t actually work here. So the question is, I mean, what do we do now? Okay, well, you can do this a lot of different ways.
0:57:17
The API says we can come down here on this class and say card icon size and just give it a new one, like 12 pixels, okay? It could be 18 pixels. It could be, that looks good. It could be whatever I want. It could be text L, right? It could be text M.
0:57:36
It could be anything, anything that I want. I can stick with automatic CSS variables. I can do whatever I want here. Okay, so that’s coming in to shape. The next thing I want to do is go to my follow stats, right? And we’ll probably use, I could use Flex for this. I could use Grid for this. Let’s just do Grid.
0:57:54
I think Grid would be pretty easy, like something like Grid Auto 3, or let’s just do Grid 3. Let’s just do grid three. Okay, inside of that, the follow stat, I’m gonna go with, let’s align this with flex. Let’s take all gaps out of here. And we also probably wanna take some line height
0:58:17
out of there as well, because all text you add on the internet has line height, which we don’t need in these kinds of stat cards. And then when I take the line height out, I recognize, actually, I want some of that gap back. You could go 0.5M here, you could go card gap divided by three, you could go like whatever you wanna do. Like I like to stay within the confines of the library, okay?
0:58:39
So a little card gap divided by three gets me pretty much exactly what I want. I’m gonna look at the design here. So I see that that needs to be, that’s our dark text, and this needs to be smaller text and it needs to be lighter text okay well I can grab this make sure I’ve activated the class I can come in here and just say all right well I think that’s going to be smaller maybe do I want XS there okay I think I want XS there and then I want
0:59:06
to definitely make it lighter we’ll stick with our action color family and we’ll just drop that down to 60% now I want to go I want to go a little bit lighter on it, so we’ll go down to like 50% maybe. That sounds about right. Okay, this I think I want to be a little bit bolder, so we’ll come in with our font weight and do something like 700. Is there any other weights in here?
0:59:27
No, I don’t think I’ve loaded any other weights in. Okay, we’ll go with 700, whatever. Or 600 gets the job done. All right, then in our little associated content header here we can do the same trick that we’ve done before which is card gap card I can type divided by two it’s gonna auto calc it auto var it that brings me there we definitely need her name in there Jesse stock okay oh this button was not supposed to be full width if I remember
0:59:55
correctly look it’s it’s not supposed to be full width so what do we do here now here. Now this is the only kind of tricky one because Bricks is over opinionated in its button styling and so when we try to do things automatically it requires a little specificity and then it causes some other problems but I think this is called card button width in the library so card button width it is see right there I can set it to auto I think for this to show up on the front end I’m going to need important or maybe another trick. We’ll try, we’ll see. But I do want to go to layouts.
1:00:33
I hate how bricks sometimes moves the controls. Well, a couple of pet peeves with bricks. Let’s align self to the center. Excellent. I still need a little space here and a divider. I’ll show you how I’m going to whip that up in just a second. But I mean, look at how much it was done for me. The other thing that is part of the API is we have what’s called common pattern. We have what’s called an accent border.
1:00:54
If you notice here, this is what I would call an accent border. It’s a very common thing. It’s not the card border. It’s different from the card border. It’s like an accent border. So we have one of those in the API. So what I can actually do is I keep calling it an API. I don’t know what the fuck to call it, but like framework, whatever you want to call it,
1:01:11
but come down here and we’re going to say border and all I have to say is card accent border. All right. And it’s just going to, this is going to do it for me at that point. So even though things aren’t fully automatic, some things are still semi-automatic, right? Okay. And then we are going to, you know what I also want to do here? Cause this already has object fit cover on it. That means I can come in here with the object position.
1:01:33
Do you guys see what I just did? I just bumped her over, right? See she was there, but I’m like, nah, I really need her to be centered based on that photo right there. So I’m just gonna use a little object position and bump her. Didn’t touch, didn’t touch. Okay, this does not need to go to HR now. Okay, I didn’t, I’m just, we’re talking about here,
1:01:51
on the, digitally. That sounds even worse. All right, let’s move on. All right, so we are going to, what else do we need to do? The spacing, the divider right in here. Okay, see this. These overlays make it hard. There’s a little divider there, right?
1:02:08
Okay, you guys know me, you guys know I am not about like put a physical divider in there, okay? That’s not the game we play, that’s not the game we play. So we’re gonna be here with our follow footer. I’m gonna go with a big gap, right? Something like maybe that. And then I’m just gonna put an automatic divider in there. And I am in a way, I’m going to hope that, you know, this design doesn’t change too much. Like,
1:02:35
I don’t, I hope there’s not multiple follow rows. I don’t think there ever will be, but this is what I’m going to go with. So now I’m just going to come down here. Just again, it’s demonstrating like none of the defaults stuff that we did has held us back in any form or fashion from what we’re trying to accomplish. So I’m just going to use a little pseudo element right here. I’ll zoom in on this. Okay. Um, so we have our content. Uh, we’re going to go with of a hundred percent.
1:03:02
We’re going to go height of one pixel. We’re going to go with a background color of, and then we want to stick with our, our, our library, right? So we’re going to go with action, ultra dark trans 20 maybe okay we want to go with position absolute on this and we want to go with inset block start okay inset block start of 50% and if you notice it’s fucking flying around the screen right now this is because that little wrapper the follow footer is not position relative so we’re gonna go position relative on there. Oh my God, we got a little divider.
1:03:42
We got a little divider. Okay, save there. Let’s go to the front end. I mean, I mean, it’s pretty much done at that point, right? Oh, you know what? I think the follow button, noticing here, I think it’s a little extra.
1:03:56
That’s a little bit more than our card gap right maybe would you call that like a card gap times two perhaps okay so maybe we go into our follow footer this is why we group associated content okay we go in here layout how about margin top even though we’re using gap in this card nothing is stopping us from just popping a little margin on something right so we can do our card gap times 2 and maybe 2 is too aggressive maybe we do 1.5 maybe we do 1.25 whatever we want to do we stay
1:04:34
within the system okay so it’s still relative to my card gaps if my card gap ever changes so will that okay all right what do you guys oh sorry wait no we’re not done we’re not done follow suggest there should be a link on this card. We’re using clickable parent. I’m gonna go to my heading. I’m gonna go to content I’m gonna go to External URL. I’m gonna go with a pound sign here. I’m gonna go the front end. Oh my god. It’s already
1:05:01
It’s already done It’s already done. It’s translating itself. It’s box shadowing itself. It’s hovering its button. It’s they’re all keyboard accessible What do you guys want to know? Okay. I hate that. I hate the armrest on this chair. Oh, can’t see the straw. That’s okay.
1:05:26
That’s okay. I can show you in a second. Yeah, my fat head always gets in the way. So let me collapse all that. Let’s go in here, here, here. Okay, that’s the, here’s the baseline structure, avatar wrapper, content wrapper, follow footer, and then in here, button, button,
1:05:44
so that’s something you can still see that, yeah. Here’s your follow stats, here’s your follow stat value. Okay, you got it. Okay. Without being too enthusiastic, this is definitely a revolution of website design workflow. Imagine the life of an element or a divi designer. I know, right, I know, I know.
1:05:57
None of this structure, to clarify, if I was not following this system, this structure would be exactly the same. This is just a good practice card structure, right? So nothing that we did there is required or needed. You could use less of a structure if you wanted to. You would have less flexibility in your ability to manipulate card designs,
1:06:25
but that’s why I do this. This kind of structure gives you the maximum amount of flexibility in how you’re spacing things, how you’re whipping things, like the dimensions of elements, the flow, centered, left, yada, yada, yada. Fully maintainable, fully scalable. I mean, how would you now change your hover styling to, oh, oh, I didn’t even show you the fucking best part.
1:06:54
Guys, it’s so hard to remember all these things. What about these things? Oh my gosh, dark versions. There’s a dark version of all of these. Okay, how would that work? So let’s go in and let’s choose photo card. Well, we’re gonna use a BIM modifier. Photo card double dash dark.
1:07:15
You notice this, this class does not exist in, in this database yet. Right? Okay. So I’m going to add that. That’s just, just done. That’s just, just done. Okay. How about a Jesse icon card, Jesse icon card. Let’s go with a dark version. Why, why is it just done? I mean, the icons changing colors, the everything’s just changing colors, except this little tagline right here,
1:07:40
because we did that extra custom. How about the big Cassie profile card? Cassie profile card, what’s going to happen here? Double dash dark, oh my God, it’s just. Now, how do you fix these little things right here, right? Okay, good question, good question. So we’re going to go to photo card. We want to go to the main component, right?
1:08:00
Not the variation, because we want to use this dynamic root selector, right? So we say in the dark version, we want to target this thing right here, which is called a title. We don’t need the whole name of it. We just need to know what it is. So it’s a title, right?
1:08:14
So I go root dark, root title. We can do a border check here because we want to make sure that we’re actually targeting something. So see, I am. Now all I have to do is change that color and I can say Action Light for example, I can go. Oh, did I do border? No, this is this is color
1:08:35
Okay, so there’s action light on that and then I would just kind of do the same thing right here Okay, so to show you again, just the icon card That’s referencing just the icon card and then I want to reference what the dark version of that so I can stem off of that dynamic root selector. And now I can say, is that, was that called a title too? Is that a title? What was that? Media wrapper, content wrapper, header, tagline. That was called a tagline.
1:09:03
Okay. So here I want to say, we’re targeting the tagline. And then I want to come in here with color action light. Okay. Bang. So that’s going to do that. And then I would do the same thing down here for these. So it’s very easy, but look at all the stuff that was
1:09:18
automatically done for me. I mean, the, the hover button style, the, the, the button color all together, right? Like the whole dark thing, the text of the icons all changed the border. Oh my God. The, what was that common pattern? The accent border changed also based on the dark style. And by the way guys this this would be I I can’t tell you how to if I tell you how easy it’s going to be to set this up I would reveal too much about automatic CSS 3.0
1:09:50
so I can’t do that but I’m just telling you I’m just telling you none of what you saw here is hard none of what it’s literally filling out some fields and clicking a couple toggles and hitting safe. And then you’re ready to build cards just like I just built cards, right? The only challenge you would run into with this is if you work with a designer who’s like, I’m just gonna give you radically different card styles with no common commonalities, right?
1:10:17
Which probably wouldn’t look all that good. So as long as you are working within some commonalities between your cards, this is gonna be a game changer for you, right? Yeah, I mean, you’ve witnessed it, I think. You’ve witnessed it. Why wouldn’t you add the dark to the section and then use a calc on the color?
1:10:38
I have no idea. It’s just a thing of spitball. Yeah, no, you could use a dark on the section, but that’s not how modifiers are used in BIM. It is possible. It is possible. And we could think about doing something like that But remember the idea here is that you’re you’re having a loop of dark cards
1:10:55
So it wouldn’t be like dark dark dark dark dark dark dark dark You’d have a loop and you put the dark on the loop, right? And then all of them become dark at that point you could also though programmatically target cards in a grid and make some of them dark and some of them light if you wanted to And a lot of this will when we get into actually changing some of the default values on the fly because everyone You don’t have to just override them with classes. You can just override the variables like it’s everything is based on locally scoped variables It’s insanely flexible It’s just it’s really really really nice, right?
1:11:28
Okay, is it possible to create an accessibility card using interaction instead of a clickable parent and URL? I don’t know exactly what that means. I love this comment. I love this comment. I’m surprised we’re allowed to even have a fully automatic CSS in California. It may get banned, you know, you never know. You never know. It is quite dangerous, quite dangerous to other frameworks, other builders, it’s quite dangerous to them. So this could get banned at any at any moment now. All right, we got 190 people watching. Tom Phillips says, how? How? How? How? It can’t be that easy to change colors. Oh,
1:12:16
it’s that easy, my friend. It is that easy, my friend. Oh, it is. Oh, by the way, when this does come to automatic CSS, which I’m still not even, you know, before this, I wasn’t even convinced, right? I’m just playing around. I’m just playing around. I’m letting you guys, the reason we’re doing this is I want you guys to tell me, because I’m like, am I in my own little fucking bubble world here, like where I think this is cool, but maybe nobody else does? Or like, you know, I’m sure some people will hate it, but there are people in life that
1:12:46
just hate everything. But it’s like the majority of people are like no no no no we need this we need this and I want to see more I would make or maybe you’re like I don’t know if we need it, but I want to see more right I want to see it get more fleshed out. I want to see how easy it is to create the defaults, okay? Let me on the screen over here I’ll just read to you some of the library right some of the things that are involved in the in the library So your card backgrounds color your card text color inner padding we have an inner padding and a padding right now. I think we’re gonna eliminate the inner padding,
1:13:18
but and just use padding. I think we’re almost there. If you notice, I did not use inner padding anywhere. So I think that one can go. Remember I like over-engineer, then scale it back. Now, once we’ve over-engineered it, how minimalist can we make it now? How, like, what’s the minimum viable dose
1:13:33
to get to what we need? Card gap, card font size, card min height, card border width, card border style, card border color, card border radius, card accent, border style for all of those things, card heading size, card heading color, card icon size, card line height, card icon color, card avatar radius, avatar width, avatar ratio.
1:13:56
So you saw the avatar got to a specific size all on its own, right? Card shadow, card button width, card media radius, card media aspect ratio, card overlay color. And this is just the beginning, right? So a tremendous amount of shared styles between cards, a tremendous amount of control, and nothing that holds you back
1:14:17
from doing what you would want to do. Now, how does it know? How does it know? Because I am gonna show you right here. Let me take the dark variation off of this one here. So like photo card dark, okay. I’ll just leave the one in the middle with the dark variant. And yes, this is as easy as that.
1:14:37
It’s like one little modifier class in BIM. Okay, what was I about to show? Oh, yeah, yeah, yeah. Okay, so let’s come down here and make another section. And let’s make a div. I’ll just use a block. I’ll use a block what I did before, okay? Okay, and then I can put a bunch of stuff in here,
1:14:56
like five headings, whatever. It doesn’t really matter. So now I’m just gonna BIM this thing, because I want to show you it’s not really anything to do with BIM itself. So let’s move that up here, okay? And let’s open that up. I want you guys to be able to see it,
1:15:12
because it was way at the bottom. All right, so container, there’s my block with my stuff inside of it, so we’ll auto-bend this, and we’ll name this something like, you know, happy grid or something. And it’s like, apply classes, yes. Like, nothing happened to it, nothing. It’s not the auto-bend process that does any card stuff.
1:15:34
So it’s completely unrelated. It doesn’t block you from doing anything else you would want to do on your website. It only does what you want it to do, basically. Okay, we can delete that right there. The one rule, there’s a couple rules. We can go over the rules, right? The word card needs to be in the name.
1:15:53
You can use card anywhere in the name, okay? But the moment you’ve declared that this is a kind of, it’s a type of card, by saying it’s a card. You’ve told the framework, ah, I know what I need to do now. I know what my job is. I gotta come in here and I gotta do some defaults. I gotta pay attention, right?
1:16:12
Now, that’s one rule. You saw another one, right? If you want media to behave as media, it just needs to be called media. That’s it. So if you call that media, which by the way, that could be a video. That’s why we call it media.
1:16:24
Like it could be a photo, it could be a video. A video would get the same border radius. A video would be given the same aspect ratio, which you could then override if you needed to or change. And you’re doing that at the class level, which means for every instance of that card, it’s gonna take that effect. The avatar we saw, right?
1:16:42
If you want something to behave as an avatar, you need to call it an avatar. If you want your buttons to behave as default buttons, which inherit automatic CSS button styling. You need to call it a BTN, just like we have BTN action as a utility class, which does exactly what you see right there. You just need to call your thing with BIM a BTN,
1:17:04
a button, and it will take over. Icons need to be called icons, right? So that’s it, that’s like, that’s literally pretty much it. That’s like the extent of the rules. Anything else, you’re free to do whatever the hell you want to do. And it will just, it will take care of the rest. All right, let me go back to chat here.
1:17:25
I do want to get into maybe a little sneak peek. How much time did this take? 12, 18, okay, we’ve got time. We’ve got 40 minutes. We can either do Q&A or we can do some 2.8, automatic CSS 2.8 sneak peeks. This is pretty much the end of our card exploration, our card playground today.
1:17:43
But let’s get some reactions here. Let’s see. Would that pick up something like postcard header as well? No. It would need to be the word card isolated. In classes, we use dashes, right? So the word card has to be dashed. So if you’re using card within something else, it will not pick it up.
1:18:11
So yeah. Are the API styles being obtained from the ACSS website or are they local to the plugin? They’re being called from your automatic CSS installation. So like card padding is just an abstraction for another ACSS variable like space M or space L or space whatever. Like I can now change, see,
1:18:32
if I wanted to normally change the padding on like all my cards, well they’re all different BIM objects. They’re all different BIM blocks. So I’d have to go block by block by block by block going well this one had space M It needs to have space L that one had space in so it needs to have space L now not anymore Not anymore because I’m using a card framework now Which is an abstraction layer on top of the other automatic CSS variables
1:18:57
So card padding references space in if I want card padding to Reference space L because I want more padding and all my cards. I can now affect all of my cards globally. I can also make it smaller. I can affect the card gap globally. I can affect the card buttons globally. I can affect this little card accent border globally. The border of the every card. Doesn’t matter if it’s this BIM or that BIM.
1:19:29
I have now control over all of the shared styles from one single source of truth called the card framework or the card API or whatever we’re calling it. It doesn’t even have a name yet. And better yet, it’s all, well, I can’t speak to the workflow. I can’t because that is going to give too many details about ACSS 3.0. But I’m just telling you, this shit is going to be so easy. It’s going to be so easy.
1:19:58
And some of what you saw in the magic here today, you’re going to get that sense of feeling in ACSS 3.0 in certain ways. So, yeah, just be excited. I mean, be excited. Okay, people are like, no, no, no, no, no, we don’t need 2.8. Or I’m sorry, we don’t need Q&As. A lot of people voting for 2.8. Will all of these ACSS features eventually come to quickly.
1:20:26
A lot of them already are. Context menus are in quickly, AutoCalc, AutoVars in quickly, the whole framework works in quickly, the whole variable library, class systems, all in quickly, it’s all there. But if you mean like the card, this new card thing, yeah, that’s the promise with automatic CSS.
1:20:45
We do our absolute best. Like that’s why we have official builders that we support. Because when we bring something like this to Bricks, like AutoBIM, I don’t think AutoBIM is in Quickly, because we had a problem with their system. But AutoBIM is in Oxygen. Like if you’re an Oxygen user, you have AutoBIM, because we built it for both builders, right?
1:21:07
So that’s kind of our commitment to like, when we officially support a builder, we want people who use that builder to have access to all this great stuff. Okay, it’s not really an API correct, it’s part of the ACSS plugin. It could be like, here’s the thing, I don’t know what to call it. And I don’t really know, I’m not like a big API guy, but like, third-party design sets can hook into this system. So like, um, Ediwear, right? I think that’s how you
1:21:42
pronounce his name. I got to get with that guy. I need to bring him on one of the streams. I need to have a little conversation with him. I want to, I want to, I want to buy a beer with him. I want to hang out with him for a while. You know, cool guy, cool guy. Um, Oxy, OxyMaven, right? He could hook into this system so that when you use OxyMaven and we’re thinking about hooking frames into this. Like imagine hooking frames into this
1:22:04
to where every card in frames inherits this functionality when you add them to your website. Which means they auto-style themselves for the most part when you add them. Because you’ve just determined what cards are supposed to look like on this website. So if third party design sets can hook into it, isn’t that somewhat of an API?
1:22:24
Like, I don’t know, I don’t know. You tell me. We don’t have to call it that. We can call it whatever we want to call it. But just open now to like these other possibilities for this because this to me almost started out as like, what if we standardized how we name things in cards just in CSS land, not in like Bricks land
1:22:48
or Oxygen land or whatever. What if there was just this like shared kind of like an open source like this is what we call things in cards. And these are the variables and tokens that we use. So that when you pick up where another designer developer left off who crosses their T’s and dots their I’s and knows what the hell they’re doing, they’ve named things the same way you would name them, right? Or the same way we all named them.
1:23:11
And I know we’ll never all agree on stuff, but I mean, I think it’s better to have like a, you know, shared kind of like most people agree kind of consensus thing as to what these things should be called and how the tokens should be structured and all of that. Why is this like, my phone’s like connected to Kevin’s Mac studio like over and over and over again. Like, Doug, I don’t need you to do that. Okay. So yeah, Steven, great question.
1:23:40
See Steven’s like me. He’s already, he’s like, whoa, you can do this with cards. What else can you do it with? Right? Yeah, exactly. Exactly. Headers, footers. And I know those things only exist like maybe one instance on a site or whatever.
1:23:56
But when you’re talking about bringing a third party library into the mix, like what if any footer kind of styled itself, which allows you, by the way, to just swap footers. Okay, so like once you’ve styled a footer, and you’re like, these are kind of what my footers are supposed to look like in a lot of ways, but I just want different layout options, right? And you just swap a new one in, and it just inherits all that same, you know,
1:24:18
look and feel, so you don’t have to do the work. I don’t know, I don’t know what the extent of it is yet. It’s, this is us, we’re at the beginning, right? I used to do this kind of stuff in the inner circle. This is how automatic CSS in general came about. I start to flesh something out and I like to flesh it out with other people, right? I like to, hey, hey, inner circle,
1:24:37
hey, take a look at this, what I’m building. Hey, do you have any ideas on how to make this better? Do you have any ideas on how to make this more seamless or easier or whatever? Okay? Like, I give a lot of credit to my community. That’s why we’re like, why my community is pretty amazing, right?
1:24:54
I give them a lot of credit for a lot of stuff that we do in terms of like creating progress like this. Because I know a lot of people once they see this and start to get their hands on it are gonna have, ACSS is the way it is now in a lot of ways because of what we drive in terms of features, but the tremendous amount of feedback that we get, not just bug fixes, but feedback from actual users going, Hey,
1:25:17
this little tidbit right here could be better like that. It’s the same with all software really for if developers listen to their community, right? It’s how it’s how software collectively gets better. Hmm. Now I want to do a video, maybe a follow up of like, let me whip some cards up because you like I said, I’m going to go slow, let’s keep beginners with us, let’s not lose people. I don’t know, I mean, all three of those, conservatively, seven minutes, ten minutes, I don’t know, somewhere in there maybe.
1:25:52
Maybe less, I don’t know. And if you’re going to do that from scratch, you’d be hard pressed. If you’re going to take care of BIM, if you’re going to take care of scalability, maintainability, if you’re gonna take care of the clickable parent, if you’re gonna take care of focus parent, if you’re gonna take care of the hover styles, if you’re gonna take care of the dark variation, dog, you better, I mean, pull up a chair, get some coffee.
1:26:13
It’s gonna be a minute. But with this, I mean, it’s just like, bing bang, done, right? And it gives you so much joy when you’re like building the car. I never wanna have that feeling again, where it’s like, oh, I’ve got to build another card. I’ve got to build another kind of card.
1:26:29
These mostly just build themselves now. It’s regardless of the layout, regardless of what you want to do. We could do wide cards. We can do whatever we want. OK, let’s go to 2.8. A bunch of people said 2.8, 2.8, 2.8. I just like to see what chat’s saying,
1:26:47
because I never get to come back to the chat. Once I leave, it’s gone. I can’t see what everybody said, which if you feel your comment is important or relevant, or you really, really, really want me to see it. Go to the comments and leave it there. Because I do check the comments. I do reply to every comment. I never come back to the chat. I know there’s a chat replay. I don’t have time for that shit. I do not come back to the chat. So if you want
1:27:09
me to see it, you got to leave it as a comment. Okay, let’s look at some 2.8 stuff. Let’s go back to admin here. How about we look at content grid? That’d be a cool thing. So let me rattle off some things that are coming here. I’m building the, here’s the change log. I was building it on the backend. This by the way is the last major release of ACSS
1:27:32
before 3.0 there will not be if there’s a 2.9 something has gone terribly wrong okay this is the last this is the last before 3.0 so breakdance builder integration is coming see I let you guys in on the stuff because you come to the stream right you come to the stream you get to see things a little bit ahead of time we are going to be releasing Breakdance Builder Integration Phase 1 of that. So for any of you who use Breakdance, you’ll be able to get a lot of this goodness inside
1:28:08
of Breakdance. We have a content grid layout system, brand new, powerful new paradigm. You can actually cheat and go find the documentation for this stuff in the docs. This is content grid right here, which may scare you. But I assure you, it is tremendously easy. It is just so easy.
1:28:30
Okay. Once again, it just does everything is just done for you. Okay. But let’s take a look at content grid. It says content grid presents a new paradigm for content layouts. These are vertical layouts. Okay. So it’s not for every purpose.
1:28:44
It’s not for every use necessarily. It’s just, it’s just mainly for vertical rhythm kind of layouts, okay? And we lay out content using what are called zones. Now one of these zones is given to you by default, the other zones are optional zones. You have control over their size, their width, but we’ll take a look at how this works. And it can actually work in, let’s go 2.8.
1:29:08
And I will do an entire, once 2.8 is released, which is coming out later this week, hopefully, I will do a whole live stream dedicated to 2.8 and we will go into detail on all this stuff but I’m just giving a little sneak peek here and there. Okay, let’s open this up. So I add a section, right, and we know what traditional section structure is. I duplicate these, I can get more containers, I can group associated content, I get what’s called a container gap, right, between here. Anything I put in here is going to have automatic, what’s called content gap in automatic CSS, which you can get rid of
1:29:41
at any time you want, if you just don’t want it. You don’t, it doesn’t even have to go automatically. That’s a switch in automatic CSS that you can turn on or off. What you need to know is that everything that is done for you in automatic CSS always can be turned off. You can just say, no thank you,
1:29:56
I don’t want you to do that on this website. And in individual instances, you can always override it, it’s not a problem. So don’t get scared when you see a lot of automatic stuff happening for you, because I know people that build custom websites are always like, oh God, you’re doing stuff for me, I wanna do everything myself.
1:30:12
Hey, I build custom websites. That’s what I, I don’t just do templates and customize them, right? I build from scratch pretty much every site, except when I’m using frames, right? But I understand, I want to be able to do everything myself too. And you can. Nothing in automatic CSS stops you from doing everything manually.
1:30:34
But it just has a lot of shit to help you. And it’s nice. Okay, so, let’s look at content grade. Actually, let’s look at, I guess, let me give you an example of why, when this would be helpful. And in this one example that I’m going to give you, because it’s important to understand that what I’m about to show you is tip of the iceberg. Okay, don’t be like, oh, that’s okay.
1:30:55
You shaved off three and a half seconds. Great job, Kevin. No, this is the tip of the iceberg, okay? There are many other situations where this would save you, you know, hours of time, potentially. Okay, so I am going to add a container again, and I’m gonna add an image.
1:31:15
Okay, and we’re going to add the same image right here. You know, all right. Okay, there we go. So I am in a situation where I would like this image to go edge to edge, edge to edge, right? This content, I do not want to go edge to edge. It doesn’t make sense for text to touch the edge of the screen. That’s never a good thing.
1:31:37
Well, what we know about section is, is there is a gutter right here of padding. Okay. Which means if we wanted this thing to go full width, we would have to use something like breakout. Now this is a utility in automatic CSS that allows us to break content out of its container. Okay. Only exists in automatic CSS, by the way, I’ve never seen it in any other framework. The thing is, this is how we used to have to do it because there was no other option. And it’s kind of messy. You are kind of disrespecting the DOM, right?
1:32:08
The DOM said, hey, there’s padding in this section, there’s a container, you can’t just do what you want. And we’re like, shut up, sit down, we’re gonna do what we want, we’re just gonna break out. And this actually causes some vertical scroll issues because of a weird browser bug thing. So anyway, we don’t want to break things out if we don’t have to,
1:32:31
it’s better if we can just use a better layout system. So in this situation, we don’t want a gutter here, because we want to just go full width, but we still want the effect of this thing not going full width. So I’m just going to do a utility class called content grid and I’m not going to do it on that container. That is the wrong thing to do it on.
1:32:54
We’re going to do it on the section. Now you can use content grid on any box. Okay. It’s not just for sections. You can literally use it on any box. You can nest content grids inside of other content grids, which is super powerful. And when I put content grid on the section,
1:33:07
nothing happened. Literally nothing happened. Visually, you cannot tell the difference. You cannot tell the difference responsively. Nothing has changed except for this stupid-ass Bricks grid overlay thing, which absolutely I wish you could just turn off. I can turn it off for now, but when I reload the page, it’s gonna come back.
1:33:28
We need a toggle. To everybody tell Thomas, we need a toggle to get rid of the content grid overlay because it’s never in the right place, it never behaves right, it’s just really annoying. Okay, let’s get that out of the way. I just had a PTSD about not sharing. Am I screen sharing?
1:33:42
Let me go back, because I can’t see the feed. Okay, I can see the feed. All right, let me come down here. All right, yes, do not respect the DOM. I like this comment right here. Don’t disrespect the DOM. Okay, so we’re gonna take this container. Now, what you need to know about Content Grid
1:33:58
is by default, it inherits your website width. That makes sense, right? The default width of the content zone is your website’s content width. That’s why nothing changed. When we switched, we literally with one class switched from one section structure to a different section structure. Okay? All right, now what does this allow us to do? It allows me to come down to this container and under grid I can just write the word full and now it is full width, right? And the image is not full width because it’s I don’t think it’s high enough resolution So we need to come in here and say like hey, you need to go on a percent
1:34:34
Okay, and then let’s go save and I think if we refresh we’ll be good to go And now we have our full width image now, you could also come in here and you know You could do something like aspect ratio. You also get live preview of all this stuff in automatic CSS if you’re new here, okay? So if you’re not sure what any of these things do for aspect ratios You just hover over them and you get a live preview of exactly what it’s going to do to your aspect ratio so now I Mean look at that now I also have what are called feature areas and this is this works really well when you have a very narrow
1:35:09
Content column which we can make a very narrow content column. And if you think this is like, oh, that’s just like a simple little thing. Well, I mean, you could scan the documentation, right? And this is not because it’s complicated, it’s just there’s a couple things you need to know. You can change the, well, let me show you in 2.8. This is a dashboard you guys can actually look at.
1:35:32
So if I go back here into automatic CSS, and I go into additional styling and I come down see the content grid section now I can turn it off if I want to okay but I can also control what is a feature zone and what is a feature max zone because there are two other zones that you can use let me zoom out for this there we go there’s our normal view so if I duplicated this and duplicated this see this container right here could inherit our feature zone look how it breaks out a little bit. This container right here
1:36:06
could inherit our feature max zone. Look how it breaks out a little bit more. Then we have full and we have full safe, which is full safe gives you a box that touches the edges, but then puts padding inside of it. I believe, I think it’s full safe. We have a utility for it.
1:36:21
Let me see if we get, cause you can use classes as well. Let me get full safe, there you go. So it went all the way to the edges. See, I’m still learning shit myself because it’s a new feature. So content full safe takes that box to the edges, but gives you the gutter back inside the box
1:36:42
because it’s safe, right? That’s why it’s called full safe and not just full. See, full will take it all the way. Content full. Okay, that one needs to be, oh no, because this one is done at the ID level. So full, there you go, but I’ll take that off and we can say content full.
1:36:57
If you’re wanting to use utility classes for this stuff, there you go. So look, that touches the edges. So we knew, hey, there’s gonna be times, like with an image, where you want it touching. There’s gonna be other times where you want something to go full, but you still need a gutter because it’s a box for something else.
1:37:12
And so now you can still have your gutter and eat it too. Isn’t that great? This is all explained in the documentation. You know where this is madly, wildly helpful? Blog post templates. Because you can’t control any of this from Gutenberg typically. Now you can.
1:37:31
Now I can reach each of these zones with various types of content from in Gutenberg. Game changer, game changer. I can also programmatically tell items to fill different zones. Like I could say, hey, all images, all figures that get added to this blog post, go to the feature max zone.
1:37:50
All block quotes, go to the feature zone. The rest of the content stays in the content zone. I can change the width of the content zone if you like those narrow blog posts, on the fly, on the fly, okay? Powerful new layout system that is totally optional and you can use however much of it or however little of it you want.
1:38:12
You never have to use this or you can use it for everything. There’s actually gonna be a switch in Automatic CSS that says all sections, I want them all content grids. I just love the content grid thing, I want every section to be content grid. And you just flip a switch, and all the section structures switch to content grid from the traditional section layout.
1:38:35
Okay. My brain is on fire, so much information. Guys, there’s no, right? You come here and you’re like, wow, this is a different experience. This is, there’s different ideas that’s being thrown around here And when you put them all into workflows
1:38:53
The goal is because like, you know people tell me this all the time. They’re like I ran into this challenge That I couldn’t figure like with this breaking out content thing. This is just a fucking common challenge The people are like, I don’t know how to do it. I don’t and they just go to the ACS community and voila It’s a feature you just drop a utility class and it’s just done for you, right? The card thing that we just looked at. I mean, it’s just my goal is to make, I’m all, and it’s, look, I’m selfish, okay? I love you guys. I fucking love you guys.
1:39:26
But like, I’m doing, this all starts from me. I’m like, damn, that’s a headache for me, right? So I solve it for me and then I just give it to you as part of it. So, but really it’s not like that I show up to work going like, I wonder what, you know, Jack in Wisconsin, how I can make his workflow better. You know, I wish it was like that. But it’s really just, it’s, it is kind of about like, what’s a headache for me lately? Let me go ahead and solve that. And then let me because I know it’s a headache for a lot of people, right? Let’s just go ahead and fix that. Next thing, BG, BG’s moving us along.
1:40:02
I like, BG needs to be our moderator, right? This is what a good moderator does. He’s like, fucking next, stop. He’s like, stop, here, how do I feature that? Stop rambling and go on to the next thing. Okay, well what do you guys wanna see? You wanna see Magic Grid? Which is no longer called Magic Grid, by the way.
1:40:18
It is not called Magic Grid. Because I thought to myself, you know, I’ll just be honest, like Magic Grid, it was like, that’s got a nice marketing ring to it. It’s got a little like, ooh, I wanna, of course I wanna know what a MagicGrid is, of course. But I’ve learned, CSS, it’s like when you come out
1:40:38
with something like fluid responsive typography, when people first see fluid responsive typography, they’re like, this is amazing, this is the best thing ever. And then two years down the line, it’s like, alright, everybody’s doing fluid responsive tiger, it’s not really that magical anymore. It’s gonna be the same case with this. So it’s like, I don’t want to call it magic grid, because a year from now, it’s really not going to be all that magical.
1:41:00
You know, for advanced people, it might not even be magical right now. Okay, let’s take a look. Little eyeball on my mouse is not responding properly. Okay. Let’s take a look at Magic Grid. Let me go to, I was going to use one of the cards we just did. I was thinking about using one of the cards we just did. But now I’m thinking because I can’t copy-paste on this local install because I’m not on SSL. Let me go see if I can get, was it card page?
1:41:32
I can add one to the library, I think. Let’s do this Jesse stock card, this photo card right here. Let’s go add to say this template Okay photo card Yeah, let’s just save that fantastic. Okay, let’s close that out and Is it already magically here? My templates photo card look at that look at that. Okay, so I’ve got three cards in this container. This is what it looks like when your card’s not in a grid, right?
1:42:07
So we obviously want to put this in a grid. Now what I’m going to do over here, what this is called, let’s reveal the actual name, it’s called variable grid, okay? So we’re going to do a little search for variable grid. You can read up on this if you want to. All right, variable grid, but we’re just going to take a look at what our options are. Now, this is an extremely lightweight system, okay? Literally, I’m not shitting you right now.
1:42:33
Five lines of code to load this system and use it, okay? So how do you create a variable grid? You can use a var or you can use a class. If you’re creating a custom grid, you wanna use the var, variable grid, under grid template columns. If you’re just doing a one-off grid, you’re like, I’m flying through this, do whatever I want,
1:42:57
you can use the utility class, variable grid, okay? So let’s go see what that does when we add it. And hopefully I’m in the right branch. I think I’m in the 2.8 branch. Okay, let’s go to, let’s do the utility class first, variable grid. Okay, so immediately we get two columns and you also notice that it’s automatically responsive, right? So if I just come down here, it’s already broken, right? Like it’s not broken, it’s stacked.
1:43:25
I always say broken, I mean stacked. Broken is a bad word. So stack, it automatically stacks, right? So it’s an, it’s out of the box, it’s an automatically responsive grid. Now, you know what you have to do in traditional grids. Just let me refresh your memory. You have to go grid three, because you want three columns. But then you have to make a decision like, okay, maybe that fits, maybe it doesn’t,
1:43:50
but it’s kind of in between two. I’m making, this is a very arbitrary thing. Do you guys know how relatively arbitrary breakpoints are? That’s not the most important thing that we should be analyzing, right? But let’s say I have to break it here. So I’m going to go grid L, because that’s the L breakpoint, 2, OK?
1:44:08
And I pop that in, and it breaks into two columns there. Then I come to here. This is just ACSS 101 from years ago, right? Nobody really does it like this anymore, but this is what we used to do. OK, then you go grid M1. So at the M breakpoint, I want one column, and that’s where it stacks.
1:44:26
And now you have a responsive grid. Now only chumps sit here and write these, right? So what did we give you? One, you know, one option we gave you was, hey, you can just literally come up here, type grid and go three, two at L, and then one at M, right? And there they are.
1:44:43
And now I have a responsive grid. So that’s fairly quick, right? You also have auto grids. Okay, so your other option is to type in grid and you can select auto three. So auto three gives you three columns but is automatically responsive also. Okay. In automatic CSS, you have lots of tools in your tool bag, lots of options at your fingertips. Okay.
1:45:06
And that’s why I put out so much education. I was like, what would you want to use, when and where and yada, yada, yada. And some people don’t use any of this advanced stuff. They just stick to the same streamlined basic workflow. That’s fine too. We just, I like your toolbox to be full, okay? Because there’s certain situations that call for certain things.
1:45:26
Okay, let’s go back to variable grid. The big difference between variable grids and other kinds of grids is that other kinds of grids care about breakpoints, and variable grid cares about children. Variable grid cares about the children. That’s all you have to know. Doesn’t that sound so warm and inviting that this grid structure would care so much
1:45:56
about the children? Now, I’m telling you that because that’s super important. So we’re going to go in here, because there’s one other thing you have to do right you have to tell it What the allowable width is the minimum allowable width now? There’s some tricks up the sleeve as always okay? But the baseline thing that we’re doing here is we’re saying how how narrow should that card be allowed to get right and? In this case I go to the front end because I’m only gonna make this decision once, right? And I’m going to go into responsive mode, and I’m going to start squishing this card,
1:46:31
right? And I’m even going to come down to the smallest breakpoint. And I’m going to look at that card, and I’m going to start to say, all right, you know, like, and you can do this two different ways. And this is explained in the documentation. You can say it is an absolute minimum, or you can choose like a, you know, like an optimal, like an optimal width. Like what’s, is that an optimal width for this card?
1:46:52
Not really. Like the optimal width is like, you know, there-ish. Okay? Again, you can do this however you want. You can also declare a minimum and an optimal at the same exact time. But I don’t want to blow your, like, brain completely out. Okay?
1:47:09
Which I probably have already done, and I apologize. But, yeah. So let’s go in here. And it’s telling me right there that that is 450 pixels wide. So at 450 pixels, that’s kind of like the optimal thing for this. So what I’m gonna do is go to style
1:47:24
and there’s multiple ways to do this. The other superpower of variable grids is that if you have a grid situation where you’re using JavaScript either create the grid structure or modify the grid structure, variable grids is gonna be absolutely fantastic for you, right? So we come in here and we go min and we go 450 pixels, right? All right, now what it’s going to do, it’s an automatically responsive grid. Now we can,
1:47:47
again, change this. If we said 350, we’re going to get three columns. You can adjust this on the fly if you want to. And again, this is why I say in a lot of cases, you’re going to want to set the min and the optimal at the same time. And I show you how to do that in the docs, okay? But right now we’re just gonna talk about this min. So again, the superpower of this grid is that it says, it doesn’t say what breakpoint are we at? It says, what does the card look like? Here’s the fundamental problem with normal grids
1:48:17
that care about breakpoints. A breakpoint is one value, and there could be a 100, 200 pixel range in front of that value or after that value where your card looks like absolute trash and you would like it to shift before that breakpoint or even after that breakpoint but you can’t because those grids only change at breakpoints. Now variable grids look they behave much like container queries in the sense that they care about the children. They’re looking at
1:48:47
that child and saying hey that child is at that minimum width that this guy said, we can’t let it go any further than that. And that’s where it stacks the grid, right? So it doesn’t care about breakpoints anymore. It looks at children. That card will never look bad. It will never be squished too much, regardless of the device, regardless of the breakpoint. It is protected from ever looking bad because it’s stacking based on minimums, right?
1:49:16
It’s still allowed to grow. Look, it’s able to grow. Now, how does it know how much to grow? It grows exactly the amount to where if it can fit another instance, it’ll just fit another instance of it, right? So it cares, once again, about the children. Now, can you come here and modify it?
1:49:35
Oh my gosh, yeah. I mean, if you want full control over it like here you’re like oh okay well what do you do I mean if you’re that OCD I mean I wouldn’t do anything with it but you can come here just to find the men again just say hey we’re gonna allow more or we’re gonna allow less let’s just stack it there right let’s just make it stack there you can do whatever you want once again it does things for you and it has a certain behavior but you still have full control over it. You’re never not in control with any of this stuff. So yes, can those min local vars be added to a class rather than ID?
1:50:12
Yes, you can create your own little utilities. We can map this to the whole card situation that I showed you earlier, right? That min can be mapped to a card min width or something, right? So all your cards automatically, now I don’t know that you would wanna do that because if you have wide cards, right, that’s different from tall cards, it’s not necessarily a shared style, but you could create different utilities like a min, you know, 450.
1:50:40
That’s 450 pixels, that’s the min for that. But here, here, come in here, come in here, come on, come on, come closer, come closer. You go down in the documentation here, just let me just take a minute to say, there’s no other framework with this, other than Tailwind, there’s no other framework with what we’re doing
1:50:58
with like documentation, okay? So you got, and with education, so you guys know exactly how to use these things and deploy them and manipulate them and make the most out of them. You can use a max function to set a min and the like desirable width, okay? And both will come into play, and, and, and, and,
1:51:17
something really cool, see, most max functions, you need to have a variable unit, like VW, because 25 VW on a big screen is gonna be much larger than 500 pixels, obviously, okay? So the thing is allowed to grow, it’s gonna choose 25 VW, if you know how max functions work, it chooses the maximum value. So it’s gonna be 25 VW if it can be 25 VW.
1:51:42
But the minute it gets to, the minute 500 pixels happens to be bigger than 25 VW, which happens on smaller screens, it’s gonna choose 500. Now, that’s kind of annoying, because it’s like, well, I want an optimal value like 750 pixels, and a minimum value like 500 pixels. But you can’t do that with a max function because 750 pixels is a static value
1:52:08
that will never be less than 500. So the max function is useless. It will always choose 750, except in a variable grid. Because in a variable grid, we’re using the max function in a min function in a grid, which means that it’s actually allowed to be 100% if it needs to be 100%, but it will also take two static
1:52:28
values and play with them together, which you can’t do anywhere else, which is fantastic. It’s really cool. Okay, anyway, that’s a that’s variable grids. And so these, like I said, these behave like container queries, they give you a similar effect to what a container query might give you. But it doesn’t use container queries. It doesn’t rely on container query support, okay? It just works.
1:52:55
Okay, David says, I really need to read the documentation. There’s so much in there. Yeah, here’s the thing. Don’t be, if you’re new to ACSS, you don’t have to use any of this stuff. This is, as you grow in your workflow, as you grow in, like, you can do everything you wanna do to build a website without touching variable grid,
1:53:17
without touching content grid, without the card system we just showed. If you just are like, I just want to go traditional, I want automatic CSS to help me with colors, spacing, typography, yada yada, the basics, the absolute, hey, 100%, 100%. Then as you get comfortable and you start running into other challenges,
1:53:35
like, ooh, I’m working on this blog post template, I need to be able to break content out. How am I gonna approach that? Oh, well, that’s when automatic CSS just goes here. It’s already done for you. And you’re like, oh, thank you. Now you’ve learned that thing. Now that’s another tool in your toolbox
1:53:50
that you have available to you. Then you’re in a situation where you’re creating a grid and you’re like, I need more control over where this is breaking. Why is it breaking based on break points? I need it to break based on this card layer because it keeps squishing my cards too much. I don’t have enough breakpoints. You ever heard somebody say that? I don’t have enough breakpoints. Well,
1:54:07
guess what? With variable grid, you don’t need any breakpoints. No breakpoints would be needed if you use variable grid. You could just design at any breakpoint. And because it’s a variable grid, it responds to the size of the children and not the size of the device. It works. And so there, CSS just goes here, here you go. Right? So it’s like every problem you run into. Same thing with the automatic header thing. You make a sticky header,
1:54:33
and now your header is intruding on your hero section. You’re like, oh my God, it’s taking up all the padding in my hero section, and it’s doing that on every single page. What shall I do? And automatic CSS goes here. Just a little toggle, just toggle that on, it’s gonna take care of that for you.
1:54:48
And it’s fixed across your website. It’s over and over and over again. And this is not what frameworks do. Traditionally, frameworks were just libraries. Here’s a whole shitload of classes. Then they came out with variables. Here’s a whole shitload of variables. Have at it.
1:55:06
Now, automatic CSS solves actual problems and then happens to do it mostly automatically, in some cases, 100% automatically, right? It does what other frameworks absolutely do not do, don’t even think to do. It’s not even a thought in their mind, from what I can tell. And this is just, I mean, this isn’t 2.8.
1:55:30
This is not even 2.6, 2.4. I mean, you just keep going back. It’s just thing after thing after thing after thing And it all adds up to being tremendously valuable. Is there anything else that we want to look at here? So on the change log Contextual utilities are coming with automatic color swapping. I tease that out in the ACS has group the other day That got that was you know, high fanfare people like that one a lot A lot of little stuff a lot of little stuff coming
1:55:57
masonry layouts. Have you ever been in a situation where you’re like I really need a masonry layout for this. What shall I do? Like let’s go you know if these photo cards had different amounts of content in them. Like what if we had two bios in this one. I know this is going to be ugly just hang with me for a second. Okay, I just want some variable nature in here. Okay, let’s take the variable grid off. We don’t need this min anymore. By the way, this min, if you just leave it there,
1:56:35
it won’t harm anything, it won’t hurt anybody, okay? But I’m gonna remove it. Okay, so let’s see. Off the top of my head, I’m trying to remember the utility here. Let’s go to the container. So you want to go to the parent of all the cards. And I’m just going to go with masonry.
1:56:56
And I’m going to choose, it works very much like grid. And I don’t think I get live preview yet. Let me see if the three even works. And I don’t even know if I’m in the right branch. Once again, these live streams are the wild, wild west of like what branches Kevin happened to be in, what dev branch does he happen to be in? Let’s go with that right here and let’s go with gap of M.
1:57:19
Or let’s go with content gap. See if we can do this with or go with gap M. Gap L is supported, gap M is supported. Yeah, that’s supported. Because the thing you have to know about masonry grids is there’s no native support for the concept of masonry in CSS. And in fact, the technique that you have to use to create masonry does not have row gaps.
1:57:45
Like what you’re seeing right here with these row gaps, using this gap m, which is a gap for flexbox and grid, we’ve just hijacked it and made it work for masonry layouts. It’s doing something that’s not even possible in vanilla CSS right now, without a bunch of workarounds, right? So you’re like, hey, I need a masonry layout. Let’s go refresh this. Let’s go out here, get rid of that.
1:58:08
Now you have a masonry layout and it will handle all sorts of different aspect ratios. Like we did it with images and things like that. Just a couple of utilities, just drop them on there. Now these should work. These may, oh, it’s not gonna be in the context menus yet. These masonry three, that will give you a three column masonry a four column masonry a five column masonry
1:58:29
I don’t know what dev branch I happen to be in right now again This is an unreleased version right? but you’ll be able to select the exact number of columns that you want and then again at each breakpoint and This will be in the context menus when you type masonry so Just another one just yet another like man when you need a masonry layout. It doesn’t really get any easier than that. This is like, all right, masonry three, gap M, here we go. It’s just constant, stuff like that over and over and over and over again.
1:58:59
All right. I think, we start really good viewership here. That is the two hour mark. One thing I said is I’m going to be more diligent about, let’s end at the two hour mark. Let’s not go crazy with the marathons, okay? Quick reactions here in the chat before we leave. What are your thoughts and feelings? Thoughts and feelings, thoughts and feelings
1:59:21
to get us out of here. Will there be variables for the masonry? No, because what’s required to do masonry layouts can’t be done with variables. You can’t, because variables only map to single values, right? It’s just a placeholder token for a value and masonry is much more involved. Salivating. Fucking amazing, epic.
1:59:52
Okay, good, good, good, good, good. I didn’t know. I didn’t know. I was like, hey, I’m going to show this card thing. I’m going to show some other stuff. I mean, I never know what, I mean, I have a pretty good idea of like what’s good and what’s not good but you know you never know till other people see it. When are these cards available? Really good question. Okay let’s cover that real quick
2:00:16
before we leave. Not in 2.8 not in 3.0. 3.1 very possible. Now here’s what we will be doing, and this is why it’s very important for you to be in something like the inner circle or at minimum in the ACSS community. I told you, I like to play around with these things. I like to let other people play around with them. I only let people play with my toys when they’re in my community, right? You could be in automatic CSS, you could be in the inner circle, but people in there will get to play with the toys before everybody else gets to play with the toys. Because I need other people to play with the toys
2:00:54
to tell me how the toy needs to get better before we give it to everybody, right? And we want to make sure that we’re crossing T’s and dotting I’s so we don’t have to work backwards in the future or deprecate certain things. Like we try to limit the amount of deprecation that has to happen. So you need to be in those communities.
2:01:12
You will get a chance to play with this card situation, and especially if you have ACSS 3.0, because ACSS 3.0 unlocks an extra layer of magic to the card thing that you saw earlier. And only people that have their hands on ACSS 3.0 will get to play with that. So, because there will be an unreleased version of ACSS 3.0 with this cards thing.
2:01:33
So it’s gonna be like an ACSS 3.X or something and the X stands for only certain people have this and that’s gonna have the card system in it and you’re gonna be able to freely play with it and you’re gonna be like this is this is magical I really like this so make sure you’re in the communities make sure you’re active in the communities sometimes I put a call out I’m like hey who wants to play with the new toy sometimes I go in and I go oh I recognize you I recognize you. I seen you on streams. I’ve seen you on commenting.
2:02:07
I’ve seen you here. Come play with the toys. Okay. I just hand pick people. Just depends on what it is. Okay. So, all right. Um, you get, you get rewarded for showing up to live streams for commenting in the
2:02:21
groups for helping people out for just generally being awesome, right? Okay, all right, we gotta get out of here. I love you guys. I will be back next week. I’m gonna be in Florida next week, so I’m not sure about the live streaming situation. I will keep you up to date. I wanna do it.
2:02:40
If we do it, it’s probably gonna be a pure Q&A kind of thing, because I’m limited on what I have down there, and I’m working on a small laptop and stuff like that, but we’ll try to get one in. With any luck 2.8 comes out this week. So some of this stuff that you saw you will get to play with and ACSS 3.0 is getting very very very very close. So stay tuned. I love you guys, and I’ll be back very very soon. Peace.
