Style guidelines för externa utvecklare

Tillgängliga klasser och element som går att använda
Använder EZ-CSS biblioteket (bootstrap liknande).

Typografi

- Nedan alla typografi storlekar med klasser för att applicera.
- Klasserna för storlekar är samma oavsett typ, men sätter olika storlekar baserat på om det h1-h6 / p, span, a.
- För rubrikerna är det storlekarna inom parantes som är default per, men går att göra vilken rubrik till någon av de angivna storlekarna genom att sätta klassen på dom.

H1 (.size-xxl)

H2 (.size-xl)

H3 (.size-lg)

H4 (.size-md)

H5 (.size-sm)

H6 (.size-xs)

Paragraph (.size-xxl)

Paragraph (.size-xl)

Paragraph (.size-lg)

Paragraph (.size-md)

Paragraph (.size-sm)

Paragraph (.size-xs)

Andra typografi modifiers:

Weights: (fungerar baserat på sidans inställda typografi)

.weight-thin .weight-book .weight-light .weight-normal .weight-medium .weight-semibold .weight-bold

Övrigt:

.text-uppercase.text-italic .text-line-through

Knappar

- Nedan ett urval på de knappar som finns, varje knapp börjar med klassen "btn", till det vilken stil av knappen.
- Går även att applicera färg-klasser för att ändra textfärgen
Exempel: class="btn btn-primary"

Card

- Klassen "card" används för att göra ett kort

Exempel på ".card", kommer med temats inställda border-radius, vita färg och padding

Formulär

.field-primary

.field-primary-sm

.field-secondary

.field-secondary-sm

Färger

- Finns ett gäng färg-klasser tillgängliga som utgår från de inställda färgerna på sidans tema. Går att använda som bakgrundsfärg/textfärg.
- För att sätta textfärg kör man "color-färg", för bakgrundsfärg "bgcolor-färg"

.bgcolor-white

.bgcolor-black

.bgcolor-neutral-100

bgcolor-neutral-200

.bgcolor-neutral-300

.bgcolor-surface-primary

.bgcolor-surface-secondary

.bgcolor-surface-accent

.bgcolor-surface-default

.bgcolor-success

.bgcolor-danger

.bgcolor-warning

.color-accent

.color-white

.color-black

.color-neutral-100

.color-neutral-200

.color-neutral-300

.color-surface-primary

.color-surface-secondary

.color-surface-accent

.color-surface-default

.color-success

.color-danger

.color-warning

Övrigt

- Lite övriga element

Avatar

class="avatar" för att göra avatar, går att kombinera med ett set storleksklasser

.avatar-sm

.avatar

.avatar-lg

.avatar-xl

.avatar-xxl

.avatar-xxxl

Meny