Utilities for building CSS class names based on BEM conventions, for Svg nodes.
init : String -> Block
Construct a top-level Block with given name.
Note an Element can only be constructed through the .element
of
a Block like this:
let
block =
Bem.init "my-block"
in
block.element "my-element"
block : Block -> Svg.Attribute a
Class attribute for unmodified block
Bem.init "my-block" |> Bem.block
-- class "my-block"
element : Element -> Svg.Attribute a
Class attribute for unmodified element
Bem.init "my-block" |> .element "my-element" |> Bem.element
-- class "my-block__my-element"
blockMod : String -> Block -> Svg.Attribute a
Class attribute for "flag" modified block
Bem.init "my-block" |> Bem.blockMod "flagged"
-- class "my-block my-block--flagged"
elementMod : String -> Element -> Svg.Attribute a
Class attribute for "flag" modified element
Bem.init "my-block" |> .element "my-element" |> Bem.elementMod "flagged"
-- class "my-block__my-element my-block__my-element--flagged"
blockIf : String -> Basics.Bool -> Block -> Svg.Attribute a
Class attribute for "flag" modified block, based on given boolean flag
Bem.init "my-block" |> Bem.blockIf "flagged" isFlagged
-- class "my-block my-block--flagged" (if isFlagged is True)
-- class "my-block" (if isFlagged is False)
elementIf : String -> Basics.Bool -> Element -> Svg.Attribute a
Class attribute for "flag" modified element, based on given boolean flag
Bem.init "my-block" |> .element "my-element" |> Bem.elementIf "flagged" isFlagged
-- class "my-block__my-element my-block__my-element--flagged" (if isFlagged is True)
-- class "my-block__my-element" (if isFlagged is False)
blockList : List ( String, Basics.Bool ) -> Block -> Svg.Attribute a
Class attribute for "flag" modified block, with multiple flags applied. Similar to Html.Attributes.classList for flag-modified blocks.
Bem.init "my-block"
|> Bem.blockList [ ( "flagged", isFlagged ), ( "editable", isEditable ) ]
elementList : List ( String, Basics.Bool ) -> Element -> Svg.Attribute a
Class attribute for "flag" modified element, with multiple flags applied. Similar to Html.Attributes.classList for flag-modified elements.
Bem.init "my-block"
|> .element "my-element"
|> Bem.elementList [ ( "flagged", isFlagged ), ( "editable", isEditable ) ]
blockOf : String -> String -> Block -> Svg.Attribute a
Class attribute for "key-value" modified block
Bem.init "my-block" |> Bem.blockOf "type" "foo"
-- class "my-block my-block--type-foo"
elementOf : String -> String -> Element -> Svg.Attribute a
Class attribute for "key-value" modified element
Bem.init "my-block" |> .element "my-element" |> Bem.elementOf "type" "foo"
-- class "my-block__my-element my-block__my-element--type-foo"
blockOfList : List ( String, String ) -> Block -> Svg.Attribute a
Class attribute for "key-value" modified block, with multiple key-value pairs applied.
Bem.init "my-block"
|> Bem.blockOfList [( "type", "foo" ), ( "status", "open" ) ]
elementOfList : List ( String, String ) -> Element -> Svg.Attribute a
Class attribute for "key-value" modified element, with multiple key-value pairs applied.
Bem.init "my-block"
|> .element "my-element"
|> Bem.elementOfList [( "type", "foo" ), ( "status", "open" ) ]
elementName : Element -> String
Element class string, e.g. "my-block__my-element"
elementNameMod : Element -> String -> String
Element class string with given flag modifier, e.g. "my-block__my-element--flag"
elementNameOf : Element -> String -> String -> String
Element class string with given key-value modifier, e.g. "my-block__my-element--key-value"
{ name : String
, element : String -> Element
}
Type for building block classes, and constructing elements of blocks.
{ block : String
, name : String
}
Type for building element classes.