Referenz für die wichtigsten SASS-Variablen und Utilities im admorris Pro Template.

Lightning CSS

Der gesamte CSS-Output wird mit Lightning CSS verarbeitet. Lightning CSS übernimmt automatisch die Minification des Output.

User-Styles (Eigene Anpassungen)

Alle eigenen Styles werden in styles/sass/user-styles/ angelegt. Die Dateien sind nach Funktion und Seitentyp aufgeteilt:

Variablen & Funktionen

Globale Styles

Seitentyp-spezifische Styles (Code-Splitting)

Die übrigen Dateien werden nur auf dem jeweiligen Seitentyp geladen. Dadurch wird der CSS-Code pro Seite kleiner gehalten – weniger CSS = schnelleres Laden = besserer PageSpeed.

Beispiel: Variable überschreiben

// _user-variables.scss
$primary: #e63946;
$container-sizes: (
  xs: 650px,
  s: 900px,
  m: 1200px,
  l: 1400px,
  xl: 1600px,
  fullwidth: 2800px,
);

Media Queries

Die einfachste Weise die Bootstrap Breakpoints zu verwenden, ist die Breakpoint Function breakpoint-min() und breakpoint-max(), die die Werte der Breakpoints zurückgeben. Diese können direkt in Media Queries verwendet werden, entweder in der klassischen Syntax oder in der neuen Range-Syntax.

Wichtig: Die alten Bootstrap-Variablen im Format $screen-xx (z.B. $screen-lg) sind veraltet. Stattdessen sollten vorzugsweise die Breakpoint-Helfer verwendet werden (z.B. breakpoint-min(lg) / breakpoint-max(md)) direkt in Media Queries. Vermeide die direkten $screen-xx-Variablen, da sie nur noch zur Abwärtskompatibilität vorhanden sind.

Standard Media-Query mit Breakpoint-Helfer

@media (min-width: breakpoint-min(lg)) {
  // ...
}

Neue Media-Query Range Syntax

// Kleiner als ein Breakpoint
@media (width < breakpoint-min(sm)) {
  // ...
}

// Größer als ein Breakpoint
@media (width >= breakpoint-min(lg)) {
  // ...
}

// Kombiniert
@media (breakpoint-min(md) <= width < breakpoint-min(xl)) {
  // ...
}

Verfügbare Breakpoints

Breakpoint-Funktionen aus bootstrap/mixins/_breakpoints.scss:

• breakpoint-min($name) – Gibt den Minimalwert zurück (z.B. breakpoint-min(md) → 768px)
• breakpoint-max($name) – Gibt den Maximalwert zurück (breakpoint-min des nächsten Breakpoints minus 0.02px)

Container Sizes

Definiert in _variables-custom.scss. Alle Werte sind mit !default überschreibbar.

$container-sizes: (
  xs: 650px,
  s: 900px,
  m: 1260px,
  l: 1480px,
  xl: 1680px,
  fullwidth: 2800px,
) !default;

Container Padding

Das Container-Padding wird fluid berechnet (20px → 50px zwischen 320px und 1240px Viewport-Breite):

$container-padding: utopia.calculateClamp(
  (
    'minWidth': 320,
    'maxWidth': 1240,
    'minSize': 20,
    'maxSize': 50,
    'usePx': true,
    'relativeTo': 'viewport-width',
  )
) !default;

Als CSS Custom Property verfügbar:

var(--container-padding)

Brand & Theme-Farben

Die Theme-Farben basieren auf Bootstrap und können über die $theme-colors Map überschrieben werden:

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;

Zugriff über die theme-color() Funktion:

color: theme-color('primary');
background: theme-color('danger');

Brand Tones

$brand-custom-tones: false !default;
$brand-text-muted: rgba($tone-base, 60%) !default;
$brand-tone50: rgba($tone-base, 60%) !default;
$brand-tone25: rgba($tone-base, 25%) !default;

Alert-Farben

// Success
$alert-success-color: #36593d;
$alert-success-bg: #edfff1;

// Info
$alert-info-color: #27373f;
$alert-info-bg: #eef9ff;

// Warning
$alert-warning-color: #68522c;
$alert-warning-bg: #fcf8e3;

// Danger
$alert-danger-color: #683b46;
$alert-danger-bg: #ffedf1;

Utopia – Fluid Type & Space Scale

Das Template nutzt Utopia für fluid-responsive Typografie und Spacing. Die CSS Custom Properties werden auf :root generiert.

