Styleguide

Komma igång med styleguiden

Här kan du läsa om hur du kommer igång med styleguiden, både när du startar ett helt nytt projekt ocn när du lägger till styleguiden i ett befintligt projekt.

När du startar ett helt nytt utvecklings­projekt

Snabbaste sättet att komma igång när du startar ett nytt projekt är att utgå ifrån frontend arketypen som finns i gitlab Länk till annan webbplats.

När du lägger till styleguiden i ett befintligt utvecklings­projekt

Det finns i huvudsakligen två sätt att lägga till styleguiden i ditt projekt:

  1. Installera styleguiden via npm.
  2. Manuellt lägga in CSS och javascript länkarna i ditt projek.

Webbkomponenter

I Styleguiden bygger vi våra komponenter som webbkomponenter. Det gör det både enklare att integrera Styleguides komponenter i JavaScript ramverk som till exempel Angular samtidigt som det underlättar utvecklingen av nya komponenter.

Installera styleguide via npm

Om ditt utvecklingsprojekt använder NodeJS, kan du enkelt kan installera webbkomponenterna med:

npm install -save --save-exact @sjv/component-library@19.4.5

Webbkomponenter i Angular

Använder du Angular måste du även importera och ladda in webbkomponenterna tillsammans med din Angular kod. Ett lämpligt ställa att göra detta är i main.ts.

// Import Styleguide web components.
import { defineCustomElements, applyPolyfills } from '@sjv/component-library/dist/loader';

// Load styleguide web components.
applyPolyfills().then(() => {
  defineCustomElements(window);
});

För att kunna använda webbkomponenter i Angular måste du även lägga in CUSTOM_ELEMENTS_SCHEMA i de Angular moduler du använder webbkomponenter för att undvika att få komplieringsfel.

import { BrowserModule } from '@angular/platform-browser';

// CUSTOM_ELEMENTS_SCHEMA allows the use of the web components in the HTML markup 
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

Ikoner i Angular projekt

För att lägga in alla ikoner lägg in följande i din angular.json fil under "styles". Detta kommer göra att ikonerna lägger sig i en egen bundle fil.

"styles": [
{
  "input": "./node_modules/@sjv/component-library/dist/release/sjv-ikoner.css",
  "bundleName": "sjv-ikoner"
},
...

CSS i Angular

Använder du Angular måste du även importera styleguidens CSS på ett lämpligt ställe t.ex. i styles.scss.

@import url("~@sjv/component-library/dist/release/sjv-komponentbibliotek.css");

// Om du vill använda bootstrap grid kommentera bort raden nedan.
//@import url("~@sjv/component-library/dist/release/assets/bootstrap-grid.css");

Hela styleguiden använder två klasser

  • Du bör lägga till klassen 'e-html' i HTML-taggen. Klassen sätter vissa typografiska avstånd och andra inställningar, till exempel fontstorleken 100 procent.
  • Du bör lägga till klassen "e-body" till body-taggen. Taggen sätter styleguidens typografiska regler för rubriker, listor, stycken och teckenstorlekar samt regler för avstånd och ikoner.

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/19.4.5/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-93gV5AqMKOQAr0okuU/zRZ1907Q+YezmlAW4z4EoADs=" crossorigin="anonymous">
Efter att du hämtat CSS:en kan du välja vilka komponenter du vill använda och kopiera in html-koden från styleguiden till ditt projekt.

Hela styleguiden använder två klasser

  • Du bör lägga till klassen 'e-html' i HTML-taggen. Klassen sätter vissa typografiska avstånd och andra inställningar, till exempel fontstorleken 100 procent.
  • Du bör lägga till klassen "e-body" till body-taggen. Taggen sätter styleguidens typografiska regler för rubriker, listor, stycken och teckenstorlekar samt regler för avstånd och ikoner.

Hämta JavaScript

Till några av våra komponenter finns det JavaScript och på liknande sätt som för styleguidens CSS så går det att lägga till en script-tagg i projektets index.html-fil.

<script  src="https://cdn.jordbruksverket.se/designsystem/19.4.5/package/dist/designsystem/designsystem.js" integrity="sha256-HbmWBW/LJ04UhcqrlWrLrw6/YpCT6ge1barXDRCwkSw=" crossorigin="anonymous"></script>

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/19.4.5/package/dist/designsystem/designsystem.esm.js" integrity="sha256-HbmWBW/LJ04UhcqrlWrLrw6/YpCT6ge1barXDRCwkSw=" crossorigin="anonymous"></script>

Det första skriptet kommer endast köras i webbläsare med stöd för ES moduler medans det andra scriptet endast kommer köras i webbläsare som saknar stöd för ES moduler.

Storleken på komponenterna

De flesta komponenterna använder rem som css enhet. Rem är en relativ enhet som baseras på fontstorleken (font-size) på root elementet <html>, vilket gör att komponenterna storlek baseras på vilken fontstorlek du satt på <html> elementet.

Vår rekomendation är att du använder en fontstorlek på 100 % vilket motsvarar 16 px för att komponenterna ska få rätt storlek.

I styleguidens CSS finns en klass som heter e-html som du kan sätta på ditt systems html element, denna klass sätter fontstorleken till 100 %, det vill säga 16 px.

Vi använder inte jQuery

Om du vill ta in en jQuery-komponent, måste du själv se till att alla nödvändiga jQuery-bibliotek finns med.

Beställa en ny komponent

Kontakta styleguide-teamet om du har behov av en komponent eller en variant av en komponent som inte redan finns i styleguiden. Du kan också kontakta oss om du är osäker på hur du ska använda en komponent. Du når teamet enklast genom att mejla till styleguide@jordbruksverket.se.

Senast publicerad

Sidansvarig för sidan är Styleguide