Regione Toscana Design System — Servizi Design System Core

Introduzione

Libreria componenti servizi digitali

Questa istanza Fractal documenta i componenti del perimetro servizi digitali di Regione Toscana: widget e componenti applicativi pensati per essere embeddati su portali e CMS eterogenei.

Cosa contiene

Categoria Percorso Contenuto
Widgets components/07-widgets/ Widget autonomi: widget-box, widget-search, widget-components
Servizi components/08-servizi/ Componenti applicativi: card-smart, accordion-smart, struttura-gerarchica, trascinamento-oggetti, file-upload, page-header

Qualsiasi componente core del Design System (atomi, molecole, organismi) è riusabile nei template Servizi tramite le sue classi CSS — non solo i componenti con dipendenza extends esplicita. Vedi l’elenco completo dei componenti Core documentati nell’istanza Fractal Core.

Come integrare i componenti

I componenti servizi richiedono il caricamento dei CSS in questo ordine:

<link rel="stylesheet" href="https://[cdn-rt]/rtds/{versione}/custom-properties.css">
<link rel="stylesheet" href="https://[cdn-rt]/rtds/{versione}/core.min.css">
<link rel="stylesheet" href="https://[cdn-rt]/rtds/{versione}/servizi.min.css">
<link rel="stylesheet" href="https://[cdn-rt]/rtds/{versione}/font.css"> <!-- opzionale: font di default Open Sans, non minificato -->

La distribuzione via CDN è l’assetto a regime, ancora in fase di definizione con enti e partner. In ambiente di sviluppo, finché il canale non è attivo, includere gli stessi CSS dal pacchetto ZIP con percorso locale al posto dell’URL CDN — vedi Customizzazione del tema.

  • custom-properties.css — token visivi (colori, spaziatura, tipografia)
  • core.min.css — componenti base RT (prerequisito per servizi.css)
  • servizi.min.css — componenti di questa libreria
  • font.css — regole @font-face del font di default (Open Sans), non minificato; indipendente dagli altri tre, senza il testo usa il fallback di sistema

Gli snippet HTML pronti all’uso si trovano nella sezione HTML di ogni componente in questa UI.

Per i dettagli sull’architettura dei bundle CSS, vedi la documentazione CSS bundle.

Come integrare il JS

Alcuni componenti Servizi hanno un file JS proprio (es. popover, table-interactive). Il JS è condiviso con Core: un unico bundle componentsJs.js copre tutti i componenti, oppure si può integrare il file JS del singolo componente. Dettagli in Risorse JS.

Personalizzazione del tema (CMS ospitante)

Ogni componente espone CSS Custom Properties pubbliche che il CMS o sito ospitante può sovrascrivere per adattare il brand. Le variabili disponibili sono documentate nel pannello Notes di ogni componente.