Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

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

Farben

Property Wert Bezeichnung Types
--wm-color-wien oklch(63% 0.26 29.23) Wien Rot color
--wm-color-fastschwarz oklch(28% 0 0) Fast Schwarz color
--wm-color-fastschwarz-light oklch(28% 0 0 / 0.16) Fast Schwarz Light color
--wm-color-weiss oklch(100% 0 0) Weiss color
--wm-color-flieder oklch(77% 0.11 283.42) Flieder color
--wm-color-flieder-light oklch(93% 0.03 287.64) Flieder Light color
--wm-color-morgenrot oklch(69% 0.2 20.65) Morgenrot color
--wm-color-morgenrot-light oklch(89% 0.06 14.12) Morgenrot Light color
--wm-color-frischgruen oklch(79% 0.14 144.14) Frischgrün color
--wm-color-frischgruen-light oklch(91% 0.05 145.07) Frischgrün Light color
--wm-color-goldgelb oklch(83% 0.16 97.44) Goldgelb color
--wm-color-goldgelb-light oklch(95% 0.07 98.94) Goldgelb Light color
--wm-color-nebelgrau oklch(86% 0.01 76.41) Nebelgrau color
--wm-color-nebelgrau-light oklch(95.91% 0.003 67.78) Nebelgrau Light color
Property Wert Bezeichnung Types
--wm-color-ui-interactive oklch(44% 0.09 282.1) Interaktiv color
--wm-color-ui-error oklch(41% 0.17 29.23) Fehler color
--wm-color-ui-success oklch(40% 0.09 160.8) Erfolg color
--wm-color-ui-link oklch(45% 0.17 263.3) Link color
--wm-color-ui-link-visited oklch(53% 0.23 326.26) Link Besucht color

Abstände

Property Wert Bezeichnung Types
--wm-spacing-xxs 0.3125rem XXS length
--wm-spacing-xs 0.625rem XS length
--wm-spacing-s 0.9375rem S length
--wm-spacing-m 1.25rem M length
--wm-spacing-l 1.875rem L length
--wm-spacing-xl 3.125rem XL length
--wm-spacing-xxl 5rem XXL length

Dimensionen

Property Wert Bezeichnung Types
--wm-size-wrapper-width 75rem Maximale Breite des Seite-Wrappers length
--wm-size-wrapper-padding 0.9375rem Padding im Seite-Wrappers length
--wm-size-wrapper-padding-large 3.125rem Padding im Seite-Wrappers Groß length

Schrift

Property Wert Bezeichnung Types
--wm-font-size 1.0625rem Standard Schriftgröße length
--wm-font-size-xs 0.9rem Schriftgröße XS length
--wm-font-size-s 1rem Schriftgröße S length
--wm-font-size-m 1.328125rem Schriftgröße M length
--wm-font-size-l 1.66015625rem Schriftgröße L length
--wm-font-size-xl 2.0751953125rem Schriftgröße XL length
--wm-font-stack WienerMelange, Lucida Sans Unicode, Lucida Grande, Lucida Sans, sans-serif Standardschriftsatz string
--wm-font-stack-fallback Lucida Sans Unicode, Lucida Grande, Lucida Sans, sans-serif Fallback Schriftsatz string
--wm-font-stack-monospace ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace Monospace Schriftsatz string
--wm-font-stack-sans-serif sans-serif Serifen-Schriftsatz string
--wm-font-weight 'wght' 400 Standard Schriftstärke string
--wm-font-weight-bold 'wght' 600 Fette Schriftstärke string
--wm-font-weight-extra-bold 'wght' 740 Extra fette Schriftstärke string

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-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;
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