This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
README

Css

A library to create and use css stylesheets in Elm.

Type Definitions

type alias Node = String

Css node. It can be a Rule, an @Rule, a SelectorGroup, a Declaration etc...

Constructors

stylesheet : List Node -> Html msg

Returns an Html Style Element from a list of nodes.

assign : Node -> Node -> Node

Returns a Declaration from a property and a value.

declare : Node -> List Node -> Node

Returns a Node from a head and a body.

declares : List Node -> List Node -> Node

Returns a Rule from a list of selectors and a list of declarations.

Html Elements

style : List (Attribute msg) -> List (Html msg) -> Html msg

Html style tag.

Operators

module Css exposing
  ( Node
  , stylesheet, assign, declare, declares
  , style
  , (:-), (=>), (==>)
  )

{-| A library to create and use css stylesheets in Elm.

# Type Definitions
@docs Node

# Constructors
@docs stylesheet, assign, declare, declares

# Html Elements
@docs style

# Operators
@docs (:-), (=>), (==>)
-}

import Html exposing (Html, text, node, Attribute)
import List exposing (map)
import String exposing (concat)


{-------------------------------------------------------------------------------
                               Type Definitions
-------------------------------------------------------------------------------}


{-| Css node. It can be a Rule, an @Rule, a SelectorGroup, a Declaration etc...
-}
type alias Node =
  String


{-------------------------------------------------------------------------------
                                    Helpers
-------------------------------------------------------------------------------}


{-| Returns an Html Style Element from a list of nodes.
-}
stylesheet : List Node -> Html msg
stylesheet nodes =
  style [] (map text nodes)


{-| Returns a Declaration from a property and a value.
-}
assign : Node -> Node -> Node
assign property value =
  property ++ " : " ++ value ++ "; "


{-| Returns a Node from a head and a body.
-}
declare : Node -> List Node -> Node
declare head body =
  head ++ " { " ++ concat body ++ "} "


{-| Returns a Rule from a list of selectors and a list of declarations.
-}
declares : List Node -> List Node -> Node
declares head body =
  String.join ", " head ++ " { " ++ String.concat body ++ "} "


{-------------------------------------------------------------------------------
                                 HTML Elements
-------------------------------------------------------------------------------}


{-| Html style tag.
-}
style : List (Attribute msg) -> List (Html msg) -> Html msg
style =
  node "style"


{-------------------------------------------------------------------------------
                                  Operators
-------------------------------------------------------------------------------}


{-| For Property :- Value. Alias of assign.
-}
(:-) : Node -> Node -> Node
(:-) = assign


{-| For Node => [Node]. Alias of declare.
-}
(=>) : Node -> List Node -> Node
(=>) = declare


{-| For [Selector] ==> [Declaration]. Alias of declares.
-}
(==>) : List Node -> List Node -> Node
(==>) = declares