Regione Toscana Design System Design System Servizi

Css

BUNDLE CSS — architettura a layer

Il sistema CSS è strutturato in tre layer indipendenti da caricare in ordine:

<!-- 1. Token (custom properties) -->
<link rel="stylesheet" href="/css/custom-properties.css">

<!-- 2. Core — siti informativi RT -->
<link rel="stylesheet" href="/css/core.css">

<!-- 3. Servizi — solo se si usano componenti 07-widgets / 08-servizi -->
<link rel="stylesheet" href="/css/servizi.css">

<!-- 4. Font — opzionale, font di default Open Sans -->
<link rel="stylesheet" href="/css/font.css">

font.css non è importato dentro core.css/servizi.css — va sempre incluso come <link> a parte. Senza, la libreria funziona comunque (nessun errore, nessun layout rotto) ma il testo non usa Open Sans, cade sul fallback di sistema del browser.

CUSTOM PROPERTIES

Definizioni delle custom-properties CSS del tema: colori, font, tipografia, spaziatura.

  • public/css/custom-properties.css
  • dist/css/custom-properties.css

custom-properties.css - vedi risorsa

BUNDLE CORE

Tailwind base + tutti i componenti 01-design-system, 02-atoms, 03-molecules, 04-organisms.

  • public/css/core.css

core.css - vedi risorsa

BUNDLE SERVIZI

CSS dei componenti 07-widgets e 08-servizi. Prerequisito: core.css caricato prima.

  • public/css/servizi.css

servizi.css - vedi risorsa

BUNDLE MONOLITICO (legacy)

Bundle unico con tutti i componenti. Mantenuto per compatibilità con l’integrazione Liferay esistente. Per nuove integrazioni preferire l’architettura a layer sopra.

  • dist/css/main.css
  • dist/css/main.min.css

main.min.css - vedi risorsa

FONT

Regole @font-face per i font personalizzati.

  • public/css/font.css
  • dist/css/font.css

font.css - vedi risorsa

LIBRERIE

I file CSS delle librerie figurano in dist/css/libraries/{nome-libreria}.