Pure CSS ist ein modulares Stylesheet für Grids, Formulare, Schaltflächen, Menüs und Tabellen – ohne Widget-Laufzeitumgebung. Dieser Leitfaden zeigt anhand eines filterbaren Gerätekatalogs mit explizit implementierter Sortierung und Auswahl, wie das optionale responsive Grid-Modul mit nativen semantischen Elementen zusammenspielt.
Offizielle Module für Pure CSS 3.1.0 und das responsive Raster; originales Vanilla-JavaScript. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
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.
Wähle ein verfügbares Aufnahmegerät oder eine Kamera aus.
Filtere nach einer anderen Kategorie und prüfe, ob der ausgewählte Eintrag in der Prüfliste bleibt.
Mit „Auswahl aufheben“ lassen sich alle ausgewählten IDs unabhängig von den Filtern entfernen.
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.
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.
Pure CSS Designsystem Den gesamten Katalog installieren und reproduzieren
Den gesamten Katalog installieren und reproduzieren
Installiere [email protected], 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.
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.
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.
javascript
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();
Diese Werte sind eigene Entscheidungen für die Anwendung und keine offiziellen Pure-Token.
04
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.
html
<!-- npm install [email protected]
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
Agenten-Prompt
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.
05
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.
