Wireframe
Le mode wireframe est un outil de débogage visuel intégré à flexocss. Il met en évidence la structure de votre grille avec des contours colorés, des arrière-plans et des étiquettes d'information pour repérer les problèmes de layout en un coup d'œil.
Activation
Ajoutez id="wireframe" à votre balise <body> pour activer le mode wireframe :
<body id="wireframe">
...
</body>Le mode wireframe n'est disponible que lorsque $env est défini sur 'dev' (par défaut). En production, il est entièrement exclu.
Modes d'affichage
Le wireframe supporte plusieurs modes d'affichage combinables via des classes sur la balise body :
Mode outline (par défaut)
Avec seulement id="wireframe", chaque élément de grille reçoit un contour coloré :
<body id="wireframe">
<div class="container">
<div class="row">
<div class="fl-box fl-8">...</div>
<div class="fl-box fl-8">...</div>
</div>
</div>
</body>.container— contour sombre (#1f2640).row— contour violet (#aa41c8).fl-box— contour bleu (#3f4b80) avec fond clair
Exemple en direct
Mode fill
Ajoutez class="fill" pour remplacer les contours par des couleurs de fond pleines :
<body id="wireframe" class="fill">
...
</body>Chaque niveau d'imbrication a une couleur distincte :
.container— fond sombre (#1f2640).row— fond violet (#aa41c8).fl-box— fond bleu (#7d96ff)
Exemple en direct
Mode bordure
Ajoutez class="border-{n}" (1 à 5) pour ajouter des bordures visibles par-dessus le mode fill. Utile pour voir les limites exactes entre éléments adjacents.
<body id="wireframe" class="fill border-2">
...
</body>Exemple en direct
Mode info
Ajoutez class="info" pour afficher des étiquettes de breakpoint et de taille sur chaque colonne :
<body id="wireframe" class="fill border-1 info">
...
</body>Chaque .fl-box affiche une étiquette comme *sm 8/16 indiquant le breakpoint actuel et la taille de la colonne. Les étiquettes se mettent à jour automatiquement lorsque le viewport change.
Exemple en direct
Combiner les modes
Les modes peuvent être combinés librement. Voici les combinaisons les plus courantes :
<!-- Outline only -->
<body id="wireframe">
<!-- Filled backgrounds -->
<body id="wireframe" class="fill">
<!-- Filled + 2px borders -->
<body id="wireframe" class="fill border-2">
<!-- Full debug: fill + borders + info labels -->
<body id="wireframe" class="fill border-1 info">Exemple scaffold
Voici comment le mode wireframe se présente appliqué à une structure de page complète : navigation, hero, features en trois colonnes, contenu en deux colonnes et footer.
Contrôle de l'environnement
Le module wireframe est compilé conditionnellement selon la variable $env :
// Wireframe enabled (default)
@use "@daveaki/flexocss/scss/config" with ($env: 'dev');
// Wireframe disabled for production
@use "@daveaki/flexocss/scss/config" with ($env: 'prod');Lorsque $env est 'prod', tout le CSS wireframe est exclu de la sortie, gardant votre bundle de production propre.
Personnalisation
Toutes les couleurs et styles du wireframe sont configurables via des variables SCSS :
| Variable | Défaut | Rôle |
|---|---|---|
$wireframeOutlineContainer | #1f2640 | Couleur contour container |
$wireframeOutlineRow | #aa41c8 | Couleur contour row |
$wireframeOutlineBox | #3f4b80 | Couleur contour box |
$wireframeBgColorContainer | #1f2640 | Couleur remplissage container |
$wireframeBgColorRow | #aa41c8 | Couleur remplissage row |
$wireframeBgColorBox | #7d96ff | Couleur remplissage box |
$wireframeBgColorInfo | #1f2640 | Fond étiquette info |
$wireframeColorInfo | #e9eeff | Couleur texte étiquette info |