Il CSS del Design System è distribuito in file indipendenti da caricare in sequenza. Ogni layer ha una responsabilità precisa e può essere aggiornato indipendentemente dagli altri.
custom-properties.css ← token layer (colori, spaziatura, tipografia)
↓
core.css ← componenti siti informativi RT
↓
servizi.css ← componenti widget / servizi digitali [opzionale]
font.css ← @font-face del font di default (Open Sans) [indipendente, vedi sotto]custom-properties.cssDefinisce tutte le CSS Custom Properties del Design System: colori primitivi e semantici, scale di spaziatura, font, border-radius, shadow.
È l’unica fonte di verità per i token. Non va duplicato o ridefinito altrove.
:root {
--color-primary: #AD1016;
--color-neutral-50: #F9FAFB;
--spacing-4: 1rem;
/* … */
}core.cssContiene i componenti per i siti informativi Regione Toscana:
| Layer | Contenuto |
|---|---|
| Tailwind base | Reset, box-sizing, utility classes (prefisso rtds-) |
01-design-system/ |
Stili tipografici base, griglie |
02-atoms/ |
Button, icon, input, select, chip, badge… |
03-molecules/ |
Card, accordion, input-field, select-field… |
04-organisms/ |
Header, footer, carousel, hero… |
09-others/banner-onboarding |
Banner cookie/onboarding |
Prerequisito: custom-properties.css caricato prima.
servizi.cssContiene i componenti per i servizi digitali e widget embeddati:
| Layer | Contenuto |
|---|---|
07-widgets/ |
widget-box, widget-search, widget-components… |
08-servizi/ |
card-smart, accordion-smart, struttura-gerarchica, trascinamento-oggetti, file, upload, page-header-base-smart… |
CSS vanilla puro — gli @apply Tailwind sono già stati risolti a build time. Nessuna dipendenza da Tailwind a runtime.
Prerequisiti: custom-properties.css + core.css caricati prima.
font.cssContiene le regole @font-face del font di default del DS (Open Sans, più pesi/varianti). Non è importato dentro core.css/servizi.css — va sempre incluso come <link> a parte, indipendentemente dagli altri tre layer. Senza font.css la libreria funziona comunque (nessun errore, nessun layout rotto): il testo usa semplicemente il fallback di sistema del browser invece di Open Sans. Dettagli sui font in Font.
Gli snippet seguenti mostrano l’assetto a regime, con i CSS serviti da CDN — modello ancora in fase di definizione con enti e partner. In ambiente di sviluppo, finché il canale CDN non è attivo, sostituire gli URL con i percorsi locali dei file copiati dal pacchetto ZIP (vedi Customizzazione del tema).
<head>
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/custom-properties.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/core.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/font.css"> <!-- opzionale: font di default Open Sans -->
</head><head>
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/custom-properties.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/core.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/servizi.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/font.css"> <!-- opzionale: font di default Open Sans -->
</head>Se il CMS ospitante ha già un suo CSS di base e si vogliono embeddare solo i widget servizi, è comunque necessario caricare core.css perché servizi.css dipende dalle sue classi utility e dagli stili degli atom/molecule (es. rtds-btn, rtds-chip) che i widget usano internamente.
<!-- Stili del CMS ospitante (già presenti) -->
<!-- Aggiungere solo: -->
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/custom-properties.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/core.css">
<link rel="stylesheet" href="https://cdn.example.com/rtds/css/servizi.css">Il prefisso rtds- su tutte le classi Tailwind riduce al minimo i conflitti con il CSS del sito ospitante.
Alcuni componenti in 08-servizi/ usano un pattern a tre livelli di fallback per le proprietà CSS variabili, per permettere al CMS ospitante di fare override del brand senza modificare il DS. Non è (ancora) un pattern applicato in modo uniforme: è la convenzione richiesta per ogni nuovo componente 08-servizi/, ma diversi componenti esistenti non la implementano su tutte le proprietà, e i 07-widgets/ attuali (widget-box, widget-nav, widget-search) non la usano.
/* Esempio da card-smart.css */
--_card-smart-bg: var(
--card-smart-bg, /* Tier 1: override del CMS ospitante */
var(--color-background-01, /* Tier 2: token semantico RTDS */
var(--color-neutral-50)) /* Tier 3: literal fallback sempre disponibile */
);| Tier | Variabile | Chi la imposta |
|---|---|---|
| 1 | --card-smart-bg |
Il CMS / sito ospitante (brand override) |
| 2 | --color-background-01 |
Il Design System (token semantico) |
| 3 | var(--color-neutral-50) |
Literal hardcoded nel componente |
Grazie al Tier 3, dove il pattern è applicato i componenti funzionano correttamente anche se né custom-properties.css né l’override del CMS sono presenti.
Copertura attuale in 08-servizi/: pattern applicato (su tutte o parte delle proprietà) in alert, card-smart, popover, progress-indicator, steps, toast, trascinamento-oggetti; assente in file, table-interactive, upload.
Prima di fare affidamento sulle variabili di override di un componente, verificare quali sono effettivamente esposte nella sezione Custom Properties del README del componente — non darle per scontate in base a questa pagina.
| Ambiente | URL dev | Contenuto |
|---|---|---|
| Fractal Core | http://localhost:3000 | Tutti i componenti 01–09 |
| Fractal Servizi | http://localhost:3010 | Focus 07-widgets + 08-servizi (stessa libreria sorgente) |
Entrambe le istanze leggono la stessa cartella components/ e gli stessi file CSS in public/css/.
# Solo Fractal Core (siti informativi)
npm run start
# Solo Fractal Servizi (widget / applicativi)
npm run start:servizi
# Entrambi insieme (un solo comando)
npm run start:all # → localhost:3000 + localhost:3010start:all avvia entrambi i server Fractal condividendo un’unica istanza di webpack watch e di css-watch (evita di duplicare i due processi, che leggono e scrivono gli stessi file indipendentemente da quale istanza Fractal li ha avviati).
npm run build # → dist/core/ + dist/servizi/ (Core + Servizi, build completa)
npm run build:servizi # → dist/servizi/ (solo Servizi, build parziale senza clean/minify/portal)