{"id":13490683,"url":"https://github.com/lowlighter/matcha","last_synced_at":"2025-05-14T02:08:42.622Z","repository":{"id":240612883,"uuid":"798101176","full_name":"lowlighter/matcha","owner":"lowlighter","description":"🍵 Drop-in semantic styling library in pure CSS. Highly customizable and perfect for simple websites and prototyping web apps!","archived":false,"fork":false,"pushed_at":"2024-12-19T05:51:31.000Z","size":1417,"stargazers_count":1850,"open_issues_count":17,"forks_count":43,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-12T20:17:18.147Z","etag":null,"topics":["classless","classless-css","css","css-framework","design","minimalist","semantic-web","simple","theme","web"],"latest_commit_sha":null,"homepage":"https://matcha.mizu.sh","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/lowlighter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lowlighter"}},"created_at":"2024-05-09T05:12:05.000Z","updated_at":"2025-05-08T05:39:53.000Z","dependencies_parsed_at":"2024-05-28T06:09:26.190Z","dependency_job_id":"0309fa7a-5b3b-47d9-b62b-700ccf4117b3","html_url":"https://github.com/lowlighter/matcha","commit_stats":{"total_commits":167,"total_committers":5,"mean_commits":33.4,"dds":0.0239520958083832,"last_synced_commit":"5cb2076a187e135ac3f92c40a0d3b73f69c19c95"},"previous_names":["lowlighter/matcha"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmatcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmatcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmatcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmatcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lowlighter","download_url":"https://codeload.github.com/lowlighter/matcha/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254053195,"owners_count":22006717,"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":["classless","classless-css","css","css-framework","design","minimalist","semantic-web","simple","theme","web"],"created_at":"2024-07-31T19:00:50.102Z","updated_at":"2025-05-14T02:08:37.610Z","avatar_url":"https://github.com/lowlighter.png","language":"CSS","readme":"# 🍵 matcha.css\n\n[![matcha.mizu.sh](https://img.shields.io/badge/%F0%9F%8C%8A-See%20it%20live%20on%20matcha.mizu.sh!-black?labelColor=black)](https://matcha.mizu.sh)\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"/app/icons/matchat.svg\" width=\"300\"\u003e\u003c/p\u003e\n\n**matcha.css** is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.\n\nIdeal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use of\n[the full range of available HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element).\n\n- ✅ **No** build steps\n- ✅ **No** dependencies\n- ✅ **No** JavaScript\n- ✅ **No** configuration needed\n- ✅ **No** refactoring required\n- ✅ `~7kB` gzipped _(can be further reduced)_\n\n### 📸 Screenshot examples\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"/.github/demo-dark-a.png\"\u003e\n  \u003cimg alt=\"\" src=\"/.github/demo-light-a.png\" width=\"400\"\u003e\n\u003c/picture\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"/.github/demo-dark-b.png\"\u003e\n  \u003cimg alt=\"\" src=\"/.github/demo-light-b.png\" width=\"400\"\u003e\n\u003c/picture\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"/.github/demo-dark-c.png\"\u003e\n  \u003cimg alt=\"\" src=\"/.github/demo-light-c.png\" width=\"400\"\u003e\n\u003c/picture\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"/.github/demo-dark-d.png\"\u003e\n  \u003cimg alt=\"\" src=\"/.github/demo-light-d.png\" width=\"400\"\u003e\n\u003c/picture\u003e\n\n## 🥢 Why choose **matcha.css**?\n\n### 🍜 Agnostic\n\nWorks seamlessly with any document and covers a broader range of HTML elements compared to similar libraries. It remains unobtrusive by leveraging CSS pseudo-elements and offers extensive\n[browser support](https://matcha.mizu.sh/#supported-browsers).\n\n### 🍥 Reversible\n\nSimply include its `\u003clink rel=\"stylesheet\"\u003e` to get started, and remove it whenever necessary without the need for document refactoring or cleanup.\n\n### 🍡 Semantic\n\nAdapts styling based on elements hierarchy, providing intuitive behaviors such as \"implicit submenus\" when nesting `\u003cmenu\u003e` elements, required field indicator (`*`) when a `\u003clabel\u003e` is paired with\n`\u003cinput required\u003e`, etc.\n\n### 🍱 Customizable\n\nBrew your own build using our [custom builder](https://matcha.mizu.sh/#custom-build) to select specific features and reduce the final build size according to your project's needs.\n\n### 🍘 Open-source\n\nReleased under the [MIT License](/LICENSE), freely available at [github.com/lowlighter/matcha](https://github.com/lowlighter/matcha).\n\n## 📖 Usage\n\nTo utilize **matcha.css**, just include the following line in the `\u003chead\u003e` section of your document. It's that simple!\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://matcha.mizu.sh/matcha.css\"\u003e\n```\n\nAssets are hosted on [Vercel](https://vercel.com) but _matcha.css_ is also available on\n[![npm](https://img.shields.io/npm/v/@lowlighter%2Fmatcha?logo=npm\u0026labelColor=cb0000\u0026color=black)](https://www.npmjs.com/package/@lowlighter/matcha) and CDN services that distributes npm packages such\nas [JSdelivr](https://www.jsdelivr.com/package/npm/@lowlighter/matcha).\n\nAll published versions are available in the [`/v/`](https://matcha.mizu.sh/v/) directory. By default, the `main` branch is served.\n\n### 🍴 À la carte\n\nEach subdirectory listed in [`/styles`](/styles) directory is also directly served from [matcha.mizu.sh](https://matcha.mizu.sh). For example, if you only wish to include the\n[`@syntax-highlighting`](/styles/@syntax-highlighting/mod.css) styles rather than using the default build or a custom one, you could use:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css\"\u003e\n```\n\nHowever note that unless you provide your own CSS variables, you will most likely need to include the [`@root`](/styles/@root/mod.css) package as it contains all matcha.css variables definition.\n\n\u003e All `mod.css` files are also aliased to their respective parent directories for convenience, which means you can also use:\n\u003e\n\u003e ```html\n\u003e \u003clink rel=\"stylesheet\" href=\"https://matcha.mizu.sh/@syntax-highlighting.css\"\u003e\n\u003e ```\n\n## 🫰 Contributing\n\n### 🎌 Project scope\n\n- Respect accessibility and usability best practices\n- Respect end-users' preferences _(e.g., color scheme)_\n- Be desktop and mobile friendly\n- Not drastically change its current styling _(unless to fulfill one of the previous mentioned principles)_\n- Remain lightweight, modular and customizable\n  - Additional features considered as \"bloat\" will be excluded by default and will be opt-in\n  - `!important` rules will never be used to ensure users can easily override styles\n\n### 📂 Project structure\n\nThis project is separated into three main directories:\n\n- `/api` for serverless functions run on [Vercel](https://vercel.com)\n- `/app` for entry points, static assets, and build scripts\n- `/styles` for CSS source files\n\n### 🎨 About `/styles` directory\n\nEach subdirectory within this folder is intended to be mostly self-contained and scoped. It helps to keep the codebase organized while also allows users to cherry-pick specific features and create\ncustom builds.\n\nExtra features should be prefixed using the character `@` and should most likely be excluded by default in the builder to avoid bloating the default build.\n\n### 🧑‍💻 Development lifecycle\n\nWhen submitting a pull request, the preview will be available on [Vercel](https://vercel.com). Maintainers and other contributors can review the changes and provide feedback before merging.\n\nLocal development is intended to be done using the [deno](https://deno.com) runtime. If you do not wish to install it, you can also use the provided [devcontainer](/.devcontainer) configuration to run\nthe project in a containerized environment or directly on [GitHub Codespaces](https://github.com/features/codespaces).\n\nTo start the development server, run the following command:\n\n```sh\ndeno task serve\n```\n\nBefore submitting your changes, ensure everything is correctly formatted by running the following command:\n\n```sh\ndeno task fmt\n```\n\n# 📜 License\n\n```\nMIT License\nCopyright (c) 2024-present Simon Lecoq (lowlighter)\n```\n","funding_links":["https://github.com/sponsors/lowlighter"],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flowlighter%2Fmatcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flowlighter%2Fmatcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flowlighter%2Fmatcha/lists"}