Frutjams reines CSS-Typografiesystem. Semantische HTML-Textskalierung mit Tailwind CSS v4, WCAG zugänglich, kein JavaScript erforderlich. Funktioniert mit Django, HTMX, Laravel, React und jedem Framework.

Frutjams reines CSS-Typografiesystem für Tailwind CSS v4. Semantische Überschrift und Absatzskalierung, responsive Layout-Dienstprogramme und Prosa-Integration – kein JavaScript erforderlich, WCAG AA zugänglich. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Layout

.wrapper ist ein responsives Seitenlayout-Dienstprogramm, das Inhalte horizontal zentriert und einen konsistenten horizontalen Abstand über Haltepunkte hinweg anwendet. Verwenden Sie Größenvarianten, um eine maximale Breitenbeschränkung für unterschiedliche Layoutanforderungen festzulegen.

Alle Klassen

Alle Varianten haben die gleiche reaktionsfähige Polsterungsskala. Lediglich die maximale Breite unterscheidet sich.

Reaktionsfreudige Polsterung

Alle Wrapper-Varianten skalieren automatisch die horizontale Auffüllung über Haltepunkte hinweg – es sind keine zusätzlichen Dienstprogrammklassen erforderlich.

1
2
3
4

/* Applied to every wrapper variant */
default  → padding-inline: 1rem   (16px)
sm       → padding-inline: 2rem   (32px)
lg       → padding-inline: 4rem   (64px)

Beispiel für ein Seitenlayout

Verwenden Sie .wrapper-xl in Ihrem Hauptinhaltsbereich für ein Standardseitenlayout.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<header class="bg-base-200">
  <div class="wrapper-xl">
    <nav class="navbar">...</nav>
  </div>
</header>

<main class="wrapper-xl py-12">
  <h1 class="heading-4xl">Page Title</h1>
  <p class="para-base">Page content goes here.</p>
</main>

<footer class="bg-base-200">
  <div class="wrapper-xl">...</div>
</footer>

Beispiel für ein Artikellayout

Verwenden Sie .wrapper-md für lesbare Artikel- oder Blog-Beitragslayouts.

1
2
3
4

<article class="wrapper-md py-10 prose prose-frutjam">
  <h1>Article Title</h1>
  <p>Long-form content benefits from a narrower max-width for optimal line length.</p>
</article>

Typografie

1. Element-Dienstprogramme

Diese Klassen sind für die direkte Verwendung auf HTML-Elementen konzipiert. Überschriften sind auf Gewicht und Wirkung optimiert, während Absätze auf Lesbarkeit optimiert sind.

Überschriften

Verwenden Sie .heading-{size} für Titel und wichtigen Text.

Die Standardskala

heading-xs, heading-sm, heading-md, heading-base, heading-lg, heading-xl, heading-2xl, heading-3xl, heading-4xl, heading-5xl, heading-6xl, heading-7xl, heading-8xl, heading-9xl

1
2
3

<h1 class="heading-4xl">Gigantic Hero</h1>
<h2 class="heading-3xl">Section Title</h2>
<h3 class="heading-base">Small Subheading</h3>

Dynamische Präzision (beliebige Zahl)

Frutjam ermöglicht es Ihnen, sich von der Waage zu lösen. Verwenden Sie einen beliebigen numerischen Wert, um eine bestimmte Pixelgröße festzulegen

.heading-{number} (z. B. .heading-46)

    <h2 class="heading-46">Bespoke Heading</h2>

Absätze

Verwenden Sie .para-{size} für Textkörper, Beschreibungen und UI-Beschriftungen

Die Standardskala

para-xs, para-sm, para-md, para-base, para-lg, para-xl, para-2xl, para-3xl, para-4xl, para-5xl, para-6xl, para-7xl, para-8xl, para-9xl

1
2
3

<p class="para-lg">This is a lead paragraph with extra breathing room.</p>
<p class="para-base">This is your standard UI text size.</p>
<p class="para-xs">Small footer or caption text.</p>

Dynamische Präzision (beliebige Zahl)

Bleiben Sie nicht in einer Waage stecken. Verwenden Sie einen beliebigen numerischen Wert, um genau die Pixelgröße einzustellen, die Ihr Design erfordert.

.para-{number} (z. B. .para-28)

    <p class="para-28">Editorial-style body text.</p>

Responsive Typografie

Frutjam erzwingt keine „automatische“ Größenänderung. Stattdessen erhalten Sie die volle Kontrolle über die Mobile-First-Haltepunkte von Tailwind. Dadurch wird sichergestellt, dass Ihr Design nie „errät“, wie Ihr mobiles Layout aussehen soll.

Das Reaktionsmuster

Definieren Sie immer zuerst die Größe Ihres Mobilgeräts (die Basisklasse) und verwenden Sie dann Präfixe wie md: oder lg:, um für größere Bildschirme zu skalieren.

1
2
3
4
5
6
7

<h1 class="heading-2xl md:heading-5xl lg:heading-9xl">
  Responsive Headline
</h1>

<p class="para-sm md:para-base lg:para-lg">
  Body text that stays comfortable on all devices.
</p>

2. Rich Text (Prosa)

Beim Rendern von Markdown- oder CMS-Inhalten können Sie nicht jedem Tag manuell Klassen wie heading-lg hinzufügen. prose-frutjam ist ein Wrapper, der das offizielle @tailwindcss/typography-Plugin mit den Design-Tokens von Frutjam verbindet – so erben nicht gestylte HTML-Tags automatisch die Farben und die Typografie Ihres Themes.

Aufstellen

Stellen Sie sicher, dass beide Plugins in Ihrem Tailwind v4 CSS aktiv sind:

1
2
3

@import "tailwindcss";
@plugin "frutjam";
@plugin "@tailwindcss/typography";

Verwendung

Fügen Sie sowohl .prose als auch .prose-frutjam zum Wrapper-Element hinzu. .prose aktiviert das Typografie-Plugin; .prose-frutjam ordnet die Thementoken von Frutjam darauf zu.

1
2
3
4
5
6
7
8
9

<article class="prose prose-frutjam max-w-none">
  <h1>Article Title</h1>
  <p>Body text, links, and lists all inherit Frutjam theme colors automatically.</p>
  <ul>
    <li>Links use your primary color</li>
    <li>Blockquote borders use your primary color</li>
    <li>Headings, body, and captions use semantic on-base colors</li>
  </ul>
</article>

Was kartiert wird

Der Wrapper überschreibt die folgenden Prosa-CSS-Variablen mit Frutjam-Tokens:

1
2
3
4
5
6
7
8

/* prose-frutjam maps these automatically */
body text      → --color-body
headings       → --color-on-base
links          → --color-primary
blockquotes    → --color-on-base  (text), --color-primary (border)
bullets        → --color-neutral
code           → --color-on-base
captions       → --color-on-neutral

Dunkler Modus

Fügen Sie .prose-invert neben .prose-frutjam für dunkle Hintergründe hinzu – invertierte Token werden auch den Frutjam-Farben zugeordnet.

1
2
3
4

<article class="prose prose-frutjam prose-invert bg-neutral p-6 rounded-lg">
  <h2>Dark Background Content</h2>
  <p>Inverted tokens keep text legible on dark surfaces.</p>
</article>