Something I've been very slowly working on for yea...
# devlog-togetherr
Roma Komarov
03/01/2025, 10:44 AMSomething I've been very slowly working on for years (with long multi-month spans of not doing anything). Sharing to manifest more work 🙂
Basically, a test bed for CSS and web components: allows generating permutations between various CSS custom properties, HTML attributes, and more. It was already instrumental for some of my web platform testing, as it is an effortless way of displaying all the possible options at the same time, and then cross-browser comparison can show the difference. A lot of what is there I already use in production in the design system I am working on in my company, but that implementation relies heavily on React.
What I am working will, ideally, be frameworkless, and done only with the web platform in mind. Currently, some of its bits are using Preact, but I really want to step away from it, and do everything with web components, and not rely on something external.
Roma Komarov
03/01/2025, 11:04 AMUsage of this is just:
Copy code
<style>
.test {
width: 100%;
background: var(--dial-bg, pink);
border: 2px var(--dial-border, solid);
box-sizing: border-box;
padding: var(--dial-padding, 16px);
}
</style>
<css-lab dials="
bg: pink|hotpink|yellow;
padding: initial | 8px | 16px;
border: solid | dashed;
">
<div class="test">Hello world!</div>
</css-lab>Roma Komarov
03/01/2025, 11:11 AMAnd the way it works in our design system. The context is rather different, where we want to show the generated code to use for every permutation, but also not complete in some ways, and is less about exploration (no two-way feedback from the controls). But we're pretty happy with how it works, and even saw other design systems adopt a few things from our design & implementation (with explicit mentions).
3 Views