# UIkit-Designsystem

## Vorschau der UIkit-Designsystem-Oberfläche

Zwischen drei Sitzungen wechseln, Vorbereitungsdetails aufklappen, eine Sitzung auswählen und einen lokalen Teilnehmerplan prüfen.

## Entwurfsreferenz für das UIkit-Designsystem

Less-Quellcode von UIkit 3.25.25 und kompiliertes Standard-CSS. @-Namen sind Less-Variablen zur Kompilierzeit, keine benutzerdefinierten CSS-Eigenschaften zur Laufzeit. Die Vorschau ergänzt ausdrücklich angegebene, bildschirmspezifische Überschreibungen.

### Typografie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| @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" | Standard-Systemschriftenstapel. |
| @global-font-size | 16px | Grundschriftgröße. |
| @global-line-height | 1.5 | Zeilenhöhe des Fließtexts. |
| @global-large-font-size | 1.5rem | Helferklasse für große Schrift. |
| @global-medium-font-size | 1.25rem | Helferklasse für mittlere Schrift. |
| @global-small-font-size | 0.875rem | Helferklasse für kleine Schrift. |
### Farbrollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| @global-color | #666 | Standardtext. |
| @global-emphasis-color | #333 | Kräftigere Schrift und Überschriften. |
| @global-muted-color | #999 | Standardfarbe für zurückhaltenden Text; in der Vorschau für Metadaten mit #65717a überschrieben. |
| @global-link-color | #1e87f0 | Standardlinks. |
| @global-background | #fff | Standardhintergrund für Seite/Oberfläche. |
| @global-muted-background | #f8f8f8 | Dezente Kachel/Oberfläche. |
| @global-primary-background | #1e87f0 | Primäre Akzentfläche. |
| @global-secondary-background | #222 | Sekundäre dunkle Oberfläche. |
| @global-border | #e5e5e5 | Neutrale Rahmen. |
### Abstände und Steuerelemente

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| @global-margin | 20px | Standardmäßiger Außenabstandsrhythmus. |
| @global-small-margin | 10px | Kleiner Außenabstand. |
| @global-medium-margin | 40px | Mittlerer Außenabstand. |
| @global-large-margin | 70px | Großer Außenabstand. |
| @global-gutter | 30px | Standardmäßiger Raster-Innenabstand. |
| @global-small-gutter | 15px | Kleiner Raster-Innenabstand. |
| @global-medium-gutter | 40px | Mittlerer Raster-Innenabstand. |
| @global-control-height | 40px | Normale Höhe für Eingabefelder/Schaltflächen. |
| @global-control-small-height | 30px | Höhe kleiner Steuerelemente. |
| @global-control-large-height | 55px | Höhe großer Steuerelemente. |
### Responsive Bereiche

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| @breakpoint-small | 640px | @s-Breitenregeln beginnen. |
| @breakpoint-medium | 960px | @m-Breitenregeln beginnen; zweispaltiges Planer-Layout. |
| @breakpoint-large | 1200px | @l-Breitenregeln beginnen. |
| @breakpoint-xlarge | 1600px | @xl-Breitenregeln beginnen. |
### Ursprüngliche Workshop-Anpassungen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Heading | 42px; 34px below 640px | Explizite lokale Überschreibung von uk-heading-small. |
| Card padding | 28px; 20px below 640px | Explizite lokale kompakte Gestaltung. |
| Metadata color | #65717a | Dunklere lokale Metadaten auf hellen Oberflächen. |
| Focus outline | 3px solid #145ca5, offset 4px | Tastaturfokus für Tabs, Akkordeontitel und Schaltflächen ergänzt. |
## Vollständiger Leitfaden zum UIkit-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## UIkit-Designsystem: CSS-Klassen und attributgesteuertes Verhalten

### CSS-Klassen und attributgesteuertes Verhalten

> UIkit kombiniert ein CSS-Framework mit einer JavaScript-Komponentenebene. Eine uk-card-Klasse gestaltet eine Oberfläche; ein uk-switcher-Attribut initialisiert eine interaktive Komponente. Im Workshop-Beispiel ist der Unterschied sichtbar: Karten und Formularelemente lassen sich allein mit CSS darstellen, aber der Sitzungswechsel und das Aufklappen des Akkordeons sind auf das UIkit-JavaScript-Bundle angewiesen.

