For utviklere

Bruk av punkt-css

CSS-rammeverk

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

@oslokommune/punkt-css
├── dist/                          # Distribusjonsversjonen av pakken
|   ├── 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 - npm

Eksempelet under viser installasjon i en applikasjon med Vue 3 + Vite.

1. Installer punkt-css

For ĂĄ kunne bruke logo, ikoner og fonter med CSS-pakken mĂĄ du installere punkt-assets

npm add -D sass                    # Viktig ĂĄ bruke denne og ikke node-sass
npm add @oslokommune/punkt-assets  # Pakken med svg-ressurser
npm add @oslokommune/punkt-css     # Ja denne

2. Opprett en scss-fil

touch ./src/main.scss          # her eller i en egen css-folder

3. Importer scss-filen

// src/main.js
import "./main.scss";

4. Importer Punkt

/* src/main.scss

  Overstyr stien til fontene (rammeverkspesifikt)
*/
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables" with (
  $font-path: "@oslokommune/punkt-assets/dist"
);

/* 
  ELLER:
  Overstyr stien til ikonene (rammeverkspesifikt)
  Default er ĂĄ bruke Punkts CDN for ikoner, men dette kan overstyres til ĂĄ bruke lokal sti
*/
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables" with (
  $icon-path: "/assets/icons"
);

/*
  Dersom man trenger å overstyre både $font-path og $icon-path kan man gjøre det slik:
*/
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables" with (
  $font-path: "@oslokommune/punkt-assets/dist",
  $icon-path: "/assets/icons"
);

/* Bruk designsystemet */
@use "@oslokommune/punkt-css/dist/scss/pkt";

5. Fjern lokal css

/* src/App.vue

Fjern app-spesifikk fontoppsett */
font-family: Avenir, Helvetica, Arial, sans-serif;

6. Legg pĂĄ klasse pĂĄ sidetittel

/* src/main.scss

Legg til responsiv header */
@use "sass:map";
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
/* Legg merke til at breakpoints hentes inn uten namespace: */
@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints" as *;
@use "@oslokommune/punkt-css/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");
  }
}
<!-- src/components/HelloWorld.vue

Legg til den nye klassen -->
<h1 class="h1">{{ msg }}</h1>
<!-- src/App.vue

Legg til logo -->
<img
  class="oslologo"
  alt="Oslo kommune logo"
  src="@oslokommune/punkt-assets/dist/logos/oslologo.svg"
/>

<style lang="scss">
  /* Legg til moduler */
  @use "sass:map";
  @use "@oslokommune/punkt-css/dist/scss/abstracts/variables";

  /* Legg til klassen for logoen */
  .oslologo {
    margin-bottom: map.get(variables.$spacing, "size-30");
    height: 12rem;
  }
</style>

🏎️ Kom i gang - cdn

Ved ĂĄ inkludere Punkts css via vĂĄr cdn pĂĄ punkt-cdn.oslo.kommune.no, er du kjapt igang uten noe byggesteg.

Link til ønsket CSS-fil i <head>-taggen din. Vi anbefaler å bruke pkt.min.css for å få den minifiserte versjonen av hele css-rammeverket. Du kan også velge å importere enkelte moduler, eller bare base-modulen.

Se tilgjengelige filer pĂĄ cdn.

<!doctype html>
<html lang="no">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Punkt</title>
    <link href="https://punkt-cdn.oslo.kommune.no/latest/css/pkt.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Velkommen til Oslo Origo</h1>
    <img
      src="https://punkt-cdn.oslo.kommune.no/latest/logos/oslologo.svg"
      alt="Oslo kommune logo"
      height="64"
    />
  </body>
</html>

🟪 Ikoner

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.

VĂĄre CSS-klasser som inneholder et ikon importerer ikonet fra vĂĄr CDN. Om du har en content security policy(CSP) satt opp mĂĄ du ĂĄpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.

Les mer om ikoner her.

🎨 CSS-rammeverket

  • 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.

Innhold

KategoriBeskrivelse
AbstractsVariabler, funksjoner, mixins: Alle Sass-verktøy som brukes på tvers av rammeverket
NormaliseNormalisering for ĂĄ ha en felles baseline
BaseGrunnleggende moduler som farger, grid, spacing, hjelpeklasser, mm.
ElementsHTML-elementer som er stylet, som knapper, lister og tabeller.
ComponentsKomponenter som kombinerer elementer og komponenter for ĂĄ lage mer komplekse komponenter

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.

Variables

Folderen /variables er en samling Sass-variabler skrevet pĂĄ formen Sass maps. Dette gir en fin mĂĄte ĂĄ kategorisere variablene og gir mulighet for nested maps.

/* 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.

Functions

Nedenfor er et eksempel pĂĄ bruk av en SCSS map-get-funksjon. Den brukes til ĂĄ hente ut verdier fra vĂĄre variabler.

Man kan hente verdier med denne funksjonen fra:

@use "sass:map";
@use "@oslokommune/punkt-css/scss/abstracts/variables";

.wrapper {
  max-width: map.get(variables.$breakpoints, "phablet");
  padding: map.get(variables.$spacing, "size-24");
  background-color: map.get(variables.$pkt-colors, "color-red");
  font-size: map.get(variables.$font-size, "size-54");
}

Mixins

Mixins er nyttige når du ønsker å gjenbruke en gruppe av CSS-regler på flere steder i stilsettet ditt. Se eksempel nedenfor på hva som finnes i Punkt:

Breakpoints

@use '@oslokommune/punkt-css/scss/abstracts/mixins/breakpoints' as *;

@include bp('phablet') { /* 576 til 767px */
  ...;
}

Typografi

@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography" as *;

.page-header {
  @include get-text("pkt-txt-40-light");
  margin-top: 0.6em;
  margin-bottom: 0.4em;
}

Les mer om breakpoints og typografi.

Normalise

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. Nettlesere har sin egen innebygde stil, og disse stilene varierer fra nettleser til nettleser. For eksempel kan margins, padding og linjehøyde variere.

Normaliseringen vi gjør i Punkt er forsøkt gjort så liten som mulig.

Se i koden for hva som er normalisert i Punkt.

Base

VĂĄr base har Oslo kommune-stiler som typografi, farger, spacing og hjelpeklasser som for eksempel synlighet og screen-readers-only.

Les mer om:

Elements

I et designsystem refererer elementer og komponenter til forskjellige nivĂĄer av gjenbrukbarhet og abstraksjon i koden. Elementer er de minste byggeklossene i vĂĄrt designsystem, som for eksempel pkt-list eller pkt-section.

<div class="pkt-section--grey p-size-20">
  <p class="pkt-txt-18-medium">Lista:</p>
  <ul class="pkt-list">
    <li>listelement</li>
  </ul>
</div>

Components

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.

Alle vĂĄre komponenter er dokumentert under komponenter.

🔢 Versjonering

Punkt bruker Semantic Versioning 2.0.0 for versjonering av pakkene.

đź‘® Lisens

Punkt er distribuert under MIT-lisens for ĂĄpen kildekode.

NPM License