none =
    Html.text ""

Fills the entire screen. Should be the outer most element.

container attrs =
    el
        ([ Html.Attributes.style "width" "100%"
         , Html.Attributes.style "height" "100%"
         , Html.Attributes.style "position" "absolute"
         , Html.Attributes.style "left" "0px"
         , Html.Attributes.style "top" "0px"
         ]
            ++ attrs
        )

el attrs content =
    Html.div
        (Html.Attributes.style "display" "flex"
            :: attrs
        )
        [ content ]

column attrs =
    Html.div
        ([ Html.Attributes.style "display" "flex"
         , Html.Attributes.style "flex-direction" "column"
         ]
            ++ attrs
        )

row attrs =
    Html.div
        ([ Html.Attributes.style "display" "flex"
         , Html.Attributes.style "flex-direction" "row"
         , Html.Attributes.style "flex-wrap" "wrap"
         ]
            ++ attrs
        )

Will wrap into the next line if there is not enough space.

If you don't want this behavior, you can just add noWrap:

unwrappedRow attrs =
    Layout.row (Layout.noWrap ++ attrs)

A stack places the content on top of each other. The first element is the lowest.

withStack : List (Attribute msg) -> List (List (Attribute msg) -> Html msg) -> Html msg -> Html msg
withStack attrs list base =
    list
        |> List.map
            (\fun ->
                fun [ Html.Attributes.style "position" "absolute" ]
            )
        |> (::) base
        |> Html.div
            ([ Html.Attributes.style "display" "flex"
             , Html.Attributes.style "position" "relative"
             ]
                ++ attrs
            )

orderedList attrs content =
    Html.ol
        (Html.Attributes.style "display" "flex" :: attrs)
        (content
            |> List.map (\( a, h ) -> Html.li a [ h ])
        )

unorderedList attrs content =
    Html.ul
        (Html.Attributes.style "display" "flex" :: attrs)
        (content
            |> List.map (\( a, h ) -> Html.li a [ h ])
        )

descriptionList attrs content =
    Html.dl
        (Html.Attributes.style "display" "flex" :: attrs)
        (content
            |> List.concatMap
                (\{ description, item } ->
                    [ description |> (\( a, h ) -> Html.dt a [ h ])
                    , item |> (\( a, h ) -> Html.dd a [ h ])
                    ]
                )
        )

heading1 attrs content =
    Html.h1
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading2 attrs content =
    Html.h2
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading3 attrs content =
    Html.h3
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading4 attrs content =
    Html.h4
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading5 attrs content =
    Html.h5
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading6 attrs content =
    Html.h6
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

text : List (Attribute msg) -> String -> Html msg
text attrs content =
    el attrs (Html.text content)

image attrs args =
    Html.img
        ([ Html.Attributes.src args.src
         , Html.Attributes.alt args.description
         ]
            ++ attrs
        )
        []

linkTo attrs link content =
    Html.a
        (Html.Attributes.href link
            :: attrs
        )
        [ content ]

linkToNewTab attrs link content =
    Html.a
        ([ Html.Attributes.href link
         , Html.Attributes.target "_blank"
         ]
            ++ attrs
        )
        [ content ]

textButton attrs args =
    Html.button (asButton args ++ attrs)
        [ Html.text args.label ]

button args attrs content =
    Html.button (asEl :: asButton args ++ attrs)
        [ content ]

radio attrs args =
    Html.input
        ([ Html.Attributes.type_ "radio"
         , Html.Attributes.checked args.checked
         , Html.Attributes.attribute "aria-label" args.label
         ]
            ++ attrs
        )
        []

paragraph attrs content =
    Html.p
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

lineBreak =
    Html.br [] []

horizontalRuler attrs =
    Html.hr attrs []

centered =
    [ contentCentered, alignAtCenter ]

noWrap =
    Html.Attributes.style "flex-wrap" "nowrap"

wrap =
    Html.Attributes.style "flex-wrap" "wrap"

contentAtStart =
    Html.Attributes.style "justify-content" "flex-start"

contentAtEnd =
    Html.Attributes.style "justify-content" "flex-end"

contentCentered =
    Html.Attributes.style "justify-content" "center"

contentWithSpaceBetween =
    Html.Attributes.style "justify-content" "space-between"

alignAtStart =
    Html.Attributes.style "align-items" "flex-start"

alignAtEnd =
    Html.Attributes.style "align-items" "flex-end"

alignAtBaseline =
    Html.Attributes.style "align-items" "baseline"

alignAtCenter =
    Html.Attributes.style "align-items" "center"

alignStretched =
    Html.Attributes.style "align-items" "stretch"

gap n =
    Html.Attributes.style "gap" (String.fromFloat n ++ "px")

fill =
    fillPortion 1

fillPortion n =
    Html.Attributes.style "flex" (String.fromInt n)

sticky =
    [ Html.Attributes.style "position" "sticky"
    , Html.Attributes.style "z-index" "99999"
    ]

stickyOnBottom =
    [ Html.Attributes.style "position" "sticky"
    , Html.Attributes.style "bottom" "0"
    , Html.Attributes.style "z-index" "99999"
    ]

stickyOnTop =
    [ Html.Attributes.style "position" "sticky"
    , Html.Attributes.style "top" "0"
    , Html.Attributes.style "z-index" "99999"
    ]

asEl =
    Html.Attributes.style "display" "flex"

Turns anything into a button

asButton args =
    [ Html.Attributes.style "cursor" "pointer"
    , Html.Attributes.attribute "aria-label" args.label
    , Html.Attributes.attribute "role" "button"
    ]
        ++ (args.onPress
                |> Maybe.map (\msg -> [ Html.Events.onClick msg ])
                |> Maybe.withDefault []
           )