自研响应式 CSS 框架

飞立 plui

白底黑线的极简风格响应式 CSS 框架。工具类全面参考 Tailwind，栅格与组件参考 Bootstrap，统一加 plui- 前缀；五档响应式布局，移动优先；交互层只用 src/common.js（sx 函数库），不引入 jQuery。

当前版本0.3.0

展开版产物dist/css/plui-0.3.0.css

压缩版产物dist/css/plui-0.3.0.min.css

工具类8026 个类名

主题浅色 / 暗色

JS APIBootstrap 风格

示例页引用dist/css/plui.css

源码目录src/css/ + src/plui.js

查看示例页上手文档组件清单工具类 JS API 与 Bootstrap 5 的差距

五档响应式

xs

小于 576px，基线样式，不带前缀。

sm

≥ 576px

md

≥ 768px

lg

≥ 992px

xl

≥ 1200px

xxl

≥ 1400px

文档

上手

引入文件、栅格用法、断点前缀、常用组件示例。

GETTING-STARTED.html

工具类

Tailwind 式原子类：命名规则、8 个分类的清单与刻度表。

UTILITIES.html

组件清单

每个组件的类名表与最小示例；含离屏面板、滚动监听、占位块、按钮组、输入组、浮动标签等本轮新增组件。

COMPONENTS.html

主题与令牌

四层令牌结构、语义令牌清单、深色模式的预留接法。

THEMING.html

依赖库说明

src/common.js（sx 函数库）的完整 API、与 jQuery 的差别、以及框架怎么用它。

COMMONJS.html

决策清单

已定的设计口径与仍待定的事项。

DECISIONS.html

项目说明

框架是什么、目录职责、部署约定。

README.html

环境约束

服务器事实、构建部署硬约束、已知服务器行为。

ENVIRONMENT.html JS-API.html BOOTSTRAP-GAP.html

站点上的 cPanel/LiteSpeed 会拦截 .md 直接访问（返回 403），所以每篇 Markdown 都配了一份同名 .html。对应关系见文档索引。Markdown 是可编辑源文件，HTML 由 build/build-docs.mjs 生成，不要手工改 HTML。

两套类名约定

工具类 · Tailwind 路线

.plui-p-4、.plui-md:p-4、.plui-grid-cols-3、.plui-lg:grid-cols-3。

断点段前置，属性段居中，取值段在后；8026 个类名由刻度表生成。

栅格与组件 · Bootstrap 路线

.plui-col-md-6、.plui-offset-lg-2、.plui-btn-primary、.plui-nav-tabs-link。

组件层沿用 Bootstrap 的中缀写法，与工具类各管一层，不混用。

设计约定

颜色

主色 #000，背景 #fff，文字层级 #000 / #333 / #666 / #999。没有彩色。

边框与圆角

1px 纯黑实线，圆角一律 0。不用阴影，改用 1px 实线边框表达层次。

图标

纯 CSS 线条或 Unicode 几何字符（▸ ▾ ■ □），不引入图标字体、图片与外部 CDN。