renanpvaz / elm-bem / Bem

This package has a set of utilities for using the BEM convention in Elm. Exposing the functions in this module is disencouraged: the functions were intentionally given small and vague names to avoid verboseness.

view : { stickyHeader : Bool } -> Html msg
view model =
    header
        [ Bem.mod "nav" ( "sticky", model.stickyHeader ) ]
        [ h1 [] [ text "header" ]

        -- ...
        ]

Modifiers

modList : String -> List ( String, Basics.Bool ) -> Html.Attribute msg

Like classList but for BEM modifiers.

button
    [ modList "button"
        [ ( "primary", True )
        , ( "small", False )
        ]
    ]
    [ text "click me" ]

mod : String -> ( String, Basics.Bool ) -> Html.Attribute msg

Shorthand version of modList supporting one modifier.

button
    [ mod "button" ( "primary", True ) ]
    [ text "click me" ]

modifier : String -> String -> String

Joins two strings using the modifier separator.

modifier "form" "invalid" == "form--invalid"

modifier "switch" "on" == "switch--on"

Elements

el : String -> String -> Html.Attribute msg

Returns a element class

button [ mod "button" ( "primary", True ) ]
    [ span [ el "button" "label" ] [ text "click me" ]
    , i [ el "button" "icon" ] []
    ]

element : String -> String -> String

Joins two strings using the element separator.

element "form" "section" == "form__section"

element "switch" "handle" == "switch__handle"

Blocks

block : String -> { el : String -> Html.Attribute msg, mod : ( String, Basics.Bool ) -> Html.Attribute msg, modList : List ( String, Basics.Bool ) -> Html.Attribute msg }

Returns a record with the partially-applied versions of el, mod and modList using the base class supplied.

checkbox =
    Bem.block "checkbox"

view =
    div [ checkbox.mod "big" ]
        [ input [ checkbox.el "input" ] []
        , i [ checkbox.el "tick" ] []
        ]