165 lines
6.2 KiB
Markdown
165 lines
6.2 KiB
Markdown
---
|
|
name: elixforms-css-design-system
|
|
description: >
|
|
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
|
|
/* 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:
|
|
|
|
```html
|
|
<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`:
|
|
```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`
|