Css

This module is designed to allow you to add type-safe CSS styling to your rendered Html via style tags. It has basic support for @import directives and CSS rules.

Assuming you have types for id and class attributes, you "compile" a Stylesheet with the stylesheet function and use the functions returned in the Stylesheet to generate id and class attributes.

For example:

type Id
    = MyId


type Class
    = MyClass




-- import some google fonts
imports =
    [ "https://fonts.googleapis.com/css?family=Droid+Sans:400,700"
    ]




-- create ruels, notice the use of MyId and MyClass.
rules =
    [ { selectors = [ Css.Id MyId ]
      , descriptor = [ ( "color", "red" ) ]
      }
    , { selectors = [ Css.Class MyClass ]
      , descriptor = [ ( "color", "blue" ) ]
      }
    ]




-- compile a stylesheet with imports and a single rule
stylesheet =
    Css.stylesheet imports rules




-- now, add the style node, and safely use your ids and classes
html =
    div []
        [ Css.style [ Html.Attributes.scoped True ] stylesheet
        , div [ stylesheet.id MyId ] [ text "Using MyId" ]
        , div [ stylesheet.class MyClass ] [ text "Using MyClass" ]
        ]

Types

type alias Stylesheet id cls msg =

{ node : Html msg

, id : id -> Attribute msg

, class : cls -> Attribute msg

, classes : List cls -> Attribute msg

}

A Stylesheet is a "compiled" Html text node, as well as functions that allow you to safely create Html.Attributes for the id and class of your tags. It is returned by the stylesheet function.

type Sel id cls

= Type String

| Id id

| Class cls

| Descendant (Sel id cls) (Sel id cls)

| Child (Sel id cls) (Sel id cls)

| Sibling (Sel id cls) (Sel id cls)

| Adjacent (Sel id cls) (Sel id cls)

| Pseudo (List Pseudo) (Sel id cls)

CSS rule selectors follow the all the selectors found here except for attribute selectors.

The most common selectors are the Type, Id, and Class selectors. The others are combinator selectors or pseudo-class/element selectors. Some examples:

-- div { ... }
Type "div"




-- #MyId { ... }
Id MyId




-- .MyClass { ... }
Class MyClass




-- div #Content { ... }
Descendant (Id Content) (Type "div")




-- span > .MyClass { ... }
Child (Class MyClass) (Type "span")




-- hr ~ p:first-line:first-letter { ... }
Pseudo [ FirstLine, FirstLetter ] <| Sibling (Type "p") (Type "hr")

Take a moment to notice that for combinators, the most specific element being styled (what would be last in the selector) appears first in code.

type Pseudo

= Any

| Default

| Link

| Visited

| Hover

| Active

| Focus

| Target

| Enabled

| Disabled

| Checked

| Indeterminate

| Invalid

| Valid

| Fullscreen

| Root

| Scope

| FirstChild

| LastChild

| NthChild Int

| NthLastChild Int

| NthOfType String

| NthLastOfType String

| FirstOfType

| LastOfType

| OnlyOfType

| Empty

| Left

| Right

| Lang String

| Dir String

| FirstLetter

| FirstLine

| Before

| After

| Selection

| Backdrop

Pseudo CSS selectors and elements. These are chained together in the Pseudo selector.

type alias Descriptor =

List ( String, String )

A list of key/value style properties.

type alias Rule id cls =

{ selectors : List (Sel id cls)

, descriptor : Descriptor

}

A Rule is a list of matching selectors and a descriptor, which is a list of key/value style pairs. Each selector is a separate possible match for the rule. For example:

[ Sel.Id MyId
, Sel.Class MyClass
, Sel.Type "div"
, Sel.Sibling (Sel.Type "a") (Sel.Type "hr")
]

That list of selectors would be the same as the following rule in CSS:

#MyId, .MyClass, div, hr a { ... }

Functions

stylesheet : List String -> List (Rule id cls) -> Stylesheet id cls msg

Compiles a Stylesheet if given a list of urls to @import and a list of Rules to generate. The Stylesheet contains the imports, rules (rendered as strings) and functions for creating type-safe id and class attributes.

style : List (Attribute msg) -> Stylesheet id cls msg -> Html msg

Render a style tag node.

massung/elm-css/1.1.2

Css

Types

Functions

Modules