GlobalWebIndex / class-namespaces / WeakCss

Abstraction for working with Weak Css style class names.

Type and Constructor


type ClassName

ClassName type describes class selector used to style element.

All strings are sanitized to prevent missuse and odd resulting selectors. It's highly recommended to avoid spaces, __ and -- in arguments though.

namespace : String -> ClassName

Construct ClassName with given namespace.

import Html.Attributes exposing (class)

namespace "menu" |> toClass

--> class "menu"

Adding Elements

add : String -> ClassName -> ClassName

Add element

import Html.Attributes exposing (class)

namespace "menu"
    |> add "list"
    |> toClass

--> class "menu__list"

addMany : List String -> ClassName -> ClassName

Add new elements from list.

import Html.Attributes exposing (class)

namespace "menu"
    |> addMany ["item", "link"]
    |> toClass

--> class "menu__item--link"

Convert to Attribute

toClass : ClassName -> Html.Attribute msg

Convert ClassName to Html.Attribute msg.

import Html.Attributes exposing (class)

namespace "menu"
    |> toClass
--> class "menu"

namespace "menu"
    |> add "list"
    |> toClass
--> class "menu__list"

nest : String -> ClassName -> Html.Attribute msg

Add new element and convert to Html.Attribute msg.

import Html.Attributes exposing (class)

namespace "menu"
    |> nest "item"
--> class "menu__item"

namespace "menu"
    |> add "item"
    |> nest "link"
--> class "menu__item--link"

nestMany : List String -> ClassName -> Html.Attribute msg

Add new elements from list and convert it all to Html.Attribute msg.

import Html.Attributes exposing (class)

namespace "menu"
    |> nestMany ["item", "link"]
--> class "menu__item--link"

namespace "menu"
    |> nestMany ["item"]
--> class "menu__item"

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

Add state to last element ClassName and convert to Html.Attribute msg.

import Html.Attributes exposing (class)

isActive : Bool
isActive =
    True

isHighlighted : Bool
isHighlighted =
    False

namespace "menu"
    |> add "item"
    |> withStates
        [ ( "active", isActive )
        , ( "highlighted", isHighlighted )
        ]
--> class "menu__item active"

namespace "menu"
    |> withStates []
--> class "menu"

withActiveStates : List String -> ClassName -> Html.Attribute msg

Add state to last element ClassName and convert to Html.Attribute msg.

import Html.Attributes exposing (class)

namespace "menu"
    |> add "item"
    |> withActiveStates [ "active", "highlighted" ]
--> class "menu__item active highlighted"

namespace "menu"
    |> withActiveStates []
--> class "menu"

Convert to String

toString : ClassName -> String

Convert the ClassName into a String