Installation

Install the Atomizer cli or one of the many supported framework integrations.

On this page

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

Atomizer creates CSS style declarations based on Atomizer 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].

This guide explains various solutions to setup Atomizer in your website. Have an integration we do not cover? Please let us know. If you want to see Atomizer in action, please check out the quick start guide.

Atomizer CLI

Atomizer is an npm package you can install from the npm registry. This package includes a cli program which will generate CSS after parsing your website files. Assuming you have Node.js and npm installed, run the following command in a new or existing project:

npm i atomizer

Next, create a simple html file, index.html and copy the following HTML into it:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/dist/output.css" rel="stylesheet">
    </head>
    <body>
        <h1 class="Fz(30px)">Hello world!</h1>
    </body>
</html>

Run atomizer on the file to generate the CSS (NOTE: the command will not finish because the --watch command is listening for changes):

atomizer -o ./dist/output.css --watch index.html index.html

A new CSS file at ./dist/output.css will be created with the following content:

.Fz(30px) {
  font-size: 30px;
}

Open the index.html in your browser to see your fancy page.

Now, let’s say you decided to change the color of the text to red, add the following class to the h1 tag:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/dist/output.css" rel="stylesheet">
    </head>
    <body>
-       <h1 class="Fz(30px)">Hello world!</h1>
+       <h1 class="Fz(30px) C(#ff0000)">Hello world!</h1>
    </body>
</html>

Then Atomizer would update the style sheet with the following:

.C(#ff0000) {
  color: #ff0000;
}
.Fz(30px) {
  font-size: 30px;
}

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 are the build projects we support:

and here some community supported libraries:

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'
        }
    ]
}

Browser

REPL

For a simple web interface to help you learn about Atomizer and ACSS, try our REPL. Paste some markup or ACSS classes and the REPL 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.

Chrome

Chrome extensions built and maintained by the Atomizer community

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