none : Html msg
none =
    Html.text ""

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

container : List (Attribute msg) -> Html msg -> Html msg
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 : List (Attribute msg) -> Html msg -> Html msg
el attrs content =
    Html.div
        (Html.Attributes.style "display" "flex"
            :: attrs
        )
        [ content ]

column : List (Attribute msg) -> List (Html msg) -> Html msg
column attrs =
    Html.div
        ([ Html.Attributes.style "display" "flex"
         , Html.Attributes.style "flex-direction" "column"
         ]
            ++ attrs
        )

row : List (Attribute msg) -> List (Html msg) -> Html msg
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 : List (Attribute msg) -> List (Html msg) -> Html msg
unwrappedRow attrs =
    Layout.row (Layout.noWrap ++ attrs)

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

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

descriptionList :
    List (Attribute msg)
    -> List { description : ( List (Attribute msg), Html msg ), item : ( List (Attribute msg), Html msg ) }
    -> Html msg
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 ])
                    ]
                )
        )

paragraph : List (Attribute msg) -> Html msg -> Html msg
paragraph attrs content =
    Html.p
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading1 : List (Attribute msg) -> Html msg -> Html msg
heading1 attrs content =
    Html.h1
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading2 : List (Attribute msg) -> Html msg -> Html msg
heading2 attrs content =
    Html.h2
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading3 : List (Attribute msg) -> Html msg -> Html msg
heading3 attrs content =
    Html.h3
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading4 : List (Attribute msg) -> Html msg -> Html msg
heading4 attrs content =
    Html.h4
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading5 : List (Attribute msg) -> Html msg -> Html msg
heading5 attrs content =
    Html.h5
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

heading6 : List (Attribute msg) -> Html msg -> Html msg
heading6 attrs content =
    Html.h6
        (Html.Attributes.style "display" "flex" :: attrs)
        [ content ]

image : List (Attribute msg) -> { src : String, description : String } -> Html msg
image attrs args =
    Html.img
        ([ Html.Attributes.src args.src
         , Html.Attributes.alt args.description
         ]
            ++ attrs
        )
        []

linkTo : String -> List (Attribute msg) -> Html msg -> Html msg
linkTo link attrs content =
    Html.a
        (Html.Attributes.href link
            :: attrs
        )
        [ content ]

linkToNewTab : String -> List (Attribute msg) -> Html msg -> Html msg
linkToNewTab link attrs content =
    Html.a
        ([ Html.Attributes.href link
         , Html.Attributes.target "_blank"
         ]
            ++ attrs
        )
        [ content ]

buttonEl : { onPress : Maybe msg, label : String } -> List (Attribute msg) -> Html msg -> Html msg
buttonEl args attrs content =
    Html.button (asEl :: asButton args ++ attrs)
        [ content ]

radio :
    { onChange : Bool -> msg
    , checked : Bool
    , label : String
    }
    -> List (Attribute msg)
    -> Html msg
radio args attrs =
    Html.input
        ([ Html.Attributes.type_ "radio"
         , Html.Attributes.checked args.checked
         , Html.Attributes.attribute "aria-label" args.label
         ]
            ++ attrs
        )
        []

lineBreak : Html msg
lineBreak =
    Html.br [] []

horizontalRuler : List (Attribute msg) -> Html msg
horizontalRuler attrs =
    Html.hr attrs []

centered : List (Attribute msg)
centered =
    [ centerContent, alignCenter ]

alignBaseline : Attribute msg
alignBaseline =
    Html.Attributes.style "align-items" "baseline"

alignCenter : Attribute msg
alignCenter =
    Html.Attributes.style "align-items" "center"

centerContent : Attribute msg
centerContent =
    Html.Attributes.style "justify-content" "center"

noWrap : Attribute msg
noWrap =
    Html.Attributes.style "flex-wrap" "nowrap"

fill : Attribute msg
fill =
    fillPortion 1

fillPortion : Int -> Attribute msg
fillPortion n =
    Html.Attributes.style "flex" (String.fromInt n)

spacing : Float -> Attribute msg
spacing n =
    Html.Attributesstyle "gap" (String.fromFloat n ++ "px")

spaceBetween : Attribute msg
spaceBetween =
    Html.Attributes.style "justify-content" "space-between"

sticky : List (Attribute msg)
sticky =
    [ Html.Attributes.style "position" "sticky"
    , Html.Attributes.style "z-index" "99999"
    ]

stickyOnBottom : List (Attribute msg)
stickyOnBottom =
    [ Html.Attributes.style "position" "sticky"
    , Html.Attributes.style "bottom" "0"
    , Html.Attributes.style "z-index" "99999"
    ]

stickyOnTop : List (Attribute msg)
stickyOnTop =
    [ Html.Attributes.style "position" "sticky"
    , Html.Attributes.style "top" "0"
    , Html.Attributes.style "z-index" "99999"
    ]

asEl : Attribute msg
asEl =
    Html.Attributes.style "display" "flex"

Turns anything into a button

asButton : { onPress : Maybe msg, label : String } -> List (Attribute msg)
asButton args =
    [ Html.Attributes.attribute "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 []
           )

@deprecated type signature will change in next major update. Until then, use buttonEl.

button : { onPress : Maybe msg, label : String } -> List (Attribute msg) -> Html msg
button args attrs =
    Html.div (asButton args ++ attrs)
        [ Html.text args.label ]