@oslokommune/punkt-css 0.22.0 → 0.22.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/CONTRIBUTING.md +40 -50
- package/README.md +187 -70
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.22.2](https://github.com/oslokommune/punkt/compare/v0.22.1...v0.22.2) (2023-02-26)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **react:** Sett opp react-lib og publiseringsflyter ([#660](https://github.com/oslokommune/punkt/issues/660)) ([1bb89c7](https://github.com/oslokommune/punkt/commit/1bb89c764e1fd0e100cd7c2d6d820d958273609e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.22.1](https://github.com/oslokommune/punkt/compare/v0.22.0...v0.22.1) (2023-02-23)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @oslokommune/punkt-css
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [0.22.0](https://github.com/oslokommune/punkt/compare/v0.21.7...v0.22.0) (2023-02-23)
|
|
7
26
|
|
|
8
27
|
|
package/CONTRIBUTING.md
CHANGED
|
@@ -1,24 +1,46 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Hvordan bidra - CSS ⭐
|
|
2
2
|
|
|
3
3
|
Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som helst,
|
|
4
4
|
ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer
|
|
5
5
|
er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidrag!**
|
|
6
6
|
|
|
7
7
|
Vi oppfordrer deg til å starte med å lese vår
|
|
8
|
-
[overordnede guide for å bidra](
|
|
8
|
+
[overordnede guide for å bidra](/kom-i-gang/bidra/).
|
|
9
9
|
|
|
10
|
-
Happy coding!
|
|
10
|
+
👋 Happy coding!
|
|
11
11
|
|
|
12
|
-
## Forutsetninger
|
|
13
|
-
|
|
14
|
-
- Node 16.15 er installert
|
|
12
|
+
## 📝 Forutsetninger
|
|
13
|
+
- Node 16.15
|
|
15
14
|
- Kunnskap om [Sass (SCSS)](https://sass-lang.com/) og [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
|
|
16
15
|
- Forståelse av [BEM-navnekonvensjoner](http://getbem.com/) som designsystemet følger.
|
|
17
16
|
- Skal du jobbe med [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) er det nyttig å kunne litt om det.
|
|
18
17
|
- Noen skal ha designet komponenten i [Figma](https://www.figma.com/file/Eej5jm3jIUjeMfzLE0aOTB/Punkt---Origo-designsystem?node-id=0%3A1&t=VDbEaltk80wYiYn3-0) (Krever innlogging og tilgang).
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
Aller først må du konfigurere git-hooks slik at scripts kjøres ved commits, som for eksempel et script som kopierer innhold fra readme og contributing til dokumentasjonsnettsiden.
|
|
21
20
|
|
|
21
|
+
Sett opp git hooks:
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
git config core.hooksPath scripts/git-hooks
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Lerna
|
|
28
|
+
Punkt er et monorepo og bruker `lerna`. Det betyr at alle kommandoer kjører
|
|
29
|
+
fra repoets rot, og ikke i subrepoene.
|
|
30
|
+
|
|
31
|
+
Et utdrag fra rot-package.json viser noen scripts som er satt opp for å forenkle
|
|
32
|
+
utvikling i dette subrepoet:
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build-css": "npx lerna run build --scope=@oslokommune/punkt-css",
|
|
37
|
+
"build-css-app": "npx lerna run build-app --scope=@oslokommune/punkt-css",
|
|
38
|
+
"dev-css": "npx lerna run dev --scope=@oslokommune/punkt-css",
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## 🛠️ Gjør arbeidet
|
|
43
|
+
### Bli kjent med koden
|
|
22
44
|
|
|
23
45
|
```sh
|
|
24
46
|
@oslokommune/punkt-css
|
|
@@ -46,7 +68,7 @@ Happy coding!
|
|
|
46
68
|
```
|
|
47
69
|
|
|
48
70
|
|
|
49
|
-
###
|
|
71
|
+
### SCSS
|
|
50
72
|
|
|
51
73
|
Skal du jobbe med CSS-rammeverket er dette stedet å starte.
|
|
52
74
|
|
|
@@ -85,54 +107,22 @@ $breakpoints: (
|
|
|
85
107
|
'desktop': 100rem /* ~1600px */,
|
|
86
108
|
) !default;
|
|
87
109
|
```
|
|
88
|
-
## Nyttige script
|
|
89
|
-
|
|
90
|
-
Enn så lenge må du bevege deg til `packages/css` og kjøre script fra der.
|
|
91
|
-
|
|
92
|
-
```sh
|
|
93
|
-
npm install # Installer avhengigheter
|
|
94
|
-
npm run watch # Bygger koden til ./dist/ hver gang filer under ./src/ oppdateres
|
|
95
|
-
npm run build # Bygger koden til ./dist/
|
|
96
|
-
```
|
|
97
|
-
|
|
98
110
|
|
|
99
|
-
|
|
111
|
+
## 🤝 Lag PR
|
|
112
|
+
Når du er klar for en PR skriv din GitHub-message som sier hva som er gjort, og evt issue nummer.
|
|
100
113
|
|
|
101
|
-
|
|
114
|
+
Vi bruker [Conventional Commits](https://www.conventionalcommits.org/) for å beskrive commits gjennom
|
|
115
|
+
noen regler. Ingen fare om du ikke følger den, vi tar en gjennomgang og evt justerer 😎.
|
|
102
116
|
|
|
103
117
|
```sh
|
|
104
|
-
|
|
105
|
-
|
|
118
|
+
fix(css): #NR Rett feil på alert-komponenten # med issuenummer
|
|
119
|
+
fix(css): Rett feil på alert-komponenten # patcher en bug i koden (patch i Semantic Versioning)
|
|
120
|
+
feat(css): Legg til funksjonalitet # ny funksjonalitet i koden (minor i Semantic Versioning)
|
|
121
|
+
feat(css)!: Legg til funksjonalitet og endre eksisterende # breaking change i koden (major i Semantic Versioning)
|
|
122
|
+
docs: Endre dokumentasjon # Endring i dokumentasjon
|
|
106
123
|
```
|
|
107
124
|
|
|
108
|
-
|
|
109
|
-
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`.
|
|
110
|
-
|
|
111
|
-
```html
|
|
112
|
-
<pkt-icon
|
|
113
|
-
name="oslologo"
|
|
114
|
-
viewBox="0 0 60 31"
|
|
115
|
-
></pkt-icon>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
Legg til ny komponent ved å lage en html-fil i components-mappen.
|
|
119
|
-
Legg til komponenten i navigasjonen i `main.js` og legg til en `option` i `select` som du finner i `index.html`
|
|
120
|
-
|
|
121
|
-
### 5. GitHub Message
|
|
122
|
-
Når du er klar for en PR skriv din GitHub-message med issue-nummer og [asset], [docs] eller [repo]:
|
|
123
|
-
|
|
124
|
-
```sh
|
|
125
|
-
[#NNN][docs] Oppdater dokumentasjonen
|
|
126
|
-
[#NNN][assets] Legg til nytt ikon
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
## Publisering og versjonering
|
|
130
|
-
|
|
125
|
+
## 🔢 Publisering og versjonering
|
|
131
126
|
Vi tar oss av publisering av pakken og versjonering.
|
|
132
127
|
|
|
133
128
|
Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
|
|
134
|
-
|
|
135
|
-
Mens vi er i en beta-fase, versjonering vil følge dette mønsteret: **v0.Y.Z**, hvor
|
|
136
|
-
|
|
137
|
-
- **Y**: Major (breaking changes)
|
|
138
|
-
- **Z**: Minor eller patch
|
package/README.md
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
## Bruk av
|
|
1
|
+
## Bruk av punkt-css
|
|
2
2
|
|
|
3
3
|
<a href="https://www.npmjs.com/package/@oslokommune/punkt-css" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-css?logo=sass&label=css&style=for-the-badge&color=bf4080" alt="CSS-rammeverk" /></a>
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
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.
|
|
7
6
|
|
|
8
|
-
## Innhold
|
|
7
|
+
## 📖 Innhold
|
|
9
8
|
|
|
10
9
|
```sh
|
|
11
10
|
@oslokommune/punkt-css
|
|
12
|
-
├── dist/ # Distribusjonsversjonen av pakken
|
|
11
|
+
├── dist/ # Distribusjonsversjonen av pakken
|
|
13
12
|
| ├── css/ # generert css
|
|
14
13
|
| | ├── components/ # hver komponent separat
|
|
15
|
-
| | | ├── alert.css # komponent alert
|
|
14
|
+
| | | ├── alert.css # komponent alert
|
|
16
15
|
| | | └── ...
|
|
17
16
|
| | ├── pkt.css # alle moduler
|
|
18
17
|
| | ├── pkt.min.css # alle moduler minimert
|
|
@@ -32,15 +31,17 @@ Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er
|
|
|
32
31
|
└── README.md # kom i gang-informasjon
|
|
33
32
|
```
|
|
34
33
|
|
|
35
|
-
## 🚀 Kom i gang
|
|
34
|
+
## 🚀 Kom i gang - npm
|
|
36
35
|
|
|
37
|
-
Eksempelet under viser installasjon i en applikasjon med `Vue 3
|
|
36
|
+
Eksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.
|
|
38
37
|
|
|
39
|
-
### 1. Installer
|
|
38
|
+
### 1. Installer punkt-css
|
|
39
|
+
For å kunne bruke logo, ikoner og fonter med CSS-pakken må du installere punkt-assets
|
|
40
40
|
|
|
41
41
|
```sh
|
|
42
|
-
npm add -D sass
|
|
43
|
-
npm add @oslokommune/punkt-
|
|
42
|
+
npm add -D sass # Viktig å bruke denne og ikke node-sass
|
|
43
|
+
npm add @oslokommune/punkt-assets # Pakken med svg-ressurser
|
|
44
|
+
npm add @oslokommune/punkt-css # Ja denne
|
|
44
45
|
```
|
|
45
46
|
|
|
46
47
|
### 2. Opprett en scss-fil
|
|
@@ -121,98 +122,214 @@ Legg til logo -->
|
|
|
121
122
|
/>
|
|
122
123
|
|
|
123
124
|
<style lang="scss">
|
|
124
|
-
/* Legg til moduler */
|
|
125
|
-
@use "sass:map";
|
|
126
|
-
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
|
|
127
|
-
|
|
128
|
-
/* Legg til klassen for logoen */
|
|
129
|
-
.oslologo {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}
|
|
125
|
+
/* Legg til moduler */
|
|
126
|
+
@use "sass:map";
|
|
127
|
+
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
|
|
128
|
+
|
|
129
|
+
/* Legg til klassen for logoen */
|
|
130
|
+
.oslologo {
|
|
131
|
+
margin-bottom: map.get(variables.$spacing, "size-30");
|
|
132
|
+
height: 12rem;
|
|
133
|
+
}
|
|
133
134
|
</style>
|
|
134
135
|
```
|
|
135
136
|
|
|
136
|
-
## CSS-rammeverket
|
|
137
|
-
|
|
138
|
-
### Nøkkelegenskaper
|
|
137
|
+
## 🎨 CSS-rammeverket
|
|
139
138
|
|
|
140
139
|
- Modulært - import modulene du selv ønsker.
|
|
141
140
|
- Må bruke css-klasser - ingen overstyring utenom å bruke OsloSans.
|
|
142
141
|
- Komponentbibliotekene bruker samme css.
|
|
143
142
|
- Sass abstracts gir ekstra nytteverdi for deg som bruker.
|
|
144
143
|
|
|
145
|
-
###
|
|
144
|
+
### Innhold
|
|
146
145
|
|
|
147
146
|
| Kategori | Beskrivelse |
|
|
148
147
|
|:-----------|:-----------------------------------------------------------------------------------------|
|
|
149
148
|
| Abstracts | Variabler, funksjoner, mixins: Alle Sass-verktøy som brukes på tvers av rammeverket |
|
|
150
|
-
| Normalise |
|
|
151
|
-
| Base | Grunnleggende moduler som farger, grid,
|
|
149
|
+
| Normalise | Normalisering for å ha en felles baseline |
|
|
150
|
+
| Base | Grunnleggende moduler som farger, grid, spacing, hjelpeklasser, mm. |
|
|
152
151
|
| Elements | HTML-elementer som er stylet, som knapper, lister og tabeller. |
|
|
153
152
|
| Components | Komponenter som kombinerer elementer og komponenter for å lage mer komplekse komponenter |
|
|
154
153
|
|
|
155
|
-
|
|
154
|
+
### Abstracts
|
|
156
155
|
|
|
157
|
-
Abstracts består av `/variables`, `/functions`, og `/mixins` og samler
|
|
158
|
-
alle globale Sass variabler og verktøy på tvers av rammeverket. Disse
|
|
156
|
+
Abstracts består av `/variables`, `/functions`, og `/mixins` og samler
|
|
157
|
+
alle globale Sass variabler og verktøy på tvers av rammeverket. Disse
|
|
159
158
|
er et fundament for resten av rammeverket.
|
|
160
159
|
|
|
161
|
-
Ingenting under denne folderen skal generere en eneste linje CSS når
|
|
160
|
+
Ingenting under denne folderen skal generere en eneste linje CSS når
|
|
162
161
|
den er kompilert på egen hånd. Disse er bare Sass hjelpeverktøy.
|
|
163
162
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
163
|
+
#### Variables
|
|
164
|
+
|
|
165
|
+
Folderen `/variables` er en samling Sass-variabler skrevet på formen
|
|
166
|
+
[Sass maps](https://sass-lang.com/documentation/modules/map). Dette
|
|
167
|
+
gir en fin måte å kategorisere variablene og gir mulighet for nested
|
|
167
168
|
maps.
|
|
168
169
|
|
|
169
170
|
```scss
|
|
170
171
|
/* abstracts/variables/_breakpoints.scss */
|
|
171
172
|
|
|
172
173
|
$breakpoints: (
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
174
|
+
"mobile": 0,
|
|
175
|
+
"phablet": 36rem /* ~576px */,
|
|
176
|
+
"tablet": 48rem /* ~768px */,
|
|
177
|
+
"tablet-big": 64rem /* ~1024px */,
|
|
178
|
+
"laptop": 80rem /* ~1280px */,
|
|
179
|
+
"desktop": 100rem /* ~1600px */,
|
|
179
180
|
) !default;
|
|
180
181
|
```
|
|
181
182
|
|
|
182
|
-
For prekompilerte `.css` er hver kategori pakket i en fil, mens for
|
|
183
|
+
For prekompilerte `.css` er hver kategori pakket i en fil, mens for
|
|
183
184
|
`.scss` kan hver modul brukes hver for seg.
|
|
184
185
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
186
|
+
#### Functions
|
|
187
|
+
|
|
188
|
+
Nedenfor er et eksempel på bruk av en SCSS `map-get`-funksjon. Den brukes til å hente ut verdier fra våre variabler.
|
|
189
|
+
|
|
190
|
+
Man kan hente verdier med denne funksjonen fra:
|
|
191
|
+
- [breakpoints](/ressurser/breakpoints)
|
|
192
|
+
- [colors](/ressurser/colors/kode)
|
|
193
|
+
- [spacing](/ressurser/spacing)
|
|
194
|
+
- [typografi](/ressurser/typografi/kode)
|
|
195
|
+
|
|
196
|
+
```scss
|
|
197
|
+
@use "sass:map";
|
|
198
|
+
@use "@oslokommune/punkt-css/scss/abstracts/variables";
|
|
199
|
+
|
|
200
|
+
.wrapper {
|
|
201
|
+
max-width: map.get(variables.$breakpoints, "phablet");
|
|
202
|
+
padding: map.get(variables.$spacing, "size-24");
|
|
203
|
+
background-color: map.get(variables.$colors, "color-red");
|
|
204
|
+
font-size: map.get(variables.$font-size, "size-54");
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
#### Mixins
|
|
209
|
+
|
|
210
|
+
Mixins er nyttige når du ønsker å gjenbruke en gruppe av CSS-regler på flere steder i stilsettet ditt.
|
|
211
|
+
Se eksempel nedenfor på hva som finnes i Punkt:
|
|
212
|
+
|
|
213
|
+
**Breakpoints**
|
|
214
|
+
|
|
215
|
+
```scss
|
|
216
|
+
@use '@oslokommune/punkt-css/scss/abstracts/mixins/breakpoints' as *;
|
|
217
|
+
|
|
218
|
+
@include bp('phablet') { /* 576 til 767px */
|
|
219
|
+
...;
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
**Typografi**
|
|
224
|
+
|
|
225
|
+
```scss
|
|
226
|
+
@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography" as *;
|
|
227
|
+
|
|
228
|
+
.page-header {
|
|
229
|
+
@include get-text("pkt-txt-40-light");
|
|
230
|
+
margin-top: 0.6em;
|
|
231
|
+
margin-bottom: 0.4em;
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
Les mer om [breakpoints](/ressurser/breakpoints) og [typografi](/ressurser/typografi).
|
|
236
|
+
|
|
237
|
+
### Normalise
|
|
238
|
+
|
|
239
|
+
De fleste applikasjoner i dag bruker en eller annen form for normalisering eller reset. Dette gjør vi for å gi en mer konsistent utseende og oppførsel av HTML-elementer på tvers av ulike nettlesere.
|
|
240
|
+
Nettlesere har sin egen innebygde stil, og disse stilene varierer fra nettleser til nettleser. For eksempel kan margins, padding og linjehøyde variere.
|
|
241
|
+
|
|
242
|
+
Normaliseringen vi gjør i Punkt er forsøkt gjort så liten som mulig.
|
|
243
|
+
|
|
244
|
+
[Se i koden](https://github.com/oslokommune/punkt/blob/main/packages/css/src/scss/normalise/_index.scss) for hva som er normalisert i Punkt.
|
|
245
|
+
|
|
246
|
+
### Base
|
|
247
|
+
|
|
248
|
+
Vår base har Oslo kommune-stiler som typografi, farger, spacing og hjelpeklasser som for eksempel synlighet og screen-readers-only.
|
|
249
|
+
|
|
250
|
+
Les mer om:
|
|
251
|
+
|
|
252
|
+
- [Farger](/ressurser/colors)
|
|
253
|
+
- [Typografi](/ressurser/typografi)
|
|
254
|
+
- [Spacing](/ressurser/spacing)
|
|
255
|
+
- [Grid](/ressurser/grid)
|
|
256
|
+
|
|
257
|
+
#### Hjelpeklasser
|
|
258
|
+
|
|
259
|
+
| Type | Klassenavn | Modifier / Helper | Beskrivelse |
|
|
260
|
+
|-------------------|-----------------------------------------------|---------------------------------------------|-------------------------------------------------------------|
|
|
261
|
+
| Synlighet | .pkt-show, .pkt-hide | `-{synlighet}`-`{breakpoint}-up` | |
|
|
262
|
+
| Tekstjustering | .pkt-txt-start, .pkt-txt-center, .pkt-txt-end | | |
|
|
263
|
+
| Screenreader only | .pkt-sr-only | | Innholdet blir skjult visuelt, men kan leses av skjermleser |
|
|
264
|
+
| Avkortning | .pkt-truncate-text | | Krever `display: inline-block` eller `display: block` |
|
|
265
|
+
| Container | .pkt-container | `--full`, `{--breakpoint}`, `{--alignment}` | |
|
|
266
|
+
|
|
267
|
+
##### Eksempler
|
|
268
|
+
|
|
269
|
+
**Synlighet**
|
|
270
|
+
|
|
271
|
+
```html
|
|
272
|
+
<!-- Skjul innholdet fra tablet og opp -->
|
|
273
|
+
<p class="pkt-hide-tablet-up">...</p>
|
|
274
|
+
|
|
275
|
+
<!-- Vis innholdet fra phablet og opp -->
|
|
276
|
+
<p class="pkt-hide pkt-show-phablet-up">...</p>
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
**Tekstjustering**
|
|
280
|
+
|
|
281
|
+
```html
|
|
282
|
+
<p class="pkt-txt-start">Venstrejustert tekst.</p>
|
|
283
|
+
<p class="pkt-txt-center">Senterjustert tekst.</p>
|
|
284
|
+
<p class="pkt-txt-end">Høyrejustert tekst.</p>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
**Screenreader only**
|
|
288
|
+
|
|
289
|
+
```html
|
|
290
|
+
<h2 class="pkt-sr-only">Tittel for skjermlesere</div>
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
**Avkorting**
|
|
294
|
+
|
|
295
|
+
```html
|
|
296
|
+
<div class="pkt-row">
|
|
297
|
+
<div class="pkt-col-4 pkt-truncate-text">
|
|
298
|
+
Oslo Origo er en kommunal etat i Oslo kommune, opprettet 1. januar 2020.
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
**Container**
|
|
304
|
+
|
|
305
|
+
```html
|
|
306
|
+
<main class="pkt-container pkt-container--right">
|
|
307
|
+
<section><p>innhold</p></section>
|
|
308
|
+
</main>
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
### Elements
|
|
312
|
+
|
|
313
|
+
I et designsystem refererer elementer og komponenter til forskjellige nivåer av gjenbrukbarhet og abstraksjon i koden.
|
|
314
|
+
Elementer er de minste byggeklossene i vårt designsystem, som for eksempel pkt-list eller pkt-section.
|
|
315
|
+
|
|
316
|
+
```html
|
|
317
|
+
<div class="pkt-section--grey p-size-20">
|
|
318
|
+
<p class="pkt-txt-18-medium">Lista:</p>
|
|
319
|
+
<ul class="pkt-list">
|
|
320
|
+
<li>listelement</li>
|
|
321
|
+
</ul>
|
|
322
|
+
</div>
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
### Components
|
|
326
|
+
|
|
327
|
+
Komponenter er sammensatte elementer som består av en gruppe av elementer og/eller andre komponenter. De representerer en mer kompleks visuell enhet, som en knapp eller en alert-boks. Komponenter har vanligvis flere egenskaper og kan ha flere avhengigheter, og dermed har de en mer kompleks struktur enn elementer.
|
|
328
|
+
|
|
329
|
+
Alle våre komponenter er dokumentert [under komponenter](/komponenter/om-komponenter).
|
|
330
|
+
|
|
331
|
+
## 🔢 Versjonering
|
|
332
|
+
Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
|
|
216
333
|
|
|
217
334
|
## 👮 Lisens
|
|
218
335
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "0.22.
|
|
3
|
+
"version": "0.22.2",
|
|
4
4
|
"description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"watch": "chokidar \"src/scss/**/*\" -c \"npm run build\""
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@oslokommune/punkt-assets": "^0.22.
|
|
24
|
+
"@oslokommune/punkt-assets": "^0.22.2",
|
|
25
25
|
"astro": "^2.0.2",
|
|
26
26
|
"chokidar-cli": "^3.0.0",
|
|
27
27
|
"edit-json-file": "^1.7.0",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"svgson": "^5.2.1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@oslokommune/punkt-assets": ">=0.
|
|
35
|
+
"@oslokommune/punkt-assets": ">=0.22.0"
|
|
36
36
|
},
|
|
37
37
|
"engines": {
|
|
38
38
|
"node": ">=16.15.0"
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
58
58
|
},
|
|
59
59
|
"license": "MIT",
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "7450d854b9de0aed9f41ce138fbf27db8f215a4a"
|
|
61
61
|
}
|