# Foundation デザインシステム

## Foundation デザインシステムのインターフェースプレビュー

冊子のページ数の増分とコピー数を検証し、Reveal で詳細を確認して、ローカルの校正状態を記録します。

## Foundation デザインシステムのデザインリファレンス

Foundation Sites 6.9.0 の設定とコンパイル済みデフォルト CSS。jQuery 3.7.1 を使用しています。ドル記号で始まる名前は Sass の設定であり、ブラウザーの CSS カスタムプロパティではありません。印刷ルールと表紙の色は、オリジナルのサンプル用に選んだものです。

### Foundation の配色

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| $primary-color | #1779ba | 基盤パレットにおける主アクションの役割。 |
| $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

> Sites 向けのFoundationは、レスポンシブな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オリジナルのアートワークです。

ドル記号で始まる設定値は、コンパイル時に使用する入力値です。ブラウザーの style 属性で設定できるCSSカスタムプロパティではありません。フレームワークのテーマを変更するには Sass でビルドするか、コンパイル済みスタイルシートの後に適用範囲を明確にした通常のCSSを追加して、特定の画面を調整します。この例では後者の方法で、見出し、フォームのパディング、背景を調整しています。

関連する仕様を確認する

## Foundation デザインシステムの既定の形状と読みやすさを考慮したローカル階層

### 既定の形状と読みやすさを考慮したローカル階層

Foundationでは、ブラウザーの文字サイズを基準とする 100% のフォントサイズ、本文の行の高さ 1.5、Helvetica Neue/Helvetica/Roboto/Arial のフォントスタックが初期設定されています。グローバルな角丸は 0 で、現代のコンポーネントキットによく見られる設定よりも角張った形状が既定です。入力欄、コールアウト、校正フォームもこの特徴を保ち、無関係な大きな角丸は加えていません。

このアプリケーションでは、ページ見出しを 38px、行の高さを 1.15 とし、モバイルでは 30px に縮小します。リード文は 18px です。イラストには太字の文字を積み重ね、シンプルな円を添えて印刷の文脈を伝えています。フォームは安定した白い作業面として保っています。これらはすべてローカルで決定したもので、付属のCSSに詳しく記載しています。

関連する仕様を確認する

## Foundation デザインシステムの XY Grid とガターの選択

### XY Grid とガターの選択

grid-container の中に、grid-x grid-margin-x の行を配置します。2つのセルは medium-7 と medium-5 で、640px を超える画面ではフォームと冊子プレビューに12列を分け合います。このブレークポイントを下回ると、ソースの順序で縦に並びます。ネストされた Pages/Proof のコピー数入力行には small-6 のセルを使い、コンパクトな2つの数値入力欄をスマートフォンでも横並びにします。

Foundationはマージングリッドとパディンググリッドの両方に対応しています。この例では、同じ行で両方を混在させず、コンテナ内のガターには一貫してマージンを使用します。ブレークポイントマップには 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を付けたアラートコールアウトで、フォーム全体のエラーをまとめて表示します。必須のタイトルと入稿前確認チェックボックスのエラーに加え、数値を検証するカスタムバリデーターを2つ使用しています。

冊子のページ数バリデーターは、4から200までの4の倍数の整数を受け付けます。部数バリデーターは、1から10までの整数を受け付けます。どちらも初期化前にFoundation.Abide.defaults.validatorsへ登録し、data-validatorで指定します。このテスト済みのフローでは、ネイティブのstep属性だけではページ数が4ページ単位であることを検証できなかったため、それには依存していません。4ページ単位という前提はこの例に限ったもので、すべての印刷工程に当てはまるわけではありません。

1. 5ページと入力して送信しても、確認画面が開かないことを確認します。

2. 16ページとタイトルを入力し、入稿前確認を完了します。

3. ローカルのプレビューを記録する前に、取り込まれた値を確認します。

関連する仕様を確認する

## Foundation デザインシステム：エラー表示をナビゲーションに結び付ける

### エラー表示をナビゲーションに結び付ける

forminvalid.zf.abideイベントで、data-invalidが付いた最初のフィールドにフォーカスします。ユーザーが修正箇所へすぐ移動できる一方、アラートコールアウトでは問題の概要を説明できます。入力欄のエラーメッセージは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 デザインシステムのコンポーネント例

### プルーフデスクのマークアップ

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 デザインシステムのエージェント設定

### 実装の出発点

付属の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

実際のスワイプ操作、明示的なiOSテーマ値、キーボードで操作できるアクション起動ボタン、リセットするまで完了済みの学習項目を残すフィルター付きリストを備えた、ネイティブのFramework7スケッチブック。

### 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)