Kom igång
För att använda designsystemets stilmall behöver du inkludera designsystemets stilmall (CSS) och tagga upp ditt innehåll med designsystemets CSS-klasser.
Bygga en sida från grunden
- Ladda ner senaste versionen av mallar (zip)
- Avgör om du ska använda en global mall eller lokal mall (t.ex. Akka, Digital behörighet och Stipendiehantering)
- Basera ditt gränssnitt på strukturen i den valda mallens html-fil
- Skapa eventuellt en systemspecifik stilmall beroende på på systemets förutsättningar
- Skapa funktioner och innehåll med hjälp av designsystemets byggstenar
Anpassa befintlig sida
- Avgör om du ska använda en global mall eller lokal mall (t.ex. Akka, Digital behörighet och Stipendiehantering)
- Gå till mallen och ladda ner html-filen eller inspektera sidans källkod för att efterlikna strukturen och se vilka CSS-klasser som används
- Inkludera designsystemets stilmall (se nedan)
- Skapa eventuellt en systemspecifik stilmall beroende på på systemets förutsättningar
- Skapa funktioner och innehåll med hjälp av designsystemets byggstenar
Inkludera designsystemets stilmall
Du kan välja att antingen ladda hem stilmallen lokalt eller länka till den version du vill använda.
Ladda ner stilmall
Tänk på att aldrig redigera designsystemets stilmall. Om du behöver göra ytterligare stilregler är det bättre att skapa en systemspecifik stilmall som du inkluderar efter designsystemets stilmall.
Länka in versionssatt stilmall
Att direktlänka till designsystemets stilmall bör endast göras när du utvecklar ett nytt gränssnitt. Ett produktionssatt system bör istället hämta hem en version lokalt.
Vi rekommenderar i de flesta fall att du använder en versionssatt stilmall så att du har kontroll över när förändringar införs och har möjlighet att testa nya versioner innan de införs i en produktionsmiljö.
Alla versioner finns på https://static.uu.se/designsystem/
Länka in på följande sätt (byt ut versionsumret):
<link rel="stylesheet" type="text/css" href="https://static.uu.se/designsystem/[VERSIONSNUMMER]/theme-uu/css/uu-system-style.css">
Länka in senaste versionen av stilmallen
Att direktlänka till designsystemets stilmall bör endast göras när du utvecklar ett nytt gränssnitt. Ett produktionssatt system bör istället hämta hem en version lokalt.
För att hela tiden få de senaste ändringarna kan du välja att länka in den senaste versionen av designsystemet. Observera att denna metod gör att du inte har kontroll över när designförändringar införs i systemet.
<link rel="stylesheet" type="text/css" href="https://static.uu.se/designsystem/latest/theme-uu/css/uu-system-style.css">
Användarupplevelse
Mallarna följer designsystemets riktlinjer men är bara en startpunkt för en bra användarupplevelse. Mer information om hur vi skapar en bra och enhetlig användarupplevelse hittar du under UX och tillgänglighet.