@0x44ru5h/cute.css 中文文档教程
cute.css v2.0.2
a cute, modern, and minimal css framework designed for simplicity
Overview
cute.css 是一个 css 框架，设计现代且极简，为用户着想； 这就是为什么它带有两个预构建的主题 (src/themes/)，浅色和深色，使自定义主题比其他具有简单 css 变量的框架更容易。 它使用 html 对象名称而不是类来使应用样式更加容易。 在 https://hornersteamclub.github.io 查看它的运行情况。
Styles
header
header 对象用于上面的所有内容，包括导航栏，例如标题和品牌图片。
<header>
...
</header>
nav
nav 对象用于在 header 标签下使用导航栏。 导航栏中的链接是简单的 a 标签。
<header>
...
<nav>
<a href = "...">...</a>
</nav>
...
</header>
main
main 对象用于页面内容，将在 header 标记之后使用。
<main>
...
</main>
footer
footer 对象用于版权内容，在main 标记之后 使用。
<footer>
...
</footer>
Mobile
cute.css 附带内置的移动样式，使内容在平板电脑、小型计算机和智能手机等设备上可读。
Custom Themes
cute.css 包含一个简单的 api，用于在 css 变量的帮助下创建自定义主题。
这是来自 src/basic.cute.css 的示例主题
:root {
--cute-text: #ffffff;
--cute-background: #151D21;
--cute-background-accent: #000000;
--cute-accent: #2fa5ff;
--cute-accent-dark: #2571db;
--cute-accent-greyscale: #777777;
}
自定义主题采用相同的格式，所有值都是颜色值（十六进制，rgb）。
--cute-text
文本
--cute-background
颜色 背景颜色 背景
--cute-background-accent
强调颜色（补充主要）
--cute-accent
文本
--cute-accent-dark
强调颜色 文本的深强调颜色 文本的
--cute-accent-greyscale
灰度强调颜色
Browser Compatibility
cute.css 适用于所有现代浏览器，包括桌面和移动设备。
Copyright © 2021 Aarush Gupta
此代码受版权保护，但根据 GNU AGPLv3 许可证和任何更高版本授权给公众。
cute.css v2.0.2
a cute, modern, and minimal css framework designed for simplicity
Overview
cute.css is a css framework designed to be modern and minimal, with simplicity for the user in mind; that is why it ships with two pre-built themes (src/themes/), light and dark, with making custom themes easier than other frameworks with simple css variables. It uses html object names rather than classes to make applying styles much easier. See it in action at https://hornersteamclub.github.io.
Styles
header
The header object is for all content above and including the navigation bar, such as titles and brand images.
<header>
...
</header>
nav
The nav object is for the navigation bar is to be used under the header tag. Links in the navagation bar are simple a tags.
<header>
...
<nav>
<a href = "...">...</a>
</nav>
...
</header>
main
The main object is for page content and is to be used after the header tag.
<main>
...
</main>
footer
The footer object is for copyright content is used after the main tag.
<footer>
...
</footer>
Mobile
cute.css ships with mobile styles built-in to make content readable on devices such as tablets, mini-computers, and smartphones.
Custom Themes
cute.css includes a simple api for creating custom themes, with the help of css variables.
Here is a sample theme from src/basic.cute.css
:root {
--cute-text: #ffffff;
--cute-background: #151D21;
--cute-background-accent: #000000;
--cute-accent: #2fa5ff;
--cute-accent-dark: #2571db;
--cute-accent-greyscale: #777777;
}
Custom themes are put in the same format, with all values as color values (hex, rgb).
--cute-text
Color of text
--cute-background
Color of background
--cute-background-accent
Accent color (complements main) of background
--cute-accent
Accent color of text
--cute-accent-dark
Darker accent color of text
--cute-accent-greyscale
Greyscale accent color of text
Browser Compatibility
cute.css works in all modern browsers, both desktop and mobile.
Copyright © 2021 Aarush Gupta
This code is copyrighted but licensed to the public under the GNU AGPLv3 license and any later versions.
