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 (Element.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 (Element.Attribute msg) -> Element msg -> Html msg
A replacement of Element.layout
adding both the Framework.layoutOptions
and the Framework.layoutAttributes.
container : List (Element.Attribute msg)
The container should be the outer most element. It centers the content and sets the background to white.
layoutOptions : List Element.Option
The default layoutOptions. Check the source code if you want to know more.
layoutAttributes : List (Element.Attribute msg)
The default Attributes. Check the source code if you want to know more.