Wireframe
La modalità wireframe è uno strumento di debug visuale integrato in flexocss. Evidenzia la struttura della griglia con contorni colorati, sfondi e etichette informative per individuare i problemi di layout a colpo d'occhio.
Attivazione
Aggiungi id="wireframe" al tag <body> per abilitare la modalità wireframe:
<body id="wireframe">
...
</body>La modalità wireframe è disponibile solo quando $env è impostato su 'dev' (il default). Nelle build di produzione viene esclusa completamente.
Modalità di visualizzazione
Il wireframe supporta diverse modalità di visualizzazione combinabili tramite classi sul tag body:
Modalità outline (default)
Con solo id="wireframe", ogni elemento della griglia ottiene un contorno colorato:
<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— contorno scuro (#1f2640).row— contorno viola (#aa41c8).fl-box— contorno blu (#3f4b80) con sfondo chiaro
Esempio live
Modalità fill
Aggiungi class="fill" per sostituire i contorni con colori di sfondo pieni:
<body id="wireframe" class="fill">
...
</body>Ogni livello di annidamento ottiene un colore distinto:
.container— sfondo scuro (#1f2640).row— sfondo viola (#aa41c8).fl-box— sfondo blu (#7d96ff)
Esempio live
Modalità bordo
Aggiungi class="border-{n}" (da 1 a 5) per aggiungere bordi visibili sopra la modalità fill. Utile per vedere i confini esatti tra elementi adiacenti.
<body id="wireframe" class="fill border-2">
...
</body>Esempio live
Modalità info
Aggiungi class="info" per mostrare etichette con breakpoint e dimensione su ogni colonna:
<body id="wireframe" class="fill border-1 info">
...
</body>Ogni .fl-box mostra un'etichetta come *sm 8/16 che indica il breakpoint corrente e la dimensione della colonna. Le etichette si aggiornano automaticamente al variare del viewport.
Esempio live
Combinare le modalità
Le modalità possono essere combinate liberamente. Ecco le combinazioni più comuni:
<!-- 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">Esempio scaffold
Ecco come appare la modalità wireframe applicata a una struttura di pagina completa: navigazione, hero, features a tre colonne, contenuto a due colonne e footer.
Controllo ambiente
Il modulo wireframe viene compilato condizionalmente in base alla variabile $env:
// Wireframe enabled (default)
@use "@daveaki/flexocss/scss/config" with ($env: 'dev');
// Wireframe disabled for production
@use "@daveaki/flexocss/scss/config" with ($env: 'prod');Quando $env è 'prod', tutto il CSS wireframe viene escluso dall'output, mantenendo pulito il bundle di produzione.
Personalizzazione
Tutti i colori e gli stili del wireframe sono configurabili tramite variabili SCSS:
| Variabile | Default | Ruolo |
|---|---|---|
$wireframeOutlineContainer | #1f2640 | Colore contorno container |
$wireframeOutlineRow | #aa41c8 | Colore contorno row |
$wireframeOutlineBox | #3f4b80 | Colore contorno box |
$wireframeBgColorContainer | #1f2640 | Colore riempimento container |
$wireframeBgColorRow | #aa41c8 | Colore riempimento row |
$wireframeBgColorBox | #7d96ff | Colore riempimento box |
$wireframeBgColorInfo | #1f2640 | Sfondo etichetta info |
$wireframeColorInfo | #e9eeff | Colore testo etichetta info |