@neatui/css

v4.2.4

Published

5 hours ago

NeatUI constrained atomic design system — SCSS source for production themes, plus preview CSS with default light/dark

0High
0Medium
0Low

xiaojunbo

neatui atomic-css design-system scss theme css preview

@neatui/css

http://neatui.fekit.cn

NeatUI 约束型原子设计系统（SCSS）。正式项目用 SCSS 自定义 $theme；试用可用预编译 preview（默认 light / dark）。

两种用法

试用（Preview，仅默认 light / dark）

<link rel="stylesheet" href="https://unpkg.com/@neatui/css/dist/neatui.preview.min.css" />
<html theme="light">

正式项目（SCSS + 自定义色卡）

$theme: ( light: (...), dark: (...) );
@use '@neatui/css' as *;
@include theme($theme);

Token schema

机器可读真相源：tokens/neatui.tokens.json

yarn tokens:generate   # 同步 VS Code 快照 + 文档 Token 索引
yarn tokens:check      # 校验快照未漂移
yarn validate --class "n-mm co-risk" --attr 'ui-flex="row xm"'

yarn validate 用同一份 schema 校验 class / ui-flex 等托管属性，拦住 Tailwind 式漂移写法。

特性

🎨 主题系统：种子色推导，多主题切换
📱 响应式：9 档断点
🎯 原子化：属性坐标 + 短 class
🔧 可定制：SCSS 变量与主题色卡
📦 组件皮：常用 UI 组件样式

核心模块

1. 基础样式 (basic)

提供了最基础的原子类：

尺寸控制：
- .full, .w-full, .h-full: 100% 宽度/高度
- .min-full, .min-w-full, .min-h-full: 最小宽度/高度 100%
- .max-full, .max-w-full, .max-h-full: 最大宽度/高度 100%
文本对齐：
- .ac: 居中对齐
- .al: 左对齐
- .ar: 右对齐
- .aj: 两端对齐
垂直对齐：
- .vt: 顶部对齐
- .vm: 中部对齐
- .vb: 底部对齐
- .avc: 水平垂直居中
定位：
- .pr: 相对定位
- .pa: 绝对定位
- .pf: 固定定位
- .ps: 粘性定位
浮动：
- .fl: 左浮动
- .fr: 右浮动
- .fn: 无浮动
- .cb: 清除浮动
字重：
- .fw1 ~ .fw9: 字重 100-900
- .fw0: 正常字重
- .fw-none: 无字重
- .fw-auto: 自动字重

2. 字号系统 (size)

全局字号：
- [size="xs"] ~ [size="xl"]: 基础字号（从 xs 到 xl）
- [ui-size="xs"] ~ [ui-size="xl"]: UI 组件字号
分级字号：
- .fs-xs ~ .fs-xl: 11档基础字号
- .fs-{size}*s: 展示字号段
- .fs-{size}*m: 大展示字号段
- .fs-{size}*l: 巨型字号段
- .fs-{size}-sub: 子元素字号
- .fs-case / .fs-note / .fs-desc / .fs-body / .fs-lead: 语义字号
- .fs-root: 重置为 1rem
- .fs++ / .fs--: 相对当前上下文放大或缩小

基础字号在根字号为 16px 时对应 11 / 12 / 13 / 14 / 15 / 16 / 18 / 20 / 22 / 24 / 28px；随后由 fs-xs*s 从 2rem / 32px 接续。完整刻度按 1 / 2 / 4 / 8 / 16px 分段递增。

4.0 已移除 fs-{size}+、fs-{size}* 和宽高 + 语法，并将 *s / *m / *l 改为分段刻度；fs++ / fs-- 是保留的上下文缩放语法。升级项目请先阅读 4.0 尺寸迁移指南，按旧实际值选择新档位。

行高：
- .lh-no: 无行高
- .lh-xs: 1倍行高
- .lh-ss: 1.25倍行高
- .lh-sm: 1.5倍行高
- .lh-ms: 1.75倍行高
- .lh-mm: 2倍行高
- .lh-ml: 2.25倍行高
- .lh-ls: 2.5倍行高
- .lh-lm: 2.75倍行高
- .lh-ll: 3倍行高
- .lh-xl: 3.5倍行高

3. 弹性布局 (flex)

基础属性：
- [ui-flex]: 弹性布局容器
- .flex-nowrap: 不换行
- .flex-wrap: 换行
- .flex-inline: 行内弹性布局
弹性项：
- .flex-fixed: 固定尺寸
- .flex-block: 占满剩余空间
- .flex-grow: 仅增长
- .flex-shrink: 仅收缩
方向与对齐（使用 [ui-flex~="..."]）：
- 行布局：
  - row lt: 左上对齐
  - row lm: 左中对齐
  - row lb: 左下对齐
  - row ct: 居中上对齐
  - row cm: 居中对齐
  - row cb: 居中下对齐
  - row rt: 右上对齐
  - row rm: 右中对齐
  - row rb: 右下对齐
  - row xt: 两端上对齐
  - row xm: 两端中对齐
  - row xb: 两端下对齐
