FVSCL, a Fluid Visual Scaling Component Library.

Using Utopia as a jumping off point I wanted to create a visually, responsive Component Library to explain and demonstrate what could be possible.

Whilst it's more of a proof-of-concept than deployable, production ready app there is probably something useful to be gleaned by taking a look at the source code on Gitlab.

Or, if you're feeling brave you can always try and it use right now.

We use the web in a million different screen sizes, in a million different settings and on a million different devices. We should have fluid, responsive elements that can resize to be comfortable in and across this landscape. Hopefully, by basing all sizing screen size we can get a little closer to that world.

By importing custom css properties in to the root level, they are then accesible to all child elements. The real magic is done via the Utopia CSS Generator which generates a file full of variables that can then be reused across a "component library" to keep things nice and consistent.

I've used Svelte partly to play with it and partly because it's the current darling of developers around the world. It seems alright, but I could have done the same things in plain html and js has only been used to show the current scale of things.

Not here, this is about visually scaling, not about generating a whole framework for your app.

Any of the colours used are placeholders and don't really represent much.

The typography is really about the sizes and relative scaling - the font-family is based around whatever OS you're using.

Missing components may or may not come in the future. Who knows.

Allan Corbett, a designer who can code. Find me on Gitlab or view more things that I've done at superallan.com .