009: elm-ui

elm-ui packageFewer overlapping ways to express viewsElement.padding (no concept of margin)Previously called style-elementsThere used to be a notion of a single type defining all possible stylesLatest 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/htmlelm-css packageMobster appEscape hatchesElement.html works at leaf nodes, but elm-ui in general doesn’t mix with plain htmlElement.htmlAttributeRefactoring is a huge asset for a team, so much easier than css refactoringDoesn’t expose all the css tricks directly, sometimes you need escape hatches to access thoseResponsivenessPass in window size from your Elm modelDoesn’t use media queries, so that approach doesn't play well with with pre-rendered html like in elm-pagesclassifyDevice is an optional helper for responsivenessSemantic htmlExpress layout with Element.row, column, elSemantic HTML is independent from layout. Set with attributes using the Element.Region module.WrappingElement.paragraph uses text wrappingem/remelm-ui doesn't expose access to rem and em units to simplify the mental model and reduce overlapping ways to express somethingCookbooks/examplesLucas Payr's elm-ui-widgets Alex Korban's elm-ui patterns )Debugging elm-ui viewsElement.explain gives you highlights around nested elementsInspecting developer tools doesn't help much with elm-ui, but elm-ui is much more traceable because it doesn't have layout cascading like CSSResourcesMatt'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 talkRichard 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