frayme ist eine Dokumentaion meiner persönlichen CSS-Bibliothek um Websiten leichter und schneller erstellen zu können

frayme

Welcome

In der Dokumentation der frayme-CSS-Bibliothek – ein Werkzeugkasten für konsistentes und flexibles Webdesign. Diese Bibliothek basiert auf CSS-Variablen und modularen Klassen, die es ermöglichen, Farben, Typografie und Layouts zentral zu steuern – und das mit minimalem Aufwand.

Schriftbild

Die Schriftbild-Module von frayme umfassen Schriftgrößen, Schriftarten, Text-Stile, Listen und Tabellen. Die Größen basieren auf dem Goldenen Schnitt und skalieren von einem Ausgangswert von 1 rem (16 px). Alle wesentlichen Parameter lassen sich über CSS-Variablen anpassen, ergänzende Utility-Klassen decken den direkten Einsatz im Markup ab.

Schriftgrößen

Der Ausgangswert aller Schriftgrößen ist 1 rem was 16px +- Zeilenabstand entspricht, und wird duch die Klasse typo-size-1 representiert. Diese Größe kann an der Variable --font-size-basic in variables.css angepasst werden. Von diesem Wert ausgehend, ändern sich alle weiteren Schriftgrößen nach dem goldenen Schnitt.

Der Multiplikator für Schriftgrößen kann an der Variable --multiplikator-font verändert werden.

die Schriftgrößen haben einen anderen Multiplikator als die Abstände – basieren aber alle standartmäßig auf dem Golden Schnitt. Um weiche Abstufungen für die Schriftgößen zu schaffen habe ich ihnen einen eigenen Multiplikator erzeugt, der der Quadratwurzel des Goldenen Schnitts entspricht

Die responsiven Schriftgrößen wurden nach Augenmaß erstellt und folgen nur in ihrer Abstufung dem goldenen Schnitt. Sie lassen sich an den Variablen --font-size-resp-1,--font-size-resp-2 und --font-size-resp-3 einstellen.

Hamburg -8

Hamburg -7

Hamburg -6

Hamburg -5

Hamburg -4

Hamburg -3

Hamburg -2

Hamburg -1 ( immer 16px )

Hamburg -n1

Hamburg -n2

Hamburg -resp-1
responsiv: min font-size-1 – max font-size-3

Hamburg -resp-2
responsiv: min font-size-2 – max font-size-4

Hamburg -resp-3
responsiv: min font-size-3 – max font-size-6

Hamburg -resp-4
responsiv: min font-size-3 – max font-size-8

Hamburg -resp-5
responsiv: min font-size-5 – max font-size-6

Hamburg -resp-6
responsiv: min font-size-5 – max font-size-8

HINWEIS: Margin-Werte aller Headline-Elemente können an den Variablen --h1-marigin bis --h6-margin global angepasst werden.

Utility-Klassen
  • font-weight-200, -300, -400, -600 und -700
    • Schriftschnitt ändern
<p class="font-size-8"></p>

<p class="font-size-7"></p>

<p class="font-size-6"></p>

<p class="font-size-5"></p>

<p class="font-size-4"></p>

<p class="font-size-3"></p>

<p class="font-size-2"></p>

<p class="font-size-1"></p>

<p class="font-size-n1"></p>

<p class="font-size-n2"></p>

<p class="font-size-resp-1"></p>

<p class="font-size-resp-2"></p>

<p class="font-size-resp-3"></p>

<p class="font-size-resp-4"></p>

<p class="font-size-resp-5"></p>

<p class="font-size-resp-6"></p>

<p class="font-weight-200"></p>

<p class="font-weight-300"></p>

<p class="font-weight-400"></p>

<p class="font-weight-600"></p>

<p class="font-weight-700"></p>

Überschriften

Ham­burg H1

Ham­burg H2

Ham­burg H3

Ham­burg H4

Ham­burg H5

Ham­burg H6

<h1 class="h1"></h1> <h2 class="h2"></h2>

<h3 class="h3"></h3>

<h4 class="h4"></h4>

<h5 class="h5"></h5>

<h6 class="h6"></h6>

Schriftarten

Universelle Fonts der Website

Schrift muss nach dem Download selbst eingebunden werden. Dafür ist die fonts.css vorgesehen. Es sind Voreinstellungen für zwei verschiedene fonts vorzufinden. Für mehr fonts können diese Einstellungen in der variables.css und der basic.css erweitert werden.

Text-Stile

Ein konsistentes Typografie-System sorgt für klare Strukturen und optimale Lesbarkeit. Diese Bibliothek bietet vordefinierte Klassen für Schriftgrößen, Gewichte und Abstände, die über CSS-Variablen zentral gesteuert werden. So lassen sich Textelemente mühelos an das jeweilige Layout anpassen.

Block
  • text
    • Hiermit wird Text formatiert. Wird direkt in das entsprechende Element eingetragen.
    • An folgenden Variablen kann die Formatierung angepasst werden:
      • --text-max-width
      • --text-line-height
      • --text-letter-spacing
      • --text-margin-bottom
      • --text-hyphenate-limit-chars
      • --font-size-basic — Achtung: GLOBAL! Diese Variable bezieht sich auf die Ausgangs font-size und beeinflusst alle Schriftgrößen auf der gesamten Seite. Soll die Schriftgröße selektiv angepasst werden, verwende die Klassen für die Schriftgrößen.
Elemente
  • text__initial-letter
    • Letter mit der Klasse werden zur Initialie. Wird direkt in das entsprechende Element eingetragen.
    • Bei Änderungen am Zeilenabstand muss ggf. das margin-left an der Variable --initial-letter-margin-left und/oder --inital-letter-line-height angepasst werden. Bei Änderungen der Schriftart muss evtl. mehr (im Regelsatz .text__initial-letter in components.css) angepasst werden.
      • --initial-letter-margin-left
      • --inital-letter-line-height
Modifier
  • text--column-count
    • Text wird mehrspaltig (responsiv). Wird direkt in das entsprechende Element eingetragen.
    • An folgenden Variablen einstellbar:
      • --column-count
      • --column-gap
      • --column-width
      • --column-count-max-width
      • --column-rule
  • text--einzug
    • Erzeugt einen Einzug der ersten Zeile.
      • --einzug
  • text--line-height-change
    • Zweiter Zeilenabstand.
      • --text-line-height-change
  • text--width-change
    • Eine zweite Text-Breite.
      • --text-max-width-change
  • text--smallcaps
    • Alles in Kapitälchen.
  • text--uppercase
    • Alles in Majuskeln.
  • text-decoration-none
    • Entfernt Text-Dekoration.

Utility-Klassen

Zeilenabstände
  • line-height (0 bis 2)
    • Klassen zur Steuerung der line-height in 0.1er-Schritten.
    • Werte:
      • line-height-0 = 0
      • line-height-01 bis 09 = 0.1 bis 0.9
      • line-height-1 = 1
      • line-height-11 bis 19 = 1.1 bis 1.9
      • line-height-2 = 2
Textausrichtung
  • text-align
    • Steuert die horizontale Ausrichtung des Textes.
    • Klassen:
      • text-align-left / -center / -right
      • Responsive Suffixe: -sm, -md, -lg, -xl, -xxl
Umbruchverhalten
  • Word-Wrap & White-Space
    • Beeinflusst, wie Text bei Platzmangel umgebrochen wird.
    • Klassen:
      • wrap (Erzwingt Umbruch: word-break: break-all)
      • no-wrap-whitespace (Verhindert Umbruch: white-space: nowrap)
Beispiele

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ipsa voluptatem incidunt, eaque itaque ipsam quisquam. Sit itaque unde dolores? Provident consequatur eveniet, nostrum illum unde explicabo repellat quas sed! italic Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore eos unde harum et strong, asperiores tempore ea quis eius excepturi explicabo corporis, pariatur laudantium rerum quidem magnam quisquam voluptates sed itaque repellat underline. Odio veniam laborum illo dolorum impedit illum id culpa enim unde quidem atque, inventore praesentium architecto doloremque maiores sequi provident corrupti! Repellendus obcaecati necessitatibus porro dolor eos fugit rerum aut.

text--column-count

Text__initial-letter sit amet, consectetur adipisicing elit. Obcaecati, ratione aliquid quae dolores natus sit debitis accusamus nulla itaque fugit quia labore odit corrupti voluptatibus distinctio fuga tenetur blanditiis illo ut vero eos? Minus perferendis eligendi accusantium debitis, reiciendis, nemo eos dicta aspernatur officia reprehenderit necessitatibus earum eveniet quis cum incidunt adipisci quo inventore assumenda voluptates commodi voluptate, officiis porro sit? At, ut. Eveniet quam omnis unde amet ad, sed adipisci incidunt beatae voluptatum nisi dicta! Mollitia quae reiciendis asperiores est quia officiis numquam modi odio amet eius, aliquam, maiores deserunt adipisci minima repellat atque tempora dolorem sapiente?
Expedita distinctio ex iusto dignissimos dicta molestiae suscipit reprehenderit, libero nam, eum amet sit commodi assumenda totam quaerat ut sed vitae! Totam esse at harum, facere, quibusdam excepturi dolorum incidunt perspiciatis beatae labore quam ipsa temporibus numquam ipsam debitis in velit similique doloribus aliquid doloremque. At, placeat soluta dolorum dicta vero voluptatibus voluptate quia porro nulla nihil expedita, totam, reiciendis aspernatur animi nostrum minus cupiditate voluptas asperiores culpa. Accusantium, eveniet itaque suscipit blanditiis cum ab in voluptatem obcaecati similique nesciunt debitis omnis odit inventore quae quis architecto libero sapiente odio non explicabo, aliquid at, corrupti temporibus! Sapiente beatae impedit excepturi atque nisi totam numquam neque doloremque! Temporibus corrupti eum sint, dolor quo obcaecati quae ex magni porro laudantium, blanditiis veniam excepturi aut minima sed quibusdam alias recusandae impedit vero ipsa nam doloribus laboriosam optio adipisci? Illum quam maxime cumque assumenda, nobis atque dicta odio adipisci labore tempora eligendi fugiat aspernatur. Sequi nisi eum totam, rem voluptatum quidem maiores cupiditate, magni esse rerum unde similique sint necessitatibus nostrum quaerat doloremque non sunt. Mollitia officiis voluptates quibusdam ratione, in aut, repudiandae eaque, odio voluptas dolore fugit qui necessitatibus. Illum, fugit cum reiciendis velit nesciunt maxime modi neque sint assumenda ratione enim nobis, totam voluptates.

text--width-change / text--line-height-change

text--einzug dolor sit amet consectetur, adipisicing elit. Ab nemo odit corrupti repudiandae nulla est tenetur voluptate repellat temporibus. Ut nesciunt dignissimos ipsa illo expedita, iste et tempora itaque deleniti tempore ratione iure. Fuga omnis praesentium minima cum odio facilis, tempore perspiciatis, autem illum voluptas facere repellendus quis obcaecati quasi, maxime illo ipsum. Veniam, dolor dolores? Nulla explicabo tempora blanditiis iusto animi rerum eveniet, cum officia pariatur at sint maxime dolores provident incidunt fugiat, consequatur obcaecati iure mollitia quae sunt asperiores esse quos. Ea, provident doloremque dolorem odio laudantium beatae eaque quam aspernatur reprehenderit quibusdam ipsum deleniti, sit perferendis placeat?Lorem ipsum dolor sit amet consectetur adipisicing elit.

text--smallcaps / text--uppercase

Veniam, nemo ducimus. Doloribus ipsa ut deleniti modi ducimus et adipisci nam inventore cum quaerat beatae enim eligendi rem fugit harum ad aliquid nisi dolore porro itaque, ullam labore! Non, facere. Fugit necessitatibus libero quis ipsa voluptatum dignissimos possimus nesciunt vero reprehenderit.

blockquote-tag

"You can cut all the flowers, but you cannot stop the spring from coming."

probably -- Ernesto Che Guevara --

<p class="text text--column-count"><span class="text__initial-letter">L</span>Lorem ipsum</p>

<p class="text text--width-change text--einzug text--line-height-change">Lorem ipsum <span class="text--uppercase">lorem</span><span class="text--smallcaps">lorem</span></p>

Listen-Stile

Listen sind essenziell für die Strukturierung von Inhalten. Diese Bibliothek bietet ein flexibles System für ungeordnete und geordnete Listen, das von einfachen Textaufzählungen bis hin zu komplexen Navigationen mit Icons oder Bildern reicht. Über Modifier lassen sich Abstände, Breiten und die Art der Listenzeichen präzise steuern.

