Elm Orus UI is a UI toolkit for elm, modeled after the Material Design system.
It renders to Elm-UI elements but could probably be extended to generate HTML ones.
This small piece of code show how to create a simple 'OK' button
import Element exposing (Element)
import OUI.Button as Button
import OUI.Material as Material
import OUI.Material.Color
import OUI.Material.Theme
theme =
OUI.Material.Theme.defaultTheme
|> OUI.Material.Theme.withColorscheme OUI.Material.Color.defaultDarkTheme
view : Element msg
view =
Button.new "OK"
|> Button.onClick OnBtnClick
|> Material.button theme [ {- any Element.Attribute -} ]
A fully custom color scheme is possible, but the simplest is to build schemes based a a few key colors.
import OUI.Material.Color as Color
darkScheme : Color.Scheme
darkScheme =
Color.darkFromKeyColors
{ primary = Color.rgb255 0x67 0x50 0xA4
, secondary = Color.rgb255 0x62 0x5B 0x71
, tertiary = Color.rgb255 0x7D 0x52 0x60
, error = Color.rgb255 0xB3 0x26 0x1E
, neutral = Color.rgb255 0x40 0x40 0x40
, neutralVariant = Color.rgb255 0x40 0x40 0x40
}Each component has a restricted set of possible customization.
For example, here is how to make buttons higher and more square:
import OUI.Material.Theme as Theme
customTheme =
let
buttonTheme =
Theme.button Theme.defaultTheme
in
Theme.defaultTheme
|> Theme.withButton
{ buttonTheme
| common =
{ containerHeight = 50
, containerRadius = 4
, iconSize = buttonTheme.common.iconSize
, leftRightPadding = buttonTheme.common.leftRightPadding
, leftPaddingWithIcon = buttonTheme.common.leftPaddingWithIcon
, rightPaddingWithIcon = buttonTheme.common.rightPaddingWithIcon
, paddingBetweenElements = buttonTheme.common.paddingBetweenElements
, textSize = buttonTheme.common.textSize
, textType = buttonTheme.common.textType
}
, icon =
{ iconSize = buttonTheme.icon.iconSize
, containerSize = buttonTheme.icon.containerSize
}
}Contributions are very welcome! Please read the modest Developer Guide, it will give you some precious indications.
