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.

Dokumentasjonen er skrevet for utviklere og lest like godt av kodeagenter: hver side finnes også som Markdown, og en regelbok per rammeverk følger pakken.

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: bare CSS, ramme og frittstående

🎨

css

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

<button class="fs-button">

⚡

ramme

Du skriver HTML-en. Komponenten fyller inn koblingen der den mangler, fester 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 linja som sier fra at forbindelsen er borte: serveren som er borte, kan ikke melde det selv.

<fs-connection-status>

Styrker

Fire 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.

Kodeagenten slipper å gjette

En agent som ikke kjenner designsystemet, finner opp fs-modal, hardkoder fargene og skriver egen CSS når stilarket mangler. Fristil har en regelbok for agenter per rammeverk, og den følger pakken. Når agenten er ferdig, sier sjekken hva som er galt, med fil og linje.

npx @fristil/designsystem sjekk skjema.html

skjema.html:3:13: advarsel: Klassen «fs-modal»
  finnes ikke i Fristil.

Hele dokumentasjonen finnes også som Markdown, laget av de samme sidene du leser nå, og llms.txt viser vei. Mer om oppsettet under Kodeagenter.