{"id":21725042,"url":"https://github.com/yehzhang/purescript-materialize","last_synced_at":"2025-03-20T22:47:45.544Z","repository":{"id":58225432,"uuid":"138471144","full_name":"yehzhang/purescript-materialize","owner":"yehzhang","description":"Materialize bindings à la purescript-smolder.","archived":false,"fork":false,"pushed_at":"2018-10-23T05:15:42.000Z","size":53,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-25T20:03:43.944Z","etag":null,"topics":["css","dsl","functional-dependencies","functional-programming","markup","markup-language","material-design","materialize","materialize-css","materializecss","monad","purescript","typelevel","variadic","web"],"latest_commit_sha":null,"homepage":"","language":"PureScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yehzhang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-24T09:59:20.000Z","updated_at":"2021-11-28T06:58:38.000Z","dependencies_parsed_at":"2022-08-31T05:41:32.732Z","dependency_job_id":null,"html_url":"https://github.com/yehzhang/purescript-materialize","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yehzhang%2Fpurescript-materialize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yehzhang%2Fpurescript-materialize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yehzhang%2Fpurescript-materialize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yehzhang%2Fpurescript-materialize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yehzhang","download_url":"https://codeload.github.com/yehzhang/purescript-materialize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244706514,"owners_count":20496569,"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":["css","dsl","functional-dependencies","functional-programming","markup","markup-language","material-design","materialize","materialize-css","materializecss","monad","purescript","typelevel","variadic","web"],"created_at":"2024-11-26T03:15:12.998Z","updated_at":"2025-03-20T22:47:45.516Z","avatar_url":"https://github.com/yehzhang.png","language":"PureScript","readme":"# purescript-materialize\n\n[![Build Status](https://travis-ci.com/yehzhang/purescript-materialize.svg?branch=master)](https://travis-ci.com/yehzhang/purescript-materialize)\n[![Latest release](https://img.shields.io/github/release/yehzhang/purescript-materialize.svg)](https://github.com/yehzhang/purescript-materialize/releases)\n\n[Materialize](https://materializecss.com/) bindings in PureScript, with a\nbuiltin [purescript-smolder](https://github.com/bodil/purescript-smolder)-style\nDSL.\n\n### Demo project\n\n[Yousort](https://github.com/yehzhang/Yousort)\n\n## Overview\n\n### Class DSL\n\nClass DSL is a domain-specific language that makes it easy to markup Materialize\nCSS classes.\n\nA statement in Class DSL starts with a subject, followed by required objects\n\n```purescript\nimport Materialize.Color (Color, background, teal)\n\ncolor :: Color\ncolor = background teal\n```\n\nor optional objects.\n\n```purescript\nimport Materialize.Buttons (Button, button, floating)\nimport Materialize.Markup ((~))\nimport Materialize.Overriden (large)\n\nplainButton :: Button\nplainButton = button\n\nlargeButton :: Button\nlargeButton = button ~ large\n\nfloatingButton :: Button\nfloatingButton = button ~ floating\n\nlargeFloatingButton :: Button\nlargeFloatingButton = button ~ large ~ floating\n```\n\nClass DSL is meant to be spoken along with Smolder DSL. Here is an example to\ndescribe a complex [Button](https://materializecss.com/buttons.html):\n\n```purescript\nimport Data.Typelevel.Num (d1)\nimport Text.Smolder.Markup (Markup, text, (!))\nimport Text.Smolder.HTML (div)\nimport Prelude\n\nimport Materialize.Buttons (button, floating)\nimport Materialize.Color (background, teal, lighten)\nimport Materialize.Markup (classList, (~))\nimport Materialize.Overriden (large)\nimport Materialize.Visibility (hide, on)\nimport Materialize.Waves (waves, light)\n\n\nviewButton :: forall e. Markup e\nviewButton =\n    div ! classList do\n            button ~ large ~ floating\n            background teal ~ lighten d1\n            waves ~ light\n            hide ~ on large\n        $ text \"Click me\"\n```\n\nwhich renders to HTML:\n\n```html\n\u003cdiv class=\"btn-large btn-floating teal lighten-1 waves-effect waves-light hide-on-large-only\"\u003e\n    Click me\n\u003c/div\u003e\n```\n\nSee [test cases](https://github.com/yehzhang/purescript-materialize/blob/master/test/Main.purs)\nfor more examples.\n\n### DOM API\n\nSome material designs cannot be implemented with pure CSS, e.g.,\n[Tooltips](https://materializecss.com/tooltips.html). Therefore, it is sometimes\ninevitable to interact with Materialize's API in JavaScript. Hopefully, included\nis a PureScript API that abstracts away the DOM manipulation required by the\nMaterialize API.\n\n```purescript\nimport Data.Traversable (traverse)\nimport Effect (Effect)\nimport Prelude\nimport Web.DOM.ParentNode (ParentNode)\n\nimport Materialize.DOM (findElements, findInstances, init, open, destroy)\nimport Materialize.Tooltips (Tooltip)\n\n\ninitTooltipsAndOpen :: Effect ParentNode -\u003e Effect Unit\ninitTooltipsAndOpen parentNode = do\n    _ :: Array Tooltip \u003c- parentNode \u003e\u003e= findElements\n        \u003e\u003e= traverse (init { enterDelay: 400.0\n                           , outDuration: 40.0\n                           })\n        \u003e\u003e= traverse open\n    pure unit\n\ndestroyTooltips :: Effect ParentNode -\u003e Effect Unit\ndestroyTooltips parentNode = do\n    _ :: Array Tooltip \u003c- parentNode \u003e\u003e= findInstances \u003e\u003e= traverse destroy\n    pure unit\n```\n\n## Supported modules\n\n### CSS\n\n- [x] [Color](https://materializecss.com/color.html)\n- [x] [Grid](https://materializecss.com/grid.html)\n- [x] [Helpers](https://materializecss.com/helpers.html)\n- [x] [Media](https://materializecss.com/media-css.html)\n- [x] [Pulse](https://materializecss.com/pulse.html)\n- [x] [Shadow](https://materializecss.com/shadow.html)\n- [x] [Table](https://materializecss.com/table.html)\n- [x] [Transitions](https://materializecss.com/css-transitions.html)\n- [x] [Typography](https://materializecss.com/typography.html)\n\n### Components\n\n- [x] [Badges](https://materializecss.com/badges.html)\n- [x] [Buttons](https://materializecss.com/buttons.html)\n- [x] [Breadcrumbs](https://materializecss.com/breadcrumbs.html)\n- [x] [Cards](https://materializecss.com/cards.html)\n- [x] [Collections](https://materializecss.com/collections.html)\n- [x] [Floating Action Button](https://materializecss.com/floating-action-button.html) (Classes only)\n- [x] [Footer](https://materializecss.com/footer.html)\n- [x] [Icons](https://materializecss.com/icons.html)\n- [x] [Navbar](https://materializecss.com/navbar.html)\n- [x] [Pagination](https://materializecss.com/pagination.html)\n- [x] [Preloader](https://materializecss.com/preloader.html)\n\n### JavaScript\n\n- [x] [Auto Init](https://materializecss.com/auto-init.html)\n- [x] [Carousel](https://materializecss.com/carousel.html) (Classes only)\n- [ ] Collapsible\n- [ ] Dropdown\n- [ ] FeatureDiscovery\n- [x] [Media](https://materializecss.com/media.html) (Classes and Material box only)\n- [ ] Modals\n- [ ] Parallax\n- [ ] Pushpin\n- [ ] Scrollspy\n- [ ] Sidenav\n- [ ] Tabs\n- [x] [Toasts](https://materializecss.com/toasts.html)\n- [x] [Tooltips](https://materializecss.com/tooltips.html)\n- [x] [Waves](https://materializecss.com/waves.html)\n\n### Forms\n\n- [ ] Autocomplete\n- [x] [Checkboxes](https://materializecss.com/checkboxes.html)\n- [x] [Chips](https://materializecss.com/chips.html)\n- [ ] Pickers\n- [x] [Radio Buttons](https://materializecss.com/radio-buttons.html)\n- [ ] Range\n- [x] [Select](https://materializecss.com/select.html)\n- [x] [Switches](https://materializecss.com/switches.html)\n- [x] [Text Inputs](https://materializecss.com/text-inputs.html) (Classes only)\n\n(Pull requests are welcomed) :)\n\n## Installation\n\n```\nbower install purescript-materialize\n```\n\nAdditionally, Materialize 1.0.0-rc needs to be installed. An easy way is to add\nthe following line into the `\u003cbody\u003e` block of `index.html`, before the\n`\u003cscript\u003e` tag of PureScript code:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js\"\u003e\u003c/script\u003e\n```\n\nThere are other ways to install Materialize, but please make sure that the\ngloabl Materialize object `M` is available.\n\n## Documentation\n\nModule documentation is [published on Pursuit](https://pursuit.purescript.org/packages/purescript-materialize).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyehzhang%2Fpurescript-materialize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyehzhang%2Fpurescript-materialize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyehzhang%2Fpurescript-materialize/lists"}