# Foundation 设计系统

## Foundation 设计系统界面预览

验证小册子的页面增量和副本数量，在 Reveal 中查看详细信息，并记录本地校样状态。

## Foundation 设计系统设计参考

Foundation for Sites 6.9.0 的设置和编译后的默认 CSS，搭配 jQuery 3.7.1。以美元符号开头的名称是 Sass 设置，并非浏览器 CSS 自定义属性。印刷规则和封面颜色是本示例原创的选择。

### Foundation 配色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| $primary-color | #1779ba | 来自 foundation-palette 的主要操作角色。 |
| $secondary-color | #767676 | 次要角色。 |
| $success-color | #3adb76 | 成功状态配色项。 |
| $warning-color | #ffae00 | 警告状态配色项。 |
| $alert-color | #cc4b37 | 错误/警报角色。 |
| $body-font-color | #0a0a0a | 默认正文文本。 |
| $body-background | #fefefe | 默认页面背景。 |
| $light-gray | #e6e6e6 | 中性浅色界面表面/边框来源。 |
| $medium-gray | #cacaca | 中等中性色。 |
| $dark-gray | #8a8a8a | 深中性色。 |
### 排版与几何尺寸

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| $global-font-size | 100% | 相对于浏览器的基础字号。 |
| $global-lineheight | 1.5 | 正文行高。 |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | 默认字体系列偏好。 |
| $global-margin | 1rem | 基础外边距节奏。 |
| $global-padding | 1rem | 基础内边距节奏。 |
| $global-radius | 0 | 默认使用直角。 |
| $global-width | rem-calc(1200) | 默认网格最大宽度。 |
| $button-padding | 0.85em 1em | 默认按钮垂直/水平内边距。 |
### XY Grid 断点

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| small | 0 | 基础范围。 |
| medium | 640px | 校样表单与预览按 7/5 划分。 |
| large | 1024px | 大尺寸范围。 |
| xlarge | 1200px | 可用的 Sass 断点。 |
| xxlarge | 1440px | 可用的 Sass 断点。 |
| $breakpoint-classes | small medium large | 默认设置仅生成这些指定的宽度类。 |
### 明确指定的校样工作台规则

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | 在 Abide 中实现的原始预检假设。 |
| copies validator | integer, 1–10 | 原始本地校样数量限制。 |
| Page heading | 38px / 1.15; mobile 30px | 原始排版优化。 |
| Form padding | 24px; mobile 18px | 原始紧凑型表单布局。 |
| Cover colors | #e3d8bd / #718474 / #31483b | 原创插图，并非 Foundation 配色值。 |
## Foundation 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## 适用于运行时环境完善的网站的 Foundation 设计系统

### 适用于运行时环境完善的网站的 Foundation

> Foundation for Sites 将响应式 CSS 框架与 JavaScript 插件结合使用。校样工作台使用 XY Grid 布局、Abide 验证以及 Reveal 审阅对话框。编译后的运行时文件在 jQuery 3.7.1 之后加载，并在页面就绪后通过 $(document).foundation() 初始化数据属性。

这与 Foundation for Emails 不同。此页面使用浏览器表单、JavaScript 验证和模态框；其标记并非电子邮件模板。离线示例包含实际的 6.9.0 文件，并添加了一段简短的原创脚本，而不是静态仿制这些组件。

阅读配套规范

## Foundation 设计系统 Sass 设置与默认配色

### Sass 设置与默认配色

参考表列出了已安装 Sass 配置中的设置。默认配色包括 primary #1779ba、secondary #767676、success #3adb76、warning #ffae00 和 alert #cc4b37。这些颜色定义了框架中的配色角色；暖色调小册子封面是 CSS 的原创作品，使用独立的配色方案。

以美元符号开头的设置是编译时输入，并非可在浏览器样式属性中赋值的 CSS 自定义属性。要更改框架主题，请使用 Sass 构建；或者在编译后的样式表之后添加作用域明确的普通 CSS，以调整特定页面的样式。本示例采用后一种方式，设置标题、表单内边距和背景。

