# @fluid-theme/core 中文文档 规范地址：https://npmcn.com/package/%40fluid-theme/core/ 版本：2\.1\.0 npm 元数据更新时间：2026-11-01T04:04:07.550Z 中文译文更新时间：2026-11-01T04:27:04.948Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fluid-theme/core 原文对照：https://npmcn.com/package/%40fluid-theme/core/?lang=original 项目主页：https://thefluidtheme.com/ 源码仓库：https://github.com/Agile-Media-Agency/the-fluid-theme ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.3 MB，105 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2026-03-24T07:30:40.172Z - 最新版本发布：2026-11-01T04:04:07.390Z - 已发布版本数：3（近 12 个月 3 个） ## 中文简介 一个现代的，语义CSS设计系统建立在物理原理-而不是实用程序类 ## 安装 ```sh npm install @fluid-theme/core ``` 也可以使用：`pnpm add @fluid-theme/core`、`yarn add @fluid-theme/core`、`bun add @fluid-theme/core` ## README # 流动主题框架 > **已取代（2026-10-23，通过0）。** 这个自述文件的大部分描述了预设/调色板系统，该系统已被删除。现在的主题是什么，以及它的旋钮： [`_docs/STATUS.md`](https://npmcn.com/package/%40fluid-theme/core/_docs/STATUS.md);每个默认值，为什么，以及如何改变它： [`_docs/defaults.md`](https://npmcn.com/package/%40fluid-theme/core/_docs/defaults.md)． 作为历史保存。 **[TheFluidTheme.com](https://thefluidtheme.com/)** | [住组件](https://thefluidtheme.com/examples/components.html) | [生活的基础](https://thefluidtheme.com/examples/foundation.html) | [模板](https://thefluidtheme.com/templates/) ## 基于物理的设计系统 一个现代的方法，网页主题建立在 **流体力学原理**． 每一个动画、过渡和相互作用都是由真实的物理控制的——粘度、位移、表面张力、动量和摩擦。 > _“一定有更好的办法……”-现在有了。_ ## 这有什么不同？ 大多数设计系统选择任意的动画时间。我们使用 **雷诺兹数** -决定水是平滑流动还是湍流流动的相同物理原理： | 运动风格 | 雷诺兹 | 行为 | | --- | --- | --- | | **仍然** | 0 | 没有运动，状态瞬间改变 | | **宁静** | ~ 10 | 缓慢，沉思，肯·伯恩斯 | | **流** | ~ 100 | 层流，平滑，可预测 | | **流动** | ~ 500 | 有机ease-in-out | | **级联** | ~ 1000 | 过渡性的、平缓的瀑布 | | **急流** | ~ 5000 | 动荡，充满活力和阻力 | | **海啸** | ~ 50000 | 巨大的力量，巨大的位移 | ## 起动器套件 | 起动器 | 它是什么？ | 开始 | | --- | --- | --- | | [超文本标记语言](https://npmcn.com/package/%40fluid-theme/core/starters/html/) | 零配置,CDN-based。没有npm，没有构建步骤。 | 复制 `starters/html/index.html` 然后打开它。 | | [反应](https://npmcn.com/package/%40fluid-theme/core/starters/react/) | Vite + React 18。包括现场主题演示。 | `cd starters/react && npm install && npm run dev` | ## 安装 ### CDN（推荐快速入门） **jsDelivr** (推荐): ```html ``` **unpkg:** ```html ``` ### npm ```bash npm install @fluid-theme/core ``` 然后在你的HTML中： ```html ``` 或者在一个打包器中（Vite， Webpack等）： ```js import '@fluid-theme/core'; ``` ### 下载 获取最新版本 [GitHub版本](https://github.com/Agile-Media-Agency/the-fluid-theme/releases) 页面。 ## 快速入门 ```html

Clean and Semantic

No utility class soup needed.

