Peels

Éléments HTML

Une page de référence exhaustive — tous les éléments HTML standards stylisés par Peels, sans aucune classe CSS.

Titres

Les six niveaux de titres avec l'échelle typographique fluide de Peels.

Titre h1

Titre h2

Titre h3

Titre h4

Titre h5
Titre h6

Paragraphe et éléments inline

Voici un paragraphe standard. La longueur de ligne est contrainte pour rester lisible. Peels cible entre 60 et 75 caractères par ligne.

Lien hypertexte · Gras (strong) · Italique (em) · Emphase colorée (mark) · Texte supprimé (del) · Texte inséré (ins) · Texte barré (s) · Petit texte (small) · Indice (sub) · Exposant (sup)

Code inline : var(--peels-text-body) · Touche clavier : Ctrl + C · Abréviation : CSS · Variable : x · Sortie : Compilation réussie · Ruby : 漢(kan)字(ji)

Citation

La typographie est 95% du design web. C'est une affirmation provocatrice, mais elle contient une vérité fondamentale.

— Oliver Reichenstein, iA

Listes

Liste non ordonnée

  • Premier élément
  • Deuxième élément
    • Sous-élément imbriqué
    • Autre sous-élément
  • Troisième élément

Liste ordonnée

  1. Première étape
  2. Deuxième étape
    1. Sous-étape A
    2. Sous-étape B
  3. Troisième étape

Liste de définitions

CSS classless
Approche CSS où les éléments HTML sémantiques sont stylisés directement, sans classes utilitaires.
Token de design
Variable CSS nommée qui représente une décision de design (couleur, espacement, typographie).
Layer CSS
Mécanisme de cascade permettant d'organiser et de prioriser les règles CSS en couches indépendantes.

Code

Bloc de code avec pre et code :

@layer reset, tokens, contract, theme, base, elements, a11y;

:root {
  --peels-text-base: var(--size-step-0);
  --peels-leading:   1.6;
}

Figure, image et audio

Image de démonstration — paysage généré aléatoirement
Légende de l'image — élément figcaption à l'intérieur d'un figure.

Details et accordéon

Qu'est-ce que Peels ?

Peels est un framework CSS classless — il stylise vos éléments HTML sémantiques sans aucune classe. Écrivez du HTML propre, il sera beau par défaut.

Comment fonctionne le theming ?

Peels utilise des custom properties CSS organisées en couches : tokens bruts → rôles UI (--peels-*) → composants. Les thèmes sont contrôlés par des attributs data-theme.

Puis-je personnaliser Peels ?

Oui — en surchargeant les variables --peels-* dans votre propre CSS, ou en créant un thème alternatif via data-theme="mon-theme".

Accordéon groupé

Question fréquente 1

Réponse à la première question. Un seul élément de ce groupe peut être ouvert à la fois.

Question fréquente 2

Réponse à la deuxième question.

Question fréquente 3

Réponse à la troisième question.

Aside et coordonnées

Un contenu principal, suivi d'une note complémentaire dans un élément aside et de coordonnées dans address :

Atelier Peels · 14 rue des Fonderies, 44000 Nantes · contact@exemple.fr

Tableau

Variables d'espacement Peels
Token Variable Peels Usage typique
--space-3xs — Micro-espacement, badges
--space-2xs — Padding boutons, tags
--space-xs --peels-gap-component Gap entre éléments inline
--space-s --peels-padding-block Padding interne composants
--space-m --peels-gutter Marges latérales page
--space-l --peels-gap-section Espacement entre sections
Correspondance tokens bruts → rôles UI Peels.

Formulaire

Formulaire de démonstration avec validation native, jauges et interrupteurs.

Coordonnées
Préférences de contact
Message et options