I’m excited about CSS again. After experimenting with making layout-from-scratch apps with WebGL/Three.js in an attempt to avoid the sprawl (and creating my own mini-sprawl in the process) I’m rethinking approaches.
I’m interested in making applications where users customize with their own CSS. My bet is that if we get the initial primitives right, this could allow users to truly customize and feel at home in their spaces.
What do you get from letting users directly write CSS in the application:
Most people don’t know CSS, and it is not intuitive to get started with. It does have some things going for it in this regard, though:
A super interesting recent development here is CSS GUI by Components AI. Their goal is to provide a GUI for editing all CSS properties. What I love about this is how closely it maps to CSS – it’s quite possibly the missing step in a ramp from no styling to custom CSS.
Because it needs to stick to the CSS spec, the GUI for CSS.gui is often going to be a little more verbose than an app like Figma’s might be. But I think the trade-off, where you’re actually manipulating the CSS itself, is worth it in a lot of cases. Figma styling (and before that photoshop and illustrator) has it’s own quirks, born out of edge-case handling, that designers learn to navigate. They handle these quirks to make their design, then they hand-off to engineers who handle web quirks to make that design happen. But what if both were aligned from the start on working within the same set of quirks… I’m fascinated by the idea of the web as a material, and a GUI working off CSS feels closer to working with the material directly.
How much true customization a user can do with CSS, and how easy it is for them to do it, is dependent on how the app is structured. This is a design challenge I’m currently interested in. I would break it down into these related parts:
This is something I’ve been playing with in things like Cascade. It’s more art than science, and there could be lots of different approaches that might resonate more depending on the app and the user. I like that this part is something like a partnership with the users. It becomes more about providing the user the right toolset.
A big challenge is the fuzzy line between style and functionality. I see this come up the most with position and size. It is my current take that position and size should mainly be controlled by the application (not through CSS customization) and that this should be directly manipulatable. Something like a box model where you can move and resize the boxes through direct manipulation. There is overlap there, a lot of CSS properties can affect size and position and they may collide in unituitive ways. This is one of the main challenges I’ve been exploring and I don’t think I’ve cracked it yet.
I’m sure there are more strategies, this seems like the thorniest and most interesting part of the design challenge to me.
Grant Custer is a designer-programmer interested in alternative interfaces.
You can see work and inspiration in progress on my Feed and my alternative interface experiments on Constraint Systems. I’m happy to talk on Twitter, email: grantcuster at gmail dot com, or Mastodon. You can see a full list of projects on my Index.