The latest articles on DEV Community by Abid Al Hossain (@abid_alhossain_007). https://dev.to/abid_alhossain_007 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3944881%2F71d73cbc-64a1-4d0d-924f-cae85d09f292.jpg https://dev.to/abid_alhossain_007 en Abid Al Hossain Thu, 21 May 2026 22:05:52 +0000 https://dev.to/abid_alhossain_007/i-built-chronos-a-live-customizable-htmlvite-template-system-1pg9 https://dev.to/abid_alhossain_007/i-built-chronos-a-live-customizable-htmlvite-template-system-1pg9 <p>I built Chronos, a multi-era HTML/Vite template system for creating polished static websites with live visual customization.</p> <p>Most HTML templates ship as one fixed visual style. Chronos is different: it includes 20 distinct layouts, 17 visual eras, 16 curated color palettes, 70+ Google Fonts, a live customizer, Surprise Me theme generation, and single-layout ZIP export.</p> <p>The goal was to make a static template system that feels flexible without requiring WordPress, a backend, jQuery, or Bootstrap.</p> <h2> What Chronos Includes </h2> <ul> <li>20 HTML/Vite layouts</li> <li>17 era-based visual styles</li> <li>16 curated color palettes</li> <li>70+ Google Fonts</li> <li>Live visual customizer</li> <li>Surprise Me theme generation</li> <li>Font and HEX color range exclusions</li> <li>Single-layout ZIP export</li> <li>Source files, README, public assets, and preview images</li> </ul> <h2> Live Customization </h2> <p>Chronos has a shared customizer that works across the layouts. Buyers can switch visual eras, try different color palettes, change fonts, adjust theme colors, and save their preferences per layout.</p> <p>The customizer is built for static sites, so it does not require a backend or CMS.</p> <h2> Surprise Me </h2> <p>Surprise Me generates new color and font combinations instead of cycling through a tiny preset list.</p> <p>The color generation uses structured constraints so the result stays readable and visually coherent. Font randomization uses compatible font groups, so heading, body, accent, and mono fonts are selected as a designed set instead of four unrelated choices.</p> <p>Users can also exclude exact fonts and HEX color ranges from future randomization.</p> <h2> Single-Layout Export </h2> <p>One of the main features is export.</p> <p>A buyer can customize a layout, rename the package, and download a ready-to-run single-layout ZIP. The exported package includes the selected layout, runtime files, active era, colors, fonts, and optional customizer support.</p> <p>This makes Chronos useful both as a full template system and as a generator for smaller static website packages.</p> <h2> Demo </h2> <p> <iframe src="https://www.youtube.com/embed/a60vCcCaN-U"> </iframe> </p> <p>Live demo:<br> <a href="https://code-ster-theme-1-demo.vercel.app/" rel="noopener noreferrer">https://code-ster-theme-1-demo.vercel.app/</a></p> <p>Gumroad:<br> <a href="https://aabidalhossain.gumroad.com/l/chronos-html-template-system" rel="noopener noreferrer">https://aabidalhossain.gumroad.com/l/chronos-html-template-system</a></p> <p>Lemon Squeezy:<br> <a href="https://theme-studio-007.lemonsqueezy.com/checkout/buy/d6f4693c-feff-4999-b831-a8b182d795b7" rel="noopener noreferrer">https://theme-studio-007.lemonsqueezy.com/checkout/buy/d6f4693c-feff-4999-b831-a8b182d795b7</a></p> <h2> Tech Stack </h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Vite</li> <li>Alpine.js</li> <li>Google Fonts</li> <li>CSS custom properties</li> </ul> <p>Chronos is made for developers, designers, freelancers, and agencies who want a flexible static website template system that can be customized visually and exported into smaller packages.</p> <p>If you build static websites or sell templates, I would be interested to hear what feature you would expect in a system like this.</p> webdev javascript css vite