Loslegen

Von Null bis zu einer Feitio-Seite in wenigen Schritten. Wählen Sie Ihren Weg; beide führen an den gleichen Ort.

Auf dieser Seite

Zwei Wege

To designYou will think through a screen before it exists: what to read, in what order, and what not to do. To buildYou will build the page: install, load the CSS, pick theme and density, use the components.

Um zu entwerfen

Lies das Konzept.
Die drei Werte und die drei "Niemals"-Regeln entscheiden über alles, was die Regeln nicht abdecken. Zehn Minuten, und der Rest ergibt Sinn. Konzept
Beginne mit dem Handy und mit den Worten.
Vor jedem Kasten: Was der Bildschirm sagen muss und was die Hauptaktion ist, auf einem schmalen Bildschirm. Eine Hauptaktion pro Bildschirm.
Wähle die Dichte.
Eine Seite zum Lesen atmet; eine Arbeitsseite mit Tabellen und Formularen ist kompakt.
Baue mit Komponenten, nicht mit Kästen.
Jede Komponente sagt, wann man sie verwenden soll und vor allem, wann nicht. Wenn nichts passt, schaut euch die Muster an.
Prüfe bei Tag, bei Nacht, auf dem Handy und nur mit der Tastatur.
Und nehmt eine Sache heraus, bevor ihr es als fertig bezeichnest. Bei Zweifel: Nehm sie raus.

Um zu bauen

Installiere.
Oder kopiert den css/ Ordner und das icons/sprite.svg in euer Projekt: Feitio ist plain CSS.
```
npm install @feitio/core
```
```
pnpm add @feitio/core
```
```
yarn add @feitio/core
```
```
bun add @feitio/core
```
Lade die Schriften und das CSS.
Die Schriften kommen mit, in fonts.css, ohne etwas von einer anderen Seite zu laden; wer die Schriften schon selbst ausliefert, lässt diese Datei weg.
HTML
```
<link rel="stylesheet" href="feitio/css/fonts.css">
<link rel="stylesheet" href="feitio/css/feitio.css">
```

Nutze die Komponenten.

HTML mit den Klassen von Feitio, die Astro-Komponenten (@feitio/astro) oder die React-Komponenten (@feitio/react). Alle drei ergeben dasselbe HTML.

HTML

<button type="submit" class="feitio-button" data-variant="primary">Salvar alterações</button>

React

import { Button } from '@feitio/react';

<Button variant="primary" type="submit">Salvar alterações</Button>

Werte nur aus den Tokens.

Keine Farbe, kein Abstand oder keine Dauer per Hand geschrieben.

CSS

.minha-area {
  padding: var(--feitio-space-5) var(--feitio-space-4);
  background: var(--feitio-color-surface-raised);
}

Prüfe.
Feitio testet bereits Kontrast und Icons; auf eurer Seite läuft axe-core durch und man geht alles nur mit der Tastatur durch.

Theme, Mode, Dichte und Motion

Alle über Attribute, auf jedem Element, und alles transitioniert, wenn es sich ändert.

HTML

<html lang="pt-BR" data-theme="casa">          <!-- o tema da casa, seguindo o modo do sistema -->
<html lang="pt-BR" data-mode="dark">           <!-- força a noite -->
<section data-density="compact">…</section>   <!-- tela de trabalho -->
<div data-motion="direct">…</div>              <!-- sem transição: arrastar, desenhar -->

Eine Fassade für externe Arbeit

Erstellt tokens/themes/<name>.light.tokens.json füllt die gleichen Farbrollen wie das Home-Theme, läuft bun run build und bun run check (Kontrast muss bestehen) und nutzt data-theme="<name>". Nur die Farben ändern sich; Nacht kommt, wenn die Arbeit es verlangt.

Für KI-Agenten

Wenn ein Agent das Baut, liest er diese zuerst:

AGENTS.md: die Regeln für diejenigen, die am Repository arbeiten.
skills/feitio/SKILL.md: wie man mit Feitio eine Schnittstelle baut und was man niemals tun sollte.
Die Tokens in JSON (tokens/) und auf der veröffentlichten Seite jede Seite auch in Markdown plus ein llms.txt.

Was jede Datei enthält, mit ihrem Link: Für Agenten.