Block
  • list
    • Voreingestellte Liste. Wird in das Elternelement eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --list-max-width
      • --list-line-height
      • --list-hyphenate-limit-chars
Elemente
  • list__link
    • Für Links in Listen ohne Decoration. Wird direkt in das entsprechende Element eingetragen.
  • list__link--u
    • Für Links in Listen mit Decoration und vererbter Farbe. Wird direkt in das entsprechende Element eingetragen.
  • list__link--active
    • Für Links in Listen mit Decoration. Wird direkt in das entsprechende Element eingetragen.
Modifier
  • list--stil-2
    • Ändert maximale Breite, Zeilenhöhe und setzt margin-top und bottom auf 0. Wird in das Elternelement eingetragen.
      • --list-max-width-2
      • --list-line-height-2
  • list--marker-color, list--marker-color-2
    • Hiermit erhält man farbige Listenzeichen. Wird in das Elternelement eingetragen.
      • --list-style-type-marker
      • --list-style-type-marker-2
  • list--style-type-none
    • Entfernt Listenzeichen. Wird in das Elternelement eingetragen.
  • list--style-type-content, list--style-type-content-2
    • Ersetzt die Listenzeichen durch eigene Zeichen. Wird in das Elternelement eingetragen.
      • --list-style-type-content
      • --list-style-type-content-2
  • list--style-type-img
    • Hiermit können Bilder vor die Listeneinträge eingefügt werden. Wird in das Elternelement eingetragen.
      • --list-img-width
  • list--with-icons
    • Hiermit können Icons vor die Listeneinträge eingefügt werden. Wird in das Elternelement eingetragen.
      • --list-icon-size
      • --list-icon-fill
Beispiele
  • list list-stil-2
    • Listen-Eintrag
      1. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus reprehenderit blanditiis qui odit voluptatum doloremque tenetur cumque omnis dolorem quis.
      2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis cum praesentium adipisci autem sequi nesciunt.
      3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit! Esse cum error, quibusdam officiis a doloribus commodi labore consequuntur, necessitatibus aliquid modi culpa provident vel vero suscipit illum natus illo sapiente delectus eaque repellat.
  • list--marker-color-2
    1. list--marker-color
      • list--style-type-content
    2. list--marker-color
  • list--marker-color
    • list--marker-color
      • list--style-type-content-2
    • list--marker-color
  • list--with-icons
    • ✓Font-Icon als Listenzeichen
    • ⚠Font-Icon als Listenzeichen
    • IMG als Listenzeichen
    • SVG als Listenzeichen
  • list--style-type-img / Anpassungs-Beispiel
  • list--style-type-img, sit amet consectetur adipisicing elit. Doloribus reprehenderit blanditiis qui odit voluptatum doloremque tenetur cumque omnis dolorem quis.
  • list--style-type-img, consectetur adipisicing elit. Veritatis cum praesentium adipisci autem sequi nesciunt.
  • list--style-type-img dolor sit amet consectetur adipisicing elit. Fugiat, sit! Esse cum error, quibusdam officiis a doloribus commodi labore consequuntur, necessitatibus aliquid modi culpa provident vel vero suscipit illum natus illo sapiente delectus eaque repellat.
<ul class="list">
  <li><strong">list</strong>
    <ul class="list--style-type-none">
      <li>list--style-type-none
        <ul>
          <li><a class="list__link--active" href="">list__link--active</a></li>
          <li><a class="list__link--u" href="">list__link--u</a></li>
          <li><a href="">Lorem ipsum <span class="list__link--active">list__link--active</span> dolor sit amet.</a></li>
      </ul>
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis cum praesentium adipisci autem sequi nesciunt.</li>
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id sit repudiandae magnam eveniet numquam est.</li>
  </ul>
</ul>

Tabellen

Die Table-Komponente stellt strukturierte Datentabellen mit konsistentem Styling bereit. Der Wrapper übernimmt horizontales Scrollen auf kleinen Viewports, während Kopf-, Daten- und Fußbereich über eigene BEM-Elemente gesteuert werden. Zeilen und Zellen lassen sich mit Status-Modifiern, Ausrichtungsklassen und Badges flexibel kennzeichnen. Eine eingebaute JavaScript-Sortierfunktion ermöglicht clientseitiges Sortieren nach String-, Zahlen- und Datumswerten ohne externe Abhängigkeiten.

Block
  • table
    • Wrapper-Container für die Tabelle. Ermöglicht horizontales Scrollen auf kleinen Viewports. Wird um das <table>-Element gelegt.
    • Konfigurierbar über folgende Variablen:
      • --table-bg
      • --table-min-width
Elemente
  • table__element
    • Das eigentliche <table>-Element. Setzt Basisstile wie Schriftart, Farbe und border-collapse. Wird auf das <table>-Tag angewendet.
  • table__caption
    • Beschriftung oberhalb der Tabelle. Stellt einen Titel oder Kontext für den Tabelleninhalt bereit. Wird auf das <caption>-Tag angewendet.
  • table__head
    • Kopfbereich der Tabelle mit abgesetztem Hintergrund. Wird auf das <thead>-Tag angewendet.
  • table__body
    • Datenbereich der Tabelle. Enthält die Zeilen-Striping- und Hover-Logik. Wird auf das <tbody>-Tag angewendet.
  • table__foot
    • Fußbereich der Tabelle, z. B. für Summenzeilen. Wird auf das <tfoot>-Tag angewendet.
  • table__row
    • Eine Tabellenzeile mit unterem Trennstrich. Wird auf das <tr>-Tag angewendet.
  • table__head-cell
    • Kopfzelle mit Großbuchstaben, erhöhtem Letter-Spacing und inverser Textfarbe. Wird auf das <th>-Tag angewendet.
  • table__cell
    • Standard-Datenzelle mit definiertem Padding und rechtem Trennstrich. Wird auf das <td>-Tag angewendet.
  • table__badge
    • Kleines Pill-Label für Status- oder Typangaben innerhalb einer Zelle. Wird als <span> innerhalb einer Zelle eingesetzt.
  • table__sort
    • Schaltfläche in einer Kopfzelle zum Sortieren der Spalte. Zeigt per Pfeil-Icon die aktuelle Sortierrichtung an. Wird als <button> innerhalb von table__head-cell eingesetzt. Benötigt das Attribut data-sort mit den Werten string, number oder date.
Modifier – Zeilen
  • table__row--success
    • Hebt eine Zeile mit grüner Hintergrundfarbe hervor. Wird auf table__row angewendet.
  • table__row--warning
    • Hebt eine Zeile mit gelber Hintergrundfarbe hervor. Wird auf table__row angewendet.
  • table__row--danger
    • Hebt eine Zeile mit roter Hintergrundfarbe hervor. Wird auf table__row angewendet.
Modifier – Zellen
  • table__cell--right, table__head-cell--right
    • Richtet den Zelleninhalt rechtsbündig aus.
  • table__cell--center, table__head-cell--center
    • Richtet den Zelleninhalt zentriert aus.
  • table__cell--mono
    • Setzt den Zelleninhalt in Monospace-Schrift, z. B. für Zahlen oder Dateinamen.
  • table__cell--muted, table__head-cell--muted
    • Reduziert die Textfarbe auf einen gedämpften Ton für sekundäre Inhalte.
  • table__cell--accent
    • Hebt den Zelleninhalt mit Akzentfarbe und Fettschrift hervor.
Modifier – Badges
  • table__badge--success
    • Badge in Grün für positive Zustände.
  • table__badge--warning
    • Badge in Gelb für Warnzustände.
  • table__badge--danger
    • Badge in Rot für kritische Zustände.
  • table__badge--info
    • Badge in Blau für neutrale oder informative Zustände.
Modifier – Tabelle
  • table--bordered
    • Fügt dem Wrapper-Container einen äußeren Rahmen hinzu. Wird auf table angewendet.
  • table--compact
    • Reduziert das Padding aller Zellen für eine platzsparende Darstellung. Wird auf table angewendet. Konfigurierbar über:
      • --table-padding-compact-v
      • --table-padding-compact-h
  • table--no-stripe
    • Deaktiviert den alternierenden Zeilenhintergrund. Wird auf table angewendet.
  • table--no-hover
    • Deaktiviert den Hover-Effekt auf Zeilen. Wird auf table angewendet.
Sortier-Attribute
  • data-sort-value
    • Optionales Attribut auf table__cell. Überschreibt den Textwert beim Sortieren, z. B. für formatierte Zahlen oder Prozentwerte.
Beispiele
Projektübersicht Q2 2025
Website Relaunch M. Bauer 12.500,00 Aktiv 82 %
Branding 2025 S. Müller 8.000,00 Pause 40 %
App Prototyp T. Koch 21.000,00 Verzug 15 %
SEO-Kampagne L. Vogel 3.200,00 Aktiv 95 %
Social Media R. Engel 5.750,00 Planung 5 %
Gesamt 50.450,00
  <div class="table">
    <table class="table__element">
      <caption class="table__caption">Projektübersicht Q2 2025</caption>
      <thead class="table__head">
        <tr class="table__row">
          <th class="table__head-cell">
            <button class="table__sort" data-sort="string">Projekt</button>
          </th>
          <th class="table__head-cell">
            <button class="table__sort" data-sort="string">Verantwortlich</button>
          </th>
          <th class="table__head-cell table__head-cell--right">
            <button class="table__sort" data-sort="number">Budget (€)</button>
          </th>
          <th class="table__head-cell table__head-cell--center">
            <button class="table__sort" data-sort="string">Status</button>
          </th>
          <th class="table__head-cell table__head-cell--right">
            <button class="table__sort" data-sort="number">Fortschritt</button>
          </th>
        </tr>
      </thead>
      <tbody class="table__body">
        <tr class="table__row">
          <td class="table__cell">Website Relaunch</td>
          <td class="table__cell table__cell--muted">M. Bauer</td>
          <td class="table__cell table__cell--right table__cell--mono">12.500,00</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--success">Aktiv</span>
          </td>
          <td class="table__cell table__cell--right table__cell--accent" data-sort-value="82">82 %</td>
        </tr>
        <tr class="table__row">
          <td class="table__cell">Branding 2025</td>
          <td class="table__cell table__cell--muted">S. Müller</td>
          <td class="table__cell table__cell--right table__cell--mono">8.000,00</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--warning">Pause</span>
          </td>
          <td class="table__cell table__cell--right" data-sort-value="40">40 %</td>
        </tr>
        <tr class="table__row table__row--danger">
          <td class="table__cell">App Prototyp</td>
          <td class="table__cell table__cell--muted">T. Koch</td>
          <td class="table__cell table__cell--right table__cell--mono">21.000,00</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--danger">Verzug</span>
          </td>
          <td class="table__cell table__cell--right" data-sort-value="15">15 %</td>
        </tr>
        <tr class="table__row">
          <td class="table__cell">SEO-Kampagne</td>
          <td class="table__cell table__cell--muted">L. Vogel</td>
          <td class="table__cell table__cell--right table__cell--mono">3.200,00</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--success">Aktiv</span>
          </td>
          <td class="table__cell table__cell--right table__cell--accent" data-sort-value="95">95 %</td>
        </tr>
        <tr class="table__row">
          <td class="table__cell">Social Media</td>
          <td class="table__cell table__cell--muted">R. Engel</td>
          <td class="table__cell table__cell--right table__cell--mono">5.750,00</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--info">Planung</span>
          </td>
          <td class="table__cell table__cell--right" data-sort-value="5">5 %</td>
        </tr>
      </tbody>
      <tfoot class="table__foot">
        <tr class="table__row">
          <td class="table__cell" colspan="2">Gesamt</td>
          <td class="table__cell table__cell--right table__cell--mono table__cell--accent">50.450,00</td>
          <td class="table__cell" colspan="2"></td>
        </tr>
      </tfoot>
    </table>
  </div>
