# Fristil

> Rammeverksuavhengig designsystem: tokens, CSS-komponenter og web components. Versjon 0.36.0. Komponentene er CSS-klasser og web components, altså ting nettleseren allerede forstår, så de samme komponentene virker i ren HTML, i en Go-mal, med bundles, i React, i Astro og med Datastar.

Fire feil står for nesten alt som går galt. De gjelder i alle miljøer:

1. Stilarket må lastes. Mangler det, ser komponentene ustilte ut, og svaret er
   å laste det, aldri å skrive egen CSS for å få dem til å se riktige ut.
2. Bare klassene og elementene som finnes, finnes. `fs-modal`,
   `fs-datepicker` og `data-variant="outline"` hører til andre
   designsystemer. Hele lista står i hver regelbok.
3. Ingen hardkodede farger eller piksler. `var(--fs-color-…)` og
   `var(--fs-spacing-…)`.
4. Web components registreres én gang med `defineFs*()`, og et boolsk
   attributt er sant så lenge det står der: `invalid="false"` gjør feltet
   ugyldig. Attributtet må fjernes, ikke settes til `false`.

Sjekk markupen når du er ferdig, og rett det den melder:

    npx @fristil/designsystem sjekk <fil>
    npx @fristil/designsystem sjekk http://localhost:8080/side

Den kjenner hver klasse, hvert element, hvert attributt og hver lovlige verdi,
skriver `fil:linje:kolonne: feil: melding`, eller `advarsel:`, og avslutter med feilkode ved funn.
Med en adresse sjekker den siden slik serveren sender den, og krever i tillegg
at hver `for` og `aria-describedby` peker på en id som finnes, og at hvert
felt har en ledetekst. Du er ferdig når begge svarer «Markupen stemmer med
Fristil». Alt om kommandoene: https://fristil.sobernetics.no/kommandolinjen/

## Regelbøker for kodeagenter

