Komponentin tyylien perusteet

Kaikilla valmiilla sivustojen komponenteilla on samankaltainen CSS-luokkarakenne.

Jokaisen komponentin uloimmalla <div>-elementillä on seuraavat kolme CSS-luokkaa:

 scs-component scs-type design-style

type on komponentin tyyppi (kuten image, gallery tai divider). design-style on komponentille valittu tyyliluokka, joka määritetään teeman tiedostossa.

Teeman tyylien perusteet

Teeman design.json-tiedostossa luetellaan kaikki tyylit (kuten frame, shadow, highlighted), joita voidaan käyttää erityyppisissä komponenteissa (kuten button tai image). Kullakin tyylillä on sekä näyttönimi että luokan nimi. Näyttönimi näkyy Asetukset-paneelin Tyyli-välilehdessä. Luokan nimi viittaa CSS-valitsimeen teeman design.css-tiedostossa. Esimerkiksi button-komponentilla on seuraava merkintä:

"scs-button": {
         "styles": [{
                          "name": "COMP_STYLE_ALTA_SMALL",
                          "class": "scs-button-default-style"
                          },
                    {
                          "name": "COMP_STYLE_ALTA_LARGE",
                          "class": "scs-button-style-2"
                          },
                    {
                          "name": "COMP_STYLE_SIMPLE",
                          "class": "scs-button-style-3"
                          }
                    ]
},

Sisäänrakennettujen komponenttien nimet on käännetty, joten näet avaimen, jolla voi hakea tyylin nimen resurssinipusta. Jos lisäät button-komponentin sivulle ja valitset sitten Asetukset > Tyyli -paneelissa Yksinkertainen, design.json-tiedosto liittää näyttönimen Yksinkertainen (avain COMP_STYLE_SIMPLE) luokan nimeen scs-button-style-3. button-komponentti muodostetaan seuraavien luokkien kanssa:

scs-component scs-button scs-button-style-3

Jos määritetylle komponentille ei ole valittu tyyliä, oletustyyliä scs-type-default-style käytetään. Edellä olevassa esimerkissä painike muodostetaan seuraavien luokkien kanssa:

scs-component scs-button scs-button-default-style 

scs-component-content-kohteen tyyli

Jokaisen sisäänrakennetun komponentin edellä mainitun scs-component <div> -elementin sisällä on content <div> -elementti, jolla on CSS-luokka scs-component-content. Tämä tarkoittaa seuraavaa:

scs-component scs-type design-style
scs-component-content

scs-component-content-luokkaa käytetään usein design.css -tiedostossa komponenttia reunustavan laatikon tyylin valintaan (esimerkiksi reunan tai varjostuksen lisäykseen).

On hyvä huomioida, että yleiselle scs-component-content-luokalle on määritetty sisäänrakennetussa comp.css-tiedostossa position:relative- ja display:inline-block-ominaisuudet muiden CSS-ominaisuuksien lisäksi.

scs-component-content-luokkaa voi käyttää kunkin komponentin ympärillä olevan laatikon tyylin valintaan, mutta komponentin tyylin kattava määritys edellyttää komponenttikohtaisia luokkia. Katso kohta Komponenttikohtainen tyyli.