Atomizer

Installation

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

On this page

This guide explains various ways to setup Atomizer in your project. You install the CLI directly for ultimate control or integrate with one of our many bundle and framework integrations.

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

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

Bundlers

Follow the one of the bundler guides below to integrate Atomizer into your project.

Frameworks

Atomizer easily integrates with many of the most popular JavaScript frameworks, read one of the guides below to integrate Atomizer into your project.

Browsers

Chrome extensions built and maintained by the Atomizer community