Atomic CSS
Playground
Docs →
Examples
Flexbox centering
Grid cards
Hover and transition
Responsive prefixes
Pseudo-elements
Class names join the first letters of the property and its value. See the naming convention →
HTML
<div class="df jcc aic gap2rem p2-4rem bg6366F1 cFFFFFF br8px fs2rem fw700"> Hello Atomic CSS! </div>
CSS
0 classes
Write Atomic classes in the HTML and CSS will be generated.
Preview