UIkit kombiniert ein CSS-Framework, Less-Anpassungen und attributgesteuerte JavaScript-Komponenten. Der Switcher, das Accordion und das responsive Raster greifen im folgenden Workshop-Planer ineinander. So wird deutlich, wo das Verhalten nativer Komponenten endet und der Auswahlzustand der Anwendung beginnt.
Native Version von UIkit 3.25.25 CSS und JavaScript; ursprüngliche Sitzungsinhalte und Planstatus. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
Prototyping öffnen und die abweichenden Inhalte ansehen.
Diese Sitzung auswählen und die ausgewählte Bezeichnung unten prüfen.
Zu Systems clinic wechseln, ohne die Sitzung auszuwählen; im lokalen Plan bleibt weiterhin Prototyping stehen.
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.
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.
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.
Im UIkit-Designsystem zuerst CSS, dann die Laufzeit und anschließend den Anwendungscode laden
CSS, Runtime und anschließend den Anwendungscode laden
Installiere [email protected] 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.
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.
Der Switcher ist mit #sessions verknüpft; das Akkordeon erlaubt mehrere geöffnete Bereiche; die Grid-Breiten greifen ab @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>
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.
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.';});
Diese Überschreibungen sind keine offiziellen Standardwerte für Design-Token.
04
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.
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>
Ein Prompt für dein Projekt
Agenten-Prompt
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.
05
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.
