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.