basic layout example using elm-ui

Layout.elm

-- Elm 0.19.0
-- mdgriffith/elm-ui 1.1.0
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font

main =
  layout [] myLayout

-- COLORS

sideBarBGColor =
  Background.color (rgb 0.9 0.5 0.9)

helloRowBGColor =
  Background.color (rgb 0.2 0.9 0.2)

worldRowBGColor =
  Background.color (rgba 0.1 0.3 0.8 0.5)


myLayout =
  row [ height fill
      , width fill
      ] [ sideBar
        , mainWindow
        ]

sideBar =
  column [ Border.solid
         , Border.color (rgb 1 1 1)
         , Border.width 1
         , sideBarBGColor
         , height fill
         , width (fillPortion 2 |> maximum 200)
         ] [ el [centerX, centerY] (text "sideBar")
           ]

mainWindow =
  column [ Border.solid
         , height fill
         , width (fillPortion 5)
         ] [ helloRow
           , worldRow
           ]

helloRow =
  row [ height fill
      , helloRowBGColor
      , width fill
      , Border.width 1
      , Border.color (rgb 1 1 1)
      ] [ el [centerX, alignBottom, Font.bold] (text "hello") ]

worldRow =
  row [ height fill
      , worldRowBGColor
      , width fill
      , Border.width 1
      , Border.color (rgb 1 1 1)
      ] [ el [centerX, centerY, Font.italic] <| text <| String.toUpper "world" ]