What works for me is:
- Separate CSS file for static styling and basic UI animations, so I
only need to add class attributes in view functions.
- Layout, fonts, hover and focused states etc etc all go in css file.
- So e.g. if I want to make give a "selected" element in a list a
different background-color, I use elm to apply a class of e.g.
"item--selected", and use css to define the styling.
- Basic UI animations: E.g. I have a dropdown menu for which appears
if a button is clicked. This is handled completely in css, using the
:focus
state of of the button to unhide the dropdown.
- Do transitions and more complicated animations directly in elm.
- Unfortunately, css can only handle basic animations/ transitions.
- E.g. for drag and drop, do positioning directly in elm (but I keep
the styling in css)
I use webpack for development, but I have not yet found a way to
"automatically" import the right css files needed.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
