Material Design Components for Elm

Port of Google's Material Design Lite CSS/JS implementation of the Material Design Specification.

Changes

Updated to Elm 0.18

Get Started

Adapt examples/Counter.elm to suit your needs. The Live demo contains code samples for most components, which you may find helpful.

For a long-form tutorial, you might like @jadams excellent "Introduction to elm-mdl", available as both a daily drip video and a very nice writeup.

Get help

For more in-depth documentation, refer to the extensive package documentation.

Ask any questions you may have on stackoverflow or on #elm-mdl in the elm-slack.

Frequently asked questions

Please read the FAQ here

Other projects using Elm-mdl

Check out the users page for a list of projects using elm-mdl.

Contribute

Contributions are warmly encouraged! Whether you are a newcomer to Elm or an accomplished expert, the MDL port presents interesting challenges. Refer to this page for a detailed list of possible contributions.

Most importantly: Do report bugs. The elm-mdl library aims to provide a completely smooth experience with Material Design for elm developers. No bug is too small.

You may want to read the hints on how to get your issue resolved quickly but you don't have to.

Implementation

MDL is implemented primarily through CSS, with a little bit of JavaScript adding and removing CSS classes in response to DOM events. This port re-implements the JavaScript parts in Elm, but relies on the CSS of MDL verbatim.

Upgrading from 6.x.x

The 7.0.0 release changes the required boilerplate in two aspects.

The type of elm-mdl messages should now be:

type Msg =
  ...
  | Mdl (Material.Msg Msg)

Dispatching elm-mdl messages should now be:

update message model =
  case message of
    ...
    Mdl message' ->
      Material.update message' model

Some components (notably menu) has changed API to varying degrees. If you run into troubles, refer to the code samples in the demo; check out the documentation, or ask on #elm-mdl in the elm-slack for help in migrating.