- [Fristil i Astro](https://fristil.sobernetics.no/agent/astro.md): Fristil i et Astro-prosjekt.
- [Fristil med bundles](https://fristil.sobernetics.no/agent/bundles.md): Fristil i et prosjekt med et byggesteg, der markupen er vanlig HTML: Vue, Svelte, Solid, Lit, og vanlig TypeScript med Vite, Rollup, esbuild eller webpack.
- [Fristil med Datastar](https://fristil.sobernetics.no/agent/datastar.md): Fristil sammen med [Datastar](https://data-star.dev), som legger reaktivitet på vanlig HTML med `data-*`-attributter.
- [Fristil i ren HTML](https://fristil.sobernetics.no/agent/html.md): Fristil i et prosjekt uten byggesteg: håndskrevet HTML, der nettleseren laster filene direkte.
- [Fristil i maler og serverskrevet HTML](https://fristil.sobernetics.no/agent/maler.md): Fristil der serveren lager markupen: Go-maler, Razor, PHP, Blade, Twig, Jinja, Django, ERB, Liquid, Handlebars, Nunjucks og Edge, og HTML bygget som strenger i Kotlin, Java, C# eller Python.
- [Fristil i React](https://fristil.sobernetics.no/agent/react.md): Fristil i en React-app.

Hver regelbok er komplett for sitt miljø. Er pakken
installert, ligger de samme filene i
`node_modules/@fristil/designsystem/agent/`, og `npx @fristil/designsystem agent`
skriver den som passer dette prosjektet.

## Veiledning

- [Komponenter](https://fristil.sobernetics.no/components.md): Alle komponentene i Fristil, delt etter hvem som lager markupen og om en web-komponent legger oppførsel på den.
- [Design tokens](https://fristil.sobernetics.no/design-tokens.md): Farger, størrelser og typografi som CSS-variabler, TypeScript-konstanter og Tailwind-forhåndsinnstilling.
- [Editoren](https://fristil.sobernetics.no/editoren.md): Fullføring, forklaring og feilmeldinger for Fristil i VS Code, JetBrains, Neovim, Helix og andre editorer med LSP, også der ingen kompilator ser på markupen.
- [Eget tema](https://fristil.sobernetics.no/eget-tema.md): Lag et fargetema av merkefargene dine, med kontrasten kontrollert i begge temaer.
- [Introduksjon](https://fristil.sobernetics.no/introduksjon.md): Hva Fristil er, hvordan komponentene er delt inn, og hvorfor de er delt inn slik.
- [Kodeagenter](https://fristil.sobernetics.no/kodeagenter.md): Fristil for Claude Code, GitHub Copilot og andre kodeagenter. Regelboka følger pakken, og ingenting skrives i filene dine.
- [Kom i gang](https://fristil.sobernetics.no/kom-i-gang.md): Installer Fristil, importer det du trenger, og få den første komponenten på skjermen.
- [Kommandolinjen](https://fristil.sobernetics.no/kommandolinjen.md): Kommandoene i @fristil/designsystem, med flagg, utdata og exit-koder. Sjekk markup og hele sider, hent regelboka for kodeagenter, ta over en komponent og lag et tema.
- [Kotlin og Java](https://fristil.sobernetics.no/kotlin.md): Byggefunksjonene med enum-er, og Fristils sjekk i vanlige tester, på JVM-en uten Node og uten JavaScript.
- [Lisens og pris](https://fristil.sobernetics.no/lisens.md): Hva Fristil koster, hva du får lov til, hva som ikke loves, og hvordan du bidrar eller forker.
- [Markup og oppførsel](https://fristil.sobernetics.no/markup-og-oppforsel.md): Hvem som skriver HTML-en, hvem som fester oppførselen, og hvilken av de to formene du skal bruke.
- [Oversettelse](https://fristil.sobernetics.no/oversettelse.md): Fristil har nesten ingen tekst. Du skriver den med det oversettelsesverktøyet appen alt bruker, og de få tekstene pakken har, kan byttes ut.
- [Rammeverk](https://fristil.sobernetics.no/rammeverk.md): Oppsett av Fristil i ren HTML, React, Astro og Datastar, med de samme komponentene og det samme API-et.
- [Tailwind](https://fristil.sobernetics.no/tailwind.md): Bruk Tailwind fritt sammen med Fristil, med de samme verdiene og uten at noe slåss om rekkefølgen.
- [Tilgjengelighet](https://fristil.sobernetics.no/tilgjengelighet.md): Hva Fristil tar seg av sentralt, hva som er kontrollert av tester, og hva du må gjøre selv.
- [Tilpasning](https://fristil.sobernetics.no/tilpasning.md): Endre farger, form og størrelse i Fristil uten at endringene forsvinner ved neste oppgradering.
- [Typesikker bruk](https://fristil.sobernetics.no/typesikker-bruk.md): Ett navnerom, én form. Autofullføring på hele systemet, uten å binde deg til et rammeverk.
- [Veikart](https://fristil.sobernetics.no/veikart.md): Det som står igjen å lage i Fristil, og hva som alt er levert av den opprinnelige planen.

## Mønstre

- [Bekreft en handling](https://fristil.sobernetics.no/monster/bekreftelse.md): Dialog, ordlyd og hva som skjer etterpå, når handlingen ikke kan angres.
- [Dato i et skjema](https://fristil.sobernetics.no/monster/dato.md): Hvorfor Fristil ikke har en datovelger, og hvordan du ber om en dato som virker overalt.
- [Liste med filtre](https://fristil.sobernetics.no/monster/liste.md): Søk, filtre og de fire tilstandene en liste har: laster, treff, tomt og feilet.
- [Sideskjelett](https://fristil.sobernetics.no/monster/sideskjelett.md): Hopplenke, landemerker og overskriftsnivåer, altså det komponentene ikke kan ta ansvar for.
- [Skjema med validering](https://fristil.sobernetics.no/monster/skjema.md): Fra felt til feilmelding til oppsummering, med fokus der brukeren trenger det.
- [La brukeren velge tema](https://fristil.sobernetics.no/monster/tema.md): Temavelger i ren CSS, og de to måtene å få valget til å vare.

## Komponenter

- [Accordion](https://fristil.sobernetics.no/components/accordion.md): Panel som kan foldes ut, bygget på details og summary. CSS-komponent med to klasser og ingen JavaScript.
- [Alert](https://fristil.sobernetics.no/components/alert.md): Melding som gjelder hele siden eller hele skjemaet. CSS-komponent med to klasser og ingen JavaScript.
- [Avatar](https://fristil.sobernetics.no/components/avatar.md): Profilbilde eller initialer. CSS-komponent med to klasser og ingen JavaScript.
- [Badge](https://fristil.sobernetics.no/components/badge.md): Kompakt statusmerke. CSS-komponent med én klasse og ingen JavaScript.
- [Breadcrumbs](https://fristil.sobernetics.no/components/breadcrumbs.md): Brødsmulesti som viser hvor på siden brukeren er. CSS-komponent med én klasse og ingen JavaScript.
- [Button](https://fristil.sobernetics.no/components/button.md): Knapp for handlinger. CSS-komponent med én klasse og ingen JavaScript.
- [Card](https://fristil.sobernetics.no/components/card.md): Boks som samler innhold som hører sammen. CSS-komponent med to klasser og ingen JavaScript.
- [Checkbox](https://fristil.sobernetics.no/components/checkbox.md): Avkryssingsboks for valg som står for seg selv. CSS-komponent med to klasser og ingen JavaScript.
- [Connection Status](https://fristil.sobernetics.no/components/connection-status.md): Sier fra når forbindelsen til serveren er borte. Frittstående komponent.
- [Dialog](https://fristil.sobernetics.no/components/dialog.md): Modal dialog bygget på det native dialog-elementet. Seks klasser og ingen JavaScript, med en valgfri komponent for servere som ikke kan kalle showModal().
- [Divider](https://fristil.sobernetics.no/components/divider.md): Skillelinje mellom deler av innholdet. CSS-komponent med én klasse og ingen JavaScript.
- [Error Summary](https://fristil.sobernetics.no/components/error-summary.md): Samler feilene i et skjema og sender brukeren til feltet som feilet. Rammekomponent.
- [Error Text](https://fristil.sobernetics.no/components/error-text.md): Feilmelding under et skjemafelt. CSS-komponent med én klasse og ingen JavaScript.
- [Field](https://fristil.sobernetics.no/components/field.md): Rammekomponent som kobler ledetekst, felt, hjelpetekst og feilmelding sammen for deg.
- [Fieldset](https://fristil.sobernetics.no/components/fieldset.md): Gruppe av kontroller med en felles ledetekst. CSS-komponent med to klasser og ingen JavaScript.
- [File Upload](https://fristil.sobernetics.no/components/file-upload.md): Felt for opplasting av filer. CSS-komponent med to klasser og ingen JavaScript.
- [Heading](https://fristil.sobernetics.no/components/heading.md): Overskrifter i seks størrelser, uavhengig av nivå. CSS-komponent med én klasse og ingen JavaScript.
- [Help Text](https://fristil.sobernetics.no/components/help-text.md): Forklarende tekst under et skjemafelt. CSS-komponent med én klasse og ingen JavaScript.
- [Icon](https://fristil.sobernetics.no/components/icon.md): Ikon fra appens eget sett, like stort som teksten rundt. CSS-komponent med én klasse og ingen JavaScript.
- [Input](https://fristil.sobernetics.no/components/input.md): Tekstfelt for skjema, med tilstander for gyldig og ugyldig. CSS-komponent.
- [Label](https://fristil.sobernetics.no/components/label.md): Ledetekst for skjemafelt, med markering av påkrevd og valgfritt. CSS-komponent.
- [Link](https://fristil.sobernetics.no/components/link.md): Lenkestil for navigasjon i løpende tekst. CSS-komponent med én klasse og ingen JavaScript.
- [List](https://fristil.sobernetics.no/components/list.md): Punktliste, nummerert liste og lister uten punkter. CSS-komponent med én klasse og ingen JavaScript.
- [Pagination](https://fristil.sobernetics.no/components/pagination.md): Sidenavigering for lange lister. CSS-komponent med to klasser og ingen JavaScript.
- [Paragraph](https://fristil.sobernetics.no/components/paragraph.md): Brødtekst og ingress med begrenset linjelengde. CSS-komponent med én klasse og ingen JavaScript.
- [Popover](https://fristil.sobernetics.no/components/popover.md): Panel som henger under en knapp og lukker seg selv. Rammekomponent.
- [Progress](https://fristil.sobernetics.no/components/progress.md): Framdriftsstolpe for noe som har en ende. CSS-komponent med én klasse og ingen JavaScript.
- [Radio](https://fristil.sobernetics.no/components/radio.md): Radioknapper for ett valg blant flere. CSS-komponent med to klasser og ingen JavaScript.
- [Search](https://fristil.sobernetics.no/components/search.md): Søkefelt med forstørrelsesglass. CSS-komponent med to klasser og ingen JavaScript.
- [Select](https://fristil.sobernetics.no/components/select.md): Nedtrekksliste. CSS-komponent med én klasse og ingen JavaScript.
- [Session Timeout](https://fristil.sobernetics.no/components/session-timeout.md): Varsler før en innlogget økt går ut, og teller ned. Du skriver dialogen, komponenten tar tiden.
- [Skeleton](https://fristil.sobernetics.no/components/skeleton.md): Plassholder som viser formen på innhold som lastes. CSS-komponent med én klasse og ingen JavaScript.
- [Skip Link](https://fristil.sobernetics.no/components/skip-link.md): Lenke som hopper forbi menyen til hovedinnholdet. CSS-komponent med én klasse og ingen JavaScript.
- [Spinner](https://fristil.sobernetics.no/components/spinner.md): Venteindikator for noe som pågår. CSS-komponent med én klasse og ingen JavaScript.
- [Sr Only](https://fristil.sobernetics.no/components/sr-only.md): Tekst som bare skjermlesere får. CSS-komponent med én klasse og ingen JavaScript.
- [Suggestion](https://fristil.sobernetics.no/components/suggestion.md): Felt med forslagsliste som snevrer seg inn mens brukeren skriver. Rammekomponent.
- [Switch](https://fristil.sobernetics.no/components/switch.md): Bryter for en innstilling som slår inn med en gang. CSS-komponent med to klasser og ingen JavaScript.
- [Table](https://fristil.sobernetics.no/components/table.md): Tabell for data i rader og kolonner. CSS-komponent med to klasser og ingen JavaScript.
- [Tabs](https://fristil.sobernetics.no/components/tabs.md): Fanerad av lenker til panelene sine. Rammekomponent.
- [Tag](https://fristil.sobernetics.no/components/tag.md): Merkelapp for emneord og filtre. CSS-komponent med én klasse og ingen JavaScript.
- [Textarea](https://fristil.sobernetics.no/components/textarea.md): Flerlinjet tekstfelt. CSS-komponent med én klasse og ingen JavaScript.
- [Toast](https://fristil.sobernetics.no/components/toast.md): Kø av korte meldinger i hjørnet av skjermen. Frittstående komponent.
- [Toggle Group](https://fristil.sobernetics.no/components/toggle-group.md): Gruppe der ett alternativ er valgt om gangen. CSS-komponent med to klasser og ingen JavaScript.
- [Tooltip](https://fristil.sobernetics.no/components/tooltip.md): Liten hjelpetekst som vises på hover og fokus. CSS-komponent med to klasser og ingen JavaScript.