# Sistema di progettazione Foundation

## Anteprima dell’interfaccia del sistema di progettazione sistema di design Foundation

Convalida gli incrementi delle pagine del libretto e il numero di copie, esamina i dettagli in Reveal e registra uno stato di prova locale.

## Riferimento di progettazione del sistema di progettazione sistema di design Foundation

Impostazioni di Foundation per Sites 6.9.0 e CSS predefinito compilato, con jQuery 3.7.1. I nomi con prefisso dollaro sono impostazioni Sass, non proprietà personalizzate CSS del browser. Le regole di stampa e i colori della copertina sono scelte originali dell’esempio.

### Tavolozza Foundation

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| $primary-color | #1779ba | Ruolo dell’azione principale derivato da foundation-palette. |
| $secondary-color | #767676 | Ruolo secondario. |
| $success-color | #3adb76 | Voce della tavolozza di successo. |
| $warning-color | #ffae00 | Voce della tavolozza di avviso. |
| $alert-color | #cc4b37 | Ruolo di errore/avviso. |
| $body-font-color | #0a0a0a | Testo di lettura predefinito. |
| $body-background | #fefefe | Sfondo predefinito della pagina. |
| $light-gray | #e6e6e6 | Origine neutra chiara per superfici e bordi. |
| $medium-gray | #cacaca | Neutro medio. |
| $dark-gray | #8a8a8a | Neutro scuro. |
### Tipografia e geometria

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| $global-font-size | 100% | Dimensione del carattere di base relativa al browser. |
| $global-lineheight | 1.5 | Interlinea del body. |
| $body-font-family | Helvetica Neue, Helvetica, Roboto, Arial, sans-serif | Preferenza per la famiglia predefinita. |
| $global-margin | 1rem | Ritmo dei margini di base. |
| $global-padding | 1rem | Ritmo della spaziatura interna di base. |
| $global-radius | 0 | Angoli squadrati per impostazione predefinita. |
| $global-width | rem-calc(1200) | Larghezza massima predefinita della griglia. |
| $button-padding | 0.85em 1em | Spaziatura interna verticale/orizzontale predefinita dei pulsanti. |
### Breakpoint della griglia XY

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| small | 0 | Intervallo di base. |
| medium | 640px | Suddivisione 7/5 tra modulo di prova e anteprima. |
| large | 1024px | Intervallo grande. |
| xlarge | 1200px | Breakpoint Sass disponibile. |
| xxlarge | 1440px | Breakpoint Sass disponibile. |
| $breakpoint-classes | small medium large | Con l’impostazione predefinita vengono generate solo queste classi di larghezza denominate. |
### Regole esplicite del banco di prova

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| booklet validator | integer, 4–200, divisible by 4 | Ipotesi originale sul preflight implementata in Abide. |
| copies validator | integer, 1–10 | Limite originale alla quantità di copie locali di prova. |
| Page heading | 38px / 1.15; mobile 30px | Rifinitura tipografica originale. |
| Form padding | 24px; mobile 18px | Composizione originale del modulo compatto. |
| Cover colors | #e3d8bd / #718474 / #31483b | Illustrazione originale, non valori della palette Foundation. |
## Guida completa al sistema di design Foundation

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## 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 foundation-sites@6.9.0 e jquery@3.7.1, 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

### Markup del banco prove

XY Grid, errori espliciti nei campi, casella di controllo del preflight, callout e conferma 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>
```

Riferimento del codice

- Il modulo usa data-abide e novalidate, così Abide gestisce il flusso degli errori.

- Reveal è identificato da un ID univoco e da data-reveal.

### Validator Abide personalizzati e flusso Reveal

I validator vengono registrati prima dell’inizializzazione di Foundation; formvalid apre un’istantanea 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')});
```

Riferimento del codice

- Nel percorso Abide testato, il solo attributo step non imponeva incrementi di quattro pagine; il validator personalizzato sì.

- Solo un modulo valido apre la finestra di dialogo di revisione.

### Rifiniture originali della copertina e del layout

