WDD LIVE 081: Building Multiple Card Variations LIVE + Q&A

Hello hello hello super chat from ruben already sitting here in the uh in the stream i love it thank you for the support ruben i don’t know how i don’t know how much money that is what is that what is that 4 000 cop i don’t know uh you’re confusing me already ruben you’re confusing me already all right good morning uh says d123 welcome everybody uh yeah a few people got a little confused because of the daylight savings time i understand it i understand we shouldn’t change the clocks i i i don’t we shouldn’t be changing clocks i don’t know what to tell you we can make this way easier if we all just agreed on uh what time it’s going to be uh mark zemansky in the house where in the world is ruben garcia yeah i don’t know i don’t oh that’s almost a dollar oh wow thank you ruben thank you i appreciate it i appreciate it uh what can you i don’t can you buy anything for a dollar these days i don’t think even the dollar store everything at the dollar store is like nine dollars now it’s pretty bad it’s pretty bad out there okay 92 cents uh man all right uh here’s what we’re doing today we are live building some cards uh some card design some card pattern i was i was looking for some some good ones if you guys have any that you know of uh you can feel free to put them in the chat now links won’t work but you can you can kind of slyly put a link you can just type it out like you know for dot com just write dot com like literally write it uh and i and i should be able to pull it up and find it i do have some that we’re going to start with um i’ve got some on figma i’ll show you guys i guess let me let me pull this up and see let me move this window over here okay let’s share screen so i don’t know there’s some some cards in here that we could do um there’s this article card kit thing i found on figma that we can do um but i’m trying to figure out how where are they templates elements okay here’s here’s like a bunch here’s like a bunch of variants um so we could do we could try some of these these these might these might work some wide ones in there uh but i also got maybe maybe we’ll try this one um i also found this site right here and this was like obviously there’s a real site right so um there’s some icon cards in here that might be interesting there is uh this these like article cards which are just kind of tech but they have this hover border kind of thing going on uh if you go to company i think they got some some team cards in here and what we’re our goal here is to i i’m you know because the card framework is experimental we have to experiment with it we have to we have to play we have to practice we have to we have to test it we have to do different scenarios we have to see where it excels where it might can be improved things like that so it went from just can we like making it work thinking it through making it work now we have to see how it actually plays out in the real world and if you uh don’t have a ton of experience building cards you’re gonna learn a lot from this process even aside from the uh card framework so there’s there’s a lot that we can uh do here uh doing acf back end with card i don’t know what that means jonathan maybe if you can clarify uh marcel says would love to see some variations that work wide but also like in a ratio one to one or grid three uh you mean you mean that um they like maybe with container queries or something like that we can we you could drag one from being wide into a grid and it and it restructures is that what you’re talking about uh we might we might be able to do some of that the admin bar had a video a few months back with card cutouts quite interesting um okay uh we don’t have that okay good good good good good let’s rock the etch yeah that’s that’s coming soon that’s coming soon for sure let’s start with this because this is a real site we can start with it because you know it’s like the thing about figma too um one of the problems with all these like card packs that i was finding they were all different like design styles and that’s not really the card framework is for a project and a project uh has consistent cards that’s the whole point like the cards are like notice that this card style is consistent with this card style it may not seem it it is but it should be like the padding should be the same you’ve got the same colors right uh this little design accent bar that they’ve got going on is actually present on these cards as well there there’s tie-in from in the ui right that’s the whole point when you use like random card packs from you know that’s not really what a framework is for like because you wouldn’t do that on on a real project you wouldn’t be deploying like oh well this card looks like this and this card over here looks wildly different from that and uses all different properties that’s not really how projects work right so i think we’ll start with this just because it’s a real project that it’s like you could easily see yourself tasked with building this uh site and we’ll start here to see how the card framework really performs um okay rob says stream not working for anyone else uh it should be rob i everybody’s here everybody’s talking everybody’s chatting it up all right we got good viewership we’re gonna go ahead and get started um well first i want to do this if you are in the inner circle uh just published and i i’d ask people about this it was then became heavily requested uh i used to have this in base camp obviously we don’t use base camp anymore but what i did is i took my pre and post launch website checklist and i recreated it in notion and so if you’re a notion user you can just go in and duplicate this thing if you are not a notion user it’s okay because i have a pdf version and a markdown version this is basically an 86 point checklist for whenever you’re doing a new website launch okay so right before you launch there’s a big checklist and then right after you launch there’s a little checklist and um this this should really work to standardize your workflow professionalize your workflow for launching new websites tells you all the things to check it’s really good if you have multiple people working on a project too uh really really really important to have these kinds of things in your agency or freelance workflow that is now available to you inside of the inner circle it’s under agency resources i would go get that right now and uh even if you have one already you need to look at this one there’s probably things on there that you’re not accounting for and then you can use this to supplement whatever your existing workflow is for launching sites so um yeah definitely uh do also as marcel says um like the stream guys we got to get over 20 000 subscribers before the end of the year so if you’re not if you’re watching this now and you’re not subscribed to the channel hit the subscribe button get subscribed to this channel we got to pass 20 000 before the end of the year and um you know next year the sky’s the limit right okay uh i would never want to i see like to share this with one of my clients uh so i would never want to jeopardize the ic but i’d like to share this with one of my my clients existing web dev yay or nay um i i i suppose i suppose that’s fine um i was just figuring out some great items i wasn’t thinking about good good good okay all right all right let’s start building cards let’s start building cards i got the sandbox pulled up here uh we’ll go ahead and go through it so let’s start with we’ll start out you know nice and light and easy so we’re gonna do this little icon card right here and i guess if we look around the site this is kind of the only icon card that i’ve found let’s just do a quick peek at the other at the other pages okay note this this site is very consistent with like notice and this is actually a perfect example of some other aspects of acss that are in play as well like having a global border style you notice the borders on their faqs here are the same borders as on this card are the same borders as on this thing right here and this card right here and the same borders that are on this card and this is like the whole point of having like a okay you got a global border styling right global divider styling these are things that automatic css accounts for oh there’s another icon card right there these are going to be interesting too because these are not icons from like an icon set these are custom icons and i’m wondering if i can steal their svg element and put it in a code block and see if it’ll work in the card framework uh with the icon framework actually so that’ll be interesting to see uh but they all look like they’re the same size which is good like that’s their standard icon card size okay i i feel i feel good about this um let’s start with this four this four column grid right here so we’ll go pages we’re going to call this uh velar labs okay so we’ll come in here velar labs and publish publish and edit with bricks okay i am using the brand new version of bricks which i heard has a few little issues i hope hope that doesn’t cause any problems uh but i guess we’ll find out so let’s do a grid um auto four okay so auto four column grid let’s drop a block in this is going to be our icon card okay and yeah that’s it that’s all we really need so what i’m determining now is do we need an icon wrapper or do we want to go with no wrapper and just go with the icon and the text uh let’s go back to this vesta page and see if there’s any other things that we need to account for in icon cards where were the other ones approach ah okay uh might be a heading thrown in there some text okay i i don’t i don’t see a need for another wrapper so i’m just going to try to do without it uh let’s do a code block and let’s do a heading and text we’ll just get this configured sometimes you need the heading sometimes you don’t need the heading apparently with these so like these have a heading but back on the home page i don’t think that they’re i’m gonna go back to the home page no heading well i don’t what is i don’t even i don’t even know what’s going on here uh no it’s just a paragraph it’s just a paragraph okay all right um these would be typically h3s uh based on what you’re doing there and let’s just grab this i don’t really like the way it’s just kind of i don’t know whatever paragraph okay um and then yeah so we’ll just call this icon card icon card okay so this is going to be the icon uh this is going to be our heading this is going to be our text and we’ll just auto bim this real quick cool and then let’s see if we can steal the little icon all right so we’ll just take this copy the element and come back in here paste that in and we will execute code we will uh render without the wrapper we will sign the code let’s see if that okay that’s large uh let’s go with a so the icon framework which i don’t even know if it’s turned on right now we probably need to turn it on is driven by this um data attribute called data icon okay and we’re going to sign the code there and we’re going to save and then we’re just going to go to the front end for a minute okay which bricks no longer makes it easy to do thank you that’s fantastic all right let’s go back through here and view i think i got to change my setting there all right let’s go to automatic css and let’s see what we’ve got here so icons icon framework needs to be on let’s save okay oh well that’s a good start uh let’s go to cards card framework needs to be on let’s save we also want to come down into options okay primary style is going to be light automatically style cards on and we can clear that out clear that out we need to get uh just use the defaults here for now okay fantastic okay uh let’s go to icons and see we do want to use a boxed uh oh they’re not using boxed icons no on the boxed icons okay so that is well let’s see are they did they use boxed icons anywhere else uh i’m thinking no so far no no no no no no no no okay all right we’re gonna go no boxed icons uh so we’ll go to options turn off boxed icons and save okay um there we go we’re off to a good start let’s let’s get their size what what size are these icons let’s go inspect and 36 by 36 it looks like okay so let’s get back into automatic css and we’ll go icon sizes no we actually want to go because this is a icon card i don’t even know if this is going to work with the i guess it should with this code code block element okay all right let’s save let’s refresh i’m wondering if that did that do that now it’s 48 by 48 still okay that may be one thing that we want to look at here um did that get a class on it and uh probably did not get the class because because it’s it’s rendering without the wrapper uh maybe we do need to render with the wrapper let’s see let’s let’s see if that breaks anything or helps anything or that helped that helped for sure okay now we’re getting our proper size because the the card framework is looking for this class icon card like anything that’s double underscore icon that’s what it’s looking for uh in a card right so with the when we’re rendering without wrapper the class that i put on there is has nothing to be attached to but if we allow the wrapper to come in then we are going to get the proper functionality okay um it’s also making our text small which i need to look at all of their cards and see it’s usually it’s just using m text it looks like so they do not use smaller text uh so we’re going to go back to cards and so this is what you do is you set up the framework based on the results you’re trying to achieve right so typography uh this is text s i’m just going to move that to text m and then uh as you work everything’s already pretty much done for you at that point uh let’s see what our background colors are okay so there’s this let’s inspect this let’s get the background color uh color color color no background background background background color here we go okay let’s grab this let’s grab this let’s grab this let’s grab the hsl okay and oh oh i just used the slider to i think it was 90 that’s what it was set to okay uh 90 14 and then i’m just going to use the opposite to make it dark so 90 14 and 12 or something like that actually let’s just grab let me see what how i want to do this 90 14 97 where’s the hex okay just grab this for a second all right um let’s go to colors this is going to be our i would say our base color right okay and then i want to put in like 17 just to make the base dark because then we can use ultra light for this all right and backgrounds and text backgrounds so website’s going to be white but ultra light is going to be uh base ultra light and then we’ll just go base light here fantastic okay now let’s refresh our builder and let’s see if we can go bg base ultra light there we are so now we got our little whatever they’re using for the ultra light background there we’ve got it going on here now our cards can actually be white let’s just duplicate this a few times okay excellent and then we will take this one go back to the home page here and inspect okay let’s go ahead and grab this element right here and let’s pop it in here and then you just got to remember that data icon needs to be on there and it’s really annoying to do with code blocks because of all the signing that you have to do and yada yada yada copy element okay data icon and let’s go with this one and then we’ll get this border going on there and then we should be i mean it’s not not far from being able to do the other cards okay let’s grab this one paste data icon sign code sign code okay thank you save okay fantastic all right um let’s see what our borders are doing on our cards here so borders uh we do have a width of one pixel solid border radius um i wonder if these are light cards so border color um border color light so if we reference the we reference our it should be hopefully referencing our primary or our main website border color let’s go to borders dividers borders light is white trans 20 um oh we we actually want the dark border is what we want we don’t want the light border we want the dark border so cards light card we want border color dark let’s see if that helps all right and then we’re gonna have to find out why that’s not that’s not working okay let’s investigate let’s investigate um styles border oh computed okay border border border border border border border top color um border top color i mean that’s definitely that’s definitely a color it’s definitely a color um let’s let’s just do this for a second let’s just do this for a second let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go let’s go yeah it’s definitely definitely doing something div block style let’s bring this up here all right card background card card card card card border color red great fantastic uh width one pixel border style ah border style none that doesn’t help that does not help things okay let’s come in cards order did i did i do something oh there you go i don’t remember setting that okay let’s okay we’re back in business we’re back in business these are supposed to be the defaults um okay border your global border width border style solid and okay now now now we’re good now we’re good okay now i should be able to reference my border color dark there we are okay and now i probably want to there’s something with zip wp with like i think it’s there’s a little bit of caching going on or something i’m having to like refresh twice to see what the hell i’m doing uh let’s go to light cards so border borders and dividers borders i just want to tone this down maybe see what it looks like at 10 percent maybe a little bit lighter and i think we’re good to go okay that seems that seems good okay so right now these cards actually don’t need the heading so i’m just going to take the headings out because they don’t have a heading in uh in that version uh we do have the card gap to handle as well which needs to be a little bit bigger so let’s go into cards and let’s go to spacing and we have this card content gap and i’m thinking this can just be toned down to like 1.25 something like that save and then we will refresh okay and then i think we’ll be ready to build the other ones all right did we save here we didn’t save in the builder okay there we go that should be automatic oh that should be automatically responsive too so let’s go in yeah it is okay fantastic now let’s go down and build something else we’re gonna skip these because that’s just i mean those are dumb right can we all agree on that let’s do these right here um okay so we’re gonna call these article cards you could call them news cards you could call them whatever you want i i think article card is probably the way to go do they have a they have a blog here anywhere that would be the only thing uh if they have a blog with different style cards i don’t look like they have a blog so maybe we’ll call it news cards just just to be safe maybe they want to blog in the future and they’re not going to look like this uh we’ll call it news cards okay all right so let’s build a new section down below and we want them to be three column grid okay and this time i’m going to do a manual grid and actually this time i i will do a news grid so we’ll just use bim for this one so we’ll do a news grid and we’ll go with a block in here this is going to be a news card i’m going to minimize that because i i my big head covers up the structure panel a lot um yeah borders not set to solid yeah you were correct you were correct uh okay so i’m going to think about this as we’ll do a content wrapper and a footer a content wrapper and a footer okay so inside of our news card we’ll go block block this will be a content wrapper this will be a footer okay and inside of my content wrapper it looks like we’re just going to need our heading and inside of our footer it looks like we’re going to need the source and the date right so text text um probably make these peas p okay source tech crunch whatever may i’m not going to do all the like i’m not actually going to go put these in and loop them i’m just building the cards like uh this needs to be probably an h3 because that there’s your h2 right there here’s your h3 obviously i’m not matching font styling and all that either really uh okay let’s call this source and let’s call this date okay so we have footer with our source and our date we have a card heading content wrapper news card auto bim there you go apply classes yes and it’s already it’s already starting here it’s already it’s already doing what we wanted to do so let’s oh i can’t copy the text that’s great all right let’s go inspect can steal it from right here okay and paste that in and that’s fantastic now in our news card footer all we’re going to do is our uh so we can we can do card gap right that is a that is a variable in the framework and then you can just you know essentially do a math on it right so divided by three we also probably want to take the source and go with like a line height of one on here and on the date a line height of one as well that’ll put those very very close together like they’re supposed to be and with the color here we can go with text dark muted which we haven’t even customized yet but we can customize that in a bit card heading we can we can tone down the font family on this okay that’s fantastic and now what i’ll do is on uh on the overall card so news card i’m just going to set like a probably the best way to do this is to set a minimum height because obviously the the content is not creating the height of the card because there’s not enough there’s obviously a lot more height than there is content right so i would say that we probably want to just measure this card uh it’s 406 by 388 let’s just say 400 is like the minimum height now you wouldn’t want to go height 400 because then it’s not allowed to get bigger if it needs to get bigger so you go minimum and then we just use flex to essentially um space between that stuff right okay and we’ll go ahead and save now one thing i do want to check is i’m seeing the padding on these cards and this is probably same as true for the cards we already did with the icon cards is smaller than what i’ve got on my cards right so i’m going to show you how this gets adjusted so we have our news card here let’s go ahead and duplicate duplicate duplicate we need to take our news grid which is this thing right here news grid and we need to apply the grid to this we can come in and say it’s going to be our three column grid and then i’ll come down here and say all right you know i think here maybe we need to go to two and then down here that looks good still definitely down here we need to drop it okay let’s go to one on the bottom all right let’s go ahead and save there excellent and that’s all looking that’s all looking pretty good so let’s go just duplicate that a few more times to fill out the grid now we have kind of the opposite going on here so they have where were we down here okay so this is a white section now and that and that ultralight color is actually inside of the card itself right so the only thing i have to do here should be we we hijack the and i’m gonna have all of these mapped out first let’s refresh um there should be a card background essentially right so if we look in here at the framework what the framework’s doing card background right there and all i’m gonna do is override that okay so if i just come in and go card background and i put in red you see what happens right so we just created a bg ultra light earlier it’s already in the framework it’s the color that we used up there and i just referenced that and like magic it’s done right okay so this is this is good this is fantastic i i would i would think that this meet maybe needs to be a s text so typography if we look at that yeah look how small that text is so i’m just gonna go font size text s on this um what is oh okay here we go we’re gonna we’re gonna see if we have a specificity uh little situation here we may not be able to do that with inheritance because it’s already being controlled from something else so yeah yeah yeah yeah card text size right there what is that specificity zero one zero okay that’s not a it’s not a big deal it’s a it’s a little bit of an annoyance you just come in here and do it this way uh we’ll try to make it so that specificity works what is with our um i hate like the default ultra small text um s because our our base is 18 right so one step down from 18 is not 13. uh let’s go with 16 here and 16 maybe 15 there okay and then let’s go with 15 here and maybe 14 there so it’s a little adjustment to our small and extra small text okay see how we’re doing fantastic all right so we’ve got those cards built um we need to do the little accent don’t we that little accent piece might be good to throw in there okay oh oh the padding i was going to show the padding okay so we’ll go into automatic css cards spacing and here’s your card padding right here by default it’s l change it to m and now you’ve got m in all your cards okay so now our padding matches a little bit more and this padding being able to reference it’s going to come in handy i think are these new alignments buttons and bricks yeah i don’t even know uh your filezilla app keeps bouncing oh okay let’s quit and we don’t need that what is it uh what is it oh it’s because there’s an update look we don’t care all that much we don’t we don’t really care about your update request okay we don’t need we don’t need this either got a lot of stuff we don’t need we don’t need handbrake okay we’re all right all right let’s do these little accent i’m gonna think about how we want to do this this is only on it’s not on our icon cards but it is on these cards and and it actually is it’s going to require a little more padding at the top it looks like than it does on the other sides um okay so what we’re gonna do is i mean my go-to for this would be a pseudo element right so let’s just do a we could maybe maybe do a after element on this um okay let’s just start by getting something on the screen um and let’s go with width i would say i don’t know what 2m or something like that uh let’s go with a height of what appeared to be something around five pixels let’s go with the background color of primary which we haven’t even set yet there’s our little accent piece maybe we go like 3m on it okay and let’s go with position of absolute and let’s go with the top of zero um that would actually be inset block start okay and i mean we’re pretty we’re pretty much there we’re pretty much there it looks like it’s not quite five pixels four three something around there that’s pretty good that’s pretty good all right what color is that let’s go figure out what give me that color from somewhere here we go all right a computed background color grab that grab that grab that okay let’s go to colors and primary drop that in and save all right and let’s save here our progress view look how look how easy look how easy uh by the way that pseudo element already contained inside of the card because the card by default is set to position relative so it’s automatically going to contain any pseudo element stuff that you do inside of it or any absolutely position stuff that you do inside of it uh will automatically work without any additional uh effort and i don’t really think we need to change the padding value i mean we could but i don’t really think it’s all all that necessary i think the um width probably maybe need to be just a little bit more like that okay all right i mean that’s it’s about as easy as it gets guys about as easy as it gets uh uh-huh okay that’s that’s good let’s go to vesta all right let’s try let’s try something else we’ll come back maybe do the stat card see how we do that um i wanted to do maybe the they have like a team card those more icon cards right there but those are already done where did they maybe company here we go all right team card we’ll do a team card let’s do another section here okay come down this is going to be a team grid team grid and we’ll go block inside that’s going to be our team card let me collapse this up okay and for this we’re going to go media wrapper with media we’ll do media wrapper content wrapper right out of the gate okay so block block that’s going to be our media wrapper and then this is going to be our content wrapper inside of our media wrapper goes our media all right media and then let’s go with inside of our content wrapper we’re going to want a uh maybe a uh hmm well may i may call this a header maybe maybe a header something like that uh so inside of here block and that’s going to be our header and then we’ll also put a basic text in there that’s going to be can i copy oh good okay let’s copy that all right let’s drop this in bang notice that they also have a branded highlight they have a branded highlight you see that’s their primary color with primary dark we’ll see if we can mimic the same thing with acss okay all right let’s go to make that a paragraph and i’m i’m just gonna okay yeah that’s that’s fine all right that works um let’s go with text header is going to be uh we’re going to go that’s going to be your heading right here this is going to be your heading and then this is just going to be another paragraph right there so heading and paragraph fantastic heading uh we’re going to call this name we’re going to call this the person’s name and we’re going to call this their title okay so yeah because that’s that’s exactly what that is so name title text we can do bio like that you can really call these whatever you want right so that’s going to be your bio header content wrapper media media wrapper team card bim and apply classes fantastic it already starts to adopt the styling from the card framework let’s go ahead and save as okay we just need one of these guys we don’t need all of them this you would do a team here and bring this in downloads where did it put it oh there it is okay good web p insert fantastic i’m not liking what they did here they put a little splash of something on the they put a gradient on the photo let’s just pause for a second timeout flag on the play okay this is a 15-yard penalty right here at least minimum um unnecessary roughness on the image right you shouldn’t do that you shouldn’t do that in photoshop or or fit or wherever they did this figma okay canva god forbid canva okay you shouldn’t be doing that to your images this is something you should do with css you should use the overlays and textures feature of automatic css to do this you have no control i mean how many images do they have to go redo if they ever change want to change the gradient you know bev comes along shouldn’t like the gradient i mean all your images are ruined here right absolute flag on the play absolute flag on the play okay um so this is going to be a you you could you could handle this one of two ways you could call this a media card or an or this could be the avatar card you want this to be your avatar card or do you want this to be your media card it’s a decision you have to make now i i would say that this would be their avatar card right um so we can we can try to use because in the card framework you have two ways you can go you can go media or you can go avatar that’s literally an avatar it’s what it is um so i i would probably go avatar card so we want to make one adjustment here which is instead of team card media we want to go avatar okay because the card framework does look for avatars and media and it looks for them separately okay and the fact that it just did that is okay because we should be able to manipulate how our avatars appear okay so we’re going to save um let’s go and just now that we’ve done this we can duplicate this a few times four five and six in our team grid we’re going to want to go with uh grid here and we’re going to go with our three again we’re going to come down and see here that that needs to be a two and we’re going to come down here and see that that’s probably still good at that point but down here this needs to be a one okay let’s save let’s go back so we have a nice responsive grid now and let’s just see what our avatar card situation looks like so if we go to avatars avatar size 140 let’s just go with a hundred percent and our radius we can take that off and our border style is going to be uh none we don’t need a border on our avatars uh let’s go ahead and hit save here okay oh look at what they did and this is oh my god what a disaster they put that little accent bar on the image also why would they do that don’t do that that’s not it’s not it’s not how things are done it’s not a good situation shame shame on these uh developers here absolute shame okay um that’s all right we just won’t need to put the accent on but that’s that’s just an annoying way to do it so here’s here’s where you go you go well first of all let’s get this um uh ceo thing here ceo okay i should have done that before we did this this should really be a loop honestly but i mean we we know the drill now right okay inner we’re gonna go with um see i i like to continue referencing our contextual spacing which is now card gap it’s not content gap anymore because we are in a card card gap uh we could do something like divided by three um again i would i would fight here for you take off the line height on these at least on on your title there uh and that’s going to bring those closer together what is this guy’s name what is this guy’s name oh dear okay let’s just grab grab that not going to remember that uh let’s put that in there and then there’s our h3 um okay let’s look for here is the thing about the the card framework okay if you want the global control over the heading it does need to know that it’s the heading okay so we can still leave that as heading on here what is great about brick so you can rename your classes at any point in time um okay so we’ve got these as paragraphs that’s all good i actually to fix these need to delete the others and then just re-duplicate um there we go because html is not controlled by classes so all right so what we need to do notice that these card the the image goes edge to edge right so very easy to handle you’re just going to zero the main card padding out and then you’re going to come back in we still have the card padding value right so we go card padding here and we just put it into the body we can also just clear the gap out here and we’re done all right we’re done so let’s save um the only other thing we want to make the adjustment on is our avatar well we can just do that over here on the front end while we’re looking at this we don’t need the border radius on our avatar anymore so we’re just going to go to cards avatars and then avatar radius is zero now your avatars no longer have a radius on this website and you are good to go so we’ve done icon cards we’ve done these little news cards we’ve done these cards right here um we would if we want to match them exactly we would just come in and um we would just go font weight here so typo why is the layout open by itself okay uh let’s go font weight 500 not 600 500 there we go perfect fantastic okay very nice very nice um grayscale on images is always awful yeah i mean it’s it’s all right some some sometimes you can do it in this situation i’m not liking it i’m not liking it i’m gonna assume that the images have not been added by the devs probably bev trying to mimic the other card design maybe yeah maybe maybe uh okay um i’m just checking chat real quick yeah there’s jamie exactly gradient on the native image chump uh yeah yes all right let’s let’s keep going let’s keep rocking and rolling uh we have some stat cards to make um so let’s go to section and let’s go stat cards all right so where did those stat cards they were on vesta i think i don’t even know this is a terrible uh navigation by the way like never let’s just pause here because this is wdd live we should talk about these things right does anybody know off the top of their head what they mean by vesta what what would you expect to get here you you can’t build a navigation around insider terminology because nobody that doesn’t know the insider terms can navigate in your navigation i can’t i i don’t know where i’m going i don’t if i don’t already know you can’t presuppose things okay with your navigation um you know i i i just it’s not great it’s not great okay uh don’t do that don’t do that all right let’s go to vesta it’s these it’s these little stat cards right here okay all right let’s build some stat cards what’s what’s next to it just an image we can just throw in is that is that a real actual image oh this is not um oh it’s an svg what it’s an svg with a gigantic box around it for no freaking reason what what are they doing here okay copy element let’s just see what we can get here all right let’s go block block block block and we’re gonna go grid auto 2 here grid auto 2 and then let’s put in a code element and let’s see what happens when we drop their svg in here um okay let’s go execute code let’s go we’ll keep the wrapper let’s sign code what are we gonna get here wow that is just that’s all an svg that’s just that’s just weird to me okay whatever and it’s got the i mean this is terrible this is really bad because like look at these hard-coded fills with hex just raw dogging hex values into into fills and an svg shits and this is what nightmares are made of guys this is what nightmares are made of don’t don’t do this stuff just don’t do it why are you doing that stretch okay we want these columns to be uh equal height all right we’re gonna throw in a block here and we’re going to uh we are going to call that stat card stat card okay because it’s a statistic stat card um i don’t actually need to make that class yet that was probably not great um we’re gonna go block block in here and we’re gonna go stat wrapper and we’re gonna go with uh we’ll just call this a content wrapper again you can you can call these again you can call them whatever you want content wrapper i’m sure my head’s in the way so let’s just go ahead and minimize that okay for our content let’s grab that drop that in um yeah okay yeah that’s fine whatever let’s go basic text here we’ll say text you could call it description if you wanted to you know whatever you want to do there is fine uh let’s go with a paragraph on that stat wrapper let’s go text and did it not add it text okay good this is gonna be called the stat i would not do a heading on this i would just make this a paragraph um let’s do two x is what they put in here okay and that’s the text content wrapper stat wrapper stat stat card okay i think we can i think we can just i think we can just bim this okay bim oh i called it start card no that’s not what we want stat okay bim stat card apply classes good fantastic all right so what we’re gonna do here is obviously we need to get those side by side i’m i’m gonna go with um i’m gonna go with auto auto one let’s try auto one and just see where that gets us right so if we go auto and then one just see that should be just fine that should be just fine okay i don’t know that that’s ever going to need to break to two uh we’ll check it out we’ll check it out okay so this is going to be stat card stat and font size we could go like our h1 size might work well here that looks about right that looks about right okay um this grid that these things are in uh is is not correct so let’s go grid and choose like a three two kind of situation it’s probably more representative maybe even a two one let’s see three two three two pretty good that’s pretty good this is just throwing me off man look at that gigantic box let me put in here for this okay i keep going to the wrong tab um they obviously clearly controlled the size of oh it’s it’s it’s probably their content width of their website is not the same as mine that’s probably what’s yeah uh that’s it’s similar 13 10 okay whatever uh stat card duplicate that a couple times uh we’ll just align this stuff uh right here to we can do this uh what do we let’s do stat card wrapper stat stat card wrapper all right stat card wrapper all right and align that to the center okay layout actually um we want to try we okay i’m going to call this stats wrapper because the thing you do have to be careful of you can you can undo it but it’s just easier to just avoid it in the first place uh you don’t want to use the word card in in like wrappers and stuff so we’ll just call that stats wrapper all right save refresh let’s see where we’re at here okay and then all we have to do is make that our primary color and we should here so stat is going to be our primary color and we’re done now let’s just check it on mobile real quick make sure that that never never blows up on us okay so let’s come down bring that in uh oh i never told it where to be something different okay so let’s go to our grid three two and we we want probably uh grid two on l and then i would say a grid of one at m ish i don’t know we’ll just guess guessing is always good right okay pretty good yeah that no uh it’s kind of squishing that it’s kind of squishing that a little too much i would say let’s just do grid l1 grid l1 okay should be good all right i hate i see i hate this because because of that stupid svg box that they did i this is always going to be out of alignment it’s always going to be you’re never going to get those to align properly because of that nonsense that they did with this svg box just dumb just really dumb stuff i don’t think that stat card ever has to because of the way this text is scaling down we’re never going to have to break that to too i mean that’s you’re never going to get something that that’s that skinny and it still works at that level too so i think we’re good with our stat cards um do they have any other kind of card on this website that we can investigate doing any other kind of card approach uh-huh i mean you could call these cards right let’s call this a card look at the look at this hard-coded gradient on here yet again what is this thing this looks like a whole a whole situation whole can of worms that we don’t want any part of right here yeah i’m not going to worry about that but we can we can build this card right here so we’ll call this a patients and families patients have more confidence and peace of peace of mind what is this for what is this for it’s like a feature we could just call this a feature card maybe like some some give it some generic name let’s try to build this feature card because the the one thing about this card right here is it doesn’t have the border and it obviously has more of a padding situation going on so the question is we already set up a light card style does that mean we’re forced into that style or can we achieve this thing still right here so we’ll do this uh and then maybe we’ll go on to some figma stuff right okay let’s grab another section here and let’s minimize that okay and we’re going to call this a feature card and this is it’s content it’s content width so we can leave it as the container i mean this right here can be the feature card um but i’ll just change the name here feature car feature card all right i already know what we’re going to do with our wrappers so we’re going to go media wrapper content wrapper things follow very similar patterns on the internet okay you want to keep your workflow and your naming kind of consistent here uh we’ll throw media in here that’s going to be an image okay and we will steal that image save image as pop that in i will show you what you can do with your media and i’ll probably go back and do it with the avatar card as well um let’s throw this in let’s go media right here insert okay and then we will grab uh where am i okay we’ll just grab this content so we need text we need a heading text text heading text text if we’re going to do the order of the dom right we need heading text text okay and that’s going to be our accent heading and then this is going to be our actual text both of these are paragraphs bang we’re going to go accent heading here okay and when we accent heading this we’re going to go order minus one uh we also want our content wrapper to come ahead of our media wrapper which is the design but we also just want that in terms of the dom anyway so that’s um image media wrapper this needs to be media uh this is going to be our text this is going to be our accent heading okay heading and content wrapper and feature card auto bim okay this is an area where you want you want two classes you want a because you want a global accent heading style and then you want a secondary and what i’ve called an insurance class where it’s the accent heading that belongs to this feature card so that if you need to do something different with just the ones in the feature card you have the avenue to do that but in general you’re just applying the styling to the accent heading class for your global accent style uh which is just small and uppercase right so we can go typography s we can go uh uppercase and then probably some letter spacing zero two five m something like that um and it’s it’s obviously a different font i’m not even going to worry about that looks like this is actually xs okay and then you would give that a before pseudo element of whatever this like triangle thing is uh i don’t like that they used an svg there i really don’t but but whatever i mean we could we could do it if you’re going to mimic this um let’s copy this copy copy element uh you’re going to need a wrapper on your accent headings which is annoying right you could wrap this with a div i i mean i would try to do that probably a different way um i’m wondering if there’s an html element i’m gonna i’m gonna do it with this with a pseudo element right now just to i hit undo too many times uh just to move on with our life but my my i’m wondering if there’s like a what’s called an html entity that would serve as that little triangle we can look at let’s go to html entities here and then character entities i need like a whole library of them um entities list here we go complete list of html entities oh like you can’t search no search okay all right um yeah it would be nice to be able to search because there could be a little arrow in here that gets that job done and then we don’t have to worry about it at all hmm i mean like here’s one example i don’t think this is a full list honestly um and they don’t have the proper codes either i don’t think i don’t think that code’s gonna work uh it’ll probably have to be no it’s it’s it’s not gonna work you should see a content hello uh display flex uh position relative uh it should it should be doing something primary okay um that’s odd it’s very odd oh i didn’t do the before that’s dumb what a moron okay there we go hello all right now whatever you put there is fine um but not that that’s not going to parse in any way shape or form okay uh we need the slash we need the slash value for it that’s what they should be listing and they’re not so that does nothing to help us uh now we could do color of primary okay and if we do root display flex put those in a alignment you can also do grid here and do grid template columns if you want to do this if you’re using icons this is sometimes safer um because you won’t have to worry about flex shrinking or any of that nonsense uh 0.25 m 0.5 m something like that okay and we’ll just pretend that that’s not an actually a two right that would just be your your accent there we actually color what did they do here did they do no okay they kept that black all right that’s fine there whatever all right there’s your accent heading and then this is going to be patients have something something something about peace of mind okay let’s put that in there and we already have our content in there fantastic okay uh we’re going to take our feature card right here and we are going to go looks to me like a like just a a split right down the middle so we will do a grid auto two on here and on this side with our content wrapper we’re just going to bring everything down to the center and at this point we’re just going to say you know what we don’t want the padding right we don’t want the card padding default card padding um we don’t want the card border right so border we can just come here and say none and that should get rid of that um and actually now that i’m looking at it this is not a it’s not an equal split it’s probably not an equal split uh so we’ll take this away and we’ll go back to like a one three two three maybe it is an equal split just with a lot of padding or maybe they did something custom i don’t know we’ll go two three on it we’ll go two three and um i think what we can just essentially override the uh we can go grid gap let’s let’s let’s go let’s do card gap times three times four times five even whatever save let’s do times five um let’s see how this is handling this on mobile i think there is still still quite good um i think let’s leave it there here is where we’re going to want to just go grid one and then just tone just bring back our card gap um spacing i need to add that to our context menu and then right here where this is going to happen we’re just going to take our media wrapper and we’re going to go order minus one on this and that’ll bring it to the top order order order where have you gone order order order why am i not seeing it order minus one save okay um and then let’s go well you know what i should have done before i did that um this this really i’m gonna i’m gonna go back and do this differently because they need to auto alternate and let’s go let’s put three of them in here okay uh so we have our feature card that’s good let’s undo what we just did here with that styling i think our gap our gap can be maintained that’s fine um grid one can be maintained there that’s fine but where did i where did i put the order property again where did i put the order property it’s on the media wrapper there we go this is one of the problems with page builders when you because you spread everything out um why is it do you notice the yellow dot is not here oh the the biggest pet peeve with bricks normally the order property is in the layout panel but for some reason in certain situations it they move it they move it to the content panel and then it’s not in the layout and then when you look for your styles you don’t see anything and there’s no indicator on content right to let you know that this order property is now set down here one of my biggest pet peeves like don’t move inputs like for no reason like it doesn’t that doesn’t need to be happening okay let’s let’s think about this and i have to i have to go slow because this is where the dyslexia will derail you if you’re not careful okay um um the first one so the order of the dom is correct okay so the first one is fine the second one is the uh even the even ones have to flip-flop the even ones have to flip-flop uh so we’re going to come down here and we’re going to say inth child even and we’re just going to do a border check border five pixel solid red always start with your border check all right so now that we’ve done that what we need to do is inth child even and we need to reference the root again and steal the media wrapper that’s that see and you leave the border check on you can start selecting new things and the border will show up to signify to you that you have actually selected that thing okay um so what we need to do is only do this at like 767 and up actually all of these because all of these at 767 and below let me let me did i clear the order property see now i don’t even know if i cleared the i think i did clear the order property so they’re never going to yeah they’re always going to be on the bottom okay okay okay all right so at media let’s do max width 767 and we’re going to steal uh actually it’s just root media wrapper all together order minus one on all of them okay uh let’s just pause there for a second there we go so the image is going to be on top at 767 and below on all of them and then i think what we want to do let me see if we can get away with this um mm-hmm this is one of the problems when you use uneven grids you have to redo the grid structure uh grid template columns and we’re gonna do what did we do up here uh two three okay grid three two why is this breaking my brain uh mm-hmm okay let’s just let’s chill with that for a second we have what we want it’s just i’ve this is my my dyslexia is like overdrive in these situations okay um two three no that’s that’s not even oh well the media wrapper wouldn’t be where the grid template column goes anyway okay uh just need another row it’s also annoying me that the dynamic root selectors all transitioned into classes um in child even this actually needs to be this is going to have to be in a media query okay let’s bring this up here and we’re gonna do min width min width okay um man brackets brackets everywhere okay paste this in here bang bang template columns grid three two okay save refresh okay auto alternation okay auto alternation now the the good thing about this is you can just you can just add a gazillion feature cards it doesn’t really matter and they should continue to alternate perfectly okay uh and now when we check them out on the mobiles looking good looking good still looking good we’re going to increase the gap here i think oh look at this look look at this situation right here so one thing we need to do with these images media is flex one uh flex grow one and that should ensure that they reach see now they will always be the same height as the content uh whenever you do that you want to also go object fit cover which i already have on this site so it’s by default um okay so that’s still i i think we need to tone the gap down on some of these lower and now we have it all perfect on mobile okay all with the image being first on mobile every time that’s all good okay i’m just going to go here and tone down our gap so feature card uh we will go card gap here maybe times two because we were at like times five or something so we’ll go times two there and then by the time we get there we’re perfect okay save and so notice you know we still we still got to reference everything um card framework didn’t stop us right even though the other light cards have borders this one didn’t need to have a border this one didn’t need to have padding um it’s just it doesn’t hold you back uh it just continues to help you in the areas where you needed to help you i mean look at all these different kinds of cards we’ve done i would put a little bit more space between these things so in this grid right here which we would call a feature grid uh we would come in and we would go to row gap and we would say container gap times two and then we get a little bit more space between those cards and then what i would do is maybe down here you want to just bring it back to content gap so just content gap right there and you’re good to go okay let me go back to chat here i recommend using the cog icon at the bottom left to see the stuff that has been set to something yeah that’s a new feature isn’t it modify yeah there you go okay i i gotta remember to use that now that’s was that like the last couple in the last couple feature releases somewhere in there i think that is new all right um uh you make this look too easy every time i try to work on my own library the bim naming always screws with my head um yeah the bim bim it just takes a little bit of practice it’s not uh once you get the hang of it it’s it’s pretty simple um amanda put in a code it’s unicode you plus two five okay yeah i mean we could throw that in but at this point we’re pretty much it’s pretty much a done deal uh i think we’ve built every card on this site uh let’s go back to i don’t think i don’t think there’s any other any other style cards uh all those are the same let’s go to careers do they have oh look they have another card here i’ll let you guys decide i mean do you want to build that actually that’s that’s really their news card oh you know we didn’t do we didn’t do the the hover okay let’s try the hover because those news cards um right here need to hover on the border okay let’s try to tackle this real quick uh we would do this with clickable parent right so i’m gonna go at the card level right here uh css i’m gonna come down i’m gonna go at clickable parent which is gonna expand that recipe out okay first thing i need to do here is come in we’re only going to do this on one of them this is again why you should be working in loops right here’s your custom url so that heading needs a url on it which is good let’s go to save let’s go back to the front end and notice that i now can hover over every aspect of the card okay and because the card framework position relatives the card automatically i don’t have to worry about going in position relative in that um it’s just kind of working out of the box so now what we want to do is manage our hover styles so i am going to come to the bottom down here and we’ll go root hover actually what i want to do is go at focus parent also we’ll expand the focus parent code and then let’s go to the front end and see look at that we’re already focusing parent look how easy this is out of the box just easy easy easy we’re not getting any hover styles on my heading because clickable parents already taking care of that for me um what we do need though is a is to change our card border color i’m just i don’t even have these memorized yet but i’m just guessing that it’s card border color because i tried to make them as obvious as they could possibly be card border color needs to change on hover okay so uh if we come down here we’re hovering the card okay and we don’t have to target an an element or any or a property or anything like that we just target the variable um so card card card border color and if you ever want to know if that’s the right thing you can just come here card border color and just see if you can change it to um a color see see how it’s red now okay so that is the name of the variable and so when we hover we want to change that to primary not poor primary just primary poor primary probably would not work just a guess um but look at that oh my god it’s already transitioning too how is that even transitioning well because the card framework uses your global website transition to do anything that you’re doing with the variables uh so i don’t even have to worry about the transition it’s just automatically transitioning guys it doesn’t really get much easier than that um did they do anything else fancy on those no that’s the only fancy thing that they did and if you um focus there’s only one with a link uh but yeah if you if you focus your focus style is done for you also with focus parent because remember the the link is on the heading it would normally focus the heading but focus parent allows us to focus the entire card because that’s really the clickable area man oh i also talked about the folk the the see the style of of uh selection text selection uh somebody asked about that the other day you just come in here to additional styling and selection styling background color primary text color primary primary ultra dark save let’s see if that gets us to where we want to go look at that branded text selection out of the box okay i’m not convinced that passes color contrast um let’s look on their site yeah it actually may just be dark instead of ultra dark but you would definitely want to check that for color contrast as well um and if if you need to change things it’s very easy to change but uh let’s go to additional styling selection styling and just drop that down to dark and if you just use the up and down arrow keys there you don’t even have to just like rewrite anything just go up and down arrow keys and it’ll select the next one in line and look at that look at that branded text selection easy easy we need that old staples easy button back you know it’d be good it’d be good okay let’s go down to tyree says love acss it’s been life-changing for me uh thanks i also submitted a website kevin gary for review oh ah well if people want to see more cards being built we can do that or we can switch to tyree’s website whatever you guys want to do by the way everything so the one great thing about the card framework is because every aspect of all the important stuff is variabilized for you ahead of time like you saw what i did with the hovers or if you’re overriding anything you don’t have to write any css properties uh for the most part you just change the value of the variable on that thing um so hovers very easy to do um like yeah it’s it’s uh it’s tremendous you’re gonna see how how helpful that becomes um if you if you need to you know double the well calcs are obviously available on all of the variables as well so that comes in very handy you can color mix the card variables um that was that was one thing like let’s let’s try to do this um let’s try to do that what what what could we try uh because i was i was actually going to do a very or a video on color mix uh coming up because it’s it’s very very powerful and if you look we’re almost about to use it like freely okay uh let’s go to can i use color mix okay let’s just do look it’s at 90 guys it’s it’s so close it’s so close i typically wait to like 92 93 somewhere in there okay color mix is a is is another game changer um let’s do i don’t know what a good example would be honestly um because we already have a lot of shades in the system but i did want to demo it maybe maybe creating a custom a custom shade like how would we create a custom shade uh but i i don’t know on this website with this example how we would want to do this so maybe we’ll maybe we’ll save that for another video because i just i don’t have a good idea for it i i don’t i don’t yeah i don’t know i don’t know okay we’ll we’ll revisit that uh tyree’s website tyree’s website tyree’s website tyree’s website the hunzi i’m so sorry the hunzi like he said more cards and everybody just completely trampled his vote uh because everybody else was pretty unanimous on tyree’s website okay let me open a new uh new window here i’m gonna bring this over actually yeah yeah well no i need to be in hey okay tyree i’m gonna go find your website when did you submit it my man let me know in the chat um trying to think what would the critique it would be under critique right or you could just write the url don’t put the actual url but just type the url like dot com in the chat and i can pull it up it might be easier for me to find it or maybe i could go to giri.co dashboard we’ll just go to the form submissions in here my email inbox is a little it’s a little out of control right now i’ve been head down on this card framework icon framework stuff inbox a little out of control uh let’s go to forms and submissions and website critique is it in here somewhere there he is there he is okay well i thought we did this site before did we do this site before no okay all right uh let me close that out let me close you must just do a lot of stuff in fitness is that correct is that your niche tyree is that your niche okay let me close this let me close this let me close are we satisfied with with this right here are we building all those cards i think it was a good demonstration how everything stays consistent easy blew through it okay and close that out and close that out okay here we go sixfigurebody.com fasting support in just one scoop uh drive is specifically formulated fasting supplement that gives we’re doing our no scroll test that’s always the first step of a website critique is you are not allowed to scroll you have to figure out what is going on here what is this for who is it for without being able to scroll around drive is a specifically formulated fasting supplement that gives you enough energy and brain support to help you power through fasts with ease okay so positioning us from a visitor perspective i already have to be uh you’re you’re targeting people who already know what fasting is maybe the benefits of fasting and that they are they’re already in like they’re already fasting they’re already like bought into like this idea of fasting right um we got a sample kit we got a one time we got to auto ship this is very bottom of the funnel focused copy right it’s like people already went through a few steps uh you hope uh and this would i my first question would be who like where’s the marketing for this where are the visitors coming from uh because i want to see if there’s any sort of ramp up before they get here because again this is very bottom of the funnel copy and uh offer and all of that okay it’s got a nice little slider here and i’m i’m assuming this is all acss frames um yeah yep okay good okay man this card framework would have helped you out tremendously wouldn’t it tyree like here’s some cards right here with some hovers that we just looked at um where do we want to go first let’s just scroll down the page who are we fasting formula properly fuel your mind and body our mission is help you achieve your best self physically emotionally and mentally uh you’re not just getting great products you’re investing in your future health and well-being so what are you waiting for start the journey to your six-figure body today okay we can buy drive we’ve got some video testimonials here is this a okay we just have one video testimonial and then we or maybe hi guys i want to let you guys know what i’ve been doing for the past hang on because i keep getting a lot of questions on how i’ve been able to transform my body in a short amount of time yes i’ve been working out yes i’ve been eating clean and i’ve been doing intermittent fasting using this product called drive by six figure body okay got a little testimonial video that’s nice all right i like i like i like this this is uh this is creative drive helps so many problems and then these are the problems that it helps i’m not convinced on i’m not sold on so many problems drive helps so many problems i would say drop because here’s the thing if i read this i have to be intuitive right now and people on the internet are dumb they’re not very intuitive okay that’s just it’s just it is what it is it is what it is okay drive helps so many problems a lot of people will read that and they will not realize you’re directing their attention to this list right here okay um so i would say drive helps you helps you right drive helps you with all of these problems all of these issues like because when you say these it at least triggers the brain for like which ones like they’re going to be looking like what are you talking about which ones and then they’ll hopefully see this okay um but there’s so many problems you probably might lose some people there uh let’s go down just pour stir enjoy okay the we’re going to talk maybe about what’s missing here’s some ingredient stuff that’s obviously important people are going to care about that these are accessible that’s good okay um oh look at my frame that i built that’s fantastic all right i like that uh i would maybe get a couple more images in there if you can fill that thing out earn 20 off every sale because we’re joining the team drive fasting formula now we’re into selling the thing oh wait hold on uh okay here’s here’s oh i see you did it right here all right that’s here’s what i would do i would not make this tabbed like this i would i like this big where’s my mouse pro mouse pro mouse pro mouse where’d you go okay i like this big real estate for uh the sample kit and then i would probably do the exact same thing right below it for the one time and again right below it for the uh uh subscription thing because i scrolled right by it i didn’t realize right off the bat that there were actually three options here um some people will obviously figure it out but you’ll lose people some people will not figure it out some people will not realize that these are selectable items um so you may get a lot of sample kits and if that’s what you’re hoping to do then that’s fine uh if you’re hoping to get one-time purchases i think you’re going to decline on that you’re going to decline on the subscription as well if you you take up a lot of real estate because this is the most important thing on the page honestly like it’s the it’s the area where they can convert so take up lots of real estate with it and because they’re going to keep scrolling down like if they’re not interested in the fast in the in the sample kit thing they’re going to keep scrolling well what’s going to come next the next option and what’s going to come after that the next option and that’s a lot of real estate that they have to cover to say no no no right um which whereas right now the minute they scroll past that all their buying options just went away with that one scroll right there uh so i i would take up a i would purposefully take up a lot of real estate with these three options uh now you get into your education okay that’s all good oh look he’s using ribbons oh this is acss out the wazoo i’m sure that was so helpful so helpful on this this is a frame right here he just put that bad boy in and uh maybe this one too i don’t know this one for sure i gotta send you an invoice tyree i mean this is uh just kidding just joking just joking um do these go down below or they take you to different pages okay they take you right to checkout is this uh sure cart in action here okay this is good drive one time uh-oh uh okay well it’s adding both of them to the cart i don’t know if that’s intentional or something you want to take a look at because now if i go auto ship i’m gonna get all them bitches look at that i’m gonna get everything um you might want to you might want to add each one to the cart individually because here’s the problem right people may not notice again but you people on the internet you gotta assume not not great not great in the mental state okay um they’re gonna check out and then you’re gonna get emails like ah i didn’t mean to i need refunds i need this i need that it’s gonna happen okay it’s gonna happen so i would just only add one thing to their cart and not the others uh on each one so maybe instead of using a cart use just a single checkout page for for each item that they can purchase um because and honestly i don’t need the other things if i’m getting the subscription i don’t need the single one and i don’t need the sample kit i’m already i’m saying i already want the subscription right so this is only a situation where you’re going to increase the uh back end management and support that you’re going to have to worry about for really no additional benefit uh oh funnel kit okay can you check dark mode in the heading uh oh right here um yep yep yep looks good looks good looks good looks good yeah yeah well executed okay let’s go back uh is this a dark site by default and because my settings are light i got the light version is that is that what happened here um okay all right good good good yeah i’m guessing this was a dark like maybe the main site is dark uh but because i prefer light i was served the light version all right good good good um i’m not sold on this on this hero and we’ll come back to this we’ll come back to this let’s go to y drive okay so hold on so this isn’t actually a new page this is uh that’s a little bit confusing it’s a little bit confusing okay let’s go to about uh it’s a it’s a one-page website essentially except for the shop takes us to a new page this page needs a little help this this page needs a little help a little lifeline a little light we got a little little out there with our with our heading let’s go to blog and see what we got going on on our blog okay that’s very nice very clean how we doing with our oh look at that’s a frames template for sure okay okay looking good affiliates yeah i mean it’s a it’s a it’s a let’s let’s stay in dark yeah i do like the dark here um so it’s it’s it’s a well done site i think what i would do i mean there’s no design issues there’s no um the the only things that we would that we would really look at here is just the copy right so it again it obviously assumes that i’m bought into fasting the one thing i was going to say that is missing okay and it’s the same with all shakes and supplements so we know there are a gazillion i think that’s actually like a technical total of the amount in market right a gazillion shake supplement things and so all of the marketing around this is juxtaposition is why is that why this one and not the other gazillion minus one okay um what does this one do that is unique so we’re going to go through the page and we’re going to see if we can find an answer to that and we’re going to see if we do find an answer how long did it take me to find the answer that’s all we’re concerned about right now so from a marketing and copy perspective we know that’s the it’s not just good enough to have a really good shake supplement thing that’s that age is done and gone now is a matter of can you convince them to use this one instead of another one that’s the whole game the whole game is are you convincing them to do this one instead of the others so we have to figure out where on this page that convincing is happening is it happening we can just go down the line let’s we can do a vote get your fingers ready let’s go take a vote on all and every single section okay fasting support and just one scoop specifically formulated fasting supplement that gives you enough energy and brain support to help you power through with ease does the hero section answer that question why this one versus the other ones does it yes or no um i know tyree is uh there’s so many parties involved on the copy this is good tyree because you can send them this clip right here clip this and send it to them and then you know you don’t have to fight with them anymore so hero section yes or no does it answer that question i think the votes are going to come in as no okay so we can keep scrolling down and we’ll verify the vote count in just a in just a minute um properly fuel your mind and body so we go into our mission our mission is to help you achieve your best self physically emotionally mentally we’ve talked about this in the past that is a sentence that every supplement company would say okay so if you’re gonna if you’re gonna create a mission statement it can’t be a mission statement that every other other supplement company not only would they have it they would probably if you put writers in a room together 10 writers and you were like guys come up with a mission statement for this supplement product uh good writers would throw this out right here okay good writers would throw that out mediocre writers would come up with that right away that would be the one of the first things that they write down okay and that’s why good writers would throw it away because they would i mean everybody would come up with that though so that’s not what we’re gonna say that’s not what we’re gonna go with you’re not just getting great products you’re investing in your future health and well-being i mean every health company on the planet again is gonna say that uh so this this copy does nothing essentially to help us get to a sale um this copy does nothing to help us get to a sale so we’ve gone two sections now including the most important section that doesn’t help us get to a sale so no no no now we’re gonna come down now does this help us get to a sale video probably more than anything we’ve seen on the page would help you get to a sale so that’s good let’s keep going down drive helps so many problems all these right here you can go to any of the gazillion health and supplement websites and they will all have this list right here every single last one of them so we are three sections down and zero content to help generate a sale okay so far what we have is content that copywriters like mediocre ones think needs to be there but that doesn’t actually move the needle okay so now we’re gonna go down and we’re already offering it to them which is rude honestly it’s it’s rude to like engage in a sales conversation and go okay um i’m i’m going to tell you all the things you already know i’m going to say about this product and then i want you to buy it okay that’s essentially what you’re doing with the conversation we shouldn’t do that that’s a little rude what we should do is say i’m going to tell you why you should buy this thing instead of the other gazillion things on the market and then i’m going to ask you to buy it because i believe i can convince you so far that hasn’t happened there’s no convincing being done um we’re going to come down okay cutting edge ingredients the right stuff to enhance your body’s ability to break down fat help in muscle repair and maintenance boosts fat burning and endurance helps maintain minimize feelings of hunger and promote steady energy levels where have you heard all of this before right everywhere is the answer everywhere all right go bhb so it’s got some ketones some branch chain amino acids some dynamines some blah blah blah blah okay every supplement i don’t know on the planet probably has a lot of that stuff all right let’s keep going down i don’t want to be an affiliate i’m being asked to buy again okay why and how you should fast so this is about fasting in general but it’s not about the product and then we’re at the end of the page so we make we make we make it to the end of the page and there is no content convincing us to buy this thing versus the other gazillion things on the market and that would be the number one problem with the website and that is the thing that has to be fixed asap okay um like not even an inkling of why this one versus another one um like when we get down to the ingredients is there a magic ingredient is there guys no other supplement has this thing right here and this thing is that none of that there’s not even any of that right um and maybe it’s this ketone thing it says premium patented ketone body um but but here’s the thing there’s no narrative there’s no story to latch on to um there’s no there’s no real problems so if you’re talking to people with fasting you put a hundred people who fast in a room and you interview them and you say what’s your number one problem with fasting what’s your number one problem with fasting what what do you hate about fasting what doesn’t work about fasting for you and it and you asked all these hundred people there would probably end up being some overlap right or maybe it’s like oh fasting is great but i wish i could get the results in a three-day fast instead of a 14-day fast or a 10-day fast or whatever i have to do is there something that speeds up the process is there something that gets me into ketosis faster is there something there’s got to be something there i mean if there isn’t answers to those questions we don’t really have a product we just have we don’t we don’t have a winning product we have another product there’s a big difference between a winning product and another product it’s a it’s another one of these things okay i don’t know if that’s what this is i don’t i because i’m not being educated otherwise okay but this is what has to be on this page asap right so tell the narrative of like hey here’s what a typical person who does a fast feels experiences gets out of it and this is what most fasting products this is the result you’re going to get which is great if you want that result use these other things but with drive here’s how drive does things differently and when people use drive this is what they think and feel and experience and this is the results they get and look how clearly different this is versus these other options you at least need to give it a shot which is why we have a six dollar sample packet you at least need to give it a shot right and then if you feel that we have you know followed through and we have uh been honest with you about this product you are going to subscribe at the end of the day like we we already know you get a sample pack we already know you’re going to be a subscriber this is kind of how you have to approach the narrative and the conversation right now we are presenting another option we are not presenting the winning option um that needs to be fixed asap and you can send that to the content people because they yeah they can sit around a table arguing about this word and that word and and this phrase and that phrase and the order of the the content on the but they have they have missed the biggest most important thing is not even represented here so until they do that they don’t need to be arguing about words and phrases okay that would be my my best feedback for this site right here um yes and more social proof and reviews 100 percent yep i’m still not quite sure why i would want this product if i were too fast exactly um what about a comparison chart drive versus other supplements you could do that for sure you comparison charts are good um i need a big image of the product in the hero yep i agree with that as well i think that that that would work uh i would even do a uh if you do have a really good video showcasing the products or a really good detailed testimonial like that that a video might work well right in the hero as well but yeah i mean the ui is good the um you know the design it’s clean everything’s easy to see and find and all of that it’s just missing things from a narrative perspective uh it’s missing things from a social proof perspective uh and it’s missing things from from just a general like conversion optimization like we talked about down here with like these just are very to a lot of people that’s hidden these might as well not even be there they’re just gonna gloss right over that and not realize these are interactive and um i would fix that for sure but yeah overall i mean it’s uh it’s it’s clean it’s good it’s nice fix that issue right there you’re gonna have to refund a bunch of people stuff we got an events page um that’s not working yet if you guys want to um i think it’s website critique application or something there’s a link in the in the description of the youtube videos it’s in there somewhere uh maybe it’s just critique application i don’t remember i haven’t been there in forever the link is in there it is uh you just submit your site right here uh we used to do these every single wdd live but i mean we are 81 episodes of wdd live in and um you know you can’t beat it to death okay and there’s a lot of things that we talk about over and over and over and over again ad nauseum on like every website has the same issues right um so if you like these critiques we will do more of them just from time to time we’re not we’re not making them a staple of every single episode anymore okay uh andre says i just submitted two sites okay fantastic fantastic all right we’ve got about 20 minutes left i’m gonna do some q a so that we don’t leave out the the question askers thank you thank you boulder 81 episodes of the most fire live stream on the net yeah i mean the amount of stuff that people are able to learn on wdd live is tremendous uh really really really good value in a lot of different capacities which is nice i i i’ve kind of turned it into a variety show you never know what’s going to happen on wdd live but you know it’s going to be good so all right uh let’s do q a let’s do q a let’s do q a let’s do hashtag q okay here we go edmonton frames um crying faces i don’t know carl what does this mean uh edmonton was released it is available uh let’s go let’s go oh i went to the wrong uh url let’s go to right here feature section edmonton look at that it’s right there ready for you it’s ready for you we don’t need the crying face emoji is something wrong with it carl did do we need to fix something okay we’d love to see some variations that work wide but also like in a ratio one to one or a grid three um okay that’s that’s a good point we might be able to finish with a wide cart we we didn’t do any of those we didn’t do any of those uh let’s open this up real quick um i’ll answer questions and we’ll jump to that real quick for anybody that wants to stay is there a specific variable for the icon color instead of the attribute you use the attribute so that automatic css can take over the styling of the icon but then yes there’s an icon color for sure uh which we can look at here as well let me get back to the page um dude dude dude come on okay view edit with bricks yeah like for example um in in um like even at the id level or or maybe yeah because i didn’t use here we go stats uh yeah we’ll do it here this is probably easiest one like i think you could do it on groups of icons uh just as easily as you can do it on a single icon like icon color um and let’s go to let me oh my gosh dude i hate that i dude i i i can’t tell you how much i can’t stand that okay um let’s get rid of like i really wish that box would go away um styles okay let’s bring this up here so the the data icon is used to hijack the icon styling right and um get rid of any any ridiculousness that’s going on um and not take over all of your icons which is kind of the most important part because you don’t want the framework to just like hijack every single icon on a website it’s like i i want you to hijack these icons like this icon right here um because people use icons for very even icons and like the the builder all that stuff can can be impacted we really need a way to target what we want to do um and and especially because if you think about it these aren’t there’s no icon element it’s it’s an svg or it’s an i or something like it’s actually could be multiple things there’s no way for acss to know what it’s supposed to be controlling and what it’s not supposed to be controlling that’s the whole purpose of the data icon attribute you’re letting acss know this is the thing that you need to be in control of right here um so okay icon color red so this is an area where we need to figure out why when it’s clearly being told to be red it’s not being red um and it could be a specificity thing it could be a lot of stuff going on here uh let’s go but this is done at the id level that would be that would be interesting let’s do it maybe because it’s a code is it because it’s a code block um icon card icon it’s not even behaving there i because i’ve done this when it’s not a code block i’ve done it i’ve done it for sure mm-hmm mm-hmm let’s put a just a test just a test here let’s just throw an icon in here uh i guess it doesn’t matter which which one it is right okay now it’s on bricks for hiding this attributes area away it’s really really annoying um okay data icon here choose any of these just see what we’re working with okay what is happening here oh we didn’t oh we didn’t set up any of the icon framework we that’s why that’s why that’s why okay yeah we never use the icon framework the only time we use icons was in cards um so this is probably card icon color perhaps oh what happened there error object object what are those bricks what are you doing let’s refresh bricks bricks might have gotten a little choked up here okay where did did i move that let’s move this back okay um let’s check to see if that is using card icon color um mm-hmm we’re still gonna need data icon i just want to sign this real quick and just see yeah yeah yeah that’s gonna be for sure i’m wondering if it’s the code block causing whoa where did the i i said sign the code okay bring it back thank you all right let’s go in here let’s go card icon color red icon color red i’m just gonna do both of them oops icon color red save we may have to debug this afterwards and figure out but the thing that’s annoying the crap out of me is that it’s literally right there saying yes icon color will be red we agree and it’s not uh it’s not behaving otherwise though i don’t see any other uh color or where it would be look it it the inspector is telling me the color of that icon is red ut x i mean they’ve got a bunch of maybe maybe because it’s hard coded oh that’s that’s why that’s why it is the code block and it is there it’s because they didn’t follow best practices in their svg um um these should really be and i you got to sign the code every single time fill color fit why are there two fills svgs are annoying as shit by the way there we go see if they had done their svg properly then it would have worked um you want your svg to not declare to not raw dog static hex code colors like that’s just dumb um this day and age proper svgs use current color that way they can inherit the color from the parent whatever the parent tells them to be so the issue we ran into here we hijack these icons from another site the other site didn’t properly set up their svgs and therefore we run into problems when we try to use them um so and i will add this to the documentation because that’s probably a situation you if you’re going to hijack svgs from other sites you may run into that very often uh you have to be careful that they have not put raw hex code uh hex codes into into their thing so the fix for this in and this is every single code block unfortunately and this is why you don’t do it wrong in the first place uh every single one has to be fixed manually because well this is just when people don’t follow best practices this is the show you end up with and now like a chump you’ve got to go because you don’t realize until you get further into the thing that they’re all done wrong this is the life you live okay and when you run into this problem too where they are using dual colors with solid color icons also dumb uh that would be this fill right here fill current color save hopefully i didn’t break that svg there’s 1800 fills in here this is just this is what a mess what a mess this is why you should hate people that do things wrong you should just let the hate flow through you uh as they say and didn’t somebody say that in star wars or something one day all right let’s let’s take this out oh my god look at this look at that they’re everywhere what are you guys doing all right have we fixed all these okay now to answer your question let’s go back and answer the freaking question yeah it’s as simple as if your svgs are done properly um let’s go it’s just should just be icon color icon color and you can do you know green you can do purple notice i’m able to do them all as a group um you could actually come up here uh to the page okay let’s check this out now it’s only going to fix these icons because they’re all screwed okay everywhere uh but let’s go to uh page settings general okay classes body and let’s say this was like uh you know let’s do another color right it doesn’t have to be uh anything fancy okay just make sure we didn’t override it here all right open here automatic css now you go into icons and um light icon styles let’s see what my default icon style is light so light icon styles i want this to be my primary color let’s save okay so now now the icon framework is controlling these icons right here the icon color um and we did what do we call it another class or something is that what i did another color another color okay you could do this anywhere but we could do it in custom css global custom css okay another color and go icon color of um red something like that we’ll just make it obvious right and so now every icon on this page that’s properly formatted i don’t think there are any other icons but every icon on this page would be red so you can hijack the icon color of entire pages or entire templates right you can hijack the icon size of entire pages or entire templates like once it’s frameworked once it’s variabilized there is no limit to what you can do um you can have gradient icons it’s all possible right you can have boxed icons on some pages or templates versus not boxed you could do again there’s no limit to what you’re able to do and how easy it is to do it but as we saw your svgs have to be properly formatted okay next question why use inset block start over top i’m a noob um good question good question um they both do the exact same thing but they are interpreted differently by the browser and so if when you are building sites in this day and age the modern era you want to account for people who read right to left for example um are there any languages that go top to bottom to top i don’t know uh but these are axis independent um uh properties right so top is always the top and left is always the left and if you align something to the left just the easiest way is with rtl language to think about this if my language reads left or right and i’m positioning things on the left because i want it to be before my content okay so i want it to come before the thing that you’re reading that would make sense left is before if your language is left or right but if your language is right to left and i’ve aligned something to the left it is still going to be aligned to the left and now that thing comes after the content people are reading and not before the content so the instead of top if we think left that’s inline start that’s the inline access the start of the inline access it’s not left anymore right now on a on a left to right language inline start looks like left the difference is on an rtl so right to left reading inline start would flip to the other side because that is the start of the inline access now so you see when the language is flip inline start is able to flip but left is not able to flip left will just stay left so left right top bottom these are like dumb coordinates now and inset inline and inset block these are smart coordinates now and so the the web is migrating over to the smart coordinates versus the dumb coordinates of the old day that’s the probably the easiest way i can explain it um little off topic what keyboard are you rocking the mac just the i do i go i go default everything baby default everything no problem with this magic mouse other than that charge port but you know they don’t want to fix it they don’t want to fix it so i just have to live with it um okay refresh my memory about your decisions on auto grid why that choice in that scenario um because you just make less decisions right and especially now with auto grid aggressiveness and automatic css auto grid aggressiveness you can control when your auto grids break right which you could not do before um it’s uh yeah it’s uh it’s just it’s easier it’s easier if you have an even number of items or like two is the best case scenario two is like obvious because it’s like i i just auto two and i’m done um when you have six like this because you could end up sometimes with like uneven cards in the grid if you don’t care about that that that’s fine and i don’t think you should care about it but some people do care about it it offends their ocd and they want full control over how many at each break point and that if that’s the case don’t use auto grids then there’s variable grids which come in very handy when you need to break uh to next row based on the width of an element so you you want to squish it to that width and then break the rows that’s where variable grid but you want to fill your grid out with as many things as will fit that’s where variable grid is uh very very very handy so there’s four different types of grids in automatic css there’s standard grids there’s auto grids there’s variable grids and there’s content grids uh and they’re actually i’m sorry there’s five there’s also flex grids which allow you to easily center items in a grid when they’re uneven um five different grid types for various purposes it’s like a toolbox you got to know you got to look at the situation go oh i know what tool is for this situation and you pull out that tool okay um do you review e-commerce uh i do yeah i can i can do reviews of e-commerce that’s not a problem i’ve submitted my personal website is there a notification or anything if my site gets reviewed i’m too busy to watch every wdd not really no uh it is kind of a tune in tune in and and watch uh header delta frame how do i change the svg fill color the logo is an image tag uh well that’s the thing not every logo is appropriate to be an svg uh if you want to if you want to use an svg logo then get rid of the image and put an svg in that’s as simple as that uh but if it’s an image then yeah you can’t change if you’re using images for your icons you’re not going to be able to change the colors um that’s just that’s the downside of images right um now with svgs you just have to be willing to put up with the pain in the ass that they are uh but you know bricks has like an icon element for example like we didn’t even explore this because i hijacked somebody else’s icons but the icon element for sure works out of the out of the box any of these sets will work a custom set will work svgs here will work okay like if i put in uh like i use huge icons right this is the icon library i use the most and let’s see if there’s like a figma logo or something okay so we’ll grab this figma logo i think you can even grab the duotone one and these svgs are actually um all formatted properly and i can just put them in uh let’s go here okay let’s go uncategorized icons all right and then i’ll go to downloads grab that icon right here pop that bad boy in style uh attributes data icon and now it’s it’s under the control of automatic css and there you go it’s styled it’s colored even the duotone works i don’t have there’s no hassle okay if you’re if you’re using the icon element you know uh even the code block as long as the svg is formatted properly you’re good to go and at any time too i mean watch this think about how difficult this would be right um i’m gonna go i’m gonna go automatic css i’m gonna go with uh icons and i’m gonna go to options i’m gonna go to boxed icons okay i mean how much of a pain in the ass and let’s let’s get rid of that custom css that we had on here okay look at look at the the boxed effect like that’s such a pain in the ass to do with with a lot of these all of your icons are like that now to me that’s actually i like that better um and and boxed icons actually solve a lot of problems uh over non-boxed icons so you know when in doubt i would say box your icons um and it adds an extra layer of color it adds extra dimension it adds a lot of things i mean we didn’t even explore the rest of the stuff that you can do with icons you know um so we didn’t really need to but yeah i mean i think this was a win today doing doing these hmm can acss style all woo widgets properly buttons forms notifications uh we don’t do a lot with woo i mean out of the box it should be able to handle buttons for sure um forms is is uh it depends on what system you’re using right every system does forms prop differently so we have to just look at the system and uh we’ve done fluent we’ve done ws we’ve done bricks native forms uh we’re looking at a couple others right now woo is an absolute disaster under the hood woo is it is like if you were going to do everything the wrong way in terms of css that it would be woo just look at woo under the under the hood and don’t do any of the things that they did and there you go and so when people ask me to integrate with them i’m just like i mean that’s i would rather jump off a bridge for sure for sure uh face first for sure uh can uh how do we add more grid options into acss two call options or three calls etc you don’t really need more options you don’t need more you don’t you don’t really need more um you just create a custom grid like i create custom grids all the time you saw what i did with auto grid one those kinds of things um you just you just do it move on the framework itself doesn’t need a thousand more options it’s just um you know 99 of the time it already has what you needed to do hello kevin is custom snippet for image size needed with acss version 3 no uh well that that wasn’t for acss that was for source set stuff uh bricks has some source set options in it by default it just depends on how much control you want over your custom image sizes uh at the end of the day all right let me go see we’ll check in on the chat yeah sure cart i i would absolutely start migrating to sure cart or north commerce immediately immediately just for the sake of we have to get woo out of the dominant position it doesn’t deserve to be in the dominant position It is horrifically heavy.

