Skip to content

Instantly share code, notes, and snippets.

@avh4
Created April 25, 2020 03:29
Show Gist options
  • Save avh4/b1a9db12973a2a6ff925552e8b853e69 to your computer and use it in GitHub Desktop.
Save avh4/b1a9db12973a2a6ff925552e8b853e69 to your computer and use it in GitHub Desktop.
elm-ui wireframe
module Main exposing (main)
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
main =
layout [] <|
row
[ width fill
, height fill
]
[ placeholder
[ width fill
, height fill
]
"main content"
, placeholder
[ alignTop
, width (px 200)
]
"sidebar"
]
wireframeTheme =
{ bg = rgb 0.9 0.9 0.9
, frame = rgb 0.5 0.5 0.5
, text = rgb 0.3 0.3 0.3
}
placeholder : List (Attribute msg) -> String -> Element msg
placeholder attr name =
text name
|> el
[ Border.rounded 5
, Border.dotted
, Border.color wireframeTheme.frame
, Border.width 2
, height fill
, width fill
, padding 20
, Background.color wireframeTheme.bg
, Font.center
, Font.color wireframeTheme.text
]
|> el attr
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment