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.
Attenzione
Questo tema usa Bootstrap Italia 3.0.0-beta.4 e Dev Kit Italia 1.0.0-beta.0,
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
In questo tema si può usare anche 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.