Lag et nytt prosjekt med Jøkul

Pakker

Om du skal bygge et nytt prosjekt med Jøkul er det noen grunnleggende pakker du alltid bør ha installert:

I tillegg har vi pakker for mange ulike komponenter, og noen pakker med hjelpefunksjoner for validering, formatering, og nyttige React hooks. Det er lettere å få oversikt over komponentene og hva de gjør under Komponenter.

npm i @fremtind/jkl-core @fremtind/jkl-webfonts @fremtind/browserslist-config-jkl

Krav til HTML

For at stiler skal bli riktige kreves det at klassen jkl settes på rotnivå.

function App({ children }) {
  // Den trenger ikke være satt på body, men elementer uten klassen jkl på parent vil ikke se riktige ut
  return <body className="jkl">{children}</body>;
}

Vi bruker jkl-klassen til å blant annet:

Sette riktige fonter.
Gi standardfarger til tekst og bakgrunn.
Noen CSS resets.

Krav til script

For at komponentene i Jøkul skal virke riktig trenger de å vite om brukeren navigerer i løsningen med mus, tastatur eller touch. Det gjøres ved å kjøre initTabListener funksjonen fra @fremtind/jkl-core. Det trengs bare gjøres én gang, helst så tidlig som det lar seg gjøre. Normalt vil det være i entrypointet i applikasjonen din.

import { initTabListener } from "@fremtind/jkl-core";

initTabListener();

initTabListener ser på hvordan siden interageres med – museklikk, tastetrykk, eller touch – og setter automatisk et data-attributt på <body>, som Jøkul bruker til blant annet å vise enda tydeligere fokusringer ved tastaturnavigasjon.

Fonter

Bruk med Sass

Om du bruker Sass-stilark i prosjektet ditt er dette den enkleste måten å få riktige fonter. I rot-.scss-filen din:

@use "@fremtind/jkl-webfonts/webfonts.scss" with (
    $webfonts-dir: "../relative/path/to/node_modules/@fremtind/jkl-webfonts/fonts"
);

Bruk med CSS

Om du ikke bruker Sass kan du benytte deg av den vanlige .css-versjonen. Denne versjonen ser kun etter fontfilene i mappen /fonts.

Browserslist

Etter å ha lagt til @fremtind/browserslist-config-jkl som en devDependency bruker du den ved å legge til browserslist-feltet i package.json:

{
    "browserslist": ["extends @fremtind/browserslist-config-jkl"]
}