Lustre Stylish

URL:

Hex: https://hex.pm/packages/lustre_stylish

Github: https://github.com/mc706/lustre_stylish

Description

Getting started in lustre felt a lot like like starting over from scratch in elm. It follows the same patterns, even follows The Elm Architecture or TEA. It is all very familiar. But one of the first things I hated about elm, was dealing with HTML in a functional, strictly typed way, then dealing with CSS entirely separately.

Luckily, lustre_dev_tools comes with options for tailwindcss, which is the toolset I daily drive at work, and therefore it makes it really easy to get to building something pretty without dealing with compiling SCSS or figuring out how to structure your own CSS framework.

However, as I have ranted endlessly before, I love elm-ui. By rebuilding a design language as a strictly typed thing, then declaratively building your UI the way you want it to look, then having the style generated from there, is absolutely amazing. So I set out to essentially transpile elm-ui to gleam on top of lustre.

lustre_stylish is the result. It is a directly translation of the elm-ui code into gleam. There are a few minor tweaks under the hood make it a bit more idiomatic gleam, but the core logic is the same, the css struture is the same, the experience aims to be the same. Being able to delcaratively layout your gleam project and have the styles and html be type safe and functional is the magical experience I was trying to recreate.

There are a few updates coming. I used to have a library PrefabUI which attempted to recreate clarity.design in elm-ui (it didnt get close, but had a nice pattern for functional, composable components). I am porting parts of that to lustre_prefab (release incoming) and allowing a ThemeConfig type to be overridden at the root layout element. To enable this, lustre_stylish needs to support CSS Variable assignment, and lustre_prefab will take advantage of this. This way you can take an off the shelf, composable component system, theme it the way you want, then drop it into your codebase and get up and running in lustre quickly.