Wszystkie wbudowane składniki platformy Sites mają podobną strukturę klas CSS.
Każdy ze składników ma trzy następujące klasy CSS stosowane do najbardziej zewnętrznego składnika <div>:
scs-component scs-type design-style
Klasa type określa typ składnika (na przykład image, gallery lub divider). Klasa design-style jest wybraną klasą stylu dla składnika, zdefiniowaną w pliku motywu.
Style motywu — podstawy
Plik design.json motywu zawiera wykaze wszystkich stylów (frame, shadow, highlighted itd.), które mogą zostać zastosowane do poszczególnych typów składników (takich jak button lub image). Każdy styl ma wyświetlaną nazwę (name) i nazwę klasy (class). Wyświetlana nazwa jest pokazywana na karcie Styl panelu Ustawienia. Nazwa klasy odwołuje się do selektora CSS, zawartego w pliku design.css motywu. Na przykład wpis dla składnika "Przycisk" (button) może mieć następującą postać:
"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"
}
]
},
Nazwy wbudowanych składników można tłumaczyć, a zatem jest pokazywany klucz pozwalający uzyskać nazwę stylu z pakietu zasobów. Jeśli do strony dodamy składnik button, a następnie wybierzemy na karcie Ustawienia > Styl styl Prosty, to plik design.json powiąże wyświetlaną nazwę Prosty (klucz COMP_STYLE_SIMPLE) z nazwą klasy scs-button-style-3. Przycisk będzie renderowany z użyciem następujących klas:
scs-component scs-button scs-button-style-3
Jeśli dla danego składnika nie wybierzemy żadnego stylu, zostanie użyty styl domyślny scs-type-default-style. W poprzednim przykładzie przycisk będzie renderowany z użyciem następujących klas:
scs-component scs-button scs-button-default-style
Styl scs-component-content
Dla każdego wbudowanego składnika, zawartego we wspomnianym wcześniej składniku scs-component <div>, istnieje składnik content <div> z klasą CSS scs-component-content. Inaczej mówiąc:
scs-component scs-type design-style scs-component-content
W pliku design.css klasa scs-component-content jest często używana do stylizacji ramki otaczającej składnik (na przykład wyświetlenia jej krawędzi lub wprowadzenia cienia).
Warto zauważyć, że we wbudowanym pliku comp.css wspólna klasa scs-component-content jest zdefiniowana z użyciem m.in. właściwości CSS position:relative i display:inline-block.
Podczas gdy styl scs-component-content jest przydatny do stylizacji ramki otaczającej dany składnik, to — aby przeprowadzić pełną stylizację składnika — trzeba użyć właściwych dla niego klas. Zob. Stosowanie stylów do określonych składników.