Atomic CSS on Steroids

This article was first published on (02-08-2015).

Update:

We launched "Atomic CSS" last night http://t.co/V73TZFal0p Learn how to use Atomizer and stop bloating style sheets :) #atomiccss @AtomicCSS

— Thierry (@thierrykoblentz) May 2, 2015

This is a quick preview of what we have in store for Atomic CSS. The video at the end of this article shows Atomizer in action - which is a very cool tool built by [@renatoiwa](https://twitter.com/renatoiwa). It also shows a "quick search" page meant to help authors quickly find the Atomic class that matches the property or value they want; that one is built by [@stevenrcarlson](https://twitter.com/stevenrcarlson).

TL;DR: don't write rules in a style sheet, let Atomizer do that for you. Benefits: no maintenance, no bloat.

If you are new to Atomic CSS you may want to read this article on Smashing Magazine, watch this HTML5DevConf video, or check this slide deck presented at FED London.

Atomizer

Atomizer is a node module which parses the files in your project (looking for Atomic classes) and create a atomic.css style sheet.
If you use Atomic classes somewhere it will add those to the style sheet. If you then decide to remove some or change some, it will update the file to reflect what is actually being used in your project.

For example, adding the following snippet in a file:

<div class="M-a W-50%"></div>

Creates the following rules in the Atomic style sheet:

.M-a {
    margin: auto;
}
.W-50\% {
    width: 50%;
}

Changing the width in the snippet

<div class="M-a W-40%"></div>

Changes the rules in the style sheet:

.M-a {
    margin: auto;
}
.W-40\% {
    width: 40%;
}

The config file

Atomizer is smart enough to create many rules on the fly. This is true for classes for which the suffix is either a defined value or a "guessable" one. In the above examples, auto is a defined value while 40% and 50% are "guessable" ones.

Authors can use the config file to create their own classes — to get any styling they want. For example, the following entries in the config file:

'color':{
    custom: [
        {suffix: 'primary', values: 'teal'}
    ]
},
'padding':{
    custom: [
        {suffix: 'gutter', values: '10px'}
    ]
},
'font-family':{
    custom: [
        {suffix: 'roboto', values: 'roboto, sans-serif'}
    ]
},
'box-shadow':{
    custom: [
        {suffix: 'light', values: '0 0 3px #ccc;'}
    ]
}

create these rules:

.C-primary { 
    color: teal; 
}
.P-gutter { 
    padding: 10px; 
}
.Ff-roboto { 
    font-family: roboto, sans-serif; 
}
.Bxsh-light { 
    box-shadow: 0 0 3px #ccc; 
}

The config file is also used to define breakpoints (for RWD). This allows the creation of context-based classes. Classes related to breakpoints look like this:

Lastly, it is in the config file that we map the start/end keywords Atomic CSS uses with left and right (depending on script direction).

Advanced classes

We are introducing new classes/syntax to help authors create common styling without having to write a single rule in their style sheet. For example, adding the following snippet in a file:

<a href="#" class="Td-n:h Fw-b:f"></a>

Creates the following rules in the Atomic style sheet:

.Td-n\:h:hover {
     text-decoration: none;
 }
 .Fw-b\:f:focus {
     font-weight: bold;
 }

Authors can even reference ancestors from the node they are styling, for example:

<div class="container">
     <a href="#" class="container:h/Fw-b"></a>
 </div>

Creates this rule:

.container:hover .container\:h\/Fw-b {
     font-weight: bold;
 }

Which makes the element bold when the user hovers over its container (div.container).

Coming soon!

We are not quite done yet but we should have the tool and the web site ready in a few weeks. In the meantime, check the demo below:

Video