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, Element and 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.