This right here and the alternating numbered process cards have been by far the best advanced tutorials I've ever seen from you. Really stepping up your game!!!
Brilliant! So much helpful training in this video that can be used for many different situations. Know I will need to rewatch this several times to ensure I glean all I can from it. Thank you again, Kevin!
Hi Kevin, Jeremy Waters here from the State 48 (aka - Chandler AZ). Amazing tutorial my brother, I hope there is many more to come! I feel like I know you from somewhere, maybe Federal Way WA or Seattle. I was an Elementor user for roughly 2 years, thanks to you and your videos I switched to Bricks in correlation with Automatic CSS roughly three months ago. Needless to say I will never use Elementor again, that is until I have to. So excited for the future! I used a line in a meeting that I learned from you that I'm calling the three technique. This "3 technique" helped me lock- down 2 new customers each paying me $1,000 per month on a 12 month contract. I'm literally turning Bricks built sites into a micro CRM's as we speak then selling it as a custom SAAS product/ service to clients. Your videos have added so much value to my service which ultimately pays my bills and keeps my family going. From the bottom of my heart thank you so much for everything you do!
Awesome video Kevin. I can't actually believe how much I've learned in one tutorial. Pretty sure I'll have to watch it again to take everything in 😄. Really appreciate you doing these and the effort it takes! 👍
You are a wizard!! So much fun learning with you. Still have to consolidate the stuff from 101 through practice, but maybe someday I’ll need this too :)
I vote for more videos like this one 🙋♂️ And btw.. that attribute bug not rendering in the builder is so annoying.. Bricks.. come on.. it was first reported back in 2022..
Wow, love it. Super clear and great concept. made possible by accepting the prevalence of :has() :) One question: Instead of using ID #monthly-option, would it be better to add a class .monthly-option and target that with CSS. I'm thinking you may have more than one switchable price section on a page, where ID's may not make sense?
@@Gearyco Hmm.. The class would only be an identifier with no styles attached. :has() looks down the DOM, so it shouldn't affect other switches. Anyway, just a thought. I agree that for most services there would only be one pricing set on a page. Although, I have seen pages with multiple products on the same page. For practice, I'm just working through building this out without following your video. Love the concept and overall simplicity. Thanks for your amazing videos.
@@Gearyco No, I just tried it. Using the same logic as your demo and same DOM structure. %root%:has(.period-switch--monthly:checked) .pricing-container--yearly { --display: none; } %root%:has(.period-switch--yearly:checked) .pricing-container--monthly { --display: none; } However, what I did not take into account is that yuo have to change the names of the Radio inputs on each set. Otherwise they all group together :)
Hi Kevin Sorry if the question is not entirely relevant to the topic of the video. But I want to ask, why in the web I don't see any use unit points "pt"? I've heard recommendations from good designers for example, in layout and spacing use points, for example, in Figma. But it's in the design. What do you think about points "pt" in web? Why this unit not used? or I'm wrong
@@GearycoOk, thanks. I was misled by video about design interface Apple Vision Pro, where are the designers from Apple show how they created the interface. And everything in (pt). So I'm a little confused and decided to ask. I can't write a link to the video because RUclips can delete the comment. but if you type "Design for spatial user interfaces" you will find.
@@Gearyco Oh... I come from a time period of using Notepad++ and then Visual Studio Code. I used camelcase so that I did not search and replace the wrong term. I still use it. I instantly know what it is when I see it. Lol
While the video was commendable, it's challenging to respect individuals who engage in deceptive practices, publicly disparage the very customers who generously compensate them for their services.
Great stuff as always... how safe is it actually to use :has? coverage is about 91% ... if people use a browser later than December 2023 no issues but we all know that many do not update browsers
![Diggy Graves - Red Vineyard [Official Lyric Video]](http://i.ytimg.com/vi/8Ro085T0mnQ/mqdefault.jpg)
Very very enlightening tutorial. Another homerun. Can't wait for Part 2.
Very impressive, well done Kevin 👍
This right here and the alternating numbered process cards have been by far the best advanced tutorials I've ever seen from you. Really stepping up your game!!!
Great tutorial and enjoy witnessing the logic behind the build to make things clear.
Brilliant! So much helpful training in this video that can be used for many different situations. Know I will need to rewatch this several times to ensure I glean all I can from it. Thank you again, Kevin!
Hi Kevin, Jeremy Waters here from the State 48 (aka - Chandler AZ). Amazing tutorial my brother, I hope there is many more to come! I feel like I know you from somewhere, maybe Federal Way WA or Seattle. I was an Elementor user for roughly 2 years, thanks to you and your videos I switched to Bricks in correlation with Automatic CSS roughly three months ago. Needless to say I will never use Elementor again, that is until I have to. So excited for the future! I used a line in a meeting that I learned from you that I'm calling the three technique. This "3 technique" helped me lock- down 2 new customers each paying me $1,000 per month on a 12 month contract. I'm literally turning Bricks built sites into a micro CRM's as we speak then selling it as a custom SAAS product/ service to clients. Your videos have added so much value to my service which ultimately pays my bills and keeps my family going. From the bottom of my heart thank you so much for everything you do!
💪🏻💪🏻💪🏻
Great video! I found really valuable the switch element accessibility and styling part. I hope there are more videos like this to come! 🔥
Amazing! I was blown away to find out that this kind of functionality can be created with pure CSS.
Top drawer, Kevin. Thanks for this tutorial. I liked this one very much. Looking forward to part two. Cheers, Kevin!
As always... Love it! #GoldenNugget Insight at 36:52 🤩 Never noticed this before!
Thanks for this, going to use it to build a Woo subscriptions product selection process.
Just get back to a second viewing to do the follow along. Well worth the effort. So many new concepts in using CSS to do things.
Awesome video Kevin. I can't actually believe how much I've learned in one tutorial. Pretty sure I'll have to watch it again to take everything in 😄. Really appreciate you doing these and the effort it takes! 👍
You are a wizard!! So much fun learning with you. Still have to consolidate the stuff from 101 through practice, but maybe someday I’ll need this too :)
Great guide! Thanks for sharing your knowledge and encouraging hands-on learning! 📝
Kevin ...you are the best....
🤗
@@Gearyco Kevin if possible, please make a tutorial on Bento grid ...
Great video! Thanks!
I listen to this when I work out.
I vote for more videos like this one 🙋♂️
And btw.. that attribute bug not rendering in the builder is so annoying.. Bricks.. come on.. it was first reported back in 2022..
I know! Can't believe it's not fixed yet.
Hey, I made one with the Tabs element, I will be glad to see Your approach !
Yeah, Very far from my frankenstein Tabs Nestable element content switcher 😂
Nice.. for pt2, how about some css opacity transform to ease the hard jump in transition between the two options?
Which hard jump?
@@GearycoHe might be referring to the price changes on the cards.
Great stuff, thank you.
Hi @Kevin Geary. What could be the reason that Lable did not trigered the functionality of the radio button?
Amazing video as always. Hey Kevin, can you do a video about your recommendation for good WP hosting? For agencies and personal websites.
I recommend gridpane
Love it!
36:52 Golden Nugget Moment
Amazing as always - Thanks. #Q if there was a third option of say quarterly, could that easily be added?
Yep!
Is part 2 coming anytime soon? thanks
Just watched the whole thing, I'm putting this on my website but is this easier in Javascript?
sometimes I do wonder if I should learn it.
Not easier, no.
Wow, love it. Super clear and great concept. made possible by accepting the prevalence of :has() :)
One question:
Instead of using ID #monthly-option, would it be better to add a class .monthly-option and target that with CSS. I'm thinking you may have more than one switchable price section on a page, where ID's may not make sense?
That would probably be rare. And I think if you use a class one switch will affect other switches. If you need multiple switches use unique ids
@@Gearyco Hmm.. The class would only be an identifier with no styles attached. :has() looks down the DOM, so it shouldn't affect other switches.
Anyway, just a thought. I agree that for most services there would only be one pricing set on a page. Although, I have seen pages with multiple products on the same page.
For practice, I'm just working through building this out without following your video. Love the concept and overall simplicity.
Thanks for your amazing videos.
If two switches have .monthly-option and .grid--yearly is hidden based on that logic, wouldn't that affect both sections at the same time?@@wpeasy
@@Gearyco No, I just tried it. Using the same logic as your demo and same DOM structure.
%root%:has(.period-switch--monthly:checked) .pricing-container--yearly {
--display: none;
}
%root%:has(.period-switch--yearly:checked) .pricing-container--monthly {
--display: none;
}
However, what I did not take into account is that yuo have to change the names of the Radio inputs on each set. Otherwise they all group together :)
@@wpeasy yeah, that too. So either way you’ll have to customize each switch I suppose.
Hi Kevin
Sorry if the question is not entirely relevant to the topic of the video. But I want to ask, why in the web I don't see any use unit points "pt"? I've heard recommendations from good designers for example, in layout and spacing use points, for example, in Figma. But it's in the design. What do you think about points "pt" in web? Why this unit not used? or I'm wrong
Because that’s a unit from print design that doesn’t translate over to the web in any relevant way.
@@GearycoOk, thanks.
I was misled by video about design interface Apple Vision Pro, where are the designers from Apple show how they created the interface. And everything in (pt). So I'm a little confused and decided to ask.
I can't write a link to the video because RUclips can delete the comment. but if you type "Design for spatial user interfaces" you will find.
@@GearycoThat’s a very good... “pt” 😅
I learned that IDs should be almost camelcase to differentiate them from classes. Example: #optionMonthly
.option-monthly
Is this wrong? 🤔
Yeah nobody uses camel case in CSS
@@Gearyco Oh... I come from a time period of using Notepad++ and then Visual Studio Code. I used camelcase so that I did not search and replace the wrong term. I still use it. I instantly know what it is when I see it. Lol
Just checked and you can't do this ( fieldset ) in Webflow with JS or custom embed.
That’s surprising
1:05:48 Underscore!! Lol
While the video was commendable, it's challenging to respect individuals who engage in deceptive practices, publicly disparage the very customers who generously compensate them for their services.
What on Earth are you talking about, Anon?
@@Gearyco😂
Kevin 😂😂😂
@@GearycoIt’s probably an A.I. bot.
Are you drunk?
Great stuff as always... how safe is it actually to use :has? coverage is about 91% ... if people use a browser later than December 2023 no issues but we all know that many do not update browsers
In this case it’s safe they’ll just see both grids at same time
@@Gearyco 🤣🤣