Atomizer tool

Edit on Github

Atomizer is a tool (npm, github) for generating ACSS stylesheets.

Atomizer creates CSS style declarations based on ACSS classes it finds in your project. This means that your style sheets are always up-to-date without the need for writing a single CSS declaration manually [1].

For example, if your project was a single page containing:

<div class="D(b) Va(t) Fz(20px)">Hello World!</div>

Atomizer would create a style sheet containing these rules:

.D(b) {
    display: block;
}
.Va(t) {
    vertical-align: top;
}
.Fz(20px) {
    font-size: 20px;
}

For the sake of readability, CSS classes on this page do not include the escape character (\) where it should be needed.

If, for example, you decided to update the classes like below:

<div class="Va(t) Fz(18px)">Hello World!</div>

Then Atomizer would update the style sheet (removing D(b) and replacing Fz(20px) with Fz(18px)) to match exactly what is being used inside the project:

.Va(t) {
    vertical-align: top;
}
.Fz(18px) {
    font-size: 18px;
}

Integrations #

Build #

So how do you integrate Atomizer into your project? You can use Grunt, Gulp, WebPack, Make, Graddle, or any other task runner/build system you'd like.

Here's a few open source projects we know about:

If you create your own, please let us know!

Example: Grunt

If you're using the Grunt task runner, you can use grunt-atomizer to configure and execute Atomizer:

// use grunt-contrib-watch for changes and run tasks
watch: {
    dev: {
        options: {
            livereload: true
        },
        files: [
            './examples/**/*.html'
        ],
        tasks: ['atomizer']
    }
},
atomizer: {
    options: {
        // set a context to increase specificity
        namespace: '#atomic',
        // pass a base config file
        configFile: './config/manual-config.js',
        // augment classNames in the base config file
        config: {
            classNames: ['D(b)']
        }
        // the final config file used by the tool will be written
        // in the following file:
        configOutput: 'tmp/config.json',
    },
    files: [
        {
            // parse your project's html files to automatically add
            // found ACSS classes to your config
            src: ['./src/*.html'],
            // generate the css in the file below
            dest: './atomic.css'
        }
    ]
}

Web Tools #

For a simple web interface to help you learn about Atomizer and ACSS, check out ATOMIZER WEB, a tool built by Pankaj Parashar. Paste some markup or ACSS classes and ATOMIZER WEB will show you the rendered CSS. The tool also gives you access to the configuration where you can set your own break-points, variables, and more.

  1. This is true for non-custom classes [↩].