Fomantic UI-Designsystem.

Fomantic UI Designsystem: CSS-Vokabular mit jQuery-Modulen

Ein CSS-Vokabular mit jQuery-Modulen

Fomantic UI kombiniert semantische Klassenzeichenfolgen mit optionalen zustandsbehafteten Modulen. Das Bücherregal verwendet ui fluid card, ui teal button und ui basic label für die Darstellung. Dropdown und Bewertungen werden ausdrücklich über jQuery initialisiert. Das Laden des Stylesheets allein würde zwar die Karten anzeigen, aber nicht dieselbe Interaktivität bieten.

Dieses Beispiel verwendet Fomantic UI 2.9.4 und jQuery 3.7.1. Es bindet das transition-Modul vor dropdown und anschließend rating ein. Diese Abhängigkeiten sichtbar zu machen, ist sinnvoller, als eine statische Sternzeile zu zeigen und sie als interaktives Bibliotheksbeispiel zu bezeichnen. Das Anwendungsmodul wird erst ausgeführt, nachdem das Karten-Markup vorhanden ist.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Kompilierte Standardwerte sind keine Laufzeit-Token-Namen

Kompilierte Standardwerte sind keine Laufzeitnamen für Design-Tokens

Das Standarddesign von Fomantic wird mit Less erstellt. Daher hält die Referenz tatsächliche Selektorwerte fest, etwa den Hintergrund der teal-Schaltfläche und den Eckenradius der Karte. Sie erfindet kein --fomantic-primary-Token API, das im kompilierten Paket nicht verfügbar ist. Für größere Designänderungen sollten der dokumentierte Design-Build und die Variablendateien verwendet werden.

Die benannte teal-Variante ist von der blauen primary-Variante getrennt. In diesem Bücherregal ist die Schaltfläche zum Merken teal, während die Originalillustrationen der Buchcover Papier-, Salbei- und warme Tonfarben verwenden. Diese Cover sind Illustrationen der Anwendung und keine offiziellen Farbpalettenmuster. Die Werte für Hover, Fokus und gedrückte Schaltflächen entsprechen weiterhin den Fomantic-Standardeinstellungen.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Vierzehn-Pixel-Rems verändern die Geometrie

Rem-Werte von vierzehn Pixeln verändern die Geometrie

Das Standard-Stylesheet der Website setzt die Schriftgröße des Root-Elements und des Body-Texts auf vierzehn Pixel. Der Eckenradius von 0.28571429rem für Schaltflächen und Karten entspricht daher ungefähr vier Pixeln. Wird dieser rem-Wert in einem anderen Kontext mit einer Root-Schriftgröße von sechzehn Pixeln übernommen, ergibt sich eine andere Geometrie. Deshalb enthält die Referenz die Root-Größe, statt nur einen unerklärten Radius aufzuführen.

Lato ist die bevorzugte Schriftfamilie; das kompilierte Paket enthält lokale Schriftdateien. Diese eigenständige Vorschau bindet die Schriftressourcen direkt ein, statt einen Webfont-Dienst anzufragen. Die Seitenüberschrift ist eine eigens festgelegte Überschreibung mit vierunddreißig Pixeln. Kartenbeschreibungen behalten den kompakten Fließtext bei, erhalten jedoch einen großzügigeren Zeilenabstand der Anwendung.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Der Kartenaufbau trennt Inhalte und Aktionen klar voneinander

Der Kartenaufbau trennt Inhalt und Aktionen klar voneinander

Jede native Karte enthält ein dekoratives Cover, einen Inhaltsbereich für Thema und Beschreibung, einen weiteren Inhaltsbereich für die Bewertung sowie einen zusätzlichen Inhaltsbereich für die Aktion zum Merken. Fluid-Karten füllen das ursprüngliche dreispaltige Raster, statt die Standardbreite des Pakets von 290px zu verwenden. Die Abstände einzelner Karten werden entfernt, damit das Raster gleichmäßige Zwischenräume vorgibt.

Die Aufgaben stellen unterschiedliche Leseanforderungen: den Buchstabenabstand vergleichen, ein Element entfernen, um den negativen Raum zu untersuchen, und kontextabhängige Farbänderungen beobachten. Ihre Cover greifen diese Übungen mit Typografie, Rechtecken und überlappenden Farben visuell auf. Es handelt sich ausdrücklich um eigens erstellte Aufgaben, die keine Empfehlung durch einen Verlag implizieren.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Das native Rating-Verhalten für jeden Eingabepfad aufrufen

Rufe das native Bewertungsverhalten für jeden Eingabepfad auf

Das Rating-Modul ist mit einem Maximum von fünf und clearable true konfiguriert. onRate empfängt den aktuellen Zahlenwert und synchronisiert sowohl die sichtbare Bewertung als auch den barrierefrei zugänglichen Slider-Wert. Die Aktion „Bewertung löschen“ ruft das Verhalten clear rating des Moduls auf, statt aktive Klassen manuell zu entfernen.

Das native Sternmodul unterstützt Mausinteraktionen, dieses Beispiel ergänzt jedoch auch eine ausdrückliche Tastatursteuerung. Der Bewertungscontainer ist ein beschrifteter Slider mit einem Wertebereich von null bis fünf. Mit den Pfeiltasten ändert sich der Wert um einen Schritt, mit Home wird die Bewertung gelöscht und mit End fünf gewählt. Jeder dieser Wege ruft set rating auf, sodass die angezeigten Sterne und die Anwendungsausgabe denselben Modulzustand verwenden.

