RTDS è il design system di Regione Toscana per siti informativi e servizi digitali: token visivi, componenti UI e pattern di layout condivisi, pensati per essere riusati su prodotti diversi mantenendo coerenza visiva e accessibilità.
Il CSS si distribuisce oggi da pacchetto ZIP con percorso locale. La distribuzione via CDN versionata sarà la modalità principale, ed è ancora in fase di definizione; non sarà però l’unica, perché restano valide sia l’inclusione del CSS già compilato distribuito con la libreria sia la compilazione del proprio CSS nel proprio ambiente (vedi Customizzazione del tema). Il markup si integra copiando gli snippet HTML pronti all’uso di ogni componente, reperibili sia dal pannello HTML di questa UI sia dai file già renderizzati nella build statica (dist/core/components/raw/render, dist/servizi/components/raw/render) - è oggi la modalità principale con cui CMS e applicazioni adottano RTDS. Nunjucks e Tailwind CSS v3 sono gli strumenti con cui la libreria è sviluppata internamente.
La libreria è divisa in tre parti:
| Parte | Cosa contiene |
|---|---|
| Libreria Core | Token e primitivi, componenti generici (atomi, molecole, organismi, templates) e i componenti specifici del Portale Istituzionale RT |
| Libreria Servizi | Widget e componenti applicativi per i servizi digitali (widget-box, widget-search, card-smart, file-upload…), in un’istanza Fractal separata |
| Fondamenta | Le basi di design condivise dalle due librerie: naming conventions, font, immagini, sprite SVG, customizzazione del tema, accessibilità |
A queste si aggiunge Installazione e uso, la sezione condivisa che raccoglie struttura del repository, bundle CSS, comandi di sviluppo e note su Fractal.
Libreria Servizi → Introduzione ai componenti servizi
Fondamenta → Panoramica delle fondazioni di design
Installazione e uso → Struttura delle cartelle
Core e Servizi sono due istanze Fractal indipendenti, con dev server e build distinti:
| Istanza | Dev server | Build statica |
|---|---|---|
| Core | npm run start → localhost:3000 |
dist/core/ |
| Servizi | npm run start:servizi → localhost:3010 |
dist/servizi/ |
Le due istanze condividono la stessa cartella components/ - ogni componente è disponibile in entrambe via @handle.
Il dettaglio di questa architettura (cartelle condivise, dual Fractal, struttura di dist/) è documentato in Struttura delle cartelle, e cosa RTDS ha personalizzato di Fractal in Fractal e personalizzazioni.
CSS - architettura dei bundle e snippet di integrazione
Guida integrazione - come cablare RTDS in un applicativo di servizio