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)