009: elm-ui

• 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/examples

Lucas 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