Käyttö ilman Reactia
Kela Design Systemia voi soveltuvilta osin hyödyntää myös ilman React-sovelluskehystä.
Yleistä
Kela Design Systemin tarkoituksena on kuvata Kelan ja Kannan käyttöliittymien tavoitetilaa.
- Design-periaatteet, suunnittelumallit ja ohjeet ovat kaikkien hyödynnettävissä.
- Käyttöliittymien visuaalisuudessa kannattaa aina noudattaa KDS:n ohjeistamaa verkkoilmettä.
- Toteutus voi vaatia kompromisseja – aina ei ole mahdollista tai edes järkevää pyrkiä täydelliseen vastaavuuteen (esim. valmisohjelmistot).
Design-muuttujat ja tyylitiedostot, sekä ikonit, kuvakkeet ja logot ovat saatavilla erillisissä asennuspaketeissa ilman muita riippuvuuksia.
Visuaalinen ilme
Visuaalisen ilmeen ohjeet kuvaavat ja konkretisoivat sitä, miten Kelan ja Kannan visuaalinen ilme sovitetaan digitaaliseen ympäristöön.
Ohjeita kannattaa hyödyntää myös sellaisissa käyttöliittymissä ja sovelluksissa, joiden toteutus ei perustu Kela Design Systemin tarjoamiin React-komponentteihin.
Aiheina ovat mm. värit, typografia, layout ja sommittelu, sekä kuvakkeiden ja ikonien käyttö.
Ohjeet ja mallit
Ohjeet ja mallit tarjoavat valmiita suunnittelumalleja kehittäjille ja suunnittelijoille.
Komponenttien ohjeet
Komponentit on tällä hetkellä toteutettu React-sovelluskehykselle, joten niiden hyödyntäminen vaatii Reactia tukevan sovelluksen. Komponenttien ohjesivut kuitenkin sisältävät myös yleistä ohjeistusta käytettävyydestä, milloin mitäkin komponenttia kannattaa käyttää, sekä tietoa saavutettavuudesta. Ohjeita voi siten soveltaa teknologiasta riippumatta.
CSS-apuluokat
CSS-apuluokat tarjoavat joitakin yleisimmin käytettyjä ja brändin visuaalisen ilmeen mukaisesti määritettyjä CSS-luokkia sovellusten käyttöliittymien rakentamiseen.
Design-muuttujat
Design-muuttujat (design-tokenit) ovat yksittäisiä tyylipäätöksiä, kuten värit, tekstityylit ja välistykset, joihin visuaalinen ilme pohjautuu. Näitä muuttujia voi hyödyntää sovelluksissa yhtenäisen visuaalisen ilmeen luomiseen. Käyttämällä muuttujia niiden mahdolliset muutokset päivittyvät sovelluksiin keskitetysti versiopäivitysten myötä, eikä samoja arvoja tarvitse ylläpitää tai päivittää jokaisessa sovelluksessa erikseen.
Kela Design Systemin design-muuttujat on jaettu kolmeen kategoriaan:
Kaikki design-muuttujat ovat saatavilla CSS-, JavaScript-, JSON- ja SCSS-tiedostomuodoissa.
Kuvakkeet, ikonit ja logot
Kuvitusikonit, käyttöliittymäkuvakkeet sekä logot ovat saatavilla myös svg-tiedostoina.
Komponenttien HTML-rakenteen ja tyylien hyödyntäminen
Tuettu rajoituksin
React-komponenttien tuottamaa HTML-rakennetta ja niihin liittyviä tyylimäärityksiä voi hyödyntää myös ilman React-komponentteja.
Tällöin on hyvä huomioida seuraavat asiat:
- Saavutettavuus on sisäänrakennettu komponentteihin, joten toteutuksen teknisestä saavutettavuudesta täytyy huolehtia erikseen.
- Muutokset eivät ole semanttisen versioinnin piirissä, eikä niiden muutoksista ilmoiteta versiohistoriassa alla mainittuja poikkeuksia lukuunottamatta.
- Osa komponenteista sisältää paljon erilaista JavaScript-logiikkaa, joka on tarpeellisilta osin toteutettava uudelleen.
Tuetut komponentit
Seuraavien komponenttien osalta HTML-rakenne ja CSS-luokat on dokumentoitu ja niiden muuttumisesta kerrotaan versiohistoriassa.
Muutokset eivät kuitenkaan noudata semanttista versiointia, eli muutoksia saatetaan tehdä tarpeen mukaan. Ylimääräisiä rikkovia muutoksia HTML-rakenteessa ja tyylimäärityksissä pyritään kuitenkin välttämään, myös dokumentoimattomien komponenttien osalta.