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
        )

none : Html msg
none =
    Html.text ""

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)

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

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"
    ]

Turns anything into a button

asButton : { onPress : Maybe msg, label : String } -> List (Attribute msg)
asButton args =
    [ Html.Attributes.type_ "button"
    , Html.Attributes.attribute "cursor" "pointer"
    , Html.Attributes.attribute "aria-label" args.label
    ]
        ++ (args.onPress
                |> Maybe.map (\msg -> [ Html.Events.onClick msg ])
                |> Maybe.withDefault []
           )