阅读配套规范

## Foundation 设计系统默认几何尺寸与本地阅读层级

### 默认几何尺寸与本地阅读层级

Foundation 的基础设置包括相对于浏览器的 100% 字号、1.5 的正文行高，以及 Helvetica Neue/Helvetica/Roboto/Arial 字体栈。其全局圆角半径为零，因此默认外观比许多现代组件套件更方正。输入框、提示框和校样表单都延续这一风格，而非采用无关的大圆角样式。

应用将页面标题设为 38px、行高设为 1.15，并在移动设备上缩小至 30px。引导文字为 18px。插图以粗体堆叠文字和简洁的圆形呈现印刷场景，表单则保持稳定的白色工作界面表面。这些都是本地样式决策，已在随附的 CSS 中完整列出。

阅读配套规范

## Foundation 设计系统 XY Grid 与沟槽选择

### XY Grid 与沟槽选择

grid-container 内包含一行 grid-x grid-margin-x。该行的两个单元格分别为 medium-7 和 medium-5，在 640px 以上的视口中将十二列分配给表单和小册子预览。低于此断点时，单元格会按源码顺序堆叠。嵌套的 Pages/Proof copies 行使用 small-6 单元格，使两个紧凑的数字输入框在手机上并排显示。

Foundation 同时支持 margin 和 padding 网格。本示例统一在容器内使用 margin 间距，而不是在同一行混用两种类型。断点映射包含供 Sass 使用的 xlarge 和 xxlarge，但默认的 breakpoint-classes 设置只会生成 small、medium 和 large 宽度类。映射中的条目并不意味着编译后的文件中一定存在所有对应的工具类。

阅读配套规范

## Foundation 设计系统：注册实际的验证规则

### 注册实际验证规则

此表单使用 data-abide、novalidate 和 data-validate-on=submit，避免按钮点击时因 change 事件触发错误重排；每个 form-error span 都通过 data-form-error-for 指向对应输入框。标记为 data-abide-error 的 alert callout 用于显示表单级摘要。除了两个明确的数值验证器外，还会验证标题是否填写以及是否勾选预检复选框。

册子页数验证器接受 4 到 200 之间且能被 4 整除的整数。份数验证器接受 1 到 10 之间的整数。两者都在初始化前注册到 Foundation.Abide.defaults.validators，并通过 data-validator 引用。在此测试流程中，单靠原生 step 属性无法强制执行册子页数的增量要求，因此实现不依赖该属性。每 4 页为一组的假设仅适用于本示例，并非适用于所有印刷流程。

1. 输入 5 页并提交：审核界面应保持关闭。

2. 输入 16 页和标题，并完成预检。

3. 查看已捕获的值，然后记录本地验证结果。

阅读配套规范

## Foundation 设计系统：将错误提示与导航关联

### 将错误提示与导航关联

触发 forminvalid.zf.abide 时，应用会将焦点移至首个带有 data-invalid 的字段。这样用户可以直接开始修正，而 alert callout 会说明整体问题。输入框错误提示通过 aria-describedby 关联，因此错误信息不只是一个红色标记，不会让字段显得毫无说明。

JavaScript 示例展示了完整的事件流程。普通的 submit 事件会被阻止，避免浏览器跳转到不存在的端点。只有 formvalid.zf.abide 才会生成待审核快照并打开审核界面。这一点很重要：如果直接将审核对话框绑定到提交按钮，就会绕过验证结果。

阅读配套规范

## Foundation 设计系统：在 Reveal 中审核快照

### 在 Reveal 中查看快照

模态框包含 data-reveal，并通过 aria-labelledby 关联到标题。有效的表单处理程序会创建一个待处理对象，并使用 textContent 构建定义列表。Reveal 通过 Foundation API 打开，提供模态框行为，并通过带有 data-close 的按钮或确认处理程序关闭。

选择“继续编辑”会关闭对话框，但不会记录结果。选择“记录本地预览”会先将相同的待处理值写入状态提示框，再关闭对话框。关闭图标带有明确的标签。确认操作不会声称文件已上传或打印订单已创建，因为应用中并不存在这两项操作。

