![\"CSS-rammeverk\"](\"https://img.shields.io/npm/v/@oslokommune/punkt-css?logo=sass&label=css&style=for-the-badge&color=bf4080\")
\n\nDenne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma.\n\n## đ Kom i gang - npm\n\nEksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.\n\n### 1. Installer punkt-css\n\nFor Ă„ kunne bruke logo, ikoner og fonter med CSS-pakken mĂ„ du installere punkt-assets\n\n```sh\nnpm add -D sass # Viktig Ă„ bruke denne og ikke node-sass\nnpm add @oslokommune/punkt-assets # Pakken med svg-ressurser\nnpm add @oslokommune/punkt-css # Ja denne\n```\n\n### 2. Opprett en scss-fil\n\n```sh\ntouch ./src/main.scss # her eller i en egen css-folder\n```\n\n### 3. Importer scss-filen\n\n```js\n// src/main.js\nimport './main.scss'\n```\n\n### 4. Importer Punkt\n\n```scss\n/* src/main.scss\n\nOverstyr stien til fontene (rammeverkspesifikt) */\n@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' with (\n $font-path: '@oslokommune/punkt-assets/dist'\n);\n\n/* Bruk designsystemet */\n@use '@oslokommune/punkt-css/dist/scss/pkt';\n```\n\n### 5. Fjern lokal css\n\n```scss\n/* src/App.vue\n\nFjern app-spesifikk fontoppsett */\nfont-family: Avenir, Helvetica, Arial, sans-serif;\n```\n\n### 6. Legg pĂ„ klasse pĂ„ sidetittel\n\n```scss\n/* src/main.scss\n\nLegg til responsiv header */\n@use 'sass:map';\n@use '@oslokommune/punkt-css/dist/scss/abstracts/variables';\n/* Legg merke til at breakpoints hentes inn uten namespace: */\n@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;\n@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography';\n\n.h1 {\n @include typography.get-text('pkt-txt-28');\n margin-bottom: map.get(variables.$spacing, 'size-32');\n\n @include bp('tablet-up') {\n @include typography.get-text('pkt-txt-36');\n }\n}\n```\n\n```html\n\n![\"Oslo](\"@oslokommune/punkt-assets/dist/logos/oslologo.svg\")
\n\n\n```\n\n## đïž Kom i gang - cdn\n\nVed Ă„ inkludere Punkts css via vĂ„r cdn pĂ„\n[punkt-cdn.oslo.kommune.no](https://punkt-cdn.oslo.kommune.no/),\ner du kjapt igang uten noe byggesteg.\n\nLink til Ăžnsket CSS-fil i ``-taggen din. Vi anbefaler Ă„ bruke\n`pkt.min.css` for Ă„ fĂ„ den minifiserte versjonen av hele css-rammeverket.\nDu kan ogsĂ„ velge Ă„ importere enkelte moduler, eller bare base-modulen.\n\nSe tilgjengelige filer pĂ„ [cdn](https://punkt-cdn.oslo.kommune.no/).\n\n```html\n\n\n \n \n \n ![\"Oslo](\"https://punkt-cdn.oslo.kommune.no/latest/logos/oslologo.svg\")
\n \n\n```\n\n## đš CSS-rammeverket\n\n- ModulĂŠrt - import modulene du selv Ăžnsker.\n- MĂ„ bruke css-klasser - ingen overstyring utenom Ă„ bruke OsloSans.\n- Komponentbibliotekene bruker samme css.\n- Sass abstracts gir ekstra nytteverdi for deg som bruker.\n\n### Innhold\n\n| Kategori | Beskrivelse |\n| :--------- | :--------------------------------------------------------------------------------------- |\n| Abstracts | Variabler, funksjoner, mixins: Alle Sass-verktĂžy som brukes pĂ„ tvers av rammeverket |\n| Normalise | Normalisering for Ă„ ha en felles baseline |\n| Base | Grunnleggende moduler som farger, grid, spacing, hjelpeklasser, mm. |\n| Elements | HTML-elementer som er stylet, som knapper, lister og tabeller. |\n| Components | Komponenter som kombinerer elementer og komponenter for Ă„ lage mer komplekse komponenter |\n\n### Abstracts\n\nAbstracts bestĂ„r av `/variables`, `/functions`, og `/mixins` og samler\nalle globale Sass variabler og verktĂžy pĂ„ tvers av rammeverket. Disse\ner et fundament for resten av rammeverket.\n\nIngenting under denne folderen skal generere en eneste linje CSS nĂ„r\nden er kompilert pĂ„ egen hĂ„nd. Disse er bare Sass hjelpeverktĂžy.\n\n#### Variables\n\nFolderen `/variables` er en samling Sass-variabler skrevet pĂ„ formen\n[Sass maps](https://sass-lang.com/documentation/modules/map). Dette\ngir en fin mĂ„te Ă„ kategorisere variablene og gir mulighet for nested\nmaps.\n\n```scss\n/* abstracts/variables/_breakpoints.scss */\n\n$breakpoints: (\n 'mobile': 0,\n 'tablet': 48rem /* ~768px */,\n 'tablet-big': 64rem /* ~1024px */,\n 'laptop': 80rem /* ~1280px */,\n) !default;\n```\n\nFor prekompilerte `.css` er hver kategori pakket i en fil, mens for\n`.scss` kan hver modul brukes hver for seg.\n\n#### Functions\n\nNedenfor er et eksempel pĂ„ bruk av en SCSS `map.get`-funksjon. Den brukes til Ă„ hente ut verdier fra vĂ„re variabler.\n\nMan kan hente verdier med denne funksjonen fra:\n\n- [breakpoints](/ressurser/breakpoints)\n- [colors](/ressurser/colors/kode)\n- [spacing](/ressurser/spacing)\n- [typografi](/ressurser/typografi/kode)\n\n```scss\n@use 'sass:map';\n@use '@oslokommune/punkt-css/dist/scss/abstracts/variables';\n\n.wrapper {\n max-width: map.get(variables.$breakpoints, 'tablet');\n padding: map.get(variables.$spacing, 'size-24');\n background-color: map.get(variables.$pkt-colors, 'color-red');\n font-size: map.get(variables.$font-size, 'size-54');\n}\n```\n\n#### Mixins\n\nMixins er nyttige nĂ„r du Ăžnsker Ă„ gjenbruke en gruppe av CSS-regler pĂ„ flere steder i stilsettet ditt.\nSe eksempel nedenfor pĂ„ hva som finnes i Punkt:\n\n**Breakpoints**\n\n```scss\n@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;\n\n@include bp('tablet') { /* 768 til 1023px */\n ...;\n}\n```\n\n**Typografi**\n\n```scss\n@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;\n\n.page-header {\n @include get-text('pkt-txt-40-light');\n margin-top: 0.6em;\n margin-bottom: 0.4em;\n}\n```\n\n### Normalise\n\nDe fleste applikasjoner i dag bruker en eller annen form for normalisering eller reset. Dette gjĂžr vi for Ă„ gi et mer konsekvent utseende og oppfĂžrsel av HTML-elementer pĂ„ tvers av ulike nettlesere.\nNettlesere har sin egen innebygde stil, og disse stilene varierer fra nettleser til nettleser. For eksempel kan margins, padding og linjehĂžyde variere.\n\nNormaliseringen vi gjĂžr i Punkt er forsĂžkt gjort sĂ„ liten som mulig.\n\n[Se i koden](https://github.com/oslokommune/punkt/blob/main/packages/css/src/scss/normalise/_index.scss) for hva som er normalisert i Punkt.\n\n### Base\n\nVĂ„r base har Oslo kommune-stiler som typografi, farger, spacing og hjelpeklasser som for eksempel synlighet og screen-readers-only.\n\n### Elements\n\nI et designsystem refererer elementer og komponenter til forskjellige nivĂ„er av gjenbrukbarhet og abstraksjon i koden.\nElementer er de minste byggeklossene i vĂ„rt designsystem, som for eksempel pkt-list eller pkt-section.\n\n```html\nLista:
\n