Again, great video Kevin! I managed a project with a dedicated team getting an eCommerce site to be fully accessible, know how difficult modals are too. Great to see this stuff is always considered and developed properly by you all. 😊
They overall well thought out and easy to use. I've always programmed it myself otherwise, which is significantly more time-consuming to customize for customers. However, I wish there was an accessible (ARIA) button that we could completely design ourselves.
You have made a very interesting solution. It would be very useful if you could restrict cookies through Bricks conditions and thus create Frames cookie consent. :)
Curious to see it used for Offcanvas / Nav and the controls available for animating on/off screen. Currently use Bricks Offcanvas but rely on GSAP to control it.
@@AutomaticCSS - Options to select Top, Left, Bottom, Right to open from. A field to input css transition and 'opening, active and closing' events applied to the dom would be fantastic. Appreciate using a modal is not really meant for this purpose.
In a nutshell.. this is MUCH MUCH easier to use to create an off-canvas menu vs Bricks new nav menu! Bricks new nav menu has got be the most convoluted pile of builder mess! That nav menu just to even get working you have to visit so many different builder pages / settings and to do ANYTHING dynamic with it it get's even worse. But with this I can use much simpler already known things about the builder elements and layouts and that's my off-canvas menu done without all the fuss. Why does Bricks not take this approach? I've noticed a certain few things (not many) about the inner workings of Bricks that make me scratch my head sometimes. And, that new nav menu is definitely one. This component definitely replaces it for me.. especially since I can build whatever I want in the modals div / container AND style it with no fuss. This is great Kevin!
@@AutomaticCSS I think july 2023 :) I already have client waiting and would like to start a new page using figma add-on and acss and frames together 😜
Really nice thanks for this video ! I understand this can replace the popup template tool in Bricks in many cases, but not if for example the modal has to be called in different places on the website right? In this case a template seems more adequate, or did I miss something?
Hi, sorry to ask it but is there any advantage to use Modal & Trigger when we already have these elements from Bricks Extra ? I believe that Bricks Extra has even more trigger options. (it's a real question, no troll !) thanks
Unfortunately the modal still doesn't have an option to be scrollable not within itself but as a whole element (with scrollbar on the side of the browser window not inside the modal). The scrollbar inside of the modal itself just sucks from UX perspective, sorry.
@@AutomaticCSS Yet I use the other variation every day with Bricks native modal and it's much more pleasant user experience when you can scroll the whole modal and not the inner content only...
Would it be better to make the Max Height of the Scrollable Modal 80dvh? This way the bottom of the modal will not be hidden on mobile devices' browser UIs.
Very good video. It looks very nice! I have 2 questions: 1) According to accessibility, is not good to have a "person" avatar, like team member, to open the modal, with their bio? (I mean, because is not a rea button) the righy way should be to have a button inside the team card with an "open bio" ? 2) to do something like I mention in 1), Can i use a query loop and inside it, put a trigger and a modal elements? And how can I link both of them, and at the same time don't affect the "other bios" modal's? Should I add a number, or a "CPT post id" as a final part of the trigger class and in the modal trigger class? like .open-modal-35563 ? thank you again!
Nice video, once again, Kevin. At ua-cam.com/video/hSRrklHbRlE/v-deo.html you mentioned using a literal html button element. Any chance for a quick and dirty example of this... maybe a quick video. The default hamburger trigger is nice if your using it for a full screen or modal menu navigation... but all too often one would like to have the trigger as a button. Maybe I have missed something, but having a hamburger menu in the middle of a page seems a little disjointed to me. I hope that makes sense. Thank you another FRAMES video. Looking forward to more of these. Cheers.
Thank you for considering making a video of how to trigger with an accessibility button with aria etc. to make it accessibility compliant. You're very thorough and could have easily glossed over the part where you mentioned you could use a link or a button and not mentioned accessibility. I'm learning so much or a different ways to do things (the pros and cons of our choices we go with... which usually come from your attempt to be as thorough as possible). Allow me to say thank you, once again, Kevin.
So basically this is Frames taking the complex components’ way (and that is good news) ? Somehow the way to competing with existing BricksExtras ? Or relying entirely on native Bricks elements (modal) ? Saying this because this only looks like a boosted Bricks modal… even though very welcome.
Great video. Missed these types of announcements. I'm looking forward to upcoming "use case" videos.
Its great that the close trigger is syncronized , well done!
Good stuff Kevin. I’m almost ready to jump on both Automatic CSS and Frames! Keep up the amazing work!
Awesome! Thank you!
@@AutomaticCSS I just officially made the purchase of both item’s this morning. Excited to get started with both!
Thanks for another good video Kevin.
Awesome presentation! For the trigger element can we change the icon and make it more like a button "Download the PDF ->" (for example)?
The trigger is a classic hamburger trigger. If you want a custom icon, you can use a custom button. I can do a tutorial on how to do this.
@@AutomaticCSSdid you create this video yet?
And the trigger is a classic hamburger trigger that's used to create a mobile menu?
Fantastic addition to frames 👍🏻
Again, great video Kevin! I managed a project with a dedicated team getting an eCommerce site to be fully accessible, know how difficult modals are too. Great to see this stuff is always considered and developed properly by you all. 😊
I can’t wait to use this. Amazing tool and great training as always.
They overall well thought out and easy to use. I've always programmed it myself otherwise, which is significantly more time-consuming to customize for customers. However, I wish there was an accessible (ARIA) button that we could completely design ourselves.
You have made a very interesting solution.
It would be very useful if you could restrict cookies through Bricks conditions and thus create Frames cookie consent. :)
Looks awesome
This is perfect!
Thank you, I missed the videos about frames! Some frame need tutorials...
Curious to see it used for Offcanvas / Nav and the controls available for animating on/off screen.
Currently use Bricks Offcanvas but rely on GSAP to control it.
Is the animating important? The new ACSS site uses the modal for navigation with animated links, but no animation of the actual modal...
@@AutomaticCSS - Options to select Top, Left, Bottom, Right to open from. A field to input css transition and 'opening, active and closing' events applied to the dom would be fantastic. Appreciate using a modal is not really meant for this purpose.
In a nutshell.. this is MUCH MUCH easier to use to create an off-canvas menu vs Bricks new nav menu! Bricks new nav menu has got be the most convoluted pile of builder mess! That nav menu just to even get working you have to visit so many different builder pages / settings and to do ANYTHING dynamic with it it get's even worse.
But with this I can use much simpler already known things about the builder elements and layouts and that's my off-canvas menu done without all the fuss. Why does Bricks not take this approach? I've noticed a certain few things (not many) about the inner workings of Bricks that make me scratch my head sometimes.
And, that new nav menu is definitely one. This component definitely replaces it for me.. especially since I can build whatever I want in the modals div / container AND style it with no fuss. This is great Kevin!
We are going to introduce a mega menu builder too!
Any news on our nav builder? Really need an accessible off canvas menu.
Can't wait for the acss and frames special offer 😇
When?
😂
@@AutomaticCSS I think july 2023 :) I already have client waiting and would like to start a new page using figma add-on and acss and frames together 😜
Really nice thanks for this video !
I understand this can replace the popup template tool in Bricks in many cases, but not if for example the modal has to be called in different places on the website right? In this case a template seems more adequate, or did I miss something?
This can be used anywhere with multiple instances
@@AutomaticCSS Thanks I'll definitely start using it in my next project !
How does this compare and contrast with the Bricks Pop up builder?
Much easier and better for modals. But it’s not for timer or scroll based pop ups yet.
Can we use the modal for 1- mobile menu and 2- woo product quick view?
Yep. Not positive on woo but pretty sure.
Would it be advisable to create a mega menu and mobile menu with this?
Maybe
Hi, sorry to ask it but is there any advantage to use Modal & Trigger when we already have these elements from Bricks Extra ? I believe that Bricks Extra has even more trigger options. (it's a real question, no troll !) thanks
You won’t need bricksextras when you have frames as it continues to improve. We don’t want users to need a separate plugin.
Unfortunately the modal still doesn't have an option to be scrollable not within itself but as a whole element (with scrollbar on the side of the browser window not inside the modal). The scrollbar inside of the modal itself just sucks from UX perspective, sorry.
This is how it’s supposed to be for a proper scrollable modal.
@@AutomaticCSS Yet I use the other variation every day with Bricks native modal and it's much more pleasant user experience when you can scroll the whole modal and not the inner content only...
Would it be better to make the Max Height of the Scrollable Modal 80dvh? This way the bottom of the modal will not be hidden on mobile devices' browser UIs.
Whatever you’d like 👍
Very good video. It looks very nice!
I have 2 questions:
1) According to accessibility, is not good to have a "person" avatar, like team member, to open the modal, with their bio? (I mean, because is not a rea button) the righy way should be to have a button inside the team card with an "open bio" ?
2) to do something like I mention in 1), Can i use a query loop and inside it, put a trigger and a modal elements? And how can I link both of them, and at the same time don't affect the "other bios" modal's? Should I add a number, or a "CPT post id" as a final part of the trigger class and in the modal trigger class? like .open-modal-35563 ?
thank you again!
I'll do a video on using it for this purpose.
@@AutomaticCSS Excellent. Waiting for it! :)
How do you do a Contact Us trigger instead of a hamburger menu trigger?
As far as I understand correctly, you can (in principle) use any element that has the class you defined in the modal component.
Are modals different to popups? You know like those popups that appear 5 seconds after the home page launches.
Same question here !
Many people use the terms interchangeably, but I consider a modal to be user-initiated. A popup is automatic.
Kevin i am confused. So to use these elements you have to buy Frames with ACSS or only ACSS?
These components are part of the Frames library.
Nice video, once again, Kevin. At ua-cam.com/video/hSRrklHbRlE/v-deo.html you mentioned using a literal html button element. Any chance for a quick and dirty example of this... maybe a quick video. The default hamburger trigger is nice if your using it for a full screen or modal menu navigation... but all too often one would like to have the trigger as a button.
Maybe I have missed something, but having a hamburger menu in the middle of a page seems a little disjointed to me. I hope that makes sense. Thank you another FRAMES video. Looking forward to more of these. Cheers.
Yes there are many ways to trigger. I will be doing a video.
Thank you for considering making a video of how to trigger with an accessibility button with aria etc. to make it accessibility compliant. You're very thorough and could have easily glossed over the part where you mentioned you could use a link or a button and not mentioned accessibility.
I'm learning so much or a different ways to do things (the pros and cons of our choices we go with... which usually come from your attempt to be as thorough as possible). Allow me to say thank you, once again, Kevin.
So basically this is Frames taking the complex components’ way (and that is good news) ? Somehow the way to competing with existing BricksExtras ? Or relying entirely on native Bricks elements (modal) ? Saying this because this only looks like a boosted Bricks modal… even though very welcome.
It’s a modal with greater accessibility and better UX. We believe Frames users shouldn’t have to rely on third party tools for these things.
@@AutomaticCSS Great for the accessibility ! But, not sure what you mean though, isn't Frames also a third-party tool ?