A design system and 82 pages built on it: one stylesheet…
0 reactions
A design system and 82 pages built on it: one stylesheet, no JavaScript, no build step
Live demo: https://alloyhtml.com
I've carried the same CSS from project to project for close to ten years, and I finally finished it.
It's one set of classes, a small set of values, and 82 real pages to prove they hold up. A shop and its seller back office, a blog, e-learning, news, healthcare booking, event ticketing, a job portal and a company site. 54 layouts, 3 themes. If you need a page that isn't there, build it from the same classes. Or ask AI to build it, and tell it to use only these classes. If you don't, every page comes out looking a little different.
The things you'd usually reach for JavaScript for, like dropdowns, dialogs, tooltips and tabs, are plain HTML and CSS here. That matters because there's nothing to install or keep updated, and it fits any backend as it is.
The stylesheet is 23KB gzipped, and dark mode and brand colours only change token values, so the markup stays the same.
I went the extra mile on testing: every page is tested with scripts off at 4 widths in 3 themes, in Chromium, Firefox and WebKit. axe finds no violations. The faster checks also run on every push, and if one fails, the site doesn't deploy.
It's front end only: static pages for your backend to fill in. I've tested current browsers, not older versions, and not a real iPhone yet, so if you're on one, I'd like to know how it looks.
It's $29. I'd rather you spent your evenings on your actual product than on getting dropdowns right, or on burning tokens prompting an AI over and over until the pages finally match.
#technology #programming #dev
Live demo: https://alloyhtml.com
I've carried the same CSS from project to project for close to ten years, and I finally finished it.
It's one set of classes, a small set of values, and 82 real pages to prove they hold up. A shop and its seller back office, a blog, e-learning, news, healthcare booking, event ticketing, a job portal and a company site. 54 layouts, 3 themes. If you need a page that isn't there, build it from the same classes. Or ask AI to build it, and tell it to use only these classes. If you don't, every page comes out looking a little different.
The things you'd usually reach for JavaScript for, like dropdowns, dialogs, tooltips and tabs, are plain HTML and CSS here. That matters because there's nothing to install or keep updated, and it fits any backend as it is.
The stylesheet is 23KB gzipped, and dark mode and brand colours only change token values, so the markup stays the same.
I went the extra mile on testing: every page is tested with scripts off at 4 widths in 3 themes, in Chromium, Firefox and WebKit. axe finds no violations. The faster checks also run on every push, and if one fails, the site doesn't deploy.
It's front end only: static pages for your backend to fill in. I've tested current browsers, not older versions, and not a real iPhone yet, so if you're on one, I'd like to know how it looks.
It's $29. I'd rather you spent your evenings on your actual product than on getting dropdowns right, or on burning tokens prompting an AI over and over until the pages finally match.
#technology #programming #dev
| 4,000 mlx | |
| 9 | |
| 0 |