# Foundation-Design-System

## Vorschau der Foundation-Design-System-Oberfläche

Prüfen Sie Seitenzahlenintervalle und Kopienanzahl des Booklets, sehen Sie sich die Details in Reveal an und halten Sie einen lokalen Prüfnachweis fest.

## Designreferenz für das Foundation-Design-System

Einstellungen von Foundation für Sites 6.9.0 und kompiliertes Standard-CSS mit jQuery 3.7.1. Namen mit Dollarzeichen als Präfix sind Sass-Einstellungen, keine benutzerdefinierten Browser-CSS-Eigenschaften. Druckregeln und Coverfarben sind eigene Beispielentscheidungen.

### Foundation-Palette

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| $primary-color | #1779ba | Rolle der primären Aktion aus der Grundpalette. |
| $secondary-color | #767676 | Sekundäre Rolle. |
| $success-color | #3adb76 | Eintrag der Erfolgspalette. |
| $warning-color | #ffae00 | Eintrag der Warnpalette. |
| $alert-color | #cc4b37 | Fehler-/Warnhinweisrolle. |
| $body-font-color | #0a0a0a | Standardtext für den Lesefluss. |
| $body-background | #fefefe | Standardhintergrund der Seite. |
| $light-gray | #e6e6e6 | Quelle für neutrale helle Oberflächen und Rahmen. |
| $medium-gray | #cacaca | Mittlerer Neutralton. |
| $dark-gray | #8a8a8a | Dunkler Neutralton. |
### Typografie und Geometrie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| $global-font-size | 100% | Relative Basisschriftgröße des Browsers. |
| $global-lineheight | 1.5 | Zeilenhöhe des Fließtexts. |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Bevorzugte Standardschriftfamilie. |
| $global-margin | 1rem | Basisabstandsmaß. |
| $global-padding | 1rem | Basisinnenabstandsmaß. |
| $global-radius | 0 | Standardmäßig eckige Ecken. |
| $global-width | rem-calc(1200) | Standardmäßige maximale Breite des Grids. |
| $button-padding | 0.85em 1em | Standardmäßiger vertikaler und horizontaler Innenabstand der Schaltfläche. |
### XY-Grid-Haltepunkte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| small | 0 | Basisbereich. |
| medium | 640px | Aufteilung von Prüfformular und Vorschau im Verhältnis 7/5. |
| large | 1024px | Großer Bereich. |
| xlarge | 1200px | Verfügbarer Sass-Haltepunkt. |
| xxlarge | 1440px | Verfügbarer Sass-Haltepunkt. |
| $breakpoint-classes | small medium large | Nur diese benannten Breitenklassen werden von der Standardeinstellung generiert. |
### Explizite Regeln für den Prüfarbeitsplatz

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | Ursprüngliche Preflight-Annahme, umgesetzt in Abide. |
| copies validator | integer, 1–10 | Ursprüngliche lokale Begrenzung der Prüfmenge. |
| Page heading | 38px / 1.15; mobile 30px | Ursprüngliche typografische Verfeinerung. |
| Form padding | 24px; mobile 18px | Ursprüngliche kompakte Formularanordnung. |
| Cover colors | #e3d8bd / #718474 / #31483b | Ursprüngliche Illustration, keine Werte aus der Foundation-Palette. |
## Vollständiger Leitfaden zum Foundation-Design-System

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Foundation-Design-System für Websites mit einer echten Laufzeitumgebung

### Foundation für Websites mit einer echten Laufzeitumgebung

> Foundation für Sites vereint ein responsives CSS-Framework mit JavaScript-Plugins. Der Prüfarbeitsplatz verwendet XY Grid für das Layout, Abide für die Validierung und Reveal für den Überprüfungsdialog. Die kompilierte Laufzeitumgebung wird nach jQuery 3.7.1 geladen, und $(document).foundation() initialisiert die Datenattribute, sobald die Seite verfügbar ist.

