Una sorgente di luce dietro una superficie di vetro. CSS e JavaScript, zero dipendenze a runtime, e un solo modo di fare ogni cosa.
Questa vetrina non è un catalogo di componenti: è il sistema messo a costruire siti interi, uno per settore, per vedere cosa regge sotto carico e cosa manca.
Ogni sezione è un sito completo del suo settore, non una pagina di esempio. Si comincia dall’immobiliare perché è il dominio con più stati: liste che filtrano, schede con dati obbligatori, mappe di terzi, moduli a più passi.
Agenzia sulla Riviera dei Fiori. Catalogo con filtri combinati e indirizzo salvabile, schede con classe energetica e calcolo della rata, mappe che non partono senza consenso, valutazione a quattro passi.
Il sito vetrina di un’azienda qualunque: chi siamo, servizi, casi, contatti.
È il banco di prova della tipografia lunga e di .cd-prosa,
che oggi nessun modello mostra davvero.
Catalogo, scheda prodotto, carrello, checkout. Metterà sotto sforzo le faccette di filtro, la quantità e il segmentato — e dirà se il sistema regge un flusso d’acquisto senza aggiungere componenti.
Indice, articolo, autore, archivio. Il posto dove .cd-prosa
deve reggere migliaia di parole con codice, tabelle, citazioni e immagini
che arrivano da un CMS e non si possono annotare.
Il retro dell’agenzia: tabelle ordinabili, selezione multipla, densità compatta,
grafici. È l’unica sezione che userà data-density="compact"
sul serio, su schermate piene di righe.
Novanta righe di markup ripetute in trentuno pagine sono trentuno copie che
divergono alla prima voce aggiunta. Un generatore le compone da
_parti/, e i numeri — «24 immobili»,
«5 sedi» — si contano dai dati invece di scriverli.
La cascata d’ingresso del menu è scritta in CSS come
:nth-last-child(2|3|4): un quinto pallino entrerebbe
insieme al globo, senza ritardo. Per questo le cinque sezioni stanno nel telaio
in alto a sinistra e non nel menu — un vincolo trovato costruendo, non deducendo.
Il telaio della vetrina è freddo, il sito dell’agenzia è oro. Non è un vezzo: è la regola 3 del sistema applicata al caso in cui due prodotti diversi stanno nella stessa schermata.
Niente font da CDN, niente analytics, niente immagini remote. Le mappe sono le uniche risorse di terzi e restano dietro un segnaposto che nomina il terzo finché non arriva il consenso.
elementi.html mostra ogni componente del sistema in una
pagina sola; docs.html spiega le regole a parole e
navpill.html il menu in dettaglio. È il posto dove
guardare prima di reinventare qualcosa che esiste già.