lambder / elm-mdl

Elm-port of the Material Design Lite CSS/JS library

Material Design Components in Elm

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

Live demo here.

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.

Get Started

Build the demo:

> elm-make examples/Demo.elm

This will construct a file index.html; open that in your browser.

Embedding in your own HTML.

Initial page load of the demo will produce a flicker, which can only be avoided if you set up the MDL CSS to load before elm does. Use the file page.html as a template. To build the demo in this mode, comment out line 154 in examples/Demo.elm and build the demo like this:

> elm-make examples/Demo.elm --output elm.js

This will produce a file elm.js. Open the file page.html in your browser; this file will set up MDL CSS and load elm.js.

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.