Material Design Components for Elm

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

Live demo & package documentation.

.

Migration

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

Get Started

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.

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.