It is horrifically coded.

It is the leader by default, by the nature of there were no other options.

And first to market.

And at the time, look, at the time, it was great.

It’s not a good system.

It’s just not a good system.

It’s a powerful system.

It’s a well-leveraged system.

It’s a third-party ecosystem-dominated system.

It has a lot of pros.

It has a lot of pluses.

It’s also horrific.

It’s also horrific.

And I think it’s time for a new leader.

It’s certainly just time for more dominant options in the marketplace.

And so you need to reward SureCart for their efforts.

You need to reward North Commerce for their efforts and start deploying them on real sites and start using them and start migrating anything possible over to these other options.

Okay.

Let’s see.

Do you have any trainings on SVG best practices or can you point to one?

I mean, not really.

It’s like, I don’t like them.

I don’t like dealing with SVGs.

I try to stay away from them as much as possible.

I use icon sets and frameworks that already have properly built SVGs.

Yeah.

I just, I try to spend the least amount of time interacting with SVGs as possible.

But I’m sure there’s some SVG best practice videos or content out there somewhere.

I just, I don’t have any interest in creating it or doing it.

So I personally love Woo because I use it so much that leap to SureCart is kind of big for me, especially for physical products.

I don’t know if you would, if it would be quite as big of a leap, especially now with the integration with Bricks where you can loop anything, like any of the products can be looped.