Typ
001 konzept_final.pdf 2,4 MB 12.04.2025 PDF
002 design_v3.fig 18,1 MB 15.04.2025 FIG
003 export_web.zip 4,7 MB 17.04.2025 ZIP
004 praesentation.pptx 9,2 MB 03.04.2025 PPTX
  <div class="table table--compact table--bordered mb-3">
    <table class="table__element">
      <thead class="table__head">
        <tr class="table__row">
          <th class="table__head-cell">
            <button class="table__sort" data-sort="string">ID</button>
          </th>
          <th class="table__head-cell">
            <button class="table__sort" data-sort="string">Datei</button>
          </th>
          <th class="table__head-cell table__head-cell--right">
            <button class="table__sort" data-sort="number">Größe</button>
          </th>
          <th class="table__head-cell table__head-cell--right">
            <button class="table__sort" data-sort="date">Datum</button>
          </th>
          <th class="table__head-cell table__head-cell--center">Typ</th>
        </tr>
      </thead>
      <tbody class="table__body">
        <tr class="table__row">
          <td class="table__cell table__cell--mono table__cell--muted">001</td>
          <td class="table__cell">konzept_final.pdf</td>
          <td class="table__cell table__cell--right table__cell--mono" data-sort-value="2.4">2,4 MB</td>
          <td class="table__cell table__cell--right table__cell--muted">12.04.2025</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--danger">PDF</span>
          </td>
        </tr>
        <tr class="table__row">
          <td class="table__cell table__cell--mono table__cell--muted">002</td>
          <td class="table__cell">design_v3.fig</td>
          <td class="table__cell table__cell--right table__cell--mono" data-sort-value="18.1">18,1 MB</td>
          <td class="table__cell table__cell--right table__cell--muted">15.04.2025</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--warning">FIG</span>
          </td>
        </tr>
        <tr class="table__row">
          <td class="table__cell table__cell--mono table__cell--muted">003</td>
          <td class="table__cell">export_web.zip</td>
          <td class="table__cell table__cell--right table__cell--mono" data-sort-value="4.7">4,7 MB</td>
          <td class="table__cell table__cell--right table__cell--muted">17.04.2025</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--success">ZIP</span>
          </td>
        </tr>
        <tr class="table__row">
          <td class="table__cell table__cell--mono table__cell--muted">004</td>
          <td class="table__cell">praesentation.pptx</td>
          <td class="table__cell table__cell--right table__cell--mono" data-sort-value="9.2">9,2 MB</td>
          <td class="table__cell table__cell--right table__cell--muted">03.04.2025</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--info">PPTX</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
Mitarbeitende
Abteilung Verfügbarkeit
Anna Bergmann Design 01.03.2022 Verfügbar
Jonas Keller Entwicklung 15.07.2021 Teilzeit
Maria Hartmann Marketing 10.11.2023 Verfügbar
Felix Wagner Vertrieb 05.01.2020 Abwesend
  <div class="table table--no-stripe table--no-hover">
    <table class="table__element">
      <caption class="table__caption">Mitarbeitende</caption>
      <thead class="table__head">
        <tr class="table__row">
          <th class="table__head-cell">
            <button class="table__sort" data-sort="string">Name</button>
          </th>
          <th class="table__head-cell">Abteilung</th>
          <th class="table__head-cell table__head-cell--center">
            <button class="table__sort" data-sort="date">Eintrittsdatum</button>
          </th>
          <th class="table__head-cell table__head-cell--center">Verfügbarkeit</th>
        </tr>
      </thead>
      <tbody class="table__body">
        <tr class="table__row table__row--success">
          <td class="table__cell">Anna Bergmann</td>
          <td class="table__cell table__cell--muted">Design</td>
          <td class="table__cell table__cell--center">01.03.2022</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--success">Verfügbar</span>
          </td>
        </tr>
        <tr class="table__row table__row--warning">
          <td class="table__cell">Jonas Keller</td>
          <td class="table__cell table__cell--muted">Entwicklung</td>
          <td class="table__cell table__cell--center">15.07.2021</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--warning">Teilzeit</span>
          </td>
        </tr>
        <tr class="table__row">
          <td class="table__cell">Maria Hartmann</td>
          <td class="table__cell table__cell--muted">Marketing</td>
          <td class="table__cell table__cell--center">10.11.2023</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--success">Verfügbar</span>
          </td>
        </tr>
        <tr class="table__row table__row--danger">
          <td class="table__cell">Felix Wagner</td>
          <td class="table__cell table__cell--muted">Vertrieb</td>
          <td class="table__cell table__cell--center">05.01.2020</td>
          <td class="table__cell table__cell--center">
            <span class="table__badge table__badge--danger">Abwesend</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Layout

Gestaltungsraster, Flexbox und Grid – die Layout-Module stellen alle Bausteine für den strukturellen Aufbau einer Seite bereit. Für das Seitenlayout stehen vorgefertigte Templates sowie ein konfigurierbares Custom-Layout zur Verfügung, jeweils über responsive Suffixe ab definierten Breakpoints aktivierbar. Flexbox- und Grid-Klassen decken den Großteil struktureller Anforderungen direkt im Markup ab, ohne eigene CSS-Regeln schreiben zu müssen.

Gestaltungsraster

Es stehen vier vorgefertigte Layout-Templates zur Auswahl. Diese können verwendet werden wenn der body aus folgenden Elementen besteht und direkte Kinder dessen sind: header, nav, main, aside (nur einmal), footer.

Neben den voreingestellten Layouts kann auch ein Custom-Layout verwednet werden. Dieses ist in der variables.css an den --layout-custom... Variablen konfigurierbar – unset schließt Container im body für das Layout aus.

Spalten-Breiten und -Höhen sind an den Variablen --layout-column-width und --layout-row-heigth einstellbar.

HINWEIS: Sticky Container brauchen u.U. einen Workaround um sticky zu bleiben. Es kann helfen dem Container 0.1 viewHeight zu geben – nutze die Klasse vh-1 oder vh-100 mit dem selben Suffix wie das Template – ZB vh-1-lg.

Block
  • layout
    • Zu verwendender Block-Name für die Layout-Templates.
Elemente
  • layout--theatre-suffix
    • An folgenden Variablen Konfiguriebar:
      • --layout-column-width
      • --layout-row-heigth
      • --layout-gap
  • layout--brick-suffix
      • --layout-column-width
      • --layout-row-heigth
      • --layout-gap
  • layout--shelve-suffix
      • --layout-column-width
      • --layout-row-heigth
      • --layout-gap
  • layout--spin-suffix
      • --layout-column-width
      • --layout-row-heigth
      • --layout-gap
  • layout--custom-suffix
      • --layout-item-1-column (1-10)
      • --layout-item-1-row (1-10)
      • --layout-column-width
      • --layout-row-heigth
      • --layout-gap
Suffix – Viewports
  • -sm
    • schaltet das Layout ab 480px frei
  • -md
    • schaltet das Layout ab 768px frei
  • -lg
    • schaltet das Layout ab 1024px frei
  • -xl
    • schaltet das Layout ab 1280px frei
  • -xxl
    • schaltet das Layout ab 1440px frei

Die Layout-Klassen sind an die frayme-Viewports geknüpft. Mit folgenden Suffix's werden die Klassen verwendet:

Es existieren keine Klassen die über alle Viewports hinweg greifen – erst ab einer Breite von 480px können die Layouts verwendet werden. Also beispielsweise mit der Klasse layout--brick-sm wird das layout nach oben hin für alle Breiten aktiviert.

Beispiele

layout--theatre

header

nav

main

aside

footer

layout--brick

header

nav

main

aside

footer

layout--shelve

header

nav

main

aside

footer

layout--spin

header

nav

main

aside

footer

<div class="main-wrapper-center layout layout--shelve-sm layout--theatre-xl">
  <header></header>
  <nav></nav>
  <main></main>
  <aside></aside>
  <footer></footer>
</div>
<div class="main-wrapper-center-mw layout layout--custom-md">
  <div></div>
  <section></section>
  <section></section>
  <div></div>
  <div></div>
  <section></section>
  <section></section>
  <section></section>
</div>

Flexbox

Die Flexbox-Utility-Klassen ermöglichen eine schnelle, deklarative Steuerung von Layouts direkt im Markup – ohne eigene CSS-Regeln schreiben zu müssen. Alle Klassen basieren auf den gängigen Flexbox-Eigenschaften und lassen sich durch responsive Suffixe gezielt für bestimmte Viewport-Breiten aktivieren. Sie eignen sich besonders für strukturelle Anpassungen in Kombination mit bestehenden Block-Komponenten.

Klassen
  • Display & Direction
    • Setzt display: flex sowie die Ausrichtung der Hauptachse.
      • .flex
      • .flex-row
      • .flex-column
      • .flex-1 – flex: 1
      • .flex-wrap
  • justify-content
    • Steuert die Verteilung der Elemente entlang der Hauptachse.
      • .jc-start
      • .jc-end
      • .jc-center
      • .jc-between
      • .jc-around
      • .jc-evenly
  • align-items
    • Steuert die Ausrichtung der Elemente entlang der Querachse.
      • .ai-start
      • .ai-end
      • .ai-center
      • .ai-stretch
      • .ai-baseline
  • align-self
    • Überschreibt align-items für ein einzelnes Kind-Element.
      • .as-start
      • .as-end
      • .as-center
      • .as-stretch
      • .as-baseline
  • align-content
    • Steuert mehrzeilige Flex-Container entlang der Querachse (wirkt nur bei flex-wrap).
      • .ac-start
      • .ac-end
      • .ac-center
      • .ac-stretch
      • .ac-baseline
  • flex-row + justify-content (kombiniert)
    • Kurzklassen für die häufig verwendete Kombination aus flex-direction: row und justify-content.
      • .flex-row-start
      • .flex-row-end
      • .flex-row-center
      • .flex-row-between
      • .flex-row-around
      • .flex-row-evenly
  • flex-row-reverse + justify-content (kombiniert)
    • Wie oben, jedoch mit umgekehrter Zeilenrichtung (row-reverse).
      • .flex-row-reverse-start
      • .flex-row-reverse-end
      • .flex-row-reverse-center
      • .flex-row-reverse-between
      • .flex-row-reverse-around
      • .flex-row-reverse-evenly
  • flex-column + justify-content (kombiniert)
    • Kurzklassen für flex-direction: column kombiniert mit justify-content.
      • .flex-column-start
      • .flex-column-end
      • .flex-column-center
      • .flex-column-between
      • .flex-column-around
      • .flex-column-evenly
  • flex-column-reverse + justify-content (kombiniert)
    • Wie oben, jedoch mit umgekehrter Spaltenrichtung (column-reverse).
      • .flex-column-reverse-start
      • .flex-column-reverse-end
      • .flex-column-reverse-center
      • .flex-column-reverse-between
      • .flex-column-reverse-around
      • .flex-column-reverse-evenly
Suffix – Viewports
  • Alle Klassen sind mit einem responsiven Suffix kombinierbar, z. B. .flex-row-center-md. Die Klasse greift dann ausschließlich ab dem angegebenen Breakpoint.
  • -sm
    • aktiviert die Klasse ab 480px
  • -md
    • aktiviert die Klasse ab 768px
  • -lg
    • aktiviert die Klasse ab 1024px
  • -xl
    • aktiviert die Klasse ab 1280px
  • -xxl
    • aktiviert die Klasse ab 1440px

Grid

Das Grid-System basiert auf CSS Grid und bietet zwei grundlegende Ansätze: .grid-resp für ein automatisch responsives Raster, dessen Spaltenbreiten über die CSS-Variablen --min-col-width und --max-col-width in der variables.css gesteuert werden, sowie feste Spaltenklassen von .grid--1 bis .grid--20 für explizite Spaltendefinitionen. Ergänzend ermöglichen die Subgrid-Klassen gleichmäßige Zeilenhöhen über mehrere Kind-Elemente hinweg. Alle festen Spaltenklassen sind über responsive Suffixe ab definierten Breakpoints aktivierbar.

Klassen
  • grid-resp
    • Automatisch responsives Raster ohne Breakpoints.
      • --min-col-width – Mindestspaltenbreite (anpassbar in variables.css)
      • --max-col-width – Maximale Spaltenbreite (anpassbar in variables.css)
  • grid
    • Setzt display: grid und height: 100% auf das Element.
  • grid__item--nostretch
    • Verhindert das Strecken eines Grid-Kindes – setzt justify-self: start und align-self: start.
  • grid--row-subgrid-1 – grid--row-subgrid-5
    • Erzeugt gleichmäßige Zeilenhöhen über Kind-Elemente hinweg mittels subgrid.
      • grid--row-subgrid-1 = span 1
      • grid--row-subgrid-2 = span 2
      • grid--row-subgrid-3 = span 3
      • grid--row-subgrid-4 = span 4
      • grid--row-subgrid-5 = span 5
  • grid--column-subgrid-1 – grid--column-subgrid-5
    • Erzeugt gleichmäßige Spaltenbreiten über Kind-Elemente hinweg mittels subgrid.
      • grid--column-subgrid-1 = span 1
      • grid--column-subgrid-2 = span 2
      • grid--column-subgrid-3 = span 3
      • grid--column-subgrid-4 = span 4
      • grid--column-subgrid-5 = span 5
  • grid--1 – grid--20
    • Definiert ein festes Spaltenlayout mit gleich breiten Spalten (1fr).
      • grid--1 = 1 Spalter
      • grid--6 = 6 Spalter
      • …
      • grid--12 = 12 Spalter
  • col--1 – col--20
    • Legt falls gewünscht die breite eines Grid-Items fest (1fr).
      • col--2 = Item spannt über 2 spalten
      • col--3 = Item spannt über 3 spalten
