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" ]
-- ...
]
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"
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"
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" ] []
]