Foundation-Design-System.

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 [email protected] und [email protected] 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

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

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')});

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