Verfügbare Type-Variablen (--step-*)

Generiert über utopia.generateTypeScale() mit den Einstellungen: Basis 16px–18px, Scale 1.2–1.25.

Verwendung:

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
p {
  font-size: var(--step-0);
}
small {
  font-size: var(--step--1);
}

Verfügbare Space-Variablen (--space-*)

Generiert über utopia.generateSpaceScale(). Die Werte skalieren fluid zwischen 320px und 1240px Viewport-Breite.

One-Up Pairs (fluid von klein nach groß)

Custom Pairs

Verwendung:

.card {
  padding: var(--space-s-m); // fluid padding
  margin-bottom: var(--space-l);
  gap: var(--space-xs);
}

.section {
  padding-block: var(--space-xl-2xl); // größerer fluid Abstand
}

Eigene Fluid Sizes mit calculateClamp

Mit der Funktion utopia.calculateClamp() können eigene fluid Werte berechnet werden, die nicht Teil der generierten Scale sein müssen.

Import

@use '../vendor/utopia/utopia';

Syntax

utopia.calculateClamp((
    'minWidth': <viewport-min>,   // untere Viewport-Grenze (unitless, in px)
    'maxWidth': <viewport-max>,   // obere Viewport-Grenze (unitless, in px)
    'minSize': <size-min>,        // Wert bei minWidth (unitless)
    'maxSize': <size-max>,        // Wert bei maxWidth (unitless)
    'usePx': true | false,        // Optional: Ausgabe in px statt rem (default: false)
    'relativeTo': 'viewport' | 'viewport-width' | 'container',
                                  // Optional: vi (default), vw, oder cqi
));

Beispiele

Fluid Padding (20px → 50px):

.element {
  padding: #{utopia.calculateClamp(
      (
        'minWidth': 320,
        'maxWidth': 1240,
        'minSize': 20,
        'maxSize': 50,
        'usePx': true,
        'relativeTo': 'viewport-width',
      )
    )};
}

Fluid Font-Size (14px → 18px, in rem):

.text {
  font-size: #{utopia.calculateClamp(
      (
        'minWidth': 320,
        'maxWidth': 1240,
        'minSize': 14,
        'maxSize': 18,
      )
    )};
}

Fluid Gap relativ zum Container:

.grid {
  gap: #{utopia.calculateClamp(
      (
        'minWidth': 320,
        'maxWidth': 1240,
        'minSize': 8,
        'maxSize': 24,
        'usePx': true,
        'relativeTo': 'container',
      )
    )};
}

relativeTo Optionen

Als CSS Custom Property

:root {
  --my-fluid-size: #{utopia.calculateClamp(
      (
        'minWidth': 320,
        'maxWidth': 1240,
        'minSize': 16,
        'maxSize': 32,
      )
    )};
}

Dann im CSS verwenden:

.element {
  margin: var(--my-fluid-size);
}

Typography Variablen

Wichtige Typografie- und Navigation-Variablen, die für eigene User Styles oft überschrieben werden:

• $mobile-nav-breakpoint — Steuerung ab wann die mobile Navigation greift (Standard im Template: 1030px).
• $font-family-base — Basis-Schriftfamilie für Body-Text.
• $headings-font-family — Schriftfamilie für Überschriften (H1–H6).
• $headings-font-weight — Standard Font-Weight für Überschriften.
• $headings-line-height — Zeilenhöhe für Überschriften.
• $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size — Falls gesetzt: explizite Default-Größen für H1–H6.

Diese Variablen werden in den styles/sass/abstracts/_variables-custom.scss und in den Bootstrap-Variable-Files definiert. Um Werte zu überschreiben, lege die Änderungen in styles/sass/user-styles/_user-variables.scss (nur Variablen) ab, sodass die !default-Werte vorher im Build ersetzt werden.

Beispiel Override:

// styles/sass/user-styles/_user-variables.scss
$mobile-nav-breakpoint: 980px;
$font-family-base:
  'Inter',
  system-ui,
  -apple-system,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  Arial;
$headings-font-family: 'Chromium Serif', Georgia, 'Times New Roman', serif;

Hinweis: Nach dem Überschreiben in _user-variables.scss können die restlichen User-Style-Dateien (_user-styles.scss, _non-critical.scss, Seite-spezifische Dateien) die neuen Werte direkt verwenden.