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.