Vad innehåller stilguiden

Stilguiden innehåller dokumentation om regler och standarder för utvecklare, designers och beställare. Den innehåller även ett dokumenterat grundramverk och en växande uppsättning av komponenter som följer rådande praxis.

Exempel på dokumentation stilguiden innehåller:

  • Hur man sätter upp stilguiden lokalt och vilka grundläggande krav som ställs på utvecklarens miljöer
  • Hur man arbetar med stilguiden
  • Hur man bidrar med nytt innehåll till stilguiden
  • Hur man publicerar nya komponenter på NPM
  • Vilka webbläsare som ramverket stödjer
  • Vilka webbläsartekniker som används
  • Vilka kodstandarder och regler för HTML, CSS (Sass) och JavaScript
  • Hjälpverktyg (T.ex. Stylelint och Editorconfig)
  • Lägsta tillgänglighetskrav som måste följas
  • Lägsta prestandakrav som måste följas (prestandabudget)
  • Test-verktyg som bör och kan användas
  • Licens för användning av stilguiden
  • Förklaring av Open Source och hur det går till att bidra till projektet

Ramverket

Ramverket är den grundläggande delen av stilguiden som fastställer och dokumenterar användning av färger, typsnitt, knappar, tabeller, listor, varningsmeddelande, formulär, ikoner, layout, teman med mera. Den fastställer även grundläggande återställning av webbläsare samt ett grundutseende för utskrift.

Ramverket är startpunkten för alla nya projekt. Den underlättar ett arbete med metoderna Progressive Enhancement och Mobile First och är ett snabbt sätt för utvecklare att komma igång.

Komponenter

Komponenterna i stilguiden är byggstenarna för alla projekt. Varje komponent är testad mot tillgänglighet, användbarhet, prestanda och webbläsare som stöds.

Varje komponent i stilguiden innehåller dokumentation om när och hur komponenten bör och skall användas. Om komponenten finns i flera varianter visas exempel på varje variant. Om komponenten är implementerad i någon digital lösning visas en länk till de ställen där komponenten används. Komponenten följer de krav och riktlinjer som finns uppsatta för HTML, CSS och JavaScript.

Exempel på komponenter som ingår i stilguiden:

  • Header (sidhuvud)
  • Footer (sidfot)
  • Primary Navigation (huvudnavigation)
  • Secondary Navigaton (vänsternavigation)
  • Cookie Consent (cookie-meddelande)
  • Breadcrumbs (brödsmulor)
  • Pagination (paginering)
  • Cards (puffar)
  • Search form (sökformulär)
  • Search autocomplete (sökformulär med autocomplete)

Templates (Sidmallar)

Stilguiden visar även exempel på färdiga sidmallar som i sin tur är uppbyggd av de olika komponenterna. Det kan vara användbart på flera sätt, exempelvis är det ett effektivt och precist sätt att kommunicera helheten men även för att testa design och funktion vid sammansättning av komponenter. Exempel på sidmallar kan vara startsida, artikelsida, sök-sida etc.