@neatui/css

http://neatui.fekit.cn

@neatui/css 是一个现代化的原子样式库，提供了丰富的预定义样式类，帮助开发者快速构建界面。

特性

• 🎨 主题系统：支持自定义主题色卡，内置智能色彩系统
• 📱 响应式：内置响应式设计支持
• 🎯 原子化：提供大量可复用的原子类
• 🔧 可定制：支持 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-xxs ~ .fs-xxl: 字体大小（从极小到极大）
  • .fs-{size}+: 增加字号（+0.05rem）
  • .fs-{size}*: 双倍字号
  • .fs-{size}-sub: 子元素字号

• 行高：

  • .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-dotted: 点线边框

• 边框宽度：

  • 全边框：.b-no ~ .b-xl（0px ~ 1rem）
  • 水平边框：.bx-no ~ .bx-xl
  • 垂直边框：.by-no ~ .by-xl
  • 顶部边框：.bt-no ~ .bt-xl
  • 右侧边框：.br-no ~ .br-xl
  • 底部边框：.bb-no ~ .bb-xl
  • 左侧边框：.bl-no ~ .bl-xl

尺寸等级：

• no: 0px
• xs: 1px
• ss: 2px
• sm: 3px
• sl: 4px
• ms: 5px
• mm: 0.5rem
• ml: 0.6rem
• ls: 0.7rem
• lm: 0.8rem
• ll: 0.9rem
• xl: 1rem

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)：标题样式

使用方法

1. 安装依赖：

npm install @neatui/css

2. 引入样式：

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

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

3. 配置主题（可选）：

@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>

最佳实践

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

贡献指南

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

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

许可证

MIT License