Oberflächenkomponente

Nur CSS-basierte Tailwind-CSS-Oberfläche zum Anwenden thematischer Hintergrund- und Textfarben auf einen Container. Alle Farbvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Oberflächenkomponenten sind vielseitige Layout-Primitive, die geschichtete visuelle Hierarchien und Inhaltscontainer erstellen. Mit semantischem HTML erstellte Oberflächen bieten flexible Tiefen- und Gestaltungsoptionen. Das Frutjam-Oberflächensystem unterstützt mehrere Größen, Formen und Ebenen – ideal für Kartenalternativen, Inhaltsblöcke und verschachtelte Layouts.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Grundlegende Verwendung

1
2
3
4

<div class="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

1
2
3
4

<div className="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

Oberflächenschichten

Verwenden Sie surface-1 und surface-2, um eine Tiefenhierarchie zu erstellen, indem Sie die Grundfarbe mit der Vordergrundfarbe mischen.

1
2
3

<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>

Oberflächenformen

1
2

<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>

Rahmenstile

Verwenden Sie surface-outline oder surface-dashed für transparente Container, die durch einen Rahmen definiert sind. Diese funktionieren ordnungsgemäß, wenn sie in farbigen Ebenen verschachtelt sind, da der Hintergrund explizit transparent ist.

1
2
3
4
5
6
7

<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>

Oberflächengrößen

Größendienstprogramme legen die interne Polsterung über --surface--padding fest. Nicht mit Tailwind p-*-Dienstprogrammen kombinieren – diese überschreiben die Variable und machen die Größenklasse zunichte.

1
2
3
4
5

<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>

Verschachtelte Oberflächen

1
2
3
4
5
6

<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>