Suffix – Viewports
  • Alle Spaltenklassen (grid--1 bis grid--20) und (col--1 bis col--20) sind mit einem responsiven Suffix kombinierbar, z. B. .grid--3-md. Die Klasse greift dann ausschließlich ab dem angegebenen Breakpoint.
  • -sm
    • aktiviert die Klasse ab 480px
  • -md
    • aktiviert die Klasse ab 768px
  • -lg
    • aktiviert die Klasse ab 1024px
  • -xl
    • aktiviert die Klasse ab 1280px
  • -xxl
    • aktiviert die Klasse ab 1440px
Grid – responsiv
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen

4:5 cover

zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen

1:1 cover

zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen

16:9 contain

zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
zufällige Grafik zur veranschaulichung der Grid- und Aspect-Funktionen
<div class="grid grid--1 grid--2-sm grid--3-md grid--3-lg grid--4-xxl gap-1">
  <div class="b-full-1 br-full aspect-1-1 bg-neutral-300 alpha-30 col--2-xxl">
    <img src="" alt="" class="img--cover-center">
  </div>
  <div class="b-full-1 br-full aspect-1-1 bg-neutral-300 alpha-30">
    <img src="" alt="" class="img--cover-center">
  </div>
  <div class="b-full-1 br-full aspect-1-1 bg-neutral-300 alpha-30">
    <img src="" alt="" class="img--cover-center">
  </div>
  <div class="b-full-1 br-full aspect-1-1 bg-neutral-300 alpha-30">
    <img src="" alt="" class="img--cover-center">
  </div>
  <div class="b-full-1 br-full aspect-1-1 bg-neutral-300 alpha-30">
    <p class="text m-none alpha-100">16:9 contain</p>
    <img src="" alt="" class="img--contain-center">
  </div>
  <div class="b-full-1 br-full aspect-4-5 bg-neutral-300 alpha-30">
    <p class="text m-none alpha-100">4:5 cover</p>
    <img src="" alt="" class="img--cover-center">
  </div>
</div>

Subgrid

Mit CSS Subgrid lassen sich Kindelemente direkt in das Raster des Elterncontainers einbinden – ohne eigene Grid-Definitionen. Verschachtelte Elemente erben die Track-Größen des übergeordneten Grids, was präzise, konsistente Ausrichtung über Komponentengrenzen hinweg ermöglicht. Besonders nützlich für Formulare, Karten-Layouts und komplexe UI-Strukturen.

Beispiel

Überschrift

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae non deleniti aut magnam architecto quasi debitis voluptates dignissimos minus quos.

Überschrift
Subtitel

Lorem, ipsum dolor.
<div class="grid grid--2 gap-1 mb-3">
  <div class="grid--row-subgrid-3">
    <div><h4>Überschrift</h4></div>
    <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
    <div><img class="aspect-1-1 img--cover-center" src="" alt=""></div>
  </div>
  <div class="grid--row-subgrid-3">
    <div><h4>Überschrift<br>Subtitel</h4></div>
    <div>Lorem, ipsum dolor.</div>
    <div><img class="aspect-1-1 img--cover-center" src="" alt=""></div>
  </div>
</div>

Container

Wrapper

Der .main-wrapper dient als zentrales Layout-Element und begrenzt die maximale Breite des Hauptinhalts über die CSS-Variable --side-max-width, die in der variables.css individuell angepasst werden kann. Durch margin: auto wird der Wrapper automatisch horizontal zentriert und bleibt so stets in der Mitte der Seite – unabhängig von der Bildschirmbreite. Das padding: 0 stellt sicher, dass kein ungewollter Innenabstand entsteht, der das Layout beeinflussen könnte. Damit eignet sich .main-wrapper ideal als äußerer Container für den gesamten Seiteninhalt.

  • .main-wrapper
    • max-width: var(--side-max-width) – begrenzt die Breite auf den Wert der CSS-Variable --side-max-width, welche in der variables.css angepasst werden kann
    • margin: auto – zentriert den Block horizontal
    • padding: 0 – entfernt den Standard-Innenabstand

Abstände

Padding, Margin, Scroll-Margin und Gap – alle Abstände basieren auf einem gemeinsamen Ausgangswert von 16px und skalieren nach dem Goldenen Schnitt. Jede Klasse ist in statischer und fluider Variante verfügbar und lässt sich über responsive Suffixe auf bestimmte Breakpoints beschränken.

Der Multiplikator kann an der Variable --multiplikator-distance verändert werden

Die Grundlage der responsiven Abstände wurden nach Augenmaß erstellt. Sie wird duch die Variable --space-1-resp representiert und kann an dieser verändert werden. Alle weiteren responsieven Abstände folgen standardmäßig dem Golden Schnitt.

Abestände nur in bestimmten Viewports

Nutze die folgenden Klassen mit dem jeweiligen Suffix für den jeweiligen Viewport.

  • -sm = min-width: 480px
  • -md = min-width: 768px
  • -lg = min-width: 1024px
  • -xl = min-width: 1280px
  • -xxl = min-width: 1440px

Beispiel: mt-3-lg

padding

Diese Utility-Klassen ermöglichen eine schnelle und konsistente Steuerung von Innenabständen. Sie basieren auf einem logischen Stufensystem, das entweder statische Werte (rem) oder fluide, responsive Werte verwendet. Die Berechnung erfolgt über einen zentralen Multiplikator, um harmonische Abstände im gesamten Layout zu garantieren.

Statische Abstände
  • p, pt, pe, pb, ps (1-9)
    • Klassen für alle Seiten (p), Top (pt), Right (pe), Bottom (pb) und Left (ps).
    • Werte:
      • [prefix]-1 = 1rem (--space-1)
      • [prefix]-2 = p-1 * --multiplikator-distance
      • ... bis [prefix]-9
  • p, pt, pe, pb, ps (n1-n5)
    • Negative/Verkleinerte Abstufungen unterhalb des Ausgangswerts.
    • Werte:
      • [prefix]-n1 = p-1 / --multiplikator-distance
      • [prefix]-n2 = p-n1 / --multiplikator-distance
Responsiv
  • p-resp bis ps-resp (1-9)
    • Fluide Abstände, die sich der Viewport-Breite anpassen.
    • Beispiel-Berechnung:
      • [prefix]-1-resp = 0.3rem, 1.39vw + 0.21px, 1.1rem (--space-1-resp)
      • [prefix]-2-resp = p-1-resp * --multiplikator-distance
Spezialwerte & Reset
  • p-none, pt-none, pe-none, pb-none, ps-none
    • Setzt den jeweiligen Innenabstand auf 0 !important.
  • padding-x-ignore, padding-y-ignore
    • Ignoriert das Padding auf der X- oder Y-Achse des Elterncontaiers.

margin

Die Margin-Klassen dienen der Steuerung von Außenabständen zwischen Elementen. Sie folgen derselben Logik wie die Padding-Utilities und bieten zusätzlich die Option für automatische Abstände (auto), um Elemente innerhalb von Containern flexibel zu positionieren.

Statische Abstände
  • m, mt, me, mb, ms (1-9)
    • Klassen für alle Seiten (m), Top (mt), Right (me), Bottom (mb) und Left (ms).
    • Werte:
      • [prefix]-1 = 1rem (--space-1)
      • [prefix]-2 = m-1 * --multiplikator-distance
      • ... bis [prefix]-9
  • m, mt, me, mb, ms (n1-n5)
    • Verkleinerte Abstufungen unterhalb des Basiswerts.
    • Werte:
      • [prefix]-n1 = m-1 / --multiplikator-distance
      • [prefix]-n2 = m-n1 / --multiplikator-distance
Responsiv
  • m-resp bis ms-resp (1-9)
    • Fluide Außenabstände basierend auf Viewport-Variablen.
    • Beispiel-Berechnung:
      • [prefix]-1-resp = 0.3rem, 1.39vw + 0.21px, 1.1rem (--space-1-resp)
      • [prefix]-2-resp = m-1-resp * --multiplikator-distance
Spezialwerte & Reset
  • m-auto bis ms-auto
    • Setzt den Außenabstand auf auto !important (zentrieren/schieben).
  • m-none bis ms-none
    • Setzt den Außenabstand auf 0 !important.

scroll-margin

Diese Utilities steuern den scroll-margin, um sicherzustellen, dass Elemente (z. B. Anker-Ziele) beim Ansteuern nicht direkt am Rand des Viewports oder unter fixierten Headern kleben. Sie nutzen dasselbe skalierbare System wie die Padding- und Margin-Klassen.

Statische Scroll-Abstände
  • scroll-m (1-9)
    • Klassen für den Scroll-Margin aller Seiten.
    • Werte:
      • scroll-m-1 = 1rem (--space-1)
      • scroll-m-2 = scroll-m-1 * --multiplikator-distance
      • ... bis scroll-m-9
  • scroll-m (n1-n5)
    • Verkleinerte Scroll-Abstände unterhalb des Basiswerts.
    • Werte:
      • scroll-m-n1 = scroll-m-1 / --multiplikator-distance
      • scroll-m-n2 = scroll-m-n1 / --multiplikator-distance
Suffix – Viewports
  • -sm
    • schaltet die Klasse ab 480px frei
  • -md
    • schaltet die Klasse ab 768px frei
  • -lg
    • schaltet die Klasse ab 1024px frei
  • -xl
    • schaltet die Klasse ab 1280px frei
  • -xxl
    • schaltet die Klasse ab 1440px frei

gap

Diese Utilities definieren die Abstände zwischen Elementen in Flexbox- und Grid-Layouts. Während gap beide Achsen gleichzeitig bedient, erlauben row-gap und column-gap eine präzise Steuerung der vertikalen bzw. horizontalen Zwischenräume.

Statische Abstände
  • gap, row-gap, column-gap (1-9)
    • Klassen für beide Achsen (gap), Zeilen (row-gap) oder Spalten (column-gap).
    • Werte:
      • [prefix]-1 = 1rem (--space-1)
      • [prefix]-2 = [prefix]-1 * --multiplikator-distance
      • ... bis [prefix]-9
  • gap, row-gap, column-gap (n1-n5)
    • Kompaktere Abstände unterhalb des Basiswerts.
    • Werte:
      • [prefix]-n1 = [prefix]-1 / --multiplikator-distance
      • [prefix]-n2 = [prefix]-n1 / --multiplikator-distance
Responsiv
  • gap-resp, row-gap-resp, column-gap-resp (1-9)
    • Fluide Abstände, die sich automatisch der Bildschirmgröße anpassen.
    • Werte:
      • [prefix]-1-resp = 0.3rem, 1.39vw + 0.21px, 1.1rem (--space-1-resp)
      • [prefix]-2-resp = [prefix]-1-resp * --multiplikator-distance
Ohne Gap – Reset
  • gap-none, row-gap-none, column-gap-none
    • Setzt den jeweiligen Abstand auf 0 !important.

Module

Buttons, Cards, Navigation, Search, Accordions und mehr – das Modul-System folgt durchgehend der BEM-Methodik und hält Struktur und Design konsequent getrennt. Jede Komponente ist über CSS-Variablen anpassbar und lässt sich per Modifier in Varianten und Zuständen steuern.

Buttons

Einfacher Button

Der Block btn stellt eine vielseitig anpassbare Schaltfläche bereit. Icons lassen sich einfach per Element-Klasse integrieren, während Modifier verschiedene Design-Varianten und Größen ermöglichen.

Zusätzliche Anpassungen wie die Pillen-Form oder das Entfernen von Rahmen sind über universelle Klassen möglich. Der Zustand kann über data-state gesteuert werden, wobei der Standard auf active gesetzt ist.

Block
  • btn
    • Hiermit erhält man einen anpassbaren Button.
Elemente
  • btn__icon
    • zum einfügen eines icons via IMG- oder SVG-Tag
