@oslokommune/punkt-css 5.1.17 → 5.1.19
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/README.md +50 -93
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -36,6 +36,7 @@ Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er
|
|
|
36
36
|
Eksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.
|
|
37
37
|
|
|
38
38
|
### 1. Installer punkt-css
|
|
39
|
+
|
|
39
40
|
For å kunne bruke logo, ikoner og fonter med CSS-pakken må du installere punkt-assets
|
|
40
41
|
|
|
41
42
|
```sh
|
|
@@ -54,7 +55,7 @@ touch ./src/main.scss # her eller i en egen css-folder
|
|
|
54
55
|
|
|
55
56
|
```js
|
|
56
57
|
// src/main.js
|
|
57
|
-
import
|
|
58
|
+
import './main.scss';
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
### 4. Importer Punkt
|
|
@@ -63,12 +64,12 @@ import "./main.scss";
|
|
|
63
64
|
/* src/main.scss
|
|
64
65
|
|
|
65
66
|
Overstyr stien til fontene (rammeverkspesifikt) */
|
|
66
|
-
@use
|
|
67
|
-
$font-path:
|
|
67
|
+
@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' with (
|
|
68
|
+
$font-path: '@oslokommune/punkt-assets/dist'
|
|
68
69
|
);
|
|
69
70
|
|
|
70
71
|
/* Bruk designsystemet */
|
|
71
|
-
@use
|
|
72
|
+
@use '@oslokommune/punkt-css/dist/scss/pkt';
|
|
72
73
|
```
|
|
73
74
|
|
|
74
75
|
### 5. Fjern lokal css
|
|
@@ -86,18 +87,18 @@ font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
|
86
87
|
/* src/main.scss
|
|
87
88
|
|
|
88
89
|
Legg til responsiv header */
|
|
89
|
-
@use
|
|
90
|
-
@use
|
|
90
|
+
@use 'sass:map';
|
|
91
|
+
@use '@oslokommune/punkt-css/dist/scss/abstracts/variables';
|
|
91
92
|
/* Legg merke til at breakpoints hentes inn uten namespace: */
|
|
92
|
-
@use
|
|
93
|
-
@use
|
|
93
|
+
@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
|
|
94
|
+
@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography';
|
|
94
95
|
|
|
95
96
|
.h1 {
|
|
96
|
-
@include typography.get-text(
|
|
97
|
-
margin-bottom: map.get(variables.$spacing,
|
|
97
|
+
@include typography.get-text('pkt-txt-28');
|
|
98
|
+
margin-bottom: map.get(variables.$spacing, 'size-30');
|
|
98
99
|
|
|
99
|
-
@include bp(
|
|
100
|
-
@include typography.get-text(
|
|
100
|
+
@include bp('tablet-up') {
|
|
101
|
+
@include typography.get-text('pkt-txt-36');
|
|
101
102
|
}
|
|
102
103
|
}
|
|
103
104
|
```
|
|
@@ -123,43 +124,49 @@ Legg til logo -->
|
|
|
123
124
|
|
|
124
125
|
<style lang="scss">
|
|
125
126
|
/* Legg til moduler */
|
|
126
|
-
@use
|
|
127
|
-
@use
|
|
127
|
+
@use 'sass:map';
|
|
128
|
+
@use '@oslokommune/punkt-css/dist/scss/abstracts/variables';
|
|
128
129
|
|
|
129
130
|
/* Legg til klassen for logoen */
|
|
130
131
|
.oslologo {
|
|
131
|
-
margin-bottom: map.get(variables.$spacing,
|
|
132
|
+
margin-bottom: map.get(variables.$spacing, 'size-30');
|
|
132
133
|
height: 12rem;
|
|
133
134
|
}
|
|
134
135
|
</style>
|
|
135
136
|
```
|
|
136
137
|
|
|
137
138
|
## 🏎️ Kom i gang - cdn
|
|
138
|
-
|
|
139
|
+
|
|
140
|
+
Ved å inkludere Punkts css via vår cdn på
|
|
139
141
|
[punkt-cdn.oslo.kommune.no](https://punkt-cdn.oslo.kommune.no/),
|
|
140
142
|
er du kjapt igang uten noe byggesteg.
|
|
141
143
|
|
|
142
|
-
Link til ønsket CSS-fil i `<head>`-taggen din. Vi anbefaler å bruke
|
|
143
|
-
`pkt.min.css` for å få den minifiserte versjonen av hele css-rammeverket.
|
|
144
|
+
Link til ønsket CSS-fil i `<head>`-taggen din. Vi anbefaler å bruke
|
|
145
|
+
`pkt.min.css` for å få den minifiserte versjonen av hele css-rammeverket.
|
|
144
146
|
Du kan også velge å importere enkelte moduler, eller bare base-modulen.
|
|
145
147
|
|
|
146
148
|
Se tilgjengelige filer på [cdn](https://punkt-cdn.oslo.kommune.no/).
|
|
147
149
|
|
|
148
150
|
```html
|
|
149
|
-
<!
|
|
151
|
+
<!DOCTYPE html>
|
|
150
152
|
<html lang="no">
|
|
151
153
|
<head>
|
|
152
|
-
<meta charset="utf-8"
|
|
153
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"
|
|
154
|
+
<meta charset="utf-8" />
|
|
155
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
154
156
|
<title>Punkt</title>
|
|
155
|
-
<link href="https://punkt-cdn.oslo.kommune.no/3.1/css/pkt.min.css" rel="stylesheet"
|
|
157
|
+
<link href="https://punkt-cdn.oslo.kommune.no/3.1/css/pkt.min.css" rel="stylesheet" />
|
|
156
158
|
</head>
|
|
157
159
|
<body>
|
|
158
160
|
<h1>Velkommen til Oslo Origo</h1>
|
|
159
|
-
<img
|
|
161
|
+
<img
|
|
162
|
+
src="https://punkt-cdn.oslo.kommune.no/3.1/logos/oslologo.svg"
|
|
163
|
+
alt="Oslo kommune logo"
|
|
164
|
+
height="64"
|
|
165
|
+
/>
|
|
160
166
|
</body>
|
|
161
167
|
</html>
|
|
162
168
|
```
|
|
169
|
+
|
|
163
170
|
## 🟪 Ikoner
|
|
164
171
|
|
|
165
172
|
Du kan selv velge hvordan du tar i bruk ikoner. Men vi har et ikon-oppsett for SVG-sprites ved bruk av vårt [CLI-verktøy](/kom-i-gang/for-utviklere/cli).
|
|
@@ -178,7 +185,7 @@ Les mer om ikoner [her.](/ressurser/ikoner/kode)
|
|
|
178
185
|
### Innhold
|
|
179
186
|
|
|
180
187
|
| Kategori | Beskrivelse |
|
|
181
|
-
|
|
188
|
+
| :--------- | :--------------------------------------------------------------------------------------- |
|
|
182
189
|
| Abstracts | Variabler, funksjoner, mixins: Alle Sass-verktøy som brukes på tvers av rammeverket |
|
|
183
190
|
| Normalise | Normalisering for å ha en felles baseline |
|
|
184
191
|
| Base | Grunnleggende moduler som farger, grid, spacing, hjelpeklasser, mm. |
|
|
@@ -205,12 +212,12 @@ maps.
|
|
|
205
212
|
/* abstracts/variables/_breakpoints.scss */
|
|
206
213
|
|
|
207
214
|
$breakpoints: (
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
215
|
+
'mobile': 0,
|
|
216
|
+
'phablet': 36rem /* ~576px */,
|
|
217
|
+
'tablet': 48rem /* ~768px */,
|
|
218
|
+
'tablet-big': 64rem /* ~1024px */,
|
|
219
|
+
'laptop': 80rem /* ~1280px */,
|
|
220
|
+
'desktop': 100rem /* ~1600px */,
|
|
214
221
|
) !default;
|
|
215
222
|
```
|
|
216
223
|
|
|
@@ -222,20 +229,21 @@ For prekompilerte `.css` er hver kategori pakket i en fil, mens for
|
|
|
222
229
|
Nedenfor er et eksempel på bruk av en SCSS `map-get`-funksjon. Den brukes til å hente ut verdier fra våre variabler.
|
|
223
230
|
|
|
224
231
|
Man kan hente verdier med denne funksjonen fra:
|
|
232
|
+
|
|
225
233
|
- [breakpoints](/ressurser/breakpoints)
|
|
226
234
|
- [colors](/ressurser/colors/kode)
|
|
227
235
|
- [spacing](/ressurser/spacing)
|
|
228
236
|
- [typografi](/ressurser/typografi/kode)
|
|
229
|
-
|
|
237
|
+
|
|
230
238
|
```scss
|
|
231
|
-
@use
|
|
232
|
-
@use
|
|
239
|
+
@use 'sass:map';
|
|
240
|
+
@use '@oslokommune/punkt-css/scss/abstracts/variables';
|
|
233
241
|
|
|
234
242
|
.wrapper {
|
|
235
|
-
max-width: map.get(variables.$breakpoints,
|
|
236
|
-
padding: map.get(variables.$spacing,
|
|
237
|
-
background-color: map.get(variables.$colors,
|
|
238
|
-
font-size: map.get(variables.$font-size,
|
|
243
|
+
max-width: map.get(variables.$breakpoints, 'phablet');
|
|
244
|
+
padding: map.get(variables.$spacing, 'size-24');
|
|
245
|
+
background-color: map.get(variables.$colors, 'color-red');
|
|
246
|
+
font-size: map.get(variables.$font-size, 'size-54');
|
|
239
247
|
}
|
|
240
248
|
```
|
|
241
249
|
|
|
@@ -257,10 +265,10 @@ Se eksempel nedenfor på hva som finnes i Punkt:
|
|
|
257
265
|
**Typografi**
|
|
258
266
|
|
|
259
267
|
```scss
|
|
260
|
-
@use
|
|
268
|
+
@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
|
|
261
269
|
|
|
262
270
|
.page-header {
|
|
263
|
-
@include get-text(
|
|
271
|
+
@include get-text('pkt-txt-40-light');
|
|
264
272
|
margin-top: 0.6em;
|
|
265
273
|
margin-bottom: 0.4em;
|
|
266
274
|
}
|
|
@@ -287,60 +295,7 @@ Les mer om:
|
|
|
287
295
|
- [Typografi](/ressurser/typografi)
|
|
288
296
|
- [Spacing](/ressurser/spacing)
|
|
289
297
|
- [Grid](/ressurser/grid)
|
|
290
|
-
|
|
291
|
-
#### Hjelpeklasser
|
|
292
|
-
|
|
293
|
-
| Type | Klassenavn | Modifier / Helper | Beskrivelse |
|
|
294
|
-
|-------------------|-----------------------------------------------|---------------------------------------------|-------------------------------------------------------------|
|
|
295
|
-
| Synlighet | .pkt-show, .pkt-hide | `-{synlighet}`-`{breakpoint}-up` | |
|
|
296
|
-
| Tekstjustering | .pkt-txt-start, .pkt-txt-center, .pkt-txt-end | | |
|
|
297
|
-
| Screenreader only | .pkt-sr-only | | Innholdet blir skjult visuelt, men kan leses av skjermleser |
|
|
298
|
-
| Avkortning | .pkt-truncate-text | | Krever `display: inline-block` eller `display: block` |
|
|
299
|
-
| Container | .pkt-container | `--full`, `{--breakpoint}`, `{--alignment}` | |
|
|
300
|
-
|
|
301
|
-
##### Eksempler
|
|
302
|
-
|
|
303
|
-
**Synlighet**
|
|
304
|
-
|
|
305
|
-
```html
|
|
306
|
-
<!-- Skjul innholdet fra tablet og opp -->
|
|
307
|
-
<p class="pkt-hide-tablet-up">...</p>
|
|
308
|
-
|
|
309
|
-
<!-- Vis innholdet fra phablet og opp -->
|
|
310
|
-
<p class="pkt-hide pkt-show-phablet-up">...</p>
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
**Tekstjustering**
|
|
314
|
-
|
|
315
|
-
```html
|
|
316
|
-
<p class="pkt-txt-start">Venstrejustert tekst.</p>
|
|
317
|
-
<p class="pkt-txt-center">Senterjustert tekst.</p>
|
|
318
|
-
<p class="pkt-txt-end">Høyrejustert tekst.</p>
|
|
319
|
-
```
|
|
320
|
-
|
|
321
|
-
**Screenreader only**
|
|
322
|
-
|
|
323
|
-
```html
|
|
324
|
-
<h2 class="pkt-sr-only">Tittel for skjermlesere</div>
|
|
325
|
-
```
|
|
326
|
-
|
|
327
|
-
**Avkorting**
|
|
328
|
-
|
|
329
|
-
```html
|
|
330
|
-
<div class="pkt-row">
|
|
331
|
-
<div class="pkt-col-4 pkt-truncate-text">
|
|
332
|
-
Oslo Origo er en kommunal etat i Oslo kommune, opprettet 1. januar 2020.
|
|
333
|
-
</div>
|
|
334
|
-
</div>
|
|
335
|
-
```
|
|
336
|
-
|
|
337
|
-
**Container**
|
|
338
|
-
|
|
339
|
-
```html
|
|
340
|
-
<main class="pkt-container pkt-container--right">
|
|
341
|
-
<section><p>innhold</p></section>
|
|
342
|
-
</main>
|
|
343
|
-
```
|
|
298
|
+
- [Hjelpeklasser](/ressurser/hjelpeklasser)
|
|
344
299
|
|
|
345
300
|
### Elements
|
|
346
301
|
|
|
@@ -363,9 +318,11 @@ Komponenter er sammensatte elementer som består av en gruppe av elementer og/el
|
|
|
363
318
|
Alle våre komponenter er dokumentert [under komponenter](/komponenter/om-komponenter).
|
|
364
319
|
|
|
365
320
|
## 🔢 Versjonering
|
|
321
|
+
|
|
366
322
|
Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
|
|
367
323
|
|
|
368
324
|
## 👮 Lisens
|
|
325
|
+
|
|
369
326
|
`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/css/LICENSE) for åpen kildekode.
|
|
370
327
|
|
|
371
328
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.19",
|
|
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",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"preview": "astro preview"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@oslokommune/punkt-assets": "^5.1.
|
|
23
|
+
"@oslokommune/punkt-assets": "^5.1.19",
|
|
24
24
|
"astro": "^2.8.1",
|
|
25
25
|
"edit-json-file": "^1.7.0",
|
|
26
26
|
"fs-extra": "^11.1.0",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "3560fc1d72d67a49cf959925d5691d0fa0f60b02"
|
|
59
59
|
}
|