一个仅使用HTML编写现代网站的无类CSS框架

2020-05-18 17:38:37

Vercel‘s超快的CDN使用XZ/Fonts提供new.css和font Inter,因此几乎不会给您的页面增加任何臃肿。

当然,还有一种黑暗模式。它会根据您浏览器的首选项自动应用亮/暗主题。

它支持使用CSS变量的自定义颜色主题和字体。例如,查看终端主题:newcss.net/heme/Terminal/。

精简版使用代码<;link rel=";href=";https://newcss.net/lite.css";>;💡,它使用系统字体堆栈,而不是导入系统字体堆栈。

new.css使用10色调色板,可以轻松定制。它们在:root属性中声明为CSS变量。

💡new.min.css和lite.css都支持自定义主题。默认情况下,Lite不导入INTER字体,因此如果您使用的是自定义字体,则建议使用该字体。

通过在HTML中的new.css之后加载一个辅助样式表,您可以覆盖这些变量。以下是默认主题:

@导入URL(';https://fonts.xz.style/serve/inter.css';);:根{--NC-FONT-SANS:';INTER&39;,-APPLE-SYSTEM,BlinkMacSystemFont,';Segoe UI&39;,Roboto,Oxygen,Ubuntu,Cantarell,';Open SANS';,';Helvetica Neue&39;,sans-serif,&34;Apple Color Emoji&34;,";Segoe UI Emoji";,";;--NC-font-mono:';Courier New';,Courier,&39;Ubuntu Mono';,MonSpace;--NC-TX-1:#000000;--NC-TX-2:#1A1A1A;--NC-BG-1:#FFFFG-1。--nc-bg-3:#E5E7EB;--nc-lk-1:#0070F3;--nc-lk-2:#0366D6;--nc-lk-tx:#FFFFFF;--nc-ac-1:#79FFE1;--nc-ac-tx:#0C4047;}。

在:root中创建包含上述部分或全部变量的样式表。此处提供了一个示例主题文件:boilerplate.css。

如果您想导入自定义字体,请将@import标记放在:root元素之前。XZ/Fonts上提供了许多开源字体。

这里有两个带有CDN链接的额外主题。您可以随意使用或编辑它们!