• 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-, or large-.
  • 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

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:

padding all 5rem

padding top 8rem

padding right 7rem

padding left right Foundation 1

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:

margin all 5rem

margin top 8rem

margin right 7rem

margin left right Foundation 1