Utility-Klassen

Contao Framework

_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

@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

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

_font-families.scss

@use 'sass:meta';
@use "../abstracts/" as *;

.font-family-body {
  font-family: $font-family-body;
}
.font-family-heading {
  font-family: $font-family-heading;
}
.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-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

@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

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

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

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

… 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.

...

@layer default {
  // spacing within .mod_article.flow
  .flow {
    .inside {
      > *:where(:not(:first-child)) {
        margin-block-start: $article-flow-space;
      }
    }
  }

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

Contao-Boilerplate only

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

@use "../abstracts/" as *;

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