UIkit combina un framework CSS, la personalizzazione Less e componenti JavaScript basati su attributi. Lo Switcher, l’Accordion e la griglia responsive collaborano nel pianificatore di workshop qui sotto, mostrando dove termina il comportamento nativo dei componenti e dove inizia lo stato di selezione dell’applicazione.
Guida OpenDesign9 capitoli33 voci di riferimentoGuida applicativa originale
01
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.
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.
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.
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.
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.
Apri Prototipazione e controlla i contenuti specifici.
Scegli quella sessione e controlla l’etichetta selezionata qui sotto.
Passa a Clinica dei sistemi senza sceglierla: il piano locale continua a indicare Prototipazione.
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.
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.
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.
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 [email protected] 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.
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.
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.
html
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
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.
javascript
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.';});
Questi override non sono valori ufficiali dei token predefiniti.
04
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.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
Un prompt per il tuo progetto
Prompt per l’agente
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.
05
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.
