Sistema di progettazione Fomantic UI.

Fomantic UI Vocabolario del sistema di design A CSS con moduli jQuery

Un vocabolario CSS con moduli jQuery

Fomantic UI combina stringhe di classi semantiche con moduli facoltativi con stato. Il ripiano di lettura usa ui fluid card, ui teal button e ui basic label per l’aspetto. Il menu a discesa e le valutazioni vengono inizializzati esplicitamente tramite jQuery. Il solo foglio di stile visualizzerebbe le card, ma non fornirebbe la stessa interattività.

Questo esempio usa Fomantic UI 2.9.4 e jQuery 3.7.1. Include il modulo transition prima di dropdown e poi rating. Rendere visibili queste dipendenze è più utile che mostrare una fila statica di stelle definendola un esempio interattivo di libreria. Il modulo originale dell’applicazione viene eseguito solo dopo la creazione del markup delle card.

Leggi la specifica di supporto

Fomantic UI I valori predefiniti compilati del sistema di design non sono nomi di token di runtime

I valori predefiniti compilati non sono i nomi dei token in fase di esecuzione

Il tema predefinito di Fomantic è realizzato con Less. Il riferimento riporta quindi valori reali dei selettori, come lo sfondo del pulsante verde petrolio e il raggio del bordo della card. Non inventa un token --fomantic-primary API che il pacchetto compilato non espone. Per modificare il tema in modo più ampio, usa i file delle variabili e la procedura di compilazione del tema documentati.

La variante verde petrolio è distinta dalla variante blu primaria. In questo ripiano di lettura l’azione per l’elenco di lettura è verde petrolio, mentre le illustrazioni originali delle copertine usano colori carta, salvia e argilla calda. Queste copertine sono illustrazioni dell’applicazione, non campioni ufficiali della palette. I valori hover, focus e premuto dei pulsanti restano quelli nativi predefiniti di Fomantic.

Leggi la specifica di supporto

Fomantic UI I rem da quattordici pixel modificano la geometria del sistema di design

Le unità rem da quattordici pixel cambiano la geometria

Il foglio di stile predefinito del sito imposta la dimensione di base e il testo del body a quattordici pixel. Il raggio di 0.28571429rem di pulsanti e card corrisponde quindi a circa quattro pixel. Riutilizzare quel valore rem con una dimensione di base di sedici pixel produrrebbe una geometria diversa; per questo il riferimento indica la dimensione di base anziché riportare da solo un raggio privo di contesto.

Lato è la famiglia preferita e il pacchetto compilato include file di font locali. Questa anteprima autonoma incorpora le risorse dei font invece di richiedere un servizio di web font. Il titolo della pagina è una modifica originale a trentaquattro pixel; le descrizioni delle card mantengono un testo compatto, con un’interlinea più ampia definita dall’applicazione.

Leggi la specifica di supporto

Fomantic UI L’anatomia delle card del sistema di design distingue contenuti e azioni

La struttura della scheda distingue contenuti e azioni

Ogni card nativa contiene una copertina decorativa, un blocco di contenuto per argomento e descrizione, un altro blocco per la valutazione e un blocco aggiuntivo per l’azione relativa all’elenco di lettura. Le card fluide riempiono la griglia originale a tre colonne invece di usare la larghezza predefinita di 290px del pacchetto. La pagina rimuove i margini delle singole card, così la griglia può mantenere spaziature uniformi.

Gli spunti propongono attività di lettura diverse: confrontare la spaziatura tra le lettere, rimuovere un elemento per studiare lo spazio negativo e osservare i cambiamenti contestuali del colore. Le copertine richiamano visivamente questi esercizi con caratteri tipografici, rettangoli e colori sovrapposti. Sono spunti originali e non implicano l’approvazione di alcun editore.

Leggi la specifica di supporto

Fomantic UI Per ogni modalità di input, usa il comportamento nativo delle valutazioni del sistema di design

Usa il comportamento nativo delle valutazioni per ogni modalità di inserimento

Il modulo rating è configurato con un massimo di cinque e con clearable true. onRate riceve il valore numerico corrente e sincronizza sia il punteggio visibile sia il valore accessibile del cursore. L’azione Cancella valutazione richiama il comportamento clear rating del modulo anziché rimuovere manualmente le classi attive.

Il modulo nativo delle stelle supporta l’interazione con il mouse, ma questo esempio aggiunge anche un comportamento esplicito per la tastiera. Il contenitore della valutazione è un cursore etichettato con un intervallo da zero a cinque. I tasti freccia modificano il valore di un’unità, Home cancella la valutazione ed End seleziona cinque. Ogni modalità richiama set rating, così le stelle visualizzate e il valore mostrato dall’applicazione condividono lo stesso stato del modulo.

