Maler og kodesnippets
Her samler vi styling og maler som kan benyttes direkte
I denne siden vil vi samle litt maler og stiler som kan benyttes direkte herifra når man lager en ny løsning. Fordelen med de er at en hver oppdatering som skjer her vil direkte redigere alle sidene som benytter disse stilsettene.
Hva har vi laget?
Så langt har vi to ansamlinger av datatyper, scripts og css. For en interaktiv side må man ofte linke opp begge deler.
Noen av elementene krever både en javascript fil, et stilsett og en html-snippet. Per nå er det kun laget javascript-versjoner av f.eks headeren, men på sikt vil det dukke opp versjoner som kan hentes ned server side i f.eks .net core prosjektene. Vi er ikke helt der ennå.
Applikasjonene våre
Per nå benytter vi kun header som felleselement på applikasjoner med egen ux. Da holder det å inkludere relevant js og css, ikke alle stylesheets og js.
Strukturen
Lenke til filstruktur.
Se ressurser
Header og footer
Både header og footer har hver sine css og js-filer. Du kan derfor velge å kun bruke en av dem om ønskelig.
Inkludere filer
Hvis du ønsker både header og footer kan du inkludere disse scriptene i header-taggen på siden du bygger.
<link href="https://design.artsdatabanken.no/style/style-reset.css" rel="stylesheet" />
<link href="https://design.artsdatabanken.no/style/compiled-css/header.css" rel="stylesheet" />
<link href="https://design.artsdatabanken.no/style/compiled-css/footer.css" rel="stylesheet" />
<script src="https://design.artsdatabanken.no/script/compiled-js/header.js"></script>
<script src="https://design.artsdatabanken.no/script/compiled-js/footer.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">