VS Code Extension + CLI

Stop writing CSS.
Just write classes.

Combine the first letters of CSS properties to create class names.
display: flex → df, gap: 2rem → gap2rem.
No config, no build, just use it.

Get Started →Install

HTML

<div class="df jcc aic
             gap2rem p2-4rem
             bgFFFFFF br12px">

  <h1 class="fs4-8rem fw900">
    Hello World
  </h1>
</div>

Generated CSS

/* auto-generated */
.df       { display: flex }
.jcc      { justify-content: center }
.aic      { align-items: center }
.gap2rem  { gap: 2rem }
.p2-4rem  { padding: 2.4rem }
.bgFFFFFF { background: #FFF }
.br12px  { border-radius: 12px }

150+

CSS Properties

Responsive Breakpoints

Pseudo-classes

Config / Dependencies

No more CSS files

Handle all styling with HTML classes alone — no separate CSS files needed.

Traditional — 2 files needed

card.css

.card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

Atomic CSS — HTML only

index.html

<div class="df fdc p2-4rem
             bgFFFFFF br12px
             gap16px">

  <!-- No CSS file needed -->
  <!-- Auto-generated on save -->

</div>

One rule, every property

Combine the first letters of CSS property and value to get the class name.
No new vocabulary to memorize.

display: flex→df

justify-content: center→jcc

align-items: flex-start→aifs

flex-direction: column→fdc

gap: 2rem→gap2rem

padding: 24px→p2-4rem

font-size: 1.6rem→fs1-6rem

background: #FF5733→bgFF5733

border-radius: 8px→br8px

width: 100%→w100p

position: absolute→pa

white-space: nowrap→wsn

Learn one rule and you can infer the class name for any CSS property.

Start in 3 steps

No complex setup required.

Install

Install the VS Code extension or CLI. No config files or dependencies needed.

npm i -g atomic-css-cli

Write classes

Combine first letters of CSS properties to write classes. Works in any editor.

class="df jcc aic gap2rem"

CSS auto-generated

Save and atomic.css is auto-generated. VS Code does it instantly, CLI via watch mode.

atomic-css watch src/

Everything you need

A production-ready utility CSS framework.

df jcc aic

Zero Configuration

No build tools, config files, or dependencies. Start instantly with VS Code extension or CLI.

gap37px

Unlimited Values

Not limited to predefined values. Use gap37px, w847px, fs1-3rem — any value you want.

gtcrfit

CSS Grid First

Powerful Grid utilities with repeat, auto-fit, minmax — complex layouts in a single class.

sm-dn

14-level Responsive

14 breakpoints from 420px to 2560px. Just add a prefix for responsive design.

hover-bg

32 Pseudo-classes

hover, focus, disabled, checked and 32 pseudo-classes supported via prefix.

watch

Any Editor

Autocomplete and hover preview in VS Code. CLI watch mode works with any editor.

calc-add

calc Arithmetic

Express calc operations like wcalc100p-200px directly as classes. Complex math made simple.

.atomic.json

Multi-project

Monorepo and multi-project support with per-project .atomic.json configuration.

MCP

AI Native

Official MCP server lets Claude, Cursor, Windsurf and other AI tools fully understand Atomic CSS.

Responsive in one class

Just add a prefix and it applies below that breakpoint.

Responsive Grid

<!-- Desktop 3col → Tablet 2col → Mobile 1col -->
<div class="dg gtcr3-1fr gap2rem
             md-gtcr2-1fr
             sm-gtc1fr">

  <!-- Desktop only -->
  <div class="db sm-dn">...</div>

  <!-- Mobile only -->
  <div class="dn sm-db">...</div>
</div>

us- 420pxes- 640pxsm- 768pxmd- 1024pxrg- 1080pxlg- 1280pxel- 1440pxul- 1600pxsl- 1700pxhl- 1800pxfh- 1920pxkk- 2048pxuh- 2160pxqh- 2560px

Compared to other utility frameworks

Other utility frameworks require learning custom vocabulary.
If you know CSS, Atomic CSS has zero learning curve.

CSS Property	Other Frameworks	Atomic CSS	Difference
display: flex	`d-flex, flex` Common practice	`df`	CSS abbreviation as-is, nothing to memorize
justify-content: center	`justify-center, jc-center` Common practice	`jcc`	3 first letters — intuitive
padding: 2.4rem	`p-3, pa3 (fixed steps)` Most frameworks	`p2-4rem`	Use exact values — no fixed steps
font-size: 18px	`text-lg, f5 (fixed steps)` Most frameworks	`fs18px`	Any unit: px, rem, freely
gap: 37px	`gap-[37px], g-4 (special syntax)` Some frameworks	`gap37px`	No special syntax needed
width: calc(100% - 200px)	`w-[calc(100%-200px)]` Some frameworks	`wcalc100p-200px`	calc in a single class, no brackets
grid: repeat(auto-fit, ...)	`Not supported or config required` Most frameworks	`gtcrfit-minmax28rem-1fr`	Complex Grid without config
background: #FF5733	`bg-danger, bg-[#FF5733]` Common practice	`bgFF5733`	HEX code directly — no limits
hover + opacity	`hover:opacity-80, :hover separate` Some frameworks	`hover-o80`	Pseudo-classes unified via prefix
Hidden below 768px	`d-md-none, hidden-sm` Common practice	`sm-dn`	Below-based — 14 breakpoints

display: flex

Others

d-flex, flex

Common practice

Atomic

df

CSS abbreviation as-is, nothing to memorize

justify-content: center

Others

justify-center, jc-center

Common practice

Atomic

jcc

3 first letters — intuitive

padding: 2.4rem

Others

p-3, pa3 (fixed steps)

Most frameworks

Atomic

p2-4rem

Use exact values — no fixed steps

font-size: 18px

Others

text-lg, f5 (fixed steps)

Most frameworks

Atomic

fs18px

Any unit: px, rem, freely

gap: 37px

Others

gap-[37px], g-4 (special syntax)

Some frameworks

Atomic

gap37px

No special syntax needed

width: calc(100% - 200px)

Others

w-[calc(100%-200px)]

Some frameworks

Atomic

wcalc100p-200px

calc in a single class, no brackets

grid: repeat(auto-fit, ...)

Others

Not supported or config required

Most frameworks

Atomic

gtcrfit-minmax28rem-1fr

Complex Grid without config

background: #FF5733

Others

bg-danger, bg-[#FF5733]

Common practice

Atomic

bgFF5733

HEX code directly — no limits

hover + opacity

Others

hover:opacity-80, :hover separate

Some frameworks

Atomic

hover-o80

Pseudo-classes unified via prefix

Hidden below 768px

Others

d-md-none, hidden-sm

Common practice

Atomic

sm-dn

Below-based — 14 breakpoints

Learning Curve

Know CSS? Use it immediately. No new vocabulary.

1:1

1:1 with CSS

Class names ARE CSS properties. Infer without docs.

Any

Free Values

No fixed steps. Use 37px, 2.4rem — any value as-is.

0kb

Config Files

No build config, no plugins, no setup files.

Any editor, any framework

Works with VS Code extension and CLI.
Notepad, Eclipse, STS, IntelliJ — if it has a terminal, it works.

Terminal

# Install
npm install -g atomic-css-cli

# One-time build
atomic-css build src/ -o assets/css

# Watch for changes — auto-generates CSS on save from any editor
atomic-css watch src/ -o assets/css

Editors — No limits

VS CodeWebStormSTSEclipseIntelliJNotepadVimSublime Text

Run atomic-css watch in your terminal and CSS is auto-generated whenever you save from any editor.

Frameworks — No limits

HTMLVueReactNext.jsNuxtSvelteAngularPHPJSPDjangoRailsAstro

Works anywhere you can write a class attribute.

AI uses it 100%

Official MCP server and AI guide included.
Give the rules to AI and it writes Atomic CSS just like a human.

AI Guide — Feed it the rules

Add the Atomic CSS guide to your project via CLAUDE.md or prompt, and AI learns naming rules, units, responsive, pseudo-classes — everything.

Tell your AI:

"This project uses Atomic CSS. Don't write CSS files or style tags. Handle all styles with Atomic classes."

AI-generated code:

<div class="dg gtcrfit-minmax28rem-1fr
             gap2rem p2-4rem">
  <div class="bg111113 br12px p2rem
               hover-bc6366F1 tall200msease">

MCP Server — 6 AI tools

Connect MCP and AI can look up classes, convert CSS, and validate — all automatically.

// 1. Learn all rules
get_guide()

// 2. Class → CSS lookup
lookup_class("gtcrfit-minmax28rem-1fr")
// → repeat(auto-fit, minmax(28rem, 1fr))

// 3. CSS → Class conversion
css_to_classes("display: flex; gap: 20px;")
// → df gap2rem

// 4. Validation + suggestions
validate_classes("dfflex jc-center")
// ✗ dfflex → suggest: df
// ✗ jc-center → suggest: jcc

get_guide

Teach AI all rules at once

lookup_class

Class name → CSS output lookup

search_by_css

Search classes by CSS property/value

css_to_classes

CSS code → class auto-conversion

validate_classes

Class validation + suggestions

list_classes

List classes by category

Supported AI tools

Claude CodeMCP + CLAUDE.md

CursorMCP + Rules

WindsurfMCP + Rules

ChatGPTGuide prompt

CopilotGuide prompt

Any AIGuide only → OK

How to connect:

// Remote (설치 불필요)
url: "https://atomiccss.dev/mcp"

// Local
command: "npx atomic-css-mcp"

Get started
right now

VS Code or terminal — write your first Atomic class in 30 seconds.

View Docs →VS Code Marketplace

VS Codeext install Drangon-Knight.atomicss

CLInpm install -g atomic-css-cli

No more CSS files

One rule, every property

Start in 3 steps

Install

Write classes

CSS auto-generated

Everything you need

Zero Configuration

Unlimited Values

CSS Grid First

14-level Responsive

32 Pseudo-classes

Any Editor

calc Arithmetic

Multi-project

AI Native

Responsive in one class

Compared to other utility frameworks

Learning Curve

1:1 with CSS

Free Values

Config Files

Any editor, any framework

Editors — No limits

Frameworks — No limits

AI uses it 100%

Supported AI tools

Get startedright now

Get started
right now