elm-widgets

elm-widgets is a front-end library for elm based on elm-css. It ships with prebuilt views focusing in accessibility and customization.

This project can be compared to other front-end frameworks like Bootstrap, Bulma, or in elm, Style-Elements. There are implementation differences between Bootstrap and Bulma, these are CSS and/or Javascript frameworks meanwhile elm-widgets only targets elm. By the other hand, Style-Elements implements its own. There are also design differences. Not an style/css framework, focusing html and aria (links here). is not focused on style. It can also be compared with Style-Elements, but its foundations is css and does not tries to hide it to you.

There is no fancy theming or style in base library. A minimalistic theme is provided by X. We use this library through this examples to show how themed components can look.

A Quick Tour

Before starting, a knowledge of elm and elm-css is assumed.

Browser Rendering Differences

Not all browser renders the same elements in the same way. To solve this common pain, elm-widgets ships with its own normalization styles. Its based on normalize.css 8.0.0 and it's totally optional.

Is recommended to use it, but any other normalization library should get the work done. You can include it in your project using `xxx` which is a elm-css snippet.

import Css.Foreign
import Html.Styled as Html exposing (Html)
import TODO.Base.Normalize as Normalize

view : Model -> Html Msg
view model =
  Html.div
      []
      [ Css.Foreign.global Normalize.snippets
      , ...
      ]

elm-widgets is all about common reusable views. Inputs are usually the view that required a little more of work and can, so making them reusable save us time.

Let's start playing adding a simple email input!"