CSS
Überblick
- Allen Klassen ist
wm-vorangestellt, um Überschneidungen mit anderen Frameworks zu vermeiden. - Klassennamen, die in JavaScript referenziert werden, ist zusätzlich
js-vorangestellt. - Klassennamen werden nach dem BEM (Block, Element, Modifier)-Prinzip gestaltet.
Screen
Das CSS für die Darstellung auf Bildschirmen ist in 3 Dateien aufgeteilt:
- Die 1. Datei wird render-blocking geladen und beinhaltet den Großteil der Stil-Anweisungen.
- Das 2. Dokument wird ab einer Viewport-Breite von
768pxangewendet. - Das 3. Dokument wird ab einer Viewport-Breite von
845pxangewendet.
<link rel="stylesheet" href="/assets/130/css/main.min.css" />
<link rel="stylesheet" href="/assets/130/css/main-medium.min.css" media="(min-width: 48em)" />
<link rel="stylesheet" href="/assets/130/css/main-large.min.css" media="(min-width: 52.8125em)" />Druck HTML-Dokumente sind auch für den Druck optimiert. Dabei wird die Hauptnavigation komplett ausgeblendet und Bilder, die lazy-loaded sind, nur angezeigt werden, wenn sie vorher auch geladen wurden.
<link rel="stylesheet" href="/assets/130/css/print.min.css" media="print" />Animation
Animationen und Übergänge werden ausgeführt, wenn Benutzerinnen und Benutzer im Betriebssystem nicht explizit angegeben haben, dass Bewegung am Bildschirm reduziert werden soll.
<link rel="stylesheet" href="/assets/130/css/motion.min.css" media="(prefers-reduced-motion: no-preference)" />Klassen
Neben Komponenten-spezifischen Klassen, gibt es eine Reihe von Utility- und Hilfsklassen, die frei verwendet werden können.
Utility-Klassen
Utility-Klassen erfüllen sehr spezifische Aufgaben und bestehen meist aus nur einer, in seltenen Fällen aus bis zu 2 CSS-Eigenschaften.
Box-Modell (margin, padding, width, etc.)
| Klassename | Funktion | Version |
|---|---|---|
.wm-u-mb0
|
margin-bottom: 0;
|
1.0.0 |
.wm-u-mbxxs
|
margin-bottom: 0.5rem;
|
1.0.0 |
.wm-u-mbs
|
margin-bottom: 1.5rem;
|
1.0.0 |
.wm-u-mbm
|
margin-bottom: 2rem;
|
1.0.0 |
.wm-u-mbl
|
margin-bottom: 3rem;
|
1.0.0 |
.wm-u-mbxl
|
margin-bottom: 5rem;
|
1.0.0 |
.wm-u-mt0
|
margin-top: 0;
|
1.0.0 |
.wm-u-mtxs
|
margin-top: 1rem;
|
1.3.0 |
.wm-u-mtxxs
|
margin-top: 0.5rem;
|
1.0.0 |
.wm-u-mtm
|
margin-top: 2rem;
|
1.0.0 |
.wm-u-mtl
|
margin-top: 3rem;
|
1.0.0 |
.wm-u-mr0
|
margin-right: 0;
|
1.0.0 |
.wm-u-mrxxs
|
margin-right: 0.5rem;
|
1.0.0 |
.wm-u-mrxs
|
margin-right: 1rem;
|
1.0.0 |
.wm-u-mrs
|
margin-right: 1.5rem;
|
1.0.0 |
.wm-u-mrm
|
margin-right: 2rem;
|
1.0.0 |
.wm-u-mrl
|
margin-right: 3rem;
|
1.0.0 |
.wm-u-mls
|
margin-left: 1.5rem;
|
1.0.0 |
.wm-u-mrauto
|
margin-right: auto;
|
1.0.0 |
.wm-u-mlrauto
|
margin-left: auto; und margin-right: auto;
|
1.0.0 |
.wm-u-prm--wide
|
padding-right: 2rem; ab 1200px Breakpoint
|
1.0.0 |
.wm-u-w100
|
width: 100%;
|
1.0.0 |
.wm-u-wauto
|
width: auto;
|
1.0.0 |
.wm-u-mw50
|
max-width: 50rem;
|
1.0.0 |
Flexbox, Grid
| Klassename | Funktion | Version |
|---|---|---|
.wm-u-df
|
display: flex;
|
1.0.0 |
.wm-u-df--m
|
display: flex; ab 768px Breakpoint
|
1.0.0 |
.wm-u-df--l
|
display: flex; ab 845px Breakpoint
|
1.0.0 |
.wm-u-dif
|
display: inline-flex;
|
1.0.0 |
.wm-u-aic
|
align-items: center;
|
1.0.0 |
.wm-u-aifs
|
align-items: flex-start;
|
1.0.0 |
.wm-u-aife
|
align-items: flex-end;
|
1.0.0 |
.wm-u-jcc
|
justify-content: center;
|
1.0.0 |
.wm-u-jcsb
|
justify-content: space-between;
|
1.0.0 |
.wm-u-jcfe
|
justify-content: flex-end;
|
1.0.0 |
.wm-u-fdr
|
flex-direction: row;
|
1.0.0 |
.wm-u-fb66
|
flex-basis: 66.666%;
|
1.0.0 |
.wm-u-fb33
|
flex-basis: 33.333%;
|
1.0.0 |
.wm-u-gxs
|
gap: 1rem;
|
1.0.0 |
.wm-u-gcs3
|
grid-column: span 3;
|
1.0.0 |
.wm-u-gcs4
|
grid-column: span 4;
|
1.0.0 |
.wm-u-gcs8
|
grid-column: span 8;
|
1.0.0 |
Display
| Klassename | Funktion | Version |
|---|---|---|
.wm-u-db
|
display: block;
|
1.0.0 |
.wm-u-db--l
|
display: none; ab 845px Breakpoint display: block;
|
1.0.0 |
.wm-u-dn
|
display: none;
|
1.0.0 |
.wm-u-dn--l
|
display: none; ab 845px Breakpoint
|
1.0.0 |
.wm-u-dn--xl
|
display: none; ab 1024px Breakpoint
|
1.0.0 |
.wm-u-dn--no-js
|
display: none; wenn JS nicht geladen werden kann
|
1.0.0 |
.wm-u-dn--legacyjs
|
display: none; auf veralteten Browsern
|
1.0.0 |
.wm-u-db--no-js
|
display: block; wenn JS nicht geladen werden kann
|
1.0.0 |
.wm-u-db--legacyjs
|
display: block; auf veralteten Browsern
|
1.0.0 |
Text
| Klassename | Funktion | Version |
|---|---|---|
.wm-u-tdn
|
text-decoration: none;
|
1.0.0 |
.wm-u-ttu
|
text-transform: uppercase;
|
1.0.0 |
.wm-u-ttc
|
text-transform: capitalize;
|
1.0.0 |
.wm-u-ttn
|
text-transform: none;
|
1.0.0 |
.wm-u-tar
|
text-align: right;
|
1.0.0 |
.wm-u-tac
|
text-align: center;
|
1.0.0 |
.wm-u-fw400
|
font-weight: normal;
|
1.0.0 |
.wm-u-fw600
|
font-weight: bold;
|
1.0.0 |
.wm-u-fw740
|
font-weight: extrabold;
|
1.0.0 |
.wm-u-wwbw
|
word-wrap: break-word;
|
1.0.0 |
.wm-u-fzs
|
font-size: 1.5rem;
|
1.2.0 |
.wm-u-fz--smaller
|
font-size: 0.9em;
|
1.2.0 |
.wm-u-fz--smallest
|
font-size: 0.8em;
|
1.2.0 |
.wm-u-fzl
|
font-size: 2rem;
|
1.0.0 |
.wm-u-fzxl
|
font-size: 2.5rem;
|
1.0.0 |
Sonstiges
| Klassename | Funktion | Version |
|---|---|---|
.wm-u-fr
|
float: right;
|
1.0.0 |
.wm-u-fl
|
float: left;
|
1.0.0 |
.wm-u-fl--m
|
float: left; ab 768px Breakpoint
|
1.0.0 |
.wm-u-hyphens
|
hyphens: auto; automatische Silbentrennung
|
1.0.0 |
.wm-u-o0
|
opacity: 0;
|
1.0.0 |
.wm-u-o1
|
opacity: 1;
|
1.0.0 |
.wm-u-o01
|
opacity: 0.1;
|
1.0.0 |
.wm-u-lsn
|
list-style: none;
|
1.0.0 |
.wm-u-oa
|
overflow: auto;
|
1.0.0 |
.wm-u-pr
|
position: relative;
|
1.2.0 |
Hilfsklassen
Hilfsklassen bestehen im Gegensatz zu Utility-Klassen nicht nur aus 1 bis 2 Eigenschaften, sondern aus einer Reihe von Eigenschaften und Selektoren.
| Klassename | Funktion | Version |
|---|---|---|
.wm-h-vh
|
Versteckt ein Element nur visuell, für Screen Reader immer noch zugänglich. | 1.0.0 |
.js-wm-h-url
|
Bricht lange URLs automatisch bei einem „/“ um, wenn notwendig. Kann JavaScript nicht geladen werden, wird die URL mit einer Ellipse („…”) abgekürzt. | 1.0.0 |
.wm-h-links--unstyled a
|
Standard Link-Styling entfernen, beispielsweise bei verlinkten Bildern oder Icons. | 1.0.0 |
.wm-h-links--noline a
|
Link in Fastschwarz, ohne Textunterstreichung. Beispielsweise im Pattern Footer zu finden. | 1.0.0 |
.wm-h-links--line a
|
Link in Fastschwarz, mit Textunterstreichung. | 1.0.0 |
.wm-h-list-reset
|
Listen-Styling: list-style: none; padding: 0; margin-bottom: 0; entfernt standard Styles von Listen
|
1.0.0 |
.wm-h-ellipsis
|
Überlaufender Inhalt wird durch "..." Auslassungszeichen markiert. | 1.0.0 |
Sonstige Klassen
Ergänzend zu den Hilfsklassen gibt es weitere Klassen, die sehr spezifische Aufgaben erfüllen und meist nur auf bestimmte Elemente angewendet werden dürfen.
| Klassename | Funktion | Version |
|---|---|---|
.wien
|
Auf <html> anwenden. Identifiziert ein Template im wien.gv.at Layout.
|
1.0.0 |
.wm-has-ms-nav
|
Auf <html> anwenden. Identifiziert ein Template als Microsite (Header und Menübalken).
|
1.0.0 |
.wm-has-no-stage
|
Auf <html> anwenden. Stellt sicher, dass margin-bottom auf .wm-site-header nicht entfernt wird, wenn keine Stage vorhanden ist.
|
1.0.0 |
.wm-no-js
|
Auf <html> anwenden. Basisklasse, wenn JavaScript deaktiviert ist.
|
1.0.0 |
.wm-js
|
Wird automatisch auf <html> angewendet, wenn JavaScript aktiv ist.
|
1.0.0 |
.wm-jsm
|
Wird automatisch auf <html> angewendet, wenn der Browser JavaScript Module beherrscht.
|
1.0.0 |
BenutzerInnen-definiertes CSS
Die mit dem Theme mitgelieferten Dateien dürfen unter keinen Umständen verändert werden. Wenn das Theme die gewünschten Anforderungen nicht erfüllt, wenden Sie sich bitte an die Redaktion, die Ihnen Alternativen oder Lösungsmöglichkeiten vorschlagen wird.