Links
Flexbox Masonry Layout (Explained with Math)
Flexbox has a very specific algorithm for determining how to deal with remaining (or lack of) space in a row. Let's use actual math to understand it then apply it to a masonry layout.
Building dynamic toggletips using anchored container queries
Container queries are evolving beautifully, especially with the newest addition, anchored container queries. And, thanks to other modern CSS features such as the anchor attribute, ‘modern’ attr(), corner-shape, and even interest invokers, we can include all kinds of progressive enhancements to create some really awesome — in this case — toggletips.
SVG favicons that respect theme preference
Less of guide about the favicons and more a bug report of Safari that at the moment ignores media query user preferences in SVG favicons.
Modal vs. Separate Page: UX Decision Tree
How do we choose between showing a modal to users, and when do we navigate them to a separate, new page? The decision influences users’ flow, their context, their ability to look up details, and with it error frequency and task completion. Both options can be disruptive and frustrating — at the wrong time, and at the wrong place.
Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly
Dropdowns often work perfectly until they’re placed inside a scrollable panel, where they can get clipped, and half the menu disappears behind the container’s edge. Godstime Aburu explains why this happens and offers practical solutions to fix it.
Videos
Is Sass Dead Yet? CSS Mixins and Functions
Sass has inspired new developments in CSS for over a decade – from variables to nesting, and now author-defined CSS mixins and functions. As these features make the jump from Sass to CSS, they tend to change in significant ways. So what can we do with CSS functions and mixins, how will they be different from the Sass tools that inspired them, how can you help in the spec process, and what other features might this open up in the future? Is this finally a death blow for CSS pre-processors? (No, but let’s talk about it anyway!)
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.