Jøkuler et designsystem utviklet avFremtind.
Jøkul gir deg ferdige React-komponenter samt CSS- og SCSS-stilark for de grunnleggende komponentene og designmønstrene til Fremtind. De følger Fremtinds designprinsipper.
React-komponentene våre er er den raskeste og enkleste måten å ta i bruk Jøkul. CSSen er tilgjengelig som separate pakker, så om du ikke bruker React kan du fremdeles bruke Jøkul.
For å starte utviklingsserveren for Jøkul lokalt må du først ha installert:
- [Node]-versjonen definert i
.nvmrc
,gjerne viaNode Version Manager (NVM). - pnpm,gjerne via
corepack
ellernpm
.- På de nye Fremtind-Macene kan det hende at du må installere
corepack
via Homebrew for at det skal fungere ordentlig: Installer medbrew install corepack
,og gjør klar medcorepack install
inne i Jøkul-mappa.
- På de nye Fremtind-Macene kan det hende at du må installere
Så, etter å ha klonet repoet:
pnpm boot
pnpm dev
- Åpnelocalhost:8000
- Kjør
pnpm reboot
om du kommer tilbake til Jøkul-prosjektet etter en stund, eller noe ikke fungerer som du forventer. - Om du opplever feil fra
nx
,prøvpnpm dlx nx reset
og kjør kommandoen på nytt. pnpm dev
har live reloading forportalen,ikke kildekoden til pakkene. Kjørpnpm build
for pakken du endrer, så oppdaterer portalen seg.- Hver pakke har sin egen devserver bak
pnpm dev
om du skal jobbe på noe isolert, og ikke trenger hele portalen.
Kjapt ompnpm dev
i pakkene
For å teste server-side rendering har vi det problemet at serverdelen må restarte for at første render skal bli oppdatert med det nyeste. Vi bruker nodemon for å restarte denne automatisk ved endringer.
En ulempe med det er at hvis du hartodevservere kjørende vil du få et nytt portnummer på én av de hver gang. Du kan komme deg rundt det problemet ved å sette PORT-miljøvariabelen til noe annet enn 1234. For eksempelPORT=1235 pnpm dev
.
Vi har en egen guide som hjelper deg med åkomme i gangsom ny bruker av Jøkul.
Du kan bruke Jøkul på to måter:
- Bruke React-komponenter og stilark.
- Ta inn kun stilark.
Komponentpakkene inneholder alt som trengs, inkludert avhengigheter til andre Jøkul-pakker.
NB!Selv om komponentpakkene inneholder alle avhengigheter må du selv sørge for å importere stilpakken i koden din. Dette er fordi vi ikke vil legge for harde føringer på utviklerverktøy, for eksempel kreve Webpack.
Installer React-pakken, for eksempelnpm i @fremtind/jkl-button-react
.Den sørger for å laste ned CSS-pakken, men du må selv sørge for at CSSen faktisk blir brukt i prosjektet ditt.
import{PrimaryButton}from"@fremtind/jkl-button-react";
import"@fremtind/jkl-button/button.min.css";// husk å importere stilarket
...
<PrimaryButtononClick={doStuff}>Cool</PrimaryButton>
...
Noen ganger må du også importere stilarkene til avhengigheter av komponenten du skal bruke. Et eksempel erpakken for tabeller,hvor du trenger CSSen til en annen pakke hvis du skal lage ekspanderbare tabellrader. Sjekk README-fila i hver enkelt React-pakke for å se hva den trenger.
Hvis du ikke vil bruke React-komponentene kan du bruke stilarkene direkte. Pakkene med stilark publiseres både med ferdig kompilert og prefikset CSS i minifisert og uminifisert variant, i tillegg til SCSS-kildekoden.
npm i @fremtind/jkl-button
import"@fremtind/jkl-button/button.min.css";
...
<buttonclassName="jkl-button jkl-button--primary"onClick={doStuff}>Cool</button>
...
Hvis prosjektet ditt også bruker SCSS kan du hente stiler via samme filnavn som CSSen. I tillegg har@fremtind/jkl-core
en modul med mixins, variabler og funksjoner som brukes internt i Jøkul. Disse kan være nyttige også i ditt eget prosjekt.
@use"@fremtind/jkl-core/jkl";//⬅️ Mixins, variabler og funksjoner
@use"@fremtind/jkl-core/core";//Stilene som kompileres til @fremtind/jkl-core/core.css
@use"@fremtind/jkl-button/button";//Stilene som kompileres til @fremtind/jkl-button/button.css
//osv.
Om du skal bygge komponenter for Fremtind, utover de som finnes i Jøkul, bør du bruke variablene fra@fremtind/jkl-core.Det sørger for at farger, sperring, typografisk skala og liknende holder seg oppdatert mot endringer i designsystemet.
Idokumentasjonenfinner du:
- Informasjon om hvordan du bruker Jøkul.
- Designprinsippene til Fremtind.
- Detaljert dokumentasjon for hver komponent, inkludert eksempler.
- Guider for ulike ting, blant annethvordan gjøre endringer i Jøkul.
- Bloggen vår,med jevnlige oppsummeringer av hva som er nytt i Jøkul.
Jøkul er et åpent og positivt felleskap der alle skal føle seg velkommen. Gjør deg kjent medvåre etiske regler for bidragsyterefør du deltar med bidrag.
Jøkul er distribuert underMIT-lisensenfor åpen kildekode.
Takk for bidrag fra disse flotte menneskene (emoji-oversikt):
Dette prosjektet følger retningslinjene i spesifikasjonenall-contributors.Vi setter pris på alle bidrag!