vladocar / Sumi.css

# Sumi.css
A minimalist, classless-first CSS framework. Write plain, semantic HTML and it looks finished. Add a class only when you want something specific.
- **One file, no build step.** 6.7 KB minified and gzipped, with no JavaScript and no dependencies.
- **Classless by default.** Headings, forms, tables, cards, accordions, modals and navigation are styled from the HTML element alone.
- **Light and dark mode.** It follows the visitor's system setting automatically, and `data-theme` lets you force either mode.
- **Easy to theme.** Every color, font, size and radius is a CSS custom property.
- **Easy to override.** Element styles have zero specificity, so your own CSS always wins without `!important`.
- **Accessible.** Visible focus rings, ARIA-driven states (`aria-invalid`, `aria-busy`, `aria-current`) and support for reduced motion.
**Components** · **Tutorial** · **Cheat sheet**
---
## Contents
- Install
- Quick start
- What gets styled
- Classes and attributes
- Layout
- Typography
- Theming
- Dark mode
- Overriding styles
- Browser support
- Files
- License
## Install
**Download.** Copy `sumi.min.css` into your project and link it:
 [code] 
**CDN.** Load it from this repository through jsDelivr. 
 [code] 
Use `sumi.css` (unminified) while you develop. Its comments explain every section.
## Quick start
 [code] 
` `, ` ` and ` ` center themselves when they are direct children of ` `. Keep the `viewport` meta tag for phones, and set `lang` so the browser can hyphenate long-form text correctly.
## What gets styled
| Element | Result |
| --- | --- |
| `h1`–`h6`, `p`, lists, `blockquote`, `code`, `kbd`, `pre`, `mark` | Fluid type scale and consistent vertical spacing |
| ` ` with two ` ` | Navigation bar, left and right groups. Vertical inside ` ` |
| ` `, `[type=submit]`, ` ` | Buttons |
| ` `, ` `, ` `, ` `, ` ` | Full-width fields with focus rings and helper text |
| `type="checkbox"`, `type="radio"`, `type="range"`, `type="file"`, `type="color"` | Custom controls that match the theme |
| ` ` | Clean rules and tabular numbers |
| ` ` | Card. A direct ` ` and ` ` become shaded bands |
| ` ` / ` ` | Accordion with an animated chevron |
| ` ` | Modal with a blurred backdrop |
| ` `, ` ` | Determinate and indeterminate bars |
## Classes and attributes
Everything Sumi responds to beyond plain HTML:
| Class or attribute | Goes on | Effect |
| --- | --- | --- |
| `.container` `.container-fluid` `.narrow` | any block | Centered page width (72rem), full width, reading width (44rem) |
| `.grid` | wrapper | Auto-fitting columns, each at least `--s-grid-min` (14rem) wide |
| `.cols-2` `.cols-3` `.cols-4` `.cols-6` `.cols-12` | `.grid` | Fixed columns from 48rem up, one column below |
| `.span-2` … `.span-9`, `.span-full` | grid child | Spans several columns |
| `.row` `.spread` `.stack` | wrapper | Wrapping flex row, row with space between, vertical stack |
| `.display` `.lead` | heading, paragraph | Hero headline, larger intro paragraph |
| `.prose` `.se