FreeOpen Contribution

Atomic CSS

Write Classes, Not CSS — Zero Config, Total Freedom

Auto-generate CSS rules from HTML class names. One naming rule covers every CSS property — no config, no predefined values, zero dependencies.

Install VS Code Extension How It Works

v1.0.25

Version

Free Forever

License

3-in-1

Tools

How It Works

Write class names in HTML. CSS is generated automatically.

Examples

/* One rule: first letters of property + value */

display: flex            → df
justify-content: center  → jcc
padding: 16px            → p16px
font-size: 1.5rem        → fs1-5rem
width: 50%               → w50p
gap: 2rem                → gap2rem
background-color: #F00   → bgF00
border: 1px solid #DDD   → b1pxsolidDDDDDD

/* Responsive → prefix-class */
sm-dn                    → 768px: display: none
md-gtcr2-1fr             → 1024px: grid 2-col

/* Pseudo → prefix-class */
hover-bg6C63FF           → :hover bg: #6C63FF
focus-bc6C63FF           → :focus border: #6C63FF

HTML

<!-- Responsive card layout -->
<div class="dg gtcr3-1fr sm-gtc1fr gap2rem
            p2-4rem maxw120rem mxa">
  <div class="bgFFFFFF br12px p2rem
              b1pxsolidE5E7EB
              hover-bc6C63FF tall200msease">
    <h2 class="c111827 fs2rem fw700 mb8px">
      Title
    </h2>
    <p class="c6B7280 fs1-4rem lh2-2rem">
      Description
    </p>
  </div>
</div>

Generated CSS

.dg { display: grid; }
.gtcr3-1fr {
  grid-template-columns: repeat(3, 1fr);
}
.gap2rem { gap: 2rem; }
.bgFFFFFF { background-color: #FFFFFF; }
.br12px { border-radius: 12px; }
.hover-bc6C63FF:hover {
  border-color: #6C63FF;
}
.tall200msease {
  transition: all 200ms ease;
}

@media (max-width: 768px) {
  .sm-gtc1fr {
    grid-template-columns: 1fr;
  }
}

By the Numbers

∞

CSS Properties

Any value works

Breakpoints

420px to 2560px

Pseudo-Classes

hover, focus, etc.

Dependencies

Zero deps

300+

Fixed Classes

Autocomplete ready

Tools

Extension, CLI, MCP

Rule to Learn

First letters

Price

Free forever

What Makes It Different

Built on a fundamentally different philosophy

∞

Unlimited Values

Any value works. gap37px, w847px, fs1-3rem — no predefined constraints.

Zero Config

No config files, no build plugins, no PostCSS. Install and write classes.

One Rule

CSS property first-letters = class name. Learn once, use everywhere.

Three Tools, One System

VS Code extension, CLI, and AI server — all free

💻

VS Code Extension

IntelliSense autocomplete, hover preview, diagnostics, color picker, class search, CSS-to-class conversion.

VS Code Marketplace →

🔧

CLI

Build and watch modes for CI/CD. Scan project files and generate atomic.min.css automatically.

npm Package →

🤖

MCP Server

AI-native integration. 6 tools for Claude Code, Cursor, and Windsurf. Validate, lookup, and convert classes.

MCP Endpoint →

VS Code

# Search "Atomic CSS" in VS Code Extensions
# or install via CLI:
code --install-extension Drangon-Knight.atomicss

CLI (npm)

# Global install
npm install -g atomic-css-cli

# Build CSS
atomic-css build ./src

# Watch mode
atomic-css watch ./src

CSS Should Be a Utility, Not a Burden

We believe CSS tooling should be free and accessible to every developer. Atomic CSS is our contribution to standardizing utility-first CSS for the global community.

🌏

Open Access

Free VS Code extension, free CLI, free MCP server. No paywalls, no premium tiers.

⚡

Zero Friction

No build step required. No config files to learn. Write a class, get CSS instantly.

🤝

Community First

A standard naming convention anyone can adopt. Reducing CSS fragmentation worldwide.

License

Atomic CSS is free to use for all developers. It is proprietary software — free to use, but not open source.

✓

Allowed

Use in any project — personal, commercial, enterprise. No limits, no attribution required.

✗

Restricted

No copying, modifying, or redistributing the source code. No derivative works.

FAQ

Is Atomic CSS open source?

No. It is proprietary software distributed for free. You can use it in any project without limits, but you cannot copy, modify, or redistribute the source code.

How is this different from other utility CSS tools?

Atomic CSS uses CSS property first-letters as class names (display:flex = df), requires zero config, allows any arbitrary value, and has zero dependencies. No custom vocabulary to memorize.

Do I need a build step?

Not with the VS Code extension — CSS is generated on save. The CLI is available for CI/CD pipelines and non-VS Code workflows.

What frameworks are supported?

Any framework that uses HTML class attributes — Vue, React, Nuxt, Next.js, Svelte, PHP, plain HTML. Configure file extensions in .atomic.json.

Why is it free?

We believe CSS tooling should be a utility, not a product. Atomic CSS is our contribution to reducing CSS fragmentation and standardizing utility-first development globally.

Start Writing Classes, Not CSS

Install the VS Code extension or CLI and start building. It's free — no signup, no key, no limits.

Install VS Code Extension Install CLI