Die Vorschau lädt das tatsächlich kompilierte Stylesheet und die Runtime von Version 3.25.25 lokal. Die drei Sitzungen unterscheiden sich in Länge und Layout. Beim Wechsel wird daher das tatsächliche Verhalten der Inhalte sichtbar, statt nur eine Beschriftung in einer ansonsten identischen Karte zu ändern. Das Skript für den lokalen Teilnehmerplan ist von der Runtime von UIkit unabhängig und vollständig enthalten.

Unterstützende Spezifikation lesen

## UIkit-Designsystem: Less-Variablen und Laufzeit-Styling

### Less-Variablen und Laufzeit-Styling

Die Referenznamen, die mit @ beginnen, sind Less-Variablen. Sie werden beim Kompilieren aufgelöst; wenn Sie @global-primary-background in ein gewöhnliches Browser-Stylesheet einfügen, ändert sich dadurch kein Theme zur Laufzeit. Die Tabelle enthält geprüfte Werte aus dem installierten Quellcode, während die Vorschau das vorkompilierte Standard-CSS des Pakets verwendet.

Um ein gebrandetes UIkit-Theme zu erstellen, verwenden Sie den dokumentierten Less-Import- und Anpassungsprozess und kompilieren Sie es neu. Für gezielte Seitenanpassungen können Sie gewöhnliches CSS nach dem offiziellen Stylesheet auf eine Klasse anwenden. Dieses Beispiel nutzt den zweiten Ansatz für Schriftgröße des Titels, Karteninnenabstand und Metadatenfarbe. Es wird nicht behauptet, dass diese Überschreibungen neue offizielle UIkit-Design-Token sind.

Unterstützende Spezifikation lesen

## UIkit-Designsystem: Texthierarchie, Farben und Oberflächen

### Texthierarchie, Farben und Oberflächen

Die globale Standardschrift ist ein Systemschriftenstapel mit sechzehn Pixeln und einer Zeilenhöhe von 1.5. Der standardmäßige primäre Hintergrund ist #1e87f0, der sekundäre Hintergrund ist ein dunkler Neutralton und dezente Oberflächen haben die Farbe #f8f8f8. So hebt sich eine primäre Auswahlaktion von einer zurückhaltenderen Erklärungskachel ab. Die bereitgestellte Spezifikationstabelle enthält sowohl Text- als auch Oberflächenwerte und nicht bloß eine dekorative Vierfarbenpalette.

Der Workshop verwendet eine große, aber begrenzte Überschrift, eine kleine Programmbezeichnung und einen Titel in jeder Sitzungskarte. Metadaten werden lokal auf #65717a abgedunkelt. Die Vorbereitungskachel hat eine eigens gestaltete hellblaue Oberfläche mit gewöhnlichem dunklem Text. Es wird nicht automatisch von invertierten Farben ausgegangen: Ein dunkler Hintergrund erfordert die passende UIkit-Behandlung für invertierte Farben oder ausdrücklich darauf abgestimmte Textstile.

Unterstützende Spezifikation lesen

## UIkit-Designsystem: Sitzungsnavigation mit Inhalten verbinden

### Sitzungsnavigation mit Inhalten verbinden

Die Navigationsliste verwendet uk-switcher mit connect: #sessions und einer Fade-Animation. Die Inhaltsliste hat die Klasse uk-switcher und die dazugehörige ID. Die Reihenfolge der Liste legt die Zuordnung fest: Der erste Umschalter steuert das erste Inhaltselement. Wenn Sie eine Sitzung hinzufügen oder neu anordnen, müssen Sie daher beide Seiten gemeinsam aktualisieren. Der explizite connect-Selektor macht eine Platzierung als direkt benachbartes Element überflüssig.

Für die visuelle Gestaltung verwendet die Navigation uk-tab. UIkit verwaltet den Status des aktiven Elements und das zugehörige Verhalten für Barrierefreiheit. Der ursprüngliche Planstatus ist davon bewusst unabhängig: Beim Anzeigen einer anderen Sitzung wird sie nicht stillschweigend ausgewählt. Nur „Sitzung auswählen“ ändert die ausgewählte Bezeichnung und verschiebt den Fokus auf das Teilnehmerfeld.

