Fristil

Rammeverksuavhengig designsystem

CSS-klasser og web components.

Komponentene er 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

En kompromissløs og minimalistisk sportsbil bygget rett på nettleserens egne API-er. Fristil kaster all tung bagasje og gir deg en ekte, ufiltrert følelse av veien: selve DOM-en.

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 nettleseren sier ikke 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.

Skriver du HTML uten TypeScript, gjør utvidelsen for VS Code det samme: secundary får en strek, og lyspæra retter til secondary. JetBrains får fullføringen fra pakken selv, fra 0.15.0.

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 en Tailwind-utility slår komponentens egen verdi.

Fargene holder kontrastkravet

Hvert fargepar i systemet er regnet ut og kontrollert mot kravet i WCAG, i både lyst og mørkt tema. Oppgir du dine egne merkefarger, regnes familiene deres ut på nytt med buildTheme fra @fristil/designsystem/tema.

const tema = buildTheme({
  accent: "#0062ba",
})

// tema.violations er tom
// når kontrasten holder

Fargene regnes i OKLCH, fordi lyshet i HSL betyr noe ulikt for hver kulør. Merkefargen gir kuløren, mens rollen setter lysheten og hvor mye av metningen som blir med.

Komponentene kjøres gjennom axe i Chromium, Firefox og WebKit. Hver side i denne dokumentasjonen kjøres gjennom axe i begge temaer.