Elementi dell’interfaccia

Gli elementi dell’interfaccia (componenti), contenuti nella directory src/components sono costituiti da:

  1. uno (o più) file CSS
  2. uno (o più) file Javascript
  3. 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 costrutti import o require)
  • è incoraggiato l’utilizzo del costrutto PostCSS @extend, ma esclusivamente per estendere le classi di utilità (u-*)