Svg.Bem

Utilities for building CSS class names based on BEM conventions, for Svg nodes.

Creating

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"

Unmodified block and element classes

block : Block -> Attribute a

Class attribute for unmodified block

Bem.init "my-block" |> Bem.block
    -- class "my-block"

element : Element -> Attribute a

Class attribute for unmodified element

Bem.init "my-block" |> .element "my-element" |> Bem.element
    -- class "my-block__my-element"

Flag modified block and element classes

blockMod : String -> Block -> Attribute a

Class attribute for "flag" modified block

Bem.init "my-block" |> Bem.blockMod "flagged"
    -- class "my-block my-block--flagged"

elementMod : String -> Element -> 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 -> Bool -> Block -> 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 -> Bool -> Element -> 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, Bool ) -> Block -> 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, Bool ) -> Element -> 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 ) ]

Key-value modified block and element classes

blockOf : String -> String -> Block -> 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 -> 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 -> 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 -> 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" ) ]

Raw class strings

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"

Types

type alias Block =

{ name : String

, element : String -> Element

}

Type for building block classes, and constructing elements of blocks.

type alias Element =

{ block : String

, name : String

}

Type for building element classes.

ericgj/elm-bem/1.1.0