# Sistema di progettazione Fomantic UI ## Anteprima dell'interfaccia del sistema di progettazione sistema di design Fomantic UI Filtra tre spunti di lettura originali, assegnando una valutazione con le stelle o i tasti freccia, e crea una lista ristretta per la discussione. ## Fomantic UI Riferimento di progettazione del sistema di design Fomantic UI Valori predefiniti compilati di 2.9.4 CSS, esaminati direttamente. Sono valori predefiniti a livello di selettore ricavati dal tema basato su Less, non token CSS di runtime inventati. I colori originali delle copertine e le dimensioni dell’applicazione sono indicati separatamente. ### Tipografia predefinita del sito | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | html font-size | 14px | Dimensione di base predefinita in rem. | | body font-family | Lato, system-ui, platform and emoji fallbacks | L’anteprima include i dati locali del font Lato. | | body line-height | 1.4285em | Circa 20px con una dimensione del testo predefinita di 14px. | | body text color | rgba(0, 0, 0, 0.87) | Testo predefinito a forte enfasi. | | h1 / h2 / h3 | 2rem / 1.71428571rem / 1.28571429rem | Dimensioni predefinite dei titoli prima delle modifiche originali della pagina. | | heading line-height | 1.28571429em | Ritmo predefinito dei titoli. | ### Pulsanti predefiniti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | .ui.button background | #e0e1e2 | Pulsante predefinito neutro. | | .ui.button border-radius | 0.28571429rem | Circa 4px con la dimensione di base predefinita. | | .ui.teal.button background | #00b5ad | Colore d’azione nativo verde petrolio usato nell’elenco di lettura. | | .ui.teal.button:hover | #009c95 | Stato hover nativo verde petrolio. | | .ui.teal.button:focus | #008c86 | Sfondo nativo di messa a fuoco verde petrolio. | | .ui.teal.button:active | #00827c | Sfondo nativo verde petrolio nello stato premuto. | | .ui.primary.button background | #2185d0 | Il blu primario è distinto dalla variante verde petrolio. | ### Geometria predefinita delle card | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | .ui.card width | 290px | Larghezza fissa predefinita; la variante fluida riempie questa griglia dell’applicazione. | | .ui.card border-radius | 0.28571429rem | Circa 4px con la dimensione di base predefinita. | | .ui.card box-shadow | 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5 | Rilievo e contorno predefiniti. | | .ui.card margin | 1em 0 | Le modifiche originali azzerano il margine delle card per allinearle. | | .ui.card transition | box-shadow 0.1s ease, transform 0.1s ease | Animazione predefinita delle card. | ### Configurazione delle valutazioni | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | maxRating | 4 by default; 5 in this example | La scala esplicita a cinque punti corrisponde al valore massimo del cursore accessibile. | | initialRating | 0 | Nessuna valutazione prima dell’interazione dell’utente. | | clearable | auto by default; true in this example | Consente di cancellare una valutazione esistente. | | interactive | true | L’interazione con il mouse è abilitata. | | onRate(value) | Callback after a rating is selected | Sincronizza il testo visualizzato e il valore accessibile. | ### Scala originale della sala di lettura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Page padding | 36px 28px / 24px 18px mobile | Spaziatura originale del layout. | | Grid gap | 22px | Ripiano di lettura originale a tre colonne. | | Page heading | 34px / 1.15; 29px mobile | Modifica originale del titolo. | | Cover height | 175px / 155px mobile | Illustrazioni originali delle copertine dei libri CSS. | | Layout breakpoint | 760px | Passaggio originale a una sola colonna di card. | ## Fomantic UI Guida completa al sistema di design 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. ## 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 ### Ripiano di lettura con tre card Card native, etichette, pulsanti, markup del menu a discesa e contenitori delle valutazioni. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` Riferimento del codice - Sono spunti di esercizio originali, non copertine di libri reali. - Ogni valutazione ha un’etichetta accessibile e un intervallo numerico propri. - Le azioni dell’elenco di lettura espongono aria-pressed. ### Inizializzazione dei moduli e interazione locale Filtro del menu a discesa, chiamate al comportamento delle valutazioni, supporto aggiuntivo per la tastiera e stato dell’elenco di lettura. ``` 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.';};}); ``` Riferimento del codice - jQuery e i moduli Fomantic devono essere caricati prima di questo file. - Per le modifiche tramite i tasti freccia viene usato lo stesso metodo di impostazione del punteggio. - Il filtro nasconde le schede senza cancellarne i punteggi o le selezioni. ### Composizione originale dello scaffale Griglia responsiva, copertine e gestione esplicita dello stato attivo. ``` 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} ``` Riferimento del codice - L’altezza predefinita compilata del sito, height:100%, viene reimpostata su auto per l’incorporamento. - L’overflow del body non viene usato per nascondere errori di layout. ## Configurazione dell’agente di sistema di progettazione sistema di design Fomantic UI ### Punto di partenza per l’implementazione Verificato con Fomantic UI 2.9.4 e jQuery 3.7.1. L’esempio autonomo incorpora le risorse dei font necessarie; la configurazione standard mantiene i percorsi relativi al pacchetto. Il wrapper HTML include tutto il markup del body; salva gli esempi forniti per le interazioni e per CSS con i nomi di file indicati qui. ```

