Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/debois/elm-mdl
Elm-port of the Material Design Lite CSS/JS library
https://github.com/debois/elm-mdl
Last synced: 3 months ago
JSON representation
Elm-port of the Material Design Lite CSS/JS library
- Host: GitHub
- URL: https://github.com/debois/elm-mdl
- Owner: debois
- License: apache-2.0
- Created: 2016-03-13T21:46:07.000Z (almost 9 years ago)
- Default Branch: v8
- Last Pushed: 2019-04-11T11:10:30.000Z (almost 6 years ago)
- Last Synced: 2024-07-31T17:16:42.498Z (6 months ago)
- Language: Elm
- Size: 4.99 MB
- Stars: 965
- Watchers: 26
- Forks: 133
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: COPYING.md
Awesome Lists containing this project
- awesome-material-design - Elm MDL - Port of Material Design lite to Elm (Elm / Frameworks)
README
**This repository is no longer actively updated**. The underlying Google Material Design Lite library is now on [limited support](https://github.com/google/material-design-lite#limited-support); as a consequence, this library will not receive additional updates.
To use Material Design components with elm, try @aforemny's [elm-mdc](https://github.com/aforemny/elm-mdc).
# Material Design Components for Elm
Port of Google's
[Material Design Lite](https://www.getmdl.io/)
CSS/JS implementation of the
[Material Design Specification](https://www.google.com/design/spec/material-design/introduction.html).
[Live demo](https://debois.github.io/elm-mdl/) & [package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest).
[](https://travis-ci.org/debois/elm-mdl).
### Migration
If you are updating from 7.x.x, refer to the [Migration guide](https://github.com/debois/elm-mdl/blob/v8/MIGRATION.md).
### Get Started
Adapt
[examples/Counter.elm](https://github.com/debois/elm-mdl/tree/master/examples) to suit your needs.
The
[Live demo](https://debois.github.io/elm-mdl/) contains code samples for most components, which
you may find helpful.
Use one of the [templates](https://github.com/debois/elm-mdl/blob/v8/TEMPLATES.md) 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](https://github.com/knewter), available as both a [daily drip video](https://www.dailydrip.com/topics/elm/drips/elm-mdl-introduction) and a very nice [writeup](https://medium.com/@dailydrip/introduction-to-using-material-design-in-elm-dc2320087410#.dodoot1wd).
### Get help
For more in-depth documentation, refer to the [extensive package
documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/).
Ask any questions you may have on
[stackoverflow](https://stackoverflow.com/questions/ask?tags=elm+elm-mdl)
or on [#elm-mdl](https://elm.slack.com/messages/elm-mdl) in the elm-slack.
### Frequently asked questions
Please read the [FAQ here](https://github.com/debois/elm-mdl/blob/v8/FAQ.md).
### Other projects using Elm-mdl
Check out the [users page](https://github.com/debois/elm-mdl/blob/v8/USERS.md) 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](https://github.com/debois/elm-mdl/blob/master/CONTRIBUTING.md)
for a detailed list of possible contributions.
Most importantly: Do [report
bugs](https://github.com/debois/elm-mdl/issues/new). 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](https://github.com/debois/elm-mdl/blob/master/CONTRIBUTING.md#can-i-speed-up-my-issue)
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.