Skip to main content

Utvikler

Quick Start​

Kom raskt i gang med Indeks:

  1. Importer styling i CSS-filen din:

     @import url('https://cdn.test.sparebank1.no/indeks/css/0.2.4/index.css')

  2. Legg til ix-body-klassen på øverste nivå i applikasjonen din:

    <body class="ix-body">

  3. Så er du klar til å bruke grunnleggende styling og designtokens! Det du kan gjøre nå er:

  4. Installer React-komponenter (kun i test):

    npm install @sb1/indeks-react
Fonter

Hvis du ikke bruker monorepo-generatoren, må du også legge til fonter. Se detaljert installasjon nedenfor.

CSS Reset

Indeks bruker en avart av reset.css for å sikre et konsistent utgangspunkt for styling på tvers av nettlesere, i motsetning til FFE, som bruker normalize.css. Det betyr at det kan være noen forskjeller i grunnleggende styling mellom FFE og Indeks, blant annet har ikke listeelementer bullet points som standard.

Detaljert installasjon​

For å komme i gang med Indeks er det 3 deler du trenger å sette opp i prosjektet ditt:

  1. Fonter
  2. Styling (tokens, utils og komponentstyling)
  3. Komponenter (React-pakken)

1. Fonter​

For å sette opp prosjektet ditt med SB1-fonter må du sørge for at fontene lastes inn. Dette legges til automatisk ved bruk av generatoren i monorepo. Hvis appen ikke er generert opp, legg til følgende i <head> i HTML-dokumentet ditt:

<link rel="stylesheet" href="https://cdn.sparebank1.no/fonts/v1.css" />
info

Uten fontene vil tekst vises i nettleserens standardfont i stedet for SB1s designprofil.

2. CSS​

Installer styling ved å importere CSS-filen fra vår CDN inn i hoved-CSS-filen din:

 @import url('https://cdn.test.sparebank1.no/indeks/css/0.2.4/index.css')
info

Siste versjon er 0.2.4. Se releases for alle versjoner.

Indeks tilbyr også styling via npm-pakken @sb1/indeks-css, men vi anbefaler å bruke vår CDN for enklest mulig oppsett og bedre caching for brukerne.

Hva får du med CSS-pakken?

  • Komponentstyling - styling for hele komponenter. Brukes automatisk av React-komponentene, eller kan brukes direkte på HTML-elementer.
  • Utility-klasser - nyttige hjelpeklasser for små justeringer som margin, padding og layout. Inspirert av TailwindCSS.
  • Tokens - designtokens for farger, spacing og border mm. Se alle tokens. Brukes når du skal lage egne komponenter.

3. Komponenter (React)​

For å bruke komponentbiblioteket i React, installer pakken:

npm install @sb1/indeks-react

Importer komponentene der du skal bruke dem:

import { Button, Text } from '@sb1/indeks-react';

Nå kan du begynne å bruke Indeks-komponenter i React-prosjektene dine:

function App() {
    return (
        <div>
            <Text>Innhold</Text>
            <Button>Klikk meg</Button>
        </div>
    );
}

Hva nå?​

Nå som du har satt opp Indeks kan du:

Teknisk struktur​

De fleste trenger ikke å forholde seg til dette, men du kan lese videre hvis du er spesielt interessert.

Indeks er bygget opp av 4 pakker:

  • indeks-tokens
  • indeks-utils
  • indeks-css
  • indeks-react

Vi har også en mappe med dokumentasjonen og en eksempel-app vi bruker til å teste.