Skip to content
JavaScript Reference

Utility-Klassen

Contao Framework

Section titled “Contao Framework”

_center-items.scss

Section titled “_center-items.scss”
utilities/_center-items.scss
@use "../abstracts/" as *;


.mx-auto {
  margin-inline: auto;
}
.mx-right {
  margin-inline-start: auto;
}
.text-align-center {
  text-align: center;
}
.center-block {
  display: grid;
  place-items: center;
}

_colors.scss

Section titled “_colors.scss”

.color-neutral-900 .color-primary-200 .color-cd-xxx .background-neutral-900 .background-primary-200 .background-cd-xxx

@use "../abstracts" as *;


// generates the utility-classes
//utility-Klassen aus der $default-Map in abstracts/_colors.scss
// default ist die 1. map
// $shade-maps sind "neutral", "primary" und "secondary"
// $color sind die key-value-pairs in den $shade-maps
// $shade sind die Schattierungen (000, 100, ...)
// $value sind die private members ($-clr-white, $ clr-gray-100, ...)


@each $color, $shade-map in $default {
  @each $shade, $value in $shade-map {
    .color-#{$color}-#{$shade} {
      color: var(--#{$color}-#{$shade});
    }
    .background-#{$color}-#{$shade} {
      background-color: var(--#{$color}-#{$shade});
    }
  }
}

_flex-group.scss

Section titled “_flex-group.scss”

.flex-group kann für eine beliebige Anzahl von Elementen verwendet werden, die mit gleichem Abstand angeordnet werden und, falls nötig, in die nächste Zeile umbrechen müssen. Die Abstände zwischen den Elementen können mit custom properties auch als inline-Styles gesetzt werden.

utilities/_flex-group.scss
@use "../abstracts/" as *;


.flex-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--flex-column-gap, $flex-group-gap);
  row-gap: var(--flex-row-gap, $flex-group-gap);
  width: fit-content;
}
.flex-group.mx-auto {
  justify-content: center;
}

Beispiel Text und Icons:

Section titled “Beispiel Text und Icons:”

Zwischen dem Copyright und den beiden Social-Media-Icons sind unterschiedliche Abstände gefordert. Das lässt sich super mit custom properties als inline Style lösen:

  <div class="flex-group" style="--flex-column-gap: 1rem">
    <p>Text</p>
    <div class="flex-group" style="--flex-column-gap: 0.5rem">
      <a>Icon 1</a>
      <a>Icon 2</a>
    </div>
  </div>

flex-group

Beispiel Kategorien:

Section titled “Beispiel Kategorien:”

Unterschiedliche Abstände für row und column, Kategorien brechen automatisch um:

<ul class="flex-group">
  <li>Kategorie 1</li>
  <li>Kategorie 2</li>
  <li>Kategorie 3</li>
  <li>Kategorie 4</li>
  <li>Kategorie 5</li>
</ul>
.flex-group {
  --flex-column-gap: 1rem;
  --flex-row-gap: 0.5rem;
}

flex-group für Kategorien

Kombination mit .mx-auto

Section titled “Kombination mit .mx-auto”

.flex-group.mx-auto zentriert die Gruppe in der Mitte der verfügbaren Breite:

flex-group mit mx-auto

_font-families.scss

Section titled “_font-families.scss”
utilities/_font-families.scss
@use 'sass:meta';
@use "../abstracts/" as *;


.font-family-body {
  font-family: $font-family-body;
}
.font-family-headline {
  font-family: $font-family-headline;
}
.font-family-accent {
  @if meta.variable-exists(font-family-accent) {
    font-family: $font-family-accent;
  }
}
.font-family-italic {
  @if meta.variable-exists(font-family-italic) {
    font-family: $font-family-italic;
    font-style: normal;
  } @else {
    font-family: $font-family-body;
    font-style: italic;
  }
}
.font-family-bold {
  @if meta.variable-exists(font-family-bold) {
    font-family: $font-family-bold;
    font-style: $font-weight-body;
  } @else {
    font-family: $font-family-body;
    font-style: $font-weight-bold;
  }
}

_font-sizes.scss

Section titled “_font-sizes.scss”
utilities/_font-sizes.scss
@use "../abstracts/" as *;


// normally, you would use a map here, but
// as we use clamp, we have to list the
// sizes manually


.font-size-small {
  font-size: $font-size-small;
}
.font-size-smaller {
  font-size: $font-size-smaller;
}
.font-size-body {
  font-size: $font-size-body;
}
.font-size-bigger {
  font-size: $font-size-bigger;
}
.font-size-h3 {
  font-size: $font-size-h3;
}
.font-size-h2 {
  font-size: $font-size-h2;
}
.font-size-h1 {
  font-size: $font-size-h1;
}
.font-size-hero {
  font-size: $font-size-hero;
}

_font-weight.scss