Dies unterscheidet sich von Foundation für E-Mails. Die Seite verwendet Browserformulare, JavaScript-Validierung und ein Modal; ihr Markup ist keine E-Mail-Vorlage. Die Offline-Demo bündelt die tatsächlichen Dateien der Version 6.9.0 und ergänzt ein kleines eigenes Skript, statt diese Komponenten statisch nachzubilden.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Sass-Einstellungen und Standardpalette

### Sass-Einstellungen und Standardpalette

Die Referenztabelle führt Einstellungen aus der installierten Sass-Konfiguration auf. Die Standardpalette umfasst Primärfarbe #1779ba, Sekundärfarbe #767676, Erfolg #3adb76, Warnung #ffae00 und Alarm #cc4b37. Diese Farben definieren die Rollen im Framework; das warme Titelbild des Heftes ist eine eigens gestaltete CSS-Illustration mit eigener Palette.

Die mit Dollarzeichen beginnenden Einstellungen sind Eingaben zur Kompilierzeit. Es handelt sich nicht um CSS-Custom-Properties, die sich einem Browser-Style-Attribut zuweisen lassen. Ändern Sie das Framework-Theme mit einem Sass-Build oder ergänzen Sie nach dem kompilierten Stylesheet klar abgegrenztes gewöhnliches CSS für eine bildschirmspezifische Anpassung. Das Beispiel nutzt die zweite Möglichkeit für die Überschrift, den Formular-Innenabstand und den Hintergrund.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Standardgeometrie und lokale Lesereichweite

### Standardgeometrie und lokale Lesehierarchie

Foundation verwendet als Ausgangspunkt eine browserrelative Schriftgröße von 100 %, eine Zeilenhöhe von 1,5 für den Fließtext und eine Schriftfamilie aus Helvetica Neue/Helvetica/Roboto/Arial. Der globale Eckenradius beträgt null. Dadurch wirkt der Standard kantiger als bei vielen modernen Komponentenbibliotheken. Eingabefelder, Callouts und das Formular für den Korrekturabzug behalten diesen Charakter, statt eine unpassende starke Abrundung zu erhalten.

Die Anwendung verwendet eine Seitenüberschrift mit 38 px und einer Zeilenhöhe von 1,15, die auf Mobilgeräten auf 30 px reduziert wird. Der Vorspann ist 18 Pixel groß. Die Illustration macht den Druckkontext durch fette, gestapelte Schrift und einen einfachen Kreis sichtbar, während das Formular eine stabile weiße Arbeitsfläche bleibt. Diese lokalen Entscheidungen sind vollständig im bereitgestellten CSS aufgeführt.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: XY Grid und Auswahl der Zwischenräume

### XY-Grid und Stegabstände auswählen

Der grid-container enthält eine Zeile mit grid-x grid-margin-x. Zwei Zellen mit den Klassen medium-7 und medium-5 teilen die zwölf Spalten oberhalb von 640 px zwischen Formular und Heftvorschau auf. Unterhalb dieses Breakpoints werden sie in der Reihenfolge des Quelltexts untereinander angeordnet. Die verschachtelte Zeile für Seiten und Exemplare verwendet Zellen mit small-6, damit die beiden kompakten Zahlenfelder auf Mobilgeräten nebeneinander bleiben.

Foundation unterstützt sowohl Grids mit Außenabständen als auch Grids mit Innenabständen. In diesem Beispiel werden innerhalb des Containers durchgehend Außenabstände als Zwischenräume verwendet, statt beide Arten in einer Zeile zu mischen. Die Breakpoint-Map enthält xlarge und xxlarge für die Verwendung in Sass; mit der Standardeinstellung breakpoint-classes werden jedoch nur Breitenklassen für small, medium und large erzeugt. Ein Eintrag in der Map bedeutet nicht automatisch, dass die entsprechende Utility-Klasse in der kompilierten Datei vorhanden ist.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Die tatsächlichen Validierungsregeln registrieren

### Tatsächliche Validierungsregeln registrieren