FOMANTIC UI · READING ROOM

Make a shelf worth returning to.

Rate three original reading prompts and build a local discussion shortlist.

Local collection
3 prompts
TYPOGRAPHY · 18 MIN

Letters in the margins

Compare a narrow editorial column with a generous display line. Find where the rhythm changes.
Not rated
SPACE & RHYTHM · 12 MIN

The space between

Remove one element from a crowded page. Rebalance the remaining space without adding decoration.
Not rated
COLOR · 15 MIN

A color and its neighbor

Place the same accent on two backgrounds. Describe the shift before changing its value.
Not rated

Discussion shortlist

No prompts selected. Add one to begin.

Ratings and selections stay in this browser page. These are original prompts, not published books.

``` ### Un prompt per il tuo progetto ``` Estendi la selezione di letture della sala di lettura Fomantic UI 2.9.4 usando l’inizializzazione dei moduli jQuery fornita e i componenti Dropdown e Rating. Mantieni collegati alle schede visibili i tre spunti di lettura, i relativi punteggi e il comportamento della selezione locale. Conserva il supporto esplicito alla tastiera e la semantica del cursore aggiunti al controllo di valutazione, insieme alle risorse del tema e delle icone corrispondenti. La selezione deve impedire aggiunte duplicate e mostrare chiaramente i contenuti correnti; non è un flusso di gestione delle richieste di assistenza né un servizio remoto di consigli. ``` ## Fonti e ambito del sistema di progettazione sistema di design Fomantic UI Fomantic UI 2.9.4 con jQuery 3.7.1. I valori del tema sono impostazioni predefinite compilate; le copertine originali e le integrazioni per la tastiera sono indicate. Tutte le selezioni restano locali. - Per iniziare Risorse compilate e configurazione dei moduli. - Temi Personalizzazione del tema basata su Less. - Sito Tipografia globale e impostazioni predefinite della pagina. - Card Struttura e varianti dei contenuti delle schede. - Valutazione Metodi di valutazione e callback onRate. - Menu a discesa Inizializzazione della selezione e gestione delle modifiche. - Button Varianti e stati nativi con nome. ## Risorse correlate al sistema di progettazione sistema di design Fomantic UI ### Foundation Un banco di verifica Foundation funzionante con XY Grid, validatori personalizzati Abide, conferma Reveal, impostazioni Sass effettive e codice completo per l’integrazione locale. ### 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. - [Riferimento per l’implementazione](https://fomantic-ui.com/modules/rating.html) - [Fonte](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/site.css) - [Fonte](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/button.css) - [Fonte](https://github.com/fomantic/Fomantic-UI-CSS/blob/master/components/card.css) - [Fonte](https://fomantic-ui.com/modules/rating.html) - [Fonte](https://fomantic-ui.com/usage/layout.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/introduction/getting-started.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/usage/theming.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/globals/site.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/views/card.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/modules/rating.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/modules/dropdown.html) - [Leggi la specifica di supporto](https://fomantic-ui.com/elements/button.html) - [Riferimento del codice](https://fomantic-ui.com/views/card.html) - [Riferimento del codice](https://fomantic-ui.com/modules/rating.html) - [Riferimento del codice](https://fomantic-ui.com/usage/layout.html) - [Per iniziare Risorse compilate e configurazione dei moduli.](https://fomantic-ui.com/introduction/getting-started.html) - [Temi Personalizzazione del tema basata su Less.](https://fomantic-ui.com/usage/theming.html) - [Sito Tipografia globale e impostazioni predefinite della pagina.](https://fomantic-ui.com/globals/site.html) - [Card Struttura e varianti dei contenuti delle schede.](https://fomantic-ui.com/views/card.html) - [Valutazione Metodi di valutazione e callback onRate.](https://fomantic-ui.com/modules/rating.html) - [Menu a discesa Inizializzazione della selezione e gestione delle modifiche.](https://fomantic-ui.com/modules/dropdown.html) - [Button Varianti e stati nativi con nome.](https://fomantic-ui.com/elements/button.html)