Les briques du framework
Un kit à assembler.
Des composants isolés aux écrans complets : la même grammaire, partout.
01 / Structure
Une grille qui change vraiment.
1 colonne sur mobile, 2 à partir de 768 px, 3 à partir de 1 024 px.
Voir le HTML
<div class="dui-row">
<div class="dui-col" data-md="6" data-lg="4">…</div>
</div>02 / Actions
Boutons et liens
buttonVoir l’API PHP
dui('button', [
'label' => 'Créer un projet',
'href' => '/projets/nouveau',
]);02 / Actions
Menu contextuel
dropdownUne liste de liens native, utilisable au clavier. Échap ferme le menu.
03 / Saisie
Champs et erreurs
field03 / Saisie
Choix et préférences
checkbox / switch04 / Retours
Statuts et progression
badge / progressLe statut arrive sous forme de donnée. Le composant choisit sa présentation.
04 / Retours
Alertes et notification
alert / toastExemple de confirmation dans la page.
Le message reste compréhensible sans sa couleur.
05 / Navigation
Accordéon et dialogue
accordion / dialogQue devient le contenu sans JavaScript ?
L’accordéon fonctionne nativement. Le dialogue fournit son texte directement dans la page.
Un dialogue qui garde le cap.
Le focus reste dans cette fenêtre. Échap la ferme et rend le focus au déclencheur.
06 / Données
Tableau → cartes
Les cinq informations restent présentes sur téléphone, dans une disposition adaptée.
table| Projet | Statut | Équipe | Avancement | Échéance |
|---|---|---|---|---|
Maison AlbaArchitecture & habitat |
En cours | CD Camille Dubois | 72 %
|
|
Le ComptoirCafé de quartier |
En revue | NM Noah Martin | 90 %
|
Voyez les composants travailler ensemble.
Tableau de bord, liste de projets, création et paramètres.