Sumiv1.0

A minimalist CSS framework. Write plain, semantic HTML and it looks finished. Add a class only when you want something specific.

Customize tokens
  • 6.7 KB gzipped
  • 0 JavaScript
  • 0 dependencies
  • auto light + dark

Quick start

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="sumi.min.css">
</head>
<body>
  <header><nav>…</nav></header>
  <main>
    <h1>Hello, ink.</h1>
  </main>
  <footer>…</footer>
</body>
</html>

Direct children header, main and footer of body center themselves. Need the same width elsewhere? Use .container.

Typography classless

A fluid type scale grows from a 1.2 ratio on phones to 1.28 on desktop. Leading and letter-spacing tighten as headings get larger, headings sit closer to the text they introduce, and paragraphs, lists and quotes share one spacing rhythm.

Type scale · resize the window to watch it flex

.display

Sumi

h1

Grinding the ink

h2

Choosing an inkstone

h3

Water, stick and stone

h4

Holding the brush upright

h5
Loading the brush
h6
Lesson three
.lead

A short course in the black ink that East Asian painters have used for two thousand years.

p

Grind slowly in small circles. The ink is ready when it coats the stone like thin oil.

small

Workshop materials are included in the course fee.

Long-form text .prose

Lesson three

Grinding the ink

Notes from a beginners’ calligraphy workshop

Sumi is the carbon ink of East Asian brush painting: soot bound with animal glue and pressed into a stick.

You grind the stick against an inkstone with a few drops of water, and the longer you grind, the deeper the black. Thin, watered washes are called usuzumi. A well-kept stick can be decades old, and many painters say old ink flows more smoothly than new.

What you need

  • An inkstick (sumi)
  • An inkstone (suzuri)
    • a flat end for grinding
    • a deep well for holding ink
  • A brush, a water dropper and a paper weight

One stroke, one breath. You cannot go back over a line.

Workshop rule no. 1

Step by step

  1. Put three drops of water on the flat of the stone.
  2. Grind in small circles for about five minutes.
  3. Push the ink into the well and repeat until it is full.

Taking notes digitally? Press Ctrl + S often, mark terms with <dfn>, and write H2O and 103 inline.

Usuzumi
Diluted, grey ink for soft tones and mist.
Nōboku
Dense, glossy black for strong, confident lines.

Buttons .secondary .contrast .outline

<button>, submit inputs and <a role="button"> all share one style. Three color variants, an outline modifier and two sizes.

Link button



Forms classless

Wrap a field in its label or pair it with for. Put a <small> right after a field for helper text, and set aria-invalid to show validation.

The email above is marked invalid with aria-invalid="true". Nice, that username is free.
Level
Bring
Notifications

Tables .striped

Plain tables get clean rules and tabular numbers. Wrap wide tables in .overflow-auto so they scroll on phones.

What Sumi styles without a single class
ElementYou getOptional class
<article>Card with header and footer bands—
<details>Accordion with animated chevron.dropdown
<dialog>Modal with blurred backdrop—
<nav>Horizontal menu, vertical inside <aside>—
<progress>Determinate and indeterminate bars—
<input role="switch">Toggle switch—
TotalEvery common element4 optional modifiers

Cards <article>

An <article> is a card. Its direct <header> and <footer> become full-bleed bands.

Taster

A single two-hour evening session. Ink, brush and paper provided.

Course

Six weekly sessions from basic strokes to a finished hanging scroll.

Plain card

No header or footer needed. Any content works inside an article.

Accordion & dropdown <details>

Native <details> elements give you an accordion. Add class="dropdown" for a menu, and .right to align it to the right edge.

What should I wear?

Something you don't mind getting ink on. Sumi does not wash out of cotton.

Can I bring my own materials?

Yes. Bring your brush and inkstick if you have favorites. We supply everything else.

Is there a beginner group?

Every Tuesday. No experience needed.


Export as…

Feedback .callout progress aria-busy

Callouts for messages, native progress bars, and a spinner on anything with aria-busy="true".

Tip: Grind the ink in small circles for about five minutes.
Booking confirmed. See you on Saturday.
Only two seats left for this date.
Payment failed. Check your card details and try again.

Upload, 62%

Processing

Loading your gallery…

Layout .grid .row .stack

.grid fits as many columns as there is room for. Add .cols-2 to .cols-12 for fixed columns from tablet width up, and .span-* on children. .row and .stack are flex helpers.

.grid (auto-fit)

1
2
3
4

.grid.cols-12 with spans

.span-8
.span-4
.span-3
.span-9

.row.spread

left
right

Theming --s-*

Everything reads from CSS custom properties. Override them on :root, or on any element to theme just that part. Set data-theme="light" or "dark" to force a mode; without it Sumi follows the system setting. Try it live:

Changes apply to this whole page, in both themes.
Your overrides 
:root {
  --s-primary: #2f5bea;
  --s-radius: .5rem;
}

Core tokens

TokenControls
--s-primaryButtons, links, focus rings, checked controls
--s-bgPage and field background
--s-surfaceStripes, code blocks, readonly fields
--s-textBody text
--s-mutedCaptions, helper text, markers
--s-borderRules, table lines, card edges
--s-radiusCorner rounding everywhere
--s-font-sans / --s-font-monoText and code typefaces
--s-container / --s-narrowPage width (72rem) and reading width (44rem)
--s-grid-minMinimum column width for .grid (14rem)