Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Aksel får mønster og maler

Mønster og maler har lenge vært en hellig gral for Aksel. Vi har sett for oss at dette vil være det beste formatet for oss i NAV for å lage frontend på ganske lik måte.

10. november 2023
Sjur Grønningsæter

Hva er maler og mønster?

Mønster og maler har sikkert forskjellig betydning for mange. Vi vet at vi til tider snakker om dem litt om hverandre også 🤷‍♂️

Vår definisjon av mønster:

  • Kodeeksempler og dokumentasjon for hvordan et konsept fungerer og/eller ser ut.
  • Kan implementeres forskjellig avhengig av kontekst, teknologi, osv.
  • Eksempler: Skjemavalidering, notifikasjoner, laste-state

Vår definisjon av mal:

  • Kode og dokumentasjon for utseende og utforming til en side, eller del av en side.
  • Koden skal det være relativt enkelt å kopiere inn i sitt eget prosjekt.
  • Dokumentasjonen beskriver og forklarer malen. Hvilke deler som er faste i en mal og hvilke deler som er valgfrie.
  • Eksempler: Feilsider (feks. 404), skjema-intro, skjema-layout, side-layout for interne flater.

Noe måtte på plass først

Vi så at vi måtte få på plass noen byggeklosser før vi kunne lage mønster og maler som skulle funke for alle i NAV. Vi ville gjøre det enklest mulig å sette opp layouts og replikere dem i egen applikasjon. Det vil gjøre det lettere å jobbe sammen og hjelpe hverandre med å lage mønster og maler som fungerer for alle. Det handler om å snakke samme språk og å ha samme forståelse. Første sett med layout-komponenter er nå klare, og vi kaller dem Primitives. Du finner de på denne siden.

Første generasjon maler

Vi starter med en enkel mal, og så lærer vi og justerer basert på tilbakemeldingene på denne. Oppsettet på siden er ganske enkelt. Vi har satt opp det vi tror er viktig for å forstå og bruke en mal:

  • Intro
  • Versjonerte kodeeksempler
  • Om malen
  • Hva den skal brukes til
  • Faste og valgfrie deler
  • Eksempler på bruk
  • Endringer

Den første malen er ute nå 👉 404-siden 👈. Sjekk ut dokumentasjonen og ta kontakt om det er noe du lurer på. Som du kan se på siden så har vi lyst til å lenke til sider som bruker malen. Supert om du gir oss beskjed hvis du bruker den (GitHub)!

Det kommer mer

Flere maler blir fokus framover. Vi vil lære masse om hvordan malene bør dokumenteres og kodes. Det kommer sikkert en del oppdateringer på malene vi har lansert også. Når vi har fått stabilisert konseptet for maler vil vi gå løs på mønster.

Bidragsytere

Sjur Grønningsæter

Publisert: 10. november 2023