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.

Le système de typographie CSS uniquement de Frutjam pour Tailwind CSS v4. Titre sémantique et échelle de paragraphe, utilitaires de mise en page réactifs et intégration de prose – aucun JavaScript requis, WCAG AA accessible. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Mise en page

.wrapper est un utilitaire de mise en page réactif qui centre le contenu horizontalement et applique un remplissage horizontal cohérent entre les points d'arrêt. Utilisez des variantes de taille pour définir une contrainte de largeur maximale pour différents besoins de mise en page.

Tous les cours

Toutes les variantes partagent la même échelle de remplissage réactive. Seule la largeur maximale diffère.

Rembourrage réactif

Toutes les variantes de wrapper mettent automatiquement à l'échelle le remplissage horizontal entre les points d'arrêt - aucune classe d'utilitaire supplémentaire n'est nécessaire.

1
2
3
4

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

Exemple de mise en page

Utilisez .wrapper-xl sur votre zone de contenu principale pour une mise en page standard.

 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>

Exemple de mise en page d'article

Utilisez .wrapper-md pour des mises en page d'articles ou de billets de blog lisibles.

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>

Typographie

1. Utilitaires d'éléments

Ces classes sont conçues pour être utilisées directement sur des éléments HTML. Les titres sont optimisés pour le poids et l'impact, tandis que les paragraphes sont optimisés pour la lisibilité.

Rubriques

Utilisez .heading-{size} pour les titres et le texte de haute importance.

L'échelle standard

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

Précision dynamique (n'importe quel nombre)

Frutjam permet de s'éloigner de la balance. Utilisez n'importe quelle valeur numérique pour définir une taille de pixel spécifique

.heading-{number} (par exemple, .heading-46)

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

Paragraphes

Utilisez .para-{size} pour le corps du texte, les descriptions et les étiquettes de l'interface utilisateur.

L'échelle standard

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>

Précision dynamique (n'importe quel nombre)

Ne restez pas coincé dans une balance. Utilisez n’importe quelle valeur numérique pour composer la taille exacte en pixels exigée par votre conception.

.para-{number} (par exemple, .para-28)

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

Typographie réactive

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.

Le modèle réactif

Définissez toujours d'abord la taille de votre mobile (la classe de base), puis utilisez des préfixes tels que md: ou lg: pour l'adapter à des écrans plus grands.

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. Texte enrichi (prose)

Lors du rendu du contenu Markdown ou CMS, vous ne pouvez pas ajouter manuellement des classes telles que heading-lg à chaque balise. prose-frutjam est un wrapper qui relie le plugin officiel @tailwindcss/typography avec les jetons de conception de Frutjam — de sorte que les balises HTML sans style héritent automatiquement des couleurs et de la typographie de votre thème.

Installation

Assurez-vous que les deux plugins sont actifs dans votre CSS Tailwind v4 :

1
2
3

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

Usage

Ajoutez à la fois .prose et .prose-frutjam à l'élément wrapper. .prose active le plugin de typographie ; .prose-frutjam y mappe les jetons du thème de Frutjam.

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>

Ce qui est cartographié

Le wrapper remplace les variables CSS de prose suivantes par des jetons 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

Mode sombre

Ajoutez .prose-invert à côté de .prose-frutjam pour les arrière-plans sombres — les jetons inversés sont également mappés aux couleurs 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>