Utilities for following BEM (Block-Element-Modifier) conventions in CSS classes.
This library builds on work done in renanpvaz/elm-bem with a different API.
It supports both "flag" style and "key-value" style modifiers on blocks and elements.
import Html.Bem as Bem
view : String -> { sticky : Bool, title : String, bodyData : BodyData } -> Html msg
view blockName model =
let
block =
Bem.init blockName
headerEl =
block.element "header"
bodyEl =
block.element "body"
in
div
[ block |> Bem.block ]
[ header
[ headerEl |> Bem.elementIf "sticky" model.sticky ]
[ h1 [] [ text model.title ] ]
, div
[ bodyEl |> Bem.elementOf "type" model.bodyData.bodyType ]
[ viewBody block model.bodyData ]
]
viewBody : Bem.Block -> BodyData -> Html msg
viewBody block bodyData =
-- render sub-elements tied to the top-level Bem.Block
Then calling
view
"thing"
{ sticky: True, title: "Thing", bodyData = { bodyType = "article", ... } }
results in
<div class="thing">
<header class="thing__header thing__header--sticky">
<h1>Thing</h1>
</header>
<div class="thing__body thing__body--type-article">
...
</div>
</div>
Install in the root of your project
$ elm install ericgj/elm-bem
and import in your modules like
import Html.Bem