Kom i gang

FFE inneholder alle ressurser du trenger for å lage brukergrensesnitt som er i stil med SpareBank 1 sine designprinsipper, stil og tone og best practices.

For designere

  • Bli kjent med merkevaren og vår visuelle identitet for å lære FFEs design patterns og prinsipper.
  • Gå igjennom komponentseksjonen for å gjøre deg kjent med de eksisterende komponentene du kan implementere i designet ditt.
  • Vi vedlikeholder en verktøykasse med gjenbrukbare elementer i Sketch.

For utviklere

FFE er en samling av gjenbrukbare komponenter basert på Less og React for å bygge nettsider og brukergrensesnitt. Komponentbiblioteket sikrer konsistent stil og oppførsel i prototyper og produksjonsarbeid.

Komponentene er publisert i forskjellige pakker på npm under @sb1-organisasjonen. Kildekoden til pakkene ligger på Github sammen med READMEs med mer detaljerte instruksjoner for hvordan bruke pakkene i prosjektet ditt.

Alle vil trenge @sb1/ffe-core og @sb1/ffe-webfonts, og de fleste trenger pakkene for grid, knapper, og skjema (eventuelt med React-tvillingen sin). Bruk verktøyet under for å lage en installasjonskommando som passer deg.

Less-pakker brukes som oftes ved å ha en egen Less-fil i ditt prosjekt med et @import-statement for hver pakke, som her for @sb1/ffe-buttons. React-pakker brukes på lik linje med enhver JavaScript-pakke. Se Komponentbiblioteket for å se et eksempel på en import-statement for den komponenten du er interessert.

Pakkeplukker

Pakkeplukkeren dekker de mest brukte pakkene. Se Komponentbiblioteket for en fullstendig oversikt over hva som finnes og hvilke pakker de er publisert i.

Hva trenger du?
Bruker du React?
React er ikke et krav, men vi har en del ferdige komponenter som du kan bruke om prosjektet ditt bruker React
Kommando for å installere avhengigheter

Bidra

Vi oppfordrer alle, både rutinerte og ferske, til å opprette issues, sende inn pull requests og kommentere på andres bidrag. Ta en titt på CONTRIBUTING.md for hvordan du går frem.

Hjelp

Spørsmål om designsystemet, forslag til forbedringer eller annet du trenger å kontakte oss om? Vi kan nås på en av følgende måter: