Commencer

De zéro à une page Feitio en quelques étapes. Choisissez votre chemin ; tous aboutissent au même endroit.

Sur cette page

Deux chemins

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.

Pour concevoir

Lisez le Concept.
Les trois valeurs et les trois "nevers" décident de tout ce que ne couvrent pas les règles. Dix minutes, le reste devient logique. Concepte
Commencez par le mobile et par les mots.
Avant toute boîte : ce que l'écran doit dire et quelle est l'action principale, sur un écran étroit. Une action principale par écran.
Choisissez la densité.
Une page pour la lecture respire ; un écran de travail, avec des tableaux et des formulaires, est compacte.
Construisez avec des composants, pas des boîtes.
Chaque composant indique quand l'utiliser et, avant tout, quand ne pas. Si aucun ne convient, regardez les modèles.
Vérifiez de jour, de nuit, sur mobile et au clavier seul.
Retirez une chose avant de l'appeler terminée. En cas de doute, retirez-la.

Construire

Installez.
Ou copiez le dossier css/ et le fichier icons/sprite.svg dans votre projet : Feitio est du CSS simple.
```
npm install @feitio/core
```
```
pnpm add @feitio/core
```
```
yarn add @feitio/core
```
```
bun add @feitio/core
```
Chargez les polices et le CSS.
Les polices sont incluses, dans fonts.css, sans rien demander à un autre site ; si vous servez déjà les polices à votre façon, ignorez ce fichier.
HTML
```
<link rel="stylesheet" href="feitio/css/fonts.css">
<link rel="stylesheet" href="feitio/css/feitio.css">
```

Utilisez les composants.

Du HTML avec les classes de Feitio, les composants Astro (@feitio/astro) ou React (@feitio/react). Les trois donnent le même 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>

Des valeurs issues des tokens, et rien d’autre.

Aucune couleur, espace ou durée définie à la main.

CSS

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

Vérifiez.
Feitio teste déjà le contraste et les icônes ; sur votre page, exécutez axe-core et naviguez uniquement avec le clavier.

Thème, mode, densité et mouvement

Tout via attribut, sur n'importe quel élément, et tout transitionne lorsqu'il change.

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

Une façade pour les travaux extérieurs

Créez tokens/themes/<name>.light.tokens.json en remplissant les mêmes rôles de couleurs que le thème principal, exécutez bun run build et bun run check (le contraste doit passer), puis utilisez data-theme="<name>". Seules les couleurs changent ; la nuit arrive lorsque le travail l'exige.

Pour les agents IA

Si un agent est celui qui construit, il lit ces documents en premier :

AGENTS.md : les règles pour quiconque travaille sur le dépôt.
skills/feitio/SKILL.md : comment construire une interface avec Feitio et ce qu'il ne faut jamais faire.
Les tokens en JSON (tokens/) et, sur le site publié, chaque page également en Markdown plus un llms.txt.

Ce que contient chaque fichier, avec son lien : Pour les agents.