Struttura delle cartelle
TAILWIND
File sorgente Tailwind main.css nella cartella assets/css
File main.css compilato nella cartella public/css
Configurazione Tailwind nel file root tailwind.config.js
NUNJUCK/HTML
File sorgente/spazio di lavoro nella cartella components
Struttura della cartella del componente - esempio cartella component-example:
- component-example.njk: file template - sintassi template nunjucks con Fractal Nunjucks adapter - si può utilizzare anche html semplice senza configurazioni, se necessario
- component-example.css: file di stili (Tailwind)
- component-example.js: eventuale file script
- component-example.config.yml: file di configurazione del componente
- README.md: documentazione del componente - markup, classi, ecc., variabili di configurazione del componente - da aggiornare
PUBLIC
- public/fonts: cartella dei font
- public/css: cartella css
- public/js: cartella js - contiene il file componentsJs.js, che viene compilato dai file js parziali dei componenti
- public/images: cartella immagini
- public/svgs: cartella svg - utilizzata per lo sprite svg
- public/icons.svg: file sprite delle icone
DIST
Distribuzione statica generata nella cartella dist
Struttura della cartella dist:
- /dist/index.html - homepage
- /dist/components/ - componenti statici - presenta più sottocartelle, di cui:
- /dist/components/raw - per ogni componente, presenta gli assets corrispondenti (css e js)
- /dist/components/render - html compilato dei singoli componenti statici
- /dist/css/font.css - file css dei font
- /dist/css/custom-properties.css - file css delle proprietà personalizzate per colori, spaziature, dimensioni dei font e altre personalizzazioni (base per le impostazioni di tailwind.config.js)
- /dist/css/main.css - css compilato dal file sorgente main.css di Tailwind
- /dist/css/main.min.css - css compilato dal file sorgente main.css di Tailwind
- /dist/fonts/: cartella dei font
- /dist/js/components.js - js dei componenti compilato dai file js parziali dei componenti
- /dist/images: cartella immagini
- /dist/icons.svg: file sprite delle icone
RISORSE (IMMAGINI, FONT, SVG…)
Risorse nella cartella public.
Gli svg devono essere aggiunti in public/svgs/{eventuale-sottocartella} prima di eseguire lo script svg-sprite.