Käyttö ilman Reactia

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).

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ä arvoja (esimerkiksi värit, fonttikoot, välistykset), joihin visuaalinen ilme pohjautuu. Näitä arvoja voi hyödyntää sovelluksissa, jolloin mahdolliset muutokset niissä periytyvät sovelluksiin helposti versiopäivitysten myötä, eikä niitä tarvitse ylläpitää itse sovelluksessa.

Design-muuttujia on saatavilla esimerkiksi Sass ja JavaScript-muuttujina.

Komponenttien HTML-rakenteen ja CSS:n hyödyntäminen

Ei suositeltu

Käytännössä on mahdollista hyödyntää React-komponenttien tuottamaa HTML-rakennetta ja niihin liittyviä tyylimäärityksiä. Tämä on kuitenkin työläs ja herkästi rikkoutuva tapa tehdä asioita. Suurin osa komponenteista sisältää paljon JavaScript-logiikkaa, joka täytyy rakentaa uudelleen.

HTML-rakenteen tai tyylimäärittelyjen muuttaminen ei ole semanttisen versioinnin piirissä. Muutoksia voi siis tulla missä versiossa tahansa. Komponenttien sisäisen HTML-rakenteen tai tyylien muutoksia ei myöskään dokumentoida julkaisujen muutoslokiin, koska tällä hetkellä suositeltu käyttötapa on komponenttien käyttäminen. Jää siis toteuttajien vastuulle ylläpitää HTML-rakennetta komponenttien mahdollisten muutosten mukaisesti.

Yksittäisten komponenttien tyylit ovat saatavilla erillisissä tiedostoissa, jos niitä kaikesta huolimatta haluaa hyödyntää edellä mainitut rajoitukset huomioiden.