Composable styles in Elm. Instead of using the cascade, you can use Elm to compose and reuse styles in your app.
Special thanks to Adam Kowalski for creating the initial version of this.
Inspired by React: CSS in JS by vjeux
Relevant discussion on Elm Discuss
TODO: explain more
import Html exposing (..)
import Style exposing (..)
centeredLayout : List Style
centeredLayout =
[ display flex_
, justifyContent center
, alignItems center
]
columnLayout : Styles
columnLayout =
[ display flex_
, flexDirection column
]
-- we can compose specific styles with the reusable "columnLayout", above
container : Styles
container =
List.concat
[ columnLayout
, [ position absolute
, width (pc 100)
, height (pc 100)
, fontFamily "sans-serif"
]
]
view : Html
view =
div [ style centeredLayout ] [ text "Hello, world!" ]See ./example/MyStyles.elm for a complete example.
The code is almost identical to its Css counterpart, but instead of using hyphen-delimited syntax you use the Elm camelCase. There is one more thing to look out for. As you can see some values in the key value pair end in an _ (ie: flex_). This is done whenever there is both a key and a value that both have the same name. In this case the key will always have the non-underscore name. Therefore flex is a function which sets the flex-grow, flex-shrink, and flex-basis values, while flex_ is the value that can be supplied to display function to enable a flex context for all its direct children.
elm-dynamic-style - add hover effects using this method. I expect to create an alternative to this that lets you use it with this library.
elm-css - Generate .css files from Elm