https://github.com/orus-io/elm-orus-ui

A Material based UI Toolkit for Elm UI
https://github.com/orus-io/elm-orus-ui

elm elm-ui material-design

Last synced: 22 days ago
JSON representation

A Material based UI Toolkit for Elm UI

• Host: GitHub
• URL: https://github.com/orus-io/elm-orus-ui
• Owner: orus-io
• License: mit
• Created: 2023-05-16T12:29:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-22T17:24:43.000Z (about 1 month ago)
• Last Synced: 2024-11-22T18:31:55.459Z (about 1 month ago)
• Topics: elm, elm-ui, material-design
• Language: Elm
• Homepage: https://package.elm-lang.org/packages/orus-io/elm-orus-ui/latest/
• Size: 3.73 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Elm Orus UI

Elm Orus UI is a UI toolkit for elm, modeled after the [Material Design

system](https://m3.material.io/).

It renders to

[Elm-UI](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/)

elements but could probably be extended to generate HTML ones.

[See it live on the showcase](https://elm.orus.io/elm-orus-ui/showcase/)!

## Example

This small piece of code show how to create a simple 'OK' button

```elm

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 -} ]

```

## Customize colors

A fully custom color scheme is possible, but the simplest is to build schemes

based a a few key colors.

```elm

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

        }

```

## Customize theme

Each component has a restricted set of possible customization.

For example, here is how to make buttons higher and more square:

```elm

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

                    }

            }

```

## Contribute

Contributions are very welcome! Please read the modest [Developer

Guide](https://github.com/orus-io/elm-orus-ui/blob/main/DEVELOP.md), it will

give you some precious indications.