Тёмный

Component Overview: Frames Accessible Modal & Trigger 

AutomaticCSS & Frames
Подписаться 4,7 тыс.
Просмотров 3,6 тыс.
50% 1

Опубликовано:

 

10 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 61   
@davidwalls2304
@davidwalls2304 Год назад
Great video. Missed these types of announcements. I'm looking forward to upcoming "use case" videos.
@MateaKovacevic-s3o
@MateaKovacevic-s3o Год назад
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. :)
@bikimel-directes
@bikimel-directes Год назад
Its great that the close trigger is syncronized , well done!
@jugibur2117
@jugibur2117 Год назад
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.
@ScottMackey
@ScottMackey Год назад
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. 😊
@AmandaLucaseu
@AmandaLucaseu Год назад
Fantastic addition to frames 👍🏻
@sbw94
@sbw94 Год назад
Awesome presentation! For the trigger element can we change the icon and make it more like a button "Download the PDF ->" (for example)?
@AutomaticCSS
@AutomaticCSS Год назад
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.
@filmgenius2
@filmgenius2 17 дней назад
@@AutomaticCSSdid you create this video yet?
@filmgenius2
@filmgenius2 17 дней назад
And the trigger is a classic hamburger trigger that's used to create a mobile menu?
@elevateyourcreativeness
@elevateyourcreativeness Год назад
Good stuff Kevin. I’m almost ready to jump on both Automatic CSS and Frames! Keep up the amazing work!
@AutomaticCSS
@AutomaticCSS Год назад
Awesome! Thank you!
@elevateyourcreativeness
@elevateyourcreativeness Год назад
@@AutomaticCSS I just officially made the purchase of both item’s this morning. Excited to get started with both!
@kakenetit2
@kakenetit2 Год назад
Thanks for another good video Kevin.
@mehdimoradi603
@mehdimoradi603 Год назад
Thank you, I missed the videos about frames! Some frame need tutorials...
@ReubenHochstetler
@ReubenHochstetler Год назад
I can’t wait to use this. Amazing tool and great training as always.
@rubengarciajr
@rubengarciajr Год назад
This is perfect!
@BGdev305
@BGdev305 Год назад
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
@AutomaticCSS Год назад
We are going to introduce a mega menu builder too!
@edgexxxx99
@edgexxxx99 9 месяцев назад
Any news on our nav builder? Really need an accessible off canvas menu.
@kevinrittershaus9380
@kevinrittershaus9380 Год назад
Looks awesome
@ukukudu
@ukukudu Год назад
Can't wait for the acss and frames special offer 😇
@AutomaticCSS
@AutomaticCSS Год назад
When?
@dahunsi
@dahunsi Год назад
😂
@ukukudu
@ukukudu Год назад
​@@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 😜
@uTubeJoe
@uTubeJoe Год назад
@Louis-C-online
@Louis-C-online Год назад
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?
@AutomaticCSS
@AutomaticCSS Год назад
This can be used anywhere with multiple instances
@Louis-C-online
@Louis-C-online Год назад
@@AutomaticCSS Thanks I'll definitely start using it in my next project !
@OpenChicken
@OpenChicken 9 месяцев назад
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
@AutomaticCSS
@AutomaticCSS 9 месяцев назад
You won’t need bricksextras when you have frames as it continues to improve. We don’t want users to need a separate plugin.
@michaelvandinther
@michaelvandinther Год назад
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
@AutomaticCSS Год назад
Is the animating important? The new ACSS site uses the modal for navigation with animated links, but no animation of the actual modal...
@michaelvandinther
@michaelvandinther Год назад
​@@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.
@danielaldea
@danielaldea Год назад
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!
@AutomaticCSS
@AutomaticCSS Год назад
I'll do a video on using it for this purpose.
@danielaldea
@danielaldea Год назад
@@AutomaticCSS Excellent. Waiting for it! :)
@kwsim539
@kwsim539 Год назад
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.
@AutomaticCSS
@AutomaticCSS Год назад
Whatever you’d like 👍
@jiripaulas9347
@jiripaulas9347 Год назад
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
@AutomaticCSS Год назад
This is how it’s supposed to be for a proper scrollable modal.
@jiripaulas9347
@jiripaulas9347 Год назад
@@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...
@michailgiannopoulos5274
@michailgiannopoulos5274 Год назад
Kevin i am confused. So to use these elements you have to buy Frames with ACSS or only ACSS?
@AutomaticCSS
@AutomaticCSS Год назад
These components are part of the Frames library.
@zakirfaizal6321
@zakirfaizal6321 Год назад
Are modals different to popups? You know like those popups that appear 5 seconds after the home page launches.
@moncholo_
@moncholo_ Год назад
Same question here !
@AutomaticCSS
@AutomaticCSS Год назад
Many people use the terms interchangeably, but I consider a modal to be user-initiated. A popup is automatic.
@dallaslogic
@dallaslogic Год назад
How does this compare and contrast with the Bricks Pop up builder?
@AutomaticCSS
@AutomaticCSS Год назад
Much easier and better for modals. But it’s not for timer or scroll based pop ups yet.
@mehdimoradi603
@mehdimoradi603 Год назад
Can we use the modal for 1- mobile menu and 2- woo product quick view?
@AutomaticCSS
@AutomaticCSS Год назад
Yep. Not positive on woo but pretty sure.
@filmgenius2
@filmgenius2 17 дней назад
Would it be advisable to create a mega menu and mobile menu with this?
@AutomaticCSS
@AutomaticCSS 10 дней назад
Maybe
@ted-e-baer
@ted-e-baer Год назад
Nice video, once again, Kevin. At ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hSRrklHbRlE.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.
@AutomaticCSS
@AutomaticCSS Год назад
Yes there are many ways to trigger. I will be doing a video.
@ted-e-baer
@ted-e-baer Год назад
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.
@JohnChvatalGSTV
@JohnChvatalGSTV Год назад
How do you do a Contact Us trigger instead of a hamburger menu trigger?
@jugibur2117
@jugibur2117 Год назад
As far as I understand correctly, you can (in principle) use any element that has the class you defined in the modal component.
@antoinel4265
@antoinel4265 Год назад
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.
@AutomaticCSS
@AutomaticCSS Год назад
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.
@antoinel4265
@antoinel4265 Год назад
@@AutomaticCSS Great for the accessibility ! But, not sure what you mean though, isn't Frames also a third-party tool ?
Далее
Component Overview: Accessible Accordion & Toggle
23:17
ACSS 101.05: Smart Spacing
26:49
Просмотров 4,1 тыс.
I redesigned YOUR websites
20:44
Просмотров 37 тыс.
13 Things To Remove From Your Website Immediately
12:33
ACSS 101.09: Headers, Sticky Headers, & Offsets
27:15
Просмотров 4,2 тыс.
The Unreasonable Effectiveness Of Plain Text
14:37
Просмотров 606 тыс.
How to Setup Automatic.css With Bricks Builder
21:49
Просмотров 16 тыс.