``` ```bash # Local development npm run serve # Opens at localhost:8080 ``` ## 核心功能 ### 运动系统 7种基于物理的动画风格： - **仍然** -减少运动，即时转换 - **宁静** 缓慢，冥想的肯·伯恩斯（1200毫秒） - **流** 平滑的层流动画（800ms） - **流动** -有机缓进缓出（600ms） - **级联** -柔和的瀑布效果（500毫秒） - **急流** -带有摩擦和阻力的湍流（300ms） - **海啸** 戏剧性的上升，波峰和崩溃（400ms） ### 23个组件 按钮，卡片，导航，表单，英雄，指标，滚动进度，设置面板，主题图像，模态/对话框，工具提示/弹出窗口，手风琴，警报/吐司，表格，头像，加载/骨架，下拉菜单 ### 调色板 10个精心策划的调色板，每个调色板有6种强调色： | 调色板 | 氛围 | | --- | --- | | **流体** | 以水为主题，自动链接到动态风格 | | **莫兰迪** | 柔和，精致的意大利美学 | | **大胆的** | 饱和度高，原色可靠 | | **柔和的** | 柔和，平易近人的粉彩 | | **地球** | 自然、有机的色调 | | **莫诺** | 灰度与微妙的温暖 | | **80年代** | 霓虹灯retrowave | | **矩阵** | 绿色网络朋客 | | **微妙的** | 近乎中立，轻声细语 | | **海啸** | 深海调色板（北斋风格） | ### 主题模式 - **光** -干净，高对比度 - **黑暗** -眼睛很舒服 - **汽车** -遵循系统偏好 - **柔和** -任何模式下的低对比度（基于oklch） ### 布局系统 - **Flex公用事业** -方向，包裹，生长/收缩，基础 - **网格工具** - 2/3/4列，自动适应响应，跨度 - **布局模式** -侧边栏，圣杯，仪表盘 - **位置工具** -粘性，z指数，溢出，响应可见性 ### 图像优化 内置的CSS实用程序响应，性能的图像： - **焦点控制** - - - - - - `data-focus="top|bottom|left|right|center"` 关于英雄背景和卡牌媒体 - **自定义焦点** - - - - - - `--focus-x` / `--focus-y` CSS自定义属性 - **高宽比** - - - - - - `data-aspect="square|video|portrait|wide"` 在 `.card__media` - **图像保护** - - - - - - `data-protected` 阻止随意的右键保存（不是DRM） - **Orientation-aware** - - - - - - `data-orientation="landscape|portrait"` 显示/隐藏基于视窗 - **延迟加载** -所有模板使用 `loading="lazy"` 在下面的折叠图像 - **维** ——所有 `` 标签包括 `width`/`height` 预防CLS 看到 `_docs/images-guide.md` 完整的指南包括 `` 模式, `srcset`格式建议（AVIF > WebP > JPEG），以及堆栈特定的解决方案。 ### CSS架构 ```css @layer reset, tokens, base, layouts, components, themes, utilities; ``` 现代CSS功能贯穿始终： - **OKLCH颜色** 与 `color-mix()` 对于衍生阴影 - **逻辑属性** （`margin-block`， `padding-inline`） - **集装箱查询** 用于组件级响应 - **视图转换API** 用于页面转换 - **CSS自定义属性** 运行时主题 ## 流体剂套件 该项目附带 **流体剂套件** （`fluid-agent-kit/`) -技能文件，帮助AI编码助理产生正确的流体主题代码。 | 技能 | 涵盖内容 | | --- | --- | | CSS约定 | 层顺序，令牌，逻辑属性，数据属性 | | 用户体验规则 | 交互组件的12条行为规则 | | 可访问性 | HTML，键盘，动作，触摸，颜色标准 | | 图像优化 | 响应式图像，延迟加载，焦点，格式 | 自动与 **克劳德代码** (读 `CLAUDE.md`)， **双子座** (读 `GEMINI.md`)，以及任何读取项目级指令的人工智能助手(读取 `AGENTS.md`）。 ## 项目结构 ``` the-fluid-theme/ ├── fluid-agent-kit/ # AI coding assistant skills │ ├── README.md # Kit overview │ └── skills/ # CSS, UX, a11y, image skills ├── _docs/ # Documentation │ ├── STATUS.md # What the theme is now (start here) │ ├── archive/ # Superseded docs, kept as history │ ├── images-guide.md # Image optimization guide │ └── reference/ # Component + layout API docs ├── _includes/ # Jekyll includes ├── src/ │ ├── core/ │ │ ├── reset.css # Modern reset │ │ ├── tokens.css # Design tokens + motion + palettes │ │ └── base.css # Base element styles │ ├── components/ # 23 UI components │ ├── layouts/ # Layout patterns + utilities │ ├── animations/ # Scroll reveal system │ └── fluid.css # Main entry point ├── examples/ # 7 demo pages ├── templates/ # 18 page templates ├── CLAUDE.md # Claude Code instructions ├── GEMINI.md # Google Gemini instructions └── AGENTS.md # Agent-agnostic instructions ``` ## 数据属性 通过HTML属性控制一切： ```html data-preset="cascade" data-palette="fluid" data-accent="1" data-contrast="normal" > ``` ## 哲学 **语义第一** ——使用 `
` 不 `
` **渐进增强** -一切工作没有JavaScript，然后优雅地增强 **零构建步骤** -无需编译，直接在浏览器中工作 **基于物理** -动画感觉很自然，因为它们遵循自然法则 **可访问性的内置** - - - - - - `prefers-reduced-motion` 尊重，WCAG 2.1 AA关注 ## 发展现状 - [x] **第一阶段：基础** -重置，令牌，基本样式 - [x] **阶段2：核心组件** 按钮，卡片，导航，表单，英雄，指示器（9个组件） - [x] **阶段3：扩展组件+布局** -模态，工具提示，手风琴，警报，表格，头像，加载，下拉+弹性/网格实用程序（共17个） - [x] **阶段4：文档** -入门指南，安装，教程，图像优化指南 - [x] **阶段5：分发** - npm发布，CDN， AI助手流体代理工具包 **当前的**最新的git标签(`git describe --tags --abbrev=0`,也 `package.json`）; 从来没有写在这里。现在的主题是什么？ [`_docs/STATUS.md`](https://npmcn.com/package/%40fluid-theme/core/_docs/STATUS.md). ## 浏览器支持 现代浏览器：Chrome 120+， Firefox 120+, Safari 16.4+, Edge 120+ ## 文档 - **[TheFluidTheme.com](https://thefluidtheme.com/)** -现场演示网站 - **[开始使用](https://npmcn.com/package/%40fluid-theme/core/_docs/getting-started.md)** —安装和初始步骤 - **[现在的主题是什么](https://npmcn.com/package/%40fluid-theme/core/_docs/STATUS.md)** -从这里开始 - **[组件引用](https://npmcn.com/package/%40fluid-theme/core/_docs/reference/components.md)** -全部23个组件 - **[定位参考](https://npmcn.com/package/%40fluid-theme/core/_docs/reference/positioning.md)** -布局系统 - **[令牌的参考](https://npmcn.com/package/%40fluid-theme/core/_docs/reference/tokens.md)** -设计令牌 - **[存档](https://npmcn.com/package/%40fluid-theme/core/_docs/archive/README.md)** -替换文档（准备路线图，摘要，旧状态），作为历史记录保存 ## 许可证 麻省理工学院-使用它，修改它，使它成为你的。 * * * **版本:** 最新的git标签| **[TheFluidTheme.com](https://thefluidtheme.com/)** |基于物理学和32年的设计经验。 ## 常见问题 ### @fluid-theme/core 是什么？ 一个现代的，语义CSS设计系统建立在物理原理-而不是实用程序类 ### 如何安装 @fluid-theme/core？ 在项目目录运行 npm install @fluid-theme/core，或使用 pnpm add / yarn add / bun add。 ### @fluid-theme/core 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fluid-theme\_\_core 是否存在。 ### @fluid-theme/core 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @fluid-theme/core 可以商用吗？ @fluid-theme/core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fluid-theme/core 还在维护吗？ 最新版本 2\.1\.0 发布于 2026/11/01（2 天前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2026/03/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。