# Pure CSS-Designsystem

## Vorschau der Benutzeroberfläche des Pure CSS-Designsystems

Sechs Sets filtern, nach Namen sortieren, verfügbare Elemente auswählen und die Auswahl bei geänderten Filtern beibehalten.

## Designreferenz für das Pure CSS-Designsystem

Kompilierte Paketmodule von Pure CSS 3.1.0. Dies sind konkrete Selektorwerte, keine benannten Design-Token API: Pure veröffentlicht kein Theme mit semantischen CSS-Variablen wie Chakra oder Pico. Die Anwendung ergänzt eigene Typografie, Layoutabstände und eine deutlichere Fokusumrandung.

### Offizielle Werte für Schaltflächen und Formulare

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | Passt sich an die geerbte Schriftgröße der Schaltfläche an. |
| .pure-button radius | 2px | Standard-Eckenform der Schaltfläche. |
| .pure-button background | #E6E6E6 | Neutrale Flächenfarbe der Schaltfläche. |
| .pure-button-primary background | rgb(0, 120, 231) | Optionale Primär- oder Auswahlfarbe. |
| .pure-button disabled opacity | 0.40 | Verwenden Sie für das Verhalten zusätzlich das Attribut disabled. |
| .pure-form input padding | 0.5em 0.6em | Üblicher Innenabstand von Texteingabefeldern. |
| .pure-form input border | 1px solid #ccc | Standardumrandung des Eingabefelds. |
| .pure-form input radius | 4px | Die Form des Eingabefelds unterscheidet sich vom Eckenradius der Schaltfläche. |
### Offizielle Tabellenwerte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Äußere Umrandung der Tabelle. |
| .pure-table td / th padding | 0.5em 1em | Gut lesbare Abstände der Zellen. |
| .pure-table thead background | #e0e0e0 | Hintergrundfläche der Spaltenüberschrift. |
| .pure-table-striped odd-row fill | #f2f2f2 | Optionale abwechselnde Zeilenfärbung; dieses Beispiel verwendet horizontale Linien. |
| .pure-table-horizontal | Bottom borders only | Erhält die Zeilenstruktur ohne vertikale Trennlinien. |
### Grenzen des responsiven Rasters

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| sm | 35.5em | 568px bei einer Browser-Standardschriftgröße von 16px. |
| md | 48em | 768px; die Seitenleiste nimmt ein Viertel der Breite ein. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 1920px im installierten responsiven Raster von 3.1.0. |
### Ursprüngliche Kataloggestaltung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Explizit festgelegte Typografie der Anwendung. |
| Page heading | 34px / 1.15; 28px on mobile | Ursprüngliche redaktionelle Hierarchie. |
| Section heading | 18px / 1.3 | Ursprüngliche Seitenleiste und Auswahltitel. |
| Content gutters | 24px desktop, 16px mobile | Ursprünglicher Außenabstand. |
| Focus outline | 3px solid #0078e7; offset 3px | Verbesserung der Anwendung gegenüber dem standardmäßigen Fokusverlauf der Schaltfläche. |
| Table minimum width | 540px | Erhält die Bedeutung der Spalten in einem lokal scrollbaren Bereich. |
## Vollständiger Leitfaden zum Pure CSS-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.

## Pure CSS-Designsystem: Ein kleiner Satz CSS-Module

### Ein kleiner Satz CSS-Module

> Pure bietet Basis-Normalisierung, Raster, Schaltflächen, Formulare, Menüs und Tabellen. Dieser Katalog verwendet das kompilierte Rollup des Pakets und eine separate Datei für das responsive Raster. Er bindet weder ein JavaScript-Framework noch einen Provider oder eine Widget-Laufzeitumgebung ein. Filtern, Sortieren und Auswählen sind Anwendungscode, der oben vollständig gezeigt wird.

