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 Element.textColumn.
Special thanks goes out to @dmy and @mdgriffith for fixing a nasty little bug in elm-ui that would have made this package useless. Thank you soo much!
Looks gorgeous! I like the variety of widgets you provide. Have you considered a dropdown? I couldn’t find a good dropdown library in elm-ui and the best I can get requires a lot of config to look decent.
I was thinking about it. Material Design recommends using Chips instead. I had an example for filtering Chips before… it should be lying somewhere. If you’re interested I’ll upload it to Ellie.
Material Design also has menus, but they are not used to filter something.
I’m guessing you could write a very lightweight implementation using Elment.below. For a more sophisticated widget I’m guessing you’d need to track the position of the element as well as the height of the page and than constantly update the position of the dropdown menu.