Layout Stijlen

Bij styles kun je een lijst van stijlen aanleggen. Naast de basic styles (die standaard in het systeem aanwezig zijn) kun je zoveel eigen styles aanmaken als je nodig hebt.

Op vele plaatsen in het systeem vind je een onderdeel layout, onder meer bij widgets en elementen. Daar kun je telkens een style selecteren uit je lijst van styles. Vanuit die plaatsen kun je ook meteen de style bewerken (potlood-icoontje) of een nieuwe aanmaken (plus-icoontje).

Je kunt styles laten overerven van een andere style door een parent in te stellen. De style zal de volledige look & feel van zijn parent overnemen, tenzij anders gedefinieerd bij de style zelf.

Per style kun je bijna alle eigenschappen die beschikbaar zijn in CSS instellen: typografie, grootte, marges, kaders, achtergronden, enz. Links zie je een voorbeeld van de style die bij elke wijziging bijgewerkt wordt. De tekst in het voorbeeld kun je aanpassen. Je kunt ook de achtergrond van het voorbeeld wijzigen door rechtsboven een grijswaarde te kiezen, bv. zwart als je style witte tekst heeft. Deze instelling wordt mee opgeslagen per style.

In dit schema vind je enkele belangrijke eigenschappen terug:

States

Er zijn 4 verschillende states:

• Default: de standaard look & feel.
• Hover: de look & feel wanneer er met de muis wordt overgegaan.
• Active: de look & feel wanneer het item actief is, bv. een knop in een navigatie.
• Focus: de look & feel wanneer het item gefocusd is, bv. wanneer de cursor in een tekstveld staat.

Elke state erft standaard alles over van de default state. Eigenschappen die je instelt bij een bepaalde state zullen deze van de default state overschrijven.

CSS

Je kunt ook CSS-code toevoegen bij een style. Gebruik hiervoor het woord "element" om het item aan te duiden waar op de style toegepast is:

element {
    color: red;
}

Op die manier kun je ook dieperliggende elementen selecteren:

element img {
    border: 1px solid red;
}

Groepen

Om het overzichtelijk te houden, kun je je styles onderverdelen in groepen. De groepen worden bovenaan getoond als tabs. Via de icoontjes rechts van de tabs kun je groepen aanmaken, bewerken en verwijderen. Je kunt de groepen van volgorde veranderen door ze naar links en rechts te verslepen.