https://github.com/italia/design-jekyll-devkit-theme
Jekyll theme skeleton theme using Dev Kit Italia web components (alpha)
https://github.com/italia/design-jekyll-devkit-theme
designsystem italia jekyll webcomponents
Last synced: 3 months ago
JSON representation
Jekyll theme skeleton theme using Dev Kit Italia web components (alpha)
- Host: GitHub
- URL: https://github.com/italia/design-jekyll-devkit-theme
- Owner: italia
- License: bsd-3-clause
- Created: 2026-03-16T16:42:47.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-01T14:44:07.000Z (3 months ago)
- Last Synced: 2026-04-01T16:29:23.192Z (3 months ago)
- Topics: designsystem, italia, jekyll, webcomponents
- Language: HTML
- Homepage: https://italia.github.io/design-jekyll-devkit-theme/
- Size: 49.8 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Authors: AUTHORS
Awesome Lists containing this project
README
# Jekyll + Dev Kit Italia — Skeleton Theme
> ⚠️ **Proof of concept** — Dev Kit Italia e Bootstrap Italia v3 sono in alpha.
> Non usare in produzione senza verificare lo stato upstream. Componenti e API possono cambiare prima della release stabile.
Tema Jekyll minimale che usa i **web component di Dev Kit Italia** (``) con gli stili di **Bootstrap Italia**.
## Come funziona
```
Jekyll (static HTML) + Dev Kit Italia (web components via ES modules)
```
1. `npm install` scarica `@italia/dev-kit-italia` da npm
2. `npm run vendor` copia `dist/` → `assets/vendor/devkit/`
3. Il layout Jekyll carica CSS + JS come file statici
4. I tag ``, ``, ecc. funzionano direttamente in Markdown/HTML
**Nessun bundler, nessun build JS.** Solo file statici serviti da Jekyll.
**Nota bene: In questo primo PoC carica CSS + JS anche di Bootstrap Italia.**
## Setup
```bash
# Prerequisiti: Node.js ≥ 22, Ruby, Bundler
npm run setup # npm install + vendor assets
bundle install # install Jekyll gems
bundle exec jekyll serve --livereload
```
Oppure tutto in un comando:
```bash
npm run dev
```
## Struttura
```
├── _config.yml # Config Jekyll
├── _layouts/
│ ├── default.html # Layout base — carica CSS/JS Dev Kit
│ ├── page.html
│ └── post.html
├── _includes/
│ ├── header.html # Header PA semplificato (it-icon)
│ └── footer.html # Footer PA semplificato (it-icon)
├── assets/
│ ├── vendor/devkit/ # ← generato da `npm run vendor`
│ │ ├── fonts.css
│ │ ├── styles.css
│ │ ├── elements.js
│ │ └── ...
│ ├── vendor/bsi/ # ← generato da `npm run vendor`
│ │ ├── bootstrap-italia.bundle.min.js
│ │ └── ...
│ ├── css/site.css # Override custom (quasi vuoto)
│ └── js/site.js # JS custom (vuoto)
├── index.md # Homepage con esempi
├── componenti.md # Pagina componenti
├── _posts/ # Blog posts
├── package.json # Dev Kit Italia dependency
├── scripts/vendor.mjs # Script di vendoring
└── Gemfile # Jekyll gems
```
## Come usare i web component nei contenuti
In qualsiasi file Markdown o HTML di Jekyll:
```html
Titolo sezione
Contenuto con **Markdown** che Jekyll ha già processato.
```
I tag `` passano invariati attraverso Kramdown e vengono
attivati dal browser quando `elements.js` si carica.
## Cosa funziona e cosa no
**Funziona:**
- Web component (``, ``, ``, ...)
- Markup BSI classico (card, alert, grid, typography, ...)
- Mix di web component e HTML classico nella stessa pagina
- Post e pagine Markdown con tag `` inline
**Limitazioni:**
- SSR: i web component renderizzano client-side (FOUC possibile)
- Non tutti i ~55 componenti BSI hanno un equivalente ``
- Dev Kit Italia è alpha — breaking changes possibili
- `elements.js` carica TUTTI i componenti (no tree-shaking in questo PoC)
- GitHub Pages: servire `assets/vendor/` richiede di committare i file