This repository is no longer actively updated. The underlying Google Material Design Lite library is now on limited support; as a consequence, this library will not receive additional updates.
To use Material Design components with elm, try @aforemny's elm-mdc.
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.