CSS is painful

CSS is a critical piece of the frontend toolkit, but it's hard to manage, especially in large projects. Styles are written in a global scope, which is narrowed through complex selectors. Specificity issues, redundancy, bloat, and maintenance can become a nightmare. And modular, component-based projects only add to the complexity. Atomizer enables you to style directly in your components, avoiding the headache of writing and managing stylesheets.

Style with class

Most approaches to styling inside components rely on inline styles, which are limiting. Atomic CSS, like inline styles, offers single-purpose units of style, but applied via classes. This allows for the use of handy things such as media queries, contextual styling and pseudo-classes. The lower specificity of classes also allows for easier overrides. And the short, predictable classnames are highly reusable and compress well.

Meet Atomizer

Atomizer is a utility for modern web sites. Atomizer generates an Atomic stylesheet from the ACSS classes you're actually using in your project (no unused styles!), or predeclare styles in configuration - it's up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favorite task runner.

Colors

Colors are set using hexadecimal values. Alpha transparency is created by appending the opacity value to the hex color. 
<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>
Lorem ipsum

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, while columnWidth dictates the width of the first box and the left offset of its sibling.

// config object
'custom': {
    'brandColor': '#0280ae',
    'columnWidth': '20px'
}
<div class="Pos(a) Bgc(brandColor) W(columnWidth) H(90px)"></div>
<div class="C(brandColor) BdB Bdc(brandColor) Mstart(columnWidth) P(10px)">
     Lorem ipsum
</div>
Lorem ipsum

Contextual selectors

Atomizer syntax allows you to style elements depending 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>
   <div class="Bgc(#0280ae.5) H(90px) IbBox W(50%) foo_W(100%)"></div>
   <div class="Bgc(#0280ae) H(90px) IbBox W(50%) foo_W(100%)"></div>
</div>
<hr>
<div class="foo">
   <div class="Bgc(#0280ae.5) H(90px) IbBox W(50%) foo_W(100%)"></div>
   <div class="Bgc(#0280ae) H(90px) IbBox W(50%) foo_W(100%)"></div>
</div>

Pseudo-classes

Create styles that rely on pseudo-classes.

In this example, the foreground and background color change when users hover over the box.

<div class="Bd Bgc(#0280ae):h C(#0280ae) C(#fff):h P(20px)">
    Lorem ipsum
</div>
Lorem ipsum

You can also combine descendant selectors with pseudo-classes. In this example, the nested box is revealed when a user hovers over its parent:

<div class="foo Bd C(#0280ae) Ta(c)">
    <p class="Op(0) foo:h>Op(1)">Lorem ipsum</p>
</div>

Lorem ipsum

Grids

What do you prefer? Floats? Flexbox? Inline-block? CSS table? Atomizer supports it all, and you can use any measurement style you want (fraction, percentage, em, rem, px, etc.)

<div class="Row">
    <div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
    <div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
    <div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
   <div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div>
   <div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
    <div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
    <div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>

Responsive Web Design (RWD)

Define your responsive "breakpoints" 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 as inline-block, with a width of 25% when the viewport is more than 700px wide.

'breakPoints': {
    'sm': '@media screen and (min-width:700px)'
}
   <div class="Bgc(#0280ae.5) H(90px) D(ib)--sm W(25%)--sm"></div>
   <div class="Bgc(#0280ae) H(90px) D(ib)--sm W(25%)--sm"></div>
   <div class="Bgc(#0280ae.5) H(90px) D(ib)--sm W(25%)--sm"></div>
   <div class="Bgc(#0280ae) H(90px) 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.

'RWD-fontSize': {
    'xs': '12px',
    'sm': '22px',
    'md': '32px',
    'lg': '42px'
}
<div class="Fz(RWD-fontSize)">Responsive font-size</div>
Responsive font-size

Helpers

Atomizer offers a selection of helper classes for common styling, such as "clearfix" to clear floats (Cf), Bd to help with setting borders, Ell to truncate text with ellipsis, Hidden to visually hide text, and more.

For example LineClamp(), which takes two parameters:

<p class="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.

Get Started