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.

Tailwind CSS v4.0 için Frutjam'ın yalnızca CSS tipografi sistemi. Anlamsal başlık ve paragraf ölçeği, duyarlı düzen yardımcı programları ve düzyazı entegrasyonu; JavaScript gerekmez, WCAG AA'ya erişilebilir. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

Düzen

.wrapper, içeriği yatay olarak ortalayan ve kesme noktaları boyunca tutarlı yatay dolgu uygulayan duyarlı bir sayfa düzeni yardımcı programıdır. Farklı düzen gereksinimlerine yönelik maksimum genişlik sınırlaması ayarlamak için boyut çeşitlerini kullanın.

Tüm Sınıflar

Tüm varyantlar aynı duyarlı dolgu ölçeğini paylaşır. Yalnızca maksimum genişlik farklıdır.

Duyarlı Dolgu

Tüm sarmalayıcı çeşitleri yatay dolguyu kesme noktaları boyunca otomatik olarak ölçeklendirir; ekstra yardımcı program sınıflarına gerek yoktur.

1
2
3
4

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

Sayfa Düzeni Örneği

Standart bir sayfa düzeni için ana içerik alanınızda .wrapper-xl kullanın.

 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>

Makale Düzeni Örneği

Okunabilir makale veya blog yazısı düzenleri için .wrapper-md kullanın.

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>

Tipografi

1. Öğe Yardımcı Programları

Bu sınıflar HTML öğelerinde doğrudan kullanım için tasarlanmıştır. Başlıklar ağırlık ve etki açısından optimize edilirken Paragraflar okunabilirlik için optimize edilmiştir.

Başlıklar

Başlıklar ve yüksek öneme sahip metinler için .heading-{size} kullanın.

Standart Ölçek

heading-xs, heading-sm, heading-md, heading-base, heading-lg, heading-xl, heading-2xl, heading-3xl, heading-4xl, başlık-5xl, başlık-6xl, başlık-7xl, başlık-8xl, başlık-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>

Dinamik Hassasiyet (Herhangi Bir Sayı)

Frutjam, tartıdan kopmanızı sağlar. Belirli bir piksel boyutunu ayarlamak için herhangi bir sayısal değeri kullanın

.heading-{number} (ör. .heading-46)

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

Paragraflar

Gövde metni, açıklamalar ve kullanıcı arayüzü etiketleri için .para-{size} kullanın

Standart Ölçek

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>

Dinamik Hassasiyet (Herhangi Bir Sayı)

Bir teraziye takılıp kalmayın. Tasarımınızın gerektirdiği tam piksel boyutunu ayarlamak için herhangi bir sayısal değeri kullanın.

.para-{number} (ör. .para-28)

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

Duyarlı Tipografi

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.

Duyarlı Desen

Her zaman önce mobil boyutunuzu tanımlayın (temel sınıf), ardından daha büyük ekranlara ölçeklendirmek için md: veya lg: gibi önekleri kullanın.

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. Zengin Metin (Düzyazı)

Markdown veya CMS içeriğini oluştururken, her etikete heading-lg gibi sınıfları manuel olarak ekleyemezsiniz. prose-frutjam, resmi @tailwindcss/typography eklentisini Frutjam'ın tasarım belirteçleriyle birleştiren bir sarmalayıcıdır; böylece biçimlendirilmemiş HTML etiketleri, temanızın renklerini ve tipografisini otomatik olarak devralır.

Kurmak

Tailwind v4 CSS'nizde her iki eklentinin de etkin olduğundan emin olun:

1
2
3

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

Kullanım

Sarmalayıcı öğesine hem .prose hem de .prose-frutjam'ı ekleyin. .prose tipografi eklentisini etkinleştirir; .prose-frutjam, Frutjam'ın tema jetonlarını buna eşler.

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>

Neler Haritalanır?

Sarmalayıcı, Frutjam belirteçleriyle aşağıdaki düz CSS değişkenlerini geçersiz kılar:

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

Karanlık Mod

Koyu arka planlar için .prose-frutjam'ın yanına .prose-invert ekleyin; ters çevirme belirteçleri de Frutjam renkleriyle eşlenir.

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>