Introduction

Atomic CSS is a utility-first CSS framework that generates class names by combining the first letters of CSS properties and values.

Core Rule: class name = first letters of CSS property + first letters of CSS value

Unlike other frameworks that require memorizing hundreds of arbitrary class names, Atomic CSS follows one consistent pattern. Learn the rule once, and you can infer any class name without documentation.

How It Works

Every CSS property-value pair maps to a predictable class name:

CSS	Class	Rule
display: flex	`df`	d(isplay) + f(lex)
justify-content: center	`jcc`	j(ustify)-c(ontent) + c(enter)
align-items: flex-start	`aifs`	a(lign)-i(tems) + f(lex)-s(tart)
flex-direction: column	`fdc`	f(lex)-d(irection) + c(olumn)
position: absolute	`pa`	p(osition) + a(bsolute)
overflow: hidden	`oh`	o(verflow) + h(idden)
cursor: pointer	`cp`	c(ursor) + p(ointer)
display: none	`dn`	d(isplay) + n(one)

Numeric Values

Properties with numbers append the value and unit directly:

CSS	Class
padding: 16px	`p16px`
gap: 2rem (20px)	`gap2rem`
font-size: 1.4rem (14px)	`fs1-4rem`
width: 50%	`w50p`
border-radius: 8px	`br8px`
margin-top: 2.4rem (24px)	`mt2-4rem`
height: 100vh	`h100vh`
max-width: 80rem (800px)	`maxw80rem`

Quick Example

Responsive card grid — no custom CSS, no configuration:

<div class="dg gtcrfit-minmax28rem-1fr gap2rem p2-4rem">
  <article class="p2rem bgFFFFFF br8px">
    <h2 class="fs2rem fw700 mb8px c1a1a2e">{{ t('exampleCardTitle') }}</h2>
    <p class="fs14px c71717a">{{ t('exampleCardDesc') }}</p>
  </article>
</div>

Core Principles

Zero Configuration

No config files, no CSS build process. Install the VS Code extension and start writing classes immediately.

Predictable Names

If you know CSS, you already know Atomic CSS. Same CSS always generates the same class name.

Grid-First Layout

Powerful CSS Grid utilities like gtcrfit-minmax for effortless responsive layouts.

Built-in Responsive

14 breakpoints from us-(420px) to qh-(2560px).

Full CSS Coverage

Every CSS property supported through the abbreviation system, including transforms, transitions, and pseudo-classes.

VS Code Autocomplete

Autocomplete, hover preview, and CSS output preview right in your editor.

AI Native

Official MCP server registered in MCP Registry. Connect Claude, Cursor, Windsurf and other AI tools with a single URL.

Cross-Platform

Works with React, Vue, Svelte, HTML — anywhere. A pure class-based system with no build tool dependencies.

Infer Any Class

Even properties not in the docs can be inferred using the same rule:

table-layout: fixed → tlf border-collapse: collapse → bcc object-fit: cover → ofc white-space: nowrap → wsn text-overflow: ellipsis → toe backface-visibility: hidden → bfvh

Next Steps

Installation — Set up Atomic CSS in your project
Naming Convention — Master the class naming system
Units — Understand px, rem, % rules
MCP Server — Connect with AI tools