- Reveal 会显示有效表单事件所捕获的值。

- 取消不会更改任何已记录的本地结果。

- 确认操作只记录预览状态，不会记录外部订单。

阅读配套规范

## Foundation 设计系统：固定并加载依赖链

### 固定并加载依赖链

安装 foundation-sites@6.9.0 和 jquery@3.7.1，然后将编译后的 CSS、Foundation JavaScript 和 jQuery 复制到本地资源目录。先加载样式表，再加载页面样式调整。依次加载 jQuery、Foundation 和应用脚本；defer 会在文档解析完成后保留这一顺序。

在调用 $(document).foundation() 之前注册自定义验证器。在初始化之后注册会带来不必要的时序依赖。当前示例使用完整的编译运行时，以确保可复现。生产环境的打包文件可以按需选择插件及其依赖，但如果标记中仍保留 Abide 或 Reveal 的数据属性，就不应移除对应插件。

阅读配套规范

## Foundation 设计系统预检是本地决策，不代表获准投产

### 预检是本地决策，不代表生产环境批准

示意图和页数规则让预检场景更加具体，但它们并不是针对某家打印商的生产规格。示例明确要求用户向实际的生产服务商确认真实限制。这里的份数只是本地示例限制，不代表库存或价格信息。

真正的提交流程需要检查文件、在服务器端进行验证，并返回可追踪的受理结果。Foundation 可以提供界面基础组件，但这些业务规则检查必须由应用实现。明确这一界限，读者就能复用验证和审核模式，而不会误以为提交已成功。

阅读配套规范

## Foundation 设计系统组件示例

### Proof desk 标记

XY Grid、明确的表单错误、预检复选框、提示框和 Reveal 确认框。

```
<main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
```

代码参考

- 表单使用 data-abide 和 novalidate，因此错误流程由 Abide 处理。

- Reveal 使用唯一 ID 和 data-reveal 标识。

### 自定义 Abide 验证器和 Reveal 流程

在 Foundation 初始化前注册验证器；formvalid 事件会在 Reveal 中打开数据快照。

```
Foundation.Abide.defaults.validators.booklet=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=4&&n<=200&&n%4===0};
Foundation.Abide.defaults.validators.copies=$el=>{const n=Number($el.val());return Number.isInteger(n)&&n>=1&&n<=10};
$(document).foundation();let pending=null;
$('#proof-form').on('submit',event=>event.preventDefault()).on('formvalid.zf.abide',()=>{pending={title:$('#job').val().trim(),pages:Number($('#pages').val()),copies:Number($('#copies').val()),stock:$('#stock').val()};const list=document.getElementById('proof-summary');list.replaceChildren();for(const[label,value]of [['Job',pending.title],['Pages',pending.pages],['Proof copies',pending.copies],['Stock',pending.stock]]){const dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=label;dd.textContent=value;list.append(dt,dd);}$('#proof-review').foundation('open');}).on('forminvalid.zf.abide',()=>{document.querySelector('#proof-form [data-invalid]')?.focus()}).on('reset',()=>{$('#result').text('No proof recorded. This preview does not submit a print order.')});
$('#confirm').on('click',()=>{$('#result').text('Recorded locally: '+pending.title+' — '+pending.pages+' pages, '+pending.copies+' proof copies. No order was created.');$('#proof-review').foundation('close')});
```

代码参考

- 在本次测试的 Abide 流程中，仅设置 step 属性无法强制页数按 4 页递增；自定义验证器可以实现这一限制。

- 只有表单通过验证后才会打开审核对话框。

### 原始封面和布局样式调整

CSS 艺术设计和针对页面的字体排印设置，与默认的 Foundation 设置相互独立。

