I am proud to announce that the rewrite of orasund/elm-ui-widgets is finished.
You can checkout the last post about it here:
You can checkout the website here.
Every example also has an Ellie, checkout the doc to find them.
Native Material Design Implementation
I actually implemented material design in Elm . This came with some difficulties.
The original specification always has two colors for everything: a base color and a “-on” color to specify transitions. This “-on” color is typically either black(transition to black) or white(transition to white) but actually it may be any color. The problem here was that my widgets only supported a single color. So I needed to write a function that did the transition for me. Hidden in the source code I now have a nifty little function that can do additive and subtractive mixing of colors and even allows a percentage how much of a color should be added. Personally, I feel like the resulting transitions look better than the implemented transitions in chrome. I might want to publish it.
The devil is in the detail. I quickly notice that the specification did not match the example images and website like youtube or google drive. I concluded that one specification was a newer version. Only problem: The specification actually does not have an official version number. So it came back to looking at a lot of images of material design and trying to figure out what specification to use.
Here are a few ways how to continue now that the package is published.
- More Material Design - I feel like the “Elm way” would be to have a new Materal Design package that in addition to the styling also ensures that a the website follows the Material design philosophy.
- More Widgets - Its actually not necessary that all widgets are in one single package. So maybe different packages for different use cases might be useful.
More Complexity - My current implementations all assume that we have unformatted text. It might be also interesting to add support for different markup languages, like a Markdown widgets, wrapping