流动主题框架
已取代（2026-10-23，通过0）。 这个自述文件的大部分描述了预设/调色板系统，该系统已被删除。现在的主题是什么，以及它的旋钮：
_docs/STATUS.md;每个默认值，为什么，以及如何改变它：_docs/defaults.md． 作为历史保存。
TheFluidTheme.com | 住组件 | 生活的基础 | 模板
基于物理的设计系统
一个现代的方法，网页主题建立在 流体力学原理． 每一个动画、过渡和相互作用都是由真实的物理控制的——粘度、位移、表面张力、动量和摩擦。
“一定有更好的办法……”-现在有了。
这有什么不同？
大多数设计系统选择任意的动画时间。我们使用 雷诺兹数 -决定水是平滑流动还是湍流流动的相同物理原理：
| 运动风格 | 雷诺兹 | 行为 |
|---|---|---|
| 仍然 | 0 | 没有运动，状态瞬间改变 |
| 宁静 | ~ 10 | 缓慢，沉思，肯·伯恩斯 |
| 流 | ~ 100 | 层流，平滑，可预测 |
| 流动 | ~ 500 | 有机ease-in-out |
| 级联 | ~ 1000 | 过渡性的、平缓的瀑布 |
| 急流 | ~ 5000 | 动荡，充满活力和阻力 |
| 海啸 | ~ 50000 | 巨大的力量，巨大的位移 |
起动器套件
| 起动器 | 它是什么？ | 开始 |
|---|---|---|
| 超文本标记语言 | 零配置,CDN-based。没有npm，没有构建步骤。 | 复制 starters/html/index.html 然后打开它。 |
| 反应 | Vite + React 18。包括现场主题演示。 | cd starters/react && npm install && npm run dev |
安装
CDN（推荐快速入门）
jsDelivr (推荐):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core/dist/fluid.min.css">
unpkg:
<link rel="stylesheet" href="https://unpkg.com/@fluid-theme/core/dist/fluid.min.css">
npm
npm install @fluid-theme/core
然后在你的HTML中：
<!-- Production (minified) -->
<link rel="stylesheet" href="node_modules/@fluid-theme/core/dist/fluid.min.css">
<!-- Source (readable, for customisation) -->
<link rel="stylesheet" href="node_modules/@fluid-theme/core/src/fluid.css">
或者在一个打包器中（Vite， Webpack等）：
import '@fluid-theme/core';
下载
获取最新版本 GitHub版本 页面。
快速入门
<!-- Link the CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-theme/core/dist/fluid.min.css">
<!-- Set your preferences -->
<body data-theme="dark" data-preset="cascade" data-palette="fluid" data-accent="1">
<!-- Use semantic HTML -->
<article class="card">
<div class="card__content">
<h2 class="card__title">Clean and Semantic</h2>
<p class="card__description">No utility class soup needed.</p>
</div>
</article>
# 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-yCSS自定义属性 - 高宽比 - - - - - -
data-aspect="square|video|portrait|wide"在.card__media - 图像保护 - - - - - -
data-protected阻止随意的右键保存（不是DRM） - Orientation-aware - - - - - -
data-orientation="landscape|portrait"显示/隐藏基于视窗 - 延迟加载 -所有模板使用
loading="lazy"在下面的折叠图像 - 维 ——所有
<img>标签包括width/height预防CLS
看到 _docs/images-guide.md 完整的指南包括 <picture> 模式, srcset格式建议（AVIF > WebP > JPEG），以及堆栈特定的解决方案。
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属性控制一切：
<body
data-theme="dark" <!-- light | dark | auto -->
data-preset="cascade" <!-- still | serene | stream | flowing | cascade | rapids | tsunami -->
data-palette="fluid" <!-- fluid | morandi | bold | pastel | earth | mono | 80s | matrix | subtle | tsunami -->
data-accent="1" <!-- 1-6, selects from current palette -->
data-contrast="normal" <!-- normal | subdued -->
>
哲学
语义第一 ——使用 <article class="card"> 不 <div class="flex flex-col p-4 m-2 rounded-lg shadow-md">
渐进增强 -一切工作没有JavaScript，然后优雅地增强
零构建步骤 -无需编译，直接在浏览器中工作
基于物理 -动画感觉很自然，因为它们遵循自然法则
可访问性的内置 - - - - - - prefers-reduced-motion 尊重，WCAG 2.1 AA关注
发展现状
- 第一阶段：基础 -重置，令牌，基本样式
- 阶段2：核心组件 按钮，卡片，导航，表单，英雄，指示器（9个组件）
- 阶段3：扩展组件+布局 -模态，工具提示，手风琴，警报，表格，头像，加载，下拉+弹性/网格实用程序（共17个）
- 阶段4：文档 -入门指南，安装，教程，图像优化指南
- 阶段5：分发 - npm发布，CDN， AI助手流体代理工具包
当前的最新的git标签(git describe --tags --abbrev=0,也 package.json）; 从来没有写在这里。现在的主题是什么？ _docs/STATUS.md.
浏览器支持
现代浏览器：Chrome 120+， Firefox 120+, Safari 16.4+, Edge 120+
文档
- TheFluidTheme.com -现场演示网站
- 开始使用 —安装和初始步骤
- 现在的主题是什么 -从这里开始
- 组件引用 -全部23个组件
- 定位参考 -布局系统
- 令牌的参考 -设计令牌
- 存档 -替换文档（准备路线图，摘要，旧状态），作为历史记录保存
许可证
麻省理工学院-使用它，修改它，使它成为你的。
版本: 最新的git标签| TheFluidTheme.com |基于物理学和32年的设计经验。