@wbiokr/css-class

一套轻量、高效的 CSS 原子类库，基于 Stylus 编写，助力快速开发页面布局

📦 安装

npm install @wbiokr/css-class

🚀 快速开始

方式一：直接引入 CSS 文件

<link rel="stylesheet" href="node_modules/@wbiokr/css-class/dist/APP.css">

方式二：在 JS/TS 中引入

import '@wbiokr/css-class/dist/APP.css'

方式三：按需引入 Stylus 源文件

// 引入全部
@import '~@wbiokr/css-class/src/stylus/html.styl'

// 或按需引入
@import '~@wbiokr/css-class/src/stylus/flex.styl'
@import '~@wbiokr/css-class/src/stylus/grid.styl'
@import '~@wbiokr/css-class/src/stylus/distance.styl'

📖 使用文档

1. 布局类（Layout）

Flexbox 布局

<div class="d-f">                    <!-- display: flex -->
  <div class="f-1">弹性占比 1</div>    <!-- flex: 1 -->
  <div class="f-2">弹性占比 2</div>    <!-- flex: 2 -->
</div>

<div class="f-c">                    <!-- flex + 水平垂直居中 -->
  <div>居中内容</div>
</div>

<div class="f-column">               <!-- flex-direction: column -->
  <div>纵向排列</div>
</div>

<div class="f-w-w">                  <!-- flex-wrap: wrap -->
  <div>换行排列</div>
</div>

Grid 布局

<div class="d-g">                    <!-- display: grid -->
  <div>网格项</div>
</div>

<div class="g-f-col">                <!-- grid-auto-flow: column -->
  <div>列方向网格</div>
</div>

Display 工具类

<div class="d-b">block</div>
<div class="d-i">inline</div>
<div class="d-i-b">inline-block</div>
<div class="d-i-f">inline-flex</div>
<div class="d-n">隐藏（display: none）</div>

2. 尺寸类（Size）

宽度 / 高度（像素）

<div class="w-100">宽度 100px</div>
<div class="w-200">宽度 200px</div>
<div class="h-50">高度 50px</div>
<div class="h-300">高度 300px</div>

宽度 / 高度（百分比）

<div class="w-per-50">宽度 50%</div>
<div class="w-per-100">宽度 100%</div>
<div class="h-per-50">高度 50%</div>
<div class="h-per-100">高度 100%</div>

行高

<p class="l-h-40">行高 40px</p>

3. 间距类（Spacing）

Margin 外边距

<div class="m-20">四周 20px</div>
<div class="m-t-20">上 20px</div>
<div class="m-b-20">下 20px</div>
<div class="m-l-20">左 20px</div>
<div class="m-r-20">右 20px</div>
<div class="m-tb-20">上下 20px</div>
<div class="m-lr-20">左右 20px</div>
<div class="m-auto">居中</div>
<div class="m-no">无边距</div>

Padding 内边距

<div class="p-20">四周 20px</div>
<div class="p-t-20">上 20px</div>
<div class="p-b-20">下 20px</div>
<div class="p-l-20">左 20px</div>
<div class="p-r-20">右 20px</div>
<div class="p-tb-20">上下 20px</div>
<div class="p-lr-20">左右 20px</div>
<div class="p-no">无内边距</div>

Gap 间距（Grid/Flex）

<div class="d-g gap-10">            <!-- gap: 10px -->
  <div>网格项</div>
</div>

<div class="d-f gap-row-20">        <!-- row-gap: 20px -->
  <div>Flex 项</div>
</div>

<div class="d-g gap-col-15">        <!-- column-gap: 15px -->
  <div>网格项</div>
</div>

4. 文本类（Text）

文本对齐

<p class="t-c">居中对齐</p>
<p class="t-l">左对齐</p>
<p class="t-r">右对齐</p>
<p class="t-j">两端对齐</p>

文本省略

<!-- 单行省略 -->
<p class="white-1">超长文本单行省略...</p>

<!-- 多行省略（2-5 行） -->
<p class="white-2">超长文本两行省略...</p>
<p class="white-3">超长文本三行省略...</p>

光标样式

<button class="c-p">指针光标</button>
<button class="c-d">默认光标</button>
<button class="c-n">禁止光标</button>

其他文本工具

<p class="t-i-2">首行缩进 2 字符</p>
<p class="t-d-u">下划线文本</p>
<p class="t-d-t">删除线文本</p>
<p class="t-t-u">TEXT TRANSFORM UPPERCASE</p>
<p class="w-s-nowrap">不换行文本</p>
<p class="w-b-word">自动换行</p>

5. 定位类（Position）

<div class="p-r">                    <!-- position: relative -->
  <div class="p-a">绝对定位</div>
</div>

<div class="p-f">固定定位</div>
<div class="p-s">粘性定位</div>

6. 视觉类（Visual）

透明度

<div class="op-50">50% 透明度</div>
<div class="op-80">80% 透明度</div>

边框

<div class="b-1">1px 边框</div>
<div class="b-t-1">上边框</div>
<div class="b-b-1">下边框</div>
<div class="b-l-1">左边框</div>
<div class="b-r-1">右边框</div>
<div class="b-r-8">8px 圆角</div>
<div class="b-circle">圆形边框</div>

7. 交互类（Interaction）

Pointer Events

<div class="p-e-none">不可点击</div>
<div class="p-e-auto">可点击</div>

User Modify（可编辑）

<div class="u-m-w">可编辑区域</div>

📁 文件结构

@wbiokr/css-class
├── src/stylus/
│   ├── html.styl              # 主入口（引入所有模块）
│   ├── flex.styl              # Flexbox 布局
│   ├── grid.styl              # Grid 布局
│   ├── distance.styl          # Margin/Padding
│   ├── size.styl              # 宽度/高度
│   ├── text.styl              # 文本样式
│   ├── position.styl          # 定位
│   ├── layout.styl            # 布局工具
│   ├── border.styl            # 边框
│   ├── background.styl        # 背景
│   ├── opacity.styl           # 透明度
│   ├── font.styl              # 字体
│   ├── effect.styl            # 特效
│   └── svg/                   # SVG 相关样式
├── dist/
│   └── APP.css                # 构建产物
├── html/                       # HTML 工具类
├── private/                    # 私有工具类
└── wx/                         # 微信小程序工具类

🛠 开发命令

# 开发模式（监听编译）
npm run dev

# 构建生产版本
npm run build

# 发布到 npm
npm run pub

# 清空临时文件
npm run empty

# 安装依赖（淘宝镜像）
npm run itl

📋 命名规范

| 前缀 | 含义 | 示例 | |------|------|------| | d- | display | d-f (flex), d-g (grid) | | f- | flex | f-1 (flex:1), f-c (居中) | | g- | grid | g-f-row (row flow) | | w- / h- | 宽/高 | w-100, h-per-50 | | m- / p- | margin/padding | m-20, p-t-10 | | t- | text | t-c (居中), t-l (左对齐) | | b- | border | b-1, b-circle | | l-h- | line-height | l-h-40 | | gap- | gap 间距 | gap-10, gap-row-20 |

🌟 特色功能

• 原子化 CSS：细粒度工具类，灵活组合
• 响应式友好：百分比尺寸，适配多端
• 按需引入：支持单独引入所需模块
• 小程序支持：提供 wx/ 目录兼容微信小程序
• 轻量无依赖：纯 CSS 输出，零 JS 运行时

📝 License

ISC © Wbiokr

🔗 链接

• npm 主页
• Gitee 仓库