Sistema di progettazione Foundation.

sistema di design Foundation per siti con un vero runtime

Foundation per siti con un runtime reale

Foundation per siti combina un framework CSS responsive con i plugin JavaScript. Il banco prove usa XY Grid per il layout, Abide per la convalida e Reveal per la finestra di dialogo di revisione. Il runtime compilato viene caricato dopo jQuery 3.7.1 e $(document).foundation() inizializza gli attributi data quando la pagina è pronta.

È diverso da Foundation per email. La pagina usa moduli del browser, convalida JavaScript e una finestra modale: il markup non è un template per email. La versione offline include i file effettivi della versione 6.9.0 e aggiunge un piccolo script originale, invece di riprodurre staticamente componenti solo in apparenza.

Leggi la specifica di supporto

Impostazioni Sass e palette predefinita di sistema di design Foundation

Impostazioni Sass e palette predefinita

La tabella di riferimento riporta le impostazioni della configurazione Sass installata. La palette predefinita include primary #1779ba, secondary #767676, success #3adb76, warning #ffae00 e alert #cc4b37. Questi valori definiscono i ruoli cromatici del framework; la copertina calda del libretto è un’opera originale di CSS, con una palette propria.

Le impostazioni precedute dal simbolo del dollaro sono valori di input in fase di compilazione. Non sono proprietà personalizzate di CSS assegnabili nell’attributo style del browser. Per modificare il tema del framework, usa una compilazione Sass; per una modifica specifica dello schermo, aggiungi invece regole CSS ordinarie e ben circoscritte dopo il foglio di stile compilato. L’esempio segue quest’ultimo approccio per il titolo, la spaziatura interna del modulo e lo sfondo.

Leggi la specifica di supporto

Geometria predefinita del sistema di design Foundation e gerarchia di lettura locale

Geometria predefinita e gerarchia di lettura locale

Foundation parte da una dimensione del carattere pari al 100% rispetto al browser, un’interlinea del corpo di 1.5 e una famiglia di caratteri Helvetica Neue/Helvetica/Roboto/Arial. Il raggio globale è zero, perciò gli elementi predefiniti hanno spigoli più squadrati rispetto a molti kit di componenti contemporanei. Campi di input, callout e modulo di prova mantengono questo carattere, senza adottare uno stile estraneo con ampi angoli arrotondati.

L’applicazione sceglie un titolo di pagina di 38px con interlinea 1.15, ridotto a 30px sui dispositivi mobili. Il testo introduttivo è di diciotto pixel. L’illustrazione usa lettere in grassetto disposte su più righe e un semplice cerchio per rendere evidente il contesto di stampa, mentre il modulo resta una superficie di lavoro bianca e stabile. Sono scelte locali, elencate integralmente nel file CSS fornito.

Leggi la specifica di supporto

Griglia XY Grid e scelta delle gutter nel sistema di design Foundation

Griglia XY e scelta delle gutter

Il contenitore della griglia ospita una riga grid-x grid-margin-x. Le due celle sono medium-7 e medium-5, che ripartiscono dodici colonne tra il modulo e l’anteprima del libretto sopra i 640px. Al di sotto di quel breakpoint si dispongono in colonna, nell’ordine del documento. La riga annidata Pages/Proof usa celle small-6, così i due campi numerici compatti restano affiancati anche sul telefono.

Foundation supporta griglie con margini e con spaziatura interna. In questo esempio si scelgono con coerenza gutter basate sui margini all’interno del contenitore, senza mescolare i due tipi sulla stessa riga. La mappa dei breakpoint include xlarge e xxlarge per l’uso con Sass, ma l’impostazione predefinita breakpoint-classes genera classi di larghezza small, medium e large. La presenza di una voce nella mappa non implica che nel file compilato esista automaticamente ogni classe di utilità corrispondente.

Leggi la specifica di supporto

Registrare le regole di convalida effettive nel sistema di design Foundation

Registra le regole di convalida effettive

Il modulo usa data-abide con novalidate e data-validate-on=submit, per evitare che gli errori ridispongano il modulo a ogni modifica durante il clic su un pulsante; ogni span form-error rimanda al proprio input tramite data-form-error-for. Un callout di avviso contrassegnato con data-abide-error fornisce un riepilogo a livello di modulo. Gli errori relativi al titolo obbligatorio e alla casella di controllo del preflight sono gestiti insieme a due validator numerici espliciti.

