This project captures my development pattern for HTML5 themes. It is a spec-driven workflow for building modular, accessible themes using plain CSS and TypeScript, with no framework dependencies. The spec defines how themes are structured, built, tested, and shipped.
What it is
Most theming approaches either lock you into a framework or leave structure entirely up to you. This project sits in between: it defines a specification for how a theme should be organized, how its components relate, and how it moves from development to distribution.
The repo contains two implementations of the spec:
- theme-skeleton - a base template that implements the spec structure with placeholder content
- theme-italo - a concrete theme built on the skeleton
Both use a unified site-header + nav-tree component architecture and follow the 7-1 Sass pattern for CSS organization.
The specification
The spec covers:
- Directory layout and file naming conventions
- Component scoping and namespacing rules
- Build pipeline stages (debug and release)
- Test requirements (unit, lint, smoke, UAT)
- Distribution packaging via
npm pack - Accessibility expectations (WCAG compliance)
Testing
Every theme ships with a full test pipeline:
- Unit tests with Jest
- CSS and JS linting with stylelint and ESLint
- Smoke tests with Playwright
- User Acceptance Testing support
Tech stack
TypeScript, SCSS/Sass, PostCSS, Webpack, Make, Autoconf, Jest, Playwright