|elm-version||0.18.0 <= v < 0.19.0|
|Committed At||2017-03-22 09:46:18 UTC|
redBackgroundClass = makeClass "redBackground" [ "background-color: #e00" ]  view model = div [ class redBackgroundClass ] [ span [ onClick 5 , style [ "background-color: blue" , "font-size: 30px" ] [ selector ":hover" [ "background-color: cyan" ]  ] ] [ text (toString model) ] ]
This package is experimental. Expect bugs, awkward & changing interface and poor performance.
Install the package:
elm-package install --yes xarvh/elm-styled-html
Html imports with the respective
import Html exposing (..) import Html.Attributes as Attributes exposing (class)
import StyledHtml as Html exposing (..) import StyledHtml.Attributes as Attributes exposing (class)
The syntax for
Attributes.style has changed, it now takes two lists as arguments:
div [ Attributes.style [ "background-color: blue" ] [ StyledHtml.Css.selector ":hover" [ "text-transform: uppercase" ]  ] ] [ text "I have blue background and become uppercase on hover!" ]
The first list is for the normal style attributes.
The second list is for composed selectors.
See the docs for the StyledHtml.Css module for more details!
The syntax for
Attributes.class has changed, you have to use
to create the class first:
classButton = StyledHtml.Css.makeClass "button" [ "padding: 10px" , "border: 1px solid blue" ] [ StyledHtml.Css.selector ":hover" [ "background-color: purple" ]  ]
Again, the first list is for style attributes, the second list is for composed selectors.
div [ Attributes.class classButton ] [ text "I look like a button" ]
Check StyledHtml.Css.andClass to see how to compose classes together!
That's all you need to start playing around. If you need more control, check the docs and the examples.
Yes, you can use this transform:
elmCssMixinsToStyledHtmlSnippets : List Css.Mixin -> List String elmCssMixinsToStyledHtmlSnippets elmCssMixins = elmCssMixins |> Css.asPairs |> List.map (\( name, value ) -> name ++ ": " ++ value)
Yes, but it might affect the rendering performance. See below.
There might be a few:
The package is experimental. I'll learn as I use it. I really don't know what to expect.
<style> tag will change dynamically with the page. This might force the browser to redraw a lot more than necessary.
The calculations done under the hood might affect performance. Inlined anonymous classes are rebuilt and hashed at every rendering cycle.
Html.Keyed are not yet implemented.