Aksel tilbyr fleksibilitet når du skal importere komponent-styling til løsningen din. For de fleste vil det enkle ofte være det beste og all stylingen du trenger for å bruke Aksel kan hentes direkte.

@import "@navikt/ds-css";

Spesifisitet

Hvis man overskriver en del styling fra Aksel, ender man ofte opp med problemer med spesifisitet. Den nye CSS-løsningen layers løser dette. All styling importert fra Aksel vil her få lavest spesifisitet.

@import "@navikt/ds-css" layer(aksel);

Minified og prefikset

CSS fra @navikt/ds-css er ikke minified, men fra v2.9.0 vil all CSS ha en ekstra *.min.css-versjon som håndterer dette.

De fleste moderne bundlere og frameworks håndterer dette automatisk. Dette vil defor være mest nyttig hvis man laster CSS fra CDN eller andre løsninger som ikke kjører post-processing med f.eks. postcss, eks inlinet CSS (bør unngås).

Globale stiler

Man kan velge å manuelt trekke inn bare deler av det globale stilsettet. Hvis man fortsatt ønsker all komponent relatert styling finner man det i components.css.

Globale stiler
@import "@navikt/ds-css/dist/global/fonts.css"; 
@import "@navikt/ds-css/dist/global/tokens.css"; 
@import "@navikt/ds-css/dist/global/reset.css"; 
@import "@navikt/ds-css/dist/global/baseline.css"; (required)
@import "@navikt/ds-css/dist/global/print.css"; 

Alle komponenter
@import "@navikt/ds-css/dist/components.css";

Opt-in komponentstyling

Det er ikke alltid man ønsker eller trenger å trekke inn all stylingen fra Aksel når man bruker komponentene. Dette vil være nyttig for web-components, løsninger som dekoratøren der hver eneste kB spart er viktig eller man bare ønsker å minske CSS-bundle med noen kB.

// Globale stiler
@import "@navikt/ds-css/dist/global/fonts.css";
@import "@navikt/ds-css/dist/global/tokens.css";
@import "@navikt/ds-css/dist/global/reset.css";
@import "@navikt/ds-css/dist/global/baseline.css";
@import "@navikt/ds-css/dist/global/print.css";

// Komponent stiler
@import "@navikt/ds-css/dist/component/typography.css";
@import "@navikt/ds-css/dist/component/accordion.css";
@import "@navikt/ds-css/dist/component/alert.css";
@import "@navikt/ds-css/dist/component/button.css";
@import "@navikt/ds-css/dist/component/loader.css";

CSS Cascading er viktig her, se vår implementasjon for referanse.

CDN

CSS finnes versjonert på Nav CDN.

<link 
  rel="preload" 
  href="https://cdn.nav.no/aksel/@navikt/ds-css/7.8.0/index.min.css" 
  as="style">
</link>

Hvis man velger å bruke CDN for lasting av CSS, burde man låse @navikt/ds-react (+ alle andre Aksel-løsninger) til samme versjon. CDN støtter ikke semver, så man må manuelt oppdatere versjoner og holde dem i synk.