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 CSS parts in Elm, but relies on the CSS of MDL verbatim.
CAUTION! This is an early and incomplete prototype. Use at your own risk.
Build the demo:
> elm-make examples/Demo.elm
This will construct a file index.html
; open that in your browser.
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
.
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.