elixforms-web-pages/.agents/skills/css-design-system/SKILL.md

name, description

name

description

elixforms-css-design-system

Strategia CSS e design system del progetto elixForms. Documenta come vengono importati i CSS remoti della piattaforma, il layout a griglia elixForms, le classi CSS specifiche della piattaforma, gli stili SCSS modules nella libreria common, e la struttura visiva delle pagine. Attiva questa skill quando lavori sugli stili, sul layout delle pagine, o devi capire come funzionano le classi CSS del design system elixForms.

CSS e Design System elixForms

Strategia CSS

Il progetto utilizza tre livelli di stili:

1. CSS remoti — Design system dell'Università di Parma, caricati via @import url(...) da console-unipr.elixforms.it
2. SCSS Modules — Stili specifici dei componenti in common/ (es. ElixFormsComponent.module.scss)
3. CSS locali — Stili specifici della pagina (es. App.css, index.css)

CSS Remoti (Design System UniPR/elixForms)

Importati in App.css di ogni pagina:

/* CSS principali del design system */
@import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css');
@import url('https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css');

IMPORTANTE: Questi CSS sono caricati a runtime dal CDN e non vengono bundlati nel JS. La pagina deve avere connessione internet per visualizzarsi correttamente.

Layout della Pagina (Struttura HTML)

Le pagine seguono un layout standard elixForms con classi CSS specifiche:

<div class="container_12" id="pageBody">
  <div class="grid_12">
    <div id="userConsole" class="fe-behaviour">
      
      <!-- HEADER -->
      <header>
        <div class="neutral">
          <div class="grid_12">
            <div class="console_header">
              <div class="leftDiv">
                <h1>elixForms</h1>
                <div class="logo"><!-- Logo UniPR --></div>
              </div>
              <div class="rightDiv">...</div>
            </div>
          </div>
        </div>
      </header>

      <!-- CONTENUTO PRINCIPALE -->
      <div class="grid_12 console_main">
        <div class="inside">
          <div class="fe-module-header-container">
            <h2>Titolo Modulo</h2>
          </div>
          <div class="mainview">
            <div class="container">
              <!-- Contenuto custom della pagina -->
            </div>
          </div>
        </div>
      </div>

      <!-- FOOTER -->
      <footer class="it-footer">
        <div class="it-footer-main">
          <div class="container">
            <div class="subfooter-top">powered by elixForms</div>
            <div class="subfooter-bottom">versione X.XX.X</div>
          </div>
        </div>
      </footer>

    </div>
  </div>
</div>

Classi CSS del Design System

Layout a Griglia

Classe	Scopo
container_12	Container principale a 12 colonne
grid_12	Occupa tutte le 12 colonne
clear	Clearfix

Struttura Pagina

Classe	Scopo
fe-behaviour	Container principale della console utente
console_header	Header della console
console_main	Area contenuto principale
fe-module-header-container	Header del modulo/form
mainview	Container del contenuto del form

Layout Campi Form (ElixFormsElement)

Classe	Scopo
iuFieldContainer	Container di un campo form (label + input)
attrDisplay_left	Colonna sinistra (label)
attrDisplay_right	Colonna destra (input)
attrDisplay_label	Marcatore per la label
attrDisplay_input	Marcatore per l'input
iuLabelContainer	Container interno della label
iuInputContainer	Container interno dell'input
iuTypeString	Tipo di input stringa
iuClearContainer	Clearfix interno

Classi Input Bootstrap Italia Custom

Classe	Componente
isiportalPartialAdminFormFieldSingleLineText	TextField singola riga
isiportalPartialAdminFormFieldMultiLineText	TextField multiriga
isiportalPartialAdminFormFieldRadio	ChoiceGroup radio
isiportalPartialAdminFormFieldSelect	Dropdown select
isiportalPartialAdminCheckboxFieldItem	Checkbox singolo

SCSS Modules (common/)

ElixFormsComponent.module.scss:

.elixFormsComponent {
  overflow: hidden;
  padding: 1em;
}

Nota: Gli stili usano classi Bootstrap Italia e CSS del design system UniPR, senza dipendenze da FluentUI.

Logo e Risorse Esterne

• Logo UniPR: https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png
• Le immagini locali vanno in src/assets/ e importate come moduli ES
• Le immagini vengono copiate nella dist/ durante la build

Note Importanti

1. Il CSS di index.css nella pagina scelta-carriera è attualmente tutto commentato — si usano solo i CSS remoti
2. Il CSS injection plugin (vite-plugin-css-injected-by-js) gestisce solo i CSS locali e SCSS, non gli @import url(...) che restano come riferimenti esterni
3. Per funzionare correttamente, la pagina deployata deve poter raggiungere console-unipr.elixforms.it