Rammeverksuavhengig designsystem

Komponentene er CSS-klasser og web components, altså ting nettleseren allerede forstår. Bruker teamet React, Astro, Datastar eller ren HTML, er det samme system og samme API. Et designsystem bundet til ett rammeverk må skrives om når rammeverket byttes ut. Nettleserens egne API-er byttes ikke ut.

Kom i gang Se komponenter

Arkitektur

Tre kategorier, delt etter hvem som skriver HTML-en

🎨

css

En klasse på et vanlig HTML-element. Ingen JavaScript lastes. Varianter styres med dataattributter.

<button class="fs-button">

⚡

ramme

Serveren skriver HTML-en, også koblingen mellom ledetekst, felt og feilmelding. Komponenten fester bare tastatur og fokus, og lar elementene bli liggende i vanlig DOM.

<fs-field>…</fs-field>

🔒

frittstående

Komponenten lager alt innholdet selv, fordi det ikke finnes noe for serveren å sende. Som en nedtelling mot at innloggingen går ut, der tallet kommer fra klientens klokke.

<fs-session-timeout warn-at="1500">

Styrker

Tre ting du slipper å løse selv

Editoren kjenner komponentene

Skriver du data-variant="secundary" for hånd, skjer det ingenting: knappen blir stående med standardstilen, og ingen sier fra. Skriver du det gjennom funksjonen, får du en feil i editoren før du rekker å lagre.

<button {...fs.button({ variant: "secondary" })}>
  Lagre utkast
</button>

Funksjonen returnerer et vanlig objekt med attributter. Derfor virker det samme kallet i JSX, i en Astro-mal og i ren JavaScript.

Din CSS vinner over vår

All CSS-en vår ligger i et eget cascade layer. Da vinner en helt vanlig regel i din egen CSS over vår, uansett hvor spesifikk vår er, og uten !important. Skal du bare endre form eller størrelse, finnes det en variabel per komponent.

:root {
  --fs-button-radius: 9999px;
}

Testene åpner en nettleser og kontrollerer at regelen din faktisk vinner, at variabelen slår gjennom, og at ::part() når inn i kalenderen.

Fargene holder kontrastkravet

Å koble en ledetekst, et felt, en hjelpetekst og en feilmelding riktig er fem ting å gjøre feil per felt. Regnestykket er skrevet én gang, og brukes av både <fs-field> og fs.field().

Hvert fargepar i systemet er regnet ut og kontrollert mot kravet i WCAG, i både lyst og mørkt tema. Komponentene kjøres gjennom axe i Chromium, Firefox og WebKit, og det samme gjøres mot hver side i denne dokumentasjonen.