@oslokommune/punkt-css 0.18.2

package/CHANGELOG.md

@@ -0,0 +1,260 @@
+# Changelog
+
+Alle nevneverdige endringer av prosjektet dokumenteres her.
+
+## [0.18.1] - 2022-10-31
+`rettet` Bug i knapp. Text-align center og ikke la ikoner krympe [#466](https://github.com/oslokommune/oslo-designsystem/issues/466)
+
+## [0.18.0] - 2022-10-10
+`rettet` Stiler i designsystemets CSS overstyrer default liste-stiler for mye [#435](https://github.com/oslokommune/oslo-designsystem/issues/435)
+
+## [0.17.1] - 2022-08-25
+`rettet` Flex-start alignment på enkel alert
+
+## [0.17.0] - 2022-08-25
+- `rettet` Underline på linker
+- `rettet` Breakpoint i header
+- `forbedret` Breaking changes på alert - fjernet liten alert, forenklet strukturen og fjernet tile som klasse
+ [#388](https://github.com/oslokommune/oslo-designsystem/issues/388)
+
+## [0.16.0] - 2022-08-18
+`forbedret` Oppdater header [#390](https://github.com/oslokommune/oslo-designsystem/issues/390)
+
+## [0.15.0] - 2022-08-17
+`forbedret` Oppdater footer [#389](https://github.com/oslokommune/oslo-designsystem/issues/389)
+Linkene har fått ikon,  ny klasse: `ods-footer__link-icon`
+
+## [0.14.4] - 2022-08-12
+`rettet` Feil link-font-color på dark mode.
+
+## [0.14.3] - 2022-08-09
+
+- `rettet` Lenker stylet som ods-btn har feil default text-decoration [#393](https://github.com/oslokommune/oslo-designsystem/issues/393)
+
+## [0.14.2] - 2022-08-09
+
+- `rettet` Legg til p i alert uten tile [#391](https://github.com/oslokommune/oslo-designsystem/issues/391)
+
+## [0.14.1] - 2022-07-07
+
+- `rettet` Feil casing på font-family i CSS-rammeverket [#383](https://github.com/oslokommune/oslo-designsystem/issues/383)
+
+## [0.14.0] - 2022-06-10
+
+- `nytt` Legg til scss for ny komponent BackLink [#377](https://github.com/oslokommune/oslo-designsystem/issues/377)
+
+## [0.13.5] - 2022-06-10
+
+- `forbedret` Legg til en penere versjon av svg-ikonet qr-code
+
+## [0.13.4] - 2022-06-10
+
+- `nytt` Legg til svg-ikonet qr-code
+
+## [0.13.3] - 2022-06-03
+
+- `rettet` Fjern overflow-x på ods-container som skapte reale scrolling-problemer [#374](https://github.com/oslokommune/oslo-designsystem/issues/374)
+
+## [0.13.2] - 2022-06-03
+
+- `rettet` Rettet feil i svg-ikonet car.svg
+
+## [0.13.1] - 2022-06-03
+
+- `nytt` Legg til svg-ikonene car og drinking-area-refreshments
+
+## [0.13.0] - 2022-06-01
+
+- `forbedret` Oppdater footer i hht nytt design [#360](https://github.com/oslokommune/oslo-designsystem/issues/360)
+
+## [0.12.1] - 2022-05-28
+
+- `rettet` Rett feil i CSS for header-komponent
+
+## [0.12.0] - 2022-05-28
+
+- `forbedret` Oppdater header i hht nytt design [#361](https://github.com/oslokommune/oslo-designsystem/issues/361)
+
+## [0.11.1] - 2022-05-06
+
+- `nytt` Legg til svg-ikonene fire-safety, react, vue, wine-bottle [#332](https://github.com/oslokommune/oslo-designsystem/issues/332)
+
+## [0.11.0] - 2022-04-25
+
+- `forbedret` Oppdater alert-komponent med ny struktur og variant (tiles) [#313](https://github.com/oslokommune/oslo-designsystem/issues/313)
+
+## [0.10.0] - 2022-03-27
+
+- `forbedret` Forbedre kom i gang-dokumentasjonen [#112](https://github.com/oslokommune/oslo-designsystem/issues/112)
+- `endret` Endre stien for bruk av ressursene ved å legge på en dist-folder. Dette er gjort for å holde folderstrukturen konsisent under utvikling og produksjon.
+
+### Eksempel
+
+```sh
+# Før
+@oslokommune/oslo-designsystem
+├── css/
+├── fonts/
+├── icons/
+├── logos/
+└── scss/
+
+# Nå
+@oslokommune/oslo-designsystem
+├── dist/
+|   ├── css/
+|   ├── fonts/
+|   ├── icons/
+|   ├── logos/
+|   └── scss/
+```
+
+```scss
+/* Før */
+@use '@oslokommune/oslo-designsystem/scss/ods';
+
+/* Nå */
+@use '@oslokommune/oslo-designsystem/dist/scss/ods';
+```
+
+## [0.7.0] - 2022-03-14
+
+- `forbedret` Lagt til alert-stil
+
+## [0.6.4] - 2022-03-10
+
+- `forbedret` Oppdatert lock og unlocked ikoner
+
+## [0.6.3] - 2022-03-09
+
+- `forbedret` Legg til container-stiler i Scss [#237](https://github.com/oslokommune/oslo-designsystem/issues/237)
+
+## [0.6.2] - 2022-03-01
+
+- `nytt` Nye logoer - Mennesker og helse
+
+## [0.6.1] - 2022-03-01
+
+- `nytt` Ny logo - law-paragraph
+
+## [0.6.0] - 2022-02-25
+
+- `oslo-designsystem-vue` har fått Header, Footer og
+  Breadcrumbs-komponenter, og stilene til disse er nå
+  optimalisert og flyttet hit til css-rammeverket
+  for gjenbruk.
+- `forbedret` Lag breadcrumbs-komponent i Vue [#208](https://github.com/oslokommune/oslo-designsystem/issues/208)
+- `forbedret` Lag header-komponent i Vue [#209](https://github.com/oslokommune/oslo-designsystem/issues/209)
+- `forbedret` Lag footer-komponent i Vue [#210](https://github.com/oslokommune/oslo-designsystem/issues/210)
+
+## [0.5.0] - 2022-02-23
+
+- `forbedret` Informasjon om Universell utforming lagt til på nettstedet.
+
+## [0.4.3] - 2022-01-17
+
+- `forbedret` Forbedre stilsetting av lenker og dokumentasjonen av disse. I tillegg legges svgo konfig-filen til, som sikrer konsistent SVG-kode [#199](https://github.com/oslokommune/oslo-designsystem/issues/199)
+
+## [0.4.2] - 2022-01-16
+
+- `forbedret` Tilgjengeliggjør individuelle css-filer til hver komponent [#197](https://github.com/oslokommune/oslo-designsystem/issues/197)
+
+## [0.4.1] - 2022-01-06
+
+- `forbedret` Forbedre dokumentasjonen rundt ressurser og hva som finnes på CDN [#196](https://github.com/oslokommune/oslo-designsystem/issues/196)
+
+## [0.4.0] - 2022-01-03
+
+- `feilet` Kun et lite versjonshopp.
+
+## [0.3.0] - 2022-01-03
+
+- `forbedret` Ressursene har fått etterlengtet oppmerksomhet, og
+  dokumentasjonen inneholder nå oversikt over alle ressurser som er
+  tilgjengelig. SVG-ikonene har fått egen side som viser alle
+  tilgjengelige, og informasjon om ulike måter å bruke disse på
+  [#189](https://github.com/oslokommune/oslo-designsystem/issues/189).
+
+## [0.2.3] - 2021-12-06
+
+- `forbedret` Legg til ny farge "blue-5" og juster farge-dokumentasjonen bittelitt [#192](https://github.com/oslokommune/oslo-designsystem/issues/192)
+
+## [0.2.2] - 2021-12-06
+
+- `forbedret` Forbedring av UU på nettstedet og en total gjennomgang av button elementet med nye muligheter [#188](https://github.com/oslokommune/oslo-designsystem/issues/188)
+
+## [0.2.1] - 2021-11-02
+
+- `rettet` Rett feil i merge og i dokumentasjonen etter gårsdagens 0.2.0 release.
+
+## [0.2.0] - 2021-11-01
+
+- `forbedret` Forbedre Sass organisering, som gjør at alt er på
+  stell når vi nå går videre til produksjon av elementer. Denne
+  reorganiseringen medfører at noen moduler flytter på seg, men ved
+  hjelp av beskrivelsen under burde det være fikset på 5-10
+  minutter [#176](https://github.com/oslokommune/oslo-designsystem/issues/176).
+- `rettet` Forbedre kontrast på inline kode [#166](https://github.com/oslokommune/oslo-designsystem/issues/166)
+- `rettet` Endre systemfarge. Dette er kun en endring av fargekode [#171](https://github.com/oslokommune/oslo-designsystem/issues/171)
+- `rettet` En rekke forbedringer og noen bugfixer på nettsiden.
+
+### Eksempel
+
+Denne endringen påvirker kun de som har tatt i bruk Sass-moduler. Om du kun har tatt i bruk CSS så har ingen endring skjedd.
+
+Oppgaven endrer navn på folderen `/config` --> `/abstracts` og oppretter `/variables`, `/functions`, og `/mixins` som undermapper for å samle alle globale Sass variabler og verktøy. Prinsippet er at ingenting i disse folderne skal generere en eneste linje CSS når den er kompilert på egen hånd. Disse er bare Sass hjelpeverktøy.
+
+Evt referanser til gamle settings-filen, f.eks `/config/settings` må derfor rettes til `/abstracts/variables`. Samme med referanser til breakpoints: `/base/breakpoints` er nå `/abstracts/mixins/breakpoints`.
+
+Resultatet er mer ryddig oppsett med klart skille av oppgaver, og med det hindrer duplisering av kode som ble funnet i tidligere versjoner.
+
+### Full Changelog
+
+https://github.com/oslokommune/oslo-designsystem/compare/ods-design-0.1.5...ods-design-0.2.0
+
+## [0.1.5] - 2021-10-28
+
+- `rettet` Referanser til fonter feiler når sass loades fra annen
+  sass-fil [#177](https://github.com/oslokommune/oslo-designsystem/issues/177). Å ta i bruk designsystemets Sass-filer har medført flere problemer til nå, bl.a at referansen til fontene ble feil. Denne releasen muliggjør konfigurering av denne, se på [For utviklere](https://designsystem.oslo.kommune.no/0.1.5/kom-i-gang/for-utviklere/index). Anbefalt måte å ta i bruk designsystemet er å gjøre det fra din main.scss fil, og fra denne releasen er det forhåpentligvis lettere å bruke Sass variables, functions og mixins.
+- `endret` Filene ods-all.css og ods-all.scss har skiftet navn til ods.[css|scss]. Dette er gjort for å bedre default namespacing, som kommer fra filnavnet.
+
+**Full Changelog**: https://github.com/oslokommune/oslo-designsystem/compare/ods-design-0.1.4...ods-design-0.1.5
+
+## [0.1.4] - 2021-10-27
+
+- `rettet` Fiks feil hex-koder i dokumentasjonen by @ceciliehrr [#179](https://github.com/oslokommune/oslo-designsystem/issues/179)
+- `ny bidragsyter` @ceciliehrr lagde sin første PR i https://github.com/oslokommune/oslo-designsystem/pull/180
+
+**Full Changelog**: https://github.com/oslokommune/oslo-designsystem/compare/ods-design-0.1.3...ods-design-0.1.4
+
+## [0.1.3] - 2021-10-16
+
+- `rettet` Ikke send med nuxtjs og andre dependencies til brukere [#168](https://github.com/oslokommune/oslo-designsystem/issues/168)
+
+## [0.1.2] - 2021-10-14
+
+- `rettet` Trigge henting av versjoner på undersider [#164](https://github.com/oslokommune/oslo-designsystem/issues/164)
+
+## [0.1.1] - 2021-10-14
+
+- `forbedret` Nettside - Innholdsforbedringer på forsiden
+- `forbedret` Nettside - Innholdsforbedringer på Bidra-siden
+
+## [0.1.0] - 2021-10-14
+
+- `endret` Etter en grundig gjennomgang av design tokens og
+  typografi-oppsett inneholder denne releasen en rekke fundamentale
+  endringer fra tidligere versjoner. Dette krever at oppgradering
+  krever litt søk og erstatt. En [oppgraderingsguide](https://github.com/oslokommune/oslo-designsystem/wiki/Oppgraderingsguide-til-v0.1.0)er laget for å avhjelpe disse endringene.
+- `endret` Grunnleggende systemer - farger [#81](https://github.com/oslokommune/oslo-designsystem/issues/81)
+- `endret` Grunnleggende systemer - spacing [#96](https://github.com/oslokommune/oslo-designsystem/issues/96)
+- `endret` Grunnleggende systemer - breakpoints [#95](https://github.com/oslokommune/oslo-designsystem/issues/95)
+- `endret` Grunnleggende systemer - grids & layout [#78](https://github.com/oslokommune/oslo-designsystem/issues/78)
+- `endret` Grunnleggende systemer - tekst [#94](https://github.com/oslokommune/oslo-designsystem/issues/94)
+- `forbedret` Lage CDN for assets [#146](https://github.com/oslokommune/oslo-designsystem/issues/146)
+- `forbedret` Nettside - Forebedre design og layout [#118](https://github.com/oslokommune/oslo-designsystem/issues/118)
+- `forbedret` Nettside - Lenke til alle versjoner [#93](https://github.com/oslokommune/oslo-designsystem/issues/93)
+- `forbedret` En rekke forbedringer er gjort på CI/CD og AWS
+  oppsett rundt caching, versjonering, forbedret developer
+  experience, mm.
+- `forbedret` Forbedringer i dokumentasjonen

package/CONTRIBUTING.md

@@ -0,0 +1,116 @@
+## Guide til hvordan du kan bidra ⭐
+
+Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som helst,
+ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer
+er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidrag!**
+
+Vi oppfordrer deg til å starte med å lese vår 
+[overordnede guide for å bidra](https://designsystem.oslo.kommune.no/latest/bidra/index).
+
+Happy coding!
+
+## Forutsetninger
+
+- Node 16.5 er installert
+- Kunnskap om [Sass (SCSS)](https://sass-lang.com/) og [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
+- Forståelse av [BEM-navnekonvensjoner](http://getbem.com/) som designsystemet følger.
+- Skal du jobbe med [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) er det nyttig å kunne litt om det.
+- Noen skal ha designet komponenten i [Figma](https://www.figma.com/file/Eej5jm3jIUjeMfzLE0aOTB/Oslo-Designsystem) (Krever innlogging og tilgang).
+
+## Bli kjent med koden
+
+```sh
+src           # oslologo og diverse favicons
+└── scss/             # css-rammeverket med dets moduler
+```
+
+### Litt mer detaljer om SCSS-folderen
+
+Skal du jobbe med CSS-rammeverket er dette stedet å starte.
+
+```sh
+scss
+├── abstracts/        # Variabler, funksjoner, mixins: Sass-verktøy som ikke generer CSS.
+|   ├── functions/    # Kodeblokker som returnerer enkeltverdier av en eller annen Sass data type.
+|   ├── mixins/       # Kodeblokker som genererer Sass kode som igjen kompilerer til CSS-stiler.
+|   ├── placeholders/ # Lik class selectors som ikke genereres uten at de er tatt i bruk (extended).
+|   └── variables/    # Variabler eller design tokens som de kalles er fundamentet til rammeverket.
+├── base/             # Grunnleggende moduler som farger, grid, fonter, tekststiler, mm.   
+├── components/       # Både enkle og mer komplekse komponenter. Grunnlag for komponent-bibliotekene.
+├── elements/         # HTML-elementer som er stylet, som knapper, lister og tabeller.
+└── normalise/        # En ganske liten normalisering for å ha en felles baseline.
+```
+
+Abstracts består av konfigurasjonen og hjelpeverktøyene til CSS-rammeverket. Ingenting under denne 
+folderen skal generere en eneste linje CSS når den er kompilert på egen hånd.
+
+Folderen `/variables` er en samling Sass-variabler skrevet på formen 
+[Sass maps](https://sass-lang.com/documentation/modules/map). Dette 
+gir en fin måte å kategorisere variablene og gir mulighet for nested 
+maps.
+
+Eksempel:
+
+```scss
+/* abstracts/variables/_breakpoints.scss */
+
+$breakpoints: (
+  'mobile': 0,
+  'phablet': 36rem /* ~576px */,
+  'tablet': 48rem /* ~768px */,
+  'tablet-big': 64rem /* ~1024px */,
+  'laptop': 80rem /* ~1280px */,
+  'desktop': 100rem /* ~1600px */,
+) !default;
+```
+## Nyttige script
+
+Enn så lenge må du bevege deg til `packages/css` og kjøre script fra der.
+
+```sh
+npm install           # Installer avhengigheter
+npm run watch         # Bygger koden til ./dist/ hver gang filer under ./src/ oppdateres
+npm run build         # Bygger koden til ./dist/
+```
+
+
+### 4. Testing
+
+Test css-komponentene i Vite-appen, kjør:
+
+```sh
+npm install
+npm run dev
+```
+
+Vi bruker cli til å legge til svg'er i test-appen. 
+Legg inn ønsket ikon i `dev/punkt.config.json`, kjør `punkt svg sprite` så vil den være tilgjengelig globalt ved å bruke komponenten `pkt-icon`.
+
+```html
+<pkt-icon
+    name="oslologo"
+    viewBox="0 0 60 31"
+></pkt-icon>
+```
+
+Legg til ny komponent ved å lage en html-fil i components-mappen.
+Legg til komponenten i navigasjonen i `main.js` og legg til en `option` i `select` som du finner i `index.html`
+
+### 5. GitHub Message
+Når du er klar for en PR skriv din GitHub-message med issue-nummer og [asset], [docs] eller [repo]:
+
+```
+[#NNN][docs] Oppdater dokumentasjonen
+[#NNN][assets] Legg til nytt ikon
+```
+
+## Publisering og versjonering
+
+Vi tar oss av publisering av pakken og versjonering.
+
+Oslo Designsystem bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
+
+Mens vi er i en beta-fase, versjonering vil følge dette mønsteret: **v0.Y.Z**, hvor
+
+- **Y**: Major (breaking changes)
+- **Z**: Minor eller patch

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2021-present Oslo kommune, Team Min side 
+<team-minside@oslo.kommune.no>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,221 @@
+## Bruk av @oslokommune/oslo-designsystem
+
+<a href="https://www.npmjs.com/package/@oslokommune/oslo-designsystem" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/oslo-designsystem?logo=sass&label=ressurser&style=for-the-badge&color=bf4080" alt="Ressurs versjon" /></a>
+
+
+Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er ikke automatikk mellom Figma og denne koden, så kode vil som regel henge litt etter hva som oppdateres i Figma.
+
+## Innhold
+
+```sh
+@oslokommune/oslo-designsystem
+├── dist/                          # Distribusjonsversjonen av pakken (lagt til i 0.10.0)
+|   ├── css/                       # generert css
+|   |   ├── components/            # hver komponent separat
+|   |   |   ├── alert.css          # komponent alert  
+|   |   |   └── ...
+|   |   ├── pkt.css                # alle moduler
+|   |   ├── pkt.min.css            # alle moduler minimert
+|   |   ├── pkt-base.css           # base modul
+|   |   ├── pkt-base.min.css       # base modul minimert
+|   |   ├── pkt-components.css     # komponent modul med alle komponenter
+|   |   ├── pkt-components.min.css # komponent modul minimert
+|   |   ├── pkt-elements.css       # element modul
+|   |   ├── pkt-elements.min.css   # element modul minimert
+|   |   ├── pkt-normalise.css      # normalisering modul
+|   |   └── pkt-normalise.min.css  # normalisering modul minimert
+|   └── scss/                      # css-rammeverket med dets moduler
+├── CHANGELOG.md                   # alle nevneverdige endringer
+├── index.js                       # peker på komplett rammeverk
+├── LICENSE                        # MIT lisens
+├── package.json                   # all info om prosjektet
+└── README.md                      # kom i gang-informasjon
+```
+
+## 🚀 Kom i gang
+
+Eksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.
+
+### 1. Installer designsystemet
+
+```sh
+npm add -D sass                # Viktig å bruke denne og ikke node-sass
+npm add @oslokommune/oslo-designsystem
+```
+
+### 2. Opprett en scss-fil
+
+```sh
+touch ./src/main.scss          # her eller i en egen css-folder
+```
+
+### 3. Importer scss-filen
+
+```js
+// src/main.js
+import "./main.scss";
+```
+
+### 4. Importer Punkt
+
+```scss
+/* src/main.scss
+
+Overstyr stien til fontene (rammeverkspesifikt) */
+@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/variables" with (
+  $font-path: "@oslokommune/oslo-designsystem/dist"
+);
+
+/* Bruk designsystemet */
+@use "@oslokommune/oslo-designsystem/dist/scss/ods";
+```
+
+### 5. Fjern lokal css
+
+```scss
+/* src/App.vue
+
+Fjern app-spesifikk fontoppsett */
+font-family: Avenir, Helvetica, Arial, sans-serif;
+```
+
+### 6. Legg på klasse på sidetittel
+
+```scss
+/* src/main.scss
+
+Legg til responsiv header */
+@use "sass:map";
+@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/variables";
+/* Legg merke til at breakpoints hentes inn uten namespace: */
+@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/mixins/breakpoints" as *;
+@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/mixins/typography";
+
+.h1 {
+  @include typography.get-text("pkt-txt-28");
+  margin-bottom: map.get(variables.$spacing, "size-30");
+
+  @include bp("tablet-up") {
+    @include typography.get-text("pkt-txt-36");
+  }
+}
+```
+
+```html
+<!-- src/components/HelloWorld.vue
+
+Legg til den nye klassen -->
+<h1 class="h1">{{ msg }}</h1>
+```
+
+### 7. Legg til OsloLogo
+
+```html
+<!-- src/App.vue
+
+Legg til logo -->
+<img
+  class="oslologo"
+  alt="Oslo kommune logo"
+  src="@oslokommune/oslo-designsystem/dist/logos/oslo-kommune.svg"
+/>
+
+<style lang="scss">
+/* Legg til moduler */
+@use "sass:map";
+@use "@oslokommune/oslo-designsystem/dist/scss/abstracts/variables";
+
+/* Legg til klassen for logoen */
+.oslologo {
+  margin-bottom: map.get(variables.$spacing, "size-30");
+  height: 12rem;
+}
+</style>
+```
+
+## CSS-rammeverket
+
+### Nøkkelegenskaper
+
+- Modulært - import modulene du selv ønsker.
+- Må bruke css-klasser - ingen overstyring utenom å bruke OsloSans.
+- Komponentbibliotekene bruker samme css.
+- Sass abstracts gir ekstra nytteverdi for deg som bruker.
+
+### Oppbygging
+
+| Kategori   | Beskrivelse                                                                              |
+|:-----------|:-----------------------------------------------------------------------------------------|
+| Abstracts  | Variabler, funksjoner, mixins: Alle Sass-verktøy som brukes på tvers av rammeverket      |
+| Normalise  | En ganske liten normalisering for å ha en felles baseline                                |
+| Base       | Grunnleggende moduler som farger, grid, fonter, tekststiler, mm.                         |
+| Elements   | HTML-elementer som er stylet, som knapper, lister og tabeller.                           |
+| Components | Komponenter som kombinerer elementer og komponenter for å lage mer komplekse komponenter |
+
+#### Noen ord om abstracts
+
+Abstracts består av `/variables`, `/functions`, og `/mixins` og samler 
+alle globale Sass variabler og verktøy på tvers av rammeverket. Disse 
+er et fundament for resten av rammeverket.
+
+Ingenting under denne folderen skal generere en eneste linje CSS når 
+den er kompilert på egen hånd. Disse er bare Sass hjelpeverktøy.
+
+Folderen `/variables` er en samling Sass-variabler skrevet på formen 
+[Sass maps](https://sass-lang.com/documentation/modules/map). Dette 
+gir en fin måte å kategorisere variablene og gir mulighet for nested 
+maps.
+
+```scss
+/* abstracts/variables/_breakpoints.scss */
+
+$breakpoints: (
+  'mobile': 0,
+  'phablet': 36rem /* ~576px */,
+  'tablet': 48rem /* ~768px */,
+  'tablet-big': 64rem /* ~1024px */,
+  'laptop': 80rem /* ~1280px */,
+  'desktop': 100rem /* ~1600px */,
+) !default;
+```
+
+For prekompilerte `.css` er hver kategori pakket i en fil, mens for 
+`.scss` kan hver modul brukes hver for seg.
+
+## CDN
+
+De statiske ressursene vil finnes i en versjonert folder under 
+https://assets.ods.oslo.systems/, slik at du kan ha full tillit til at de 
+kommer til å være stabile og tilgjengelige i lang tid. Her finnes de ferdig 
+genererte css-filene oppdelt i moduler eller komplett. I tillegg finnes 
+generert css for hver enkelt komponent under `css/components`.
+
+| Filnavn           | Url                                                                 |
+|:------------------|:--------------------------------------------------------------------|
+| Komplett          | https://assets.ods.oslo.systems/latest/css/ods.css                  |
+|                   | https://assets.ods.oslo.systems/latest/css/ods.min.css              |
+| Normalisering     | https://assets.ods.oslo.systems/latest/css/ods-normalise.css        |
+|                   | https://assets.ods.oslo.systems/latest/css/ods-normalise.min.css    |
+| Modul Base        | https://assets.ods.oslo.systems/latest/css/ods-base.css             |
+|                   | https://assets.ods.oslo.systems/latest/css/ods-base.min.css         |
+| Modul Elementer   | https://assets.ods.oslo.systems/latest/css/ods-elements.css         |
+|                   | https://assets.ods.oslo.systems/latest/css/ods-elements.min.css     |
+| Modul Komponenter | https://assets.ods.oslo.systems/latest/css/ods-components.css       |
+|                   | https://assets.ods.oslo.systems/latest/css/ods-components.min.css   |
+| Alert komponent   | https://assets.ods.oslo.systems/latest/css/components/alert.css     |
+|                   | https://assets.ods.oslo.systems/latest/css/components/alert.min.css |
+
+
+Versjoner følger eksakt de samme versjonene som NPM-pakkene, slik at du har 
+oversikt over dem i GitHub repositoriet. I tillegg kan du bruke `/latest` 
+for å alltid peke mot nyeste versjon, med all gleder og sorger det kan føre 
+med seg.
+
+**NB!** Alt som kommer fra _versjonerte_ endepunkter på CDN blir cachet i 
+1 år vha. http-headeren `cache-control` sitt `max-age`-attributt.
+
+## 👮 Lisens
+
+`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/oslo-designsystem/blob/main/packages/ods-design/LICENSE) for åpen kildekode.
+
+![NPM License](https://img.shields.io/npm/l/@oslokommune/oslo-designsystem?style=for-the-badge)