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.
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.
Det finns i huvudsakligen två sätt att lägga till styleguiden i ditt projekt:
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.
Om ditt utvecklingsprojekt använder NodeJS, kan du enkelt kan installera webbkomponenterna med:
npm install -save --save-exact @sjv/component-library@18.0.31
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],
})
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");
<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-35ViMk+dyJkB+LqfbhRpPHA2j4654bHcSIEgiAb8gro=" crossorigin="anonymous">
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 type="module" src="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/designsystem/designsystem.esm.js" integrity="sha256-H8DIhy1sxg/E+yIjG9Ttypeuj21OsdW6n/VZUesllrY=" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.jordbruksverket.se/designsystem/18.0.31/package/dist/designsystem/designsystem.js" integrity="sha256-+SjoMHsfmwH5cCpNKuc1+g4R/vfiR0eN+QsQKlsSV+w=" 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.
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.
Om du vill ta in en jQuery-komponent, måste du själv se till att alla nödvändiga jQuery-bibliotek finns med.
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