The categories can be looped.

Pretty sure.

That was a big limitation before, honestly, but, and they’ve gotten rid of the shadow DOM, which means that styling is way easier now.

And ACSS is about, that is one thing we’re going to integrate with.

SureCart.

We will be integrating with SureCart for styling, auto styling, just like what you can do with forms.

So you’ll go to automatic CSS and you’ll go to forms and all of these things will now apply to SureCart.

Checkout pages, everything that’s a form in SureCart will be styled by automatic CSS and will match all of your other forms on your website as well.

And that’ll happen out of the box.

That’ll be even more fantastic when that happens.

Okay.

All right.

Let’s get out of here.

I’m going to tell you, so Thursday, I would expect Thursday, the card framework, the icon framework will be in your hands.

We also have completely refactored.

It’s not in this version that you’re looking at right here, but the docking functionality, the pinning functionality, the ability to expand this window right here, even when docked, even when docked to this side, you can expand it either way, even when pinned.

Okay.

You have full control over all of this now.

All of the docking, pinning and resizing functionality has been refactored.

It’s smoother than ever, more powerful than ever, more accurate than ever.

It is almost impossible now.

I would say is impossible now for the dashboard to ever be off of the screen.

And I will give you a hint.

This is all coming this week.

This is all coming this week.

And I will give you a hint.

