Introduction to elm-ui, a package for creating UIs in pure Elm

[alexkorban]

Other than the documentation and Matthew’s elm-conf talk, I’m not aware of any elm-ui tutorials, so I thought it would be useful to post this here:

Forget CSS and enjoy creating UIs in pure Elm

In this post, I walk through creating a Slack-like layout with elm-ui.

[brasilikum]

In my opinion your blog articles are the best resource on advanced practical elm.

[alexkorban]

Thank you, that’s really good to hear, especially because it’s what I aim for.

[razze]

Really enjoyed reading it. As I’m still looking to start learning elm-ui.

But I kinda hoped it would show me how elm-ui seperates layout and style and makes it easy to interchange. As that’s one of the things that got me interested in elm-ui, then again, maybe I remember wrong.

[alexkorban]

The previous version (style-elements) separated layout and style, but elm-ui no longer does. Matthew decided that keeping all that stuff together with the element is what provides the advantage. You can technically still split the visual styles out if you want but I’m not sure it’s necessary.

[razze]

Okay, thank you for clearing that up. Seem to have missed that

[stevensonmt]

I don’t know if it’s the preferred approach, but I like to define custom types for styles and then match on the type to return the list of attributes. This makes it easy to refactor similar components by making the change in one place. You can then just append to the list for additional attributes in an element needs further customization/tweaking. Here’s an example I use for just text styling.

type Style
    = Header
    | Subheader
    | MainText
    | SubText


styling : Style -> List (Attribute msg)
styling style =
case style of
    Header ->
        [ Font.color (colorPalette PrimaryLight)
        , Font.size 36
        , Font.family
            [ fontStack Headline
            , fontStack Fallback
            ]
        ]

    Subheader ->
        [ Font.color (colorPalette PrimaryLight), Font.size 22, Font.heavy, Font.family [ fontStack PrimarySans, fontStack Headline, fontStack Fallback ] ]

    MainText ->
        [ Font.color (colorPalette PrimaryLight), Font.size 18, Font.medium, Font.family [ fontStack PrimarySans, fontStack Fallback ] ]

    SubText ->
        [ Font.color (colorPalette PrimaryLight), Font.size 16, Font.light, Font.family [ fontStack PrimarySans, fontStack Fallback ] ]


type MyFonts
    = Headline
    | PrimarySans
    | SecondarySans
    | PrimarySerif
    | SecondarySerif
    | Fallback


type ColorPalette
    = Primary
    | PrimaryDark
    | PrimaryLight
    | Secondary
    | SecondaryDark
    | SecondaryLight
    | Highlight
    | Alert
    | White
    | Black


fontStack : MyFonts -> Font.Font
fontStack font =
    case font of
        Headline ->
            Font.external { url = "https://fonts.googleapis.com/css?family=Dosis", name = "dosis" }

        PrimarySans ->
            Font.external { url = "https://fonts.googleapis.com/css?family=Roboto", name = "roboto" }

        SecondarySans ->
            Font.sansSerif

        PrimarySerif ->
            Font.external { url = "https://fonts.googleapis.com/css?family=Esteban", name = "esteban" }

        SecondarySerif ->
            Font.serif

        Fallback ->
            Font.sansSerif


colorPalette : ColorPalette -> Color
colorPalette color =
    case color of
        Primary ->
            rgba255 100 100 100 1

        --96 125 139 1
        PrimaryDark ->
            rgba255 69 90 100 1

        PrimaryLight ->
            rgba255 200 200 200 1

        --207 216 220 1
        Secondary ->
            rgba255 200 100 50 1

        --156 39 176 1
        SecondaryDark ->
            rgba255 123 31 162 1

        SecondaryLight ->
            rgba255 213 192 182 1

        --225 190 231 1
        Highlight ->
            rgba 254 128 25 1

        Alert ->
            rgba 207 80 75 1

        White ->
            rgba 233 236 250 1

        Black ->
            rgba 0 0 0 1

[alexkorban]

That looks like a fine approach. That’s the thing about elm-ui: you can do whatever suits you best, using any of the available Elm features.

[razze]

Thank you for sharing, really interesting to read of different approaches and hopefully helps me using those if I see fit

[HappMacDonald]

The first time I started working with Elm-UI, I found it’s output to be very similar to Bulma in a nice way except that it took less effort to get things right.

It’s actually refreshing for something in Elm to take less effort for me (Read, fewer iterations) to output something that looks the way you were imagining it to than alternatives such as JS.

We’ll see how well it handles more advanced HTML/CSS needs, but for the time being I feel about ready to forget what HTML and CSS even are lol.

[Hasimir]

The blog post (awesome by the way) comes from the future!
In the “Posts” list it shows a posting date of 2019-11-17

[alexkorban]

Thanks! Think of it as a subtle hint that elm-ui should be the future of UI development