{"id":19522176,"url":"https://github.com/captaincodeman/mega-material","last_synced_at":"2025-04-26T09:32:06.466Z","repository":{"id":35054509,"uuid":"178479447","full_name":"CaptainCodeman/mega-material","owner":"CaptainCodeman","description":"Making Elements Great Again, Material Style","archived":false,"fork":false,"pushed_at":"2023-01-05T16:18:45.000Z","size":1051,"stargazers_count":15,"open_issues_count":13,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T12:54:24.466Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCodeman.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-29T21:47:33.000Z","updated_at":"2023-10-31T05:47:06.000Z","dependencies_parsed_at":"2023-01-15T12:51:28.072Z","dependency_job_id":null,"html_url":"https://github.com/CaptainCodeman/mega-material","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fmega-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fmega-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fmega-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fmega-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/mega-material/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967233,"owners_count":21515564,"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":[],"created_at":"2024-11-11T00:37:30.663Z","updated_at":"2025-04-26T09:32:06.125Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"TypeScript","readme":"# mega-material\n\nMaking Elements Great Again, Material Style!\n\n[Demo](https://captaincodeman.github.io/mega-material/)\n\n## Summary\n\nA lightweight set of Web Components (using custom elements and ShadowDOM)\nimplementing Google's [Material Design System](https://material.io/) that\nshould be compatible with any web-framwork on modern ever-green browsers.\n\nFast, efficient, easy to consume and easily themeable.\n\n## Status\n\nThe following components have been implemented or are in progress:\n\n* [ ] Bottom Navigation\n* [X] Button\n* [X] Card\n* [X] Checkbox\n* [ ] Chips\n* [X] Dialog\n* [X] Drawer\n* [X] FAB\n* [X] Icon\n* [X] Icon Button\n* [X] Linear Progress\n* [X] List\n* [ ] Radio Button\n* [X] Slider\n* [X] Snackbar\n* [X] Switch\n* [ ] Tabs\n* [ ] TextField\n* [X] Top-App-Bar\n\nMore work needs to be done on theming, events and tidying up the components.\n\n## Background\n\nGoogle already provide an official Material Design web implementation:\n\n[https://github.com/material-components/material-components-web](https://github.com/material-components/material-components-web)\n\nThis is designed to be used directly or act as a foundation that can be used\nto implement any framework-specific set of Material Design components by the\ncreation of adaptor classes and re-use of the provided global BEM styles.\n\nSo a set of Material Design components for React, another for Angular, one for\nVue, and so on with all the other web-frameworks.\n\nUnfortunately, there are several issues with this approach:\n\nThe extra code to make it adaptable to multiple frameworks means there is more\ncode than necessary for whichever framework you are using. The contributes to\nthe JavaScript payload being larger than it needs to be - the full minified JS\npayload is 473Kb.\n\nBecause styles are global they need to be unique and the approach to this is\nto use BEM style classes. Lots of SASS templating allow customization but at\nthe cost of bloat - the full set of minified CSS is 266Kb.\n\nImplementing any elements in your app directly requires correctly matching up\nlarge blocks of HTML and CSS classes. While the framework-specific versions can\ncreate easier to consume components (at the cost of additional code) all design\nand implementation is then tied heavily to that framework.\n\nIt relies on abstractions and most abstractions are leaky. In this case there\nis an assumption that all HTML and styling is global to the page. So it doesn't\nwork nicely with ShadowDOM.\n\nWork has been progressing on a Web Component version, the snapily named:\n\n[https://github.com/material-components/material-components-web-components](https://github.com/material-components/material-components-web-components)\n\nBut progress seems to be slow and there are challenges trying to adapt a system\nthat has been fundamentally designed under the an assumption that global styling\nwill be available into an implementation that actively prevents global styling.\n\nThis seems to be a real missed opportunity given that a single, web-component\nbased implementation could be the _only_ version required. It could be re-used\nby _any_ framework without extra JavaScript and with less bloated styling (due\nto the isolation that ShadowDOM provides). By encapsulating the internal HTML\nand styling the components should provide a simpler and easier-to-consume API\nthat would be consistent across frameworks.\n\n## Plans\n\nIn fairness, Google are trying to support more browsers than I am but I don't\nthink it's worth compromising the components for IE and with Edge switching to\nuse the Blink engine, all modern browsers will fully support Web Components.\n\nRTL support using the `dir` attribute is old school and should be implemented\nusing newer `start` \u0026amp; `end` styles (when available). RTL support is lower\npriority for me though.\n\nJavaScript needs to be enabled to use Web Components so it makes no sense to\nrecreate the CSS-only styling of the offical implementation.\n\nSASS makes creating styles easy which maybe why it makes it easy to create _too\nmany_ styles. Instead of applying the same style properties to different classes\n(SASS mixins) we want to re-use elements internally to avoid repetition.\n\nCustomization and theming should be done using CSS variables although the new\n`part` feature may be useful for this in future.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fmega-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fmega-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fmega-material/lists"}