1. Prototyping öffnen und die abweichenden Inhalte ansehen.

2. Diese Sitzung auswählen und die ausgewählte Bezeichnung unten prüfen.

3. Zu Systems clinic wechseln, ohne die Sitzung auszuwählen; im lokalen Plan bleibt weiterhin Prototyping stehen.

Unterstützende Spezifikation lesen

## UIkit-Designsystem: Responsive Breiten und Zuständigkeit für Innenabstände

### Responsive Breiten und Zuständigkeit für Innenabstände

Der Sitzungsinhalt verwendet uk-width-2-3@m und uk-width-1-3@m innerhalb von uk-grid. Am mittleren Breakpoint bei 960px werden Inhalt und Vorbereitungskachel horizontal nebeneinander angeordnet. Darunter stehen sie untereinander. Für Plan und Vorbereitungsabschnitte gelten am selben Breakpoint passende Regeln für halbe Breite, sodass die logische Reihenfolge des Quelltexts auf kleineren Bildschirmen erhalten bleibt.

Das Grid von UIkit verwendet eine über seine Grid-Klassen gesteuerte Logik für Abstände zwischen Spalten. Im Beispiel kommt uk-grid-medium für größere Bereiche und uk-grid-small im Header zum Einsatz. Füge den Grid-Kindelementen keine beliebigen Außenabstände hinzu und gehe dann davon aus, dass sich ihre Bruchteile weiterhin korrekt zu einer Gesamtbreite addieren. Der äußere Container und die Innenabstände sorgen für den Abstand zum Rand; lokale Anpassungen für Mobilgeräte verringern die Innenabstände der Karten und die Größe der Überschriften.

Unterstützende Spezifikation lesen

## Details zur Vorbereitung mit nativem Komponentenstatus im UIkit-Designsystem

### Vorbereitungsdetails mit nativem Komponentenstatus

Die Klasse uk-accordion-default stellt die standardmäßige Gestaltung bereit. Das Attribut uk-accordion setzt multiple: true, sodass beim Öffnen einer Antwort nicht automatisch die andere geschlossen wird. Jedes Element enthält ein uk-accordion-title- und ein uk-accordion-content-Element. Die Laufzeit steuert den erweiterten Zustand und die Sichtbarkeit des Inhalts; die CSS-Klassen allein stellen dieses Verhalten nicht bereit.

Die beiden Fragen beantworten unterschiedliche praktische Anliegen: Was sollte man mitbringen, und reserviert der lokale Planer einen Platz? Die ausdrückliche Formulierung der zweiten Antwort verhindert, dass die Benutzeroberfläche eine Transaktion mit einer externen Veranstaltung suggeriert. Diese Abgrenzung zeigt sich nicht nur im Akkordeoninhalt; auch die Bestätigung weist darauf hin, dass kein Platz reserviert wurde.

- Mit multiple: true können beide Antworten geöffnet bleiben.

- Titel und Inhalt müssen sich im selben Akkordeon-Element befinden.

- Die Tastatur-Fokusumrandung bleibt für jeden Titel sichtbar.

Unterstützende Spezifikation lesen

## Darstellung der Bibliothek und Anwendungsvalidierung im UIkit-Designsystem trennen

### Darstellung der Bibliothek und Anwendungsvalidierung trennen

Das Teilnehmendenfeld verwendet uk-input innerhalb von uk-form-controls sowie eine echte Beschriftung und einen erklärenden Text. Die erforderliche Browservalidierung verhindert das Absenden eines leeren Feldes. Die Anwendung prüft zusätzlich, ob das Feld nur Leerraum enthält, und setzt bei ungültigen Ereignissen uk-form-danger sowie aria-invalid, damit visueller und semantischer Zustand übereinstimmen. Beim Bearbeiten wird der veraltete Fehlerzustand zurückgesetzt.

