rtfeldman/elm-css/1.1.0

NOTE: this package is not compatible with Elm 0.19.1

Html.CssHelpers

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

namespace : 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 } = namespace "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>