Introduksjon

Fristil er et designsystem som ikke krever et bestemt rammeverk. Komponentene er CSS-klasser og web components, altså ting nettleseren allerede forstår. Bruker teamet ditt React, Astro, Datastar eller ingenting i det hele tatt, 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.

Tre kategorier

Komponentene er delt i tre etter hvem som skriver HTML-en: du, komponenten, eller begge.

css

En CSS-klasse på et vanlig HTML-element. Ingen JavaScript lastes.

<button class="fs-button" data-variant="secondary">Lagre utkast</button>

Varianter styres med data--attributter. Dette er den største gruppen, og dekker knapper, lenker, merker, skjemafelt, tabeller, kort, varsler og typografi. Felles for dem er at utfordringen er hvordan de ser ut, ikke hva de gjør.

ramme

En web component du legger dine egne HTML-elementer inn i. Den lager ingen markup selv, men setter attributtene som kobler dem sammen.

<fs-field required-marker="symbol" invalid>
  <label>E-postadresse</label>
  <input class="fs-input" type="email" value="ola@" />
  <p class="fs-help-text">Vi sender kvittering til denne adressen.</p>
  <p class="fs-error-text">Skriv en e-postadresse med krøllalfa.</p>
</fs-field>

Koblingen mellom de fire elementene, altså for, id, aria-describedby og aria-invalid, skrives av serveren med fs.field(). Komponenten finnes for servere som ikke kan kalle den. Elementene blir liggende i vanlig DOM, så FormData, testverktøy og skjemabiblioteker finner dem som før.

frittstående

En web component som lager alt innholdet sitt selv, fordi det ikke finnes noe for serveren å sende.

<fs-connection-status class="fs-connection-status" data-ignore-morph></fs-connection-status>

Kategorien er et unntak med et vilkår, ikke en tredje likeverdig vei. Den gjelder bare flater som oppstår som følge av noe på klienten, og som ikke bærer en verdi inn i en innsending. Det er to av dem: <fs-session-timeout>, der nedtellingen er klientens klokke, og <fs-connection-status>, der serveren per definisjon ikke kan melde fra om at den er utilgjengelig. I tillegg står <fs-toast>, som er et imperativt API du kaller framfor å skrive.

Hvorfor tre kategorier

Fordi problemene er ulike. En knapp trenger bare en stil. Et skjemafelt trenger at fire elementer peker på hverandre, og markupen må stå i HTML-en serveren sender, ellers finnes ikke feltet før skriptet har kjørt. En nedtelling mot at økten går ut finnes derimot ikke før klienten begynner å telle.

Vilkåret som avgjør hvor en komponent hører hjemme:

Bærer den en verdi inn i en innsending, eller har den innhold serveren må sende, kan den ikke eie sin egen markup.

Delingen gjør også at du laster det komponenten trenger og ikke mer: en knapp er null JavaScript.

To lag: markup og oppførsel

Ingen komponent lager sitt eget innhold i DOM-en. Den som lager markupen beholder den, og komponenten fester bare oppførsel oppå. Det gjelder like mye i en React-app som rendrer alt i nettleseren, i en server-rendret app med hydrering, og i en Datastar-app der serveren sender HTML hele veien. Hele begrunnelsen, og svaret på når du bruker byggefunksjonen framfor elementet, står i Markup og oppførsel.

Ingen komponent bruker shadow DOM. Alle elementene står i vanlig DOM, og CSS-en din når fram overalt.

Komponent	Kategori	Stilark
<fs-field>	ramme	field.css
<fs-tabs>	ramme	tabs.css
<fs-error-summary>	ramme	error-summary.css
<fs-popover>	ramme	popover.css
<fs-suggestion>	ramme	suggestion.css
<fs-dialog>	ramme	dialog.css
<fs-toast>	frittstående	toast.css
<fs-session-timeout>	frittstående	session-timeout.css
<fs-connection-status>	frittstående	connection-status.css

Design tokens

Alle farger, størrelser og skriftstørrelser er CSS-variabler i tokens.css, og fungerer i all CSS:

.min-komponent {
  color: var(--semantic-interactive-main);
  padding: var(--size-4);
  font-size: var(--font-size-m);
}

De samme verdiene finnes som TypeScript-konstanter og som Tailwind-forhåndsinnstilling. Se Design tokens.

Tailwind

Fristil forutsetter ikke Tailwind, men står ikke i veien. La Tailwind styre oppsettet og Fristil styre komponentene:

<section class="mx-auto max-w-3xl p-6">
  <h2 class="mb-4 text-2xl font-bold">Handlinger</h2>
  <div class="flex flex-wrap gap-3">
    <button class="fs-button">Send søknad</button>
    <button class="fs-button" data-variant="secondary">Lagre utkast</button>
  </div>
</section>

Skal Tailwind-klassene bruke Fristils verdier, importer @fristil/designsystem/tailwind.css. Det er en vanlig CSS-fil, så pakken har ingen avhengighet til Tailwind, og din versjon er den eneste i bildet. Se Tailwind.

Videre

• Kom i gang: installasjon og oppsett, med og uten byggverktøy
• Rammeverk: oppsett for ren HTML, React, Astro og Datastar
• Design tokens: farger, størrelser og typografi
• Typesikker bruk: mønsteret som gir autofullføring på varianter
• Skjema med validering: komponentene satt sammen, med avgjørelsene rundt dem
• Tailwind: oppsett, lagrekkefølge og Fristils verdier som utility-klasser