Marx

August 7, 2026 ยท View on GitHub

Marx

The classless CSS framework that styles plain semantic HTML (perfect for Communists)

Add one stylesheet and the page styles itself: no class names, no build step, no config.

Plain semantic HTML styled by Marx with no classes

Demo

Every element Marx styles, on one page.

View the demo

Install

npm install marx-css

Or skip the install and link https://cdn.jsdelivr.net/npm/marx-css@5/css/marx.min.css directly.

Quickstart

One <link> tag, then plain HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Marx</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/marx-css@5/css/marx.min.css">
</head>
<body>
  <main>
    <h1>Workers of the world</h1>
    <p>Plain HTML, styled automatically.</p>

    <form>
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="karl@marx.de">
      <button type="submit">Subscribe</button>
    </form>
  </main>
</body>
</html>

main is the centered container. With a bundler, import "marx-css" loads the same stylesheet.

Theming

The whole API is the --marx-* custom properties. Override them in your own unlayered CSS and your values win: every Marx rule sits inside :where() in a cascade layer, at zero specificity.

:root {
  --marx-primary: hotpink;
  --marx-radius: 0.75rem;
  --marx-measure: 60rem;
}
TokensControl
--marx-bg, --marx-text, --marx-muted, --marx-surface, --marx-borderPage and surface colors
--marx-primary, --marx-on-primary, --marx-link, --marx-ring, --marx-dangerBrand blue, links, focus rings, error feedback
--marx-font-sans, --marx-font-serif, --marx-font-mono, --marx-font-bodyFont stacks
--marx-text-base, --marx-text-h1 through --marx-text-h6Type scale
--marx-space-2xs through --marx-space-xl, --marx-flow, --marx-leadingSpacing and rhythm
--marx-measure, --marx-radiusContent width and corner radius

Colors are declared with light-dark() under color-scheme: light dark, so dark mode follows the visitor's OS with no toggle and no JavaScript. Force one scheme with :root { color-scheme: light }. src/_tokens.css lists every token and its default.

Browser support

Chrome and Edge 123+, Firefox 120+, Safari 17.5+. Layout uses logical properties, so it works right-to-left, and transitions sit behind prefers-reduced-motion. Browsers without light-dark() keep the static light value of each color, losing the dark scheme but not the page.

License

MIT

Crafted by Matthew Blode