Let’s face it: CSS is unintuitive and complicated. For me, working with CSS is always a chore and a morass of unpredictability. But what if you could construct sophisticated, responsive cross-browser UIs in pure Elm, assisted by the compiler and using a set of building blocks which are so intuitive that most of the time you don’t even need to look at the documentation? What if you could build UIs faster and have fun while doing it?
It’s not hypothetical! It’s exactly how I describe my experience with using the mdgriffith/elm-ui package to build UIs. This is why I decided to write a guide to elm-ui.
elm-ui was created by Matt Griffith as a replacement for both HTML and CSS, which it treats as an output target, and to me, it’s a killer feature of Elm on par with the language itself.
I like to describe it by analogy: elm-ui is to HTML/CSS as Elm itself is to Javascript. Just like Elm, it gives you a much better set of primitives reinforced with a type system and a helpful compiler.
My guide, elm-ui: The CSS Escape Plan, is now available in early access.
Like for many of us this year, my plans got derailed and I had to put off my work on the guide, but I really wanted to get it out before the end of the year. Even though I’m still working on the content, the guide already covers all the main areas of the package:
- page elements and controls
- layouts
- typography. You also get an expanded version of the elm-ui patterns showcase along with the guide.
So you can start learning right now!
Still to come are supplementary topics such as combining elm-ui with other packages, for example to render Markdown or create drag-and-drop lists, as well as using it with custom elements.
For more information, including a detailed TOC and list of examples in the showcase, check out the guide page: elm-ui: The CSS Escape Plan.
