proda-ai / elm-css / Css.Global

Apply global CSS to things like foreign DOM structures (e.g. generated from markdown) where you cannot add attributes.

This module relies on CSS selectors which are globally scoped and bad for maintainability, so definitely avoid using this module except when there is no reasonable way do to it using Style instead!

Global Styles

global : List Snippet -> Html.Styled.Html msg

Add global styles to the page. This compiles directly to a <style> element.


type alias Snippet =
Css.Preprocess.Snippet

Statements

class : String -> List Css.Preprocess.Style -> Snippet

A class selector.

global
    [ class "login-form-button"
        [ fontWeight normal
        , color (rgb 128 64 32)
        ]
    ]

id : String -> List Css.Preprocess.Style -> Snippet

An id selector.

global
    [ id "nav-bar"
        [ width 960 px
        , backgroundColor (rgb 123 42 208)
        ]
    ]

selector : String -> List Css.Preprocess.Style -> Snippet

A custom selector. Use this for things like attribute selectors and universal selectors.

global
    [ selector "* [lang^=en]"
        [ textDecoration underline
        , color (rgb 7 7 7)
        ]
    ]

everything : List Css.Preprocess.Style -> Snippet

A * selector.

class "Foo"
    [ children
        [ everything
            [ color (rgb 14 15 16)
            , borderRadius (px 5)
            ]
        ]
    ]

...compiles to:

.Foo > * {
  color: rgb(14, 15, 16);
  border-radius: 5px;
}

media : List Css.Media.MediaQuery -> List Snippet -> Snippet

Combines media queries into a @media rule.

global
    [ media [ only screen [ Media.minWidth (px 300) ] ]
        [ footer [ Css.maxWidth (px 300) ] ]
    ]

The above code translates into the following CSS.

@media screen and (min-width: 300px) {
    footer {
        max-width: 300px;
    }
}

mediaQuery : List String -> List Snippet -> Snippet

Manually specify a @media rule using a List of strings.

mediaQuery [ "screen and (min-width: 320px)", "screen and (max-height: 400px)" ]
    [ body [ fontSize (px 14) ] ]

The above code translates into the following CSS.

@media screen and (min-width: 320px), screen and (max-height: 400px) {
    body {
        font-size: 14px;
    }
}

Combinators

children : List Snippet -> Css.Preprocess.Style

Apply styles in a list of snippets to the direct children of a selector

typeSelector "div"
    [ children
        [ typeSelector "p"
            [ fontSize (px 14)
            ]
        ]
    ]

The above code translates into the following CSS.

div > p {
    font-size: 14px;
}

descendants : List Snippet -> Css.Preprocess.Style

Apply styles in a list of snippets to the descendants of a selector

typeSelector "div"
    [ descendants
        [ typeSelector "p"
            [ fontSize (px 14)
            ]
        ]
    ]

The above code translates into the following CSS.

div p {
    font-size: 14px;
}

adjacentSiblings : List Snippet -> Css.Preprocess.Style

Apply styles in a list of snippets to the adjacent siblings of a selector

typeSelector "div"
    [ adjacentSiblings
        [ typeSelector "p"
            [ fontSize (px 14)
            ]
        ]
    ]

The above code translates into the following CSS.

div + p {
    font-size: 14px;
}

generalSiblings : List Snippet -> Css.Preprocess.Style

Apply styles in a list of snippets to the general siblings of a selector

typeSelector "div"
    [ generalSiblings
        [ typeSelector "p"
            [ fontSize (px 14)
            ]
        ]
    ]

The above code translates into the following CSS.

div ~ p {
    font-size: 14px;
}

each : List (List Css.Preprocess.Style -> Snippet) -> List Css.Preprocess.Style -> Snippet

Apply a list of styles to multiple selectors

each [ typeSelector "div", typeSelector "p" ]
    [ fontSize (px 14)
    ]

The above code translates into the following CSS.

div {
    font-size: 14px;
}

p {
    font-size: 14px;
}

withAttribute : String -> List Css.Preprocess.Style -> Css.Preprocess.Style

Apply styles to the current selector plus an attribute selector

typeSelector "div"
    [ fontSize (px 14)
    , withAttribute "data-some-attribute"
        [ display none
        ]
    , withAttribute "data-hello=world"
        [ color red
        ]
    ]

The above code translates into the following CSS.

div {
    font-size: 14px;
}

div[data-some-attribute] {
    display: none;
}

div[data-hello=world] {
    color: red;
}

withClass : String -> List Css.Preprocess.Style -> Css.Preprocess.Style

Apply styles to the current selector plus an additional class

typeSelector "div"
    [ fontSize (px 14)
    , withClass "is-bold"
        [ fontWeight bold
        ]
    ]

The above code translates into the following CSS.

div {
    font-size: 14px;
}

div.is-bold {
    font-weight: bold;
}

Basic elements

typeSelector : String -> List Css.Preprocess.Style -> Snippet

Define a custom element.

global
    [ typeSelector "aside" [ display block ]
    ]

...outputs

aside {
    display: block;
}

html : List Css.Preprocess.Style -> Snippet

Selector for a html element.

body : List Css.Preprocess.Style -> Snippet

Selector for a body element.

Content sectioning

article : List Css.Preprocess.Style -> Snippet

Selector for an article element.

header : List Css.Preprocess.Style -> Snippet

Selector for a header element.

footer : List Css.Preprocess.Style -> Snippet