Dieser Unterschied ist beim Vergleich von Pure mit einer vollständigen Komponentenplattform wichtig. Eine pure-table-Klasse stellt Zellformatierungen bereit, aber keine Sortierung, Paginierung, Virtualisierung oder Auswahlsemantik. Eine pure-button-Klasse ist eine visuelle Klasse, die sich auf ein natives Schaltflächenelement anwenden lässt. Das Beispiel behält die semantischen Elemente bei, statt zu erwarten, dass Klassennamen das Verhalten erzeugen.

Unterstützende Spezifikation lesen

## Pure CSS-Designsystem: konkrete CSS-Werte statt eines erfundenen Token-Systems

### Konkrete CSS-Werte statt eines erfundenen Token-Systems

Die kompilierten Schaltflächenstile von Pure verwenden eine neutrale Füllfarbe von #E6E6E6, einen Radius von zwei Pixeln und einen em-basierten Innenabstand. Die optionale primäre Schaltfläche ist rgb(0,120,231) mit weißem Text. Formulareingaben haben einen Radius von vier Pixeln und einen eigenen Innenabstand. Die Systemreferenz zeigt diese tatsächlichen Unterschiede, anstatt sie in eine fiktive gemeinsame Radius-Skala zu vereinheitlichen.

Dieser Katalog ergänzt eine bewusst zurückhaltende Farbpalette der Anwendung: dunkelblaugrauer Text, neutrale Trennlinien und eine blasse Zusammenfassung der Auswahl. Diese Farben sind keine offiziellen Markenfarben von Pure. Es gibt keinen Dunkelmodus-Schalter, da diese Beispielversion keine vollständige alternative Anwendungspalette implementiert. Ein Theme-Wechsel müsste Formulare, Tabellenüberschriften, Rahmen, Text und Fokuszustände gleichermaßen berücksichtigen.

Unterstützende Spezifikation lesen

## Pure CSS-Designsystem: Typografie und Abstände sind Sache der Anwendung

### Typografie und Abstände sind Sache der Anwendung

Die ursprüngliche Seitenebene legt Arial/Helvetica mit einer Schriftgröße von sechzehn Pixeln und einem Zeilenabstand von 1.5 fest, dazu eine Überschrift mit 34px und Abschnittstitel mit 18px. Auf schmalen Bildschirmen wird die Überschrift auf 28px verkleinert. Dies sind konkrete Entscheidungen und kein Anspruch, dass Pure eine redaktionelle Maßstabsskala vorgibt. Alle zur Reproduktion des Layouts erforderlichen Werte sind im CSS-Beispiel enthalten.

Das Raster von Pure passt die Textdarstellung und den Zeichenabstand des Rastercontainers an, um mit Inline-Einheiten umzugehen. Die Regeln für die Einheiten stellen das normale Textverhalten wieder her. Der Katalog weist den Rastereinheiten außerdem die Schriftfamilie zu, damit sich die Schrift in der Seitenleiste und den Ergebnissen nicht unerwartet ändert. Die Innenabstände der Anwendung liegen innerhalb der Einheiten. Zusammen mit dem Box-Sizing border-box bleiben so die Bruchteilbreiten erhalten.

Unterstützende Spezifikation lesen

## Pure CSS-Designsystem: Für Bruchteilraster wird das responsive Modul benötigt

### Für responsive Bruchteilraster wird das responsive Modul benötigt

Die Seitenleiste kombiniert pure-u-1 mit pure-u-md-1-4; die Ergebnisse kombinieren pure-u-1 mit pure-u-md-3-4. Anfänglich sind beide Elemente über die volle Breite angeordnet. An der md-Mediengrenze von 48em nehmen sie ein Viertel beziehungsweise drei Viertel der Breite ein. So erhält der Filter einen gut lesbaren, festen Breitenanteil – ohne eigene JavaScript-Layoutberechnungen.

Das Haupt-Rollup pure-min.css enthält nicht die Media-Query-Klassen für das responsive Raster. Ohne grids-responsive-min.css bleiben die md-Modifikatoren wirkungslos. Im Setup werden beide Dateien explizit eingebunden. Auf schmalen Bildschirmen steht die Seitenleiste vor der Tabelle; der Ergebnisrahmen entfällt, sodass eine durchgehende Lesereihenfolge entsteht.

