Lernen Sie Braid anhand einer eigens entwickelten Jobsuche kennen: themenspezifische Variablen, vier echte Breakpoints, kontextbezogener Text, klar unterscheidbare Schaltflächenstile und ein kontrolliertes Feld, das die Validierung erklärt, statt die Aktion zu deaktivieren.
Eigenständige Offline-Interpretation von HTML zu Suchaufbau, Hierarchie und Breakpoint-Empfehlungen von Braid; ohne Live-Daten von SEEK oder Braid-Runtime. Farben in der Vorschau und konkrete Abstände sind Entscheidungen der Anwendung. · Implementierungsreferenz
02
Designreferenz für das SEEK Braid-Designsystem
Aktuelle Referenzen zu Braid-Komponenten und CSS. Benannte Größen werden anhand des ausgewählten Themes aufgelöst; hier werden weder ungeprüfte Pixel-Entsprechungen noch generierte Variablennamen für CSS erfunden. Das native Beispiel wählt ausdrücklich seekJobs aus.
SEEK Braid-Designsystem: Ein ausgewähltes Theme legt den visuellen Rahmen fest
Provider, Reset und generierte Variablen greifen ineinander
Braid unterstützt mehrere Themes der SEEK Group. Die Variable API enthält bereichsgebundene Ausdrücke für CSS. Namen wie vars.space.medium sind daher stabile Referenzen; die Kennung der generierten Custom Property sollte dagegen nicht manuell nachgebildet werden. Das Beispiel wählt seekJobs über BraidProvider aus.
Der Reset muss vor den übrigen Braid-Stilen importiert werden. In einer eingebetteten Anwendung kann styleBody={false} verhindern, dass der Provider Hintergrund oder Abstände des body-Elements der umgebenden Seite ändert. Dadurch entfällt jedoch nicht die Notwendigkeit des Theme-Kontexts.
Die vier tatsächlichen Breakpoint-Bedingungen beibehalten
Die gemeinsamen Schwellenwerte sind: mobile bei null, tablet bei 740px, desktop bei 992px und wide bei 1200px. Das native Beispiel ändert den Innenabstand am Tablet-Schwellenwert über ein responsives Prop-Objekt. Für dieselbe Änderung wird keine zusätzliche CSS-Media-Query angelegt.
Der mittlere Abstand eines Themes wird hier nicht als geschätzter Pixelwert angegeben. Box und Stack sind die erste Wahl für Abstände. vars ist die Low-Level-Ausweichmöglichkeit, wenn sich ein Layout nicht mit diesen Komponenten umsetzen lässt. Da die Werte Ausdrücke für CSS sind, müssen Multiplikationen in calc statt als numerische JavaScript-Berechnung erfolgen.
SEEK Braid-Designsystem: Textrollen übernehmen den Farbkontext ihrer Umgebung
Hierarchie und Semantik unabhängig voneinander wählen
Text bietet benannte Größen und Gewichtungen, während Heading die Titelhierarchie ausdrückt. Der Ort einer Stelle kann einen sekundären Ton erhalten, der Titel sollte jedoch deutlich genug hervorgehoben bleiben, um das Suchergebnis erkennbar zu machen. Wenn der Inhalt ein Absatz ist, kann Text mit component="p" als Absatz ausgegeben werden, statt ein HTML-Element nur wegen seiner standardmäßigen Darstellung zu wählen.
Braid passt Vordergrundtöne an dunkle Hintergrundkontexte an. Bei einem eigenen Bild oder Hintergrund vermittelt ein Box mit dem Kontext customDark diesen Zusammenhang. Bei einem manuell eingefärbten div kann nicht davon ausgegangen werden, dass es dasselbe kontextabhängige Verhalten bietet.
SEEK Braid-Designsystem: Der Ton vermittelt Bedeutung, die Variante bestimmt die Gewichtung
Die Markenakzentfarbe der Suchaktion vorbehalten
Im Beispiel werden für „Stellen suchen“ ausdrücklich die Variante solid und brandAccent kombiniert. „Suche löschen“ ist eine zurückhaltendere ghost-Aktion. formAccent kann wiederholbare Formularaktionen hervorheben; critical ist schwerwiegenden Folgen vorbehalten und sollte nicht dazu dienen, gewöhnliche Steuerelemente auffälliger zu machen.
Der Braid-Standard ist differenziert: Eine neutrale Schaltfläche ist standardmäßig ghost, sofern nichts anderes angegeben ist. Wird ein Ton gesetzt, ist die implizite Variante solid. Bei einer wichtigen Aktion sollten beide Props angegeben werden, damit die beabsichtigte Hierarchie klar bleibt. Actions übernimmt üblicherweise die gestapelte Darstellung auf Mobilgeräten und die horizontale Anordnung bei größeren Ansichten.
SEEK Braid-Designsystem: Eine hilfreiche Fehlermeldung ist besser als eine nicht verfügbare Schaltfläche
Vorgaben für gesteuerte Eingabefelder beachten
Der Callback onChange von TextField erhält das React-Eingabeereignis. Das Beispiel liest event.target.value aus, speichert den Entwurfstext und ändert die angewendete Suche erst, wenn die Person „Suchen“ auswählt. Ein Callback zum Löschen wird ebenfalls übergeben, da das Steuerelement den Anwendungsstatus nicht selbst zurücksetzen kann.
message erläutert einen Fehler bei einer leeren Suchanfrage, und der Ton critical legt den visuellen Status fest. description ist für dauerhaft sichtbaren Kontext vorgesehen. Eine gewöhnliche, deaktivierte Braid-Schaltfläche wird nicht unterstützt. Die Aktion bleibt verfügbar, damit Besuchende herausfinden können, wie sie fortfahren. Die Offline-Vorschau setzt zusätzlich den Fokus auf das ungültige Feld.
Änderungen im Status der Suchanfrage als Entwurf behalten.
Bei „Suchen“ eine nicht leere, getrimmte Suchanfrage verlangen.
Bei einem Fehler eine hilfreiche, kritische Meldung anzeigen.
Die Suchanfrage bei Erfolg anwenden und einen ausdrücklichen Status für leere Ergebnisse beibehalten.
SEEK Braid-Designsystem: Das Beispiel durchsucht ausschließlich Originaldaten
Lokale Ergebnisse sind keine Live-Stellenangebote
Die Vorschau enthält drei erfundene Stellenangebote mit Angaben zu Rolle, Ort und Arbeitsort. Bei der Suche werden Titel und Ort ohne Beachtung der Groß- und Kleinschreibung verglichen. Es werden keine Live-Stellen von SEEK abgerufen, und die Ergebnisse sind als Beispiele gekennzeichnet.
Wenn Entwurfstext und angewandte Ergebnisse getrennt bleiben, lässt sich die Interaktion nachvollziehen: Änderungen an einer Rolle ersetzen die aktuellen Ergebnisse nicht unbemerkt, bevor auf „Suchen“ geklickt wird. „Suche löschen“ setzt beide Werte zurück. Gibt es für eine Ergebnisliste keine Treffer, wird das ausdrücklich angezeigt; die Suchsteuerelemente bleiben zugänglich.
Zeige nach dem Anwenden einer Suchanfrage die Anzahl der Ergebnisse an.
Mache die zuletzt angewandte Suchanfrage während der Bearbeitung verständlich.
Füge Beispiel-Listen keine vorgetäuschte „Anwenden“-Aktion hinzu.
Verwende für das SEEK Braid-Designsystem einen Build, der Braid-Stile extrahiert
Die Installation eines Pakets ist nur ein Teil der Einrichtung
Die offizielle Einrichtung ist für sku optimiert. Die Vanilla-Extract-Stile von Braid benötigen eine Build-Integration in einem benutzerdefinierten Bundler; außerdem müssen Reset und ausgewähltes Theme in der dokumentierten Reihenfolge in die Anwendung eingebunden werden. Der bereitgestellte Code ist ein vollständiger Einstiegspunkt für ein bestehendes, kompatibles sku-Projekt. Er behauptet nicht, dass Braid über ein beliebiges Script-Tag ausgeführt werden kann.
Braid führt Assertions während der Entwicklung und umgebungsabhängige Warnungen aus. Die offizielle Build-Anleitung beschreibt, wie Assertions entfernt und die Umgebung für die Produktion zur Build-Zeit ersetzt werden. Berücksichtigen Sie dies im Implementierungsablauf; das Offline-Beispiel HTML hat keine Abhängigkeit von einem solchen Paket-Build.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige Offline-HTML-Interpretation der Braid-Anleitungen zu Suchkomposition, Hierarchie und Breakpoints; keine Live-Daten von SEEK und keine Braid-Laufzeitumgebung. Vorschaufarben und tatsächliche Abstände sind Anwendungsentscheidungen.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Braid sample job search interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f5f5;color:#222;font:16px/1.5 system-ui,sans-serif}header{background:white;padding:16px 32px;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between}header strong{color:#0d3880;font-size:20px}header span{font-size:14px;color:#666}.hero{background:#0d3880;color:white;padding:32px}.hero-inner{max-width:980px;margin:auto}h1{font-size:32px;line-height:1.2;margin:0 0 24px}form{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:end}label{display:block;font-weight:600;margin-bottom:8px}input{height:48px;border:1px solid #aaa;border-radius:4px;padding:10px 12px;font:inherit;width:100%;min-width:0;color:#222}input[aria-invalid=true]{border:2px solid #c90040}button{height:48px;border:1px solid transparent;border-radius:4px;font:600 16px/1.2 system-ui;padding:0 24px;cursor:pointer}.search{background:#e60278;color:white}.clear{background:transparent;color:white;border-color:white}button:focus-visible,input:focus-visible{outline:3px solid #69d8ff;outline-offset:3px}.error{background:white;color:#b70040;padding:8px 12px;margin:16px 0 0;border-radius:4px}.error:empty{display:none}.help{font-size:14px;color:#e4eaf6;margin:16px 0 0}main{max-width:1044px;margin:32px auto;padding:0 32px}.results-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}h2{font-size:24px;line-height:1.3;margin:0 0 8px}.applied{font-size:14px;color:#555}article{display:grid;grid-template-columns:1fr 100px;gap:24px;padding:24px;background:white;border:1px solid #ddd;border-radius:4px;margin-bottom:16px}.company{font-size:14px;color:#555}.meta{margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}.meta span{background:#f0f4fb;padding:4px 8px;font-size:12px;border-radius:4px}article p{margin:0;color:#555;font-size:14px}.monogram{background:#f1e5f4;color:#673b78;height:72px;width:72px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:24px;justify-self:end}.monogram.blue{color:#0d3880;background:#e4efff}.monogram.green{color:#326342;background:#e8f4eb}.notice{background:white;border:1px solid #ddd;padding:24px}.boundary{font-size:12px;color:#666;margin:24px 0}@media(max-width:739px){header{padding:16px}header span{display:none}.hero{padding:24px 16px}h1{font-size:28px}form{grid-template-columns:1fr;gap:12px}form button{width:100%}main{padding:0 16px;margin:24px auto}article{padding:20px;grid-template-columns:1fr 48px;gap:12px}.monogram{height:48px;width:48px;font-size:18px}article h2{font-size:20px}.results-head{display:block}}</style><header><strong>Possibilities</strong><span>Original job-search specimen</span></header><section class="hero"><div class="hero-inner"><h1>Find your next possibility.</h1><form novalidate><div><label for="query">Role or city</label><input id="query" type="search" placeholder="Try designer or Melbourne" aria-describedby="error help"></div><button class="search" type="submit">Search jobs</button><button class="clear" type="button" id="clear">Clear search</button></form><div id="error" class="error" role="alert"></div><p id="help" class="help">Search three original sample roles. These are not live vacancies.</p></div></section><main><div class="results-head"><div><h2 id="count">3 sample results</h2><div class="applied" id="applied">Showing all sample roles</div></div></div><div id="results"></div><p class="boundary">Independent HTML interpretation of Braid’s search composition and responsive guidance. Original content and application palette; no SEEK data, account or application service is connected.</p></main><script>const jobs=[{title:'Product designer',city:'Melbourne',company:'North Studio',type:'Full time',mode:'Hybrid',initial:'NS',color:'',description:'Shape useful experiences with a small multidisciplinary product team.'},{title:'Design systems engineer',city:'Sydney',company:'Harbour Works',type:'Full time',mode:'Flexible',initial:'HW',color:'blue',description:'Build accessible components and improve the way teams deliver interfaces.'},{title:'UX researcher',city:'Melbourne',company:'Fern Collective',type:'Contract',mode:'On site',initial:'FC',color:'green',description:'Turn thoughtful field research into clear product opportunities.'}];const input=document.querySelector('#query'),error=document.querySelector('#error');let applied='';function render(){let matches=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(applied.toLowerCase()));document.querySelector('#count').textContent=matches.length+' sample '+(matches.length===1?'result':'results');document.querySelector('#applied').textContent=applied?'Applied search: '+applied:'Showing all sample roles';document.querySelector('#results').innerHTML=matches.length?matches.map(j=>`<article><div><h2>${j.title}</h2><div class="company">${j.company} · ${j.city}</div><div class="meta"><span>${j.type}</span><span>${j.mode}</span><span>Sample listing</span></div><p>${j.description}</p></div><div class="monogram ${j.color}" aria-hidden="true">${j.initial}</div></article>`).join(''):'<div class="notice">No sample roles match. Try another role or city, or clear your search.</div>'}document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!input.value.trim()){error.textContent='Enter a role or city.';input.setAttribute('aria-invalid','true');input.focus();return}error.textContent='';input.removeAttribute('aria-invalid');applied=input.value.trim();render()};input.oninput=()=>{error.textContent='';input.removeAttribute('aria-invalid')};document.querySelector('#clear').onclick=()=>{input.value='';applied='';error.textContent='';input.removeAttribute('aria-invalid');render();input.focus()};render();</script></html>
Die Suche gilt für die enthaltenen fiktiven Stellen. Der native Braid-Einstiegspunkt erfordert den Style-Extraction-Build und das ausgewählte seekJobs-Theme.
Suchentwurf, angewendete Suche und explizite Wiederherstellung
Ein kontrolliertes TextField validiert eine lokale Suchanfrage, Actions gruppiert zwei unterschiedliche Schaltflächenvarianten und Card/Stack/Heading/Text stellen die eigens erstellten Ergebnisse dar.
jsx
// Entry module in an existing sku application:
// npm install braid-design-system
import 'braid-design-system/reset'; // Keep this first.
import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import seekJobsTheme from 'braid-design-system/themes/seekJobs';
import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system';
const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}];
function JobSearch(){
const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState('');
const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase()));
function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());}
function clear(){setDraft('');setQuery('');setError('');}
return <Box component="main" padding={{mobile:'medium',tablet:'xlarge'}}>
<Stack space="large">
<Heading level="2">Find your next possibility</Heading>
<TextField id="job-query" label="Role or city" value={draft}
onChange={event=>{setDraft(event.target.value);setError('');}}
onClear={()=>setDraft('')} clearLabel="Clear role or city"
tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/>
<Actions><Button tone="brandAccent" variant="solid" onClick={search}>Search jobs</Button>
<Button variant="ghost" onClick={clear}>Clear search</Button></Actions>
<Text>{results.length} sample results</Text>
{results.map(job=><Card key={job.id}><Stack space="small"><Heading level="3">{job.title}</Heading><Text tone="secondary">{job.city}</Text></Stack></Card>)}
{!results.length&&<Text>No sample roles match. Try a different title or city.</Text>}
<Text size="small" tone="secondary">These are sample listings, not live vacancies.</Text>
</Stack>
</Box>;
}
createRoot(document.getElementById('root')).render(<BraidProvider theme={seekJobsTheme}><JobSearch/></BraidProvider>);
onChange erhält das Eingabeereignis, keinen einfachen Zeichenkettenwert.
Bei leerer Suchanfrage bleibt Search verfügbar und erklärt, was eingegeben werden soll.
Mit „Suche löschen“ werden sowohl der eingegebene Text als auch die angewendeten Ergebnisse zurückgesetzt.
04
SEEK Braid Einrichtung des Design-System-Agenten
Ausgangspunkt für die Implementierung
Vollständiger Anwendungseinstiegspunkt für einen vorhandenen sku-Build, der laut offizieller Einrichtung direkt unterstützt wird. Benutzerdefinierte Bundler erfordern die Integration von Vanilla Extract. Der Reset-Import muss an erster Stelle stehen. Die Offline-Vorschau behauptet nicht, dass das native Paket kompiliert wird.
jsx
// Entry module in an existing sku application:
// npm install braid-design-system
import 'braid-design-system/reset'; // Keep this first.
import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import seekJobsTheme from 'braid-design-system/themes/seekJobs';
import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system';
const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}];
function JobSearch(){
const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState('');
const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase()));
function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());}
function clear(){setDraft('');setQuery('');setError('');}
return <Box component="main" padding={{mobile:'medium',tablet:'xlarge'}}>
<Stack space="large">
<Heading level="2">Find your next possibility</Heading>
<TextField id="job-query" label="Role or city" value={draft}
onChange={event=>{setDraft(event.target.value);setError('');}}
onClear={()=>setDraft('')} clearLabel="Clear role or city"
tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/>
<Actions><Button tone="brandAccent" variant="solid" onClick={search}>Search jobs</Button>
<Button variant="ghost" onClick={clear}>Clear search</Button></Actions>
<Text>{results.length} sample results</Text>
{results.map(job=><Card key={job.id}><Stack space="small"><Heading level="3">{job.title}</Heading><Text tone="secondary">{job.city}</Text></Stack></Card>)}
{!results.length&&<Text>No sample roles match. Try a different title or city.</Text>}
<Text size="small" tone="secondary">These are sample listings, not live vacancies.</Text>
</Stack>
</Box>;
}
createRoot(document.getElementById('root')).render(<BraidProvider theme={seekJobsTheme}><JobSearch/></BraidProvider>);
Ein Prompt für dein Projekt
Agenten-Prompt
Stellen Sie eine Braid-Suche mit dem seekJobs-Theme zusammen. Setzen Sie den Reset an den Anfang und verwenden Sie den Ereignisstatus von TextField sowie Actions. Verwenden Sie brandAccent solid ausdrücklich für die einzelne hervorgehobene Suche und einen neutralen Ghost-Reset. Lassen Sie auch leere Suchversuche zu und erklären Sie den Fehler; deaktivieren Sie niemals den gewöhnlichen Button, um die Validierung zu verbergen.
05
SEEK Braid Design-System-Quellen und Geltungsbereich
Unabhängige Referenz für OpenDesign. Eigene Beispielanzeigen, keine aktuellen Stellenangebote und keine Bewerbungsmöglichkeit. Benannte Braid-Variablen werden über das ausgewählte Theme aufgelöst.
