# Sistema di progettazione UIkit ## Anteprima dell'interfaccia del sistema di progettazione sistema di design UIkit Passa da una sessione all'altra tra tre opzioni, espandi i dettagli della preparazione, scegli una sessione e convalida un piano locale dei partecipanti. ## Riferimento di progettazione per il sistema di progettazione sistema di design UIkit Sorgente Less di UIkit 3.25.25 e CSS predefinito compilato. I nomi preceduti da @ sono variabili Less valutate in compilazione, non proprietà personalizzate CSS a runtime. L'anteprima aggiunge override specifici per lo schermo, dichiarati esplicitamente. ### Tipografia | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Famiglia di caratteri di sistema predefinita. | | @global-font-size | 16px | Dimensione base del testo. | | @global-line-height | 1.5 | Ritmo del testo del corpo. | | @global-large-font-size | 1.5rem | Helper per il testo grande. | | @global-medium-font-size | 1.25rem | Helper per il testo medio. | | @global-small-font-size | 0.875rem | Helper per il testo piccolo. | ### Ruoli cromatici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | @global-color | #666 | Testo predefinito. | | @global-emphasis-color | #333 | Testo e titoli più marcati. | | @global-muted-color | #999 | Testo attenuato predefinito; nell'anteprima i metadati sono sovrascritti con #65717a. | | @global-link-color | #1e87f0 | Link predefiniti. | | @global-background | #fff | Sfondo predefinito della pagina/superficie. | | @global-muted-background | #f8f8f8 | Riquadro/superficie attenuata. | | @global-primary-background | #1e87f0 | Superficie di accento principale. | | @global-secondary-background | #222 | Superficie scura secondaria. | | @global-border | #e5e5e5 | Bordi neutri. | ### Spaziatura e controlli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | @global-margin | 20px | Ritmo dei margini predefinito. | | @global-small-margin | 10px | Margine piccolo. | | @global-medium-margin | 40px | Margine medio. | | @global-large-margin | 70px | Margine grande. | | @global-gutter | 30px | Spazio tra colonne predefinito della griglia. | | @global-small-gutter | 15px | Spazio piccolo tra colonne della griglia. | | @global-medium-gutter | 40px | Spazio medio tra colonne della griglia. | | @global-control-height | 40px | Altezza standard di input/pulsante. | | @global-control-small-height | 30px | Altezza ridotta dei controlli. | | @global-control-large-height | 55px | Altezza grande dei controlli. | ### Intervalli responsive | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | @breakpoint-small | 640px | Inizio delle regole di larghezza @s. | | @breakpoint-medium | 960px | Inizio delle regole di larghezza @m; layout del pianificatore a due colonne. | | @breakpoint-large | 1200px | Inizio delle regole di larghezza @l. | | @breakpoint-xlarge | 1600px | Inizio delle regole di larghezza @xl. | ### Rifiniture originali del workshop | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Heading | 42px; 34px below 640px | Override locale esplicito di uk-heading-small. | | Card padding | 28px; 20px below 640px | Composizione compatta locale esplicita. | | Metadata color | #65717a | Testo dei metadati locale più scuro sulle superfici chiare. | | Focus outline | 3px solid #145ca5, offset 4px | Aggiunto un risalto visibile da tastiera per schede, titoli dell’accordion e pulsanti. | ## Guida completa al sistema di progettazione sistema di design UIkit 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 UIkit: classi CSS e comportamento definito dagli attributi ### Classi CSS e comportamento basato su attributi > UIkit combina un framework CSS con un livello di componenti JavaScript. La classe uk-card applica lo stile a una superficie; l’attributo uk-switcher inizializza un componente interattivo. La distinzione è evidente nell’esempio del workshop: schede e controlli dei moduli possono essere visualizzati con il solo CSS, ma il passaggio tra sessioni e l’espansione dell’accordion dipendono dal bundle JavaScript di UIkit. L’anteprima carica localmente il foglio di stile compilato 3.25.25 e il relativo runtime effettivi. Le tre sessioni hanno durate e layout diversi, quindi il passaggio dall’una all’altra mostra il comportamento dei contenuti reali, anziché limitarsi a cambiare un’etichetta in una scheda altrimenti identica. Lo script locale per il piano dei partecipanti è separato dal runtime di UIkit ed è riportato integralmente. Leggi la specifica di supporto ## Variabili Less e applicazione degli stili a runtime nel sistema di progettazione sistema di design UIkit ### Variabili Less e stili a runtime I riferimenti che iniziano con @ sono variabili Less. Vengono risolti durante la compilazione: inserire @global-primary-background in un normale foglio di stile del browser non modifica il tema a runtime. La tabella riporta i valori verificati nel codice sorgente installato, mentre l’anteprima usa CSS precompilato fornito dal pacchetto. Per creare un tema UIkit personalizzato con il proprio brand, usa la procedura documentata di importazione e personalizzazione Less, quindi ricompila. Per rifiniture isolate di una pagina, il normale CSS può applicare stili a una classe dopo il foglio di stile ufficiale. Questo esempio segue la seconda strada per le dimensioni dei titoli, la spaziatura interna delle schede e il colore dei metadati. Non sostiene che questi override siano nuovi token ufficiali di UIkit. Leggi la specifica di supporto ## Gerarchia di testo, colori e superfici nel sistema di progettazione sistema di design UIkit ### Gerarchia di testo, colori e superfici Il font globale predefinito è una famiglia di sistema, con dimensione di sedici pixel e interlinea di 1.5. Lo sfondo principale predefinito è #1e87f0, quello secondario è un neutro scuro e le superfici attenuate sono #f8f8f8. Questi ruoli distinguono un’azione principale di scelta da un riquadro esplicativo più discreto. La tabella delle specifiche fornita comprende valori sia per il testo sia per le superfici, anziché una palette decorativa di quattro colori. Il workshop usa un titolo grande ma contenuto, un’etichetta di programma piccola e un titolo all’interno di ogni scheda sessione. Il colore dei metadati è scurito localmente a #65717a. Il riquadro di preparazione ha una superficie azzurro chiaro originale e testo scuro standard. Non si presume che i colori vengano invertiti automaticamente: uno sfondo scuro richiede l’appropriato trattamento inverso di UIkit o stili di testo abbinati esplicitamente. Leggi la specifica di supporto ## Collegare la navigazione delle sessioni ai contenuti nel sistema di progettazione sistema di design UIkit ### Collega la navigazione delle sessioni ai contenuti L’elenco di navigazione usa uk-switcher con connect: #sessions e un’animazione fade. L’elenco dei contenuti ha la classe uk-switcher e l’ID corrispondente. La corrispondenza segue l’ordine degli elementi: il primo controllo gestisce il primo elemento di contenuto, quindi per aggiungere o riordinare una sessione occorre aggiornare entrambi gli elenchi. Il selettore connect esplicito evita di fare affidamento sulla posizione dell’elemento fratello immediatamente successivo. La navigazione usa uk-tab per l’aspetto visivo. UIkit gestisce lo stato dell’elemento attivo e il comportamento di accessibilità associato. Lo stato del piano originale è volutamente indipendente: visualizzare un’altra sessione non equivale a sceglierla. Solo «Scegli sessione» modifica l’etichetta selezionata e porta il focus sul campo del partecipante. 1. Apri Prototipazione e controlla i contenuti specifici. 2. Scegli quella sessione e controlla l’etichetta selezionata qui sotto. 3. Passa a Clinica dei sistemi senza sceglierla: il piano locale continua a indicare Prototipazione. Leggi la specifica di supporto ## Larghezze responsive e gestione degli spazi tra colonne nel sistema di progettazione sistema di design UIkit ### Gestione delle larghezze responsive e delle grondaie Il contenuto delle sessioni usa uk-width-2-3@m e uk-width-1-3@m all’interno di uk-grid. Al breakpoint medio, 960px, il contenuto e il riquadro di preparazione si dispongono affiancati. Al di sotto, si impilano. Le sezioni del piano e di preparazione usano regole di larghezza pari a metà allo stesso breakpoint, mantenendo un ordine logico nel codice sorgente sugli schermi più piccoli. La griglia di UIkit gestisce gli spazi tra colonne tramite le relative classi. L’esempio usa uk-grid-medium per le sezioni principali e uk-grid-small nell’intestazione. Non aggiungere margini arbitrari agli elementi figli della griglia aspettandoti che le loro larghezze frazionarie continuino a sommarsi correttamente. Il contenitore esterno e la spaziatura interna definiscono lo spazio dai bordi; le rifiniture locali per dispositivi mobili riducono la spaziatura interna delle schede e la dimensione dei titoli. Leggi la specifica di supporto ## Dettagli di preparazione con stato nativo dei componenti nel sistema di progettazione sistema di design UIkit ### Dettagli della preparazione con lo stato nativo dei componenti La classe uk-accordion-default applica lo stile predefinito. L’attributo uk-accordion imposta multiple: true, così l’apertura di una risposta sulla preparazione non chiude l’altra. Ogni elemento contiene uk-accordion-title e uk-accordion-content. Il runtime gestisce lo stato di espansione e la visibilità dei contenuti; le sole classi CSS non forniscono questo comportamento. Le due domande affrontano aspetti pratici diversi: cosa portare e se il pianificatore locale riserva un posto. Esplicitare la seconda risposta evita che l’interfaccia lasci intendere che venga effettuata una transazione esterna per l’evento. Questo limite non emerge solo nei contenuti dell’accordion: anche lo stato applicato specifica che non è stato riservato alcun posto. - multiple: true consente di lasciare aperte entrambe le risposte. - Titolo e contenuto devono rimanere nello stesso elemento dell’accordion. - Il contorno del focus da tastiera resta visibile su ogni titolo. Leggi la specifica di supporto ## Separare l’aspetto della libreria dalla convalida dell’applicazione nel sistema di progettazione sistema di design UIkit ### Separare l’aspetto della libreria dalla convalida dell’applicazione Il campo del partecipante usa uk-input all’interno di uk-form-controls, con un’etichetta effettiva e un testo esplicativo. La convalida obbligatoria del browser impedisce l’invio se il campo è vuoto. L’applicazione aggiunge un controllo degli spazi vuoti e applica uk-form-danger e aria-invalid in caso di errore, mantenendo allineati lo stato visivo e quello semantico. Le modifiche al campo cancellano l’errore non più attuale. Scegliere una sessione aggiorna la selezione locale e porta il focus sul campo del nome. L’invio mostra un messaggio di stato con il partecipante e la sessione selezionata. Il testo viene inserito con textContent, quindi il markup digitato non viene eseguito. Si tratta di un pianificatore locale senza backend; UIkit non attribuisce al modulo funzionalità di registrazione, salvataggio o notifica. Leggi la specifica di supporto ## Caricare CSS, runtime e poi il codice dell’applicazione nel sistema di progettazione sistema di design UIkit ### Carica CSS, poi Runtime e infine il codice dell'applicazione Installa uikit@3.25.25 e copia gli elementi compilati CSS e JavaScript da dist nelle risorse locali. Carica CSS prima delle piccole personalizzazioni del layout e uikit.min.js prima di app.js. Entrambi gli script possono usare defer, così l’ordine nel codice sorgente viene mantenuto dopo l’analisi del documento. L’esempio del body fornisce tutti gli attributi e i contenuti dei componenti. In questo caso il bundle delle icone è facoltativo, perché la pagina non usa uk-icon. Se in seguito aggiungi icone, carica il runtime corrispondente e assegna etichette significative ai controlli con la sola icona. Evita di abbinare un bundle JavaScript più recente a un foglio di stile meno recente solo perché i nomi dei file coincidono: struttura dei componenti e stili devono provenire dallo stesso pacchetto bloccato a una versione specifica. Leggi la specifica di supporto ## Mantenere stabili le connessioni dello switcher man mano che i contenuti crescono nel sistema di progettazione sistema di design UIkit ### Mantieni stabili i collegamenti del selettore mentre i contenuti crescono Lo switcher associa gli elementi di navigazione a quelli dei contenuti in base all’ordine. Per aggiungere una sessione, occorre aggiungere gli elementi su entrambi i lati nella stessa posizione, mentre connect: #sessions definisce la destinazione in modo esplicito. Per più switcher indipendenti nella stessa pagina, assegna a ogni destinazione un ID univoco e mantieni la corrispondenza nel relativo attributo di inizializzazione. La sessione del workshop selezionata resta distinta dal pannello attivo. Esplorare un’altra sessione non dovrebbe sostituire senza preavviso una scelta già effettuata nel pianificatore. Quando aggiungi pannelli più lunghi, controlla la griglia responsive condivisa e i contenuti dell’accordion nel nuovo pannello attivo: dimensionare solo il pannello iniziale può nascondere problemi di layout finché l’utente non cambia sessione. Leggi la specifica di supporto ## Esempi di componenti del sistema di progettazione sistema di design UIkit ### Pagina del workshop con attributi nativi di UIkit Lo switcher è collegato a #sessions; l’accordion consente più sezioni aperte; le larghezze della griglia si attivano con @m. ```

