Takes a namespace and returns helper functions for id, class, and classList which work just like their equivalents in elm-html except that they accept union types and automatically incorporate the given namespace. Also note that class accepts a List instead of a single element; this is so you can specify multiple classes without having to call classList passing tuples that all end in True.

-- Put this before your view code to specify a namespace.
{ id, class, classList } = withNamespace "homepage"


view =
    h1 [ id Hero, class [ Fancy ] ] [ text "Hello, World!" ]


type HomepageIds = Hero | SomethingElse | AnotherId
type HomepageClasses = Fancy | AnotherClass | SomeOtherClass

The above would generate this DOM element:

<h1 id="Hero" class="homepage_Fancy">Hello, World!</h1>

Prepend the given class name to a Html.node function's attributes list.

import Html exposing (Html, Attribute, text)
import Html.Attributes exposing (class)
import Html.CssHelpers exposing (withClass)




{-| Create a `button` variant that automatically includes a "warning" class.
-}
warningButton : List (Attribute msg) -> List (Html msg) -> Html msg
warningButton =
    withClass "warning" button




confirmDeleteButton : Html msg
confirmDeleteButton =
    -- Equivalent to:
    --
    -- button [ class "warning" ] [ text "Confirm Deletion" ]
    warningButton [] [ text "Confirm Deletion" ]

Since class attributes "stack" in Elm (e.g. button [ class "warning", class "centered" ] [] is equivalent to button [ class "warning centered" ] []), this API permits further customization on a per-instance basis, either by using the style attribute or by stacking additional classes (for example warningButton [ class "centered" ] []).

Create an inline style from CSS

Link in a stylesheet from a url

Helpers for working on a given class/id

namespaced helpers for working on a given class/id