Unterstützende Spezifikation lesen

## Pure CSS Beim Designsystem sind Filtern und Auswählen getrennte Vorgänge

### Filtern und Auswählen sind getrennte Vorgänge

Das untereinander angeordnete Formular enthält ein beschriftetes Suchfeld, ein Kategorie-Auswahlfeld und ein Kontrollkästchen für die Verfügbarkeit. Bei jeder Änderung an einem Eingabefeld werden die sichtbaren Zeilen anhand aller drei Bedingungen neu gerendert. Beim Absenden des Formulars wird die Standardaktion verhindert, sodass die Eingabetaste im Suchfeld nicht von der Seite wegführt. „Filter zurücksetzen“ ruft die native Reset-Funktion auf und rendert die Ansicht neu, nachdem der Browser die Standardwerte wiederhergestellt hat.

Die Auswahl wird in einem Set mit stabilen Kit-IDs gespeichert. Wird ein ausgewählter Eintrag durch einen Filter ausgeblendet, bleibt er in diesem Set. Die stets sichtbare Prüfliste ist daher maßgeblich dafür, was ausgewählt ist. Dieses Verhalten wird neben der Anzahl der ausgewählten Einträge erklärt; andernfalls könnte man ausgefilterte Zeilen fälschlich für abgewählte Ausrüstung halten.

1. Wähle ein verfügbares Aufnahmegerät oder eine Kamera aus.

2. Filtere nach einer anderen Kategorie und prüfe, ob der ausgewählte Eintrag in der Prüfliste bleibt.

3. Mit „Auswahl aufheben“ lassen sich alle ausgewählten IDs unabhängig von den Filtern entfernen.

Unterstützende Spezifikation lesen

## Pure CSS Beim Designsystem bleibt die Tabellenbedeutung auch auf schmalen Bildschirmen erhalten

### Tabellenbedeutung auf schmalen Bildschirmen erhalten

Die Tabelle verwendet caption, thead und tbody sowie scope-Attribute für Spaltenüberschriften. Die Überschrift „Ausrüstung“ enthält eine native Schaltfläche, mit der sich die Reihenfolge der Namen umkehren lässt. Das übergeordnete th erhält aria-sort=ascending oder descending passend zum sichtbaren Pfeil. Beim Sortieren behalten alle Zeilen dieselbe Spaltenstruktur.

Eine Mindestbreite von 540px erhält die Bedeutung der Spalten „Auswählen“, „Ausrüstung“, „Kategorie“ und „Verfügbarkeit“. Auf schmalen Bildschirmen wird nur der beschriftete Tabellenbereich horizontal scrollbar. Dieser Bereich ist per Tastatur fokussierbar und zeigt eine sichtbare Fokusumrandung. Die Seite selbst wird nicht breiter. Das ist eine bewusste Gestaltung für Datentabellen, statt jede Zeile in eine optisch unzusammenhängende Karte zu verwandeln.

Unterstützende Spezifikation lesen

## Pure CSS Designsystem Deaktivierte, leere und fokussierte Zustände brauchen ein tatsächliches Verhalten

### Deaktivierte, leere und fokussierte Zustände brauchen ein tatsächliches Verhalten

Ausgeliehene Einträge bleiben in der Liste, um ihre Verfügbarkeit zu erläutern, können aber nicht ausgewählt werden: Ihre nativen Kontrollkästchen sind deaktiviert. Auch „Auswahl aufheben“ ist deaktiviert, wenn das Set leer ist. Die Deckkraftregel von Pure vermittelt den deaktivierten Zustand optisch; die Aktivierung verhindert jedoch das Attribut HTML.

Wenn ein Filter keine Ergebnisse liefert, wird eine passende Leermeldung angezeigt und die Tabellenüberschriften bleiben erhalten. Die Ergebnisanzahl wird in einem höflichen Statusbereich ausgegeben. Das ursprüngliche Stylesheet setzt eine deutliche Fokusumrandung für :focus-visible, da die Standard-Fokusdarstellung von Pure für Schaltflächen einen Farbverlauf verwendet und die Umrandung zurücksetzt. Bei diesem interaktiven Werkzeug ist ein klarerer Tastaturindikator hilfreich.

