Stylecheat

Classless/hybrid CSS component library. Docs: https://stylecheat.korte.kim/ | Downloads: https://stylecheat.korte.kim/download

Setup

First time in a project without stylecheat: ask which variant to use:

• class-less (recommended): custom elements and attributes (<crow>, button[primary])
• class-based: traditional classes (.button.primary)
• hybrid: both, mixed freely in one project

Direct Download URLs

• Class-less: https://stylecheat.korte.kim/download/class-less/stylecheat.css
• Class-based: https://stylecheat.korte.kim/download/class-based/stylecheat.css
• Hybrid: https://stylecheat.korte.kim/download/hybrid/stylecheat.css

Each folder also has stylecheat-stable.css, which leaves out ChromeOnlyModifiers.css.

Critical: Turn Stylecheat On

Every build scopes its styles under .stylecheat, [stylecheat] - mark the element that should get Stylecheat, usually <body>:

Both forms work in every build. Without one of them, no component styles will apply.

Core Concepts

Unit System

--unit: 4px - all spacing uses calc(var(--unit) * N)

Conversion rule: Values ≤32px (N ≤ 8) use units. Larger values stay as literal px.

Size Modifiers

sm, md, lg on any element set --unit and --unit-size, which children inherit:

sm never sets text below 12px. lg scales with the parent's font size (values shown at 16px). On buttons, selects and text inputs, sm and lg change --unit only, so the control gets shorter or taller while its text keeps its size.

Display Preference

When choosing between block, grid, or flex, prioritize flex.

Theme Variables

Always use theme variables for dark/light mode support. The full list is in references/theming.md.

Elements, Layout, Typography and Theming

• references/components.md - Every element: buttons, links, badge, card, accordion, carousel, stack, circle, grid, hr, form inputs
• references/layout.md - Crow, flex and size modifiers
• references/typography.md - Heading sizes, spacing
• references/theming.md - Dark/light mode, theme variables, color manipulation

Icons

Icons use attribute syntax:

For icons beyond the built-in ones, download them as icon CSS in the same icon[name] format.

Utilities

Spacing

Gap, margin, padding — g-1 to g-8 (plus g-10, g-12, g-16), p-1 to p-8, m-1 to m-8, plus directional variants (mt-, mb-, ml-, mr-, mx-, my-, px-, py-, pt-, pb-, pl-, pr-). Negative margins take a double dash: mt--4, mx--2:

Flex and size modifiers are in references/layout.md.

Display

Surface

Color

bg-* uses 20% opacity: oklch(from var(--color) l c h / 0.2)

Responsive Modifiers

Breakpoints: sm (≤768px), md (768–1024px), lg (>1024px)

Available responsive modifiers: sm:hide, sm:flex, sm:block, sm:vertical, sm:order-first, sm:sm, sm:md, sm:lg, and every flex, gap, size and spacing modifier — sm:f-1, sm:g-4, sm:w-full, sm:h-0, sm:max-w-96, sm:p-4, sm:px-0, sm:mx--4 (and md:*, lg:* equivalents). sm:vertical switches a <crow> to flex-direction: column on mobile. Carousels switch axis on mobile with sm:x, sm:y or sm:z on <slides>.

Layout

Crow

Flexbox layout component. Default: display: flex; align-items: center; justify-content: center.

Basic Usage

Alignment Attributes

Horizontal

Vertical

Vertical Mode

Add vertical to stack items in a column:

In vertical mode, up/down swap to justify-content and left/right swap to align-items.

Class-based Variant

Common Patterns

Navbar

Space Between

Card Grid

Form Layout

Full-height Sidebar

Flex Utilities

Use f-1 through f-8 to set flex ratios, f-0 for flex: none:

Size Utilities

Sizes run 0–8, then 10, 12, 16, 18, 20, 24, 32, 36, 40, 48, 60, 64, 72, 96, 128 and 160.

Typed w/h attributes multiply by --unit (Chrome 133+):

Responsive Modifiers

Breakpoints: sm (≤768px), md (768–1024px), lg (>1024px)

