Elementi dell’interfaccia¶
Gli elementi dell’interfaccia (componenti), contenuti nella directory src/components
sono costituiti da:
- uno (o più) file CSS
- uno (o più) file Javascript
- uno (o più) snippet HTML di esempio (file *.tmpl)
All’interno della directory di ogni componente deve esser presente almeno una tra queste tre componenti.
Il codice CSS va collocato in un file:
src/components/<nome-componente>/index.css
e verrà automaticamente incluso nella build.
Il codice Javascript va collocato in un file
src/components/<nome-componente>/index.js
e verrà automaticamente incluso nella build.
Puoi includere ulteriori assets (CSS / JS / immagini) contenuti nella directory del componente
utilizzando le direttive require
(nell’index.js) o @import
(nell’ index.css).
Il nome dei file con gli snippet HTML deve iniziare con quello del componente, ad esempio:
src/components/<nome-componente>/<nome-componente>.tmpl
src/components/<nome-componente>/<nome-componente>--2.tmpl
Negli snippet HTML è possibile utilizzare i costrutti del linguaggio di templating nunjucks.
I CSS vengono processati tramite PostCSS (e i relativi plugin presentati nella sezione Tecnologie)
al momento dell’esecuzione di npm run build
(o npm run build:css
).
Nei file Javascript è possibile utilizzare la sintassi ECMAScript 2015.
Regole generali nello sviluppo di nuovi componenti¶
- i componenti devono essere quanto più possibile indipendenti tra loro
- nei CSS si possono utilizzare le classi di utilità (quelle con prefisso
u-*
), ma è sconsigliato incorporare selettori di altri moduli - le regole di nomenclatura sono quelle di SUIT CSS
- i componenti Javascript devono dichiarare tutte le loro dipendenze nell’
index.js
(es. tramite i costruttiimport
orequire
) - è incoraggiato l’utilizzo del costrutto PostCSS
@extend
, ma esclusivamente per estendere le classi di utilità (u-*
)