hn.today

Show HN: Sumi.css – CSS Framework

github.com70 points18 comments
Screenshot of Show HN: Sumi.css – CSS Framework

Sumi.css is a minimalist, classless-first CSS framework packaged as a single, dependency-free file (6.7 KB minified and gzipped) that styles semantic HTML with almost no classes. It provides default styling for headings, paragraphs, lists, forms, tables, cards, accordions, modals, navigation and controls; adds accessible focus rings and ARIA-driven states; supports reduced motion; and automatically follows the user's system light/dark preference while allowing data-theme to force a mode. Element styles are authored with zero specificity using :where(), so custom CSS always overrides without !important. No JavaScript is required for basic behavior, though a small snippet is offered to persist a theme toggle.

Customization is driven entirely by CSS custom properties prefixed with s- (colors, fonts, sizes, radii, container widths, spacing, shadows, etc.), enabling easy theming and per-element overrides. Utility classes and attributes exist for layout (.container, .grid, .row, .cols-*, .span-*), typographic helpers (.prose, .display, .lead, .serif), form and component states, tooltips, and button variants. Modern CSS features like :has(), :where(), and color-mix() are used, so full behavior targets current Chrome/Edge/Firefox/Safari releases; older browsers still render readable pages. Repository includes source, minified build, live docs, a tutorial, and an MIT license.

Read on github.com18 comments on Hacker News

Summary generated by AI from the linked article. hn.today is not affiliated with Hacker News or Y Combinator.

More in Web

The daily digest

Today's best Hacker News stories, summarized and screenshotted, one email a day.