```
body{background:#f6f5f1}.proof-desk{max-width:1100px;padding-top:32px;padding-bottom:32px}header{margin-bottom:32px;max-width:760px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#596456}h1{font-size:38px;line-height:1.15}.lead{font-size:18px;color:#53606a}form{background:white;padding:24px;border:1px solid #ddd}.paper-preview{background:#e3d8bd;aspect-ratio:4/3;padding:24px;position:relative;overflow:hidden;margin-bottom:20px}.paper-preview span{position:relative;z-index:1;font-size:36px;line-height:1;font-weight:700;letter-spacing:-.04em;color:#31483b}.paper-circle{position:absolute;width:75%;aspect-ratio:1;background:#718474;border-radius:50%;top:25%;left:40%}.paper-preview strong{position:absolute;bottom:20px;left:24px;color:#31483b;font-size:12px;letter-spacing:.13em}.callout h2{font-weight:600}#result{margin-top:16px}.reveal dl{display:grid;grid-template-columns:110px 1fr;gap:10px}.reveal dd{overflow-wrap:anywhere}.button:focus-visible{outline:3px solid #143e5b;outline-offset:3px}@media(max-width:639px){h1{font-size:30px}form{padding:18px}.paper-preview{margin-top:16px}}
```

代码参考

- 所有封面配色均由应用自行选择。

## Foundation 设计系统 Agent 设置

### 实现起点

提供的 app.js 会在初始化前注册 Abide 验证器，并将 Reveal 绑定到有效表单事件。将原始的 CSS 保存为 style.css。本地预览会内嵌这些相同的依赖项。HTML 包装器包含完整的 body 标记；请将提供的交互和 CSS 示例保存为此处引用的文件名。

```
<!-- npm install foundation-sites@6.9.0 jquery@3.7.1
mkdir -p assets
cp node_modules/foundation-sites/dist/css/foundation.min.css assets/
cp node_modules/foundation-sites/dist/js/foundation.min.js assets/
cp node_modules/jquery/dist/jquery.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Proof desk</title>
<link rel="stylesheet" href="assets/foundation.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/jquery.min.js" defer></script>
<script src="assets/foundation.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="grid-container proof-desk"><header><p class="eyebrow">FOUNDATION / PRINT PROOF DESK</p><h1>Check the job before it leaves the desk.</h1><p class="lead">A local proof checklist built with XY Grid, Abide and Reveal.</p></header><div class="grid-x grid-margin-x"><section class="cell medium-7"><form id="proof-form" data-abide data-validate-on="submit" novalidate><div data-abide-error class="alert callout" style="display:none" role="alert"><p>Check the marked fields before reviewing this proof.</p></div><label for="job">Job title<input id="job" type="text" required pattern=".*\S.*" placeholder="Autumn studio booklet" aria-describedby="job-error"></label><span class="form-error" id="job-error" data-form-error-for="job">Enter a job title.</span><div class="grid-x grid-margin-x"><div class="cell small-6"><label for="pages">Pages<input id="pages" data-validator="booklet" type="number" value="16" min="4" max="200" step="4" required aria-describedby="pages-error"></label><span class="form-error" id="pages-error" data-form-error-for="pages">Use a multiple of four, from 4 to 200.</span></div><div class="cell small-6"><label for="copies">Proof copies<input id="copies" data-validator="copies" type="number" value="2" min="1" max="10" required aria-describedby="copies-error"></label><span class="form-error" id="copies-error" data-form-error-for="copies">Use a whole number from 1 to 10.</span></div></div><label for="stock">Paper stock<select id="stock"><option>Uncoated / warm white</option><option>Coated / bright white</option><option>Recycled / natural</option></select></label><fieldset class="fieldset"><legend>Preflight check</legend><input id="bleed" type="checkbox" required aria-describedby="bleed-error"><label for="bleed">Bleed and safe area have been checked</label><span class="form-error" id="bleed-error" data-form-error-for="bleed">Complete the preflight check.</span></fieldset><div class="button-group"><button type="submit" class="button">Review proof</button><button type="reset" class="button hollow secondary">Reset</button></div></form><div id="result" class="callout secondary" role="status">No proof recorded. This preview does not submit a print order.</div></section><aside class="cell medium-5"><div class="paper-preview" aria-label="Original booklet cover illustration"><span>STUDIO<br>NOTES</span><div class="paper-circle"></div><strong>08 / AUTUMN</strong></div><div class="callout"><h2 class="h5">Why four-page increments?</h2><p>This example assumes folded booklet signatures. It is a local preflight rule, not a universal printing requirement.</p><p>Confirm production constraints with the actual printer before using this pattern.</p></div></aside></div></main><div class="reveal" id="proof-review" data-reveal aria-labelledby="review-title"><h2 id="review-title">Review the proof details</h2><dl id="proof-summary"></dl><p>This confirms only the local example. No file is uploaded and no print order is created.</p><button id="confirm" class="button">Record local proof</button><button class="button hollow secondary" data-close>Keep editing</button><button class="close-button" data-close aria-label="Close review" type="button"><span aria-hidden="true">×</span></button></div>
</body></html>
```

