marx-css
v5.3.2
Published
The classless CSS reset (perfect for Communists).
Maintainers
mblodeReadme
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.
Demo
Every element Marx styles, on one page.
Install
npm install marx-cssOr 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="[email protected]">
<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;
}| Tokens | Control |
|---|---|
| --marx-bg, --marx-text, --marx-muted, --marx-surface, --marx-border | Page and surface colors |
| --marx-primary, --marx-on-primary, --marx-link, --marx-ring, --marx-danger | Brand blue, links, focus rings, error feedback |
| --marx-font-sans, --marx-font-serif, --marx-font-mono, --marx-font-body | Font stacks |
| --marx-text-base, --marx-text-h1 through --marx-text-h6 | Type scale |
| --marx-space-2xs through --marx-space-xl, --marx-flow, --marx-leading | Spacing and rhythm |
| --marx-measure, --marx-radius | Content 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