shide.css

A minimal semantic stylesheet for text-first interfaces. No classes needed for most elements — this page demonstrates every element the stylesheet targets, using only native HTML. Very lightweight - 2kb (minified + gzipped).

Part of the issei ecosystem of tools.
SPDX-License-Identifier: ISC.

Typography

Heading scale

h1 — Display heading

h2 — Section heading

h3 — Subsection heading

h4 — Group heading

h5 — Minor heading

h6 — Label heading

Inline elements

Regular paragraph text with bold (strong), italic (em), underline, strikethrough, highlighted text, and small text. Superscript² and subscript H₂O. An abbr element. A citation element. Ctrl+C keyboard input.

System color tokens

All colors are CSS system keywords — no hardcoded hex values. With color-scheme: light dark;, the UI automatically adapts to the user’s light/dark mode.

Prose elements

Paragraphs & links

The default link inherits the system LinkText color. Long prose is capped at 65ch for comfortable reading. overflow-wrap: break-word handles long URLs or an-extremely-long-unbreakable-token-that-would-otherwise-overflow-the-container gracefully.

Blockquote

I don't think I talk differently than anyone else does. Maybe sometimes I don't not say things that other people don't not say, but most other people don't not say the same things I don't. You know what I'm saying?

Lists

• Unordered list item
• Another item
  • Nested item one
  • Nested item two
• Third item

1. Ordered list item
2. Second item
   1. Nested ordered item
   2. Another nested item
3. Third item

Definition list

Canvas

The default background color of HTML content.

CanvasText

Text rendered on top of Canvas.

GrayText

Text for disabled or secondary content.

Horizontal rule

A full-width structural divider, not constrained to 65ch.

Content resumes after the rule.

Details & summary

Code

Inline code

Use color-mix(in srgb, CanvasText 10%, transparent) for muted backgrounds that respect the active color scheme. The font-variant-numeric: tabular-nums property aligns numbers in tables.

Code block

/* shide.css — variable reference */
:root {
  --font-sans: "Seravek", system-ui, -apple-system, sans-serif;
  --font-mono: "Agave", ui-monospace, monospace;
  --gap:            1.5rem;
  --radius:         4px;
  --container-width: 760px;
  --border: color-mix(in srgb, GrayText 40%, transparent);
}

Shell session

$ doas pkg_add firefox
quirks-7.12 signed on 2025-06-01T12:00:00Z
firefox-128.0: ok
$

         “Fury said to a
         mouse, That he
        met in the
       house,
     ‘Let us
      both go to
       law: I will
        prosecute
         you.—Come,
           I’ll take no
           denial; We
          must have a
        trial: For
      really this
     morning I’ve
    nothing
    to do.’
      Said the
      mouse to the
       cur, ‘Such
        a trial,
         dear sir,
            With
          no jury
        or judge,
       would be
      wasting
      our
      breath.’
        ‘I’ll be
        judge, I’ll
         be jury,’
             Said
         cunning
          old Fury:
          ‘I’ll
          try the
            whole
            cause,
              and
           condemn
           you
          to
           death.’”

Keyboard input

Save the file with Ctrl+S, then reload the browser with F5.

Sample output

Terminal returned: Permission denied (publickey).

Tables

Wrap tables in .table-wrap to enable horizontal scrolling on narrow viewports without affecting the page layout.

Minimal table

Forms

All inputs inherit the body font and respect the active color scheme via system color keywords. No custom component library needed.

Progress & output

Build progress: 72%

Result:

72 / 100

Disabled & readonly states

Layout

Four-column grid

The .grid utility divides into four equal columns. Use .col-2 to span two, or .col-full for a full-width item. Collapses to one column below 600px.

Section dividers

Adjacent section elements are separated by a faint --border top rule, as you can see throughout this page.

Media

Image

Images are block-level, max-width 100%, with border-radius: var(--radius).

SVG (inline)

SVG elements are block-level but have no border-radius applied.