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

Live demo & package documentation.

.

If you are updating from 7.x.x, refer to the Migration guide.

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

Use one of the templates to get an easy starting point into elm-mdl.

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

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.

Please read the FAQ here.

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

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.

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.