Använda styleguiden

Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig till styleguide-teamet.

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 använda styleguidens startmall. Startmallen innehåller alla nödvändiga element för att du ska kunna använda styleguidens komponenter.

Hämta startmallen

<!doctype html>
<html lang="sv" class="e-html">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta title="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0"/>
    
    <link rel="manifest" href="site.webmanifest">
    <link rel="apple-touch-icon" href="icon.png">
    <!-- Place favicon.ico in the root directory -->
    <link rel="stylesheet" 
      href="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/release/sjv-komponentbibliotek.css" 
      integrity="sha256-V0Dbpm0uUHbTxUu5vGsoEPfNdschiM1kETOXTRHqaEE=" crossorigin="anonymous" >
    
    <script type="module" src="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/designsystem/designsystem.esm.js"></script>
    <script nomodule="" src="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/designsystem/designsystem.js"></script>
    <!-- Your custom CSS declarations here -->
    
     
     <meta name="theme-color" content="#fafafa">
  </head>
  <body class="e-body">
    <!--[if IE]>
    <p class="browserupgrade">You are using an outdated browser. Please upgrade your browser to improve your experience and security.</p>
    <![ endif]-->
    
    <!-- Add a header - see options here [https://styleguide.jordbruksverket.se/komponenter/header.html] -->
    <main role="main"><!-- Your content goes here --></main>
  
    <script src="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/release/sjv-komponentbibliotek.js"
            integrity="sha256-gtJgppuSTTruZn+SehB76iziuHl4qZGxqruwSiVjC8s=" crossorigin="anonymous"></script>
    <script>
      komponentbibliotek.init();
      <!-- Your custom JavaScript here -->
    </script>
  </body>
</html>

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

Du hämtar styleguidens CSS och JavaScript via CDN-servern genom att lägga in en länk till styleguidens CSS och JavaScript i projektets index.html-fil.

Hämta CSS

 <link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-V0Dbpm0uUHbTxUu5vGsoEPfNdschiM1kETOXTRHqaEE=" 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/15.1.4/package/dist/release/sjv-komponentbibliotek.js" integrity="sha256-gtJgppuSTTruZn+SehB76iziuHl4qZGxqruwSiVjC8s=" crossorigin="anonymous"></script>

Styleguidens JavaScript behöver köras efter att sidan renderas för att kunna koppla JavaScript funktionerna mot styleguidens komponenter på den aktuella sidan. JavaScriptet från styleguiden körs därför inte automatiskt utan du måste själv se till att den körs.

komponentbibliotek.init();

JavaScriptet är också uppdelat per komponent så att det är möjligt att köra JavaScript för enskilda komponenter. Dessa importeras på samma sätt som när du importera hela styleguidens JavaScript. Det finns beskrivet hur du ska göra på sidan för respektive komponent.

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.

Webbkomponenter

I Styleguiden har vi börjat bygga 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.

Lägg till webbkomponenter i ett utvecklingsprojekt

Vi rekommenderar att du lägger in Styleguidens webbkomponenter i utvecklingsprojekt på något av följande sätt:

  • Ladda ner skripten via jordbruksverket CDN server.
  • Använda npm i ett NodeJS projekt.

Ladda ner skripten via CDN server

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.

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/designsystem/designsystem.esm.js"></script>

<script nomodule="" src="https://cdn.jordbruksverket.se/designsystem/15.1.4/package/dist/designsystem/designsystem.js"></script>

Använda npm

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

  • npm install -save --save-exact @sjv/component-library@15.1.4

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],
})

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 2021-05-20

Sidansvarig för sidan är Styleguide