CSS

Das Wiener-Melange-Theme ist als No-Class-CSS-Framework konzipiert. Das bedeutet, dass jedes relevante Element mit einem Default-Styling ausgeliefert wird. Darüber hinaus stützt sich das Layout des Headers und Footers der Website auf die Struktur im HTML und benötigt ebenfalls keine Klassen. Das ist besonders hilfreich, wenn man mit Inhalten arbeitet, die nicht oder nur schwer angepasst werden können, wie beispielsweise importiertes HTML.

Custom Properties

Wir setzen sehr stark auf den Einsatz von CSS-Custom-Properties. Details dazu auf der Seite Patterns anwenden.

Wenn Sie eigene CSS-Regeln schreiben, verwenden Sie, wenn möglich, unsere CSS-Tokens. Außerdem gibt es eine Reihe von Utility- und Hilfsklassen, die Sie frei verwenden können.

Tokens

Hilfsklassen

Klassenname	Beschreibung
`.wm-h-row`	Legt eine maximale Breite für Inhaltsblöcke fest
`.wm-h-link-clean`	Link nur mit Standardstyling
`.wm-h-vh`	Versteckt Elemente visuell, aber nicht für Screenreader. Wichtig für die Barrierefreiheit.
`.wm-h-vh--mobil`	Zeigt mit '.wm-h-vh' visuell versteckte Elemente ab 64em wieder an.
`.wm-h-vh--desktop`	Versteckt Elemente visuell ab 64em
`.wm-skip-link`	Skip Link Styles (für Barrierfreiheit)
`.wm-h-spacing`	Hilfsklasse, die einen Abstand von 1.5em zwischen den Elementen erzeugt

Utilityklassen

Klassenname	Synonyme	Beschreibung	Regel
`.wm-u-fg1`	`.wm-u-fg-1`	Flexitem auffüllen	`flex-grow: 1 !important;`
`.wm-u-fzm`	`.wm-u-fs-m`	Medium Schriftgröße	`font-size: var(--wm-font-size-m) !important;`
`.wm-u-mbs0`	`.wm-u-mt0` `.wm-u-mbs-0`	Kein Außenabstand nach oben	`margin-block-start: 0 !important;`
`.wm-u-mbe0`	`.wm-u-mb0` `.wm-u-mbe-0`	Kein Außenabstand nach unten	`margin-block-end: 0 !important;`
`.wm-u-misl`	`.wm-u-mlm` `.wm-u-mis-l`	Large Außenabstand nach links	`margin-inline-start: var(--wm-spacing-l) !important;`
`.wm-u-miel`	`.wm-u-mis-l`	Large Außenabstand nach rechts	`margin-inline-start: var(--wm-spacing-l) !important;`
`.wm-u-mbss`	`.wm-u-mbs-s`	Small Außenabstand nach oben	`margin-block-start: var(--wm-spacing-s) !important;`
`.wm-u-mbes`	`.wm-u-mbe-s`	Small Außenabstand nach unten	`margin-block-end: var(--wm-spacing-s) !important;`
`.wm-u-mbsxs`	`.wm-u-mbs-xs`	XSmall Außenabstand nach oben	`margin-block-start: var(--wm-spacing-xs) !important;`
`.wm-u-mbexs`	`.wm-u-mbe-xs`	XSmall Außenabstand nach unten	`margin-block-end: var(--wm-spacing-xs) !important;`
`.wm-u-mbsxxs`	`.wm-u-mbs-xxs`	XXSmall Außenabstand nach oben	`margin-block-start: var(--wm-spacing-xxs) !important;`
`.wm-u-mbexxs`	`.wm-u-mbe-xxs`	XXSmall Außenabstand nach unten	`margin-block-end: var(--wm-spacing-xxs) !important;`
`.wm-u-tae`	`.wm-u-tar` `.wm-u-ta-r`	Text rechts ausrichten	`text-align: end !important;`
`.wm-u-tac`	`.wm-u-ta-c`	Text zentriert ausrichten	`text-align: center !important;`
`.wm-u-df`	keine	display:flex;	`display:flex !important;`
`.wm-u-jce`	`.wm-u-jc-e`	Flexitems am Ende ausrichten	`justify-content: end !important;`
`.wm-u-jcc`	`.wm-u-jc-c`	Flexitems mittig ausrichten	`justify-content: center !important;`
`.wm-u-jcsb`	`.wm-u-jc-sb`	Flexitems space-between ausrichten	`justify-content: space-between !important;`
`.wm-u-mie-xs`	keine	XSmall Außenabstand nach rechts	`margin-inline-end: var(--wm-spacing-xs) !important;`
`.wm-u-mie-s`	keine	Small Außenabstand nach rechts	`margin-inline-end: var(--wm-spacing-s) !important;`
`.wm-u-mie-m`	keine	Medium Außenabstand nach rechts	`margin-inline-end: var(--wm-spacing-m) !important;`
`.wm-u-mie-l`	keine	Large Außenabstand nach rechts	`margin-inline-end: var(--wm-spacing-l) !important;`

Pattern Anwendung

Tutorials

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at