Frutjam's CSS-only typography system. Semantic HTML text scaling with Tailwind CSS v4, WCAG accessible, no JavaScript required. Works with Django, HTMX, Laravel, React, and any framework.

System typografii Frutjam obsługujący wyłącznie CSS dla Tailwind CSS v4. Semantyczna skala nagłówków i akapitów, narzędzia do responsywnego układu i integracja tekstu — nie wymaga JavaScript, dostępny WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Układ

.wrapper to narzędzie do responsywnego układu strony, które wyśrodkowuje treść w poziomie i stosuje spójne poziome dopełnienie w punktach przerwania. Użyj wariantów rozmiaru, aby ustawić ograniczenie maksymalnej szerokości dla różnych potrzeb układu.

Wszystkie klasy

Wszystkie warianty mają tę samą responsywną skalę dopełniania. Różni się tylko maksymalna szerokość.

Responsywna wyściółka

Wszystkie warianty opakowań automatycznie skalują poziome dopełnienie w punktach przerwania — nie są potrzebne żadne dodatkowe klasy użytkowe.

1
2
3
4

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

Przykład układu strony

Użyj pliku .wrapper-xl w głównym obszarze zawartości, aby uzyskać standardowy układ strony.

 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>

Przykład układu artykułu

Użyj .wrapper-md, aby uzyskać czytelny układ artykułów lub postów na blogu.

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>

Typografia

1. Narzędzia elementów

Klasy te są przeznaczone do bezpośredniego użycia w elementach HTML. Nagłówki są zoptymalizowane pod kątem wagi i wpływu, a akapity są zoptymalizowane pod kątem czytelności.

Nagłówki

Użyj .heading-{size} w przypadku tytułów i tekstu o dużym znaczeniu.

Skala standardowa

heading-xs, heading-sm, heading-md, heading-base, heading-lg, heading-xl, heading-2xl, heading-3xl, heading-4xl, nagłówek-5xl, nagłówek-6xl, nagłówek-7xl, nagłówek-8xl, nagłówek-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>

Dynamiczna precyzja (dowolna liczba)

Frutjam pozwala oderwać się od skali. Użyj dowolnej wartości numerycznej, aby ustawić określony rozmiar w pikselach

.heading-{number} (np. .heading-46)

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

Akapity

Użyj .para-{size} do tekstu podstawowego, opisów i etykiet interfejsu użytkownika

Skala standardowa

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>

Dynamiczna precyzja (dowolna liczba)

Nie utknij w skali. Użyj dowolnej wartości numerycznej, aby wybrać dokładny rozmiar w pikselach wymagany przez projekt.

.para-{number} (np. .para-28)

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

Responsywna typografia

Frutjam does not force "automatic" resizing. Instead, it gives you full control using Tailwind's mobile-first breakpoints. This ensures your design never "guesses" what your mobile layout should look like.

Wzór responsywny

Zawsze najpierw określ rozmiar swojego telefonu komórkowego (klasa bazowa), a następnie użyj przedrostków takich jak md: lub lg:, aby skalować w przypadku większych ekranów.

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. Tekst bogaty (proza)

Podczas renderowania treści Markdown lub CMS nie można ręcznie dodawać klas takich jak heading-lg do każdego tagu. prose-frutjam to opakowanie, które łączy oficjalną wtyczkę @tailwindcss/typography z tokenami projektowymi Frutjam — dzięki czemu tagi HTML bez stylu automatycznie dziedziczą kolory i typografię motywu.

Organizować coś

Upewnij się, że obie wtyczki są aktywne w CSS Tailwind v4:

1
2
3

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

Stosowanie

Dodaj zarówno .prose, jak i .prose-frutjam do elementu opakowania. .prose aktywuje wtyczkę typograficzną; .prose-frutjam mapuje na nim tokeny tematyczne Frutjama.

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>

Co zostaje zmapowane

Opakowanie zastępuje następujące zmienne CSS prozy za pomocą tokenów Frutjam:

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

Tryb ciemny

Dodaj .prose-invert obok .prose-frutjam, aby uzyskać ciemne tła — tokeny invert są również mapowane na kolory Frutjam.

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>