Section titled “_font-weight.scss”
utilities/_font-weight.scss
@use 'sass:meta';
@use "../abstracts/" as *;


.font-weight-body {
  font-weight: $font-weight-body;
}
.font-weight-bold {
  @if meta.variable-exists(font-weight-bold) {
    font-weight: $font-weight-bold;
  }
}
.font-weight-semibold {
  @if meta.variable-exists(font-weight-semibold) {
    font-weight: $font-weight-semibold;
  }
}
.font-weight-black {
  @if meta.variable-exists(font-weight-black) {
    font-weight: $font-weight-black;
  }
}

_spacing.scss

Section titled “_spacing.scss”

Spacing-Klassen benötigen wir für die flexible Abstandgestaltung …

  1. Zur Generierung der Utility-Klassen werden die Werte aus abstracts/_sizes.scss verwendet:
utilities/_spacing.scss
@use "../abstracts/" as *;


// .margin-, margin-block-, ...
// sizes: 1px - 15px
// sizes > 15px: 1, 1-125, 1-25, 1-375, 1-5, 1-625, 1-75, 2, 2-5, 3, 3-5, 4, 5
// .margin-inline-start-4px
// .padding-block-end-2-5


@each $size-name, $size-value in $sizes {
  .margin {
    &-#{$size-name} {
      margin: $size-value;
    }
    &-block-#{$size-name} {
      margin: $size-value;
    }
    &-block-start-#{$size-name} {
      margin-block-start: $size-value;
    }
    &-block-end-#{$size-name} {
      margin-block-end: $size-value;
    }
    &-inline-#{$size-name} {
      margin: $size-value;
    }
    &-inline-start-#{$size-name} {
      margin-inline-start: $size-value;
    }
    &-inline-end-#{$size-name} {
      margin-inline-end: $size-value;
    }
  }
}


@each $size-name, $size-value in $sizes {
  .padding {
    &-#{$size-name} {
      padding: $size-value;
    }
    &-block-#{$size-name} {
      padding: $size-value;
    }
    &-block-start-#{$size-name} {
      padding-block-start: $size-value;
    }
    &-block-end-#{$size-name} {
      padding-block-end: $size-value;
    }
    &-inline-#{$size-name} {
      padding: $size-value;
    }
    &-inline-start-#{$size-name} {
      padding-inline-start: $size-value;
    }
    &-inline-end-#{$size-name} {
      padding-inline-end: $size-value;
    }
  }
}
  1. Da es in abstracts/_sizes.scss keine 0 gibt, fügen wir diese händisch ein:
utilities/_spacing.scss
.margin-block-start-0 {
  margin-block-start: 0;
}
.margin-block-end-0 {
  margin-block-end: 0;
}
.padding-block-start-0 {
  padding-block-start: 0;
}
.padding-block-end-0 {
  padding-block-end: 0;
}
  1. Auch die Abstände zwischen den Artikeln bzw. Content-Elements werden händisch hinzugefügt:
utilities/_spacing.scss
// article- and content-element-margin-block classes
.article-margin-block {
  margin-block: $article-padding-block;
}
.article-margin-block-start {
  margin-block-start: $article-padding-block;
}
.article-margin-block-end {
  margin-block-end: $article-padding-block;
}
.content-element-margin-block {
  margin-block: $content-element-padding-block;
}
.content-element-margin-block-start {
  margin-block-start: $content-element-padding-block;
}
.content-element-margin-block-end {
  margin-block-end: $content-element-padding-block;
}

_spacing.scss: .flow und .content-flow

Section titled “_spacing.scss: .flow und .content-flow”

… und für den Flow zwischen den einzelnen Inhaltselementen innerhalb z.b. .mod_article (wobei .flow auch auf andere Elemente angewendet werden kann). .content-flow macht dasselbe, aber mit geringerem Abstand.

utilities/_spacing.scss
...


@layer default {
  // spacing within .mod_article.flow
  .flow {
    .inside {
      > *:where(:not(:first-child)) {
        margin-block-start: $article-flow-space;
      }
      // if headline is a separate element, unset margin-block-start
      > *:where(h1, h2, h3) + [class^="mod_"] {
        margin-block-start: unset;
      }
    }
  }


  // spacing within modules (layout_full)
  .content-flow {
    > *:where(:not(:first-child)) {
      margin-block-start: $content-flow-space;
    }
  }
}

Contao-Boilerplate only

Section titled “Contao-Boilerplate only”
abstracts/_mixins.scss
@mixin wrapper-inside {
  --padding: #{$wrapper-min-margin-inline} * 2;
  --max-width: #{$wrapper-max-width};


  width: min(100% - var(--padding), var(--max-width));
  margin-inline-start: auto;
  margin-inline-end: auto;
}
utilities/_wrapper-inside.scss
@use "../abstracts/" as *;


.wrapper-inside {
  @include wrapper-inside;
}