CSS import

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

All styling fra Aksel kommer med innebygd css-layers. Dette gjør at all styling vil ha spesifitet 0.

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

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

index.css og index.min.css finnes versjonert på Nav CDN.

<link 
  rel="preload" 
  href="https://cdn.nav.no/aksel/@navikt/ds-css/8.0.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.