Get updates via , Github, or RSS | About

Episode 49: Elm-Css Oct 26, 2017

Elm-Css can be used to write type-safe inline styles or generate Css files that you can include in your application normally.

Examples

Styles.elm

type Classes
    = GreenBg
    | White
    | Yellow


css : Css.Stylesheet
css =
    Css.stylesheet <|
        Css.Namespace.namespace "main"
            [ Css.class GreenBg
                [ Css.height (Css.px 300), Css.backgroundColor (Css.rgb 51 153 51) ]
            , Css.class White
                [ Css.color Colors.white ]
            , Css.class Yellow
                [ Css.color (Css.rgb 244 208 107) ]
            ]

View.elm

{ id, class, classList } =
    Html.CssHelpers.withNamespace "main"


view : Model -> Html msg
view model =
    Html.header [ class [ GreenBg ] ]
        [ div []
            [ a [ href "/" ]
                [ span [] [ text "Elm" ]
                , span [] [ text "seeds" ]
                ]
            ]
        ]