Utilitaires de style et de mise en page
Utilitaires de style et de mise en page
Dodock fournit un jeu de classes CSS utilitaires pour le HTML classique du bureau et du site web : blocs HTML personnalisés, formats d'impression web, pages, scripts client. Les classes reprennent les noms de Tailwind. Les couleurs, les ombres et les arrondis viennent des jetons du thème Espresso.
Ce n'est pas Tailwind complet. Seules les classes listées ici existent. Une classe Tailwind absente de cette liste n'a pas d'effet.
Les classes sont chargées dans le bureau (desk.bundle.scss) et sur le site web (website.bundle.scss).
Disposition
| Classes | Effet |
|---|---|
flex, inline-flex, grid, block, hidden | Type d'affichage |
flex-col, flex-wrap, flex-nowrap | Direction et retour à la ligne d'un conteneur flex |
items-start, items-center, items-end, items-baseline, items-stretch | Alignement vertical des enfants |
justify-start, justify-center, justify-between, justify-end | Répartition horizontale des enfants |
self-start, self-end | Alignement d'un seul enfant |
flex-1, grow, shrink-0 | Croissance et réduction d'un enfant |
grid-flow-col, auto-cols-fr | Grille en colonnes de même largeur |
relative, absolute, inset-0 | Positionnement |
Espacement
Un pas vaut var(--spacing), soit 0,25 rem.
Les pas disponibles sont : 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8. Dans le HTML, écrivez par exemple gap-2.5.
| Préfixe | Effet |
|---|---|
gap- | Espace entre les enfants d'un conteneur flex ou grille. À préférer aux marges. |
p-, px-, py-, pt-, pb-, ps-, pe- | Marges intérieures |
m-, mx-, my-, mt-, mb-, ms-, me- | Marges extérieures |
ms-auto, me-auto, mt-auto | Marge automatique, pour pousser un élément au bout d'une ligne flex |
s (start) et e (end) désignent le début et la fin de la ligne. Ils s'inversent dans les langues écrites de droite à gauche. Il n'y a pas de ml-, mr-, pl- ni pr- dans ce jeu de classes.
Taille
| Classes | Effet |
|---|---|
w-full, w-0, min-w-0, min-w-2 | Largeur |
size-2 à size-16 (2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16) | Largeur et hauteur égales, pour une icône ou un avatar |
max-w-xs, max-w-sm, max-w-lg, max-w-4xl, max-w-6xl | Largeur maximale |
min-h-0, min-h-6 à min-h-96, max-h-80, h-px | Hauteur |
Texte
Les styles de texte viennent de typography.css. Chaque classe fixe la taille, l'interligne et la graisse.
| Classes | Usage |
|---|---|
text-2xs, text-xs, text-sm, text-base, text-lg, text-xl, text-2xl … text-12xl | Texte sur une ligne (libellés, titres). Interligne serré. |
text-p-xs, text-p-sm, text-p-base, text-p-lg, text-p-xl | Paragraphes. Interligne de 1,5. |
Suffixe -medium, -semibold, -bold, -black | Graisse : text-base-semibold, text-p-sm-bold… |
truncate, whitespace-nowrap, whitespace-pre-wrap, break-words, text-center | Coupure et alignement |
Il n'y a pas de font-bold, italic ni underline. Utilisez le suffixe de graisse ou une balise HTML (<em>, <u>).
Couleurs
Une classe existe pour chaque jeton de couleur Espresso :
| Préfixe | Effet | Exemple |
|---|---|---|
text-ink-<couleur>-<n> | Couleur du texte | text-ink-gray-6 |
bg-surface-<couleur>-<n> | Couleur de fond | bg-surface-red-1 |
border-outline-<couleur>-<n> | Couleur de bordure | border-outline-gray-2 |
Couleurs : gray (1 à 9), et red, blue, green, amber, orange, yellow, teal, cyan, violet, purple, pink (1 à 10).
Jetons sans numéro : text-ink-base, text-ink-blue-link, bg-surface-base, bg-transparent, border-outline-base.
Ces couleurs suivent le thème clair ou sombre de l'utilisateur. N'écrivez pas de couleur en dur (#333, bg-red-500).
Bordures, arrondis et ombres
| Classes | Effet |
|---|---|
border, border-0, border-t, border-b, border-s, border-e | Bordure |
rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-full | Arrondi |
shadow-none, shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl | Ombre |
Autres
overflow-hidden, overflow-auto, overflow-x-auto, overflow-y-auto, invisible, cursor-pointer, pointer-events-none, list-none, appearance-none, align-top.
Exemple
Exemple fictif : une carte de chiffres dans un bloc HTML personnalisé d'espace de travail.
<div class="flex flex-col gap-2 p-4 border rounded-lg shadow-sm bg-surface-base">
<div class="flex justify-between items-center">
<span class="text-lg-semibold text-ink-gray-8">Ventes du mois</span>
<span class="text-sm text-ink-gray-5">Novembre</span>
</div>
<div class="flex gap-6">
<div class="flex flex-col">
<span class="text-2xl-bold">120</span>
<span class="text-sm text-ink-gray-6">Commandes</span>
</div>
<div class="flex flex-col">
<span class="text-2xl-bold">45 000 €</span>
<span class="text-sm text-ink-gray-6">Chiffre d'affaires</span>
</div>
</div>
</div>
Pages liées
- Thème Espresso : les jetons de couleur, d'espacement et de texte