Available per breakpoint: hide, flex, block, vertical, order-first, sm, md, lg, plus every flex, gap, size and spacing modifier (sm:f-1, sm:g-4, sm:w-full, sm:p-4, sm:mx--4)

Example: sm:vertical switches a <crow> to flex-direction: column on mobile.

Components

Variant is mandatory on button and a. Stylecheat only styles these elements when they carry a variant: primary, secondary, or tertiary on buttons, primary or secondary on links (selector: a:is([primary],[secondary])). A bare <button>/<a href> matches nothing in Stylecheat and falls back to raw browser defaults (a bare link renders blue and underlined, which always reads as a bug) — there is no such thing as a "plain Stylecheat link/button". Always pick a variant; when emphasis is unclear, default to secondary.

Button

Three variants: primary, secondary, tertiary. Default to secondary when adding new buttons.

Icon goes directly inside — no crow wrapper needed (line-height: 1em):

Link

primary/secondary are inline text links (accent vs. muted). For inline links in body text, default to primary. When writing or reviewing markup, treat a variant-less <a> as an error and fix it (custom-styled exceptions like a logo link need their own selector).

A link that should look like a button needs class="button" plus a button variant — that combination is what gives an <a> the button styling:

Badge

Pill-shaped label. Default variant uses --primary. Combine bg-* + text-* for color variants:

Card

Container with border, padding, and theme colors:

Card has built-in padding, so there's no need to add p-*.

Accordion

Expandable content via CSS grid animation. Toggle open attribute to expand:

Icon flip on open — CSS only via :has():

class-based: .accordion, .accordion.open, .accordion-content

Carousel

Full-size scroll container. Wrap in <carousel>, then use <slides> with an axis attribute:

<slide> is the snap target; content goes inside it. Carousel sets container-type: size.

Stack

All children occupy the same grid cell — layered on top of each other:

Circle

Circular element. Size via a size modifier (or the typed w="N" attr, if the project is using ChromeOnlyModifiers.css):

width: 100%; aspect-ratio: 1; border-radius: 100%

HR

Full-width fading divider line:

Gradient from transparent → --border → transparent.

Grid

Background grid pattern for design/layout previews. --grid-size defaults to calc(var(--unit) * 12):

[locked] fixes the grid position; without it the grid scrolls with content. When used on <slides grid> with x/y/z, the grid animates to match scroll position.

Text Input

Styled automatically for all text-like input types (text, email, password, number).

TextArea

Select

Checkbox

Switch

Toggle switch — checkbox with role="switch":

Radio

Range

Theming

Dark/Light Mode

Toggle with .dark class on a parent element (typically html or body):

Theme Variables

All colors use OKLCH format for consistent manipulation:

Semantic Colors

Each color has a -foreground variant for text on that background.

Component-specific

• --card, --card-foreground - Card backgrounds
• --popover, --popover-foreground - Dropdowns, tooltips
• --border - Border color
• --input - Form input backgrounds
• --ring - Focus rings

Sidebar

Separate variables for sidebar theming:

• --sidebar, --sidebar-foreground
• --sidebar-primary, --sidebar-accent
• --sidebar-border, --sidebar-ring

Color Manipulation with OKLCH

Use oklch(from var(...)) for color variants:

Fonts

Radius & Shadows

Customizing Theme

Override variables in your CSS:

Typography

Typography Wrapper

Visual heading styles (size, color, weight) apply globally. Sibling spacing requires a [typography] or .typography wrapper — use the <typography> custom element:

Spacing is automatic inside the wrapper — no manual margin classes needed for prose.

Heading Sizes

All headings: font-weight: 600, color: var(--primary)

Class equivalents: .h1 through .h6

Body Text

Paragraphs: line-height: 1.6, no default margins.

Lists

• padding-inline-start: calc(var(--unit) * 6) (24px)
• Marker color: slightly lighter than foreground

Inline Elements

Sibling-Aware Spacing (inside [typography])

After Elements

Before Headings (Section Breaks)

Horizontal Rules

hr + * and * + hr: calc(var(--unit) * 6) = 24px