- Deaktivierte Kontrollkästchen erklären, welche Kits nicht verfügbar sind, ohne ihre Zeilen auszublenden.

- Der Leerzustand erklärt, wie sich die Ansicht durch Zurücksetzen der Filter wiederherstellen lässt.

- Fokusumrandungen markieren Schaltflächen, Eingabefelder, Auswahlfelder und den Scrollbereich.

Unterstützende Spezifikation lesen

## Pure CSS Designsystem Den gesamten Katalog installieren und reproduzieren

### Den gesamten Katalog installieren und reproduzieren

Installiere purecss@3.1.0, kopiere pure-min.css und grids-responsive-min.css in das lokale Verzeichnis für Assets und binde sie in dieser Reihenfolge vor style.css ein. Der vollständige Body, das Anwendungsskript und CSS sind oben angegeben. Ein statischer Server kann die resultierenden Dateien bereitstellen; der Katalog selbst benötigt keine Build-Laufzeitumgebung.

Die Paketmodule sind auch separat verfügbar, falls eine kleinere Bundle-Größe eine gezieltere Auswahl erfordert. Achte beim Reduzieren von CSS darauf, dass die Abhängigkeiten von Basis und Raster zusammenpassen. Kopiere nicht nur ein Tabellen-Stylesheet und gehe dann davon aus, dass Formular- oder Schaltflächenklassen weiterhin gestaltet werden. Das aktuelle Beispiel setzt auf ein reproduzierbares, vollständiges Setup statt auf ein unerklärtes Teil-Bundle.

Unterstützende Spezifikation lesen

## Pure CSS Designsystem CSS-Module auswählen, ohne ihre Abhängigkeiten zu verlieren

### CSS-Module auswählen, ohne ihre Abhängigkeiten zu verlieren

Das kompilierte Rollup gestaltet die Schaltflächen, Formulare und Tabelle des Katalogs; grids-responsive-min.css liefert die an Breakpoints gebundenen Bruchteile. Das Entfernen der responsiven Datei führt zu keinem Fehler: Die md-Klassen ändern dann einfach nicht mehr das Layout. Prüfe beim Reduzieren der importierten Module, wie sich die Spalten beim Verkleinern des Ansichtsbereichs verhalten.

Rastereinheiten stellen außerdem das Textverhalten wieder her, das der Rastercontainer für sein Inline-Layout anpasst. Weise den Einheiten weiterhin die Anwendungsschrift zu und füge Innenabstände mit box-sizing: border-box hinzu. Falls der Katalog später eine Seitennavigation erhält, muss die Auswahl anhand stabiler IDs im Anwendungsstatus erhalten bleiben; weder Tabellen-CSS noch ein Rasterbruchteil implementieren dieses Verhalten.

Unterstützende Spezifikation lesen

## Pure CSS Designsystem Komponentenbeispiele

### Katalog-Markup mit Pure-Modulen

Responsives Viertel-Dreiviertel-Layout, gestapeltes Formular und Tabelle mit horizontalen Trennlinien.

```
<main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
```

Code-Referenz

- grids-responsive-min.css wird separat eingebunden.

- Bei ausgeliehenen Einträgen werden Kontrollkästchen deaktiviert, nicht nur optisch abgeschwächt.

### Filter-, Sortier- und Auswahlstatus

Das ursprüngliche Verhalten rendert sechs feste Beispieldatensätze und verwaltet die Auswahl anhand stabiler IDs.

```
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
```

Code-Referenz

- Durch das Filtern werden ausgewählte IDs nicht unbemerkt verworfen.

- Die Sucheingabe des Nutzers wird niemals zu HTML.

### Anwendungstypografie und Fokus-CSS

Eine vollständige Gestaltungsebene, die die bewusst minimal gehaltene Bibliothek ergänzt.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

