Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@fremtind/jkl-core
Advanced tools
@fremtind/jkl-core
Inneholder grunnstilen til designsystemet Jøkul. Inneholder også et normaliserings-stilark som sørger for at alle nettlesere har samme utgangspunkt når de skal vise en Fremtind-side.
Dersom du skal bygge komponenter for Fremtind, utover de som finnes i Jøkul, bør du bruke variablene her. Det sørger for at farger, sperring, typografisk skala og liknende holder seg oppdatert mot endringer i designsystemet.
Se portalen for bruk og prinsipper.
npm i @fremtind/jkl-core
.import { initTabListener, Link } from "@fremtind/jkl-core";
initTabListener();
// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-core/core.min.css";
// Eller importer stilark via SCSS.
@use "@fremtind/jkl-core/core";
// Bruk Jøkuls mixins, funksjoner og variabler via jkl-modulen.
@use "@fremtind/jkl-core/jkl";
@include jkl.light-mode-variables {
// ...
}
// Du finner også variablene fra Jøkul i Less-format her
@import "@fremtind/jkl-core/tokens.less";
jkl
For at CSSen i Jøkul skal fungere som forventet må du sette klassen jkl
på rotnivå i applikasjonen din.
Vi bruker jkl
-klassen til å blant annet:
Du har kanskje en komponent som heter Layout
eller App
hvor du kan sette denne klassen? Om du er usikker, sett klassen på body
.
import React, { FC } from "react";
import { WithChildren } from "@fremtind/jkl-core";
export const Layout: FC<WithChildren> = ({ children }) => {
return <div className="jkl">{children}</div>;
};
initTabListener()
Av tilgjengelighetshensyn viser vi fokusomriss på interaktive elementer når man navigerer en løsning ved hjelp av tastaturet. Normalt blir disse omrissene også vist når man bruker musen for navigasjon, noe vi ikke ønsker.
Hjelpefunksjonen initTabListener()
sørger for å sette et flagg på <body>
når man navigerer med musen, som skjuler omrissene. Importer og kall funksjonen på rotnivå i prosjektet ditt (der siden rendres).
import { initTabListener } from "@fremtind/jkl-core";
initTabListener();
Noen løsninger, spesielt rådgiverløsninger, har behov for å vise veldig mye informasjon på skjermen samtidig. Derfor ønsker vi å tilby kompakte versjoner av komponentene til dette formålet.
For å gjøre det enklere å ha kompakt modus på en hel løsning tillater vi å sette en attributt data-layout-density="compact"
på <body>
(eller et annet element) slik at alle komponenter inne i dette elementet blir kompakte.
getValuePair()
Noen komponenter, som Select
og RadioButtons
, kan ta inn verdier enten som en streng eller som et ValuePair
-objekt med en value
og et label
. Hjelpefunksjonen getValuePair
konstruerer et ValuePair
fra en string
, for å sikre enkel implementasjon av disse komponentene. Funksjonen sender gjennom ValuePair
-objekter uendret:
import { getValuePair } from "@fremtind/jkl-core";
getValuePair("En verdi"); // { label: "En verdi", value: "En verdi" }
const value = { label: "En annen verdi", value: "value2" };
getValuePair(value); // returnerer objektet som det er
Denne er fin å bruke sammen med map()
for å rendre valg:
const choices = ["Valg 1", "Valg 2", "Valg 3"];
return choices.map(getValuePair).map((choice) => (
<option selected={choice.value === selectedValue} value={choice.value}>
choice.label
</option>
));
Følg offisielle installasjonsinstruksjoner for å legge til Tailwind i prosjektet ditt.
For å integrere Jøkul med Tailwind, må du legge til Jøkul-preseten i tailwind.config.js
.
import { tailwindPreset } from "@fremtind/jkl-core";
/** @type {import('tailwindcss').Config} */
export default {
presets: [tailwindPreset],
// ...
};
export const TailwindExample = () => {
return (
<div className="bg-background-page">
<h1>Hei, Tailwind!</h1>
</div>
);
};
TailwindPreset er for øyeblikket konfigurert ved hjelp av Jøkul-tokens for følgende:
Vind er et subset av Tailwind CSS, med grunnlag i Jøkuls design tokens, som fokuserer på:
import "@fremtind/jkl-core/core.min.css";
// Vind trenger core og klassen jkl på rotnivå for å fungere
import "@fremtind/jkl-core/vind.min.css";
@use "@fremtind/jkl-core/core";
// Vind trenger core og klassen jkl på rotnivå for å fungere
@use "@fremtind/jkl-core/vind";
Du finner igjen disse tingene du kanskje kjenner fra Tailwind:
font-serif
finnes ikke)font-normal
og font-bold
)Vi har egne utils for typografi som passer med vår egen typografiskala.
.title
.title-small
.heading-1
.heading-2
.heading-3
.heading-4
.heading-5
.body
.small
FAQs
Jøkul core styles
We found that @fremtind/jkl-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.