I’m very excited to say that the major rewrite of Style Elements is now ready as Elm UI
The rewrite has been lurking under the alpha-project name Stylish Elephants for quite a while, but now with 0.19 out, a new browser-layout test suite, performance improvements, and a stable API that people seem to be enjoying, it’s time.
Renaming to Elm UI
This was a major rewrite which essentially gets rid of any concept of a stylesheet and instead treats all style as attributes on Elements. You can essentially forget about CSS when you write your view.
I’ve known for a while that the project would be renamed after this rewrite was in full form.
And this project has grown beyond simply being about style, and is really about building user-interfaces. This is basically about your view function.
So, in step with the literal names policy, I want this to be a very Elm way to build UIs. Elm UI seems natural then.
The previous Elm UI project doesn’t seem to be continuing and would be difficult to upgrade to 0.19 due to it’s reliance on kernel code. The author, gdotdesign, is now focusing on the Mint Language. I reached out to him via e-mail but haven’t heard back.
The Style Elements Package itself
The old Style Elements package will be moving into maintenance mode and deprecation.
My efforts will be going exclusively towards the Elm UI package.
Massive Thanks
There have been a ton of people who have been with me on this rewrite journey. It’s been fantastic, thank you for all your insights, thank you for using this package and especially thank you for helping other people in the slack channel when you’ve been able to.
Congrats on the release! I know how hard you’ve worked on this and it’s winderfuk to see all the thought and planning that went into this coming to fruition!
The general plan is Chrome, Firefox, Safari, Edge, and down to IE11.
I believe that’s true except for a few minor tweaks for IE11 around the table element.
The test suite currently covers most of the common cases. Once I get it a bit further and switch to something like https://saucelabs.com/ for automating everything, I’ll post the browser compatibility table on the repo itself based on those results.
Thanks! Most of them are resolved, but I haven’t gone through and closed them. I’m not sure when I’ll get around to it, but if you’re curious about any one issue, let me know in the #elm-ui slack.
That’s a really great talk, thanks for the link. You mentioned CSS animation in the video but not JS animation. Will your library include both (I think GreenSock includes both depending on browser and what is being done - not sure about the other two)?
At a couple of points during the talk I was reminded of an excellent article on animation and motion which I liked a lot and, if you haven’t read before, you might find interesting, too.
So, (and I don’t think I really made this clear in the talk), but my only real point in bringing that up was that that approach could be rendered either with CSS animations or via JS.
Probably the only reason we’d want CSS animations was if it allowed a performance benefit with no cost in the reliability of the animation. However I’m not quite at the point where I’m benchmarking something so we’ll just have to see.
From prior experience in JS I know that there is a tremendous difference between doing animations/transitions by specifying a CSS start and end value (i.e. changing the current CSS value to the end value) and having the transition details (speed, delay, easing function) in CSS vs updating the current CSS value as fast as window.requestAnimationFrame allows from JS.
CSS animations have seen a lot of optimization efforts by browsers. I think an important difference is that browsers already know what the end result will be, meaning that they do not have to re-draw the entire vdom every frame.
Whereas many computers might be fast enough to show JS-only animations (semi-)fluidly, on most mobile phones those animations will stutter.
I watched your Elm Europe 2017 talk about the old Style Elements package, and my interest was definitely piqued. Next time I’m in UI land, I’ll definitely try it out (exploring a single-port-pair-for-everything idea right now, then back to upgrading enough packages to get jsmaze.com working in 0.19, so I can continue work on the server side).
Have been using Style-Elements for some time, but was advised to try out Stylish-Elephants by a friend - the only thing stopping me was the fact that you stated “not to be used in production” on the Elephants page.
I will definitely be trying out Elm-UI this weekend.