Bei der Auswahl einer Sitzung wird die lokale Auswahl aktualisiert und das Namensfeld fokussiert. Beim Absenden wird eine Statusmeldung mit der teilnehmenden Person und der ausgewählten Sitzung ausgegeben. Der Text wird mit textContent eingefügt, sodass eingegebener Markup-Text nicht ausgeführt wird. Dies ist ein lokaler Planer ohne Backend; UIkit erfindet für das Formular keine Funktionen zur Registrierung, Speicherung oder Benachrichtigung.

Unterstützende Spezifikation lesen

## Im UIkit-Designsystem zuerst CSS, dann die Laufzeit und anschließend den Anwendungscode laden

### CSS, Runtime und anschließend den Anwendungscode laden

Installiere uikit@3.25.25 und kopiere das kompilierte CSS und JavaScript aus dist in lokale Assets. Lade das CSS vor der kleinen Layoutüberschreibung und uikit.min.js vor app.js. Beide Skripte können defer verwenden; dadurch bleibt ihre Quellreihenfolge nach dem Parsen erhalten. Das Body-Beispiel enthält alle Komponentenattribute und Inhalte.

Das Icon-Bundle ist hier optional, da die Seite kein uk-icon verwendet. Wenn du später Icons hinzufügst, lade die passende Icon-Laufzeit und versehe Bedienelemente, die nur aus einem Icon bestehen, mit aussagekräftigen Beschriftungen. Vermeide es, ein neueres JavaScript-Bundle mit einem älteren Stylesheet zu kombinieren, nur weil die Dateinamen übereinstimmen: Komponentenstruktur und Stile sollten aus demselben festgelegten Paket stammen.

Unterstützende Spezifikation lesen

## Die Verknüpfungen des Switchers im UIkit-Designsystem auch bei wachsenden Inhalten stabil halten

### Switcher-Verbindungen stabil halten, wenn Inhalte wachsen

Der Switcher ordnet Navigationselemente den Inhaltselementen anhand ihrer Reihenfolge zu. Für jede hinzugefügte Sitzung muss an derselben Position ein Element auf beiden Seiten ergänzt werden; connect: #sessions legt das Ziel ausdrücklich fest. Gib bei mehreren voneinander unabhängigen Switchern auf einer Seite jedem Ziel eine eindeutige ID und bewahre diese Zuordnung im Initialisierungsattribut.

Die ausgewählte Sitzung bleibt von der aktiven Ansicht getrennt. Das Ansehen einer anderen Sitzung sollte eine bereits im Planer getroffene Auswahl nicht unbemerkt überschreiben. Prüfe beim Hinzufügen längerer Ansichten das gemeinsam genutzte responsive Grid und den Akkordeoninhalt in der neu aktiven Ansicht. Wenn du nur das ursprüngliche Panel auf die richtige Größe bringst, können Layoutprobleme verborgen bleiben, bis die Person die Ansicht wechselt.

Unterstützende Spezifikation lesen

## Komponentenbeispiele im UIkit-Designsystem

### Workshop-Seite mit nativen UIkit-Attributen

Der Switcher ist mit #sessions verknüpft; das Akkordeon erlaubt mehrere geöffnete Bereiche; die Grid-Breiten greifen ab @m.

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

Code-Referenz

- Das Attribut uk-switcher initialisiert das Verhalten; die Klasse uk-switcher kennzeichnet den Inhaltscontainer.

- Für diese Zusammenstellung ist kein UIkit-Icon-Paket erforderlich.

### Ursprüngliches Verhalten des lokalen Plans

Sitzungsauswahl und Validierung sind Anwendungslogik, die neben den nativen UIkit-Interaktionen zum Einsatz kommt.

```
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.';});
```

Code-Referenz

- Bei der Auswahl einer Sitzung wird das Teilnehmendenfeld fokussiert.

- Es wird kein Buchungsdienst und kein Benachrichtigungsdienst aufgerufen.

### Ausdrückliche Anpassungen auf Bildschirmebene

Kleine Anpassungen von Abständen und Fokusdarstellung bei gleichzeitiger Beibehaltung der UIkit-Komponenten.

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

Code-Referenz

- Diese Überschreibungen sind keine offiziellen Standardwerte für Design-Token.

## UIkit-Designsystem-Agent einrichten

### Ausgangspunkt für die Implementierung

