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.
Color System
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.
Specification Trickeries
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.
Future Projects
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!
Great job! Could have used it when I started my project using lucamug/style-framework 4 months ago
This looks so much easier to customize. Maybe I’ll switch over in a few months!
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.
similar to ScrollingNav.syncPositions. This function would need to be called regularly by the subscriptions function.
And after that you should be able to write something like
{-| Caculates the amount of pixels the dropdown needs to moved up
in order to be visible in the viewport
-}
xOffset : { Dropdown, height : Float } -> Float
from there i would leave it to the user to define the rest.
Another thing, when sorting strings, you need to be able to supply a sorting function as this depends on language. The builtin sorting is not for human consumption.
I don’t immediately understand how this works in this package.
Sometimes it makes the most sense to use a dropdown. The most common cases are when there is limited space or an input is nonessential. Probably the most common example is sorting a list.
Not that I need a dropdown right now, just couldn’t help but notice .
I’m not against having a lot of different widgets (and variants of them) in the package. If anybody wants to add a widget, please feel free to start an issue.