Classless CSS

m.css

Link one stylesheet, write semantic HTML, and every element looks clean and modern. No classes.

Same HTML, with and without m.css

This fragment is plain markup: a heading, a paragraph, a form, and a table, with no classes or attributes for styling. Turn m.css off to see what the browser does on its own.

Create an account

It takes a minute. You can change these details later.

Plan Price
Starter Free
Team $12

Quick start

  1. Link the stylesheet in your page's head:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@abraham/m.css/dist/m.min.css" />

  2. Write semantic HTML. Landmarks, headings, forms, and tables are styled as they are:

    <main>
  <h1>Hello</h1>
  <p>Plain HTML, styled.</p>
  <button>Get started</button>
</main>

  3. Optionally, set a property or two to make it yours:

    :root {
  --m-primary: #2563eb;
  --m-density: 1.1;
}

Or install it with npm install @abraham/m.css and import it through your bundler. Try the properties live on the Theming page, or with the Settings button at the top of any page.

What you get

Typography

Text, headings, lists, quotes, and code.

Forms

Fields, choices, switches, validation, and search.

Content

Cards, tables, media, and details.

Navigation

Sticky bars, side navs, breadcrumbs, and layouts from markup.

Overlays

Dialogs, popovers, and menus.

Feedback

Progress, meters, and loading states.

Theming

Properties, schemes, motion, and contrast.

Layouts

Docs, article, sign-in, pricing, and settings pages to copy as a starting point.

Showcase

Whole pages with their own look, each themed with a few custom properties and no other CSS.

Kitchen sink

Every component example on one page, for a quick review.

Principles