Speichere die bereitgestellten Bildschirmanpassungen als style.css und das Verhalten des lokalen Plans als app.js. UIkit übernimmt Switcher und Accordion. Für diese Zusammenstellung ist das Icon-Bundle nicht erforderlich. Der HTML-Wrapper enthält das vollständige Body-Markup; speichere die bereitgestellten Beispiele für Interaktionen und CSS unter den hier genannten Dateinamen.

```
<!-- npm install uikit@3.25.25
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>
```

### Ein Prompt für dein Projekt

```
Verwende UIkit 3.25.25, um den bereitgestellten Workshop-Planer zu erweitern. Behalte uk-switcher mit seiner expliziten Verknüpfung zu #sessions, die übereinstimmende Reihenfolge von Navigation und Inhalt, die responsiven Bruchteile von uk-grid und das native Akkordeon mit mehreren geöffneten Bereichen bei. Das Ansehen einer Sitzung muss von ihrer Auswahl getrennt bleiben. Bei der Auswahl wird das beschriftete Teilnehmendenfeld fokussiert; wird nur Leerraum eingegeben, müssen uk-form-danger und aria-invalid angezeigt werden. Die Statusmeldung sollte die ausgewählte Sitzung und die teilnehmende Person als lokalen Plan nennen, ohne zu behaupten, dass ein Platz gebucht wurde. Lade die passende UIkit-Laufzeit vor dem Anwendungsskript.
```

## Quellen und Umfang des UIkit-Designsystems

Referenz nativer Komponenten in UIkit 3.25.25. Less-Werte sind Definitionen zur Kompilierzeit; lokale Überschreibungen für Titel, Innenabstände und Fokusdarstellung sind eigens erstellt. Es wird keine Veranstaltungsbuchung durchgeführt.

- Less Theme-Variablen zur Kompilierzeit.

- Switcher Verknüpftes Navigations- und Inhaltsverhalten.

- Accordion Mehrfaches Öffnen und Aufbau.

- Raster Responsive Breiten und Abstände zwischen Spalten.

- Form Eingabe- und Validierungsklassen.

- Installation Laufzeit und Laden der Stile.

## Verwandte Ressourcen zum UIkit-Designsystem

### Vant

Ein mobiler Ablauf zur Adressauswahl mit Vant 4: echten CSS-Variablen, kontrollierter Adressidentität, Feldvalidierung, Theme-Wechsel und explizitem Speichern ausschließlich lokal.

### Vuestic UI

Ein natives Vuestic-Prüfblatt mit anhand der Quellen verifizierten hellen und dunklen Presets, barrierefreien Bewertungsbeschriftungen, Textfeldvalidierung, abgeleitetem Durchschnitt und einem gespeicherten Zustand, der die abgeschlossene Bewertung beibehält.

### Web Awesome

Untersuche die tatsächlichen semantischen Design-Token von Web Awesome anhand nativer benutzerdefinierter Elemente, einschließlich bereichsspezifischer Änderungen an Eckenradien und Abständen, der Gestaltung des Shadow DOM, des Auswahlverhaltens und der Eingabevalidierung.


- [Implementierungsreferenz](https://getuikit.com/docs/switcher)
- [Quelle](https://getuikit.com/docs/less)
- [Quelle](https://getuikit.com/docs/utility)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/javascript)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/less)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/card)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/switcher)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/grid)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/accordion)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/form)
- [Unterstützende Spezifikation lesen](https://getuikit.com/docs/installation)
- [Code-Referenz](https://getuikit.com/docs/switcher)
- [Code-Referenz](https://getuikit.com/docs/form)
- [Code-Referenz](https://getuikit.com/docs/utility)
- [Less Theme-Variablen zur Kompilierzeit.](https://getuikit.com/docs/less)
- [Switcher Verknüpftes Navigations- und Inhaltsverhalten.](https://getuikit.com/docs/switcher)
- [Accordion Mehrfaches Öffnen und Aufbau.](https://getuikit.com/docs/accordion)
- [Raster Responsive Breiten und Abstände zwischen Spalten.](https://getuikit.com/docs/grid)
- [Form Eingabe- und Validierungsklassen.](https://getuikit.com/docs/form)
- [Installation Laufzeit und Laden der Stile.](https://getuikit.com/docs/installation)