Das Formular verwendet data-abide mit novalidate und data-validate-on=submit, damit beim Klicken auf eine Schaltfläche keine durch Eingabeänderungen ausgelöste Neuanordnung der Fehlermeldungen erfolgt. Jedes form-error-span verweist über data-form-error-for auf das zugehörige Eingabefeld. Ein mit data-abide-error markiertes Alert-Callout fasst die Fehler auf Formularebene zusammen. Fehler bei den erforderlichen Feldern für Titel und Druckvorprüfung werden zusammen mit zwei explizit definierten Zahlenprüfungen behandelt.

Der Validator für die Seitenzahl akzeptiert ganze Zahlen von vier bis zweihundert, die durch vier teilbar sind. Der Validator für die Exemplarzahl akzeptiert ganze Zahlen von eins bis zehn. Beide werden vor der Initialisierung in Foundation.Abide.defaults.validators registriert und über data-validator referenziert. In diesem getesteten Ablauf hat das native Attribut step allein den Seitenzuwachs nicht erzwungen; die Implementierung verlässt sich daher nicht darauf. Die Annahme einer durch vier teilbaren Seitenzahl gilt für dieses Beispiel, nicht für jeden Druckprozess.

1. Geben Sie fünf Seiten ein und senden Sie das Formular ab: Die Vorschau muss geschlossen bleiben.

2. Geben Sie sechzehn Seiten und einen Titel ein und schließen Sie die Druckvorprüfung ab.

3. Prüfen Sie die erfassten Werte, bevor Sie den lokalen Korrekturabzug speichern.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Fehlerdarstellung mit der Navigation verknüpfen

### Fehlerdarstellung mit der Navigation verknüpfen

Bei forminvalid.zf.abide setzt die Anwendung den Fokus auf das erste Feld mit data-invalid. So gelangt die Person direkt zu einer Stelle, an der sie den Fehler beheben kann, während das Alert-Callout das Gesamtproblem erläutert. Die Fehlertexte der Eingabefelder sind über aria-describedby zugeordnet. Die Meldung ist somit mehr als eine rote visuelle Markierung neben einem ansonsten unbeschrifteten Feld.

Der vollständige Ereignisablauf ist im JavaScript-Beispiel zu sehen. Das gewöhnliche submit-Ereignis wird abgefangen, damit der Browser nicht zu einem nicht vorhandenen Endpunkt navigiert. Nur formvalid.zf.abide erstellt den ausstehenden Datensatz und öffnet die Vorschau. Das ist wichtig: Würde der Prüfdialog direkt an die Schaltfläche zum Absenden gebunden, ließe sich das Ergebnis der Validierung umgehen.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Einen Datensatz in Reveal prüfen

### Momentaufnahme in Reveal überprüfen

Das Modal enthält data-reveal und ist über aria-labelledby mit seiner Überschrift verknüpft. Der Handler für ein gültiges Formular erstellt ein ausstehendes Objekt und baut die Definitionsliste mit textContent auf. Reveal wird über Foundation API geöffnet, stellt das Modalverhalten bereit und wird über Schaltflächen mit data-close oder den Bestätigungshandler geschlossen.

Bei „Weiter bearbeiten“ wird der Dialog geschlossen, ohne ein Ergebnis zu speichern. „Lokalen Korrekturabzug speichern“ schreibt dieselben ausstehenden Werte vor dem Schließen in das Status-Callout. Das Schließen-Symbol hat eine explizite Beschriftung. Die Bestätigung behauptet weder, dass eine Datei hochgeladen noch ein Druckauftrag erstellt wurde, da die Anwendung keine dieser Funktionen bietet.

- Reveal zeigt die Werte an, die beim gültigen Formularereignis erfasst wurden.

- Beim Abbrechen wird kein lokales Ergebnis gespeichert.

- Mit der Bestätigung wird nur der Vorschau-Status gespeichert, kein externer Auftrag.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Abhängigkeiten festlegen und laden

### Abhängigkeitskette fixieren und laden

Installieren Sie foundation-sites@6.9.0 und jquery@3.7.1 und kopieren Sie anschließend CSS, Foundation JavaScript und jQuery in lokale Assets. Laden Sie das Stylesheet vor den seitenbezogenen Anpassungen. Laden Sie zuerst jQuery, dann Foundation und zuletzt das Anwendungsskript; defer erhält diese Reihenfolge nach dem Einlesen des Dokuments.