- 列布局：
  - col lt: 左上对齐
  - col lm: 左中对齐
  - col lb: 左下对齐
  - 其他同行布局

4. 边框系统 (border)

边框样式：
- .b-solid: 实线边框
- .b-dashed: 虚线边框
- .b-double: 双线边框
- .b-dotted: 点线边框
边框宽度：
- 全边框：.b-no ~ .b-xx（0px ~ 12px）
- 水平边框：.bx-no ~ .bx-xx
- 垂直边框：.by-no ~ .by-xx
- 顶部边框：.bt-no ~ .bt-xx
- 右侧边框：.br-no ~ .br-xx
- 底部边框：.bb-no ~ .bb-xx
- 左侧边框：.bl-no ~ .bl-xx
边框颜色：
- .b-line：线条色
- .b-main：主题主色
- .b-risk：危险色
- .b-main-o-mm：带透明度的主题主色

4.0 已将旧的 bk-* 前缀收敛为 b-*，不再生成兼容类。b-solid、b-xs、b-line 分别表示边框样式、宽度和颜色。

尺寸等级：

no: 0px
xs: 1px
ss: 2px
sm: 3px
sl: 4px
ms: 5px
mm: 6px
ml: 7px
ls: 8px
lm: 9px
ll: 10px
xl: 11px
xx: 12px

5. 主题系统 (theme)

系统默认色卡：
- --co-main: 主色调 (#0889e4)
- --co-text: 文本色 (#000000)
- --co-fore: 前景色 (#ffffff)
- --co-back: 背景色 (#f5f5f5)
- --co-link: 链接色 (#d07950)
- --co-code: 代码色 (#e23861)
- --co-well: 成功色 (#4bbc73)
- --co-warn: 警告色 (#fb9a2a)
- --co-risk: 危险色 (#f95850)
- --co-info: 信息色 (#0889e4)
扩展色系：
- --co-read: 主要文本色 (85% 文本色)
- --co-desc: 描述文本色 (55% 文本色)
- --co-note: 注释文本色 (35% 文本色)
- --co-case: 案例文本色 (20% 文本色)
- --co-line: 线条色 (10% 文本色)
- --co-weak: 弱化色 (4% 文本色)
透明度变体：每个颜色都支持以下透明度变体：
- xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl 使用方式：--co-{color}-{variant}

6. 组件样式

每个组件都有其特定的样式类，以下是主要组件：

动画 (anim)：过渡和动画效果
按钮 (btns)：各种按钮样式
卡片 (card)：卡片容器样式
表单 (form)：表单元素样式
图标 (icon)：图标样式
图片 (imgs)：图片处理样式
分割线 (line)：分隔线样式
列表 (list)：列表样式
加载 (load)：加载动画
菜单 (menu)：菜单样式
导航 (navs)：导航样式
提示 (note)：提示文本样式
操作项 (opts)：操作按钮样式
路径 (path)：面包屑导航
侧边栏 (side)：侧边栏样式
步骤条 (steps)：步骤指示器
表格 (table)：表格样式
标签页 (tabs)：选项卡样式
标签 (tags)：标签样式
提示框 (tips)：提示框样式
标题 (title)：标题样式

使用方法

安装依赖：

npm install @neatui/css

引入样式：

// 全量引入
@import '@neatui/css/neatui.scss';

// 按需引入
@import '@neatui/css/core/basic.scss';
@import '@neatui/css/core/theme.scss';
// ... 其他需要的模块

配置主题（可选）：

@use '@neatui/css/core/theme' with (
  $theme: (
    light: (
      main: #0889e4,
      text: #000000,
      // ... 其他颜色配置
    ),
    dark: (
      main: #2196f3,
      text: #ffffff,
      // ... 其他颜色配置
    ),
  )
);

响应式设计

所有样式类都支持响应式前缀：

默认：无前缀
平板：pad:
移动端：mob:

使用示例：

<div class="flex-block pad:flex-fixed mob:flex-grow">
  <!-- 在不同设备上有不同的弹性布局行为 -->
</div>

最佳实践

使用主题系统时，建议遵循 NeatUI 设计规范建立主题色卡
优先使用预定义的原子类，避免重复编写样式
合理使用响应式类，确保在不同设备上的最佳展现
按需引入所需模块，减少不必要的代码体积
使用语义化的组件类名，提高代码可维护性

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进 @neatui/css。在提交之前，请确保：

遵循项目的代码规范
编写必要的文档和注释
添加相应的测试用例

许可证

MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@neatui/css

两种用法

Token schema

特性

核心模块

1. 基础样式 (basic)

2. 字号系统 (size)

3. 弹性布局 (flex)

4. 边框系统 (border)

5. 主题系统 (theme)

6. 组件样式

使用方法

响应式设计

最佳实践

贡献指南

许可证