Version de développement
Cette documentation décrit la version « next » (develop), non encore publiée. Pour la version stable, basculez sur « v5 » dans l'en-tête.
Personnalisation
Utilitaires de style et de mise en page
Dodock propose un ensemble de classes CSS utilitaires pour personnaliser rapidement l'apparence et la disposition des éléments dans l'interface. Ces utilitaires sont basés sur le design system Espresso et permettent aux développeurs et administrateurs de créer des interfaces cohérentes sans écrire de CSS personnalisé.
Utilitaires de style et de mise en page
Dodock propose un ensemble de classes CSS utilitaires pour personnaliser rapidement l'apparence et la disposition des éléments dans l'interface. Ces utilitaires sont basés sur le design system Espresso et permettent aux développeurs et administrateurs de créer des interfaces cohérentes sans écrire de CSS personnalisé.
Classes de mise en page (Flexbox)
Les classes Flexbox permettent de contrôler la disposition des éléments dans un conteneur. Elles sont particulièrement utiles pour organiser les formulaires, tableaux de bord et composants d'interface.
Conteneurs Flex
| Classe | Description | Exemple d'utilisation |
|---|---|---|
flex | Active le mode flex sur un conteneur | <div class="flex">...</div> |
flex-row | Disposition horizontale (par défaut) | <div class="flex flex-row">...</div> |
flex-col | Disposition verticale | <div class="flex flex-col">...</div> |
flex-wrap | Autorise le retour à la ligne | <div class="flex flex-wrap">...</div> |
flex-nowrap | Empêche le retour à la ligne | <div class="flex flex-nowrap">...</div> |
Alignement et justification
| Classe | Description | Exemple d'utilisation |
|---|---|---|
justify-start | Aligne les éléments au début | <div class="flex justify-start">...</div> |
justify-center | Centre les éléments horizontalement | <div class="flex justify-center">...</div> |
justify-end | Aligne les éléments à la fin | <div class="flex justify-end">...</div> |
justify-between | Espace les éléments uniformément | <div class="flex justify-between">...</div> |
items-start | Aligne les éléments en haut | <div class="flex items-start">...</div> |
items-center | Centre les éléments verticalement | <div class="flex items-center">...</div> |
items-end | Aligne les éléments en bas | <div class="flex items-end">...</div> |
Espacement entre éléments
| Classe | Description | Exemple d'utilisation |
|---|---|---|
gap-1 | Espacement de 4px | <div class="flex gap-1">...</div> |
gap-2 | Espacement de 8px | <div class="flex gap-2">...</div> |
gap-3 | Espacement de 12px | <div class="flex gap-3">...</div> |
gap-4 | Espacement de 16px | <div class="flex gap-4">...</div> |
gap-5 | Espacement de 20px | <div class="flex gap-5">...</div> |
Ordre des éléments
| Classe | Description | Exemple d'utilisation |
|---|---|---|
order-first | Place l'élément en premier | <div class="order-first">...</div> |
order-last | Place l'élément en dernier | <div class="order-last">...</div> |
order-none | Ordre par défaut | <div class="order-none">...</div> |
Classes d'espacement
Les classes d'espacement permettent de contrôler les marges et les paddings des éléments.
Marges
| Classe | Description | Exemple d'utilisation |
|---|---|---|
m-1 | Marge de 4px (toutes directions) | <div class="m-1">...</div> |
m-2 | Marge de 8px | <div class="m-2">...</div> |
m-3 | Marge de 12px | <div class="m-3">...</div> |
m-4 | Marge de 16px | <div class="m-4">...</div> |
mx-2 | Marge horizontale de 8px | <div class="mx-2">...</div> |
my-2 | Marge verticale de 8px | <div class="my-2">...</div> |
mt-2 | Marge supérieure de 8px | <div class="mt-2">...</div> |
mb-2 | Marge inférieure de 8px | <div class="mb-2">...</div> |
ml-2 | Marge gauche de 8px | <div class="ml-2">...</div> |
mr-2 | Marge droite de 8px | <div class="mr-2">...</div> |
Paddings
| Classe | Description | Exemple d'utilisation |
|---|---|---|
p-1 | Padding de 4px (toutes directions) | <div class="p-1">...</div> |
p-2 | Padding de 8px | <div class="p-2">...</div> |
p-3 | Padding de 12px | <div class="p-3">...</div> |
p-4 | Padding de 16px | <div class="p-4">...</div> |
px-2 | Padding horizontal de 8px | <div class="px-2">...</div> |
py-2 | Padding vertical de 8px | <div class="py-2">...</div> |
pt-2 | Padding supérieur de 8px | <div class="pt-2">...</div> |
pb-2 | Padding inférieur de 8px | <div class="pb-2">...</div> |
pl-2 | Padding gauche de 8px | <div class="pl-2">...</div> |
pr-2 | Padding droite de 8px | <div class="pr-2">...</div> |
Classes de typographie
Les classes de typographie permettent de contrôler la taille, le poids et le style du texte.
| Classe | Description | Exemple d'utilisation |
|---|---|---|
text-xs | Taille de texte extra-small | <p class="text-xs">...</p> |
text-sm | Taille de texte small | <p class="text-sm">...</p> |
text-base | Taille de texte par défaut | <p class="text-base">...</p> |
text-lg | Taille de texte large | <p class="text-lg">...</p> |
text-xl | Taille de texte extra-large | <p class="text-xl">...</p> |
font-bold | Texte en gras | <p class="font-bold">...</p> |
font-medium | Texte semi-gras | <p class="font-medium">...</p> |
font-normal | Texte normal | <p class="font-normal">...</p> |
italic | Texte en italique | <p class="italic">...</p> |
underline | Texte souligné | <p class="underline">...</p> |
line-through | Texte barré | <p class="line-through">...</p> |
Classes de visibilité
| Classe | Description | Exemple d'utilisation |
|---|---|---|
hidden | Masque l'élément | <div class="hidden">...</div> |
visible | Rend l'élément visible | <div class="visible">...</div> |
invisible | Masque l'élément mais conserve son espace | <div class="invisible">...</div> |
Classes de bordure
| Classe | Description | Exemple d'utilisation |
|---|---|---|
border | Ajoute une bordure | <div class="border">...</div> |
border-t | Bordure supérieure | <div class="border-t">...</div> |
border-b | Bordure inférieure | <div class="border-b">...</div> |
border-l | Bordure gauche | <div class="border-l">...</div> |
border-r | Bordure droite | <div class="border-r">...</div> |
border-solid | Bordure pleine | <div class="border border-solid">...</div> |
border-dashed | Bordure en pointillés | <div class="border border-dashed">...</div> |
border-dotted | Bordure en points | <div class="border border-dotted">...</div> |
rounded | Coins arrondis | <div class="rounded">...</div> |
rounded-sm | Coins légèrement arrondis | <div class="rounded-sm">...</div> |
rounded-md | Coins moyennement arrondis | <div class="rounded-md">...</div> |
rounded-lg | Coins très arrondis | <div class="rounded-lg">...</div> |
Classes de taille
| Classe | Description | Exemple d'utilisation |
|---|---|---|
w-full | Largeur à 100% | <div class="w-full">...</div> |
w-1/2 | Largeur à 50% | <div class="w-1/2">...</div> |
w-1/3 | Largeur à 33% | <div class="w-1/3">...</div> |
w-1/4 | Largeur à 25% | <div class="w-1/4">...</div> |
h-full | Hauteur à 100% | <div class="h-full">...</div> |
h-screen | Hauteur à 100vh | <div class="h-screen">...</div> |
Exemples d'utilisation
Exemple 1 : Disposition d'un formulaire
<div class="flex flex-col gap-3 p-4 border rounded-md">
<div class="flex flex-row justify-between items-center">
<label class="font-medium">Nom du client</label>
<input type="text" class="border rounded p-2 w-1/2" />
</div>
<div class="flex flex-row justify-between items-center">
<label class="font-medium">Date de commande</label>
<input type="date" class="border rounded p-2 w-1/2" />
</div>
<div class="flex justify-end gap-2 mt-4">
<button class="px-4 py-2 border rounded">Annuler</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded">Enregistrer</button>
</div>
</div>
Exemple 2 : Carte de tableau de bord
<div class="flex flex-col gap-2 p-4 border rounded-lg shadow-sm">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg">Statistiques des ventes</h3>
<span class="text-sm text-gray-500">Mois en cours</span>
</div>
<div class="flex gap-4">
<div class="flex flex-col items-center">
<span class="text-2xl font-bold">120</span>
<span class="text-sm text-gray-500">Commandes</span>
</div>
<div class="flex flex-col items-center">
<span class="text-2xl font-bold">45 000 €</span>
<span class="text-sm text-gray-500">Chiffre d'affaires</span>
</div>
</div>
</div>
Bonnes pratiques
- Cohérence : Utilisez les mêmes classes d'espacement et de typographie dans toute votre application pour garantir une apparence uniforme.
- Performance : Privilégiez les classes utilitaires plutôt que d'écrire du CSS personnalisé pour réduire la taille des fichiers et améliorer les performances.
- Accessibilité : Assurez-vous que les contrastes de couleur et les tailles de texte respectent les normes d'accessibilité (WCAG).
- Documentation : Documentez les classes utilitaires utilisées dans vos projets pour faciliter la maintenance et la collaboration.
Pour les développeurs
Les classes utilitaires sont définies dans les fichiers SCSS suivants :
frappe/public/scss/common/flex.scss: Classes Flexbox.frappe/public/scss/common/utilities.scss: Classes d'espacement, de typographie, de bordure et de visibilité.frappe/public/scss/espresso/_typography.scss: Classes de typographie spécifiques au design system Espresso.
Pour ajouter de nouvelles classes utilitaires, modifiez ces fichiers et recompilez les assets avec bench build.
Importation : Les classes utilitaires sont importées dans frappe/public/scss/desk.bundle.scss. Pour les utiliser sur les pages du site web, ajoutez l'import suivant dans frappe/public/scss/website.bundle.scss :
@import "./common/utilities";