furz css (中文(简体) )

具有更多功能的 CSS QQ

fuz css是一个语义上的第一个CSS框架和设计系统. 语义 HTML 外观以零类完成 : 标题、链接、按钮、窗体、表格和点名, 并屏蔽元素自身空间. 主题是一个小节点,不是样式表: 花色、意图、光度曲线和天平 重新确定CSS的颜色和大小, 对比、游戏和坡道命令检查已发运的主题 是一个API,你可以自己运行. 一个 Vite 插件生成一个样式表,只保留变量,基底样式, 和工具分类,用于Svelte、React、Preact、Solid和Plain HTML.

浏览 文档 时间 cs.fuz.dev (英语), (中文(简体) ), 尝试 主题编辑器。 。 。 . 更多关于堆栈在 fuz.dev (英语)。 。 。 .

它在早期的α 与突破变化前. 欢迎反馈和设计投入 页:1 讨论情况。 。 。 .

安装

npm i -D @fuzdev/fuz_css

使用量

添加 Vite 插件 :

// vite.config.ts
import {defineConfig} from 'vite';
import {sveltekit} from '@sveltejs/kit/vite';
import {vite_plugin_fuz_css} from '@fuzdev/fuz_css/vite_plugin_fuz_css.ts';

export default defineConfig({
    plugins: [sveltekit(), vite_plugin_fuz_css()],
});

然后从您的根版式或条目文件中导入其虚拟模块一次 :

import 'virtual:fuz.css';

JSX(反应、预告、固态),安装 acorn-jsx 传为 vite_plugin_fuz_css({acorn_plugins: [jsx()]})。 。 。 . 这个 设置文件 涵盖每个框架 和虚拟模块的TypeScript声明.

没有建设步骤

软件包的两张平面样式表在任意一页工作, 基础 style.css 财务报告和审定财务报表 theme.css 与每个变量. jsDelivr 从 npm - pin 版本为它们服务 :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fuzdev/fuz_css@VERSION/dist/theme.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fuzdev/fuz_css@VERSION/dist/style.css" />

这是完整的语义造型; 工具类和烤入的主题需要插件 .

语义第一

此表型看起来已经完成, 主题, 并仅以内置的会话类分隔 :

<form>
    <label>
        <div class="title">email</div>
        <input type="email" />
    </label>
    <button>subscribe</button>
</form>

这个 title 阶级是基础风格承认的内在惯例之一, 喜欢 selected 财务报告和审定财务报表 palette_c。 。 。 . 当默认不覆盖某样东西, 到达一个类:

<!-- composite, token, and literal classes -->
<div class="row gap_md justify-content:space-between">
    <button class="palette_c">delete</button>
    <button class="selected">saved</button>
</div>

从尾风来

• 根字体大小为 62.5%这样 1rem 在浏览器默认情况下为 10px 和正文为 1.6rem每一个 rem 页面上的长度跟着它, 包括第三方,这相当于作者意图的62.5%. 尾风 p-4 实值 1rem, 16px; 这里有 16px 1.6rem,而相距符会带有比例尺(p_xl 默认值为 16px.
• 公用设施来自您使用的东西,通过解析来源找到 而不是和regex配对.
• 四种类: 用于设计变量的符号类映射(p_md, (中文(简体) ), color_a_50, (中文(简体) ), 关键词类是命名其属性的 CSS 关键词 (flex, (中文(简体) ), sticky, (中文(简体) ), uppercase, (中文(简体) ), 复合材料捆绑属性( e)row, (中文(简体) ), box, (中文(简体) ), panel, (中文(简体) ), 和字面内容是CSS本身在 property:value 窗体( e)justify-content:center, (中文(简体) ), margin:0~auto, (中文(简体) ), 与修改器类似 md: 财务报告和审定财务报表 hover:。 。 。 .
• Tailwind的关键词名称解析,它自己的名字不: a 尾风项目 flex, (中文(简体) ), hidden,或 sticky 在这里得到同样的CSS, 不过 items-center 财务报告和审定财务报表 justify-between 毫无警告, 这样 flex items-center 半工半读. 拼写为文字align-items:center) (中文(简体) ).
• 键盘、关键词和文字比复合材料: 复合材料在下级联层中制取, 这样 panel shadow_md 获得中影 不管阶级命令.

再来点 类。 。 。 .

捐款

fuz.dev/贡献者

许可证 🐦

0BSD 数据