While learning how to build a Figma plugin, I stumbled upon a few interesting usages of Flexbox and Grid in Figma. When I found them, I just got distracted and couldn’t resist digging more. Flexbox and Grid have been providing us web developers with lots of new capabilities to build new layouts, and what I will show you in this article is just that.
A few days ago I asked Twitter a seemingly simple question: “What is the best, most accessible way to mark up mutually exclusive button groups?” Unsurprisingly, most people thought the best solution is radio buttons and labels. All this was challenged when the actual accessibility expert, Léonie Watson chimed in. She went on to make the point that if a design looks like buttons, it should act like buttons, otherwise there are mismatched expectations and poor UX for AT users.
When I shared a small design detail from my tabs it got a lot of attention on Twitter. [Example tab component being resized which reveals a shadow in which the tabs disappear into when they overflow the width.] So I thought I’d take this opportunity to share some of the finer details about how I made them and some of the problems that needed to be overcome.
For over a decade, we had to use silly hacks to manually apply an aspect ratio, and then, bloody typical, two better solutions arrived at roughly the same time. They are CSS aspect-ratio, and width & height presentational hints. So, which should you use? First, let’s take a look at how the features work, as there’s quite a bit of misinformation out there…
CSS is short for Cascading Style Sheets. But what exactly is this Cascade, and how does it work? What are Origins? How do you calculate Specificity? And where do those new Cascade Layers you might have heard of fit in? And oh, what exactly happens when you use an !important somewhere? In this insightful talk, we’ll take a look under the hood of browsers, and detail how they determine which CSS declarations to apply and which not.