### 适用于你项目的提示词

```
从提供的 Foundation 6.9.0 印刷校样工作台开始，使用其中的 XY Grid 标记、Abide 验证器和 Reveal 流程。保留页数必须为整数且为 4 的倍数的检查，以及由提交触发的验证；同时保留标签及其与错误信息的关联。只有校样信息有效时才打开原生 Reveal 审核框，并将取消操作与本地确认分开。保留完整的初始化代码和原始布局 CSS；不要只用视觉错误类替代验证器，也不要暗示已经下达印刷订单。
```

## Foundation 设计系统来源与适用范围

Foundation for Sites 6.9.0，搭配 jQuery 3.7.1。印刷规则和插图均为原创示例。未实现文件上传或印刷订单功能。

- 全局样式 Sass 基础样式与调色板。

- XY Grid 单元格宽度与间距类型。

- Abide 验证规则与事件。

- Reveal 模态框结构与 API。

- JavaScript 依赖项加载与初始化。

- 表单 原生表单标记与样式。

## Foundation 设计系统相关资源

### Framework7

原生 Framework7 速写本，包含可实际使用的滑动操作、明确的 iOS 主题值、支持键盘访问的操作菜单按钮，以及一个筛选列表；已完成的研究项目会保留在列表中，直到重置为止。

### gluestack UI

使用 gluestack 的核心 Button 和 Input 创建器，构建野外装备清单；明确指定 v5 语义颜色，并提供完整的 React Native Web 源码。检查验证、键盘操作、稳定的条目标识，以及在本地计算得出的打包进度。

### Headless UI

Headless UI 提供未设样式的 React 交互组件，适用于对话框、列表框和开关。本指南以文档共享流程为例，介绍如何将这些组件原生的焦点、选择和弹出行为与常规 CSS 组合使用。


- [实现参考](https://get.foundation/sites/docs/abide.html)
- [来源](https://get.foundation/sites/docs/global.html)
- [来源](https://get.foundation/sites/docs/xy-grid.html)
- [来源](https://get.foundation/sites/docs/abide.html)
- [阅读配套规范](https://get.foundation/sites/docs/javascript.html)
- [阅读配套规范](https://get.foundation/sites/docs/global.html)
- [阅读配套规范](https://get.foundation/sites/docs/xy-grid.html)
- [阅读配套规范](https://get.foundation/sites/docs/abide.html)
- [阅读配套规范](https://get.foundation/sites/docs/reveal.html)
- [代码参考](https://get.foundation/sites/docs/xy-grid.html)
- [代码参考](https://get.foundation/sites/docs/abide.html)
- [代码参考](https://get.foundation/sites/docs/global.html)
- [全局样式 Sass 基础样式与调色板。](https://get.foundation/sites/docs/global.html)
- [XY Grid 单元格宽度与间距类型。](https://get.foundation/sites/docs/xy-grid.html)
- [Abide 验证规则与事件。](https://get.foundation/sites/docs/abide.html)
- [Reveal 模态框结构与 API。](https://get.foundation/sites/docs/reveal.html)
- [JavaScript 依赖项加载与初始化。](https://get.foundation/sites/docs/javascript.html)
- [表单 原生表单标记与样式。](https://get.foundation/sites/docs/forms.html)