Modifier
  • btn--pill
    • für eine Pillen-Form
  • btn--small
    • für eine kleine Schaltfläche
  • btn--large
    • für eine große Schaltfläche
  • btn--uppercase
    • Alle Zeichen werden zu Majuskeln
data-state - Zustände
  • active
    • Buttons mit der Klasse "btn" sind automatisch auf active gesetzt.
  • inactive
    • setzt Buttons mit der Klasse "btn" auf inactive
Hover-Varianten
  • btn--hover-1
Variablen
  • btn ist an folgenden Variablen anpasspar
    • --btn-padidng
    • --btn-bg-color
    • --btn-text-color
    • --hover-text-color
    • --hover-2-color
    • --btn__icon-bg-color
    • --btn__icon-path-fill
Beispiele
<button class="btn"><span>btn</span></button>

<button class="btn inactive"><span>btn inactive</span></button>

<button class="btn btn__icon"><img src="img/icons/wifi.svg"><span>icon</span></button>

Design-Beispiele mit frayme und custom CSS

<button class="btn br-full shadow-1 bg-custom-3 text-outline overflow-hidden">
   <span class="layer-1 text-fff"><strong>Button</strong></span>
   <div class="pixel-container grid grid--20 absolute">
      <div class="pixel aspect-1-1"></div>
      <div class="pixel aspect-1-1"></div>
      [ -"- 78x]
   </div>
</button>
<style>
  #aquaButton .btn::before { content: ""; position: absolute; top: 2px; left: 10px; right: 10px; height: 40%; border-radius: 25px 25px 50% 50%; background: linear-gradient(to bottom, #ffffffbb 0%, #ffffff31 100%); pointer-events: none; z-index: 3; }
  #aquaButton .btn::after { content: ""; position: absolute; bottom: 1px; left: 8px; right: 8px; height: 100%; background: radial-gradient(ellipse at 50% 95%, #bdf2ff8c 10%, #95eaff73 30%, transparent 70%); pointer-events: none; z-index: 1; }
  #aquaButton .btn { box-shadow: inset 0px 2px 6px 4px rgba(var(--fff), var(--alpha, 0.4)), inset 0px 2px 4px 0px #dd26dd2a; background: linear-gradient(180deg, #01316ed8 0%, #0e376dbd 30%, #2a64afb0 60%, #3470c0b0 80%, #3e7ed1b0 100%); z-index: 1; }
  #aquaButton span { position: relative; color: rgba(var(--000), var(--alpha, 0.8)); z-index: 2; text-shadow: 3px 5px 4px rgba(var(--neutral-1500), var(--alpha, 0.46)); font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; }
  #aquaButton { box-shadow: 0px 9px 20px #9fd0f8b4, 0px 15px 15px #2c597088; }
</style>

<div id="aquaButton" class="br-big-full">
   <button class="btn b-none br-big-full overflow-hidden">
      <span class="font-size-3 pt-n2 ps-2 pe-2">aqua</span>
   </button>
</div>
<div id="cDiag" class="ms-auto me-auto b-full-2 br-medium-bottom-left flex-column jc-end bg-neutral-00">
   <style>
      #cDiag { max-width: 450px; height: 200px; }
   </style>
   <div class="flex-row-between b-top-2">
      <button class="btn w-100 b-none bg-warning alpha-50 br-medium-bottom-left">
         <span class="alpha-100">more info</span>
      </button>
      <button class="btn w-100 b-none bg-success">
         <span class="text-fff font-size-2"><strong>allow</strong></span>
      </button>
   </div>
</div>

Top-Link-Button

Die Komponente ermöglicht einen fixierten Button, der Nutzer direkt zum Seitenanfang führt. Das Icon kann auf CSS-Basis oder flexibel via IMG- oder SVG-Tag eingebunden werden.

Über Modifier lässt sich die Form auf rund anpassen oder die Größe reduzieren. Zudem kann der Button mit universellen Schatten-Klassen optisch hervorgehoben werden.

Block
  • top-link
    • Hiermit erhält man einen fixierten Button der zum Beginn der Webseite führt.
Elemente
  • top-link__arrow
    • für Icon auf CSS Basis
Modifier
  • top-link--small
    • für kleinere Schaltfläche
  • top-link--round
    • für eine runde Schaltfläche
  • top-link--icon
    • um nur das Icon via IMG- oder SVG-Tag anzuzeigen
Beispiele
<div data-state="inactive" class="top-link top-link--small top-link--round top-link--icon-only shadow-3">
     <a href="#">
     <!-- <div class="top-link__arrow"></div>
          <div class="top-link__arrow"></div> -->
          <p>top</p>
     <!-- <img src="" alt=""> -->
     <!-- <img src="" alt=""> -->
     </a>
</div>

-- coming soon --

-- coming soon --

Cards

Die Cards-Komponente ist ein vielseitiges Layout-Element zur strukturierten Darstellung von Inhalten wie Texten, Bildern oder Aktionen. Karten gruppieren zusammengehörige Informationen in einem klar abgegrenzten Container und schaffen so visuelle Ordnung. Sie eignen sich besonders für Produkt-, Profil- oder Vorschau-Layouts und lassen sich flexibel kombinieren.

Block
  • card
    • Hiermit wird eine Karte erstellt. Wird direkt in das entsprechende Element eingetragen.
    • An folgenden Variablen kann die Formatierung angepasst werden:
      • --card-text-line-height
      • --card-text-line-height-compact
      • --social-icon-height
      • --sozial-trans
Elemente
  • card__header
    • Kopfbereich der Karte. Enthält in der Regel ein Bild.
  • card__image
    • Bild im Kopfbereich der Karte. Füllt den Bereich vollständig aus (object-fit: cover).
  • card__profil
    • Rundes Profilbild. Wird direkt in das entsprechende Element eingetragen.
  • card__content
    • Inhaltsbereich der Karte. Wächst flexibel und ordnet Inhalte in einer Spalte an.
  • card__title
    • Titel der Karte.
  • card__text
    • Fließtext der Karte.
      • --card-text-line-height
  • card__social
    • Bereich für Social-Icons. Icons reagieren mit einer Rotation auf Hover.
      • --social-icon-height
Modifier
  • card--full
    • Die Karte nimmt die volle Höhe ihres Raster-Nachbarn ein.
  • card--row
    • Karte wird zweispaltig dargestellt (Header und Content nebeneinander).
  • card--dark
    • Dunkle Variante der Karte mit invertierter Farb- und Rahmengebung.
  • card--medium
    • Begrenzt die Kartenbreite auf 350px.
  • card--small
    • Begrenzt die Kartenbreite auf 200px.
  • card__social--trans
    • Verschiebt den Social-Bereich nach oben in den Header hinein.
      • --sozial-trans
  • card__text--compact
    • Reduzierter Zeilenabstand für den Kartentext.
      • --card-text-line-height-compact
Hover-Modifier
  • card--hover-1
    • Hover-Effekt: Karte skaliert leicht (scale(1.05)).
  • card--hover-2
    • Hover-Effekt: Karte skaliert von der Unterkante aus (scale(1.04)).
  • card--hover-3
    • Hover-Effekt: Karte hebt sich nach oben (translateY(-17px)).
Beispiele
bild

card

Standart-Layout der card.

btn
bild

card

Mit card--full nimmt die card die selbe Höhe ein wie Ihre Nachbarn im Raster.

btn
bild

card

Mit card--full nimmt die card die selbe Höhe ein wie Ihre Nachbarn im Raster.

btn
bild

card--dark

Mit card--dark wird eine dunkle Farbvariante sichtbar.

btn
bild

card

Mit card--row wird das Layout gekippt.

btn

card--medium

Mit card--medium wird die card nicht breiter als 350px.

btn

card--small

Mit card--small wird die card nicht breiter als 200px.

btn

card--hover-1

Standart-Layout mit Hover Variante.

card--hover-2

Standart-Layout mit Hover Variante.

card--hover-3

Standart-Layout mit Hover Variante.

<div class="card">
  <div class="card__header">
    <img src="img/Photos/profil.webp" alt="bild" class="card__image">
  </div>
  <div class="card__content p-1">
    <div class="card__social card__social--trans as-end">
      <a href=""><img src="img/Icons/icons8-pinterest-50.png" alt=""></a>
      <a href=""><img src="img/Icons/icons8-stumbleupon-50.png" alt=""></a>
      <a href=""><img src="img/Icons/icons8-favorite-50.png" alt=""></a>
    </div>
    <h2 class="card__title h3 pb-1">card</h2>
    <p class="card__text pb-2">Mit <strong class="text-fcolor-static">card--full</strong> nimmt die card die selbe Höhe ein wie Ihre Nachbarn im Raster.</p>
    <div class="mt-auto">
      <a href="#card-code" class="btn"><span class="text-fcolor-static">btn</span></a>
    </div>
  </div>
</div>

Navigation

Top-Navigation

Die Nav-Komponente bildet die primäre Navigationsstruktur einer Website ab. Sie unterstützt horizontale und vertikale Ausrichtung, ein Hamburger-Menü für mobile Breakpoints sowie verschachtelte Untermenüs. Über responsive Modifier lässt sich die Darstellung gezielt für verschiedene Viewport-Breiten anpassen. Positionen, Farben und Abstände sind vollständig über CSS Custom Properties steuerbar.

Block
  • nav
    • Voreingestellte Navigation. Wird als Wrapper-Element eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --navbar-top-position
      • --navbar-left-position
Elemente
  • nav__bar
    • Leiste mit Hamburger-Button und Logo für mobile Ansichten. Wird in das Elternelement eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --nav-hamburger-bg-color
  • nav__hamburger
    • Klickbares Hamburger-Icon. Wird in nav__bar eingetragen.
  • nav__slice-1, nav__slice-2, nav__slice-3, nav__slice-4
    • Einzelner Strich des Hamburger-Icons. Wird dreifach in nav__hamburger eingetragen.
    • nav__slice-1 bis -4 stehen jeweils für verschiedene Hamburger-Menü-Varianten. Beispiele stehen weiter unten.
    • Konfigurierbar über folgende Variablen:
      • --nav-hamburger-color
      • --slice-1-width bis -4
      • --slice-1-height bis -4
      • --slice-1-margin bis -4
      • --hamburger-width
      • --hamburger-height
      • --hamburger-margin
      • --hamburger-X-position
  • nav__menu
    • Container für die Navigationslinks. Wird in das Elternelement eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --nav-item-bg-color
      • --nav-item-text-color
      • --nav-item-pd
      • --nav-item-pd-hover
      • --nav-item-text-color-hover
      • --nav-item-bg-color-hover
  • nav__nested
    • Container für ein Untermenü. Wird in das jeweilige li eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --nav-nested-item-bg-color
      • --nav-nested-item-text-color
      • --nav-nested-item-pd
      • --nav-nested-item-pd-hover
      • --nav-nested-item-text-color-hover
      • --nav-nested-item-bg-color-hover
      • --nested-transform-origin-out
      • --nested-transform-out
  • nav__nested-open
    • Macht ein Untermenü sichtbar. Wird per JavaScript auf nav__nested gesetzt.
    • Konfigurierbar über folgende Variablen:
      • --nested-top-position
      • --nested-left-position
      • --nested-transform-origin-in
      • --nested-transform-in
  • nav__arrow
    • Ein Pfeil neben dem Dropdown-Eintrag wird hinzugefügt. Die Klasse wird in ein span eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --nav-arrow-size
      • --nav-arrow-color
  • nav__logo
    • Container für das Logo (SVG oder Bild). Wird in nav__bar oder den Desktop-Bereich eingetragen.
    • Konfigurierbar über folgende Variablen:
      • --nav-logo-height
      • --nav-logo-padding
Modifier
  • nav--transform
    • Setzt das Menü in den eingeklappten Zustand. Wird auf nav__menu gesetzt.
    • Konfigurierbar über folgende Variablen:
      • --menu-transform-origin-out
      • --menu-transform-out
  • nav--transform-open
    • Setzt das Menü in den ausgeklappten Zustand. Wird per JavaScript auf nav__menu gesetzt.
    • Konfigurierbar über folgende Variablen:
      • --menu-transform-origin-in
      • --menu-transform-in
  • nav__menu--column, nav__menu--row
    • Steuert die Ausrichtung der Menüpunkte (vertikal oder horizontal). Wird auf nav__menu gesetzt.
  • nav__menu--column-{bp}, nav__menu--row-{bp}
    • Setzt die Ausrichtung ab einem bestimmten Breakpoint (sm, md, lg, xl, xxl). Wird auf nav__menu gesetzt.
  • nav__bar--off-{bp}
    • Blendet die Hamburger-Leiste ab einem Breakpoint aus und entfernt dabei automatisch die Menü-Transform. Wird auf nav__bar gesetzt.
  • nav__menu--h100, nav__menu--h100-{bp}
    • Erweitert das Menü auf volle Viewport-Höhe durch padding-bottom: 100vh. Wird auf nav__menu gesetzt.
  • nav--vertical
    • Setzt das Menü auf vertical.
      • wird zu der "nav" Klasse hinzugefügt.
      • --nav-width-vertical
Beispiele
Top-Navigations-Komponente in der Desktop-Ansicht
Top-Navigation – ohne Suchfeld
<nav class="nav">
  <div class="nav__bar nav__bar--off-lg flex-row-between ai-center">
    <div class="nav__logo">
      <a href="#"><svg ...></svg></a>
    </div>
    <div class="nav__hamburger">
      <div class="nav__slice-1"></div>
      <div class="nav__slice-1"></div>
      <div class="nav__slice-1"></div>
    </div>
  </div>
  <div class="nav__menu nav__menu--column nav__menu--row-lg nav--transform">
    <ul>
      <li><a href="#test56">Item</a></li>
      <li>
        <a href="#none">Nested-Item   <span class="nav__arrow"></span></a>
        <ul class="nav__nested flex-column">
          <li><a href="#test65">Item</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
Top-Navigations-Komponente in der Mobile-Ansicht
Top-Navigation – mit Suchfeld
<nav class="nav">
  <div class="nav__bar nav__bar--off-lg flex-row-between ai-center">
    <div class="nav__logo">
      <a href="#"><svg ...></svg></a>
    </div>
    <div class="search w-100 p-n3">
      <label class="bg-fff b-full-1 br-big-full">
        <input class="search__input ps-1" type="text" placeholder="Suche eingeben">
        <button class="search__button br-big-full"><img src="../img/icons/search.svg" alt="Webicon – Lupe"></button>
      </label>
      <div class="search__results mt-4 bg-neutral-00"></div>
    </div>
    <div class="nav__hamburger">
      <div class="nav__slice-1"></div>
      <div class="nav__slice-1"></div>
      <div class="nav__slice-1"></div>
    </div>
  </div>
  <div class="nav__menu nav__menu--column nav__menu--row-lg nav--transform">
    <ul>
      <li><a href="#test56">Item</a></li>
      <li>
        <a href="#none">Nested-Item   <span class="nav__arrow"></span></a>
        <ul class="nav__nested flex-column">
          <li><a href="#test65">Item</a></li>
        </ul>
      </li>
    </ul>
    <div class="d-none flex-row-lg ai-center bg-background-1 br-medium-bottom w-100">
      <div class="nav__logo">
        <a href="#"><svg ...></svg></a>
      </div>
      <div class="search w-100 p-1 pe-3">
        <label class="bg-fff b-full-1 br-big-full">
          <input class="search__input ps-1" type="text" placeholder="Suche eingeben">
          <button class="search__button br-big-full"><img src="../img/icons/search.svg" alt="Webicon – Lupe"></button>
        </label>
        <div class="search__results mt-4 bg-neutral-00"></div>
      </div>
    </div>
  </div>
</nav>
Hamburger
Hamburger-Menü Variante 1
<div class="nav__hamburger">
  <div class="nav__slice-1"></div>
  <div class="nav__slice-1"></div>
  <div class="nav__slice-1"></div>
</div>
menü
Hamburger-Menü Variante 2
<div class="nav__hamburger">
  <div class="nav__slice-2"></div>
  <div class="nav__slice-2"></div>
</div>
Hamburger-Menü Variante 3
<div class="nav__hamburger">
  <div class="nav__slice-3"></div>
  <div class="nav__slice-3"></div>
  <div class="nav__slice-3"></div>
</div>
Hamburger-Menü Variante 4
<div class="nav__hamburger">
  <div class="nav__slice-4"></div>
  <div class="nav__slice-4"></div>
  <div class="nav__slice-4"></div>
</div>

Tab-Navigation

Die Tabs-Komponente ist Teil einer modularen CSS-Bibliothek und ermöglicht flexible Tab-Navigationen in verschiedenen Ausrichtungen – oben, unten, links und rechts. Alle visuellen Aspekte lassen sich über CSS Custom Properties zentral steuern, ohne die Komponente selbst anzupassen. So bleibt das Theming sauber getrennt und vollständig wartbar.

Block
  • tabs
    • Zu verwendender Block-Name für die Tabs-Komponente.
Elemente
  • tabs__list
    • Container der Tab-Buttons. Konfigurierbar über:
      • --tablist-bg-color
      • --tab-gap
  • tabs__tab
    • Einzelner Tab-Button. Konfigurierbar über:
      • --tab-bg-color
      • --tab-text-color
      • --tab-hover-bg-color
      • --tab-hover-text-color
      • --tab-padding-y
      • --tab-padding-x
  • tabs__tab--active
    • Aktiver Tab. Konfigurierbar über:
      • --tab-active-bg-color
      • --tab-active-text-color
      • --tab-active-hover-text-color
      • --tab-indicator-color
      • --tab-indicator-size
  • tabs__panels
    • Wrapper für alle Panel-Inhalte.
  • tabs__panel
    • Einzelner Inhaltsbereich. Konfigurierbar über:
      • --panel-bg-color
      • --panel-text-color
      • --panel-padding
Modifier – Ausrichtung & Viewports
  • tabs--top-suffix (-sm, -md, -lg, -xl, -xxl)
    • Tab-Leiste oberhalb des Panels.
  • tabs--bottom-suffix (-sm, -md, -lg, -xl, -xxl)
    • Tab-Leiste unterhalb des Panels.
  • tabs--left-suffix (-sm, -md, -lg, -xl, -xxl)
    • Tab-Leiste links neben dem Panel.
  • tabs--right-suffix (-sm, -md, -lg, -xl, -xxl)
    • Tab-Leiste rechts neben dem Panel.
Beispiel

Willkommen auf dem Übersicht-Tab. Hier findest du eine kurze Zusammenfassung aller wichtigen Informationen.

Der Details-Tab enthält ausführlichere Informationen zu einzelnen Punkten.

Weitere Details können hier ergänzt werden.

In den Einstellungen kannst du Anpassungen vornehmen.

<div class="tabs tabs--left tabs--top-lg" data-tabs>
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab tabs__tab--active" role="tab" data-tab="t1-a"><span>Übersicht</span></button>
    <button class="tabs__tab" role="tab" data-tab="t1-b"><span>Details</span></button>
    <button class="tabs__tab" role="tab" data-tab="t1-c"><span>Einstellungen</span></button>
  </div>
  <div class="tabs__panels b-full-1">
    <div class="tabs__panel tabs__panel--active" data-panel="t1-a">
      <p>...</p>
    </div>
    <div class="tabs__panel" data-panel="t1-b">
      <p>...</p>
    </div>
    <div class="tabs__panel" data-panel="t1-c">
      <p>...</p>
    </div>
  </div>
</div>

-- coming soon --

Search

Die search-Komponente stellt eine Suchleiste mit Live-Ergebnisliste bereit. Abmessungen, Abstände und visuelle Details werden vollständig über CSS-Variablen gesteuert, was eine zentrale Anpassung in der variables.css ermöglicht. Die Ergebnisliste erscheint dynamisch auf Eingabe oder Button-Klick – der Button wechselt über ein data-state-Attribut zwischen aktiv und inaktiv. Die Komponente unterstützt zwei Layout-Varianten: Standard und Small (kollabierend). Weitere Breiten weden über Utility-Klassen und die entsprechenden Variablen gesteuert.
HINWEIS: Die Suche funktioniert nur in einer index.html und sucht auch nur in dieser!

Block
  • search
    • Zu verwendender Block-Name für die Search-Komponente.
Elemente
  • search__input
    • Das Texteingabefeld. Triggert die Suche per Enter.
  • search__button
    • Data-state steht automatisch auf "active"
    • .inactive benutzen um data-state auf "inactive" zu ändern.
    • Konfigurierbar über:
      • --heightButton
  • search__results
    • Absolut positionierter Ergebniscontainer.
    • Konfigurierbar über:
      • --top-destance
        • Steuert den Abstand der Suchergebnisse zum Eltern-Element.
      • --trennlinie
        • Hier kann die Tennlienie zwischen den Ergebnissen angepasst bzw entfernt werden.
      • --result-item-padding
        • Das Padding der einzelnen Suchergebisse einstellen.
      • --empty-padding
        • Padding des Outputs für "keine Suchergebisse".
      • --empty-align
        • Textausrichtung für "keine Suchergebnisse".
Modifier
  • search--small
    • Kollabiert das Label auf die Breite der Suchleiste. Expandiert per Hover.
Beispiel
  <div class="search">
    <label class="bg-fff b-full-1 br-big-full">
      <input class="search__input ps-1" type="search" placeholder="Suche eingeben">
      <button class="search__button br-big-full">
      <img src="../img/icons/search.svg" alt="Webicon – Lupe"></button>
    </label>
    <div class="search__results mt-4 bg-neutral-00"></div>
  </div>

Accordions

Die Accordion-Komponente ermöglicht flexible, aufklappbare Inhaltsbereiche. Alle visuellen Aspekte lassen sich über CSS Custom Properties zentral steuern, ohne die Komponente selbst anzupassen. So bleibt das Theming sauber getrennt und vollständig wartbar.

Block
  • accordion
    • Zu verwendender Block-Name für die Accordion-Komponente.
Elemente
  • accordion__item
    • Einzelnes Akkordeon-Element. Enthält Trigger und Panel. Konfigurierbar über:
      • --accordion-separator
  • accordion__trigger
    • Klickbarer Auslöser-Button. Konfigurierbar über:
      • --accordion-trigger-bg-color
      • --accordion-trigger-bg-color-hover
      • --accordion-trigger-bg-color-open
      • --accordion-trigger-color
      • --accordion-trigger-color-hover
      • --accordion-trigger-padding
  • accordion__panel
    • Aufklappbarer Inhaltsbereich. Animiert über:
      • --accordion-transition
  • accordion__content
    • Inhalt innerhalb des Panels. Konfigurierbar über:
      • --accordion-content-bg-color
      • --accordion-content-padding
  • accordion__arrow
    • Pfeil-Indikator im Trigger, dreht sich beim Öffnen.
  • accordeon__icon
    • Optionaler Icon-Container. Konfigurierbar über:
      • --accordion-icon-size
Modifier – Zustände & Optionen
  • accordion__item--open
    • Markiert ein geöffnetes Element. Zeigt das Panel an und passt den Trigger-Hintergrund an.
  • accordion__item--inactive
    • Deaktiviertes Element. Konfigurierbar über:
      • --accordion-disabled-opacity
  • data-accordion-multiple="true"
    • Attribut am accordion-Wrapper. Erlaubt das gleichzeitige Öffnen mehrerer Panels.
Beispiele
Responsive Design passt das Layout einer Website automatisch an unterschiedliche Bildschirmgrößen an — von Mobilgeräten bis hin zu großen Desktop-Monitoren.
Mobile First bedeutet, das Design zunächst für kleine Bildschirme zu entwickeln und dann schrittweise für größere Viewports zu erweitern — typischerweise über min-width-Media-Queries.
Breakpoints sind definierte Viewport-Breiten, ab denen sich das Layout ändert. Gebräuchliche Werte sind 480 px, 768 px, 1024 px und 1280 px.
Breakpoints sind definierte Viewport-Breiten, ab denen sich das Layout ändert. Gebräuchliche Werte sind 480 px, 768 px, 1024 px und 1280 px.
Accordion – Standart
<div class="accordion b-full-1 mb-3">
  <div class="accordion__item">
    <button class="accordion__trigger" type="button">
      Was ist Responsive Design?
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Responsive Design passt das Layout einer Website automatisch an unterschiedliche Bildschirmgrößen an …
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button class="accordion__trigger jc-center gap-1" type="button">
      Was ist Mobile First?
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Mobile First bedeutet, das Design zunächst für kleine Bildschirme zu entwickeln …
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button class="accordion__trigger flex-row-reverse-center gap-1" type="button">
      Was sind Breakpoints?
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Breakpoints sind definierte Viewport-Breiten, ab denen sich das Layout ändert …
      </div>
    </div>
  </div>
  <div class="accordion__item accordion__item--inactive">
    <button class="accordion__trigger" type="button">
      Was sind Breakpoints?
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Breakpoints sind definierte Viewport-Breiten, ab denen sich das Layout ändert …
      </div>
    </div>
  </div>
</div>
Responsive Design passt das Layout einer Website automatisch an unterschiedliche Bildschirmgrößen an — von Mobilgeräten bis hin zu großen Desktop-Monitoren.
Mobile First bedeutet, das Design zunächst für kleine Bildschirme zu entwickeln und dann schrittweise für größere Viewports zu erweitern — typischerweise über min-width-Media-Queries.
Breakpoints sind definierte Viewport-Breiten, ab denen sich das Layout ändert. Gebräuchliche Werte sind 480 px, 768 px, 1024 px und 1280 px.
Accordion – mit Utility-Klassen für Seperation
<div class="accordion b-full-1 mb-3 flex-column gap-2">
  <div class="accordion__item bg-neutral-00 shadow-1">
    <button class="accordion__trigger" type="button">
      <span class="accordeon__icon"><img src="../img/icons/arrow-up-circle-fill.svg" alt=""></span>
      Was ist Responsive Design?
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Responsive Design passt das Layout einer Website automatisch an unterschiedliche Bildschirmgrößen an …
      </div>
    </div>
  </div>
  <div class="accordion__item bg-neutral-100 shadow-1">
    <button class="accordion__trigger" type="button">
      <span class="accordeon__icon"><img class="me-1" src="../img/icons/arrow-up-circle-fill.svg" alt="">Was ist Mobile First?</span>
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Mobile First bedeutet … typischerweise über <code>min-width</code>-Media-Queries.
      </div>
    </div>
  </div>
  <div class="accordion__item bg-neutral-200 shadow-1">
    <button class="accordion__trigger" type="button">
      Was sind Breakpoints?
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Breakpoints sind definierte Viewport-Breiten, ab denen sich das Layout ändert …
      </div>
    </div>
  </div>
</div>
Wir liefern innerhalb Deutschlands in 2–4 Werktagen. Für Bestellungen über 50 € ist der Versand kostenlos. Express-Lieferung ist gegen Aufpreis möglich.
Sie haben 30 Tage Zeit, Artikel zurückzuschicken. Die Ware muss unbenutzt und originalverpackt sein. Rücksendungen sind kostenlos.
Wir akzeptieren Kreditkarte, PayPal, Klarna und Vorkasse per Banküberweisung. Alle Zahlungen werden verschlüsselt übertragen.
Accordion – mehrere Panels gleichzeitig öffnen
<div class="accordion mb-3 b-full-1" data-accordion-multiple="true">
  <div class="accordion__item">
    <button class="accordion__trigger" type="button">
      Versand &amp; Lieferung
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Wir liefern innerhalb Deutschlands in 2–4 Werktagen. Für Bestellungen über 50 € ist der Versand kostenlos. Express-Lieferung ist gegen Aufpreis möglich.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button class="accordion__trigger" type="button">
      Rückgabe &amp; Umtausch
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Sie haben 30 Tage Zeit, Artikel zurückzuschicken. Die Ware muss unbenutzt und originalverpackt sein. Rücksendungen sind kostenlos.
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button class="accordion__trigger" type="button">
      Zahlungsmethoden
      <span class="accordion__arrow" aria-hidden="true"></span>
    </button>
    <div class="accordion__panel">
      <div class="accordion__content">
        Wir akzeptieren Kreditkarte, PayPal, Klarna und Vorkasse per Banküberweisung. Alle Zahlungen werden verschlüsselt übertragen.
      </div>
    </div>
  </div>
</div>

Forms

-- coming soon --

Gallery

-- coming soon --

Data visualization

-- coming soon --

-- coming soon --

Pixel

Die pixel-Klassen definieren quadratische Flächenelemente in drei Größenstufen. Abmessungen, Farbbereiche und Verläufe werden vollständig über CSS-Variablen gesteuert, was eine zentrale Anpassung in der variables.css ermöglicht. Pro Größenstufe lassen sich bis zu zwei Farbbereiche definieren – Farbbereich 2 ist deaktiviert, solange from und to identisch gesetzt sind.

Block
  • pixel
    • Zu verwendender Block-Name für die Pixel-Elemente.
Elemente
  • pixel__1
    • An folgenden Variablen konfigurierbar:
      • --pixel-w
      • --pixel-h
      • --color-range-1-from
      • --color-range-1-to
      • --color-range-2-from (optional, deaktiviert wenn gleich)
      • --color-range-2-to (optional, deaktiviert wenn gleich)
  • pixel__2
      • --pixel2-w
      • --pixel2-h
      • --color2-range-1-from
      • --color2-range-1-to
      • --color2-range-2-from (optional, deaktiviert wenn gleich)
      • --color2-range-2-to (optional, deaktiviert wenn gleich)
  • pixel__3
      • --pixel3-w
      • --pixel3-h
      • --color3-range-1-from
      • --color3-range-1-to
      • --color3-range-2-from (optional, deaktiviert wenn gleich)
      • --color3-range-2-to (optional, deaktiviert wenn gleich)
Beispiel
<div class="pixel b-full-2 br-full bg-fff grid grid--10">
   <div class="pixel__3 aspect-1-1"></div>
   <div class="pixel__3 aspect-1-1"></div>
   [ -"- 46x]
</div>

Farben

Das Farbsystem von frayme wird zentral über CSS-Variablen in der variables.css definiert. Jede Farbe steht als Utility-Klasse für background-color, color und border zur Verfügung. Dark-Mode wird systemseitig unterstützt; statische und invertierte Varianten ermöglichen eine gezielte Steuerung unabhängig vom aktiven Theme.

Transparenzsteuerung

Die Deckkraft (Alpha-Kanal) von Farben kann auf zwei Arten gesteuert werden:

  1. Direkt in CSS-Regeln
    Die Transparenz wird innerhalb der jeweiligen CSS-Regeln durch die Angabe des Alpha-Werts (z.B. rgba(var(--text-primary), var(--alpha, 1))) definiert.
  2. Selektiv über Utility-Klassen
    Alternativ stehen Hilfsklassen (alpha-0 bis alpha-100 in 5%-Schritten) zur Verfügung, um die Deckkraft direkt im HTML zu steuern. Diese Klassen wirken sich auf:
    • background-color
    • color (Textfarbe)
    • border-color

Wichtig: Die Klassen überschreiben die Deckkraft relativ zum Elternelement. Das bedeutet, dass sich die Transparenzwerte innerhalb eines Containers kumulativ von 0% bis 100% überlagern können.

<div class="alpha-50">
    <p class="alpha-75">Text mit 75% Deckkraft (relativ zum Eltern-Element).</p>
</div>

Haupt-Farben

Es sind default drei Hauptfarben definiert.
Anpassbar in: variables.css unter --primary, --secondary und tertiary.
Sie stehen als folgende Hilfsklassen zur Verfügung:

primary

background-color

border

color

<div class="bg-primary"></div>

<div class="border-primary"></div>

<div class="text-primary"></div>

secondary

background-color

border

color

<div class="bg-secondary"></div>

<div class="border-secondary"></div>

<div class="text-secondary"></div>

tertiary

background-color

border

color

<div class="bg-tertiary"></div>

<div class="border-tertiary"></div>

<div class="text-tertiary"></div>

Hintergrund-Farben

Es sind für beide Modi zwei Hintergrundfarben definiert.
Anpassbar in: variables.css unter --background-1 und --background-1.
Sie stehen als folgende Hilfsklassen zur Verfügung:

background-1

background-color

border

color

<div class="bg-background-1"></div>

<div class="border-background-1"></div>

<div class="text-background-1"></div>

background-2

background-color

border

color

<div class="bg-background-2"></div>

<div class="border-background-2"></div>

<div class="text-background-2"></div>

Schrift-Farben

Schriftfarben & Theme-Logik

Die Schriftfarben sind so konzipiert, dass sie sich wie alle anderen Farben automatisch im Darkmode anpassen. Ergänzend stehen statische und invertierte Varianten zur Verfügung.

  1. Einsatz & Logik Die Steuerung erfolgt über drei zentrale Logik-Ebenen:
    • Dynamische Anpassung: --fcolor und --fcolor-invert wechseln automatisch (z. B. dunkel → hell).
    • Statische Farben: --fcolor-static bleibt unabhängig vom Theme (ideal für feste Hintergründe wie Cards).
    • Invertierung: Die -invert-Varianten stellen immer den Kontrast zur Basis-Farbe her.
  2. Theme-Wechsel & Anpassung Die globale Steuerung erfolgt über die variables.css, um eine konsistente Aktualisierung aller Elemente zu gewährleisten:
    • Hauptfarben: Anpassung von --fcolor wirkt sich sofort auf alle .text-fcolor Klassen aus.
    • Darkmode-Optimierung: Werte werden spezifisch im :root[theme="dark"] Block getauscht.

Wichtig: Statische Farben (fcolor-static bzw. fcolor-static-invert) sollten nur dann eingesetzt werden, wenn sich der Hintergrund eines Elements beim Theme-Wechsel nicht verändert, um die Lesbarkeit zu garantieren.

fcolor

color

<div class="text-fcolor"></div>

fcolor-invert

color

<div class="text-fcolor-invert"></div>

fcolor-static

color

border

<div class="text-fcolor-static"></div>

<div class="border-fcolor-static"></div>

fcolor-static-invert

color

border

<div class="text-fcolor-static-invert"></div>

<div class="border-fcolor-static-invert"></div>

Rahmen-Farben

Border-Farben (CSS-System)

Das System für Border-Farben funktioniert analog zu den Schriftfarben, nutzt jedoch spezifische Variablen, um Rahmen und Trennlinien unabhängig steuern zu können:

  1. Variablen & Logik Die Definition erfolgt über zentrale CSS-Variablen, die den Kontrast zum Hintergrund sicherstellen:
    • --bcolor: Standard-Border-Farbe (z. B. für Rahmen oder Trennlinien).
    • --bcolor-invert: Gegenteilige Farbe zu --bcolor (für Kontrast auf farbigen Flächen).
  2. Utility-Klassen für HTML Um die Farben direkt im Markup zuzuweisen, stehen folgende Klassen zur Verfügung:
    • .border-bcolor: Wendet die Standard-Border-Farbe an.
    • .border-bcolor-invert: Wendet die invertierte Border-Farbe an.

Hinweis: Die Funktionsweise (Darkmode, Theme-Wechsel) entspricht exakt der Logik der Schriftfarben. Statische Varianten existieren hier nicht, da Border-Farben in der Regel immer dynamisch an das aktive Theme angepasst werden.

bcolor

border

<div class="border-bcolor"></div>

bcolor-invert

border

<div class="border-bcolor-invert"></div>

bcolor-static

border

<div class="border-bcolor-static"></div>

bcolor-static-invert

border

<div class="border-bcolor-static-invert"></div>

Schatten-Farben

Schatten-Farben (CSS-System)

Das System für Schatten-Farben ermöglicht eine präzise Steuerung von Box-Shadows. Es nutzt eigene Variablen, um Schattierungen unabhängig von Text- oder Rahmenfarben anpassen zu können:

  1. Variablen & Logik Die Definition der Schattenfarbe erfolgt über zentrale Variablen, die sich harmonisch in das Theme einfügen:
    • --scolor: Standard-Schattenfarbe (z. B. für weiche Schatten auf hellen Flächen).
    • --scolor-invert: Invertierte Schattenfarbe (für Kontrasteffekte auf dunklen oder farbigen Hintergründen).
    • --scolor-static: statische Schattenfarbe um einen wechsel der Schattenfarbe beim Themewechsel zu verhindern.
    • --scolor-static-invert: Invertierte, statische Schattenfarbe (für Kontrasteffekte auf dunklen oder farbigen Hintergründen).
  2. Utility-Klassen für HTML Es stehen folgende Klassen für innere-, äußere- und Text-Schatten zur Verfügung:
    • Inset-Shadows: .shadow-1-inset und .shadow-2-inset (inkl. static/invert Varianten) für nach innen gerichtete Schatten.
    • Text-Shadows: .text-shadow-1 bis .text-shadow-3 zur Akzentuierung von Schriftarten.

Hinweis: Die Funktionsweise hinsichtlich Darkmode und Theme-Wechsel ist identisch mit dem System der Schriftfarben. Auf statische Varianten wurde hier verzichtet, da Schatten in der Regel immer dynamisch auf den Hintergrund des gewählten Themes reagieren müssen.

weiter zu Schatten Klassen

--scolor

shadow Variablen

--scolor-invert

shadow Variablen

--scolor-static

shadow Variablen

--scolor-static-invert

shadow Variablen

Semantische-Farben

Es sind einige Semantische Farben definiert.
Anpassbar in: variables.css unter --success, --warning, --error, --info und --highlight.
Sie stehen als folgende Hilfsklassen zur Verfügung:

success

background-color

border

color

<div class="bg-success"></div>

<div class="border-success"></div>

<div class="text-success"></div>

warning

background-color

border

color

<div class="bg-warning"></div>

<div class="border-warning"></div>

<div class="text-warning"></div>

error

background-color

border

color

<div class="bg-error"></div>

<div class="border-error"></div>

<div class="text-error"></div>

info

background-color

border

color

<div class="bg-info"></div>

<div class="border-info"></div>

<div class="text-info"></div>

highlight

background-color

border

color

<div class="bg-highlight"></div>

<div class="border-highlight"></div>

<div class="text-highlight"></div>

Funktionale-Farben

Es sind einige Semantische Farben definiert.
Anpassbar in: variables.css unter --custom-1, --warning und --neutral-00 - 1500 (in 100er Schritten).
Sie stehen als folgende Hilfsklassen zur Verfügung:

neutral

background-color

border

color

<div class="bg-neutral-100"></div>

<div class="border-neutral-100"></div>

<div class="text-neutral-100"></div>

000

background-color

border

color

<div class="bg-000"></div>

<div class="border-000"></div>

<div class="text-000"></div>

fff

background-color

border

color

<div class="bg-fff"></div>

<div class="border-fff"></div>

<div class="text-fff"></div>

custom-1

background-color

border

color

<div class="bg-custom-1"></div>

<div class="border-custom-1"></div>

<div class="text-custom-1"></div>

custom-2

background-color

border

color

<div class="bg-custom-2"></div>

<div class="border-custom-2"></div>

<div class="text-custom-2"></div>

custom-3

background-color

border

color

<div class="bg-custom-3"></div>

<div class="border-custom-3"></div>

<div class="text-custom-3"></div>

Aussehen

Border / Border-Radius

Border, Border-Radius, Schatten, Bilddarstellung und Seitenverhältnisse – diese visuellen Utilities steuern das äußere Erscheinungsbild von Elementen. Alle Werte sind über CSS-Variablen in der variables.css zentral konfigurierbar und lassen sich per responsivem Suffix auf bestimmte Breakpoints beschränken.

Border & Border-Radius nur in bestimmten Viewports

Nutze die folgenden Klassen mit dem jeweiligen Suffix für den jeweiligen Viewport.

  • -sm = min-width: 480px
  • -md = min-width: 768px
  • -lg = min-width: 1024px
  • -xl = min-width: 1280px
  • -xxl = min-width: 1440px

Beispiel: b-full-1-lg

Border
  • b-full, b-top, b-right, b-bottom, b-left (1–3)
    • Klassen für alle Seiten (b-full), Top (b-top), Right (b-right), Bottom (b-bottom) und Left (b-left).
    • Werte:
      • [prefix]-1 = var(--border-1)
      • [prefix]-2 = var(--border-2)
      • [prefix]-3 = var(--border-3)
    • Farbe: rgba(var(--bcolor), var(--alpha, 1))
  • b-none
    • Entfernt alle Borders: border: 0px !important
  • b-top-0, b-right-0, b-bottom-0, b-left-0
    • Entfernt den Border der jeweiligen Seite auf 0px !important.
  • b-dotted, b-dashed
    • Ändert den Border-Style auf dotted bzw. dashed.
Border-Radius
  • br-full, br-top, br-top-left, br-top-right, br-right, br-bottom, br-bottom-left, br-bottom-right, br-left
    • Setzt den Border-Radius über CSS-Variablen (--br-top-left, --br-top-right etc.).
    • Verfügbar in drei Größen:
      • br-[side] = normal (var(--br-*))
      • br-medium-[side] = mittel (var(--br-medium-*))
      • br-big-[side] = groß (var(--br-big-*))
  • br-round
    • Setzt den Border-Radius auf 50% !important (Kreis/Pill).
  • br-none, br-top-0, br-top-left-0, br-top-right-0, br-right-0, br-bottom-0, br-bottom-left-0, br-bottom-right-0, br-left-0
    • Setzt den Border-Radius der jeweiligen Ecke(n) auf 0 !important.

Schatten

Die Shadow-Klassen ermöglichen das schnelle Anwenden von Box- und Text-Schatten über Utility-Klassen. Die Schatten-Werte werden über CSS-Variablen in der variables.css definiert und können dort zentral angepasst werden. Box-Schatten sind in sechs Intensitätsstufen verfügbar, jeweils mit Varianten für invertierte, statische und Inset-Schatten. Für Texte stehen vier Schattenstufen bereit.

Box-Shadow Klassen
  • shadow-none
    • Entfernt jeden Box-Schatten vom Element.
  • shadow-1 – shadow-6
    • Sechs Varianten für Box-Schatten. Jede Stufe ist in vier Farbmodi verfügbar, die das Verhalten im Dark Mode steuern. Die Schatten-Werte sind in der variables.css anpassbar.
      • (ohne Suffix) – normale Farbe, invertiert sich automatisch im Dark Mode
      • -invert – invertierte Farbe, wechselt zurück im Dark Mode
      • -static – normale Farbe, bleibt im Dark Mode unverändert
      • -static-invert – invertierte Farbe, bleibt im Dark Mode unverändert
  • shadow-1-inset – shadow-2-inset
    • Nach innen gerichteter Schatten (inset) in zwei Varianten. Ebenfalls in allen vier Farbmodi verfügbar.
      • (ohne Suffix) – normale Farbe, invertiert sich automatisch im Dark Mode
      • -invert – invertierte Farbe, wechselt zurück im Dark Mode
      • -static – normale Farbe, bleibt im Dark Mode unverändert
      • -static-invert – invertierte Farbe, bleibt im Dark Mode unverändert
Text-Shadow Klassen
  • text-shadow-1 – text-shadow-3 und text-outline
    • Setzt einen Text-Schatten in vier Varianten. Die Werte sind in der variables.css anpassbar.
      • text-shadow-1
      • text-outline
Beispiele

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

shadow-6

shadow-1-inset

shadow-2-inset

text-shadow-1

Schatten

text-shadow-2

Schatten

text-shadow-3

Schatten

text-outline

Schatten

Images

  • .img--cover-top
  • .img--cover-center
  • .img--cover-bottom
    • = width: 100%; height: 100%; display: block; object-fit: cover; object-position: X;
  • .img--contain-top
  • .img--contain-center
  • .img--contain-bottom
    • = width: 100%; height: 100%; display: block; object-fit: contain; object-position: X center;

HINWEIS: In img-tag eintragen.

Seitenverhältnisse

Aspect

  • aspect-1-1 – aspect-191-1
    • Setzt aspect-ratio und overflow: hidden auf das Element.
      • aspect-1-1 = 1 / 1
      • aspect-4-3 = 4 / 3
      • aspect-3-2 = 3 / 2
      • aspect-16-9 = 16 / 9
      • aspect-2-1 = 2 / 1
      • aspect-21-9 = 21 / 9
      • aspect-5-4 = 5 / 4
      • aspect-4-5 = 4 / 5
      • aspect-9-16 = 9 / 16
      • aspect-191-1 = 1.91 / 1
Suffix – Viewports
  • -sm
    • schaltet die Klasse ab 480px frei
  • -md
    • schaltet die Klasse ab 768px frei
  • -lg
    • schaltet die Klasse ab 1024px frei
  • -xl
    • schaltet die Klasse ab 1280px frei
  • -xxl
    • schaltet die Klasse ab 1440px frei

HINWEIS: Alle mit overflow = hidden.

Animationen

-- coming soon --

Weiteres

Ebenen, Positionen, Größen sowie kleinere Utilities wie Blur, Display und Overflow – dieser Abschnitt fasst ergänzende Klassen zusammen, die sich keinem der anderen Module zuordnen lassen, aber im täglichen Einsatz regelmäßig gebraucht werden.

Ebenen

z-index
  • layer-n1
    • z-index: -1;
  • layer-0 – layer-10
    • Setzt den z-index auf den jeweiligen Wert von 0 bis 10.
Suffix – Viewports
  • -sm
    • schaltet die Klasse ab 480px frei
  • -md
    • schaltet die Klasse ab 768px frei
  • -lg
    • schaltet die Klasse ab 1024px frei
  • -xl
    • schaltet die Klasse ab 1280px frei
  • -xxl
    • schaltet die Klasse ab 1440px frei

Positions

Diese Klassen steuern die Platzierung von Elementen. Sie ermöglichen es, Elemente aus dem normalen Dokumentenfluss herauszulösen (Absolute/Fixed) oder sie beim Scrollen anzuheften (Sticky).

Positionierungs-Typen
  • sticky
    • position: sticky !important;
    • Haftet an einer definierten Position innerhalb seines Containers.
  • absolute
    • position: absolute;
    • Positionierung relativ zum nächsten positionierten Vorfahren.
  • relative
    • position: relative;
    • Bleibt im Dokumentenfluss, dient aber als Bezugspunkt für absolute Kinder.
  • fixed
    • position: fixed !important;
    • Positionierung relativ zum Viewport (Browserfenster).
Position-Offsets
  • top-0, bottom-0, start-0, end-0
    • Setzt den Abstand zur jeweiligen Seite auf 0 !important.
Zentrierung – Kombination
  • top-50, start-50
    • Setzt die Position auf 50% von oben oder links.
  • translate-middle
    • transform: translate(-50%, -50%) !important;
    • Verschiebt das Element um die Hälfte seiner eigenen Größe zurück (perfekt zum Zentrieren).
Suffix – Viewports
  • -sm
    • schaltet die Klasse ab 480px frei
  • -md
    • schaltet die Klasse ab 768px frei
  • -lg
    • schaltet die Klasse ab 1024px frei
  • -xl
    • schaltet die Klasse ab 1280px frei
  • -xxl
    • schaltet die Klasse ab 1440px frei

Größen - Höhen - Breiten

Basis-Größen
  • w-100, h-100
    • Setzt Breite oder Höhe auf 100% des Eltern-Elements.
  • vw-100, vw-110, vh-100, vh-110
    • Setzt Breite oder Höhe auf 100vw/vh (voller Viewport).
  • vh-1
    • Spezialwert: height: 0.1vh;
Suffix – Viewports
  • -sm
    • schaltet die Klasse ab 480px frei
  • -md
    • schaltet die Klasse ab 768px frei
  • -lg
    • schaltet die Klasse ab 1024px frei
  • -xl
    • schaltet die Klasse ab 1280px frei
  • -xxl
    • schaltet die Klasse ab 1440px frei

Verschiedenes

Blur

  • blur-1 – blur-3
    • Setzt einen backdrop-filter: blur() auf das Element.
      • blur-1 = 2px
      • blur-2 = 4px
      • blur-3 = 8px
Suffix – Viewports
  • -sm
    • schaltet die Klasse ab 480px frei
  • -md
    • schaltet die Klasse ab 768px frei
  • -lg
    • schaltet die Klasse ab 1024px frei
  • -xl
    • schaltet die Klasse ab 1280px frei
  • -xxl
    • schaltet die Klasse ab 1440px frei

Display

  • .d-block = display=block
    • Suffix: -sm bis -xxl
  • .d-inline-block = display=inline-block
    • Suffix: -sm bis -xxl
  • .d-none = display=none
    • Suffix: -sm bis -xxl

Verstecken

  • .d-none = display=none
    • Suffix: -sm bis -xxl
  • .hidden = opacity=0, padding=0, font-size=0
    • Suffix: -sm bis -xxl
  • .overflow-hidden = overflow=hidden
    • Verhindert das Scrollen und Überlaufen des Inhalts in einem Container
  • .overflow-x-hidden = overflow-x=hidden
    • Verhindert das Scrollen und Überlaufen des Inhalts in einem Container auf der X-Achse
  • .overflow-y-hidden = overflow-y=hidden
    • Verhindert das Scrollen und Überlaufen des Inhalts in einem Container Container auf der Y-Achse
  • .overflow-scroll = overflow=scroll
    • Ermöglicht das Scrollen in einem Container und verhindert Überlaufen des Inhalts.

Filter

frayme download