跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

版式

最後更新:

Frutjam 的純 CSS 版式系統。使用 Tailwind CSS v4 進行語意 HTML 文字縮放，可存取 WCAG，無需 JavaScript。適用於 Django、HTMX、Laravel、React 和任何框架。

Frutjam 針對 Tailwind CSS v4 的純 CSS 版式系統。語義標題和段落比例、響應式佈局實用程式和散文整合 — 無需 JavaScript，可存取 WCAG AA。適用於 Django、HTMX、Laravel、React 和任何堆疊。

佈局

.wrapper 是一個響應式頁面佈局實用程序，它將內容水平居中並在斷點之間應用一致的水平填充。使用大小變體為不同的佈局需求設定最大寬度約束。

所有課程

所有變體共享相同的響應式填充比例。僅最大寬度不同。

班級 最大寬度 使用案例
wrappernone全寬居中容器
wrapper-xs320px狹窄的對話框或側邊欄
wrapper-sm640px單列內容
wrapper-md768px文章和部落格文章
wrapper-lg1024px標準頁面佈局
wrapper-xl1280px寬佈局
wrapper-2xl1536px超寬佈局
wrapper-full100%全出血且內邊距一致

響應式填充

所有包裝器變體都會自動縮放跨斷點的水平填充 - 不需要額外的實用程式類別。

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

頁面佈局範例

在主要內容區域使用 .wrapper-xl 以獲得標準頁面佈局。

html 
 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>

文章版面範例

使用 .wrapper-md 進行可讀的文章或部落格文章版面。

html 
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>

版式

1. 元素實用程式

這些類別設計用於直接在 HTML 元素上使用。標題針對重量和影響力進行了優化，而段落則針對可讀性進行了優化。

標題

使用 .heading-{size} 作為標題和高重要性文字。

標準量表

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

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

動態精度（任意數字）

Frutjam 讓您擺脫規模。使用任何數值來設定特定的像素大小

.heading-{number}（例如.heading-46）

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

段落

使用 .para-{size} 作為正文、描述和 UI 標籤

標準量表

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

html 
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>

動態精度（任意數字）

不要被秤困住。使用任何數值來撥入您的設計所需的確切像素大小。

.para-{number}（例如，.para-28）

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

響應式排版

Frutjam 不會強迫「自動」調整大小。相反，它讓您可以使用 Tailwind 的行動優先斷點進行完全控制。這可以確保您的設計永遠不會「猜測」您的行動佈局應該是什麼樣子。

響應式模式

始終先定義您的行動裝置尺寸（基底類別），然後使用 md: 或 lg: 等前綴來放大以適應更大的螢幕。

html 
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.富文本（散文）

渲染 Markdown 或 CMS 內容時，您無法手動為每個標籤新增諸如 heading-lg 之類的類別。 prose-frutjam 是一個包裝器，它將官方 @tailwindcss/typography 外掛程式與 Frutjam 的設計令牌連接起來 - 因此無樣式的 HTML 標籤會自動繼承主題的顏色和版面配置。

設定

確保這兩個插件在您的 Tailwind v4 CSS 中都處於活動狀態：

css 
1
2
3
@import "tailwindcss";
@plugin "frutjam";
@plugin "@tailwindcss/typography";

用法

將 .prose 和 .prose-frutjam 加入包裝元素中。 .prose 啟動版式外掛程式； .prose-frutjam 將 Frutjam 的主題標記對應到它上面。

html 
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>

映射什麼

包裝器使用 Frutjam 標記覆蓋以下散文 CSS 變數：

css 
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

深色模式

新增 .prose-invert 與 .prose-frutjam 一起用於深色背景 - 反轉標記也對應到 Frutjam 顏色。

html 
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>