1. Wechseln Sie mit der Tabulatortaste zu einer Bewertung und drücken Sie zweimal die rechte Pfeiltaste, um zwei von fünf zu wählen.
2. Drücken Sie End, um fünf zu wählen, und anschließend Home, um die Bewertung auf „Nicht bewertet“ zurückzusetzen.
3. Klicken Sie auf einen Stern und prüfen Sie, ob Textausgabe und barrierefrei zugänglicher Wert gemeinsam aktualisiert werden.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Das Filtern im Dropdown erhält ausgeblendete Zustände

Die Dropdown-Filterung bewahrt ausgeblendete Zustände

Das Themen-Auswahlfeld wird durch den Initialisierer dropdown in ein natives Fomantic-Dropdown umgewandelt. Sein onChange-Callback blendet Karten aus, deren Thema nicht dem ausgewählten Wert entspricht, und aktualisiert die Anzahl der sichtbaren Aufgaben. Die Option „Alle Themen“ zeigt wieder das gesamte Bücherregal an. Für die Bewegung des Menüs verwendet die Komponente das transition-Modul.

Beim Filtern werden Karten weder gelöscht noch neu erstellt. Vorhandene Bewertungen und die Merkliste bleiben an ihren ursprünglichen Einträgen erhalten, solange diese ausgeblendet sind. Das ist beabsichtigt: Das Eingrenzen des Bücherregals dient der Ansicht und soll nicht frühere Entscheidungen der Nutzer löschen. Daher kann die Zusammenfassung auch einen Eintrag außerhalb des aktuellen Filters enthalten.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Ein Eintrag auf der Merkliste ist unabhängig von einer Bewertung

Eine Auswahlliste ist unabhängig von einer Bewertung

Eine Bewertung drückt Interesse auf einer Skala von null bis fünf aus; ein Eintrag auf der Merkliste ist eine separate Ja-Nein-Entscheidung. Nutzer können eine Aufgabe für eine Diskussion vormerken, bevor sie sie bewerten. Die Merkliste-Schaltfläche gibt ihren ausgewählten Zustand über aria-pressed an und wechselt zwischen den Beschriftungen „Hinzufügen“ und „Entfernen“. Die Zusammenfassung ermittelt die Namen anhand einer Set-Struktur mit stabilen Themen-IDs.

Der Statusbereich beschreibt die ausgewählten Aufgaben, ohne zu behaupten, dass eine Sammlung extern gespeichert wurde. Beim Neuladen des Browsers wird dieses Beispiel zurückgesetzt. Für eine tatsächlich gemeinsam genutzte Leseliste wären dauerhafte Speicherung, Nutzeridentität und Konfliktbehandlung erforderlich. Diese Funktionen entstehen nicht dadurch, dass man einer Karte eine Klasse hinzufügt.

Unterstützende Spezifikation lesen

Fomantic UI Designsystem: Die numerische Bedeutung darf nicht auf dekorative Sterne reduziert werden

Die numerische Bedeutung darf nicht auf dekorative Sterne reduziert werden

Die Sternsymbole sind für assistive Technologien ausgeblendet, da der übergeordnete Schieberegler den Zahlenwert und die Beschriftung bereitstellt. Eine sichtbare Ausgabe wie „Nicht bewertet“ oder ein Bruchwert vermittelt dieselbe Bedeutung, ohne dass die lesende Person farbige Symbole zählen muss. Eine bei Tastaturfokus sichtbare Kontur kennzeichnet den aktiven Schieberegler. Die Schaltfläche „Bewertung löschen“ setzt den Fokus wieder auf dieses Steuerelement.

Auch die Buchcover-Formen sind dekorativ. Der tatsächliche Titel, die Dauer und die Beschreibung der Aufgabe bleiben als Text in der Karte erhalten. Auf schmalen Bildschirmen werden die Karten am ursprünglichen Breakpoint von 760px untereinander angeordnet. Das Beispiel setzt die Höhe des kompilierten body-Elements auf die Höhe des Viewports zurück und hebt den ausgeblendeten horizontalen Überlauf auf. So richtet sich die Einbettung nach der tatsächlichen Inhaltshöhe und verbirgt keine Layoutfehler.

• Gib die aktuelle Zahl sowohl als Text als auch als zugänglichen Wert aus.
• Verwende native Schaltflächen zum Löschen und Ändern der Merkliste.
• Erhalte Beschriftungen und vollständige Beschreibungen, wenn das Raster einspaltig wird.

Unterstützende Spezifikation lesen

Fomantic UI-Designsystem: Schriftarten zusammen mit den Styles bereitstellen oder bündeln

Lege die Schriftdateien zu den Styles oder binde sie ins Bundle ein

Kopiere in einem regulären Projekt das vollständige Verzeichnis fomantic-ui-css, statt semantic.css herauszulösen und dabei die Theme-Assets zu vergessen. Die kompilierten Styles verweisen über relative Pfade auf Lato- und Icon-Schriftdateien. Die folgende Einrichtung erhält diese Pfade und lädt jQuery vor den Paketmodulen.

Die lokale Vorschau verwendet nur die erforderlichen Komponenten-Styles und Skripte und bettet anschließend die referenzierten Assets in ein einzelnes Dokument ein. Sie stellt keine externen Schriftarten bereit. Produktions-Bundler verarbeiten diese Assets möglicherweise anders. Der Schriftpfad und die Modulreihenfolge müssen jedoch in der ausgelieferten Seite getestet werden; ein erfolgreicher npm install allein ist kein ausreichender Nachweis.

Unterstützende Spezifikation lesen

Fomantic UI-Designsystem: Komponentenbeispiele

<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}