入门

Introduction 简介

零构建开源 CSS 框架 · 44 组件 · 面向中文建站与后台场景；熟悉引用方式即可上手。

v1.0.1 开源就绪 — L1 组件清单已收口（44）。演示：demo 页（含 InfiniteScroll）· 发版前：npm run pivcss:prepublish · 迁移：类名迁移速查

如何读演示块：每个示例顶栏有预览与代码两个 Tab，互斥切换——当前选中哪个，下面就只显示哪一块（在「预览」只看效果，切到「代码」只看 HTML）。不会两块同时展开。代码 tab 由预览 HTML 自动格式化生成，语义一致。

业务里的 Tab 组件也是同一套逻辑：is-active 决定当前可见面板。

在 PivArk 仓库内执行 npm run pivcss:build，产出位于 public/assets/。Community 安装包用户引用同路径静态资源即可。

构建后的目录结构（精简发行包将只含下列运行时文件）：

类名	说明
`pivcss.css`	开发样式（tokens + layout + 44 组件，含 source map）
`pivcss.min.css`	生产压缩 CSS（CDN 推荐）
`pivcss.min.js`	主题 / Modal / Dropdown / Tab 等运行时
`docs/`	文档站（本站在内）
`demo/`	组件演示页

最小引用：在 <head> 引入 CSS，在 <body> 末尾引入 JS。

Hello PivCSS

纯 HTML，无第三方 CSS 框架依赖。

<div class="pvs-container pvs-py-6">
  <h2 class="pvs-h2">Hello PivCSS</h2>
  <p class="pvs-text-muted">纯 HTML，无第三方 CSS 框架依赖。</p>
</div>

PivCSS 面向现代浏览器（evergreen）。需支持：CSS Grid、aspect-ratio、gap、自定义属性 --pvs-*。

PivCSS 不是纯 Flex 框架：多列页面用原生 Grid，行内对齐用 Flex。口诀与示例见快速开始 · 弹性栅格。