1. Portati su una valutazione con Tab e premi due volte Freccia destra per scegliere due stelle su cinque.
2. Premi End per scegliere cinque, poi Home per tornare a Nessuna valutazione.
3. Fai clic su una stella e verifica che il testo visualizzato e il valore accessibile si aggiornino insieme.

Leggi la specifica di supporto

Fomantic UI Il filtro del menu a discesa del sistema di design preserva lo stato degli elementi nascosti

Il filtraggio del dropdown mantiene lo stato degli elementi nascosti

Il selettore degli argomenti diventa un menu a discesa nativo di Fomantic tramite l’inizializzatore dropdown. La funzione di callback onChange nasconde le card il cui argomento non corrisponde al valore selezionato e aggiorna il conteggio degli spunti visibili. L’opzione Tutti gli argomenti ripristina l’intero ripiano. Il componente usa il modulo transition per animare lo spostamento del menu.

Il filtro non distrugge né ricrea una card. Le valutazioni esistenti e l’appartenenza all’elenco di lettura restano associate ai record originali anche quando sono nascosti. È una scelta intenzionale: restringere il ripiano è un’operazione di visualizzazione, non una richiesta di cancellare le scelte precedenti dell’utente. Il riepilogo può quindi includere un elemento al di fuori del filtro corrente.

Leggi la specifica di supporto

Fomantic UI Nel sistema di design, l’elenco di lettura è indipendente dalla valutazione

Una lista ristretta è indipendente da una valutazione

La valutazione esprime interesse su una scala da zero a cinque, mentre l’appartenenza all’elenco di lettura è una decisione distinta, di tipo sì/no. L’utente può conservare uno spunto per discuterne prima di valutarlo. Il pulsante dell’elenco di lettura espone lo stato selezionato tramite aria-pressed e alterna le etichette Aggiungi e Rimuovi. Il riepilogo ricava i nomi da un Set di ID stabili degli argomenti.

L’area di stato descrive gli spunti selezionati senza affermare che una raccolta sia stata salvata da remoto. Ricaricando il browser, questo esempio viene azzerato. Un vero elenco di lettura condiviso richiederebbe persistenza, identità utente e gestione dei conflitti; queste funzionalità non si ottengono aggiungendo una classe alla card.

Leggi la specifica di supporto

Fomantic UI Nel sistema di design, preserva il significato numerico oltre le stelle decorative

Preserva il significato numerico oltre le stelle decorative

Le icone delle stelle sono nascoste alle tecnologie assistive perché il cursore genitore espone il valore numerico e l’etichetta. Un testo visibile come Nessuna valutazione o il punteggio espresso come frazione comunica lo stesso significato senza richiedere di contare le icone colorate. Un contorno focus-visible evidenzia il cursore attivo e il pulsante Cancella riporta il focus su quel controllo.

Anche le forme delle copertine dei libri sono decorative. Il titolo effettivo dello spunto, la durata e la descrizione restano testo all’interno della card. Sugli schermi stretti, le card si dispongono in colonna al breakpoint originale di 760px. L’esempio ripristina l’altezza della viewport del body compilato e nasconde l’overflow orizzontale, così l’incorporamento usa l’altezza effettiva dei contenuti e non nasconde difetti di layout.

• Esponi il numero corrente sia come testo sia come valore accessibile.
• Usa pulsanti nativi per cancellare le valutazioni e modificare l’elenco di lettura.
• Mantieni le etichette e le descrizioni complete quando la griglia passa a una sola colonna.

Leggi la specifica di supporto

Fomantic UI Distribuisci i font insieme agli stili oppure includili nel bundle del sistema di design

Includi i font insieme agli stili oppure incorporali nel bundle

In un progetto normale, copia l’intera directory fomantic-ui-css invece di estrarre semantic.css e dimenticare la directory themes. Gli stili compilati fanno riferimento ai file dei font Lato e delle icone tramite percorsi relativi. La configurazione qui sotto mantiene intatti questi percorsi e carica jQuery prima dei moduli del pacchetto.

L’anteprima locale usa solo gli stili e gli script dei componenti necessari, poi incorpora in un unico documento le risorse a cui fanno riferimento. Non effettua richieste esterne di font. I bundler di produzione possono elaborare queste risorse in modo diverso, ma i percorsi dei font e l’ordine dei moduli vanno verificati nella pagina distribuita, senza darli per scontati dopo un’installazione npm riuscita.

Leggi la specifica di supporto

Fomantic UI Esempi di componenti del sistema di design

<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>

