@codejen/pack-web
A jen pack for web development: a contrast-checked color palette with light and dark mode, a CUBE CSS starter with fluid type and space, layout compositions, buttons, cards, navigation, badges, stats, tables, lists, form fields, a theme toggle, dialogs, popovers, scroll-driven animations, view transitions, and a manifest and service worker for installable, offline-capable sites – plain HTML and CSS, WCAG AAA by default.
Documentation: https://learosema.github.io/jen/web.html – every generator with its params, the plan it prints, and live previews.
Install
npm install --save-dev @codejen/pack-web # or: npm install -g @codejen/jen @codejen/pack-web
jen web:cube --primary=#5b5bd6 --dir=src/css
jen web:page --name=index --site="My Site"
Credits
The CSS follows CUBE CSS by Andy Bell, Every Layout by Heydon Pickering and Andy Bell, SmolCSS by Stephanie Eckles, Utopia by James Gilyead and Trys Mudford, and Reasonable Colors by Matthew Howell, and reads colors after CSS Color Module Level 4 by the W3C CSS Working Group; web:page follows the HTML boilerplate by Manuel Matuzović and links the icon set from How to Favicon by Andrey Sitnik; web:manifest follows MDN's manifest reference, and web:sw the caching strategies of The Offline Cookbook by Jake Archibald; web:table takes its scroll region from Under-Engineered Responsive Tables by Adrian Roselli, web:field its label, hint and error pattern from the GOV.UK Design System, and web:theme-toggle applies the stored theme before the first paint after Josh W. Comeau. The keyboard patterns follow the ARIA Authoring Practices Guide by the W3C Web Accessibility Initiative, and web:roving detects focusgroup by its property after Jeremy Keith; web:vite runs create-vite by the Vite team, and web:esbuild's project layout follows it.
License
ISC © Lea Rosema