danielnarey/elm-modular-ui/1.0.2

NOTE: this package is not compatible with Elm 0.19.1

Ui.Modifier

Customizing UI Elements: Modifier Classes

Modifier classes change the style properties of UI elements, like color, size, and spacing, and may add responsive styling via CSS media queries. Bulma CSS includes modifier classes for many elements, or you can define your own using a custom stylesheet.

Generic functions for adding modifiers

add : String -> Element msg -> Element msg

Add a single modifier class to a UI element

myElement
  |> Ui.Modifier.add "has-text-centered"
addList : List String -> Element msg -> Element msg

Add a list of modifier classes to a UI element

myElement
  |> Ui.Modifier.addList
    [ "box"
    , "has-text-centered"
    ]
conditional : ( String, Bool ) -> Element msg -> Element msg

Conditionally add a modifier class if the boolean argument is True

myElement
  |> Ui.Modifier.conditional
    ( "has-text-centered"
    , myElement
      |> Dom.Element.hasClass "box"


    )