Registrieren Sie benutzerdefinierte Validatoren, bevor Sie $(document).foundation() aufrufen. Werden sie erst nach der Initialisierung registriert, entsteht eine vermeidbare Timing-Abhängigkeit. Das aktuelle Beispiel verwendet zur Reproduzierbarkeit die vollständig kompilierte Laufzeitumgebung. In einem Produktions-Bundle können Plugins und ihre Abhängigkeiten gezielt ausgewählt werden. Abide oder Reveal sollten jedoch nicht entfernt werden, solange die zugehörigen Datenattribute im Markup verbleiben.

Unterstützende Spezifikation lesen

## Foundation-Designsystem: Preflight ist eine lokale Entscheidung, keine Produktionsfreigabe

### Preflight ist eine lokale Entscheidung, keine Produktionsfreigabe

Das Diagramm und die Regel zur Seitenzahl veranschaulichen den Prüfkontext, sind jedoch keine Produktionsvorgaben für eine bestimmte Druckerei. Im Beispiel werden Nutzer ausdrücklich gebeten, die tatsächlichen Anforderungen mit ihrem Produktionsanbieter abzustimmen. Die Anzahl der Exemplare ist eine lokale Beispielgrenze und keine Angabe zu Lagerbestand oder Preis.

Ein echter Einreichungsablauf müsste Dateien prüfen, eine serverseitige Validierung durchführen und eine nachvollziehbare Annahmebestätigung ausgeben. Foundation stellt die nötigen Schnittstellenbausteine bereit, die fachlichen Prüfungen muss jedoch die Anwendung übernehmen. Durch diese klare Abgrenzung lässt sich das Validierungs- und Prüfmuster wiederverwenden, ohne eine irreführende Erfolgsmeldung zu übernehmen.

Unterstützende Spezifikation lesen

## Komponentenbeispiele für das Foundation-Designsystem

### Markup für den Prüfbereich

XY Grid, explizite Formularfehler, Preflight-Kontrollkästchen, Infoboxen und Reveal-Bestätigung.

```
<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>
```

Code-Referenz

- Das Formular verwendet data-abide und novalidate, damit Abide den Fehlerablauf steuert.

- Reveal wird über eine eindeutige ID und data-reveal gekennzeichnet.

### Benutzerdefinierte Abide-Validatoren und Reveal-Ablauf

Die Validatoren werden vor der Initialisierung von Foundation registriert; formvalid öffnet eine Momentaufnahme in 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')});
```

Code-Referenz

- Das Attribut step allein erzwang in diesem getesteten Abide-Ablauf keine Schritte von vier Seiten; dafür sorgt der benutzerdefinierte Validator.

- Nur bei einem gültigen Formular wird der Prüfdialog geöffnet.

### Originale Verfeinerungen für Cover und Layout

CSS-Grafik und seitenspezifische Typografie, getrennt von den Standardeinstellungen von 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}}
```

Code-Referenz

- Alle Coverfarben sind Anwendungsentscheidungen.

## Einrichtung des Foundation-Designsystem-Agenten

### Ausgangspunkt für die Implementierung

Die bereitgestellte app.js registriert Abide-Validatoren vor der Initialisierung und bindet Reveal an ein gültiges Formularereignis. Speichern Sie das originale CSS als style.css. Die lokale Vorschau bindet dieselben Abhängigkeiten direkt ein. Der HTML-Wrapper enthält das vollständige Markup für den Body. Speichern Sie die bereitgestellten Beispiele für Interaktionen und CSS unter den hier genannten Dateinamen.

```
<!-- 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>
```

### Ein Prompt für dein Projekt

