rtfeldman/elm-css-helpers/1.2.0

NOTE: this package is not compatible with Elm 0.19.1

Html.CssHelpers

Helper functions for using elm-css with elm-html.

withNamespace : name -> Namespace name class id

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>
style : String -> Html

Create an inline style from CSS

type alias Helpers class id =
{ class : List class -> Attribute
, classList : List ( class, Bool ) -> Attribute
, id : id -> Attribute
}

Helpers for working on a given class/id

type alias Namespace name class id =
{ class : List class -> Attribute
, classList : List ( class, Bool ) -> Attribute
, id : id -> Attribute
, name : name
}

namespaced helpers for working on a given class/id