This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Functions to help you write CSS in Elm
version 3.0.2
license MIT
native-modules False
elm-version 0.17.1 <= v < 0.18.0
Tag 3.0.2
Committed At 2016-06-16 10:45:08 UTC
elm-lang/html 1.0.0 <= v < 2.0.0 1.1.0
elm-lang/core 4.0.1 <= v < 5.0.0 4.0.5
coreytrampe/elm-vendor 2.0.2 <= v < 3.0.0 2.0.3

Modules

README

elm-css

Functions to help you write CSS in Elm

This is ALPHA quality right now.

The API is unstable and likely to change dramatically! Use at your own risk.

Example

module Main exposing (..)

import Html as H exposing (Html)
import Html.Attributes exposing (href, style)
import Css exposing (..)
import Color exposing (red, white, lightRed)


type Classes
    = Main


( id, class, classes ) =
    namespace "demo"
rules : List Rule
rules =
    [ (.) Main
        [ background (color' red)
        , width (vw 100)
        , height (vh 100)
        , displayFlex
        , flexDirection column
        , alignItems center
        , justifyContent center
        ]
    , descendant [ (.) Main, a ]
        [ color (color' white)
        , textDecoration none
        , fontSize (px 32)
        ]
    , (!:) a hover [ textDecoration underline ]
    ]


main : Html a
main =
    styledNode []
        (withNamespace "demo" rules)
        [ H.div [ class Main ]
            [ H.a [ href "#" ]
                [ H.text "A BIG Centered Link" ]
            , H.div
                -- inline style usage
                [ style
                    [ width (pct 80)
                    , height (px 100)
                    , backgroundColor (color' lightRed)
                    , marginAll (px 40)
                    ]
                ]
                []
            ]
        ]