AtomizerMeet Atomizer!
Atomizer generates a simple static CSS stylesheet from the Atomizer classes you define in your project or predeclared configured styles - it's up to you.
Atomizer is not opinionated, brings no CSS of its own and integrates nicely with your favorite task runner.
Testimonials
We released Atomizer almost 10 years ago and to this day it is used on massive web sites by huge front-end teams. If your project calls for an Atomic CSS library, make sure to give it a try.
Thierry Koblentz Atomizer Co-Creator
Truly pioneering work that deserves an enormous amount of credit — Tailwind works virtually the same way at this point but we stumbled our way here *many* years later.
Adam Wathan Creator of Tailwind CSS
Initially I did not like the concept, I had experience in using Bootstrap UI Library and BEM methodology to manage CSS. It took 5 - 6 months to realize that Atomizer was the best and true CSS framework which solves many problems we were facing. Thierry Koblentz helped me a lot to understand the concept and the reason behind their decisions to build Atomizer.
Jitendra Vyas UX Engineer, VWO
Atomizer is a well-designed library which solves lots CSS management challenges of large scale applications. It helps to promote good html structure, clean and reusable CSS and rapid development process.
Roderick Hsiao Software Engineer, Tinder
I'm convinced @AtomicCSS is a superior product to Tailwind. It representing CSS in an unopinionated matter is just objectively good practice to me, but their compiler virtually allows neat stuff like parent and dynamic conditional selectors. I should have looked into it sooner.
rogueyoshi @rogueyoshi_FGC
Atomic CSS tickles me: https://acss-io.github.io/atomizer. It's a DSL that you write in class names. Atomizer makes the browser understand the subset you use. There's potential to take this much further
Max Heiber @maxheiber
#CSS is painful. Style with class. Meet #Atomizer a tool that helps you create #AtomicCSS rules
Peter Hecker @phecker65
Naming selectors in CSS is hard! Thankfully Atomizer saves you the trouble from writing CSS altogether!
Pankaj Parashar @pankajparashar
Colors
<divclass="Bgc(#0280ae) C(#fff)"> Lorem ipsum</div>hex color.<divclass="Bgc(#0280ae.5) C(#fff)"> Lorem ipsum</div>Variables
Variables are useful for theming but they can also be used to share a common value across style declarations. In this example,brandColor is responsible for setting the text color, background color and border color, whilecolumnWidth dictates the width of the first box and the left offset of its sibling.
module.exports={custom:{brandColor:'#0280ae',columnWidth:'20px',},};<divclass="Pos(a) Bgc(brandColor) W(columnWidth) H(90px)"></div><divclass="C(brandColor) BdB Bdc(brandColor) Mstart(columnWidth) P(10px)"> Lorem ipsum</div>CSS custom properties (variables) can also be referenced as class values. Note that values are not managed by Atomizer, and must be defined independently.
/* external style sheet */:root{--primary-color:#400090}<divclass="C(--primary-color)">Hello World</div>Contextual selectors
Atomizer syntax allows you to style elementsdepending on their ancestors or siblings.
In this example, two identical sets of boxes are styled differently depending on the class applied to their parent element.
<div><divclass="W(50%) foo_W(100%)"></div><divclass="W(50%) foo_W(100%)"></div></div><hr><divclass="foo"><divclass="W(50%) foo_W(100%)"></div><divclass="W(50%) foo_W(100%)"></div></div>Pseudo-classes
Create styles that rely onpseudo-classes.
In this example, the foreground and background color change when users hover over the box.
<divclass="Bgc(#0280ae):h C(#0280ae) C(#fff):h"> Lorem ipsum</div>You can also combine descendant selectors with pseudo-classes. In this example, the nested box is revealed when a user hovers overits parent:
<divclass="foo"><pclass="Op(0) foo:h>Op(1)">Lorem ipsum</p></div>Lorem ipsum
Grids
What do you prefer? Floats? Flexbox? CSS Grids?Atomizer supports it all.
<!-- floats --><divclass="Row"><divclass="Fl(start) W(1/2)"></div><divclass="Fl(start) W(1/2)"></div></div><!-- table --><divclass="D(tb) W(100%)"role="presentation"><divclass="D(tbc)"></div><divclass="D(tbc)"></div></div><!-- flexbox --><divclass="D(f)"><divclass="Flxg(1)"></div><divclass="Flxg(1)"></div></div><!-- grids --><divclass="D(g) Gtc(twoColEvenGrid)"><div></div><div></div></div>Responsive Design
Define your responsivebreakpoints in configuration using standard media query syntax. Then, reference those breakpoints in your Atomizer classes or configuration.
Classes mapped to a single breakpoint
Reference your breakpoints in your classnames using a double-dash suffix (eg,--sm).
In this example, the four boxes are styled asinline-block, with awidth of25% when the viewport is more than700px wide.
module.exports={custom:{breakPoints:{sm:'@media screen and (min-width:700px)',},},};<divclass="D(ib)--sm W(25%)--sm"></div><divclass="D(ib)--sm W(25%)--sm"></div><divclass="D(ib)--sm W(25%)--sm"></div><divclass="D(ib)--sm W(25%)--sm"></div>Classes mapped to multiple breakpoints
Classes may have different values associated with different breakpoints; meaning the same class applies different styles depending on media queries.
module.exports={custom:{rwdFontSize:{xs:'12px',sm:'22px',md:'32px',lg:'42px',},},};<divclass="Fz(rwdFontSize)">Responsive font-size</div>Helpers
Atomizer offers a selection ofhelper classes for common styling, such as "clearfix" to clear floats (Cf),Bd to help withsetting borders,Ell to truncate text with ellipsis,Hidden to visually hide text, and more.
For exampleLineClamp(), which takes two parameters:
<pclass="Fz(12px) Lh(1.5) LineClamp(3,54px)"> Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.</p>Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.
Easily Integratable
Atomizers can be easily integrated into some of the most popular web frameworks. Here are some of the guides you can choose from.