WDD LIVE 068: Frames Rebuild Progress Review (Inside Look) + New “Centralized Taxonomy Architecture”

What’s up everybody my favorite day of the week hey if this is your favorite day of the week go ahead and drop a comment drop a comment let me know say hi we got Mark Zemansky in the house case let me go ahead and turn off this guy down here semantics is in the house case as I said Jake Merrill Patrick Fernando Donatas so hard these names are so hard there’s people from everywhere the names are very difficult Jason in the house Yasser digital algorithms is with us as awesome this stream is going to be epic don’t forget to bring your water bottle with mint so you can stay hydrated and energized I’ve got my my iced coffee this is from page page builders summit just got a lot of these random coffee cups from all these places uh I bet etch is the new CMA content management architecture says Derek uh you would be you would be incorrect there Derek uh that is not what etch is um Dover says hey Freemo uh Stana’s law in the house Calisthenics Ireland good to see you okay we got to get on with it I’m just I’m just rambling names off so that we can let the algorithm do its thing and bring the people in uh so so people don’t miss out on this here’s the agenda for today uh I have been building the new frames website over the past five or six days inner circleers may remember like nine months ago this site’s been designed for nine months been sitting in a Figma file and uh I actually in the inner circle on one of the co-working with Kevin’s uh I I spun up the server for it installed brick you know with the blueprint put everything in started started just kind of like structuring the home page out um but this was on I believe I believe at the time that was yeah that was for sure on like the old automatic css version and and it I just completely ran out of time and did I never touched it again after that it just sat there for months and months and months and months so I kind of scrapped all of that five or six days ago I said hey etch is right around the corner uh we’re relaunching frames for Figma which needs a sales page and it and then you look at the existing frames website and it’s the original it’s the original frames I was like I gotta buckle down I gotta buckle down and so for the last five six days I’ve been working on this new frames website and I feel like um the progress has been really good um I this is the first real project that I’ve been able to like fully deploy the automatic css 3.0 dashboard with like the you know getting it to the point where it’s at now and then actually just using it on a real world project and I just gotta say I mean as far as that goes um I mean obviously I build frames with it all the time I’m constantly you every every day I’m using it but this is like the first full-fledged real world project environment let’s get after it and it’s just been like I mean compared there is no comparison to the to the 2.x series there’s just absolutely no comparison um it’s it’s been phenomenal and you’ll you’ll see here we’re going to talk about a few really key things you know there’s there’s some there’s some unique stuff that we’ve kind of brought into acss from a framework standpoint like contextual background and text colors abstracting extra layers of abstraction and how those are going to play out in real builds they’ve played out phenomenally well in this rebuild um I do also want to say that I use these rebuild opportunities to experiment like they are my um because they’re my sites like they’re not they’re not a client like I don’t really I’m not that comfortable just experimenting with like client sites um with new concepts like for example the concept we’re going to talk today with this experimentation of a new way to manage content a potentially better way to manage content architecture uh for those of you following my current series on the makings of a dynamic website the things I’m teaching in that series are the tried and true traditional approach but for months now months now I’ve had this other approach in my mind and it’s very different uh and in in my mind working through it I’m like it could have a lot of advantages like it could it could make things a lot better a lot easier but I never had a real project to try it on and I wasn’t going to try it on a client project so this this was the opportunity to actually hey let’s see because what you have to remember we have uh we’ve we’ve gone over this before it’s called crockford’s law tony crockford used to be on our team he’s now retired uh but crockford’s law and I think everybody knows this if they’ve spent any time in this industry is that you can have ideas for something you have concepts for something you can put a new tool into practice for the thumbs down whoever that was you can put a new tool it just it flies across my screen when I the thumbs ups don’t really fly but the thumbs downs do anyway thank you so it and this applies to software as well so you might let’s take like a crm uh for example and and you’re like okay I think this is going to work really well for our business and it does like 90 of the way to where you need to go but then the last 10% which you couldn’t foresee at the beginning the last 10% you figure out oh my god it’s got a missing this this missing feature is so critical it turns out it’s this is a deal breaker and you don’t realize that there’s deal breakers until you’re like 90% of the way into the thing right and then it’s like gotta undo all this oh no we can’t do it we gotta completely change the whole thing okay so when I was brainstorming this architectural approach I was like very it’s very possible that I’m gonna get very far in and realize there’s some sort of deal breaker that I couldn’t foresee in the beginning and so that’s why it has to be done on a real project you can’t just conceptualize this stuff and then put it out there as like okay use this method it’s no we have to we have to build real things with it and vet it and confirm that this is good and that there’s no deal breaker and then we can then we can teach it so that series that I’m doing on the makings of a dynamic website I’m gonna finish it off okay remember that’s the tried and true traditional more traditional approach it’s gonna take a turn it’s gonna take a twist okay and we’re gonna do something more like what we’re seeing today because so far so far I haven’t run into any deal breakers and so far it’s it’s way better it’s way better so we’re gonna take a look at it uh let’s go ahead and jump into the chat here um okay the man with the owl is here I like this this this is a very good little branding thing this guy’s got going on here can I make this thing bigger how do we make a color width border text margin I don’t I don’t know how to make that bigger I feel like those messages at the bottom are a little small these days um okay questions can be put in I see some people asking questions make sure it is the hashtag version so hashtag Q hashtag question uh Justin says it makes me feel really good that Kevin uh takes the opportunity to rebuild things just to stuff around and experiment yeah it I you have to you absolutely have to um there’s there’s no way to move things forward if you’re just always doing things the way that they’ve always been done right we’ve got to look for better ways and I will say when it comes to this uh architectural approach that that I’m going to show you today um but all all of these methods in my estimation are workarounds for archaic WordPress CMS architecture like and I put a long post about this on Twitter a while back this is why I rail against their abandonment of the CMS is because there’s so many things they could do to improve there’s so many things that they could do to improve the way that we manage content in the content management system of WordPress and they haven’t done it they haven’t touched it they haven’t even thought about it because they’ve been you know distracted and so we’re still in an era where we have to do crazy workarounds what I’m going to show you today with this with this architecture is not sensical it doesn’t it’s not like a oh that just makes total perfect sense it’s it feels backwards it feels weird and that’s why I hadn’t even that’s why I hadn’t done it before I actually put it off for a while because it’s like ah doesn’t it doesn’t feel good in my mind to do it like that but it turns out it actually in practice does seem to work a lot better so that’s the interesting part about it all right we’ve got good viewership here we’re up to 237 I’m going to go ahead and share my screen this is the current frames website the old we’re going to call this the old frames website if you don’t know anything about this website if you don’t know anything about my process for things so when I was first launching frames you know it’s I do the bare minimum because you don’t you don’t know if like is the product going to be good is it going to not be is it going to take off like people are going to like it is it going to resonate everything is a theory everything is a theory so we have to prove the theory well I’m not going to go full-blown design development all on a theory like we’re going to go bare bones minimum viable product minimum viable marketing initiative okay and we’re going to see what happens okay and it went off like gangbusters is great it’s fantastic everybody loves it but then you know we left the website the way it was it was like it was it was the bare bones just kind of thing um and it’s it’s not it’s not super exciting right it just kind of did its job it served as like a here’s a way for people to buy this thing um and so now we’re at a point where it’s like no we we want to we want to we want to polish it up now and I wanted it to look more in line with automatic css so the automatic css website the color scheme the design all of that let’s kind of carry that over to frames okay um so this is the old one now library functionality I want to talk about a couple things um library is fine we overdid it with the documentation we overdid it with like and you see that you know the latest frames don’t really have much of any documentation it was good in some cases people for the most part didn’t use it they still asked all the same questions that were answered already in the documentation it didn’t really help us really uh from that standpoint and it has one key missing feature like for example you can see a screenshot of the frame but you can’t see a live preview of the frame now one of the reasons for this is because the we’re modular okay so not every frame is a section which means that like if it was a section it would have padding around it and you could live preview it just fine but imagine this card right here it would literally like the card would be stuck to the edge of the screen because there’s nothing around it to pad it or anything and and if you put something around it to pad it that thing becomes part of the frame that people then have to import not a good situation that’s not what we wanted right so we had to find a way to manufacture padding for the purposes of live preview that would not be in the frame when people imported the frame and i actually found out a way to do that and so now the new site will have live preview at each breakpoint the responsiveness uh of the frame and that’s going to be the big improvement so there’s a big improvement that we’re going to with the new website in terms of that kind of functionality um and then of course we have components okay there’s the account stuff all that yada yada yada so you know basic site whatever now i will pull up the new site let’s go ahead and get to the new one now keep in mind this is um like i said we’re i’m five or six days into development this thing is not like live it’s i mean you could go to the url but it’s not like going to be launched tomorrow or anything like that i’m just this is an opportunity to look at the progress that’s been made to go in the back in and look at the new architecture that’s being experimented with to talk about some of the unique features of this website uh especially when it comes to design and dev and scaling some of the uh design decisions that were made so you’re looking at a website that is absolutely in progress still in progress okay like very much still there’s a lot to do there’s a lot to do um but it’s still at a point where uh i think i think it’s a good representation of five or six days of progress um and i think it’s it’s it is getting close right it is getting close um so we’ll go through it you’re free to ask questions about anything that were that we’re going over um you can tell me where what areas you want to dive into more or something catches your eye right we can go there i think what we’re going to start with is i had a coughing fit right before this live stream and i was like that’s a great way to start okay i think where we will start is with the automatic css setup of the website because it’s actually quite simple um this is essentially a one color website there is one color deployed here and that is it and so let’s let’s just pull up the dashboard real quick um let’s go through kind of just all the key panels right uh let me get into i want to make sure our chat is up here db says woohoo no outfit font what do people have against outfit i don’t know what people have against outfit i like outfit uh but no this is this is not outfit okay all right so we’re going to go into layout we’re going to go website dimension so i’m actually a little narrower on this website now tommy did the design for this um and he wanted it to be narrower so we’re you know normally i’m 1366 ish with most of the sites that i do we’re back down to 1280 for this site of course i can make this change at any time you know if you know anything about automatic css um break points we’re using all the standard break points here i’m doing nothing really with header heights or anything like that uh at least not yet um nothing really like the layout tab is essentially very close to default behavior here color palette’s a very interesting area here because we’re doing a lot with one color like we are this is we’re doing a lot with one color uh it’s the primary color now i’ve talked before about even if you are going to use the same like a one color website you should you should duplicate between the primary and the base because if you’re going to use the base in in places that is somewhat assigning context to those things so that if you ever add a color to the design you don’t have to go back and find all the references and replace references you can just change your base color and now the base areas of the website adopt the second color that you’re going to be putting into your design i don’t have to do that now um i don’t and in this in this exact project because of the abstraction um the new abstraction areas of background colors and text colors which we’ll look at in just a second i can get away with literally just using one color because i still have contextual assignments for those colors that can easily be replaced and that is one very very powerful aspect of this abstraction concept but we’ll dive into that more but as you can see literally everything other than primary and of course neutral because i always say keep your neutrals on you know you need them for various things whites blacks blacks things like that okay um i am using the main transparencies we are using light transparencies dark transparencies and ultra dark transparencies of primary everything else is off semantic colors everything is off everything is off um okay let’s go into typography um you know very very you know default here type scales a little bit bigger than the normal default that i use uh here’s where we set the font family right here heading color using the new great line height formula fantastic uh you know some minor adjustments minor adjustments i am balancing all of my headings uh where text wrap i’m just using pretty on on normal text everything very very um you know just very close to defaults here the only thing i’m doing is overriding my h1 size so i’m taking that out of scale because i want it to be much bigger than the scale and then everything else is done according to the scale spacing all defaults section spacing um the gutter i change i always change the gutter a little bit but that’s neither here nor there i think the 60 is the default for desktop but i make the mobile a little bit skinnier on mobile um mostly all defaults here mostly all defaults uh buttons i only have primary loaded i am using dark light outline uh versions we’re going to talk about that in just a second um some some cool stuff going on with that here’s the backgrounds and text area this is the contextual area a lot of people are a little bit confused by it it’s essentially an area where i can assign colors to specific contexts like a what is a dark background what is an ultra dark background what is a light background what is an ultra light background and here’s where i’m assigning those colors and this is why if i did need to add a second color i could add it like base or something like that and then just swap these out and i’m good to go my whole website is great my whole website is fantastic i don’t have to go replace any references and elements or classes or anything like that it’s would be extremely easy to add another color to this website um same thing with text this is where you assign text and then of course we have auto color relationships which i haven’t even really needed on this on this website um borders and dividers section i have absolutely this is a brand new area of automatic css where we created this concept of a global border style and a global divider style i have absolutely abused this uh functionality throughout this website like and it makes it so easy like when i want a border on something i go border var border border of our border border of our border like just wherever i need it and boom boom the same border shows up perfectly same thing with dividers um it this this was a newer concept and it’s really played out like fantastically um that’s it accessibility i think all this all this shit is defaults all this stuff is defaults haven’t touched a single thing um okay and then in uh forms we’ll do form styling when we when we actually see a form options let’s check this out utility classes so i am using pro mode with a little bit of extra stuff turned off okay um so a lot a lot on the utility side turned off a lot so we’re keeping the project nice and light uh in terms of that and everything else is pretty much defaults in here as far as i yeah as far as i remember uh global sass we’ll start to look at some of the cool stuff that’s done there let’s start with the um well first of all let’s go down and um okay website looking tasty af could work tommy um okay good all right well yeah it seems like you know people are people’s reactions i mean so far so good right it’s looking it’s looking fairly good um if you see in the background it’s very faint it’s going to depend on the resolution of the stream the resolution of your monitor but you’re going to see a grid background okay now tommy and figma let me pull up the figma file for you guys uh and somebody did ask the question was this done in frames for figma uh one was this done in figma was it done with frames for figma the answer to both is yes um so these are the figma files right okay and i can go left and right you see you know all of our all of our pages which we’re going to get to don’t worry we’re going to get to we’re going to get to all of it um but yes it was done in frames for figma in figma um and tommy used like uh some sort of svg grid you could see it back here uh i don’t know i tried to pull it out it was some giant like it was the full page height and then i was like i really just need that section that repeats i don’t need a gigantic svg i just need the little part that repeats and then i’ll repeat it myself but i couldn’t i couldn’t get that i didn’t even care i was like it’s just fucking squares um so that i i was like i think i can make that with a background like a linear gradient and so that’s essentially what i did so we’re going to go to uh the uh the dashboard here my brain just i just had a stroke or something um we’re going to go to the dashboard and we’re going to take a look right here at how this because i i didn’t want i actually initially started out assigning that background pattern to a class and then i was like i’ll put it here here here and then i took another look at the design and i was like fuck it’s everywhere um i should just make it show up everywhere by default so i ended up assigning it to the body tag and uh so i set background color and you can see i’m abusing these these like uh contextual color variables notice i’m not calling a color i’m just saying bg ultra dark or bg dark those are those color assignments i’m not asking for primary or base or anything i’m just asking for the contextual abstracted version and that’s what makes this so scalable and maintainable and by the way the decisions when you’re doing the work there’s no more decisions left it’s like i want dark i want ultra dark i want light i want ultra light i want you’re not even thinking about colors anymore it’s all set for you it’s all done so then i used a background image and what i did is i created a grid but i created two grids with the background image property with the linear gradients and so we have a large grid which is a linear gradient one goes up and down one goes left to right they’re two pixels thick and they’re a color right now when i need the transparencies that’s when i actually call the color and grab the transparencies from it and then i did a smaller grid the exact same way and when one grid is half the size of the other grid they just intersect perfectly and so that’s where you kind of get that grid in a grid there’s like a small grid and a big grid kind of effect is as a background pattern back there but then even primary trans 10 primary light trans 10 was too light it didn’t look like it needs to be very faint and so i i thought about maybe i i’ll create like extra um variables here like a five or whatever and but then i was like no it actually there’s also if you look at the figma file some sort of darkened overlay on it and so i actually used a new technique called border image where you can fill from the border in and it actually gives you like an oh it’s like a it’s it’s a new technique for creating an overlay uh without needing divs or anything or pseudo elements or anything like that you can just literally use the border image property and a linear gradient to create an overlay and so i darkened everything and you don’t have to worry about z index issues or anything like that it’s it’s really fantastic um so this creates an overlay over the entire grid of the entire website and then but this is not the overlay you see here the vignetting that’s in the hero is actually done with a different overlay technique which when we get to the hero we’ll take a look at that uh okay then we’re going to skip accordions that’s not really anything important while we’re here we’ll look at this links thing something i’m going to actually bake into automatic css i think uh it’s a really good idea to visually indicate when a link takes somebody to an external website or opens a tab so if we look down here in the bottom in the footer you’re going to see links like this education community they have these little up arrow indicators on them if we look in the nav right here community and videos um so let me go ahead and show you this for a second that’s this is a good way to visualize it we’ll just pop into the header and i’m going to go to this drop down right here and you’re going to see like watch see this open and new tab i’m going to take it off look what happens to the arrow and then i put it back and look what happens to the arrow so i wanted a way to when i create a link to an external website automatically that arrow identifier gets added just automatically right and also because it needs to be accessible we can stick effectively what is like an alt uh like a like an aria um an aria label onto that pseudo element which is which is really cool and that’s all done with like one line of css or two lines of css so let’s go look at um that’s not it uh let’s go back to the front end and let’s look so we’re going to open this up and we’re going to go to sass we’re going to come down to links okay and so what i’m targeting is all links um that are not the stupid bricks post sharing thing because that was causing problems so we can put other stuff in our not statement if we need to but this line right here is the key line because you can target things with css uh you can target attributes and the target of a url is an attribute and so if the target equals blank which opens a new window for a link you can target that with css and what we’re doing is we’re adding an after pseudo element to it with the property of content this little html entity code is the code for that little up arrow thing and there’s a gazillion of these you can put in any icons that you want to put in and then if you put a forward slash and then some words in quotes that will actually become the aria label for that content element for that pseudo element which is awesome and then 0.75 m font size use m font size font size here it’s essentially going to make the arrow size relative to the font the text that it’s attached to so the arrow will always be the exact right size um okay and so if we look at maybe the audio is working let’s do an audio check let me know if you guys can hear this in your headphones correctly voiceover on our header template window header template web content has keyboard focus you are currently on web content to enter system settings appearing voiceover off okay could you hear that in this microphone or could you hear that like it was system audio that’s that’s what i need to know right now um let me go to let me go to sound just make sure we’re hooked up correctly ah sound okay input ah here we go here we go caster pro 2 let’s try that again voiceover on arc header there we go there we go header template web content has voiceover off okay nice now now you should be able to now you should hear it right okay we’re gonna put this if you like this little arrow trick which i i love it right one it gives you a visual indicator that the link is an external link and two for accessibility purposes it notifies people with screen readers that it that they are about to engage with an external url so it’s not just cute like it it does have real benefits and what i’m going to do is build that into essentially just a toggle under the links section so if you go to buttons and links links right here you’re just gonna be able to hit a toggle that says like you know mark my external urls as external something like that um and i’m sure there’ll be you know a little bit more to it but that’ll be a one-stop kind of thing but check this out check out how it announces ready visited visited link docs link account visited link docs visited link education link to external website visited link community link to external website link privacy policy list voiceover off okay see how it announces differently so it’s very easy for people with screen readers to determine whether the link that they’re about to click is a link on this website or a link that is going to take them somewhere else so uh yeah it uh it it does a lot beyond just being cute which is nice okay let’s pull up uh global sass let’s come down what else did we do okay here we go in the header so you see this button right here in the header uh this was actually a really interesting case where i was like i can’t really do what i want to do with just like a utility class or something like that and this will really show you the depth okay when we talk about crockford’s law you get 90 of the way in and then there’s the deal breaker where you’re like i couldn’t see that at the beginning and now it actually turns out that’s a really big pain in the ass right well automatic css has various ways to handle things and it turns out it’s actually very important to have these various ways because you run into these situations and you i wish there was a tool for that and with automatic css there’s almost always a tool for that okay so um let’s go down and look at these buttons for example look at the block padding of these buttons look at the um inline padding of these buttons oh by the way somebody was like how do you make all of your buttons pill shaped in automatic css very simple uh buttons let’s go to global so global affects all of your buttons and then you just find the border radius and pop a 50 vw on there all your buttons or pills now you’re good to go uh it’s literally as simple as that and if you want to change them at any time you can change them at any time okay so these are the pill buttons but they have more padding here and if i go up and find another one they have more padding here these are all the same i wanted the one in the header to be skinnier is that what you would call it skinnier not as tall not as much block padding um and i wanted to change its minimum width and i also wanted to just um only apply those styles here’s the kicker this is not a free floating button if you watch my uh youtube on how to kind of properly manage a navigation up here people will put in a nav element here and then they’ll just put free floating links and buttons over here um this is not done this way so let’s go into the the header this is all one navigation and the benefit here is that my pricing link which by the way bricks does not render this properly in the builder my account link and my pricing link are part of the nav and on mobile they will automatically be part of the mobile nav right the the problem with making these things separate elements is that when you build your mobile menu you now have to put in duplicates and then you have to manage like well okay when it’s when it’s this breakpoint those buttons are going to show but not these links in the now and it just it’s nonsense it’s nonsense make it all one navigation because that’s semantically what it is and then we’re going to use css to isolate these two items away from the other items and then we’re going to use a minimum width media query which is a uh desk like a well people will call it a mobile first media query right but a breakpoint and up because this is what it needs to look like on desktop but not on mobile so we’re only going to apply the styles to desktop style like laptop desktop breakpoints right um you can’t do that you can’t do any of that with a utility class because you put a utility class on the utility class is on it’s going to be a button at all times i don’t want it to be a button at all times i only want it to be a button at certain breakpoints okay now i will say that the bricks menu situation is the worst aspect of bricks okay um especially if you wanted to do anything beyond the basics i mean you’re going to be you’re going to be writing a lot of uh a lot of css um this is my media query right here minwith 991 is where i’m isolating the last two elements and i’m basically using an auto margin to just make them fly to the other side of the header so that’s the code that’s isolating them but then i needed a mix in i needed a mix in from automatic css to get that to have global button styles because i did not want to style all of that manually and put in all the button variables manually and all of that that sounded like an absolute disaster and we just don’t have to when you’re using automatic css so let’s go in here and let’s go to global sass and let’s take a look at how i manage this so i gave it a class of nav button right i let’s let’s skip to the includes and then we’ll come back to these variables right here so i said in nav button because you can nest in sass you can nest breakpoints you can nest whatever you want to nest in sass and it all works out in the end it’s good to go so i said include breakpoint up l so that is a sass mix in for writing a minimum with media query for your l breakpoint you don’t have to know what the l breakpoint is in fact if the l breakpoint changes in the future it doesn’t matter this is an unbreakable uh scenario right here so just say include breakpoint up l is including the code for uh men with media query at the l breakpoint and then inside of that i’m going to say include button primary which is essentially saying make take all the button primary styles and assign them to nav button inside of this media query so with two lines i’ve written a media query i’ve written all the instructions for my primary button style very very simple but then we have the problem of but i don’t want all of the primary button style remember i want it to be thinner i want less block padding okay well all button styling in automatic css is done with locally scope variables so that means you can just override the two locally scope variables that you want to alter and this little block right here gives me still a globally styled button a globally managed button in automatic css but only at the breakpoint that i want it to be at and with a little bit different padding and so it’s like it doesn’t it doesn’t get any more powerful than that um and the ability to do this by the way we using these mix-ins i can assign these mix-ins to facets i can assign them to any any third party buttons that i want to look like all my other buttons mix-in mix-in mix-in mix-in all good okay um all right what are we doing what are we doing oh there’s ruben ruben in the chat i saw five dollars come across the screen i gotta be ruben okay um test section has testimonial grid background oh that’ll be a that’ll be a good one to look at in just a second okay that is all of the dashboard related stuff for automatic css now we’re going to dive into bricks and we will dive into let’s do you want do you want to do the home page first or do you want to do the architecture i’ll let you guys vote you guys steer the ship today do you want to do the home page or do you want to do the architecture put your vote in the comments and let’s get to it uh design with cracker welcome good to see you good to see you okay i’m gonna go through the the chat real quick lizzie hutchinson says uh this is so fantastic thank you lizzie um okay flexing on frameworks for a living yes um this is why i’m doing automatic css 101 by the way because um the deeper you get into it i know some of it is intimidating for sure uh especially depending on your skill and experience level there’s going to be some intimidation factor the good news is the intimidating stuff you actually don’t ever have to touch or use you’re not required to use any of it right you can use just the basics and get tremendous value but the more you want to dive in like the the the rabbit hole gets deep okay and you run into certain situations and then you realize oh my god that that tool automatic css is just a big toolbox right it’s got a bunch of these tools in it and your job as the tool man or the tool woman is to know what your tools do and how they work and which ones are most appropriate for different scenarios and some people you know their toolbox is like a hammer and a screwdriver and that’s about it uh they can’t do much beyond that and that’s okay but as you get better and better and better you realize oh i got some other tools in here and they actually come in quite handy quite handy in different scenarios uh and you’re really glad that they’re there when you need them okay let’s go down and say people are saying architecture architecture architecture architecture well i think architecture one i think architecture i don’t even have to count them i think architecture one okay let’s take a look at architecture uh in order to look at architecture let’s take a quick look at at some things here so we’ve got layouts we’ve got components we’ve got resources docs okay these are external links so they don’t count but we have a docs scenario going on here uh if we come down here we have a products area okay with frames and frames for figma now in the traditional model you would automatically say layouts custom post type right that’s a custom post type components that’s got to be a custom post type docs that’s got to be a custom post type um you’ve got you’ve got legal links down here privacy policy cookie policy that that’s a cpt we know that we’ve watched the videos kevin we know we know what the cpts are um okay and you’re right you’re right all of those things are cpts except what you’re looking at right here frames and frames for figma are not a cpt they are not a cpt but wait if we click on one like frames um that i linked i didn’t link them up yet um they do have pages the pages are blank okay just to let you know but i assign the templates to make them to to prove the concept um those are not cpts everything else is a cpt now those two things are also not posts and they’re also not pages and i’m calling this like a uh what i don’t even know what i called it in the description of the video it was it was i gave it some sort of some sort of name which i’m not even 100 sold on centralized taxonomy architecture is what i called it how do i get back to live chat on here okay i like to have the live chat up on my phone right there a centralized taxonomy architecture which essentially if we’re going to explain it as simply as possible you take the most important thing that the website is centered around right for most websites what is that that would be services or that would be products okay so you take the most central thing to the website and you taxonomize that and then everything else exists around it as a custom post type and i’ll show you why this is so important especially when we talk about relationships because if you remember in the youtube series that i did on dynamic websites if you want to create a relationship between your reviews okay we have reviews as well so here’s reviews you want to create a relationship between reviews and the product or the service that is being reviewed what do you have to do well there’s two ways to go about it one is you can create relationship fields bi-directional relationship fields create a relationship field over here create a relationship field over here link them together voila you have a bi-directional relationship now there are some downsides to this if you do this which i’m and i just taught it in the series but i will tell you there’s downsides to it okay there’s two main downsides really that people will talk about one is it’s essentially a meta query um so the performance of the loops is going to be worse than if it was a tax query okay um that would be number one number two is it’s not really super efficient or fun to create and manage all those relationship fields it’s really annoying that actually there would be more downsides so that’s another downside a third downside is that when you create the loops in bricks anyway you lose all the loop controls uh they go away when you do a relationship query you you’re just querying relationship it’s like a binary thing it’s like do you want relationships or do you not want relationships you can’t go like i want eight relationships i want them in this order i want all those controls go away so you lose functionality in your loops there’s actually a lot of downsides right but there was no better way there was no there was no there was no alternative that was just awesome other than people would say well create a taxonomy for the products and then you can assign you can essentially just assign reviews to a product taxonomy but then i was like but hold on i got i’ve already got a cpt for my services and and where my products in this case and i’m gonna manage a taxonomy next to a post type of the same data and how’s that gonna work like every time i create a new product or a new service i gotta remember to add that thing to the taxonomy because they’re two separate data structures that doesn’t i don’t like that that concept’s not good uh it leaves a lot of room for like you know uh loose ends essentially you remove a product but you forget to remove it from the taxonomy and that now you got your whole data is out of sync not good not good so then i started thinking well can we just get away with the taxonomy by itself we don’t even need a cpt for the services and products right um that was the theory so but then i was like i don’t know what we’re going to run into what what issues are we going to run into with that so let’s take a look at this i have a change log which is a cpt components cpt docs cpt facts cpt layouts cpt reviews cpt no products you don’t see products here where are the products living guys the products are living here look products docs uh changelog products right layouts i don’t think needed it because there’s only one product that uses the layouts reviews products hmm look products this way or services if you’re doing a service-based website get to live within automatically live within any custom post type that they should be related with by nature okay which is really really really fantastic so if i’m going to add a new changelog entry and but which changelog am i adding do i need a oh i need a this product changelog and that product changelog no no actually don’t i just need a changelog concept and then i can assign a changelog entry to a product because they have a natural relationship this way let me go to acf taxonomies and i’m going to go show you how this is set up so there is a products taxonomy right now remember no cpt and then you essentially right here are determining what this taxonomy is naturally related to it is naturally related to documentation it is naturally related to changelog entries it is naturally related to reviews so if i go to reviews and i want to create a new review here’s my new review area look over here products i can it’s just asking me by the way you’re writing a review which product does this belong to and this is just one area of data to manage i don’t have another cpt that has duplicate data in it i just have that but then you have the question obviously of where do you go to create the product pages because you need pages for the products right and then you need an archive for the thing well guess what a taxonomy has an archive page so you can use templates bricks templates assigned to that archive page you can create a products page out of an archive template and then you can create each each each each each actual category in the taxonomy is an archive in itself you can use templates to create pages for each product using archive templates okay um so this is let’s say uh mark says got to turn on that hierarchical toggle yes i know that that that’s that’s another fucking wordpress from 2005 okay why isn’t that fixed yet i don’t know but yeah if you don’t make it hierarchical you can’t get nice little checkboxes in in your thing um but now when i’m doing loops think about this think about this when i’m doing loops i want to loop my reviews i only want to loop reviews from a specific product so if i’m on the frames for figma sales page i only want to see reviews for frames for figma well guess what my products and my reviews have automatic natural relationships i don’t need any relationship fields i can literally just add that as a stipulation in the loop that we’re only pulling from that category frames for figma that’s the only category we’re pulling from for this loop and guess what guess what it’s more performant because it’s not a meta query and two two is i get all the controls of my loop so i get to maintain control over how many items are we looping what order are we looping them in yada yada yada yada the whole list everything is still available to me this is a this is a way to manage content where content has natural relationships to the core aspect of the site that you’re building whether that’s products or whether that’s services now i don’t think that this would apply to a woocommerce situation but if you’re creating if you’re just managing like like i am i’m not doing woocommerce but these are products okay so if it’s a situation like this or services is a clear cut seems to be think about service area networks you would automatically have relationships between areas and the services automatically have relationships between the services and the team members that provide them or the locations where those services are provided or yada yada yada it is a way to have naturally occurring relationship functionality that’s more performant to query and that retains all of the controls with your loops it just takes a little shift in how you think about managing a website okay please set the taxonomy to hierarchical i hate the wp doesn’t set them to check boxes i know i know this is hard for people to understand nice explanation this is how we should be thinking for solutions architecture yes i believe i believe so um there’s a feature request in bricks to enhance the relationship controls we should all hit it up yes there is but you don’t even need it anymore if you use this architecture you actually don’t need it anymore um okay all right all right good good good i’m just i’m just going through the chat real quick ruben uh i i do i do appreciate the the trolling um okay good good good good good architecture good all right we’re good to go all right so that’s the architecture side of things let’s hop into let’s hop into some dev work let’s hop into some dev work so let’s edit this home page with bricks um let’s talk about just some of the unique features we’re not going to cover the like okay that’s run of the mill that’s pretty standard pretty typical these floating little elements back here which also have a vignette um i believe this is all self-contained so if i delete that little container i we we obviously lose our accent pieces and we lose the vignette they’re all tied together which actually creates like a reusable uh kind of situation where i can apply this almost to any hero section or really any section that i want um so we can we can take a look at how i did this i call it accents group and if we go to layout we can see that it’s positioned absolute it has an inset of all zeros which essentially makes it the same size as whatever container it’s already in in this case the section right uh it has a z index of negative one to put it on the bottom and then inside of it i have a bunch of svgs which uh with attributes we’re telling screen readers to ignore all of these things uh they’re just visual accents and then in the css i’ve put an outline on each individual thing and i’ve just absolutely positioned them wherever they needed to be i had to use some formulas a little you know min uh functions here and there to control their size as they scale because i didn’t want to change all this stuff constantly at all these different breakpoints you can see i’m using a bunch of calcs in the positioning in some cases um just to help this be look how they kind of start to shrink and they change their position a little bit and then they just go away on the very small breakpoints um so it becomes very easy to manage from a responsiveness standpoint uh where those absolutely positioned elements can often be a pain in the ass and then there’s a little overlay uh element that’s sitting in here and we can just look at what that is it’s another absolutely positioned um element but it’s a radial gradient with a circle and then we’re using transparent that’s the center of the circle is transparent and then the outside of the circle look at that is bg ultra dark don’t even care what color it is it’s just there you go again with another contextual abstraction i just i just want that dark color that i’ve been using uh for my backgrounds and so again i don’t if the color ever changes it’s naturally going to work with whatever we’re doing so it’s really really really convenient less decision making okay this is absolutely positions it’s not this is fairly standard stuff um if you don’t if you don’t have to do this uh go ahead and practice your absolute positioning it’s really all that’s going on here but it is a self-contained thing called an arrow message and um if you delete it it’ll it’ll all go away and i can bring it back and i can use it anywhere else that i need an arrow message um so it’s you know nice and scalable maintainable uh there is some math involved here let’s go maybe somewhere in here we can see with our positioning um this one was done let’s see uh yeah 18 characters absolute okay it’s done with some custom properties that i can override on a per instance basis but i remember putting in um just some like because again this has to scale down right if we look at it as as it goes down like it needs to kind of change its position a little bit and it’s still not perfect it’s actually it’s i mean that’s that’s pretty workable on mobile i have to look at it on an actual device i haven’t gone that far yet but notice it got a lot smaller things got a lot smaller this thing had to move away from the edge um and that’s all done with mostly math it’s not like breakpoint breakpoint breakpoint change change change um it’s just kind of done with math so it fluidly fluidly happens okay let’s go down what is this um this is a we look at testimonial grid okay style all right i think i popped in a recipe for css columns here and so this is just using our css columns recipe i put some cards one review card in here looped through the reviews good to go notice it fades out down here okay and notice it has this read more link so i actually put the link in the overlay the overlay is an abs once again absolutely positioned empty container that covers the entire thing and then it has a gradient on the bottom transparent again transparent is like so you can see all this stuff up here and then down here and it’s using a calc formula to essentially say okay we’re gonna go a hundred percent the height of this container but then we’re gonna back off uh 70 pixels okay um and once again bg ultra dark i’m just throwing in that same that thing just keeps showing up all over the place um because it naturally blends the dark into the dark i mean i don’t care what the colors are just blend the dark into the dark that’s it um and so then i put the read more link just slapped it right on top of it inside of that overlay box because if you look at the uh layouts it’s absolutely positioned it’s an inset at zero so it’s a it’s just a giant box uh and then you can use just flex controls right so i can say align end align center drop a drop a link in there and my link appears like it’s just floating uh inside this overlay somewhere which it kind of is but you know it’s just a giant box with stuff aligned to the bottom of the box uh including the including the gradient okay let’s keep going down this is the exact same columns thing this is very interesting you know i was faced with the job of putting in what is this one two three four five six seven eight nine ten eleven twelve three like 16 images like image image image image image image image image pop go to the media library library get that that one and that one and that one and that one and that one and then do the alt text and the alt text oh my god manual labor manual labor no no we don’t do manual labor in 2024 we don’t do manual labor here we have dynamic websites we don’t we don’t do manual labor so there’s just one image and then i just loop through it well what did i loop through because there’s no custom post type for this or anything like this right so what did i loop through well let’s take a trip back here uh to the admin so we’re gonna go to media and we’re gonna see see it’s organized just organize everything um i think i had it called like here they are mock layouts so i have a folder of these mock layouts that i just brought in from from figma exports right and then i just looped through the folder that’s all i did i just looped through the phone you’re like kevin how do you loop through a folder well you can loop through you you should be able to loop through a folder in like any good content management system any content management system worth its weight and you know salt you should be able to do it you can’t do it in wordpress can you no no so but we have this plugin called happy files and it makes your very much media life very happy um and with happy files you can in fact loop through media folders and so if we go back to the builder and we go to our loop we can see that i’m looping through post type of media and uh then i come down here and i just select the fucking folder look all the folders which folder would you like to loop through well i would like to loop through the mock layouts folder thank you and then they just all appear and that’s fantastic okay um i created this inline buttons thing okay with a little auto fit grid so it kind of manages my my double wide we’ll call it a double wide buttons from the south double wise um okay what what happens to these double wides they stack right when there’s no more room for them i didn’t choose a break point i just said when there’s no more room for the width i want them to be let’s make them stack but let’s also make them 100 wide when that happens too um so that kind of all happens automagically um bento grids how are we doing these bento grids selling points grid it’s a three column grid okay and um what else did we do anything do we do anything fancy here yeah so at 767 and up we’re going to take the uh second child and we’re going to span it two and we’re going to take the third child and we will span it um two as well oh that’s in the third grid second grid something like that um so we’re just using it’s bento is literally just more columns than you need and then spanning things different columns that’s if you’re confused to like how do how do you bento that’s all you have to do to bento make more columns than you need and then span the items however you want them spanned within that grid um that’s essentially what we’re doing there oh oh very interesting though if you so if you know anything about web design you’ll look at some of these things and be like wait what what hey whoa whoa hold on what um so for example this right can you get a border that gradients itself away but also doesn’t appear on the bottom like can you get a border that just does this side of the box but also fades itself out yes yes you you can it’s not the easiest easiest it’s not the easiest to do i did it on this box right here i’m probably going to extend it to most of the boxes on the website um but i needed to get it done on on this box first and so what we’re going to do is we’re going to use first of all the box itself has a linear gradient on it a lot of gradients being used here okay so we got gradients on the box itself then we’re using a linear gradient as a mask and we’re kind of manufacturing a pseudo border type of thing with this with this technique probably something that’s going to require its own video um but i did in fact achieve a border that um gradients itself into nothingness which is which is great um okay i think that’s all you guys need to know about that section this section is very simple ah let’s look at our little pricing table situation here okay so with this one obviously we want a featured uh part of the pricing table now dom wise the lifetime option is last right it needs to come last in the dom because it makes sense to go you know small to large freelancer then agency and then lifetime but visually we need lifetime to be in the middle and visually we need lifetime to be you know bigger and things like this so we can take a look at how now oh notice this uh i don’t think you guys can see that because of my big head uh let’s collapse this and then let’s go into this section right here and you’ll see that this is actually a template it’s a it’s a template part we might call it right because this pricing table also happens to exist on the pricing page if i go to the pricing page oh you see it right there come on just talk just talk the way you talk that’s that’s decent copy i think just talk the way you talk right um and you know if you’re watching this and you’re not using frames i’ll just say manual labor is for chumps right it is time to put frames in your stack uh okay look there’s the table again how many versions of this table do i want to manage well the answer is one because we don’t like doing manual labor right um so that’s a template part too so you just plop it in wherever it’s needed and and you’re good to go okay let’s go manage the template so if you click on template you should get this little edit template link and it’s going to take you into the template to edit it and here it is okay let’s take a little look see so it’s we’re calling it pricing grid this was a frame guys this entire website was built with frames i know you can’t tell by looking at it but the entire thing was built with frames it’s just it’s how you customize them it’s what you do to them to embellish them once you put them on the page but this pricing table is is good to go let’s look at how it behaves so pricing grid three column grid that should be obvious to anybody um you come down here and we’re selecting the second element right and we’re setting it to be in the end and then we’re taking the third element which is the featured one and we’re moving it to order one which happens to put it in the middle and then in pricing card here we’re doing some other things like the third child oops don’t want to do that the third child we’re giving it a linear gradient background well remember the third child is lifetime okay because you got to think in dom you’re not thinking visual you’re thinking in dom order dom order lifetime is the third thing that’s the featured thing um and so we’re taking that third child and we’re giving it a linear gradient background we’re giving the heading and this is look at look at where bim is coming in to help me right where i’m just able to use dynamic root variables and then just put in the extension for the element oh i want to do my heading uh my header icon okay um so i’m changing the size of the icon i’m giving the heading larger text all with variables it’s all tokens there’s very little decision making you’re just token token token token token token token token um oh look what i’m doing i’m taking the button any button any button that exists in that featured box and we’re just adding a box shadow to it what box shadow were we adding well i mean of course we would add just the one from automatic css and just box shadow excel just it’s there it’s a token token everything is a token token token token uh very little very little thing i don’t like to do manual labor and i don’t like to do a lot of thinking about values for what what should the value be should 32 pixels 48 pixel what should it be and then those values have no relation to anything else on the website and why do we want to we don’t want to live that life everything is a token in 2025 and beyond okay um you can do math with tokens and tokens actually come in super handy when you need to do math because um you’re just mathing relationships you’re not mathing actual values you’re just mathing relationships to things um okay yeah there’s there’s a bunch of math in there great fantastic so um yeah pricing table is done all right let’s go into some other parts of the website we will stop and do some questions here in just a second let’s go to the layouts tab let’s take a look at this remember what i said oh look there’s that overlay thing again it’s being used again but just in a different way this these floating things with the vignette that’s the same from the from the hero section i just brought it into here it’s actually a it’s actually a layout that i saved i could just bring in to any section you can just plop it in and it automatically makes the gradient it automatically makes the opacity and then i just determine where the things in it should live within that little box um it’s really great so then i come down uh interestingly enough one of the things i also wanted to experiment with with this build is can i is it plausible to get rid of wp grid builder facets can i go native bricks facets so these are native bricks facets that you see right here they are sticky when you come down because who wants to leave their sorting opportunity up there at the top where you can’t use it anymore nobody wants to do you want your sorting opportunity to come with you as you browse the the gallery i would think so we made that sticky um here are the the cards right here this is just a loop now we are in the process because here’s here’s a big big challenge big challenge we’re still figuring it out we’re still working on it these layouts don’t exist in this website they exist in a source website called bricks.getframes.io right it’s a subdomain and we want them to stay there don’t come here don’t clog up this website with all that stuff because there’s like a there that i mean think about all the bim classes for every frame in existence i mean that’s a it’s a little heavy site over there right uh we don’t want to bring that junk into here we just want to grab some things like i would like to grab the titles of those things i would like to grab the featured images i would like to grab the permalink i would like to i don’t want the data i don’t want the data of the layout but i want some some things i want the taxonomies that are linked to it and i want to i want to automatically pipe those in and anytime a new frame is added to that source website i want it to show up here in this grid and not only that but when people click on it like let’s say cta section sierra look what we get now and you this wp i’m logged in on the source website so you’re going to see the admin bar most people won’t see the admin bar unless they happen to be logged in and if that’s the case we have a security problem on our hands uh but yes that’s why you’re seeing the admin bar right here but check this out we have a this is a live preview now remember i said with the old frames website big problem with no live previews now you get live previews and i built this with my newfound javascript skills um if you haven’t been following the learn javascript with kevin series in uh the inner circle coming in very handy this is uh this learn javascript thing continues to come in insanely handy um so i built this little thing which is actually quite easy if you’ve done any of the tutorials that i’ve done so far uh in the inner circle you could probably do this yourself um it’s it’s it looks more you know than it is it’s it’s you know behind the scenes it’s not super impressive uh but it gets the job done right and i think it’s pretty pretty slick and then i don’t i don’t think we need all the other documents i mean it’s it just it slows us down from putting more things in the library we can move faster if we have less data to worry about so this is an iframe and i just pull the link into the iframe and then it’s sitting in a container that i get to control the width of and you know that’s that so but imagine that all this is able to be piped in from an external website wouldn’t that be fantastic i think that would be so we’re still working that out we’re still still in the brainstorming processes of that but check this out i mean i am able to sort these this is native bricks facets which are fantastic show me my ctas there’s my ctas show me newest show me oldest it sorts those look i can click on button delta i can actually use the button i can actually use inside the iframe i mean this is great this is going to show people much more um of an experience of the frames than just screenshots right okay um let’s see setting uh okay those are questions i’ll get to the questions for sure all right um oh a lot of questions a lot of questions okay kevin is part designer too which helps the sites look good too it’s not just css um well yeah i mean the overall design is you know tommy did tommy did the design in figma i showed you guys the figma file right um but there there is a concept like i believe you do have to have some design instinct to bring that over properly right especially the more intricate it gets um if if somebody can’t see design some people can’t see design right they can’t see balance and spacing they can’t see balance and typography like their brain doesn’t really compute these things and so the designer will have a lot of details um and then the developer will put none of them in because the the the developer can’t see them like i don’t oh sorry i missed that i you know like border effect like that that faded border kind of thing um and some things are very important to the overall aesthetic and if those things aren’t brought in then yeah uh and then some things i’ve made decisions on myself like i i go rogue i’m known to go rogue from time to time um and i’ll bev some shit up i’ll i’ll just do it i’ll just do it based on what i think it should be done right um sometimes that works out well sometimes it it you know works out mediocre but it’s okay i own it it’s good to go oh this little divider thing let’s take a look at that and the glow oh i like the glow and the little divider and the glow and the divider are are linked they they are they are linked let’s go ahead and go to let’s go read these header templates okay yeah we want it we don’t want to save i don’t know what i did in there we don’t want to save let’s go to edit with bricks i’ll show you an example of the border thing that i was talking about earlier too uh let’s go down to those cards right here as an example review card review card style um am i doing it on this one i might not be doing it on this one probably not doing it on this one testimonial grid overlay yeah one that i grab i wouldn’t be doing it on um i thought i did it somewhere though let’s let’s go css border border okay you can’t the problem is you can’t do it in the in the border section of bricks uh we already looked at that one maybe on our oh that’s a template so i can’t i gotta i gotta go the magic area to look at that one right god i wish i wish we could just get rid of magic areas completely uh not have to deal with those okay let’s look at the glow that’s what we came for so i did decide probably best to go with a utility class approach to this glow situation so i created a bg double dash glow and i just put a overlay gradient on it so what is our gradient it is primary dark trans 60 and it is transparent you see this a lot in you know if you don’t use transparent as a value you need to get on it like you should be probably using transparent as a value in colors and gradients more than you more than you do if you don’t use it at all something might be wrong something might be wrong but it’s another circular gradient but this time i said top center so that’s why it glows in the top center doesn’t matter how big the section is it’s stuck to the top center okay and then if we go down to css look what we’ve got going on down here so a border top one pixel solid red i’m sorry let me go block start i’m just got a a little ocd about that these days um border image linear gradient to left look at this border image border image is how you create some gradient borders okay if you don’t need crazy masking and all that stuff if you need just a gradient border border image is your friend and we go lady linear gradient to left look at this what i say if you’re not using transparent and you’re in your uh your gradients you probably need to start doing that sometimes transparent to primary trans 30 to transparent and it gets me this um you got to get out of the builder to see it it gets me this thin little nice bright primary colored divider that also fades into nothingness on the edges and that is paired with the glow so when i go bg glow i get the divider and the glow all at the same time why are those paired together because the glow looks awful if there’s no visual division before the glow starts okay so those two things naturally i made the decision that they should live together in that one single class and so i should probably show you um so we pop that off no glow no border if we pop it on we get the glow we get the border instantly wherever i want that to show up it’s just a utility class away okay all right let’s go look at we did layouts components is not ready yet let’s go look at the docs we did this section we did a single frame okay components is not ready yet resources let’s take a look at docs okay learn how to use the frame suite of web design tools we got a little this is just an archive template let’s go ahead and click on this and these are frames all these cards are frames that i’m using everywhere um as you can see there’s some test dummy data in here but we’re able to by the way you can’t do this in most page builders you can i’m let me open it i’ll show you this frustrates the hell out of me in other page builders can’t do it can’t you just can’t do it um i’m querying the terms of the docs so custom taxonomy and i’m not querying posts uh i’m querying terms you can’t do this in gutenberg you can’t do this in as far as i know most page builders the last time i checked most of them can’t do this but i’m just querying the actual categories um i’ve shown this before multiple times in bricks but i like to point it out every time because it’s you know it’s a good thing about bricks and then here i’m actually querying the posts on this archive page and then if i click on the post we’re going to get this we have a table of contents that’s sticky and obviously this is just a kind of dummy data for right now but that’ll be fully built out when we have a fully built out document and then let’s look at just quickly what’s happening over here okay now both of these are open because this doc lives in both of these categories but this is yet another thing i would not be able to do in most page builders let’s go to um edit this template so let’s go to bricks templates this is going to be a doc single it’s probably what it’s called doc single somewhere in here um let’s edit with bricks let’s check this out and this is actually a frames component okay this is the frames accordion that is being used as like a accordion navigation okay which is which is another interesting approach so the first item in the frames accordion i’m looping and what am i looping here i’m looping the categories okay so i’m saying i want all the sections of our documentation that’s what i’m looping first so all of the actual top level part of the accordion that is going to be the accordion functionality and then when you open an accordion we have a body in here and then there’s another loop this is a nested loop and this nested loop is querying the actual docs the posts that are inside of that category okay how does it know it’s that category because you could do a taxonomy query and you could say um get the term id of the parent loop and use that for this loop okay that’s that’s essentially what’s happening right here and so this will query the actual articles that are in that category and when all is said and done you get this you get a little accordion navigation sitting over here and it’ll just build itself so as we add more categories and we add more posts it will just it will manage it’s fully self-managed i don’t have to worry about it ever again um so that’s another kind of again dynamic aspect of the uh of the website um i think that’s it let’s let’s go to questions i just kind of did a uh speed run through that let’s go down and check on chat and let’s get into questions here i just have to plan that on tuesdays from 11 a.m to 1 p.m i’m not going to get much done that is a good thing to plan uh the boulder put if you don’t have this on your calendar my friends i mean what are you doing with the i i i mean most people would say this is the most relevant way to spend a tuesday afternoon in this industry in this industry okay um i mean you see the numbers on the live streams we’re not even close to where we’re eventually going to be we’re still very niched out right now we’re that’s about to change very soon we’re going to be very expansive um the entire wordpress ecosystem will be paying attention and taking note we are the the fundamental mission of digital gravy if you if you didn’t know uh we got to get you up to speed on it is to change the landscape of front-end development like fundamentally change the landscape of front-end development not just with techniques but with tools with education with all this stuff and and we’re doing that and we’ve made good progress on it but we’re just i’m still in my warm-up suit i haven’t even taken off the warm-up suit yet um and when and when it comes off things are going to get anything there’s something underneath don’t worry okay uh but things are going to get much more exciting all right okay i like the uh i like the fire let’s go to questions um and i think today i can actually kind of monitor the chat while i while i get into the questions um when is cpt3 do delighted with one and two cpt3 what is this a was this fucking star wars a c c c cpt3po what what is uh i don’t know what cpt3 is what why am i missing this reference what is clarify clarify david charles clarify what is cpt3 are you doing anything to track events in terms of funnels journeys and tracking conversions uh oh i thought i put that on the screen uh ask rob cooper we will yeah well on the old website we are but on the new website we are as well what i should probably do is um we’re using user maven so that that can probably be my run through of user maven is how some of the tracking is set up okay uh is etch a page builder we’re not answering any questions about what etch is or is not uh you will find out very soon the launch oh i have official dates by the way i’m going to email them out if you’re not on the waiting list the waiting list is about to get the official dates but there’s going to be a series of three live events and they are at the beginning of september and they have dates and they have times okay now to get this information digit right now digitalgravy.co click on etch put your email address in there you won’t miss anything okay but i’m about to send out dates and times for the first three live events uh so get ready for that uh if you import the same frames without classes already named after doing auto bim i tried with frames and bricks and it didn’t work came in with my bimmed ones okay so if it comes in with the bimmed ones you go to automatic css frames and is it in here additional options uh bricks template gallery enhancement it might be in options by itself so maybe that’s in bricks yes yeah because that is part of bricks more than it is part of frames it’s right here import original classes for templates you need to have that on so if you have that on it’ll import the original frame if you have that off it’ll import your customized version of the frame and so you decide how you want that behavior to be okay um all right what are the plans for the future of the inner circle will we still see some agency content now that you are a software company yes you will still see agency content but my plan for it is we are going to branch out much more into uh sales always and sales applies to anything whether you’re doing agency sales or product sales or just sales sales and sales um marketing in general stuff okay a lot of people have asked me i’ve gotten a lot of insider stuff about like um just various you know copywriting marketing in general how how you’re you how you use social media more behind the curtains of general like how do i get my name out there personal branding how do i get my company out there how do i get my all this stuff out there um there’s gonna be a lot of content related to that there’s still gonna be a lot related to things like pricing stuff that’s you know cross industry um or cross discipline seo still could still be a big thing um digital advertising can still be a big aspect of the content and education there all of this stuff because what i’m doing to promote frames and build frames and automatic css and etch and inner circle and on and on and on can be taken it’s all the same fundamentals and you could take that and apply it to any of your clients right in the services that you provide them i i think that one of the big things people have to grapple with is this idea that in 2024 you can’t just be a web designer you can’t just be a web developer you can’t just be a page builder assembler like oh i assemble i assemble pay i can’t even design i assemble pages in a page but like you’re gonna get left behind forgotten ai’d out of the picture to death okay you have got to get and i’ve talked about this ad nauseum okay you have to put yourself in that consultant role you have to understand how online marketing works you have to understand how these pieces of online marketing and advertising work to actually get businesses results yes you have to know how to build the site yes you have to have design eye but you also have to have all of this other discipline okay you have you don’t have to be an expert at copywriting you have to be an expert at digital advertising you don’t have to be an expert in all these areas but you have to understand them enough to consult with your clients on them and understand how these things all tie together email marketing and funnels and analytics and and we could just go on and on and on and so all of this stuff and how it comes together is going to be a big part of of like you know that’s that we we’ve been teaching that stuff in the inner circle and we’re going to continue teaching that stuff in the inner circle i’m also still looking for a designer who is also good at creating content like just legit ui design right to bring them into the inner circle to do an entire design series in the inner circle for those of you who want to who think you think you have an eye for design and you think you just need to build your skills more or you need to learn how to use the design tools like figma and auto layouts and and components and figma and all this stuff um that’s going to be for you right so that’s another area that we’re looking into javascript we’ve already started learn javascript with kevin um taking it’s everything is about taking your skills in these areas to the next level the next level the next level um and that’s all going to translate down to uh pricing how much you’re charging how much you’re making how efficient you are how scalable your projects are on and on and on and on and on so that’s still another area that’s literally just getting started i think we’re about to cross the 2 000 member mark like when i think about inner circle i think about 10 000 members you know like i think about it’s it’s like i said the warm-up suit is it the track suit is still on um we we’ve purposefully done what we’ve done within a a relatively small niche and we’re trying to grow that niche we want bricks to be big right we want we want these niches that we’ve done work in to be big um but you know branching out the branching out is to come the branching out is to come so it’s it’s going to get even more exciting uh etch is going to replace google is that correct no no derek no derek you’re 0 for 2 derek you’re 0 for 2 um all right let’s go down speaking of wordpress cms drawbacks do you use a bulk cpt create edit plugin like wp sheet editor uh something wp acf should have natively uh no what i do do is this though so if we go into frames layouts um i use uh what is it wp admin what is it called what is it called uh everything’s got names there’s so many names to keep track of come on plugins admin columns pro um so admin columns pro does does stuff like this where i can even you know remove a featured image add a featured image let’s see where did that one go now i’m not gonna be able to find it because i deleted it um okay let’s go to why isn’t it no i swear it was up here with with those um but now it’s gone oh no that one was imported when we try of course that one was imported when i tried to do the initial import uh to test and see if a manual import would work well that can okay i’ll fix that in a minute it’s not a live site that’s the good news um but you can see i can inline edit these things did it save that it probably saved it yeah because even if i refresh it won’t come back um i can inline edit the categories i can inline edit the types so i don’t have to go into every layout like all right go in do the categories come back out go into the next one do the cat and come back out and i don’t have to use this mostly useless bulk edit feature right here inline editing is very very very nice the only thing i wish it had which maybe it does and i just it skipped my my brain is like drag and drop ordering and even if it does i think maybe i’ve tried it before and couldn’t get it to work i don’t know i don’t know but that’s kind of the only thing that’s missing from this right now i would like to be able to just drag and drop their order okay acss 3.07.1 um where did you see what is that a question i’m not i don’t know what the question is uh if you’re not up to speed we’re doing we do a release every single week so there’s a new acss update now most of it is uh stabilization it’s like how can we make it more stable it’s we prioritize fixing bugs we prioritize optimization we’re not just littering it with oh every week there’s new features um it’s it’s mainly just focus so don’t be afraid when you see oh another release another release we’re on a cadence of at least once a week sometimes you’ll see two a week right um they’re now at this point because everything is getting very very stable much more just like a couple bug fixes here a couple improvements here um yeah so don’t be scared can you show us the best practices for using custom font uh that’s not bricks i’m using bricks font management system so custom fonts there’s graphic right there here’s caveat which i was using for let’s go back to the front end this right here that’s caveat and so i’m just i’m just loading them in and then automatic css is what puts them in the css by just calling them right here so good to go when will we see a final acss logo i was browsing the site and saw the acss powered card and it got me wondering um how that yeah that’s still in limbo it’s it’s still i don’t like the original one and i don’t like this one and um i’m i’ve been debating whether we even need one whether it should just be the actual text because it has like a badge which is kind of like the icon logo and what we’ve done when we just needed an icon is we’ve taken that little badge and then just made it say acss huh yeah i don’t know it’s not as important as people think it is it’s just it’s just not um okay question setting colors is tougher than needed in 3.0 because there’s no right click acss access uh don’t know what that means setting colors is tougher than needed in 3.0 because there is no right click acss access uh there is though i don’t know i’m not quite sure what you’re referring to uh look at my pages area guys um this is the automatic css site awful i mean awful um let’s go to look at the new frame site as a as a comparison uh when we stick to the principle now a lot of those were just um you know not even published pages but let’s go to the pages area here look at how tidy look at how tidy this is in the new frame site i mean we got home blog why do we have i didn’t even want a blog page i’m forced to have a blog page because the great cms of wordpress doesn’t have a blog archive page doesn’t regular posts there’s no there’s no archive page for regular archive template ability for um regular you you have to make a page for it and you and this is verified by going to settings and reading it asks you what the post page is you have to make a page this is why this you see why it’s frustrating they want to celebrate 20 years this is 20 years dog my guy this is 20 years right here this is what we get after 20 years i gotta make i gotta make my products a taxonomy after 20 years to work around the idea of relating products to things this is this is what we’re celebrating 20 years in okay i don’t know why i get new york when when when i when i when i get when i get critical my that’s a dumb feature on this chair why why does my armrest need to do that um okay look how tidy that is that’s so isn’t that doesn’t it how calming is this on you when you open up have you ever opened like a client site they’re like i don’t know what happened in there and then you open it you’re like my word everything’s a page there’s 150 pages in here uh look at how tidy look at how tight look at how tidy tidy this is uh i feel like you know there’s some level of of psychopath in people who prefer everything like i’ve heard people like i don’t want to do the cpt thing i just make everything a page i love that approach like whoa okay all right that’s a red flag i i would think um look at i mean how could you not like this prefer this look how tidy and organized this is it should make you feel good you should get the warm and fuzzies inside okay we’re still doing questions i do have my chat down here i can kind of i can kind of peek in on the chat yeah steve deacon says hit that like button hit that like button okay um is there any documentation on locally scoped variables no because the idea of a locally scoped variable uh if you name them properly so we have a principle of not abbreviating them and when you don’t abbreviate them you can read their name and know exactly what they do okay um now what i should probably ask uh alex put in a super chat okay thank you thank you alex for the super chat we’ll get to that um so where were we document oh locally scoped variables if there’s any in particular that you’re confused about let me know uh we try to make them as obvious as possible if they’re not just super obvious glaringly obvious then maybe we need to improve something there um or if you have specific ones about maybe inside of the framework like with maybe button locally scoped variables or if you just have another general question about locally scoped variables how they work or whatever uh i’ll be happy to clarify just add to your question um some some context is there a list of available acss mixins good good good good question uh there is documentation on mixins automatic css.com slash doc slash mixins i’m just gonna guess um well okay good guess so yeah like breakpoints and media queries text and headings padding and section padding uh button mixins i wouldn’t call this complete though it needs to be updated because more came with 3.0 um and the reason more came with 3.0 is because let me go here uh because of this area it used to be you could only use mixins if you had like wp code box and you used our import files and all of that in automatic css global sas area the mixins are automatically they’re just available so you could just go straight away and use them no setup required if you know a mixin um so being that they’re more more prevalently usable now we will make sure the documentation is up to date on them plus cheat sheet see how recipes are part of the cheat sheet i’m gonna put a mixins area in here and then the mixins they’ll be right there in the dashboard with you won’t that be nice they just live with you wherever you go and you could just look them up and uh yeah that’ll be that’ll be the best scenario so that’s that’s coming for sure in a future update do you plan to create your own nestable menu element sorry if that was already covered um it’s on hold because we have this thing called etch that’s massive and it’s great it’s great it’s fantastic and we don’t we don’t have time to mess around dink around with menus right now uh we have bigger fish to fry so to speak and so we got to fry that fish and then maybe maybe we will get around maybe you will see a menu uh because i will tell you okay as a product like a product opportunity there are no good menus in the wordpress ecosystem they all suck they all suck every single one i’ve tried sucks um all the ones in the build now you know maybe you could say well that native one in breakdance is pretty decent okay that doesn’t do me any good i don’t use breakdance that doesn’t do me any good okay the ones in wordpress that i could plug and play into any environment those all suck um so it needs to be done like somebody needs to do it uh and if you don’t do it by the time i get to it i will do it uh but i’m just putting it out there i mean it is a good product opportunity if you can do it right okay let’s see uh i haven’t looked but i’ve wondered is there anywhere to find all the variables you use yeah yeah yeah for sure uh for sure go automatic css um see this cheat sheet sheet right here variables they’re all right there literally every single one you can search for them um it’s all good there did sheet sheets baked into the dashboard now which is another you know just great benefit of the whole dashboard situation okay let’s get to alex’s uh super chat initial thoughts on build darius uh i answered this on the last live stream i they told me not to look at it until the new ui was available now the new ui is just now available i’m a busy person so i haven’t dove in yet to look at it so i really can’t say anything about it um best of luck to them i know that you know build darius has been around for a while it’s had trouble getting traction and momentum for various reasons uh that’s all i can say right now best of luck i haven’t looked at it specifically to be able to give any opinion other than that okay when is acss 3.071 being released well it’ll actually be 3.08 and it’ll be on thursday at around 3 p.m in the afternoon because that’s the cycle that we’re on okay let’s see is it possible to add breakpoint viewing like mobile preview and desktop preview while on the acss options panel in the front end so that we don’t have to be inside bricks to do that oh you mean um like maybe here maybe some controls so essentially so that you don’t have to do like like this i mean this isn’t all that difficult you know like you just shift uh what is it command well it’s different in every browser but in arc it’s command option i and then you could just do this right yeah it’s pretty nice it’s not a complete disaster when you when you when you bring it down okay oh oh oh that’s pretty nice looking pretty i mean for now i i really haven’t even looked at i’m as i’m i’m seeing this for the first time almost uh no i haven’t really done all that much a lot of it because it’s built with frames and they’re they’re made to be responsive right so it’s like you know i’m just now looking at a lot of this for the for the first time i’ve seen the uh you know this area needed to be done manually the pricing grid needed to be done manually but for for only five six days into this thing like five six days in i mean i’ve got i mean look at this we’ve got we’ve got all of this we’ve got the layouts we’ve got faceting we’ve got to go well i deleted that image we’ve got we’ve got this whole situation going on we’ve got our docs system all set up and going we’ve got single docs and we got we got our products we got products we got we got these pages i still got to do i think we even have a blog oh you need to see the change log too we didn’t even see the change log did i even i don’t even know if i did the change log let’s go to change log oh look at that what we’ve been up to look at this oh so nice this is driven by a cpt too which has relationships to the product so each product can have its own change log naturally naturally because of the architecture um so got a change log in there every change log can have its own page now look at this it’s fantastic um which that doesn’t even exist on the current site right now which means we could link to a specific change log entry look look at the url structure very clean change log new frames layouts i can even put i think i can put the name of the product in the in the url with this architecture haven’t verified that but i think conceptually i think i can um what else what else oh uh did we do anything with the blog yet i did have a blog page in there i saw okay yeah it’s coming along it’s almost there they don’t have featured images this girl is meaningless to our product but it’s a good placeholder that was just a frames blog post i just slapped that in there and it’s just kind of done i mean to be to be five six days into a into a project like this with with this level of detail involved in the design too i’m i’m feeling pretty good about it i’m i’m hopeful that maybe another week goes by and we’re we’re ready we’re ready to rock and roll okay um i i don’t know about the mobile viewing question i i think command you know keyboard shortcut and do this right you can even put in things up here you can even choose devices up here um yeah i i we’ll let people vote on it if if people think that’s a good idea go post that in the community and and if everybody’s like no no no kevin you’re not you’re missing it you’re missing it we got to have it okay then we will definitely consider it okay oh oh erling says part three of cpt’s templates loops and logic yes that is that is coming for sure and it might be a little painful to to keep going on that series now that i’ve verified that this architecture could be a pretty pretty badass architecture um i got to finish this project out get it get make sure there’s no deal breakers okay um but you know that that series might have a little twist to it okay uh can you show where to put the script for custom image sizes the ic without wp code box i tried just put in the custom theme code but the new image sizes just don’t show up for me um it should work in bricks’s little area you’re saying you did this and it doesn’t work custom code down here uh oh no no no because it needs to be in it needs to be in i believe that’s a functions.php script so that would be theme file editor theme functions probably try right there back up your site before you touch that area you could white screen yourself uh if you’re not careful so just a little heads up okay how did you implement the viewport preview iframe okay we can take a look at that no worries let’s go to layouts let’s go to feature card dallas and let’s go to edit with bricks okay so i created this thing called frame preview and it’s got breakpoint buttons that live up here breakpoint buttons and then a breakpoint buttons breakpoint button and then we have the button icon and we have the button label because this is by the way um look desktop preview you see you gotta you gotta cross your t’s and dot your i’s you got a little accessibility in here because what you want i actually actually haven’t even tested this yet cover your ears voice over on our desktop preview button tablet preview phone preview tablet preview desktop preview tablet preview voiceover off you gotta cross your t’s and dot your i’s my friend right i can keyboard navigate this all right let’s get to a layout that actually we can we can look at um let’s go to feature section dallas okay so there’s our little layout look at this bang bang but look i can keyboard nav it look at that oh my gosh look at this look at this okay and if i was on a full screen reader it’d be announcing them it’s great right okay let’s get back to how we did it so i keep saying we i don’t know i i’ve done all the development on the site i do say we could you know tommy designed it i just naturally say we um so breakpoint button because i i and i mentioned that only for the reason because there are anonymous trolls who like to come around going kevin doesn’t even build anything i mean i mean i could do like hours of live streams and um build the acss website i get you know build this and kevin doesn’t even build anything he just talks this is all he does talk okay all right okay they’re always anonymous right fucking katie 023334 fuck you katie fuck you okay all right here we go breakpoint button uh make sure it’s actually a button you don’t want this to be a link we’re not going anywhere okay you want this to be an actual button um like i said icon and text in here how do you get the text to be hidden automatic css you just throw a class on there called hidden accessible and then it does what it needs to do and it puts this little badge right here this little a in the builder only to let you know hey by the way uh my guy there’s hidden text there that you should probably remember um because otherwise anybody that comes along to edit this they don’t know that it’s hidden it’s hidden guys right but automatic css goes well i mean people need to know in the builder that it’s hidden so we add this little badge see cross your t’s dot your i’s a lot of little details a lot of little details people don’t understand um all right javascript so what we’re doing let’s go back to the button we see attributes this is key so there’s an attribute called data breakpoint button and it puts the value of the breakpoint like on the button like attaches it to the button okay in this in this data attribute so this one’s 100 and if i go to this breakpoint button you’ll see it’s 768 and if i go to this breakpoint button you’ll see it’s 480 pixels okay so if i need to add another breakpoint i can just change their values right here in these data attributes and then the javascript comes in um and essentially what we’re doing is we’re grabbing those buttons okay you got to loop through them and then you’re we’re adding an event listener for click so we’re waiting for a click on this and then we’re getting the data attribute the value of the data attribute and then we have a function called change breakpoint which essentially just takes that value out of the data attribute and adds it to the width value of the container because we selected the container so we have that function takes the value out of the button and puts it on the container and voila and then you use a little um i told you it wasn’t it wasn’t that like you know behind the scenes it’s not that impressive it’s not that difficult it’s fairly basic javascript um and then i just transition the width 0.3 seconds ease out and then it goes just slides right it doesn’t jump to the breakpoint it just slides in between super easy to do with a width transition and that’s it that’s the end of the that was the end of the story okay let’s move on i want to check chat too as well uh danielle says this is bricks correct i’m a new subscriber to the channel well welcome danielle good to have you i love having new people on the channel you are in fact correct this is a bricks builder yes um okay be cool if you could drag from the sides of the inner frame and have it show pixel width as you drag sam we got to start somewhere sam okay i yeah that would be fantastic okay um would i have to so this is already a big improvement over what’s currently there right so we start and go in increments and when i have time and resources i’m i’m kind of busy you know uh i got a lot going on so while handles and things will be nice they are to me an embellishment right it’s like okay um not to mention you could just still command i the thing and and probably do it so yeah maybe maybe we’ll do it maybe we’ll do it maybe you know i like to do things when i get free time i’m like yeah i want to try that javascript javascript thing i want to figure that out how can i put handles on it how can i make it draggable yeah that would be a good exercise but right now i’m focused on getting this website out the door and handles and badges with dynamically changing widths doesn’t help get this thing out the door to the people all right i am a i’m a man of the people i’m trying to get the thing to the people okay uh so i do love your idea but we got to get on the same page you know what i’m saying okay uh is that seo press that i see no i don’t think i’ve ever used seo press ever i know i i hear good things i hear good things but i personally have not used it all right how are we doing on time too we got 10 minutes trying to i’m trying to light speed through these questions uh why don’t we set up a fun challenge where we recreate frames when it’s done um yeah you you could you could do that uh post an inner circle posted a plug-in he built for mapping api data to cpts maybe that can help somehow in the connecting the two sites i will check it out thank you uh how are you implementing huge icons into bricks websites uh with the icon element that’s it i go to here i’ll show you it’s super dumb it’s super uh it’s just not exciting in the in the slightest so media i have an icons folder and there they all are so the ones that i use i export them from huge icons i plop them in here and then i use them as svgs okay um how are sidebars put together sidebars uh maybe you’re talking about the docs the docs area so because oh and maybe maybe what else has a sidebar let’s just do this there’s a well yeah there’s a sidebar right there um people think about sidebars in in old school wordpress terms i think they’re like oh i gotta hook into a thing called a sidebar no no no no no no no none of that i don’t use widgets i don’t use no no no no no we don’t need work we don’t need 2005 wordpress to make a sidebar okay um so let me go into the doc we’ll go into the template uh that’s a that’s a blank test let’s go to this one okay and let’s edit with bricks so i showed here the accordion menu table of contents over here but let’s look at the general structure so we have a doc wrapper that’s the section and then we have an inner okay and the inner is just a container but if we look at doc inner we can see that it’s just a grid and so this is interesting right 20 characters like what’s happening here so essentially column one is 20 characters the middle column is one fr but i use grid one because it has a min max function inside of it so it helps prevent any overflow scenarios and then i have the other sidebar being 20 characters and so it’s just 20 characters one fr 20 characters and that’s this little layout that we’ve got going on here and then i just call it a sidebar it’s literally just a block called a sidebar um and then inside the sidebar we have an accordion and then inside this sidebar we have a sidebar block we have a sidebar block because you need to group your content in the sidebar especially if you want one of those groups like this one to be sticky okay uh and then inside of that block we just have a heading and a table of contents element and i happen to be using the native bricks table of contents element for this i’m telling it to look inside of the doc article right here for h2s and that’s what it’s going to put inside the table of contents so fairly simple um it’s just grid is your friend okay grid does almost all things and anything that you want done layout wise grid can probably do it oh it needs to overlap it needs to do grid can do it it needs oh it needs things ever grid can do it okay and in the case small cases where grid can’t do it there are a couple things that grid can’t do i’ll show you one of those right here grid cannot really do this okay and how do you tell anytime this happens where content is is covering a gap probably not grid probably not grid um this uses css columns to do this uh which is not it’s not flexbox it’s not grid i know every page builder has a columns element because they like to confuse things um there’s something called css columns okay uh and that’s what this is right here i know it’s it’s confusing i i wish i wish people didn’t hijack terms that are already being used for other real important things and try to use them for their own things because that just adds to the confusion it just makes it harder for beginners we don’t want to make it harder for beginners we want to make it easier for beginners okay uh what do you think of sqlib in a database okay uh i’m not a database guy don’t ask me database questions i don’t i don’t i don’t i’m not a database guy are you using a plug-in for the docs toc good we just answered that question fantastic uh it is the native toc element in bricks what would be the look of a good cms in wordpress man i’d have to write an entire article on that uh it’s more than suggesting a question add icons to your cpt visually it helps i know i do that at the end i do that at the end i’m very much a just go like big big big things big thing big thing big thing and then i come back and i’m like medium-sized things and then i come back and i’m like small details that’s typically how i work um i don’t know to me to my brain it helps me feel like i’m making more progress faster i get more areas of the site done and then i come back in and i do the medium things i come back in i do the small things and i get to see things over and over and over again which helps me verify that they were done you know good the first time i don’t know it’s just my process that’s how i approach typically the idea of perfecting everything on like one page before i can move on to other areas of the site i will jump off a bridge um okay oh d123 says no right click in the acss panel backgrounds and text area you’re forced to go away from that area right click reference here is needed not really um i mean i yeah i’ve heard this argument before so let’s take a look at um one thing so let’s go to backgrounds and text backgrounds and text primary trans 10 um see this i can actually arrow key we need to get it with transparencies i get it but like i don’t need to know the names of all of the variables because i can cycle through them right i don’t need to right click them um i could just i could just cycle through look at i could like just determine hmm how do i how do i yeah let’s play with it right um so i yeah i get right click would be great here one thing you have to understand is the context menus is a separate application okay so we have to integrate two applications together the context menus are actually being completely rebuilt in svelte this dashboard is built in svelte we’re rebuilding the context menus in svelte once the context menus are rebuilt in svelte we can much easier integrate them with this dashboard so it’s just a process it’s not you know could we hack it together right now probably do we want to hack it no we want to make it seamless so it’s just part of the natural progression it’s not like i i feel like people keep saying this is like i’m some dark overlord that was like they will not have context menus over my dead body in this dashboard like that’s not what’s happening uh it’s it’s a technical it’s a technical thing and it’s a progression thing we’ve got to progress our way to that point um i’m not if we can get it in there and it and it works good and looks good i’m not opposed to it um but keep in mind there are some other things that we put in like like aerocycling okay doesn’t work on transparencies right now but it works on the main colors so that right there eliminates the need to even know the names of the shades now the other the other thing you have to remember is it does help like i would encourage people to not rely completely on context menus and cheat codes um there’s a set number of colors they all have the same names there’s a set number of shades they all the same names the syntaxes are the same across every part of the framework and so if i know primary trans 10 guess what i already know secondary transcend tertiary transcend accent transcend base transcend these aren’t like secret codes um they’re not abbreviated so you don’t have to they’re they’re the literal names of the things um so it should you know a couple projects in you should start to know them by name right there’s not that many of them so i i i know to a beginner that doesn’t help at all that doesn’t that doesn’t help right and anything we can do to make a beginner’s life easier we should do um but it’s also not we don’t have a magic wand right there it’s a it’s a lot of work to do a lot of these things so we have to progress our way there and so what i’m saying is in the meantime like don’t just don’t say i’m never going to learn the names of the things like kind of make an effort to like oh okay secondary trans 10 tertiary transit okay i understand the syntax right um because it’ll empower you more when you’re writing custom css another area where you’re not going to want to have to reference all the time it’s helpful if your brain just knows the thing and the name of it and that way you can just write your custom css and you don’t have to keep stopping to reference things um and people will say well kevin it’s easy for you you built the framework but i i yeah i built the framework but you have to understand that the framework is built on loops the only thing i know is the syntax for the names the there’s everything is looped in the in the framework so i didn’t sit there and hand write every class and every utility and every variable and that’s how i studied it i just know the syntax for things because i set up the syntax and then i let loops do all the work of generating the classes and the variables and all that stuff so i didn’t create them all individually i just know the syntax once you learn the syntax you will also know all of them automatically um it’s all it’s a syntax based framework like it’s that re it’s that way for a reason because memorizing all this stuff would be impossible when you know the names of the limited number of things like primary secondary tertiary accent base neutral and then you know the syntax and the names of the shape you know all the colors and all the transparency combinations right then and there so i i do encourage it’s worth learning this is a tool that you’re going to be using for years to come this is a tool that can make your workflow hyper efficient and the more you just know it the more efficient it’ll be even beyond what it does for you when you don’t know it so okay it’s about all we can say with that uh okay any date for frames for figma update uh how much is the gap of implementing frames and frames for figma is that in parallel your frames development is uh train is non-stop um so there’s going to be an update to current license holders tommy said within two weeks and he said that a week ago um or half a week ago i can’t i don’t my days all run together at this point uh but that will just show up in your account and you’ll get a notification it will send out an email and all of that hey if you bought frames for figma the new version is now available in your account it will then be opened up for purchase again um i got to go back and review my notes with the discussion on tommy uh either at that time or after the etch launch can’t remember which one we decided on i’ll go back and and check notes on that but at the latest um it’ll be in september right i think it’s it’s set for september post etch um so yeah but if you already own it it’s coming to you within like a week or so okay uh what happens when you click on the video on the home page does the overlay vanish uh no when you click on this button it’s not done yet but there will be a modal that opens bigger than that and you watch the video right there in a modal that’s the idea so this will fire a modal that uh takes over that area of the page okay all right let me go back to chat we’re gonna close this up and start to get out of here today hey 132 likes by my count on here which is pretty decent but if you have not liked the stream go ahead and drop a like people i do this because people tell me that they find these like inside looks where we go inside a real website we look at the architecture we look at how things are set up on the back end we look at the plug-in stack uh we then go into the builder we look at how the pages are assembled we look at the class strategy the styling strategy for various details they love to see this stuff that’s why i do it um so if if you do continue to tell me that if if you ever get tired of it let me know we don’t have to do this we can do other things we can spend our time doing many other things so if you ever get tired of seeing the guts of these sites um or the design strategy and the build strategy let me know let me know we can we can switch gears uh but for right now all the feedback i get is yes yes yes yes yes do it more more more more more so we’re going to keep doing it every now and then based on that i try my best with these live streams to tailor to what you guys are wanting and needing uh and it trends obviously right we went through a big trend of people wanted dissect other people’s websites like let’s look at the copy let’s look at the design let’s look at the layout let’s look at the conversion strategy we did heavy heavy heavy on that and then people shifted more towards we want to see your things right show us your sites and how those things are put together show us some live stuff uh in terms of building right like build some frames live we want to see that okay so we did some of that it’s up to you guys you guys got to give the feedback drop your comments send your emails uh and i’ll i tailor these streams so what i’m hearing on the streets i got my ear to the streets uh and that’s what we do all right i gotta get i’m like starving i i’m out of coffee uh i need water but i do love you guys i do love you thank you for the support i’ll be back very soon peace Thank you.