Sumi.css is a minimalist, classless CSS framework designed to make plain, semantic HTML look clean and finished out of the box without requiring extensive utility classes.

The main features and capabilities of Sumi.css include:

• Ultra-Lightweight Footprint: Weighs only 6.7 KB gzipped with zero JavaScript and zero external dependencies.

• Automatic Light & Dark Mode: Automatically adapts to system light and dark color preferences out of the box, with support for forcing themes via data-theme="light" or dark.

• Classless Typography & Layout: Implements a fluid type scale that grows from a 1.2 ratio on mobile to 1.28 on desktop. Direct <header>, <main>, and <footer> children of <body> automatically center themselves.

• Semantic Component Styling: Provides built-in styles for semantic HTML elements including cards (<article>), accordions and dropdown menus (<details>), native modals (<dialog>), callout banners (.callout), buttons, forms, and striped tables (.striped).

• Grid & Flexbox Layout Helpers: Features an auto-fit layout grid (.grid), fixed column grids (.cols-2 through .cols-12 with .span-* modifiers), horizontal rows (.row), and vertical stacks (.stack).

• CSS Custom Property Customization: Driven entirely by CSS variables prefixed with --s-* (such as --s-primary, --s-bg, --s-surface, and --s-radius), making it simple to theme on :root or per component.

• Open Source: Distributed under the MIT License and inspired by frameworks like Basic.css, Pico.css, MVP.css, and Pure.