Selector for a footer element.

h1 : List Css.Preprocess.Style -> Snippet

Selector for an h1 element.

h2 : List Css.Preprocess.Style -> Snippet

Selector for an h2 element.

h3 : List Css.Preprocess.Style -> Snippet

Selector for an h3 element.

h4 : List Css.Preprocess.Style -> Snippet

Selector for an h4 element.

h5 : List Css.Preprocess.Style -> Snippet

Selector for an h5 element.

h6 : List Css.Preprocess.Style -> Snippet

Selector for an h6 element.

nav : List Css.Preprocess.Style -> Snippet

Selector for a nav element.

menu : List Css.Preprocess.Style -> Snippet

Selector for a menu element.

section : List Css.Preprocess.Style -> Snippet

Selector for a section element.

aside : List Css.Preprocess.Style -> Snippet

Selector for a aside element.

time : List Css.Preprocess.Style -> Snippet

Selector for a time element.

details : List Css.Preprocess.Style -> Snippet

Selector for a details element.

summary : List Css.Preprocess.Style -> Snippet

Selector for a summary element.

Text content

div : List Css.Preprocess.Style -> Snippet

Selector for a div element.

hr : List Css.Preprocess.Style -> Snippet

Selector for an hr element.

li : List Css.Preprocess.Style -> Snippet

Selector for an li element.

main_ : List Css.Preprocess.Style -> Snippet

Selector for a main element.

ol : List Css.Preprocess.Style -> Snippet

Selector for an ol element.

p : List Css.Preprocess.Style -> Snippet

Selector for a p element.

ul : List Css.Preprocess.Style -> Snippet

Selector for a ul element.

pre : List Css.Preprocess.Style -> Snippet

Selector for a pre element.

dl : List Css.Preprocess.Style -> Snippet

Selector for a dl element.

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl>

dt : List Css.Preprocess.Style -> Snippet

Selector for a dt element.

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt>

dd : List Css.Preprocess.Style -> Snippet

Selector for a dd element.

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd>

blockquote : List Css.Preprocess.Style -> Snippet

Selector for a blockquote element.

Inline text semantics

a : List Css.Preprocess.Style -> Snippet

Selector for an <a> element.

code : List Css.Preprocess.Style -> Snippet

Selector for a code element.

small : List Css.Preprocess.Style -> Snippet

Selector for a small element.

span : List Css.Preprocess.Style -> Snippet

Selector for a span element.

strong : List Css.Preprocess.Style -> Snippet

Selector for a strong element.

i : List Css.Preprocess.Style -> Snippet

Selector for a i element.

em : List Css.Preprocess.Style -> Snippet

Selector for a em element.

q : List Css.Preprocess.Style -> Snippet

Selector for a q element.

Image and multimedia

img : List Css.Preprocess.Style -> Snippet

Selector for a img element.

audio : List Css.Preprocess.Style -> Snippet

Selector for an audio element.

video : List Css.Preprocess.Style -> Snippet

Selector for a video element.

canvas : List Css.Preprocess.Style -> Snippet

Selector for a canvas element.

Table content

caption : List Css.Preprocess.Style -> Snippet

Selector for a caption element.

col : List Css.Preprocess.Style -> Snippet

Selector for a col element.

colgroup : List Css.Preprocess.Style -> Snippet

Selector for a colgroup element.

table : List Css.Preprocess.Style -> Snippet

Selector for a table element.

tbody : List Css.Preprocess.Style -> Snippet

Selector for a tbody element.

td : List Css.Preprocess.Style -> Snippet

Selector for a td element.

tfoot : List Css.Preprocess.Style -> Snippet

Selector for a tfoot element.

th : List Css.Preprocess.Style -> Snippet

Selector for a th element.

thead : List Css.Preprocess.Style -> Snippet

Selector for a thead element.

tr : List Css.Preprocess.Style -> Snippet

Selector for a tr element.

Forms

button : List Css.Preprocess.Style -> Snippet

Selector for a button element.

fieldset : List Css.Preprocess.Style -> Snippet

Selector for a fieldset element.

form : List Css.Preprocess.Style -> Snippet

Selector for a form element.

input : List Css.Preprocess.Style -> Snippet

Selector for an input element.

label : List Css.Preprocess.Style -> Snippet

Selector for a label element.

legend : List Css.Preprocess.Style -> Snippet

Selector for a legend element.

optgroup : List Css.Preprocess.Style -> Snippet

Selector for an optgroup element.

option : List Css.Preprocess.Style -> Snippet

Selector for an option element.

progress : List Css.Preprocess.Style -> Snippet

Selector for a progress element.

select : List Css.Preprocess.Style -> Snippet

Selector for a select element.

textarea : List Css.Preprocess.Style -> Snippet

Selector for a textarea element.

SVG

svg : List Css.Preprocess.Style -> Snippet

Selector for a svg element.

path : List Css.Preprocess.Style -> Snippet

Selector for a path element.

rect : List Css.Preprocess.Style -> Snippet

Selector for a rect element.

circle : List Css.Preprocess.Style -> Snippet

Selector for a circle element.

ellipse : List Css.Preprocess.Style -> Snippet

Selector for a ellipse element.

line : List Css.Preprocess.Style -> Snippet

Selector for a line element.

polyline : List Css.Preprocess.Style -> Snippet

Selector for a polyline element.

polygon : List Css.Preprocess.Style -> Snippet

Selector for a polygon element.