Hopp til innhold
Nerdesign v1.2.0

Nerdesign · leveranse

Kom i gang

Én CSS-fil, en fontfil og et lite ECharts-tema – ingen byggsteg

Filene

FilInnholdNår
nd.cssTokens (lys, mørk, print), basestiler, layout og alle komponenterAlltid
nd-fonts.css + fonts/JetBrains Mono (OFL) for tall og graferDashboards og nettsider. Énfils-dokumenter lar den være og bruker systemets monospace
nd-theme.jsValgfri bryter auto / lyst / mørktNår siden skal ha en tema-bryter
nd-echarts.jsECharts-tema og option-hjelpere som leser tokens ved kjøring, datatabell, temabytteDashboards med grafer (ECharts leveres ikke – ta den fra npm eller CDN)
nd-lightbox.js + vendor/photoswipe/Lysboks for alle bilder (PhotoSwipe 5, MIT)Sider med bilder

Nettside eller dashboard

Kopier filene inn i prosjektet (for eksempel i en mappe nd/) og lenk dem som statiske filer. Ikke rediger kopiene – hent en ny versjon når systemet oppdateres. Første linje i hver fil sier hvilken versjon du har.

<script>try{var t=localStorage.getItem('nd-theme');if(t&&t!=='auto')document.documentElement.dataset.theme=t}catch(e){}</script>
<link rel="stylesheet" href="nd/nd-fonts.css">
<link rel="stylesheet" href="nd/nd.css">

<script type="module">
  import { ndTheme } from './nd/nd-theme.js';
  ndTheme.init();                                   // følger lagret valg
  ndTheme.mount(document.querySelector('#tema'));   // valgfri bryter
</script>

Den første <script>-linjen hindrer et lyst glimt før stilarket lastes hos dem som har valgt mørkt.

Énfils-dokument

Dokumenter som skal skrives ut eller sendes som én fil limer hele nd.css inn i <style>. Versjonslinjen følger med. Legg dokumentets egne regler – kolonnebredder, spesielle marger – i en egen <style> under.

<!doctype html>
<html lang="nb">
<head>
  <meta charset="utf-8">
  <title>Kursoversikt</title>
  <style>/* Nerdesign v0.0.1 – … */ … innholdet i nd.css … </style>
  <style>/* dokumentets egne regler */</style>
</head>
<body>
  <section class="nd-sheet">
    <header class="nd-header">
      <p class="nd-kicker">Gården · Kursoversikt</p>
      <h1>Vaskerom</h1>
      <p class="nd-subtitle">Sikringsskap · kurs 1–13</p>
    </header>
    …
  </section>
</body>
</html>

Bilder i lysboks

Ett kall gjør alle bilder i gallerier, kort, hero og to-kolonner klikkbare. Lenk også PhotoSwipe-stilarket.

<link rel="stylesheet" href="nd/vendor/photoswipe/photoswipe.min.css">
<script type="module">
  import { ndLightbox } from './nd/nd-lightbox.js';
  ndLightbox();   // data-full="stor.jpg" på <img> gir egen fullversjon; data-nd-zoom="false" unntar
</script>

Grafer

Last ECharts selv (den er ikke en del av Nerdesign), så gjør nd.mount resten: tema fra tokens, nytt tegn ved temabytte, redusert bevegelse, aria og datatabell.

<script src="vendor/echarts.min.js"></script>
<script type="module">
  import * as nd from './nd/nd-echarts.js';
  nd.wireDataTables();
  nd.mount(echarts, document.getElementById('c1'), (t) => ({
    ...nd.base(t), xAxis: nd.timeAxis(t), yAxis: nd.valueAxis(t, 'kW'),
    series: [{ type: 'line', name: 'Hovedhuset', data }],
  }), { table: () => ({ headers: ['Tid', 'kW'], numeric: [1], rows }) });
</script>

Se graf-komponenten for markupen rundt.

Tema

Uten noe mer følger siden systeminnstillingen. <html data-theme="dark"> eller "light" tvinger et tema; det er det bryteren i nd-theme.js gjør. Utskrift er alltid lys på hvitt, uansett tema på skjermen.

Regler