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

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