Illustrazione CSS e tipografia specifica della pagina, distinte dalle impostazioni predefinite di 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}}
```

Riferimento del codice

- Tutti i colori della copertina sono scelte dell’applicazione.

## Configurazione dell’agente per sistema di design Foundation

### Punto di partenza per l’implementazione

Il file app.js fornito registra i validator Abide prima dell’inizializzazione e collega Reveal a un evento del modulo valido. Salva l’originale CSS come style.css. L’anteprima locale incorpora queste stesse dipendenze. Il wrapper HTML include tutto il markup del body; salva gli esempi forniti di interazione e CSS con i nomi di file indicati qui.

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

### Un prompt per il tuo progetto

```
Parti dal banco prove di stampa Foundation 6.9.0 fornito, dal relativo markup XY Grid, dai validator Abide e dal flusso Reveal. Mantieni i controlli che verificano numeri interi e multipli di quattro per il numero di pagine, insieme alla convalida all’invio, preservando etichette e associazioni degli errori. Apri la finestra di revisione Reveal nativa solo quando i dettagli della prova sono validi e mantieni l’annullamento distinto dalla conferma locale. Conserva l’inizializzazione completa e il layout originale CSS; non sostituire i validator con sole classi di errore visive né lasciare intendere che sia stato ordinato un lavoro di stampa.
```

## Foundation Fonti e ambito del sistema di design

Foundation per Sites 6.9.0 con jQuery 3.7.1. Le regole di stampa e l’illustrazione sono esempi originali. Non sono implementati il caricamento di file né l’invio di un ordine di stampa.

- Stili globali Fondamenti Sass e palette.

- Griglia XY Larghezze delle celle e tipi di spaziatura.

- Abide Regole ed eventi di convalida.

- Reveal Struttura della finestra modale e API.

- JavaScript Caricamento e inizializzazione delle dipendenze.

- Moduli Markup e stili nativi dei moduli.

## Risorse correlate al sistema di design di Foundation

### Framework7

Uno sketchbook nativo Framework7 con azioni swipeout reali, valori espliciti del tema iOS, un’apertura delle azioni accessibile da tastiera e un elenco filtrato che mantiene gli studi completati fino al ripristino.

### gluestack UI

Crea una checklist per un kit da campo con i creatori core Button e Input effettivi di gluestack, i colori semantici v5 espliciti e il codice sorgente completo per React Native Web. Esamina la convalida, le azioni da tastiera, l’identità stabile degli elementi e l’avanzamento della preparazione calcolato localmente.

### Headless UI

Headless UI offre componenti di interazione senza stile per React, destinati a finestre di dialogo, listbox e interruttori. Questa guida si concentra sulla composizione del comportamento nativo di focus, selezione e popup con CSS ordinario, usando come esempio pratico un flusso di condivisione dei documenti.


- [Riferimento per l’implementazione](https://get.foundation/sites/docs/abide.html)
- [Fonte](https://get.foundation/sites/docs/global.html)
- [Fonte](https://get.foundation/sites/docs/xy-grid.html)
- [Fonte](https://get.foundation/sites/docs/abide.html)
- [Leggi la specifica di supporto](https://get.foundation/sites/docs/javascript.html)
- [Leggi la specifica di supporto](https://get.foundation/sites/docs/global.html)
- [Leggi la specifica di supporto](https://get.foundation/sites/docs/xy-grid.html)
- [Leggi la specifica di supporto](https://get.foundation/sites/docs/abide.html)
- [Leggi la specifica di supporto](https://get.foundation/sites/docs/reveal.html)
- [Riferimento del codice](https://get.foundation/sites/docs/xy-grid.html)
- [Riferimento del codice](https://get.foundation/sites/docs/abide.html)
- [Riferimento del codice](https://get.foundation/sites/docs/global.html)
- [Stili globali Fondamenti Sass e palette.](https://get.foundation/sites/docs/global.html)
- [Griglia XY Larghezze delle celle e tipi di spaziatura.](https://get.foundation/sites/docs/xy-grid.html)
- [Abide Regole ed eventi di convalida.](https://get.foundation/sites/docs/abide.html)
- [Reveal Struttura della finestra modale e API.](https://get.foundation/sites/docs/reveal.html)
- [JavaScript Caricamento e inizializzazione delle dipendenze.](https://get.foundation/sites/docs/javascript.html)
- [Moduli Markup e stili nativi dei moduli.](https://get.foundation/sites/docs/forms.html)