Matcha.css是一个纯CSS库,旨在与默认的浏览器样式表相似,旨在样式的HTML元素样式,从而消除了用户手动修补其文档的需求。
非常适合快速原型制作,静态HTML页面,销售生成的文档以及寻求简化其工作流程的开发人员而不涉足CSS复杂性,并希望使用一系列可用的HTML元素。
~7kB gzpipped (可以进一步减少)



与类似库相比,与任何文档无缝作品,并涵盖了更广泛的HTML元素。利用CSS伪元素并提供广泛的浏览器支持,它仍然没有引人注目。
只需将其<link rel="stylesheet">启动即可开始,并在必要时将其删除,而无需文档重构或清理。
根据元素层次结构进行调整样式,在嵌套<menu>元素时提供直观的行为,例如“隐式子菜单”,当<label>与<label>与<input required>等时,所需的字段指示器( * )等。
使用我们的自定义构建器酿造自己的构建,以选择特定功能,并根据您的项目的需求减少最终构建尺寸。
根据MIT许可证发布,可在github.com/lowlighter/matcha上免费获得。
要使用抹茶<head>这很简单!
< link rel =" stylesheet " href =" https://matcha.mizu.sh/matcha.css " >资产托管在vercel上,但在分发NPM软件包(例如JSDELIVR)的CDN服务上也可以使用Matcha.css 。
所有已发布的版本均在/v/ Directory中可用。默认情况下, main分支提供。
/styles目录中列出的每个子目录也可以直接从Matcha.mizu.sh提供。例如,如果您只希望包括@syntax-highlighting样式,而不是使用默认构建或自定义构建样式,则可以使用:
< link rel =" stylesheet " href =" https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css " >但是,请注意,除非您提供自己的CSS变量,否则您很可能需要包含@root软件包,因为它包含所有Matcha.css变量定义。
为了方便起见,所有
mod.css文件也都与其各自的父目录混为一谈,这意味着您也可以使用:< link rel =" stylesheet " href =" https://matcha.mizu.sh/@syntax-highlighting.css " >
!important规则将永远不会用来确保用户可以轻松覆盖样式该项目分为三个主要目录:
/api/app/styles/styles目录该文件夹中的每个子目录旨在主要是独立的和范围的。它有助于保持代码库的组织,同时还允许用户挑选特定功能并创建自定义构建。
额外的功能应使用字符@进行前缀,并且默认情况下应在构建器中排除,以避免默认构建。
提交拉动请求时,预览将在Vercel上可用。维护者和其他贡献者可以在合并之前审查更改并提供反馈。
本地开发旨在使用DENO运行时完成。如果您不希望安装它,也可以使用所提供的DevContainer配置在容器化的环境中或直接在GitHub代码上运行该项目。
要启动开发服务器,请运行以下命令:
deno task serve在提交更改之前,请确保通过运行以下命令正确格式化所有内容:
deno task fmt MIT License
Copyright (c) 2024-present Simon Lecoq (lowlighter)