Demo

Every element Marx styles, on one page.

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;
}

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