Atomizer

Grunt

A simple guide to setup Grunt with PostCSS.

On this page

Install the package

Install grunt-atomizer to configure and execute Atomizer.

npm i grunt-atomizer grunt-contrib-watch -D

Update the config

Then configure your ./Gruntfile.js with the following tasks.

// load the task
grunt.task.loadNpmTasks('grunt-atomizer');
grunt.task.loadNpmTasks('grunt-contrib-watch');

// use grunt-contrib-watch to 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: './dist/atomizer.css'
        }
    ]
}

grunt.registerTask('dev', ['watch:dev']);

Start your build process

Run your build setup as configured in your project’s ./package.json.

npm run dev

Begin using Atomizer

Add the generated PostCSS CSS to your template, then start adding Atomizer classes to your markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/dist/atomizer.css" />
    </head>
    <body>
        <h1 class="Fw(b) Fz(2rem)">Welcome!</h1>
    </body>
</html>