# Fristil

> Rammeverksuavhengig designsystem: tokens, CSS-komponenter og web components. Versjon 0.27.1. 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>

Den kjenner hver klasse, hvert element, hvert attributt og hver lovlige verdi,
skriver `fil:linje:kolonne: melding`, og avslutter med feilkode ved funn.

## Regelbøker for kodeagenter

- [Fristil i Astro](https://fristil.netlify.app/agent/astro.md): Fristil i et Astro-prosjekt.
- [Fristil med bundles](https://fristil.netlify.app/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.netlify.app/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.netlify.app/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.netlify.app/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.netlify.app/agent/react.md): Fristil i en React-app.

Hver regelbok er komplett for sitt miljø og nevner ingen andre. 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.netlify.app/components/): Alle komponentene i Fristil, delt etter hvem som eier DOM-en mens siden lever.
- [Design tokens](https://fristil.netlify.app/design-tokens/): Farger, størrelser og typografi som CSS-variabler, TypeScript-konstanter og Tailwind-forhåndsinnstilling.
- [Editoren](https://fristil.netlify.app/editoren/): Fullføring, forklaring og feilmeldinger for Fristil i VS Code og JetBrains, også der ingen kompilator ser på markupen.
- [Eget tema](https://fristil.netlify.app/eget-tema/): Lag et fargetema av merkefargene dine, med kontrasten kontrollert i begge temaer.
- [Introduksjon](https://fristil.netlify.app/introduksjon/): Hva Fristil er, hvordan komponentene er delt inn, og hvorfor de er delt inn slik.
- [Kodeagenter](https://fristil.netlify.app/kodeagenter/): Fristil for Claude Code, GitHub Copilot og andre kodeagenter. Regelboka følger pakken, og ingenting skrives i filene dine.
- [Kom i gang](https://fristil.netlify.app/kom-i-gang/): Installer Fristil, importer det du trenger, og få den første komponenten på skjermen.
- [Markup og oppførsel](https://fristil.netlify.app/markup-og-oppforsel/): Hvem som skriver HTML-en, hvem som fester oppførselen, og hvilken av de to formene du skal bruke.
- [Rammeverk](https://fristil.netlify.app/rammeverk/): Oppsett av Fristil i ren HTML, React, Astro og Datastar, med de samme komponentene og det samme API-et.
- [Tailwind](https://fristil.netlify.app/tailwind/): Bruk Tailwind fritt sammen med Fristil, med de samme verdiene og uten at noe slåss om rekkefølgen.
- [Tilgjengelighet](https://fristil.netlify.app/tilgjengelighet/): Hva Fristil tar seg av sentralt, hva som er kontrollert av tester, og hva du må gjøre selv.
- [Tilpasning](https://fristil.netlify.app/tilpasning/): Endre farger, form og størrelse i Fristil uten at endringene forsvinner ved neste oppgradering.
- [Typesikker bruk](https://fristil.netlify.app/typesikker-bruk/): Ett navnerom, én form. Autofullføring på hele systemet, uten å binde deg til et rammeverk.

## Mønstre

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

## Komponenter

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