Code-Referenz

- Diese Werte sind eigene Entscheidungen für die Anwendung und keine offiziellen Pure-Token.

## Pure CSS Einrichtung des KI-Agenten für das Designsystem

### Ausgangspunkt für die Implementierung

Speichere die Beispiele CSS und JavaScript als style.css und app.js. Die Media-Klassen für das responsive Raster befinden sich in einer separaten Datei. Die Offline-Vorschau bindet beide offiziellen Stylesheets und den ursprünglichen Anwendungscode inline ein. Der HTML-Wrapper enthält das vollständige Body-Markup; speichere die hier angegebenen Interaktions- und CSS-Beispiele unter den genannten Dateinamen.

```
<!-- npm install purecss@3.1.0
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
```

### Ein Prompt für dein Projekt

```
Erstellen Sie die Oberfläche auf Grundlage des bereitgestellten Gerätekatalogs Pure CSS 3.1.0 und laden Sie pure-min.css sowie grids-responsive-min.css. Behalten Sie die responsiven Rastereinheiten für Viertel und Dreiviertel, beschriftete Filter, eine semantische sortierbare Tabelle und ihren begrenzten horizontalen Scrollbereich bei. Kombinieren Sie Suche, Kategorie- und Verfügbarkeitsfilter, ohne ausgewählte IDs zu löschen. Deaktivieren Sie die Kontrollkästchen für ausgeliehene Geräte, aktualisieren Sie aria-sort beim Umkehren der Sortierung der Spalte „Ausstattung“ und behalten Sie ausgewählte Elemente in der Prüfliste, wenn sie durch Filter ausgeblendet werden. Die Auswahl bleibt lokal und darf nicht als Reservierung ausgegeben werden.
```

## Quellen und Geltungsbereich des Pure CSS-Designsystems

Pure CSS 3.1.0. Die Selektorwerte entsprechen den offiziellen Paketwerten; Typografie, Farben, Abstände und Anwendungsverhalten des Katalogs sind eigene Entwicklungen. Es werden keine Reservierungen vorgenommen.

- Offizielles Repository Modulgrenzen, Build-Dateien, Einbindung des responsiven Rasters und Lizenz.

- Rasterimplementierung Umgang mit Rastercontainern und Einheitenbeschriftungen.

- Paketquelle Quelle auf Selektorebene zur Überprüfung der installierten Module in Version 3.1.0.

## Weiterführende Ressourcen zum Pure CSS-Designsystem

### Quasar

Ein nativer, mit Quasar geführter Workflow mit echten Marken- und Abstandsangaben, QForm-Validierung, einem dreistufigen Briefing-Ersteller, Auswahlmöglichkeiten für das Format per Optionsfeld und einer Live-Agenda für 45 Minuten.

### React Native Elements

Erstelle mit React Native Elements 5.0.0 einen vollständigen Composer für Fokuspläne: mit echten Theme-Rollen, gesteuerten Eingaben und Auswahlen, Validierung, lokaler Bestätigung und einem getesteten Web-Build.

### React Suite

Ein nativer React Suite-Prüfungskalender mit verifizierten Variablen aus v6 von CSS, Markierungen für Datumszellen, einer Agenda für den ausgewählten Tag, modaler Validierung und klaren Regeln für die lokale Terminplanung.


- [Implementierungsreferenz](https://github.com/pure-css/pure)
- [Quelle](https://github.com/pure-css/pure)
- [Unterstützende Spezifikation lesen](https://github.com/pure-css/pure)
- [Code-Referenz](https://github.com/pure-css/pure)
- [Offizielles Repository Modulgrenzen, Build-Dateien, Einbindung des responsiven Rasters und Lizenz.](https://github.com/pure-css/pure)
- [Rasterimplementierung Umgang mit Rastercontainern und Einheitenbeschriftungen.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Paketquelle Quelle auf Selektorebene zur Überprüfung der installierten Module in Version 3.1.0.](https://github.com/pure-css/pure/tree/main/src)