UIkit / Workshop program

One afternoon.
Three ways to learn.

Local planner

Plan details

Use a name to label this local plan.

Selected: Design critique

No plan recorded yet.

Before you arrive

  • What should I prepare?

    Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.

  • Does this reserve a seat?

    No. This preview records a choice only in memory. It is not connected to an event or registration service.

Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.

``` Riferimento del codice - L’attributo uk-switcher inizializza il comportamento; la classe uk-switcher identifica il contenitore dei contenuti. - Questa composizione non richiede alcun pacchetto di icone UIkit. ### Comportamento originale del piano locale La scelta delle sessioni e la convalida sono logica dell’applicazione, affiancata alle interazioni native di UIkit. ``` const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';}); ``` Riferimento del codice - Scegliere una sessione porta il focus sul campo del partecipante. - Non viene chiamato alcun servizio di prenotazione o notifica. ### Rifiniture esplicite a livello di schermata Piccoli aggiustamenti di spaziatura e focus, mantenendo i componenti UIkit. ``` body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}} ``` Riferimento del codice - Questi override non sono valori ufficiali dei token predefiniti. ## Configurazione dell’agente di progettazione sistema di design UIkit ### Punto di partenza per l’implementazione Salva le rifiniture della schermata fornite come style.css e il comportamento del piano locale come app.js. UIkit gestisce lo Switcher e l’Accordion. Questa composizione non richiede il bundle delle icone. Il wrapper HTML include tutto il markup del body; salva gli esempi forniti di interazione e CSS usando i nomi di file indicati qui. ``` Workshop planner

