Colors for Elm-UI

Elm packages: elm-ui-colors

This package provides a range of HTML/CSS Colors for use with Elm-UI .

Install

$ elm install phollyer/elm-ui-colors

Design Goals

This package is intended to provide easy access to HTML/CSS color names, which should make it easier to switch from using CSS to Elm-UI if you use color names in your CSS.

So, if you currently do something like this:

CSS

.myClass {
  background-color: yellow;
  color: purple;
}

Elm

Html.div
  [ class "myClass" ]
  [ Html.text "Hello World" ]

You can lose the CSS completely using Elm-UI and Elm-UI-Colors as follows:

Elm-UI

Element.el
  [ Background.color yellow
  , Font.color purple
  ]
  [ Element.text "Hello World" ]

Usage

Simply import the colors you require, and use them with your Elm-UI attributes.

Example

To see the actual colors, clone the repo and run the example in elm reactor.

module Main exposing (main)

{-| -}

import Element as El
import Element.Background as Background
import Element.Font as Font
import Colors.Opaque exposing (black, hotpink, white)


main =
    El.layout
        [ Background.color black
        , El.width El.fill
        , El.height El.fill
        ]
        <|
            El.column
                [ El.centerX, El.centerY ]
                [ El.el
                    [ Font.color white ]
                    ( El.text "white")
                , El.el
                    [ Font.color hotpink ]
                    ( El.text "hotpink")
                ]