飞立（plui）

飞立（plui）是一个自研的响应式 CSS 框架。正式名称已定：中文名「飞立」，英文名 plui。

这是什么

飞立（plui）是一个自研的响应式 CSS 框架，风格是白底黑线的极简设计：只有黑、白、灰三色，1px 实线边框，圆角为 0，不用阴影、渐变与彩色块。

ui.phli.cn 是该框架的开发与文档站点：源码在 src/，构建产物在 dist/，说明文档在 docs/，示例页面在 examples/，构建脚本在 build/。

当前版本 0.3.0。

站点上的 cPanel/LiteSpeed 会拦截 .md 直接访问（返回 403），所以每篇文档都配了一份同名 .html，用浏览器看 HTML，用编辑器改 Markdown。两者由 build/build-docs.mjs 从同一份 Markdown 生成。

Markdown 源文件	浏览器可看的版本	内容
`README.md`	`README.html`	本文件：项目说明与目录职责
`GETTING-STARTED.md`	`GETTING-STARTED.html`	上手：引入、栅格、断点、组件用法
`UTILITIES.md`	`UTILITIES.html`	工具类：命名规则、分类清单与刻度表
`THEMING.md`	`THEMING.html`	令牌与主题：分层结构、语义令牌、主题层预留
`COMPONENTS.md`	`COMPONENTS.html`	组件清单：类名表与最小示例
`COMMONJS.md`	`COMMONJS.html`	`src/common.js`（sx 函数库）API 清单与用法约定
`DECISIONS.md`	`DECISIONS.html`	决策清单：已定项与待定项
`ENVIRONMENT.md`	`ENVIRONMENT.html`	环境与约束记录

目录	职责
`src/`	框架源码。CSS 在 `src/css/`，交互层是 `src/plui.js`，JS 依赖是 `src/common.js`。
`src/css/base/`	基础层：CSS 自定义属性（设计令牌）、reset、排版基线、元素默认样式。
`src/css/utilities/`	工具类层：Tailwind 式原子类，按 8 个分类拆分，由 `build/gen-utilities.mjs` 生成，不要手改。
`src/css/components/`	组件层：按钮、表单、导航、标签页、折叠、提示框、卡片、面包屑、分页、表格、徽标、下拉、模态、轮播、吐司、列表组、进度条、堆叠、提示气泡、弹出框、加载态、图标。
`src/css/layout/`	布局层：容器与栅格。
`src/css/responsive/`	响应式层：五档断点的变体，与 `utilities/` 按同一分类一一对应，同样由生成器产出。
`dist/`	构建产物输出目录。发布出去的成品在这里，不要手改。
`docs/`	框架文档：项目说明、上手、组件清单、JS API、工具类、主题与令牌、依赖库说明、决策清单、环境约束。
`examples/`	示例页面，用于演示与回归检查。
`build/`	构建脚本（由本地 Node 工具链调用，站点上只存脚本与说明）。`build/check.mjs` 是可重复运行的自动化检查，`build/mini.mjs` 做按需裁剪构建。`build/generators/` 是工具类刻度表与生成器，`build/gen-utilities.mjs` 生成工具类源码，`build/build.mjs` 拼接产物，`build/build-docs.mjs` 生成文档 HTML。

第三版已实现（v0.3.0），对齐 Bootstrap 5 的组件覆盖与 JS API 习惯。

工具类全面换成 Tailwind 路线：8 个分类、基线 2198 条、断点变体 5840 条，合计 8038 个类名
组件层补齐到 Bootstrap 5 的主要组件：轮播、吐司、工具提示、弹出框、导航栏、列表组、进度条、堆叠、加载态、表格变体、表单校验与输入组、徽标、面包屑、分页、RTL
令牌改成四层结构（原始 / 语义 / 组件 / 主题），语义色只用在 1px 边框与文字上，不铺大面积色块
组件层补齐到 Bootstrap 5 的覆盖范围：新增离屏面板、滚动监听、占位块、按钮组、输入组、浮动标签、导航变体、图文元素、辅助类
JS 层改成 Bootstrap 习惯：new plui.X(el) 实例化 + show/hide/toggle/dispose + show.bs.plui 系列事件 + data-api 自动初始化
暗色模式落地（data-plui-theme="dark" 或跟随系统），另有打印样式、减少动效偏好、高对比度适配
工程侧新增 build/check.mjs 自动化检查与 build/mini.mjs 按需裁剪构建
产物：dist/css/plui-0.3.0.css（约 469 KB）与 .min.css（约 430 KB），另有 plui.css / plui.min.css 别名；裁剪版 plui-mini.css 约 63 KB

设计口径与未决项见 DECISIONS.md。

组件层补齐到 Bootstrap 5 的覆盖范围（新增离屏面板、滚动监听、占位块、按钮组、输入组、浮动标签、导航变体、图文元素、辅助类）。
src/plui.js 重写为 Bootstrap 风格的组件式 API：new plui.X(el)、show/hide/toggle/dispose、show.bs.plui 系列事件、data-plui-* 自动初始化。这是破坏性变更，旧脚本请改用 plui.* 公共入口。
新增暗色主题、打印样式、减少动效与高对比度适配；弱化文本色值上调以满足 WCAG AA。
工程侧新增 build/check.mjs（10 项自动化检查）与 build/mini.mjs（按需裁剪构建）。
修复：order-first / order-last 之前生成了非法值 first / last，现为 -9999 / 9999；display:table 工具类与表格组件重名，已从工具类移除；栅格层重复定义的 order-* 已归并到工具类。

v0.1.0 的旧工具类名已全部移除（.plui-m-{0..5}、.plui-d-*、.plui-text-lg-start、.plui-mt-md-3 等）。对照如下：

v0.1.0（已移除）	v0.2.0
`.plui-m-3` / `.plui-p-2`	`.plui-m-3` / `.plui-p-2`（档位改为 0.25rem 步进）
`.plui-mt-md-3`	`.plui-md:mt-3`
`.plui-d-block` / `.plui-d-md-none`	`.plui-block` / `.plui-md:hidden`
`.plui-text-center` / `.plui-text-lg-start`	`.plui-text-center` / `.plui-lg:text-left`
`.plui-fs-lg` / `.plui-fw-bold`	`.plui-text-lg` / `.plui-font-bold`
`.plui-position-relative`	`.plui-relative`
`.plui-visually-hidden`	保留（与 `.plui-sr-only` 等价）
`.plui-col-md-6`（栅格）	不变，栅格与组件仍走 Bootstrap 中缀写法

栅格类（.plui-col-*、.plui-offset-*、.plui-g-*）与组件类（.plui-btn-*、.plui-nav-*、.plui-card-* 等）命名与用法不变。

改源码后必须重新构建并上传 dist/，否则线上示例页展示的仍是旧规则。

本页由 build/build-docs.mjs 从同名 Markdown 生成，请修改 .md 后重新生成，不要手工编辑本文件。