{"id":76,"date":"2025-10-11T12:52:07","date_gmt":"2025-10-11T10:52:07","guid":{"rendered":"https:\/\/marshfire.net\/wp\/?p=76"},"modified":"2025-10-11T13:55:49","modified_gmt":"2025-10-11T11:55:49","slug":"building-density-aware-components-the-runtime-revolution","status":"publish","type":"post","link":"https:\/\/marshfire.net\/wp\/software-architecture\/76\/","title":{"rendered":"Building Density-Aware Components: The Runtime Revolution"},"content":{"rendered":"\n

Or: How to Make Your UI Breathe With CSS Variables (No Framework Required)<\/em><\/p>\n\n\n\n

Remember our journey through\u00a0CSS Variables as Design Tokens\u00a0<\/a>and\u00a0how Angular Material finally got with the program<\/a>? Well, grab your favorite caffeinated beverage because we\u2019re about to solve one of UI development\u2019s most annoying problems:\u00a0making interfaces that work for everyone<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

> \ud83c\udfaf Framework Agnostic Alert<\/strong>: This works with React, Vue, Angular, vanilla JS, or whatever framework your team picked this week. We\u2019re using the web platform itself, so it\u2019s basically future-proof! I will relate<\/em> to the way Angular Material <\/em>handles density in themes mainly because I know this framework best compared to others.<\/p>\n\n\n\n

Ever squinted at a cramped interface thinking \u201cI need reading glasses,\u201d or stared at a spacious UI wondering \u201cwhere did all the content go?\u201d Welcome to the density problem. Most design systems treat density like a tattoo \u2014 pick once at build time, live with it forever, and pray your users don\u2019t revolt.<\/p>\n\n\n\n

But what if users could adjust their interface density like they adjust font size? What if \u201ccompact\u201d vs \u201cspacious\u201d wasn\u2019t your decision but *their*<\/em> preference? What if density changes were smoother than a well-tuned espresso machine?<\/p>\n\n\n\n

Spoiler alert: they can, and we\u2019re about to build it.<\/p>\n\n\n\n

The Density Problem: Why One Size Doesn\u2019t Fit All<\/strong><\/h3>\n\n\n\n

Picture this all-too-familiar scenario: You\u2019re building a data-heavy dashboard (because of course you are). Your product manager wants it \u201ccompact\u201d because \u201cpower users love seeing ALL THE DATA.\u201d Your UX designer wants it \u201cspacious\u201d because \u201caccessibility matters and people have fingers, not toothpicks.\u201d Your users? Half are on 13-inch laptops squinting at everything, while the others have ultrawide monitors that could display a small movie theater.<\/p>\n\n\n\n

Meanwhile, you\u2019re stuck in the middle playing design diplomat, knowing that whatever you choose will make someone unhappy. Sound familiar?<\/p>\n\n\n\n

The Traditional (Painful) Approach<\/strong><\/h3>\n\n\n\n

Most design systems handle density like choosing a tattoo \u2014 permanent, painful to change, and you\u2019ll probably regret it:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span>