Wprowadzenie

Podstawowe założenia

StyleBuilder opiera się na koncepcji utility classes — małych, jednofunkcyjnych klas CSS, które można swobodnie łączyć ze sobą podczas budowania interfejsu. W przeciwieństwie do tradycyjnego podejścia, gdzie większość styli definiuje się w dedykowanych klasach, tutaj główny nacisk położony jest na szybkie tworzenie układów, kontrolę wyglądu elementów i responsywność bezpośrednio w kodzie HTML.

Struktura klasy CSS

Wszystkie klasy w StyleBuilderze mają jednolitą i przewidywalną strukturę:

{pseudoclass}:{breakpoint}:{utility}-{value}

Poszczególne segmenty klasy odpowiadają za różne aspekty jej działania. Kolejne segmenty z których składa się klasa to:

pseudoclass - pozwala zastosować styl tylko w określonym stanie elementu (na przykład po najechaniu kursorem), segment jest opcjonalny.
breakpoint - umożliwia dodanie klasy, która zastosowana zostanie dopiero dla wybranych rozmiarów ekranu. Brak określenia breakpoint oznacza, że klasa ma zostać zastosowana dla wszystkich rozmiarów ekranu.
utility - określa modyfikowaną właściwość
value - wskazuje na jaką wartość ustawić właściwość. Niektóre klasy pozwalają na pominięcie tego elementu - stosowana jest wtedy domyślna wartość.