The Runtime
Logic Engine.
Skip the build step. AtomAttr watches your DOM and compiles utility attributes into optimized CSS instantly in the browser. Ideal for rapid prototyping, legacy apps, and static sites.
How It Works
AtomAttr relies on a lightweight JavaScript engine that runs in the client browser, ensuring you only generate what you use.
Scan DOM
The engine uses a MutationObserver to watch the DOM for elements with special
attributes like flex or p="4".
Compile CSS
It parses attributes into atomic CSS rules and injects them into a managed stylesheet in the document head.
Apply Styles
The browser paints the styles instantly. No build step, no purging, no massive CSS files to download.
Packed with Power
Everything you need to build modern UIs, right in the HTML.
Zero Configuration
No Webpack, no PostCSS, no CLI. Just include the script and start writing code. Ideal for PHP, Rails, or static sites.
Dark Mode
Built-in theming engine. Toggle classes effortlessly.
Responsive
Mobile-first syntax. Use `md-` or `lg-` prefixes to adapt layouts.
lg-gap-8
Layouts
Full Flexbox and Grid support with gaps and alignment.
Effects
Shadows, opacity, blur, and transitions out of the box.
Start Building
Explore the core concepts.