{"id":13590725,"url":"https://github.com/jfbrennan/m-","last_synced_at":"2025-05-15T15:07:55.975Z","repository":{"id":42634541,"uuid":"225828945","full_name":"jfbrennan/m-","owner":"jfbrennan","description":"The modern web's design system.","archived":false,"fork":false,"pushed_at":"2025-04-23T19:31:23.000Z","size":4058,"stargazers_count":312,"open_issues_count":10,"forks_count":13,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-23T19:47:56.538Z","etag":null,"topics":["6kb","better-code","css","cures-coding-migraines","custom-elements","fun","html","javascript","less-code","more-winning","no-code","not-react","painless","pwa","spa","ssr","standards","static-site","the-m-is-for-freedom"],"latest_commit_sha":null,"homepage":"https://www.mdash.dev","language":"CSS","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/jfbrennan.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-04T09:29:25.000Z","updated_at":"2025-04-23T19:31:27.000Z","dependencies_parsed_at":"2023-10-16T11:47:54.479Z","dependency_job_id":"31908f4e-ed26-4a10-887d-46b6f31e3152","html_url":"https://github.com/jfbrennan/m-","commit_stats":{"total_commits":347,"total_committers":6,"mean_commits":"57.833333333333336","dds":"0.35446685878962536","last_synced_commit":"46c0e7b8e8b6f1de3fcbd307ab74d2075329f2f3"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfbrennan%2Fm-","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfbrennan%2Fm-/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfbrennan%2Fm-/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfbrennan%2Fm-/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfbrennan","download_url":"https://codeload.github.com/jfbrennan/m-/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364270,"owners_count":22058878,"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":["6kb","better-code","css","cures-coding-migraines","custom-elements","fun","html","javascript","less-code","more-winning","no-code","not-react","painless","pwa","spa","ssr","standards","static-site","the-m-is-for-freedom"],"created_at":"2024-08-01T16:00:49.900Z","updated_at":"2025-05-15T15:07:50.950Z","avatar_url":"https://github.com/jfbrennan.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.mdash.dev\"\u003e\n    \u003cimg src=\"https://www.mdash.dev/img/m-logo.png\" alt=\"Mdash logo\" width=\"192\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch3 align=\"center\"\u003eA design system that fully embraces web standards.\u003c/h3\u003e\n\u003cp align=\"center\"\u003eMdash seeks to leverage HTML, not replace it or try to outsmart it.\u003cbr\u003eThis makes Mdash ideal for all web projects and skill levels.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003elinkable | tiny 6kb | responsive | accessible | zero dependencies\u003c/strong\u003e\u003c/p\u003e\n\u003chr\u003e\n\nMdash UI elements are built with 100% web standards following the [TAC CSS methodology](https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology). This makes Mdash [extremely light](https://www.mdash.dev/#performance), very fast, and compatible with any type of web project.\n\nMdash can work with any framework client-side and server-side or no framework at all because it's made from native HTML, custom HTML tags, and [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements). Be it SSR, SPA, PWA, static site, and even some email templates - whatever type of project you have Mdash will work. This is especially useful to organizations looking to share a design system across products.\n\nTry Mdash right now by simply linking to the CDN files below and visiting the [doc site](https://www.mdash.dev) for code samples and full API documentation. \n\nTo apply your own design language, fork and customize Mdash. It's 100% vanilla HTML, CSS, and JavaScript.\n\n## Quick start\nThis is the web. Include these files in `\u003chead\u003e` and you're all set!\n```html\n\u003clink href=\"https://unpkg.com/m-@3.2.0/dist/m-.woff2\" rel=\"preload\" as=\"font\" crossorigin\u003e\n\u003clink href=\"https://unpkg.com/m-@3.2.0/dist/m-.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://unpkg.com/m-@3.2.0/dist/m-.js\" defer\u003e\u003c/script\u003e\n```\nOr install via NPM and bundle with your own assets: `npm install m-` (built files are located in `/dist`)\n\nThen try some Mdash:\n```html\n\u003cm-alert type=\"success\"\u003eSuccess!\u003c/m-alert\u003e\n```\n\n## Browser support\nMdash works with the latest versions of all mainstream browsers.\n\n## Working on this project\n_Pre-reqs:_ [Node](https://nodejs.org) and [Gulp CLI](https://gulpjs.com/docs/en/getting-started/quick-start)\n\n1. Clone the repo (or fork)\n1. `cd m-`\n1. `npm install`\n1. `gulp watch`\n1. `cd docs`\n1. `npm install`\n1. `npm start`\n\nThat builds Mdash, watches for changes, and starts the doc site. Start coding!\n\n### Developer notes\nCustom Element constructors have strict rules about what you can safely do inside them. Please get familiar with [Requirements for custom element constructors and reactions](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance).\n\nSome components are custom HTML tags that require no JavaScript. Other components are Custom Elements and for these the styles are still maintained in a separate CSS file.\n\nThe [TAC CSS methodology](https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology) is followed.\n\nSome IDEs complain about unknown HTML tags. If that's the case, add this list to make it happy:\n```\nm-accordion, m-alert, m-autocomplete, m-badge, m-box, m-breadcrumb, m-col, m-container, m-crumb, m-dot, m-icon, m-loader, m-menu, m-row, m-tab, m-tabs, m-tag, m-vbar\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfbrennan%2Fm-","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfbrennan%2Fm-","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfbrennan%2Fm-/lists"}