Benvenuto
Tema Jekyll minimale con web component Dev Kit Italia e Bootstrap Italia.
Questo è un tema Jekyll minimale che usa i web component di Dev Kit Italia
(<it-*>) per l’interfaccia, con gli stili di Bootstrap Italia.
PoC - Alpha
Questo tema usa Bootstrap Italia 3.0.0-alpha.5 e Dev Kit Italia 1.0.0-alpha.6,
Componenti e API possono cambiare prima della release stabile. Non usare in produzione senza verificare lo stato upstream.
Accordion — web component
I tag <it-accordion> funzionano direttamente nell’HTML di Jekyll,
senza bisogno di JavaScript custom:
Jekyll genera HTML statico. Dev Kit Italia registra i custom element
tramite elements.js. Il browser li attiva automaticamente
quando il DOM è pronto.
Solo npm run vendor una volta per copiare gli asset
da node_modules nella cartella assets/.
Dopo, Jekyll funziona come sempre.
Sì — gli asset vendored sono file statici. Basta committarli nella repo e GitHub Pages li servirà normalmente.
Alert — BSI HTML classico
I componenti che non hanno un web component <it-*> si usano
con il markup HTML classico di Bootstrap Italia:
Componenti misti
Puoi mischiare web component e HTML classico nella stessa pagina.
Card semplici
Card BSI classica
Questa usa il markup HTML di Bootstrap Italia 3.x.
Card con immagini
Card BSI con immagine
Markup HTML classico Bootstrap Italia 3.x con immagine in rapporto 16x9.
Card miste - layout 3 colonne come lista
-
Card BSI con immagine
Markup HTML classico Bootstrap Italia 3.x con immagine e altezza uniforme.
-
Card web component Web component <it-card>senza immagine, confull-heightper allineamento riga. -
Card BSI senza immagine
Markup HTML classico senza immagine. La classe
it-card-height-fullallinea le card alla stessa altezza. -
Card web component con immagine <it-card>con immagine viaslot="image". -
Card BSI — altra immagine
Seconda card BSI con immagine per completare la griglia a 3 colonne.
-
Card web component — variante Seconda card <it-card>senza immagine. Mescolare BSI e web component nella stessa lista funziona senza configurazioni aggiuntive.