I will give you a hint.

Okay.

Get ready for this.

Lean in, lean in, lean in.

Okay.

Maybe not this week.

Maybe this week.

Maybe not this week.

Very soon.

Very soon.

You will be able to have a second dashboard instance open in another window, on another monitor, that will sync with all other open instances of the dashboard, giving you multi-screen functionality for ACSS.

Maybe not this week.

Okay.

It’s being worked on right now.

It’s, it’s, it’s apparently close.

Okay.

But stay tuned because I know a lot of people have asked for that.

I know a lot of people wanted that.

All right.

And we’re going to try to give it to you.

We’re going to try to give it to you.

So buckle up.

This may, this is a kind of a dry run, honestly, too, because if it works well, this could empower a very similar situation for Etch.

I don’t know.

I don’t know.

We have to investigate.

We have to go down this path.

There’s a rabbit hole.

We have to go dig around in, but we are starting with ACSS and it’s looking very promising.

Okay.

All right.

I got to get out of here.

I love you guys.

Thank you for the support.

I hope you found this interesting and helpful and valuable.

I’ll be back next week, next Tuesday, 11 a.m.

Mark your calendars.

If you’re not subscribed to the channel, subscribe to the freaking channel.

We’re trying to get over 20,000.

Okay.

I’m out.

Peace.

Love you.

See ya.

Bye.

Thank you.