Styles – WordPress Starter-Theme

Logo

Icons

Farbe

Typografie

Logo

Icons

Wir haben ein Set mit Basis-Icons integriert. Jedes Icon hat einen semantischen Namen erhalten, damit die funktionale Zuordnung im Kontext der Barrierefreiheit eindeutig ist.

forward

back

collapse

expand

language

logout

external-link

download

positive

negative

check

Farbe

Vier Farben sind für die Kombination von Hintergrund und Text vorbereitet. Sie können auch invertiert genutzt werden.

Base 1
--wp--preset--color--base-1

Base 2
--wp--preset--color--base-2

Contrast 1
--wp--preset--color--contrast-1

Contrast 2
--wp--preset--color--contrast-2

Drei Farben sind funktionalen Elementen wie Fehler- und Erfolgsmeldungen oder Infoboxen vorbereitet.

Info
--wp--preset--color--info

Negative
--wp--preset--color--negative

Positive
--wp--preset--color--positive

Typografie

Schriftart

Es ist eine serifenlose Systemschrift vorkonfiguriert.

Schriftgrößen

Die Schriftgrößen basieren auf CSS clamp() und vergrößern sich in Abhängigkeit zur Viewport-Breite. Die visuelle Hierarchie ist immer gegeben, Überschriften wachsen mit zunehmendem Platz etwas stärker an.

Heading 1

--wp--preset--font-size--size-h-1

Heading 2

--wp--preset--font-size--size-h-2

Heading 3

--wp--preset--font-size--size-h-3

Heading 4

--wp--preset--font-size--size-h-4

Heading 5

--wp--preset--font-size--size-h-5

Heading 6

--wp--preset--font-size--size-h-6

Large

--wp--preset--font-size--size-large

Body

--wp--preset--font-size--size-body

Small

--wp--preset--font-size--size-small

Tiny

--wp--preset--font-size--size-tiny

Listen

Neben den Standard-Listen (ol, ul) sind Stile für Checklisten, Pro- und Kontra-Listen vorbereitet:

Geordnete Liste

Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt

Ungeordnete Liste

Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt

Checkliste

Der Stil ist mittels Styled Section im Child-Theme umgesetzt und kann dort leicht angepasst werden.

Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt

Pro-Liste

Der Stil ist mittels Styled Section im Child-Theme umgesetzt und kann dort leicht angepasst werden.

Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt

Kontra-Liste

Der Stil ist mittels Styled Section im Child-Theme umgesetzt und kann dort leicht angepasst werden.

Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt
Hier steht ein Listenpunkt

Schatten

Es gibt drei vorbereitete Stile für Schatten, benannt in Level 1-3. Typischerweise sollten die Schatten die visuelle Hierarchie unterstützen und konsistent verwendet werden. Beispielsweise Level 1 für klickbare Elemente, Level 2 für fixierte und Level 3 für modale Elemente o. Ä.

Level 1
--wp--preset--shadow--level-1

Level 2
--wp--preset--shadow--level-2

Level 3
--wp--preset--shadow--level-3

Container-Breiten

Für einzelne Container kann die Breite festgelegt werden. Diese orientiert sich an drei Standards, die global verändert werden können. Zusätzlich kann jeder Container individuell angepasst werden.

Keine Breite
--wp--style--global--content-size

Weite Breite
--wp--style--global--wide-size

Gesamte Breite
--wp--style--global--full-size

Abstände

Es sind Abstände mit fester Größe sowie mit variabler Größe im Einsatz. Die Abstände mit variabler Größe basieren auf CSS clamp() und verändern sich in Abhängigkeit zur Viewport-Breite.

8px
--wp--preset--spacing--8

16px
--wp--preset--spacing--16

24px
--wp--preset--spacing--24

32px
--wp--preset--spacing--32

40px
--wp--preset--spacing--40

8px – 16px
--wp--preset--spacing--8-16

16px – 24px
--wp--preset--spacing--16-24

24px – 32px
--wp--preset--spacing--24-32

32px – 40px
--wp--preset--spacing--32-40

40px – 64px
--wp--preset--spacing--40-64

16px – 40px
--wp--preset--spacing--16-40

Container & Boxen

Für Infoboxen ist ein Section Style vorbereitet. Er kann auf Absätze oder Gruppen angewendet werden und wird im Child-Theme registriert.

Infobox

Dieser Text ist als Infobox auszeichnet.

Im Parent Theme sind Stile für äußere Container und darin enthaltene Boxen in verschiedenen Farben vorbereitet. Die Stile nutzen globale Abstände und wenden Farbvariationen für Links und Buttons an.