UIkit / Workshop program

One afternoon.
Three ways to learn.

Local planner

Plan details

Use a name to label this local plan.

Selected: Design critique

No plan recorded yet.

Before you arrive

  • What should I prepare?

    Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.

  • Does this reserve a seat?

    No. This preview records a choice only in memory. It is not connected to an event or registration service.

Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.

``` ### Un prompt per il tuo progetto ``` Usa UIkit 3.25.25 per estendere il programma del workshop fornito. Mantieni uk-switcher con il collegamento esplicito a #sessions, l’ordine corrispondente di navigazione e contenuti, le frazioni responsive di uk-grid e l’accordion nativo a espansione multipla. La visualizzazione di una sessione deve restare separata dalla sua selezione. La selezione deve portare il focus sull’input con etichetta per il partecipante; l’invio di soli spazi deve mostrare uk-form-danger e aria-invalid. Lo stato deve indicare la sessione scelta e il partecipante come programma locale, senza dichiarare che sia stato prenotato un posto. Carica il runtime corrispondente di UIkit prima dello script dell’applicazione. ``` ## Fonti e ambito del sistema di design UIkit Riferimento ai componenti nativi di UIkit 3.25.25. I valori Less sono definizioni in fase di compilazione; le modifiche locali a titolo, spaziatura interna e focus sono originali. Non viene effettuata alcuna prenotazione di eventi. - Less Variabili del tema in fase di compilazione. - Commutatore Comportamento di navigazione e contenuti collegati. - Accordion Espansione multipla e struttura. - Griglia Larghezze responsive e spazi tra elementi. - Form Classi per input e convalida. - Installazione Caricamento di runtime e stili. ## Risorse correlate al sistema di design UIkit ### Vant Un flusso mobile di selezione dell’indirizzo realizzato con Vant 4: variabili CSS reali, identità dell’indirizzo controllata, convalida dei campi, cambio di tema e salvataggio esplicitamente limitato al dispositivo. ### Vuestic UI Un foglio di valutazione nativo Vuestic con preset chiari e scuri verificati sulle fonti, etichette di valutazione accessibili, convalida delle aree di testo, media calcolata e uno stato salvato che conserva la valutazione completata. ### Web Awesome Esamina i token semantici effettivi di Web Awesome nei suoi elementi personalizzati nativi, comprese le modifiche circoscritte di raggio e spaziatura, lo stile dello shadow DOM, il comportamento di select e la convalida degli input. - [Riferimento per l’implementazione](https://getuikit.com/docs/switcher) - [Fonte](https://getuikit.com/docs/less) - [Fonte](https://getuikit.com/docs/utility) - [Leggi la specifica di supporto](https://getuikit.com/docs/javascript) - [Leggi la specifica di supporto](https://getuikit.com/docs/less) - [Leggi la specifica di supporto](https://getuikit.com/docs/card) - [Leggi la specifica di supporto](https://getuikit.com/docs/switcher) - [Leggi la specifica di supporto](https://getuikit.com/docs/grid) - [Leggi la specifica di supporto](https://getuikit.com/docs/accordion) - [Leggi la specifica di supporto](https://getuikit.com/docs/form) - [Leggi la specifica di supporto](https://getuikit.com/docs/installation) - [Riferimento del codice](https://getuikit.com/docs/switcher) - [Riferimento del codice](https://getuikit.com/docs/form) - [Riferimento del codice](https://getuikit.com/docs/utility) - [Less Variabili del tema in fase di compilazione.](https://getuikit.com/docs/less) - [Commutatore Comportamento di navigazione e contenuti collegati.](https://getuikit.com/docs/switcher) - [Accordion Espansione multipla e struttura.](https://getuikit.com/docs/accordion) - [Griglia Larghezze responsive e spazi tra elementi.](https://getuikit.com/docs/grid) - [Form Classi per input e convalida.](https://getuikit.com/docs/form) - [Installazione Caricamento di runtime e stili.](https://getuikit.com/docs/installation)