A new release and renaming Style Elements to Elm UI


#1

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.


#2

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!


#3

Congratulations and thanks! I look forward to digging into it.


#4

Amazing!!! This is for sure one of my favorite Elm projects ever. :heart_eyes_cat:

Congratulations on the release!


#5

Well done! And thanks for all the hard work.


#6

This is really awesome Matthew. Now that a stable release is out, I’ll brush the dust of my plans to incorporate it in one of our production plans :smiling_imp:


#7

This is very interesting!

What minimum browsers are you targeting?


#8

Woohoo, thank you everyone :smile:

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.


#9

So looking forward to exploring this on my train ride this evening. Further down the line, will there be a demo page that shows it in action?


#10

Yeah, definitely. I have some materials in mind including a guide book like I put together for style-elements, and an example website.


#11

Sounds awesome. Does the library also include animation, similar to GreenSock, React Motion, Pop Motion?
https://greensock.com/



#12

Not this release, but I’m working on an animation approach that I spoke on at the most recent Elm Europe: https://www.youtube.com/watch?v=Nf4rElfA8SE


#13

Congratulations on the release, I’m really happy it is out.

What do you plan to do with the issues on stylish elephant?


#14

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.


#15

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.


#16

Nice, I’ve saved that article for future reading :slight_smile:

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.


#17

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.


#18

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).


#19

Wonderful.

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.


#20

Well done @mdgriffith !

I had mixed feelings regarding naming it the same as a previously existing package, and I’m really glad you cleared it out on the post.

I echo @robin.heggelund 's words - I will work on putting this into my planning for incorporating it in production :slight_smile: