Framework

This module includes the basic building bocks. Maybe start by copying the follow code into your project:

view : Html msg
view =
    Framework.layout [] <|
        Element.el Framework.container <|
            Element.text "the first element should be a container."

responsiveLayout : List (Attribute msg) -> Element msg -> Html msg

same as layout, but also includes the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will ensure that phones will render the page responsively. Without this, a typical phone will set its internal "screen width" to 1000px and will then manually scale the page to fit the screen.

layout : List (Attribute msg) -> Element msg -> Html msg

A replacement of Element.layout adding both the Framework.layoutOptions and the Framework.layoutAttributes.

container : List (Attribute msg)

The container should be the outer most element. It centers the content and sets the background to white.

layoutOptions : List Option

The default layoutOptions. Check the source code if you want to know more.

layoutAttributes : List (Attribute msg)

The default Attributes. Check the source code if you want to know more.

Orasund/elm-ui-framework/1.6.1

Framework

Modules