- Was sind Utility-Klassen?
Was sind Utility-Klassen?
Basic: CSS (Cascading Style Sheets) ist eine Sprache, mit der du das Aussehen und die Gestaltung von HTML-Elementen auf einer Webseite definieren kannst, wie Farben, Abstände oder Schriftarten.
Utility-Klassen in CSS sind vorgefertigte, kleine Klassen, die eine spezifische Styling-Aufgabe erfüllen, z. B. text-center für zentrierten Text oder bg-blue für einen blauen Hintergrund, und sie erleichtern die schnelle und konsistente Gestaltung von Webseiten.
In unserer Provider-Extension arbeiten wir hunderten dieser kleinen Helfer-Klassen. Diese Klassen werden im Backend von TYPO3 in gekennzeichneten Input-Feldern an entsprechender Stelle eingegeben.
Utility-Klassen in unseren Projekten:
Die kann man in unseren TYPO3-Installationen an vielen Stellen sehr flexibel einstellen und justieren.
Flexbox-Klassen Foundation Framework
Flexbox Parent Classes
.flex-container
: Makes the element a flex container..flex-dir-row
: Sets the flex direction to row (default)..flex-dir-row-reverse
: Reverses the row direction..flex-dir-column
: Sets the flex direction to column..flex-dir-column-reverse
: Reverses the column direction.
Horizontal Alignment (Parent Classes)
.align-right
: Aligns children to the right..align-center
: Centers children horizontally..align-justify
: Distributes space between children evenly (no space at edges)..align-spaced
: Distributes space around children (includes space at edges).
Vertical Alignment (Parent Classes)
.align-top
: Aligns children to the top..align-middle
: Centers children vertically..align-bottom
: Aligns children to the bottom..align-stretch
: Stretches children to fill the container height.
Child-Specific Alignment
.align-self-top
: Aligns a specific child to the top..align-self-middle
: Centers a specific child vertically..align-self-bottom
: Aligns a specific child to the bottom..align-self-stretch
: Stretches a specific child to fill its container.
Flex Child Behavior
.flex-child-auto
: Makes a child take up remaining space automatically..flex-child-grow
: Allows a child to grow and take up all available space..flex-child-shrink
: Shrinks a child to its minimum size.
Central Alignment
.align-center-middle
: Centers all children both horizontally and vertically.
Responsive Variants
- All classes can be used with responsive breakpoints by prefixing them with breakpoint names like
small-
,medium-
, orlarge-
. - Examples:
small-align-center
,large-flex-child-grow
.
Utility-Klassen min_sitecore
Hintergrund und Border
.bgw
- Weißer Hintergrund.bgb
- Schwarzer Hintergrund.bgno
,.nobg
- Kein Hintergrund.noborder
,.borderno
- Kein Rahmen.rounded
- Sehr stark abgerundete Ecken.radius
- Leicht abgerundete Ecken.bordered
- Ein dünner, grauer Rahmen.shadow
- Box-Schatten-Effekt
Flexbox-Helper
.display-flex
- Flexbox-Layout aktivieren.align-center
- Elemente zentrieren (horizontal).align-center-bottom
- Zentrieren und unten ausrichten.align-bottom-right
- Unten rechts ausrichten.align-center-middle
- Zentriert in alle Richtungen.flex-align-center
- Vertikal zentrieren mit Flexbox.flex-align-bottom
- Elemente unten ausrichten.flex-align-bottom75-center
- Zentrieren, 75% Höhe.flex-align-bottom90-center
- Zentrieren, 90% Höhe.center-split
- 50% split content
Images
.of-cover
- object-fit: cover
Positionierung
.position-static
- Position: static.position-relative
- Position: relative.position-absolute
- Position: absolute.position-inherit
- Position wird geerbt.position-fixed
- Fixierte Position.position-fixed-top
- Fixierte obere Position.position-fixed-bottom
- Fixierte untere Position
Halbzentrierte Bereiche
.allinner-half
: Max-Breite: 720px, Margin: Auto.allinner-half-content-right
: Max-Breite: 720px, Margin-Left: Auto, Margin-Right: 0.allinner-half-content-left
: Max-Breite: 720px, Margin-Right: Auto, Margin-Left: 0
Flex-Klassen
.flex-align-center
: Breite: 100vw.flex-align-bottom75-center
,.flex-align-bottom90-center
: Breite: 100vw (Breakpoints max-width: 1440px aktiv)
Centered Split-Klassen
.center-split
: Positionierung: Flexbox, Richtung: Horizontal.center-split > *
: Breite:50vw
, Flexbox aktiviert- Medienabfragen (bei max-width: 1024px):
.center-split
: Richtung: Spalte.center-split > *
: Breite:100%
Flex-Box Reihenfolge
.flex-order-0
: Reihenfolge: 0.flex-order-1
: Reihenfolge: 1.flex-order-m1
: Reihenfolge: -1
Objektfüllung bei Bildern und Videos
.of-cover
,.of-cover img
: Anzeige: Block,object-fit: cover
, kein Padding.center-split > img
,.center-split > picture
,.center-split > video
: Anzeige: Block, Objektfüllung:cover
Overflow-Handling
.overflow-visible
- Sichtbarer Overflow.overflow-hidden
- Overflow verstecken.overflow-scroll
- Scrollbarer Overflow.overflow-x-hidden
- Horizontalen Overflow verstecken.overflow-y-scroll
- Vertikalen Overflow scrollfähig
Z-Index
.z-index-1
- Z-Index-Wert 1.zindex-one
- Gleicher Effekt
Farben
.color1
,.color-one
- Farbe: Dunkles Grau.color2
,.color-two
- Farbe: Mittleres Grau.color3
,.color-three
- Farbe: Helleres Grau.redcolor
- Rote Farbe.bluecolor
- Blaue Farbe
Sonstige Klassen
.autoheight
- Automatische Höhe.separator-center
- Zentrierter Trenner.flexrow
- Flex-Row-Basislayout.flexcol
- Flex-Column-Basislayout
Textklassen text-*
- Farben:
.text-muted
: Farbe:#999999
.text-primary
: Farbe:#428BCA
.text-warning
: Farbe:#8A6D3B
.text-danger
: Farbe:#A94442
.text-success
: Farbe:#3C763D
.text-info
: Farbe:#31708F
.text-info:hover
: Farbe:#245269
- Textausrichtung:
.text-left
: Linksbündig.text-right
: Rechtsbündig.text-center
: Zentriert.text-justify
: Blocksatz
- Texttransformation:
.text-uppercase
: Großbuchstaben.text-lowercase
: Kleinbuchstaben.text-capitalize
: Kapitalisierte Formatierung
- Zeilenhöhe:
.text-lineheight
: Zeilenhöhe: 200%.text-lineheightn
: Zeilenhöhe: Normal.text-lineheight1
: Zeilenhöhe: 100%
Text-Stile
.text-hide
- Text verstecken.text-truncate
- Text abschneiden, wenn zu lang.text-nowrap
- Kein Zeilenumbruch.text-wrap
- Wörter umbrechen.text-lowercase
- Kleinbuchstaben.text-uppercase
- Großbuchstaben.text-capitalize
- Wortanfangsbuchstaben groß.text-overline
- Text mit Overline.text-underline
- Text unterstrichen.text-line-through
- Text durchgestrichen.no-text-decoration
,.text-decoration-none
,.ntd
- Keine Textdekoration
Listen-Stile
.list-unstyled
- Keine Listensymbole.list-disc
- Aufzählung mit Punkten.list-circle
- Aufzählung mit Kreisen.list-square
- Aufzählung mit Quadraten.list-decimal
- Nummerierte Listen.list-lower-alpha
- Kleinbuchstaben als Nummerierung.list-upper-alpha
- Großbuchstaben als Nummerierung.list-lower-roman
- Kleine römische Zahlen.list-upper-roman
- Große römische Zahlen
Alert-Klassen alert-*
- Globale Alert-Basis:
.alert
: Padding: 15px, Margin-Bottom: 20px, Border: 1px solid transparent, Border-Radius: 4px
- Farbige Alerts:
.alert-success
: Hintergrund:#dff0d8
, Border:#d6e9c6
, Farbe:#3c763d
.alert-info
: Hintergrund:#d9edf7
, Border:#bce8f1
, Farbe:#31708f
.alert-warning
: Hintergrund:#fcf8e3
, Border:#faebcc
, Farbe:#8a6d3b
.alert-danger
: Hintergrund:#f2dede
, Border:#ebccd1
, Farbe:#a94442
Hero-Bereich #tophero
.herotext
: Position: Absolut, Oben: 20%, Links: 5%- Breakpoints:
.blayout-pagets__heroimage_pure #tophero
: Min-Höhe: 100% (bei min-width: 768px).blayout-pagets__heroimage .stage
: Höhe: 100%
Vegas-Slider vegas-*
.vegas-arrows
: Z-Index: 999, Position: Absolut, Top: 50%- Pfeile:
.vegas-arrows .next
,.vegas-arrows .previous
: Padding: 0 10px, Font-Size: 50px, Farbe: Weiß, Opazität: 0.5.vegas-arrows .next:before
: Content:"\f0a8"
.vegas-arrows .previous:before
: Content:"\f0a9"
Video- und Medien-Heldenbereich is-video-hero
, is-media-slider
.is-video-hero
,.is-media-slider
: Position: Relativ.section-arrow-down
: Position: Absolut, Max-Höhe: 100vh, Top: 90vh, Links: 50%, Transform: TranslateX(-50%)- Für kleine Bildschirme (
max-width: 40.063em
): Top: 85vh
- Für kleine Bildschirme (
Jarallax jarallax
.jarallax
: Position: Relativ, Z-Index: 0.jarallax-img
: Position: Absolut, Objektfüllung: Cover, Breite: 100%, Höhe: 100%, Z-Index: -1
Font-Klassen min_sitecore
Größenklassen
.small-size
- Schriftgröße:var(--font-small)
.medium-size
- Schriftgröße:var(--font-medium)
.big-size
- Schriftgröße:var(--font-big)
.xxl-size
- Schriftgröße:var(--font-xxl)
Kleine Schriftarten
.small
,.small p
,a.small
und ähnliche - Schriftgröße:var(--font-small-all)
.font-small *
- Schriftgröße:var(--font-small)
.font-xsmall *
- Schriftgröße:var(--font-xsmall)
.font-usmall *
- Schriftgröße:var(--font-usmall)
Mittelgroße Schriftarten
.medium
,.medium p
,a.medium
und ähnliche - Schriftgröße:var(--font-medium-all)
Allgemeine Schriftstil-Klassen
cite
- Schriftstil:normal
CKEditor Größenklassen
.size-075
- Schriftgröße:var(--font075)
.size-088
- Schriftgröße:var(--font088)
.size-090
- Schriftgröße:var(--font090)
.size-150
- Schriftgröße:var(--font150)
.size-200
- Schriftgröße:var(--font200)
.size-250
- Schriftgröße:var(--font250)
.size-300
- Schriftgröße:var(--font300)
.size-350
- Schriftgröße:var(--font350)
.size-400
- Schriftgröße:var(--font400)
.size-500
- Schriftgröße:var(--font500)
.size-600
- Schriftgröße:var(--font600)
.size-112
- Schriftgröße:var(--font112)
.size-125
- Schriftgröße:var(--font125)
Nützliche Schriftarten-Klassen
.font07
- Schriftgröße:var(--font070)
.font-xxs
,.font075
- Schriftgröße:var(--font075)
.font08
- Schriftgröße:var(--font080)
.font-xs
,.font085
- Schriftgröße:var(--font085)
.font-s
,.font09
- Schriftgröße:var(--font090)
.font-m
,.font1
- Schriftgröße:var(--font100)
.font11
- Schriftgröße:var(--font110)
.font-l
,.font12
- Schriftgröße:var(--font120)
.font-xl
,.font13
- Schriftgröße:var(--font130)
.font14
- Schriftgröße:var(--font140)
.font-xxl
- Schriftgröße:var(--font-xxl)
.font-lighter
- Schriftgewicht: leichter
Viewport-basierte Schriftgrößen
.font-vw1
- Schriftgröße:var(--font-vw1)
.font-vw2
- Schriftgröße:var(--font-vw2)
.font-vw3
- Schriftgröße:var(--font-vw3)
.font-vw4
- Schriftgröße:var(--font-vw4)
.font-vw5
- Schriftgröße:var(--font-vw5)
.font-vw6
- Schriftgröße:var(--font-vw6)
.font-vw7
- Schriftgröße:var(--font-vw7)
.font-vw8
- Schriftgröße:var(--font-vw8)
.font-vw9
- Schriftgröße:var(--font-vw9)
.font-vw10
- Schriftgröße:var(--font-vw10)
Responsive Schriftgrößen
@media only screen and (max-width: 40.063em)
- Verdoppelt Schriftgröße für Viewport-gebundene Klassen wie.font-vw1
bis.font-vw10
Breiten und Höhen
General Widths and Heights
.max-width-50
: Sets max-width to 50px..max-width-100px
: Sets max-width to 100px..max-width-150
: Sets max-width to 150px..max-width-200
: Sets max-width to 200px..max-width-300
: Sets max-width to 300px..max-width-400
: Sets max-width to 400px..max-width-500
: Sets max-width to 500px..max-width-600
: Sets max-width to 600px..max-width-700
: Sets max-width to 700px..max-width-800
: Sets max-width to 800px..max-width-900
: Sets max-width to 900px..max-width-1000
: Sets max-width to 1000px..max-width-100vw
: Sets max-width to the viewport width (100vw)..width-25
: Sets width to 25% (important)..width-50
: Sets width to 50% (important)..width-75
: Sets width to 75% (important)..width-100
: Sets width to full (100%) (important)..height-25
: Sets height to 25% (important)..height-30
: Sets height to 30% (important)..height-40
: Sets height to 40% (important)..height-50
: Sets height to 50% (important)..height-60
: Sets height to 60% (important)..height-70
: Sets height to 70% (important)..height-75
: Sets height to 75% (important)..height-80
: Sets height to 80% (important)..height-85
: Sets height to 85% (important)..height-90
: Sets height to 90% (important)..height-100
: Sets height to full (100%) (important)..max-width-100
: Limits width to full (100%) (important)..max-height-100
: Limits height to full (100%) (important).
Responsive Widths (Based on Wrapper Width)
.width-five
: Max width is ~41.67% of wrapper width..width-six
: Max width is ~50% of wrapper width..width-seven
: Max width is ~58.33% of wrapper width..width-eight
: Max width is ~66.67% of wrapper width..width-nine
: Max width is ~75% of wrapper width..width-ten
: Max width is ~83.33% of wrapper width..width-eleven
: Max width is ~91.67% of wrapper width.
Grid System (Responsive Classes) bigger than 640px
.wlarge-auto
: Width set to auto..wlarge-1
: Width is ~8.33%..wlarge-2
: Width is ~16.67%..wlarge-3
: Width is ~25%..wlarge-4
: Width is ~33.33%..wlarge-5
: Width is ~41.67%..wlarge-6
: Width is ~50%..wlarge-7
: Width is ~58.33%..wlarge-8
: Width is ~66.67%..wlarge-9
: Width is ~75%..wlarge-10
: Width is ~83.33%..wlarge-11
: Width is ~91.67%..wlarge-12
: Full width (100%).
Alignment Helpers for Widths and Margins
.right-auto
: Automatically sets right margin; left margin unset..left-auto
: Automatically sets left margin; right margin unset..margin-auto
: Automatically sets left and right margin.
Some Specials:
.a1060center
: Centers content with a max width defined by variable (--maincontent-max)..a1060left
: Aligns content left with a max - width defined by variable (< em > -- maincontent - max )..a1060right
: Aligns content right with a max - width defined by variable (< em > -- maincontent - max )..w1240
: Limits the maximum element ' s width at1240 px .
Padding-Klassen min_sitecore
Root-Variablen
--spc
- Basiswert für Padding--spcf
- Basiswert für Berechnungen- Größenberechnungen:
--fp-1
bis--fp-7
- Flexible Einheiten (Padding/Padding-Top)--p-1
bis--p-10
- Padding für alle Seiten
Kleine Bildschirme
- Padding-Klassen für kleinere Screens (
max-width: 40.063em
):.spa0
- Padding: 0.sptb0
- Padding oben und unten: 0.splr1
bis.splr6
- Padding links/rechts mit Variablen--fp-1
bis--fp-6
.sptb1rem
,.sptb2rem
usw. - Top/Bottom-Padding auf Basis von--p-*
.spa1
,.spa6
- Volles Padding mit flexiblen Variablen
Mittelgroße Bildschirme
Für Screens im Bereich (min-width: 40.063em) and (max-width: 1440px)
:
- Padding-Basis
--spc
: 0.5 - Padding-Flexbasis
--spcf
: 1.0 - Kombination von Seitenpadding-Klassen, z.B.
.splr*
,.mpa*
Padding-Klassen - Alle Seiten
.pa0
,.padding-style-1
- Padding auf Basis von--fp-1
,--fp-*
.pa1
bis.pa10
- Wendet entsprechende Paddinggrößen an.
Padding-Klassen - Oben
.pt0
- Kein Padding oben.pt1
bis.pt10
- Top-Padding auf Basis flexibler Variablen
Padding-Klassen - Unten
.pb0
- Kein Padding unten.pb1
bis.pb10
- Bottom-Padding mit Variablen--fp-*
oder--p-*
Padding-Klassen - Links/Rechts
.plr0
- Kein Padding links/rechts.plr1
bis.plr10
- Flexible Paddingwerte
Padding-Klassen - Oben/Unten
.ptb0
- Kein Padding oben/unten.ptb1
bis.ptb10
- Flexible Werte basierend auf--fp
-Variablen
Bildbezogene Klassen
.img-pb
,.img-pt
,.img-pl
,.img-pr
- Padding für Bilder.ceimgbg-frame
- Erbt Padding in Bildern
Medienabfragen
- Kleine screens (max-width: 40.063em): Wendet kleinere Padding-Einheiten an.
- Mittelgroße screens (min-width: 40.063em, max-width: 1440px): Basispadding wird halbiert, d.h.,
--spc = 0.5
.
Details zu: Innenabstände - padding
Innenabstände (padding) und Außenabstände (margin)
Die kann man in unseren TYPO3-Installationen an vielen Stellen sehr flexibel einstellen und justieren.
Padding links
Padding rechts
Padding links und rechts
Padding oben
Padding unten
Padding oben und unten
Padding all
Innenabstände Logik und Werte
Teil 1: Paddingkürzel
- pa = padding an allen vier Seiten
- pt = padding oben
- pb = padding unten
- pl = padding links
- pr = padding rechts
- ptb = padding oben und unten
- plr = padding links un rechts
Teil 2: Werte
- --fp-1 bis --fp-7 sind spezielle Foundation-Werte
- --p-1 bis --p10 sind Werte von 1-10 rem
Teil 3: Kombinationen für Foundation
Es gibt folgende Möglichkeiten für Klassennamen:
- Paddingkürzel + Wert fp-1 bis fp-7
- Beispiel pl7 = padding-left: 0.9375rem
Teil 4: Kombinationen neu:
- Paddingkürzel + Wert p-1 bis p-10 + rem
- Beispiel: pl7rem = padding-left: 7rem.
Abstände Responsive
Die Abstände werden in drei Zuständen ausgeliefert und können im Mandanten justiert werden: Desktop = voller Wert (rem). Tablet = 0.5 des vollen Werts. Smartphones: 0.2 des vollen Werts. Beispiel:
Margin-Klassen min_sitecore
Root-Variablen
--spc
- Basiswert für Margenberechnung--spcf
- Basiswert für Berechnungen- Größenberechnungen:
--fm-1
bis--fm-7
- Flexible Einheiten--m-1
bis--m-10
- Standard-Margen für alle Seiten
Kleine Bildschirme
- Margen-Klassen für kleinere Screens (
max-width: 40.063em
):.ma0
,.mp0
- Margen auf 0 setzen.ma1
,.ma2
,.ma7
- Flexible Margen basierend auf--fm-*
.ma1rem
,.ma10rem
- Rem-Margen basierend auf--m-*
Mittelgroße Bildschirme
Für Screens im Bereich (min-width: 40.063em) and (max-width: 1440px)
:
- Margin-Basis
--spc
: 0.5 - Margin-Flexbasis
--spcf
: 1.0 - Nutzung von Kombinationen für Seitennavigation (
.mlr*
,.mtb*
)
Margin-Klassen - Alle Seiten
.ma0
,.mp0
- Kein Margin.ma1
,.ma7
,.margin-style-1
- Flexbasis--fm-*
.ma1rem
,.ma10rem
- Rem-Basis--m-*
Margin-Klassen - Oben
.mt0
- Kein Margin oben.mt1
,.mt7
- Flexible Werte--fm-*
.mt1rem
,.mt10rem
- Rem-Werte--m-*
Margin-Klassen - Unten
.mb0
- Kein Margin unten.mb1
,.mb7
- Flexible Werte--fm-*
.mb1rem
,.mb10rem
- Rem-Werte--m-*
Margin-Klassen - Links
.ml0
- Kein Margin links.ml1
,.ml7
- Flexible Werte--fm-*
.ml1rem
,.ml10rem
- Rem-Werte--m-*
Margin-Klassen - Rechts
.mr0
- Kein Margin rechts.mr1
,.mr7
- Flexible Werte--fm-*
.mr1rem
,.mr10rem
- Rem-Werte--m-*
Margin-Klassen - Links/Rechts
.mlr0
- Kein Margin links/rechts.mlr1
,.mlr7
- Flexible Werte--fm-*
.mlr1rem
,.mlr10rem
- Rem-Werte--m-*
Margin-Klassen - Oben/Unten
.mtb0
- Kein Margin oben/unten.mtb1
,.mtb7
- Flexible Werte--fm-*
.mtb1rem
,.mtb10rem
- Rem-Werte--m-*
Bildbezogene Klassen
.img-pb
- Bild-Margin unten basierend auf--fm-7
.img-pt
- Margin oben für ein Bild auf Basis von--fm-2
.img-pr
- Rechte Margin basierend auf--fm-7
Responsive Margin-Klassen ml*c
Die Werte vor dem c beziehen sich auf die Foundation-Grid-Col-Werte in Prozenten
- Ab 1024px Bildschirmbreite:
.ml1c
: Linker Abstand:var(--margin-left-1col)
.ml2c
: Linker Abstand:var(--margin-left-2col)
.ml3c
: Linker Abstand:var(--margin-left-3col)
.ml4c
: Linker Abstand:var(--margin-left-4col)
.ml5c
: Linker Abstand:var(--margin-left-5col)
.ml6c
: Linker Abstand:var(--margin-left-6col)
.mr1c
: Rechter Abstand:var(--margin-left-1col)
.mr2c
: Rechter Abstand:var(--margin-left-2col)
.mr3c
: Rechter Abstand:var(--margin-left-3col)
.mr4c
: Rechter Abstand:var(--margin-left-4col)
.mr5c
: Rechter Abstand:var(--margin-left-5col)
.mr6c
: Rechter Abstand:var(--margin-left-6col)
.ml50
: Linker Abstand: 50%.mr50
: Rechter Abstand: 50%
Alignment Helpers for Widths and Margins
.right-auto
: Automatically sets right margin; left margin unset..left-auto
: Automatically sets left margin; right margin unset..margin-auto
: Automatically sets left and right margin.
Responsive Helfer für Abstände und Breiten
.small-mb6
(max-width: 40.063em): Unterer Abstand der Zellen:1.875rem
.small-mb7
(max-width: 40.063em): Unterer Abstand der Zellen:.9375rem
Details zu: Außenabstände - margin
Margin links
Margin rechts
Margin links und rechts
Margin oben
Margin unten
Margin oben und unten
Margin all
Außenabstände Logik und Werte
Teil 1: marginkürzel
- ma = margin an allen vier Seiten
- mt = margin oben
- mb = margin unten
- ml = margin links
- mr = margin rechts
- mtb = margin oben und unten
- mlr = margin links un rechts
Teil 2: Werte
- --mp-1 bis --mp-7 sind spezielle Foundation-Werte
- --p-1 bis --p10 sind Werte von 1-10 rem
Teil 3: Kombinationen für Foundation
Es gibt folgende Möglichkeiten für Klassennamen:
- marginkürzel + Wert mp-1 bis mp-7
- Beispiel ml7 = margin-left: 0.9375rem
Teil 4: Kombinationen neu:
- marginkürzel + Wert m-1 bis m-10 + rem
- Beispiel: ml7rem = margin-left: 7rem.
Abstände Responsive
Die Abstände werden in drei Zuständen ausgeliefert und können im Mandanten justiert werden: Desktop = voller Wert (rem). Tablet = 0.5 des vollen Werts. Smartphones: 0.2 des vollen Werts. Beispiel: