An Introduction to Style Elements for Elm
Style Elements is an Elm library that was meant to rethink how a developer can write their styles and layout for their web app.
Originally it started out as a purely CSS library, but it became obvious that in order to get the largest benefits, the library would have to have control over the html being generated as well.
Layout and positioning is usually the biggest source of pain from css and html.
Separating layout and position from style
This library is split in to two sections,
Style(Who'd have thought, right?)
Element is a replacement for
Html and is used to build up your view function. The main idea with
Elements is that they are
Html with explicit, built-in layout.
Style is a replacement for css. You'll construct a stylesheet using
Style and things like
Style.Color. The main idea here is that this stylesheet does not have any idea about position, or layout, because those things are handled completely by the
Element part of the library.
Here's a very brief snippet to show you
-- We need a type that represents out style identifiers. -- These act like css classes type MyStyles = Title -- We define our stylesheet stylesheet = Style.styleSheet [ Style.style Title [ Color.text darkGrey , Color.background white , Font.size 5 -- all units given as px ] ] -- Element.layout renders the elements as html. -- Every layout requires a stylesheet. view = Element.layout stylesheet <| -- An el is the most basic element, like a <div> el Title  (text "hello!")
Let's check out the
Element part of the library first.