Il validator per il libretto accetta numeri interi da quattro a duecento, divisibili per quattro. Il validator per le copie accetta numeri interi da uno a dieci. Entrambi vengono registrati in Foundation.Abide.defaults.validators prima dell’inizializzazione e richiamati tramite data-validator. Nel flusso testato, il solo attributo step nativo non imponeva l’incremento previsto per il libretto, quindi l’implementazione non vi fa affidamento. Il requisito delle quattro pagine vale per questo esempio, non per ogni processo di stampa.

1. Inserisci cinque pagine e invia: la revisione deve restare chiusa.
2. Inserisci sedici pagine e un titolo, poi completa il controllo di preflight.
3. Esamina i valori acquisiti prima di registrare la prova locale.

Leggi la specifica di supporto

Collegare l’aspetto degli errori alla navigazione nel sistema di design Foundation

Collegare l’aspetto degli errori alla navigazione

In risposta a forminvalid.zf.abide, l’applicazione porta il focus sul primo campo con data-invalid. L’utente si ritrova così nel punto da correggere, mentre il callout di avviso spiega il problema complessivo. Gli span degli errori dei campi sono associati tramite aria-describedby, quindi il messaggio non è soltanto un indicatore rosso accanto a un campo privo di nome.

Il flusso completo degli eventi è visibile nell’esempio JavaScript. L’evento submit standard viene bloccato, così il browser non può navigare verso un endpoint inesistente. Solo formvalid.zf.abide crea l’istantanea temporanea e apre la revisione. È importante: associare direttamente la finestra di dialogo di revisione al pulsante di invio aggirerebbe l’esito della convalida.

Leggi la specifica di supporto

Esaminare un’istantanea in Reveal nel sistema di design Foundation

Esamina un’istantanea in Reveal

La finestra modale include data-reveal e una relazione aria-labelledby con il titolo. Il gestore del modulo valido crea un oggetto temporaneo e compone il relativo elenco definitorio usando textContent. Reveal si apre tramite l’API Foundation API, gestisce il comportamento modale e si chiude con i pulsanti data-close o con il gestore di conferma.

Scegliendo Continua a modificare, la finestra si chiude senza registrare alcun risultato. Registra prova locale salva gli stessi valori temporanei nel callout di stato prima di chiudere. L’icona di chiusura ha un’etichetta esplicita. La conferma non dichiara che sia stato caricato un file o creato un ordine di stampa, perché l’applicazione non prevede nessuna delle due operazioni.

• Reveal mostra i valori acquisiti dall’evento del modulo valido.
• L’annullamento non modifica alcun risultato locale registrato.
• La conferma registra solo lo stato dell’anteprima, non un ordine esterno.

Leggi la specifica di supporto

Fissare le versioni e caricare la catena di dipendenze nel sistema di design Foundation

Fissa e carica la catena di dipendenze

Installa [email protected] e [email protected], poi copia negli asset locali il CSS compilato, Foundation JavaScript e jQuery. Carica il foglio di stile prima delle modifiche specifiche della pagina. Carica prima jQuery, poi Foundation e infine lo script dell’applicazione; defer ne preserva l’ordine dopo l’analisi del documento.

Registra i validator personalizzati prima di chiamare $(document).foundation(). Registrarli dopo l’inizializzazione crea una dipendenza temporale evitabile. L’esempio corrente usa il runtime compilato completo per garantire la riproducibilità. In produzione è possibile selezionare i plugin e le relative dipendenze per creare un bundle, ma non si dovrebbero rimuovere Abide o Reveal lasciandone gli attributi data nel markup.

Leggi la specifica di supporto

Nel sistema di design Foundation il preflight è una scelta locale, non un’approvazione per la produzione

Il preflight è una decisione locale, non un’approvazione per la produzione

Lo schema e la regola sul numero di pagine rendono concreto il contesto della prova, ma non sono specifiche di produzione per una tipografia particolare. L’esempio chiede esplicitamente agli utenti di verificare i vincoli effettivi con il proprio fornitore di produzione. Il numero di copie è un limite locale a fini esemplificativi, non un dato su scorte o prezzi.

Un flusso di invio reale richiederebbe l’ispezione dei file, la convalida sul server e una risposta di accettazione tracciabile. Foundation fornisce gli elementi di base dell’interfaccia, ma i controlli specifici del dominio devono essere implementati dall’applicazione. Esplicitare questo confine consente di riutilizzare il modello di convalida e revisione senza lasciar intendere, in modo fuorviante, che l’operazione sia riuscita.

Leggi la specifica di supporto

Esempi di componenti del sistema di design Foundation

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