Frame Overview: Feature Romeo (Advanced Vertical Accordion)
HTML-код
- Опубликовано: 13 июл 2024
- Feature Romeo is an advanced frame that's perfect for showcasing features, services, locations, team members, and anything else that needs visual card representation.
The cards are placed in a vertical accordion with a vertical heading. When the user hovers, the card expands to fill more space in the accordion and animates the vertical heading out of view while animating in a real heading and a description.
The accordion will stack on mobile, removing the vertical heading and original overlay. The result will be a traditional stack of cards with a gradient overlay to make the text more readable.
We've put a lot of emphasis on accessibility with this frame. The actual headings (non-vertical) are the links and use the clickable-parent technique to make the entire card clickable.
Additionally, we've removed the focus-within styles and ensured that the cards get the same effect on focus as they do when hovered. This makes the accordion keyboard navigable.
Note that the real heading of this card doesn't animate. This is because clickable-parent is incompatible with CSS transform and most animation techniques. Don't try to animate the heading of this frame as there's a high chance you'll break the card's accessibility.
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @digitalambition 
Развлечения
![XO (Only If You Say Yes) - ENHYPEN エンハイプン 엔하이픈 [Music Bank] | KBS WORLD TV 240712](http://i.ytimg.com/vi/wBT1bKKwPTo/mqdefault.jpg)
Thanks for investing the effort to make all of your frames accessible. Clean, standards-based HTML and CSS gets you a long way towards that, but the extra effort to ensure accessibility really helps.
Great tutorial. This gave me all kinds of ideas for a unique hero section. You’re building some powerful stuff, Kevin.
ACSS has fundamentally changed the way I make websites… I hope both ACSS & Bricks will be here for a long time to come 😃
Another very well done tutorial. Also visited Frames website and see not only the documentation growing, but with DETAILS! For a developer this makes the difference for me!
In this video and I think in every damn video you do, you always drop some professional CSS knowledge that many do not even know exists. You are making one of your most critical followers a believer.
Thank you so much Kevin for actually providing a real world example using query loops. I'm so tired of people showing a design that looks great but is un-workable in the "real" world.
This is an excellent addition. The library is just becoming more and more valuable.
Absolutely love it! 🔥🔥
WOW! ACSS and Frames are making my life much easier. This is a great addition to the Frames library, it looks and behaves really great. I like having the overview and discuss the details of the frame. I appreciate how you continue to emphasize maintainability.
This is a great add to the Frames collection, more importantly this video explaines a TON of things on how to use "things"...LOVE IT and its a great help!! Please do more of these type videos!!!!!!!!
This was a great new frame! really appreciate you teaching us how to use Frames with dynamic content, it's extremely useful and valuable for someone who's more of a beginner.
Glad it was helpful!
Again, a frame that is well thought out and very well implemented.
Kevin, thank you for taking the time to provide this excellent overview. While watching this, one idea came to mind: It would be really amazing to utilize the existing variable for breakpoints' 'max-width' as the identifier that we can adjust at the ACSS admin panel in the viewport settings. This way, we could ensure that all frames we use adhere to our custom breakpoints without needing to adjust them individually.
CSS doesn’t support variables for breakpoints
Love this frame, well done team.. That looks beautiful! .
Awesome, Exactly the frame I was looking. Had a similar grid on a site, but it had its issues. So I had to remove it. This will be installed for sure. Thanks Kevin and Team.
Kevin for President.
Can’t thank you enough! So provide much value 😍
Love this frame, well done team.
That looks beautiful! 😍
Thank you! Cheers!
This accordion is fire 🔥
Great overview, thank you Kevin. Please make Frames working with Oxygen Builder 😶🌫
No market there
I hope you can integrate with Greenshift blocks.
Kevin...thanks for another Sunday delight. Can media queries (min width/ max width) be tokenized instead of using static values to make it easier in ACSS to use variables for updating them in the frames?
Nope, it's a big limitation of vanilla CSS. Can only be tokenized in SCSS. Though, Bricks could tokenize it in the builder ... I'll put in feature request.
How do you get that kind of palette display at 11:30 ?
(with every main colors at the same time I mean, right now I only get the contextual by default and have to select a palette manually every time...)
Right click. It's an ACSS feature.
I've got no custom CSS in the feature card Romeo class. Anyone else got this same problem?
Post in the community we can help you there
Does ACSS and Frames support RTL ?
Yep!
@@AutomaticCSS Thanks for the quick reply. Two more questions please:
1. Is there a place to see the available components in Frames?
2. Do you have components for Woocommerce?
When the cards stack on mobile the box-shadow--xl is on the whole container and not just the single card, which doesn't look that great. How would you customize that?
You just remove it at that breakpoint.
And how would i go about if i want it on the single cards? @@AutomaticCSS