A working Foundation proof desk using XY Grid, Abide custom validators, Reveal confirmation, actual Sass settings, and complete local integration code.
Native Foundation for Sites 6.9.0 CSS/JavaScript with jQuery 3.7.1; original print-check rules. · Implementation reference
02
Foundation Design System Design Reference
Foundation for Sites 6.9.0 settings and compiled default CSS, with jQuery 3.7.1. Dollar-prefixed names are Sass settings, not browser CSS custom properties. Print rules and cover colors are original example choices.
Foundation Design System for Sites With a Real Runtime
Foundation for Sites With a Real Runtime
Foundation for Sites combines a responsive CSS framework with JavaScript plugins. The proof desk uses XY Grid for layout, Abide for validation and Reveal for its review dialog. Its compiled runtime is loaded after jQuery 3.7.1, and $(document).foundation() initializes the data attributes once the page exists.
This is distinct from Foundation for Emails. The page uses browser forms, JavaScript validation and a modal; its markup is not an email template. The offline specimen bundles the actual 6.9.0 files and adds a small original script rather than drawing a static imitation of those components.
Foundation Design System Sass Settings and the Default Palette
Sass Settings and the Default Palette
The reference table names settings from the installed Sass configuration. The default palette includes primary #1779ba, secondary #767676, success #3adb76, warning #ffae00 and alert #cc4b37. They describe the framework’s color roles; the warm booklet cover is original CSS artwork with its own palette.
The dollar-prefixed settings are compile-time inputs. They are not CSS custom properties that can be assigned in a browser style attribute. Use a Sass build to change the framework theme, or add clearly scoped ordinary CSS after the compiled stylesheet for a screen-specific adjustment. The example takes the latter approach for its heading, form padding and background.
Foundation Design System Default Geometry and Local Reading Hierarchy
Default Geometry and Local Reading Hierarchy
Foundation starts with a browser-relative 100% font size, a 1.5 body line height, and a Helvetica Neue/Helvetica/Roboto/Arial stack. Its global radius is zero, producing a more square-edged default than many contemporary component kits. Inputs, callouts and the proof form keep that character rather than acquiring an unrelated large-radius treatment.
The application chooses a 38px page heading with a 1.15 line height, reduced to 30px on mobile. The lead is eighteen pixels. The illustration uses bold stacked lettering and a simple circle to make the print context visible, while the form remains a stable white working surface. These are local decisions, fully listed in the supplied CSS.
Foundation Design System XY Grid and Gutter Selection
XY Grid and Gutter Selection
The grid-container holds a grid-x grid-margin-x row. Its two cells are medium-7 and medium-5, dividing twelve columns between the form and booklet preview above 640px. Below that breakpoint they stack in source order. The nested Pages/Proof copies row uses small-6 cells so the two compact number fields remain paired on a phone.
Foundation supports both margin and padding grids. This example consistently chooses margin gutters inside the container rather than mixing both types on one row. The breakpoint map includes xlarge and xxlarge for Sass use, but the default breakpoint-classes setting generates small, medium and large width classes. A map entry does not automatically mean every corresponding utility class exists in the compiled file.
Foundation Design System Register the Actual Validation Rules
Register the Actual Validation Rules
The form uses data-abide with novalidate and data-validate-on=submit to avoid change-triggered error reflow during a button click, and each form-error span points to its input through data-form-error-for. An alert callout marked data-abide-error provides a form-level summary. Required title and preflight checkbox errors are handled alongside two explicit numeric validators.
The booklet validator accepts integers from four to two hundred divisible by four. The copies validator accepts integers from one to ten. Both are registered on Foundation.Abide.defaults.validators before initialization and referenced by data-validator. In this tested flow, the native step attribute alone did not enforce the booklet increment, so the implementation does not rely on it. The four-page assumption belongs to this example, not to every printing process.
Enter five pages and submit: review must remain closed.
Enter sixteen pages, a title, and complete the preflight check.
Review the captured values before recording the local proof.
Foundation Design System Connect Error Appearance to Navigation
Connect Error Appearance to Navigation
On forminvalid.zf.abide, the application focuses the first field carrying data-invalid. This places the user at a correction point while the alert callout explains the overall problem. Input error spans are associated through aria-describedby, so the message is not merely a red visual marker beside an otherwise unnamed field.
The complete event flow is visible in the JavaScript example. The ordinary submit event is prevented so the browser cannot navigate to a nonexistent endpoint. Only formvalid.zf.abide builds the pending snapshot and opens the review. This is important: binding the review dialog directly to the submit button would bypass the validation result.
Foundation Design System Review a Snapshot in Reveal
Review a Snapshot in Reveal
The modal carries data-reveal and an aria-labelledby relationship to its heading. The valid form handler creates a pending object and builds its definition list with textContent. Reveal opens through the Foundation API, supplies modal behavior, and closes through data-close buttons or the confirmation handler.
Keep editing closes the dialog without recording a result. Record local proof writes the same pending values to the status callout before closing. The close icon has an explicit label. The confirmation makes no claim that a file was uploaded or a print order was created, because neither operation exists in the application.
Reveal shows the values captured by the valid form event.
Cancel changes no recorded local result.
Confirm records only the preview status, not an external order.
Foundation Design System Pin and Load the Dependency Chain
Pin and Load the Dependency Chain
Install [email protected] and [email protected], then copy the compiled CSS, Foundation JavaScript and jQuery into local assets. Load the stylesheet before the page refinements. Load jQuery first, Foundation second and the application script third; defer preserves that order after document parsing.
Register custom validators before calling $(document).foundation(). Registering them after initialization creates an avoidable timing dependency. The current example uses the full compiled runtime for reproducibility. A production bundle can select plugins and their dependencies, but should not remove Abide or Reveal while leaving their data attributes in the markup.
Foundation Design System Preflight Is a Local Decision, Not Production Approval
Preflight Is a Local Decision, Not Production Approval
The diagram and page-count rule make the proof context concrete, but they are not production specifications for a particular printer. The example explicitly asks users to confirm real constraints with their production provider. Its copy count is a local example limit rather than inventory or pricing information.
A real submission flow would need file inspection, server validation and a traceable acceptance response. Foundation can supply the interface primitives, but those domain checks must come from the application. Keeping that boundary explicit lets the reader reuse the validation and review pattern without inheriting a misleading success claim.
XY Grid, explicit form errors, preflight checkbox, callouts and Reveal confirmation.
html
<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>
The supplied app.js registers Abide validators before initialization and wires Reveal to a valid form event. Save the original CSS as style.css. The local preview inlines these same dependencies. The HTML wrapper includes the full body markup; save the supplied interaction and CSS examples under the filenames referenced here.
html
<!-- npm install [email protected][email protected]
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>
A Prompt for Your Project
Agent Prompt
Start from the supplied Foundation 6.9.0 print-proof desk, its XY Grid markup, Abide validators and Reveal flow. Keep the integer and multiple-of-four page-count checks and submit-driven validation, preserving labels and error associations. Open the native Reveal review only for valid proof details, and keep cancellation separate from local confirmation. Retain the full initialization and original layout CSS; do not replace the validators with visual error classes alone or imply that a print job was ordered.
05
Foundation Design System Sources and Scope
Foundation for Sites 6.9.0 with jQuery 3.7.1. Print rules and illustration are original examples. No file upload or print order is implemented.
