图文元素与占位块
极简风格不是少做功能，而是把视觉噪音降到最低。
行内代码 plui-btn、
代码块 Ctrl C、
高亮 重点、
缩写 ARIA、
小型大写 HTML
const modal = plui.Modal.getOrCreateInstance('#demo-modal');
modal.show();- 行内列表一
- 行内列表二
版本 0.3.0 · 产物 dist/css/plui.css · 交互依赖 src/common.js（sx 函数库）与 src/plui.js
共 8 个分类、2000 余个基线类，断点变体另计 5000 余个。工具类按分类拆到独立文件，生成器产出的源码直接进版本库。
p / px / py / pt / pr / pb / pl / ps / pe / m / mx / my / mt / mr / mb / ml / ms / me / gap / space-x / space-y / inset。
灰阶 50–900 加可选语义色；默认版式只用灰阶，语义色只做 1px 边框与文字，不铺大面积色块。
文字：text-black · text-gray-500 · text-muted · text-red-600
写法：.plui-{断点}:{属性}-{取值}。断点为 sm ≥576px、md ≥768px、lg ≥992px、xl ≥1200px、xxl ≥1400px。 下方方块随视口宽度变化，拖动浏览器窗口即可看到「一列 → 三列 → 六列」的变化。
方向与尺寸的断点变体：
文字大小随断点变化：
这段文字在 sm 下是小号，md 起变大号，lg 起再放大。
内边距随断点变化（.plui-p-2 .plui-md:p-8）：
栅格沿用 Bootstrap 的中缀写法 .plui-col-md-6，与工具类的断点前缀写法并存但各管一层：栅格是组件层，工具类是原子层。
这是一条成功提示，语义色只出现在 4px 左边框上。
点右上角 × 可以关掉这条提示。
徽标 12 描边 危险
| 编号 | 名称 | 状态 |
|---|---|---|
| 01 | 第一条 | 完成 |
| 02 | 第二条 | 进行中 |
| 03 | 第三条 | 排队 |
极简风格不是少做功能，而是把视觉噪音降到最低。
行内代码 plui-btn、
代码块 Ctrl C、
高亮 重点、
缩写 ARIA、
小型大写 HTML
const modal = plui.Modal.getOrCreateInstance('#demo-modal');
modal.show();滚动下面的长区块，左侧（或上方）的导航项会自动高亮。
本页所有版式都用框架自身的工具类完成，页面里额外的 .demo-* 类只用于示例自身的标注框与色板。 交互组件依赖 src/common.js（sx 函数库）与 src/plui.js； 去掉这两个文件后，页面样式仍然完整，只是标签页、折叠、下拉、模态框等不再响应点击。
离屏面板会锁定页面滚动条，Esc 关闭，关闭后焦点回到触发按钮。