Tietoa apuluokista
Kela Design Systemin komponentteja voi muokata kevyesti käyttämällä CSS-apuluokkia, eli pieniä CSS-luokkia, joilla on yksi käyttötarkoitus.
Taustaa
KDS:n komponentteja voi muokata kevyesti käyttökontekstin mukaan välittämällä
niille KDS:n apuluokkia (tai omia CSS-luokkia). Tyypillisimpiä muokattavia
asioita ovat komponenttien margin-, padding-, display-arvot, asemointi flexboxilla
ja värit.
KDS:n komponenteissa on pyritty käyttämään järkeviä alkuarvoja esim. komponenttien välistyksessä, mutta niitä joutuu toisinaan muokkaamaan käyttökontekstiin sopivaksi.
Apuluokkien käyttö
Apuluokkia voi välittää komponenttien className-propille.
Esimerkki, lisää painikkeen alle 8px/.5rem marginaalia:
<Button appearance="outline" className="kds-mb-2">Painike</Button>
Joistakin luokista on myös responsiivisia versioita, joilla voi asettaa arvoja eri kokoisille näytöille/laitteille.