{"id":13637539,"url":"https://github.com/aforemny/elm-mdc","last_synced_at":"2025-04-05T11:09:53.005Z","repository":{"id":22640052,"uuid":"96877400","full_name":"aforemny/elm-mdc","owner":"aforemny","description":"Elm port of the Material Components for the Web CSS/JS library","archived":false,"fork":false,"pushed_at":"2023-04-18T18:21:19.000Z","size":11101,"stargazers_count":352,"open_issues_count":33,"forks_count":43,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-29T10:06:54.799Z","etag":null,"topics":["elm-lang","framework","material-components","material-components-web","material-design","user-interface"],"latest_commit_sha":null,"homepage":"https://aforemny.github.io/elm-mdc","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aforemny.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-07-11T09:43:32.000Z","updated_at":"2025-03-04T10:15:33.000Z","dependencies_parsed_at":"2024-01-25T20:03:12.330Z","dependency_job_id":"7779a7a2-a73c-45e1-b4eb-92c55f3e177c","html_url":"https://github.com/aforemny/elm-mdc","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aforemny%2Felm-mdc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aforemny%2Felm-mdc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aforemny%2Felm-mdc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aforemny%2Felm-mdc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aforemny","download_url":"https://codeload.github.com/aforemny/elm-mdc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm-lang","framework","material-components","material-components-web","material-design","user-interface"],"created_at":"2024-08-02T00:01:19.039Z","updated_at":"2025-04-05T11:09:52.989Z","avatar_url":"https://github.com/aforemny.png","language":"Elm","readme":"# Material Components for the Web for Elm\n\n[![Build](https://github.com/aforemny/elm-mdc/actions/workflows/build.yml/badge.svg?branch=master)](https://github.com/aforemny/elm-mdc/actions/workflows/build.yml)\n\nElm-mdc allows you to write beautiful Elm applications with a\n[Material Design](https://material.io/design/introduction/) look. It\nuses the CSS from Google's [Material Components for the\nWeb](https://github.com/material-components/material-components-web/),\nbut reimplements the JavaScript in Elm.\n\n\n## Screenshots\n\n\u003cimg src=\"https://raw.githubusercontent.com/aforemny/elm-mdc/master/img/dialog_screenshot.png\" /\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/aforemny/elm-mdc/master/img/list_screenshot.png\" /\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/aforemny/elm-mdc/master/img/snackbar_screenshot.png\" /\u003e\n\n\n## Demo\n\n[Live demo](https://aforemny.github.io/elm-mdc/) \u0026\n~package documentation~ (not released on package.elm-lang.org yet, see Building\nthe documentation below).\n\n\n## Getting started\n\nCreate an `index.html` that looks like this:\n\n```html {.line-numbers}\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eGetting Started\u003c/title\u003e\n\n  \u003clink href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"elm-mdc/material-components-web.css\" rel=\"stylesheet\"\u003e\n\n\u003c/head\u003e\n\u003cbody class=\"mdc-typography\"\u003e\n  \u003cscript src=\"elm-mdc/elm-mdc.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"elm.js\"\u003e\u003c/script\u003e\n  \u003cdiv id=\"elm\"\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      Elm.Main.init({ node: document.getElementById('elm') });\n    \u003c/script\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\nThe first three CSS files are provided by Google. The fourth CSS file is\nprovided by this library and contains the MDC CSS.\n\nPut the JavaScript in the body. The first JavasSript file, `elm-mdc.js`, is\nprovided by this library. The second JavaScript file, called `elm.js` here, is\nyour compiled Elm application.\n\nMake sure that the file `elm-mdc.js` is correctly served by your web server, as\notherwise this library will *behave unexpectedly*. See below for instructions\non how to build `elm-mdc.js` as well as `material-components-web.css`.\n\n\n## Install\n\nAssuming an empty directory, you create an elm-mdc application as follows:\n\n1. `elm init`.\n2. Install this library from github: \n```\ngit clone git@github.com:aforemny/elm-mdc.git\n```\n3. Build the required sources: \n```\ncd elm-mdc\nmake\ncd ..\n```\n4. Add the required libraries (see `elm-mdc/elm.json`):\n```\nelm install elm/regex\nelm install elm/svg\nelm install elm/json\nelm install K-Adam/elm-dom\n```\n5. Change the `source-directories` property in `elm.json` to include `elm-mdc`:\n\n```json\n    \"source-directories\": [\n        \"src\",\n        \"elm-mdc/src\"\n    ],\n```\n6. Create an `index.html` as above.\n7. Create your first application, for now let's just copy the hello world example: `cp -p elm-mdc/examples/hello-world/Main.elm src/Main.elm`\n8. Compile it: `elm make src/Main.elm --output app.js`\n\nAnd that's it.\n\n\n## Example application\n\nSee `examples/hello-world/` for a full example. You have to run `make` in the\nroot repository before to create the files `elm-mdc.js` and\n`material-components-web.css`.\n\n```elm\nmodule Main exposing (..)\n\nimport Browser\nimport Html exposing (Html, text)\nimport Material\nimport Material.Button as Button\nimport Material.Options as Options\n\n\ntype alias Model =\n    { mdc : Material.Model Msg\n    }\n\n\ndefaultModel : Model\ndefaultModel =\n    { mdc = Material.defaultModel\n    }\n\n\ntype Msg\n    = Mdc (Material.Msg Msg)\n    | Click\n\n\nmain : Program () Model Msg\nmain =\n    Browser.element\n        { init = \\_ -\u003e init\n        , subscriptions = subscriptions\n        , update = update\n        , view = view\n        }\n\n\ninit : ( Model, Cmd Msg )\ninit =\n    ( defaultModel, Material.init Mdc )\n\n\nsubscriptions : Model -\u003e Sub Msg\nsubscriptions model =\n    Material.subscriptions Mdc model\n\n\nupdate : Msg -\u003e Model -\u003e ( Model, Cmd Msg )\nupdate msg model =\n    case msg of\n        Mdc msg_ -\u003e\n            Material.update Mdc msg_ model\n\n        Click -\u003e\n            ( model, Cmd.none )\n\n\nview : Model -\u003e Html Msg\nview model =\n    Html.div []\n        [\n          Button.view Mdc \"my-button\" model.mdc\n              [ Button.ripple\n              , Options.onClick Click\n              ]\n              [ text \"Click me!\" ]\n        ]\n```\n\n## Build instructions\n\n### Building the demo\n\n```sh\n$ make build-demo\n$ open build/index.html\n```\n\n#### Building the demo on Windows\n\n```sh\n$ build.cmd build-demo\n$ build/index.html\n```\n\n### Building the documentation\n\n```sh\n$ make docs\n```\n\n#### Building the documentation on Windows\n\n```sh\n$ build.cmd docs\n```\n\n\n## Starterkit and hot reload\n\nTo get started with this library more easily, have a look at the [elm-mdc\nstarterkit](https://github.com/berenddeboer/elm-mdc-starter-kit). This contains\na fully featured example that demonstrates hot code reload.\n\n\n## History\n\nThe implementation is based on\n[debois/elm-mdl](https://github.com/debois/elm-mdl), which uses the\nnow [abandoned Material Design Lite\nframework](https://github.com/google/material-design-lite).\n\n\n## Contribute\n\nContributions are warmly encouraged - please\n[get in touch](https://github.com/aforemny/elm-mdc/issues)! Use GitHub to\n[report bugs](https://github.com/aforemny/elm-mdc/issues), too.\n","funding_links":[],"categories":["Elm","Material Components Web (MDC Web)"],"sub_categories":["Frameworks","MDC Web Framework Integrations"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faforemny%2Felm-mdc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faforemny%2Felm-mdc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faforemny%2Felm-mdc/lists"}