const cards=[...document.querySelectorAll('.book-grid article')],selected=new Set();
$('#topic').dropdown({onShow(){this.setAttribute('aria-expanded','true');},onHide(){this.setAttribute('aria-expanded','false');},onChange(value){let count=0;cards.forEach(card=>{card.hidden=value!=='all'&&card.dataset.topic!==value;if(!card.hidden)count++;});document.querySelectorAll('.toolbar .menu .item').forEach(item=>item.setAttribute('aria-selected',String(item.dataset.value===value)));document.querySelector('#visible-count').textContent=`${count} ${count===1?'prompt':'prompts'}`;}});
const dropdown=document.querySelector('.toolbar div.dropdown');dropdown.setAttribute('role','combobox');dropdown.setAttribute('aria-label','Show topic');dropdown.setAttribute('aria-expanded','false');dropdown.setAttribute('aria-haspopup','listbox');dropdown.querySelector('.menu').setAttribute('role','listbox');dropdown.querySelectorAll('.menu .item').forEach(item=>{item.setAttribute('role','option');item.setAttribute('aria-selected',String(item.dataset.value==='all'));});
$('.ui.rating').each(function(){const node=this,$rating=$(node);$rating.rating({maxRating:5,clearable:true,onRate(value){node.setAttribute('aria-valuenow',value);node.setAttribute('aria-valuetext',value?`${value} out of 5`:'Not rated');node.closest('article').querySelector('.score').textContent=value?`${value} / 5`:'Not rated';}});node.setAttribute('aria-valuetext','Not rated');node.querySelectorAll('.icon').forEach(i=>i.setAttribute('aria-hidden','true'));node.addEventListener('keydown',e=>{let value=Number($rating.rating('get rating'));if(['ArrowRight','ArrowUp'].includes(e.key))value=Math.min(5,value+1);else if(['ArrowLeft','ArrowDown'].includes(e.key))value=Math.max(0,value-1);else if(e.key==='Home')value=0;else if(e.key==='End')value=5;else return;e.preventDefault();$rating.rating('set rating',value);});node.closest('article').querySelector('.clear-rating').onclick=()=>{$rating.rating('clear rating');node.focus();};});
cards.forEach(card=>{card.querySelector('.shortlist').onclick=e=>{const id=card.dataset.topic,button=e.currentTarget;if(selected.has(id)){selected.delete(id);button.textContent='Add to shortlist';button.setAttribute('aria-pressed','false');}else{selected.add(id);button.textContent='Remove from shortlist';button.setAttribute('aria-pressed','true');}const names=cards.filter(c=>selected.has(c.dataset.topic)).map(c=>c.dataset.name);document.querySelector('#summary').textContent=names.length?`${names.length} selected: ${names.join('; ')}.`:'No prompts selected. Add one to begin.';};});

body{background:#f6f5f2}.reading-room{max-width:1120px;margin:auto;padding:36px 28px}.reading-room header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:32px}.kicker{font-size:11px;letter-spacing:.14em;font-weight:700;color:#008c86}h1{font-size:34px;line-height:1.15;margin:12px 0}.intro{color:#666;font-size:15px;line-height:1.6}.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.toolbar>label{font-weight:700}.toolbar>span{color:#767676;margin-left:auto}.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.book-grid>.ui.card{margin:0;height:100%}.book-grid>.ui.card[hidden]{display:none}.book-cover{height:175px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.book-cover small{position:absolute;bottom:16px;left:18px;letter-spacing:.15em;font-size:9px;font-weight:700}.type-cover{background:#e2ccb0;color:#4a332a}.type-cover>span{font-family:Georgia,serif;font-size:90px;line-height:1}.space-cover{background:#ccd7d5;gap:10px}.space-cover>span{height:65px;width:25px;background:#3c6763}.space-cover>span:nth-child(2){height:90px;width:45px}.color-cover{background:#dcb9b0}.color-cover>span{width:85px;height:85px;background:#a85243}.color-cover>span:nth-child(2){width:50px;height:50px;border-radius:50%;background:#e6c57c;position:absolute}.book-grid .description{font-size:14px;line-height:1.6;min-height:88px}.rating-label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.score{display:block;font-size:12px;color:#666;margin:8px 0 12px}.clear-rating{margin-bottom:0!important}.book-grid .ui.rating:focus-visible{outline:3px solid #00b5ad;outline-offset:4px}.summary{margin-top:28px!important}.scope{font-size:12px;color:#666}button:focus-visible{outline:3px solid #00b5ad!important;outline-offset:3px}@media(max-width:760px){.reading-room{padding:24px 18px}.reading-room header{flex-direction:column;gap:8px}h1{font-size:29px}.book-grid{grid-template-columns:1fr}.book-grid .description{min-height:0}.book-cover{height:155px}.toolbar>span{width:100%;margin-left:0}.toolbar .dropdown{min-width:180px}}
html,body{height:auto;min-height:0}body{min-width:0;overflow-x:visible}