• elm-ui package
• Fewer overlapping ways to express views
• Element.padding (no concept of margin)

Previously called style-elements* There used to be a notion of a single type defining all possible styles * Latest elm-ui simplifies that by using only inline styles. You build your own abstractions with vanilla Elm functions/modules etc. * Element type is the equivalent of the Html type from elm/html * elm-css package * Mobster app

Escape hatches* Element.html works at leaf nodes, but elm-ui in general doesn’t mix with plain html * Element.htmlAttribute * Refactoring is a huge asset for a team, so much easier than css refactoring * Doesn’t expose all the css tricks directly, sometimes you need escape hatches to access those

Responsiveness* Pass in window size from your Elm model * Doesn’t use media queries, so that approach doesn't play well with with pre-rendered html like in elm-pages * classifyDevice is an optional helper for responsiveness

Semantic html* Express layout with Element.row, column, el * Semantic HTML is independent from layout. Set with attributes using the Element.Region module.

Wrapping* Element.paragraph uses text wrapping

em/rem* elm-ui doesn't expose access to rem and em units to simplify the mental model and reduce overlapping ways to express something

Cookbooks/examplesLucas Payr's elm-ui-widgets Alex Korban's elm-ui patterns )

Debugging elm-ui views* Element.explain gives you highlights around nested elements * Inspecting developer tools doesn't help much with elm-ui, but elm-ui is much more traceable because it doesn't have layout cascading like CSS

Resources* Matt's elm-ui announcement talk at Elm Europe (was about elm-style-elements, but still worth a watch) * Matt's more recent elm-ui conference talk * Richard Feldman's talk CSS as Bytecode (uses style-elements, but it's a great intro tutorial on elm-ui concepts) * #elm-ui channel in the Elm slack