Atomizer

Gulp

A simple guide to setup Atomizer with Gulp.

On this page

Install the package

gulp-atomizer is a Gulp plugin for Atomizer. Install the package in your project first:

npm i gulp-atomizer -D

Update the config

Add the Atomizer plugin to your Gulp config.

import gulp from 'gulp';
import acss from 'gulp-atomizer';

gulp.task('acss', function() {
    return gulp.src('./*.html')
        .pipe(acss())
        .pipe(gulp.dest('dist'));
});

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/main.css" />
    </head>
    <body>
        <h1 class="Fw(b) Fz(2rem)">Welcome!</h1>
    </body>
</html>