Css.Foreign

Style foreign DOM structures (e.g. generated from markdown) where you cannot add attributes.

This works by using CSS selectors which are globally scoped and bad for maintainability, so definitely avoid using this module except when you specifically need to style third-party DOM nodes!

Global Styles

global : List Snippet -> Html msg

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

type alias Snippet =

Snippet

Statements

class : class -> List Style -> Snippet

A class selector.

global
    [ class LoginFormButton
        [ fontWeight normal
        , color (rgb 128 64 32)
        ]
    ]

id : id -> List Style -> Snippet

An id selector.

global
    [ id NavBar
        [ width 960 px
        , backgroundColor (rgb 123 42 208)
        ]
    ]

selector : String -> List 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 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 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 -> Style

descendants : List Snippet -> Style

adjacentSiblings : List Snippet -> Style

generalSiblings : List Snippet -> Style

each : List (List Style -> Snippet) -> List Style -> Snippet

withClass : class -> List Style -> Style

Basic elements

typeSelector : String -> List Style -> Snippet

Define a custom element.

global
    [ typeSelector "aside" [ display block ]
    ]

...outputs

aside {
    display: block;
}

html : List Style -> Snippet

Selector for a html element.

body : List Style -> Snippet

Selector for a body element.

Content sectioning

article : List Style -> Snippet

Selector for an article element.

h1 : List Style -> Snippet

Selector for an h1 element.

h2 : List Style -> Snippet

Selector for an h2 element.

h3 : List Style -> Snippet

Selector for an h3 element.

h4 : List Style -> Snippet

Selector for an h4 element.

h5 : List Style -> Snippet

Selector for an h5 element.

h6 : List Style -> Snippet

Selector for an h6 element.

nav : List Style -> Snippet

Selector for a nav element.

section : List Style -> Snippet

Selector for a section element.

aside : List Style -> Snippet

Selector for a aside element.

time : List Style -> Snippet

Selector for a time element.

Text content

div : List Style -> Snippet

Selector for a div element.

hr : List Style -> Snippet

Selector for an hr element.

li : List Style -> Snippet

Selector for an li element.

main_ : List Style -> Snippet

Selector for a main element.

ol : List Style -> Snippet

Selector for an ol element.

p : List Style -> Snippet

Selector for a p element.

ul : List Style -> Snippet

Selector for a ul element.

pre : List Style -> Snippet

Selector for a pre element.

dl : List Style -> Snippet

Selector for a dl element.

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

dt : List Style -> Snippet

Selector for a dt element.

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

dd : List Style -> Snippet

Selector for a dd element.

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

blockquote : List Style -> Snippet

Selector for a blockquote element.

Inline text semantics

a : List Style -> Snippet

Selector for an <a> element.

code : List Style -> Snippet

Selector for a code element.

small : List Style -> Snippet

Selector for a small element.

span : List Style -> Snippet

Selector for a span element.

strong : List Style -> Snippet

Selector for a strong element.

i : List Style -> Snippet

Selector for a i element.

em : List Style -> Snippet

Selector for a em element.

q : List Style -> Snippet

Selector for a q element.

Image and multimedia

img : List Style -> Snippet

Selector for a img element.

audio : List Style -> Snippet

Selector for an audio element.

video : List Style -> Snippet

Selector for a video element.

canvas : List Style -> Snippet

Selector for a canvas element.

Table content

caption : List Style -> Snippet

Selector for a caption element.

col : List Style -> Snippet

Selector for a col element.

colgroup : List Style -> Snippet

Selector for a colgroup element.

table : List Style -> Snippet

Selector for a table element.

tbody : List Style -> Snippet

Selector for a tbody element.

td : List Style -> Snippet

Selector for a td element.

tfoot : List Style -> Snippet

Selector for a tfoot element.

th : List Style -> Snippet

Selector for a th element.

thead : List Style -> Snippet

Selector for a thead element.

tr : List Style -> Snippet

Selector for a tr element.

Forms

button : List Style -> Snippet

Selector for a button element.

fieldset : List Style -> Snippet

Selector for a fieldset element.

form : List Style -> Snippet

Selector for a form element.

input : List Style -> Snippet

Selector for an input element.

label : List Style -> Snippet

Selector for a label element.

legend : List Style -> Snippet

Selector for a legend element.

optgroup : List Style -> Snippet

Selector for an optgroup element.

option : List Style -> Snippet

Selector for an option element.

progress : List Style -> Snippet

Selector for a progress element.

select : List Style -> Snippet

Selector for a select element.

textarea : List Style -> Snippet

Selector for a textarea element.

SVG

svg : List Style -> Snippet

Selector for a svg element.

path : List Style -> Snippet

Selector for a path element.

rect : List Style -> Snippet

Selector for a rect element.

circle : List Style -> Snippet

Selector for a circle element.

ellipse : List Style -> Snippet

Selector for a ellipse element.

line : List Style -> Snippet

Selector for a line element.

polyline : List Style -> Snippet

Selector for a polyline element.

polygon : List Style -> Snippet

Selector for a polygon element.

rtfeldman/elm-css/13.1.1