```
Verwenden Sie die bereitgestellte Foundation-Version 6.9.0 für den Druckprüfbereich als Ausgangspunkt, einschließlich des XY-Grid-Markups, der Abide-Validatoren und des Reveal-Ablaufs. Behalten Sie die Prüfungen auf ganzzahlige Seitenzahlen und Vielfache von vier sowie die durch das Absenden ausgelöste Validierung bei; Beschriftungen und Fehlerzuordnungen müssen erhalten bleiben. Öffnen Sie die native Reveal-Prüfung nur bei gültigen Prüfdaten und behandeln Sie Abbruch und lokale Bestätigung getrennt. Behalten Sie die vollständige Initialisierung und das originale Layout-CSS bei. Ersetzen Sie die Validatoren nicht allein durch visuelle Fehlerklassen und erwecken Sie nicht den Eindruck, dass ein Druckauftrag erteilt wurde.
```

## Quellen und Geltungsbereich des Foundation-Designsystems

Foundation für Sites 6.9.0 mit jQuery 3.7.1. Druckregeln und Illustration sind originale Beispiele. Datei-Upload und Druckauftrag sind nicht implementiert.

- Globale Stile Sass-Grundlagen und Farbpalette.

- XY Grid Zellbreiten und Zwischenraumtypen.

- Abide Validierungsregeln und Ereignisse.

- Reveal Aufbau des Modalfensters und API.

- JavaScript Laden von Abhängigkeiten und Initialisierung.

- Formulare Natives Formular-Markup und Gestaltung.

## Weiterführende Ressourcen zum Foundation-Designsystem

### Framework7

Ein natives Skizzenbuch für Framework7 mit echten Swipeout-Aktionen, expliziten iOS-Theme-Werten, einer per Tastatur bedienbaren Schaltfläche zum Öffnen der Aktionen und einer gefilterten Liste, in der abgeschlossene Studien bis zum Zurücksetzen erhalten bleiben.

### gluestack UI

Erstelle eine Checkliste für die Ausrüstung mit den echten gluestack-Creators für Core Button und Input, expliziten semantischen Farben aus v5 und vollständigem React Native Web-Quellcode. Untersuche Validierung, Tastaturaktionen, stabile Elementidentität und lokal abgeleiteten Packfortschritt.

### Headless UI

Headless UI stellt ungestaltete React-Interaktionskomponenten für Dialoge, Listenfelder und Umschalter bereit. Diese Anleitung zeigt, wie sich deren integriertes Fokus-, Auswahl- und Popup-Verhalten mit gewöhnlichem CSS kombinieren lässt. Als Beispiel dient ein Ablauf zum Teilen von Dokumenten.


- [Implementierungsreferenz](https://get.foundation/sites/docs/abide.html)
- [Quelle](https://get.foundation/sites/docs/global.html)
- [Quelle](https://get.foundation/sites/docs/xy-grid.html)
- [Quelle](https://get.foundation/sites/docs/abide.html)
- [Unterstützende Spezifikation lesen](https://get.foundation/sites/docs/javascript.html)
- [Unterstützende Spezifikation lesen](https://get.foundation/sites/docs/global.html)
- [Unterstützende Spezifikation lesen](https://get.foundation/sites/docs/xy-grid.html)
- [Unterstützende Spezifikation lesen](https://get.foundation/sites/docs/abide.html)
- [Unterstützende Spezifikation lesen](https://get.foundation/sites/docs/reveal.html)
- [Code-Referenz](https://get.foundation/sites/docs/xy-grid.html)
- [Code-Referenz](https://get.foundation/sites/docs/abide.html)
- [Code-Referenz](https://get.foundation/sites/docs/global.html)
- [Globale Stile Sass-Grundlagen und Farbpalette.](https://get.foundation/sites/docs/global.html)
- [XY Grid Zellbreiten und Zwischenraumtypen.](https://get.foundation/sites/docs/xy-grid.html)
- [Abide Validierungsregeln und Ereignisse.](https://get.foundation/sites/docs/abide.html)
- [Reveal Aufbau des Modalfensters und API.](https://get.foundation/sites/docs/reveal.html)
- [JavaScript Laden von Abhängigkeiten und Initialisierung.](https://get.foundation/sites/docs/javascript.html)
- [Formulare Natives Formular-Markup und Gestaltung.](https://get.foundation/sites/docs/forms.html)