### Run Example Dev Server

Source: https://github.com/acss-io/atomizer/blob/main/docs/quick-start.md

Install dependencies and run the example dev server for the Atomizer project. This command starts a local server to preview the Atomizer examples.

```shell
npm install
npm run examples
```

--------------------------------

### Run Atomizer Examples

Source: https://github.com/acss-io/atomizer/blob/main/CONTRIBUTING.md

Execute Atomizer on example files, set up a dev server, and open the examples page in your browser. Modifying HTML will auto-run Atomizer and live-reload.

```bash
npm run examples
```

--------------------------------

### Build and Test Setup

Source: https://github.com/acss-io/atomizer/blob/main/CONTRIBUTING.md

Verify your local development setup by building the project and running tests.

```bash
npm run build
npm test
```

--------------------------------

### Install Atomizer Plugins

Source: https://github.com/acss-io/atomizer/blob/main/packages/atomizer-plugins/README.md

Install the atomizer-plugins package using npm.

```shell
npm i atomizer-plugins
```

--------------------------------

### Atomizer CLI Usage Examples

Source: https://github.com/acss-io/atomizer/blob/main/packages/atomizer/README.md

Examples demonstrating how to use the Atomizer CLI for processing HTML files and generating CSS.

```bash
atomizer -o atomic.css ./site/*.html
```

```bash
atomizer -o atomic.css ./site/*.html --exclude=*-0.html
```

```bash
atomizer -c config.js -R ./site/ > atomic.css
```

```bash
atomizer -c config.js -n \#myrootclass > atomic.css
```

--------------------------------

### justify-self: start Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/alignment.md

Justifies a specific box within its containing block along the inline/row/main axis to 'start'. This property only works in grid mode.

```html
<div class="D(g) Gtc(threeColEvenGrid) Ji(e)">
    <div class="Js(s)">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
```

--------------------------------

### BrowsersList Configuration Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/browser-support.md

Example BrowsersList configuration used by Autoprefixer to determine browser support and apply necessary vendor prefixes.

```text
> 1%, not op_mini all
```

--------------------------------

### Install PostCSS Atomizer Plugin

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/postcss.md

Install the necessary packages for PostCSS integration. This command installs both `postcss-atomizer` and `postcss` as development dependencies.

```shell
npm i postcss-atomizer postcss -D
```

--------------------------------

### Install Atomizer CLI

Source: https://github.com/acss-io/atomizer/blob/main/packages/atomizer/README.md

Install the Atomizer command-line interface globally using npm.

```bash
npm install atomizer -g
```

--------------------------------

### Run Build Process

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/esbuild.md

Execute your project's build setup using the command defined in your `package.json`.

```shell
npm run dev
```

--------------------------------

### Install grunt-atomizer

Source: https://github.com/acss-io/atomizer/blob/main/packages/grunt-atomizer/README.md

Install the grunt-atomizer package as a development dependency.

```bash
npm install grunt-atomizer --save-dev
```

--------------------------------

### Install Grunt Packages

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/grunt.md

Install grunt-atomizer and grunt-contrib-watch as development dependencies.

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

--------------------------------

### Install Dependencies

Source: https://github.com/acss-io/atomizer/blob/main/CONTRIBUTING.md

Install project dependencies using npm. This repository is a monorepo using npm workspaces.

```bash
npm install
```

--------------------------------

### Install webpack-atomizer-loader

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/webpack.md

Install the loader as a development dependency using npm.

```shell
npm i webpack-atomizer-loader -D
```

--------------------------------

### Example HTML Usage

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/grunt.md

Include the generated PostCSS CSS file in your HTML and use Atomizer classes in your markup.

```html
<!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>

```

--------------------------------

### Install Autoprefixer

Source: https://github.com/acss-io/atomizer/blob/main/docs/browser-support.md

Install Autoprefixer as a development dependency to automatically add vendor prefixes to your CSS.

```shell
npm i -D autoprefixer
```

--------------------------------

### Install Atomizer CLI

Source: https://github.com/acss-io/atomizer/blob/main/docs/installation.md

Install the Atomizer npm package using npm. This package includes a CLI program that generates CSS after parsing your website files.

```bash
npm i atomizer
```

--------------------------------

### Basic HTML for Dark Mode Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/dark-mode.md

This HTML structure is used to demonstrate initial styling and dark mode overrides.

```html
<div class="intro">Hello World!</div>
```

--------------------------------

### Install gulp-atomizer Package

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/gulp.md

Install the gulp-atomizer package as a development dependency in your project.

```shell
npm i gulp-atomizer -D
```

--------------------------------

### Create New SolidJS Project

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/solidjs.md

Use this command to scaffold a new SolidJS project if one does not already exist. Ensure you have Node.js and npm installed.

```shell
npx degit solidjs/templates/js my-app
cd my-app
npm install
```

--------------------------------

### Install webpack-atomizer-loader with yarn

Source: https://github.com/acss-io/atomizer/blob/main/packages/webpack-atomizer-loader/README.md

Install the loader as a development dependency using yarn.

```bash
yarn add -D webpack-atomizer-loader
```

--------------------------------

### Install Atomizer Package

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nodejs.md

Install the Atomizer npm package as a development dependency.

```shell
npm i atomizer -D
```

--------------------------------

### Specific Content Path Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/content.md

Use specific glob patterns to target files within your project. This example shows a generic pattern for all JS files.

```javascript
module.exports = {
    content: [
        './**/*.js',
    ],
};
```

--------------------------------

### Install Atomizer esbuild Plugin

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/esbuild.md

Install the atomizer-plugins package as a development dependency to use the esbuild plugin.

```shell
npm i atomizer-plugins -D
```

--------------------------------

### Contextual Selectors Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/index.md

Demonstrates how to style elements based on their parent's classes using Atomizer's contextual selectors.

```html
<div>
   <div class="W(50%) foo_W(100%)"></div>
   <div class="W(50%) foo_W(100%)"></div>
</div>
<hr>
<div class="foo">
   <div class="W(50%) foo_W(100%)"></div>
   <div class="W(50%) foo_W(100%)"></div>
</div>
```

--------------------------------

### Install PostCSS Atomizer Plugin

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nextjs.md

Install the `postcss-atomizer` dependency as a development dependency for your Next.js project.

```shell
npm i postcss-atomizer -D
```

--------------------------------

### CSS Shorthand Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/shorthand.md

Demonstrates how multiple shorthand notations for border properties can lead to numerous duplicate selectors or declarations.

```css
.Bd(1px,solid,#000),
.Bd(1px,#000,solid),
.Bd(solid,#000,1px),
.Bd(solid,1px,#000),
.Bd(#000,1px,solid),
.Bd(#000,solid,1px) {
    border: 1px solid #000;
}
```

--------------------------------

### Install nuxt-atomizer Module

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nuxtjs.md

Install the nuxt-atomizer module as a development dependency using npm.

```shell
npm i nuxt-atomizer -D
```

--------------------------------

### Atomizer Updated CSS

Source: https://github.com/acss-io/atomizer/blob/main/docs/installation.md

This is an example of the updated CSS file after adding the `.C(#ff0000)` class to the HTML.

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

--------------------------------

### Clone Atomizer Repository

Source: https://github.com/acss-io/atomizer/blob/main/docs/quick-start.md

Clone the official Atomizer repository to access the example project. This is the first step to trying out the Atomizer project locally.

```shell
git clone git@github.com:acss-io/atomizer.git
```

--------------------------------

### Interactive Resizable Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/breakpoints.md

An interactive and resizable HTML component demonstrating responsive design using named containers. The layout and element sizes adjust as the container is resized.

```html
<div class="ContType(is) ContName(width300) W(50%) Mx(a) P(10px) Bdc(--color-blue-1) Bdw(1px) Bds(s) Bdrs(5px) Rsz(h) Ov(a)">
    <div class="D(f) Fxd(r) Fxd(c)--contmw300 Gp(20px)">
        <div class="W(25%) W(100%)--contmw300 Mih(100%) H(40px)--contmw300 Bgc(--color-blue-4)"></div>
        <div class="D(f) Gp(20px) Fxd(c) W(75%) W(100%)--contmw300">
            <h1 class="C(--color-blue-1) Fz(2.5rem) Fz(1.5rem)--contmw300 M(0)">Resize me</h1>
            <div class="P(10px) Bgc(--color-blue-1)"></div>
            <div class="P(10px) Bgc(--color-blue-1)"></div>
        </div>
    </div>
</div>
```

--------------------------------

### Install PostCSS Atomizer plugin

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/remix.md

Add the Atomizer PostCSS plugin as a development dependency to your Remix project.

```shell
npm install postcss-atomizer -D
```

--------------------------------

### Descendant Combinator Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

This example uses the underscore character `_` to apply a style based on the descendant combinator. The style is applied to an element if any of its ancestors have the specified class.

```html
<div class="foo">
    <div class="foo_D(n)"></div>
</div>
```

--------------------------------

### HTML Markup Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/repl.md

This is the HTML markup that can be edited in the REPL. It demonstrates basic styling with Atomizer classes and includes links to further documentation on Atomizer classes and configuration.

```html
<div class="W(30%)--sm Mx(a) Mt(3rem) P(20px) Bg(#0280ae) C(#fff) Bdrs(15px) Ff(arial)">
    <h1 class="Ta(c)">Hello world!</h1>
    <p class="My(10px) Lh(1.3)">Modify the markup by changing the code in the "html" box. As you add and remove <a href="{% link guides/atomizer-classes.md %}">Atomizer classes</a>, this preview will update live and the CSS will be auto generated in the "css" box above.</p>
    <p class="Lh(1.3)">You can further customize Atomizer by adding your own breakpoints or custom values. Take a look at the <a href="{% link configuration.md %}">Configuration guide</a> for more information.</p>
    <p>Like what you see? Use the Download button to save it locally and build your next project!</p>
</div>
```

--------------------------------

### Custom Filter Alias Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/atomizer-classes.md

This example demonstrates how to define a custom filter alias in Atomizer's configuration. This allows for applying complex filter combinations with a single class.

```javascript
custom: {
  'Fil(myCustomFilter)': 'contrast(150%) brightness(10%)',
}
```

--------------------------------

### General Sibling Combinator Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

This example uses the tilde character `~` to apply a style based on the general sibling combinator. The style is applied to an element if any of its preceding siblings have the specified class.

```html
<div class="foo"></div>
<div class="bar"></div>
<div class="foo~D(n)"></div>
```

--------------------------------

### Layout Options with Atomizer

Source: https://github.com/acss-io/atomizer/blob/main/docs/index.md

Provides examples of different layout methods supported by Atomizer, including floats, tables, flexbox, and CSS grids.

```html
<!-- floats -->
<div class="Row">
    <div class="Fl(start) W(1/2)"></div>
    <div class="Fl(start) W(1/2)"></div>
</div>
<!-- table -->
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc)"></div>
    <div class="D(tbc)"></div>
</div>
<!-- flexbox -->
<div class="D(f)">
    <div class="Flxg(1)"></div>
    <div class="Flxg(1)"></div>
</div>
<!-- grids -->
<div class="D(g) Gtc(twoColEvenGrid)">
    <div></div>
    <div></div>
</div>
```

--------------------------------

### Atomic CSS Selector Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/frequently-asked-questions.md

Demonstrates the Atomic CSS approach using a utility class to apply the same font size. This method aims to reduce redundancy and improve reusability.

```css
.Fz(large) {
    font-size: 18px;
}
```

--------------------------------

### Atomizer Generated CSS

Source: https://github.com/acss-io/atomizer/blob/main/docs/installation.md

This is an example of the CSS generated by Atomizer for the class `.Fz(30px)`.

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

--------------------------------

### Responsive Layout with Named Container

Source: https://github.com/acss-io/atomizer/blob/main/docs/breakpoints.md

An HTML example demonstrating a responsive layout within a named container. Styles change based on the container's width, specifically below 300px.

```html
<div class="ContType(is) ContName(width300)">
    <div class="D(f) Fxd(r) Fxd(c)--contmw300 Gp(20px)">
        <div class="W(75%) W(100%)--contmw300">
            <h1 class="Fz(2.5rem) Fz(1.5rem)--contmw300 ">Resize me</h1>
            ...
        </div>
    </div>
</div>
```

--------------------------------

### Example Atomic CSS configuration file

Source: https://github.com/acss-io/atomizer/blob/main/packages/webpack-atomizer-loader/README.md

Create a JavaScript file (e.g., atomicCssConfig.js) to define your Atomic CSS configuration, including options, breakpoints, and custom rules.

```javascript
// atomicCssConfig.js

module.exports = {
    cssDest: './generatedAtoms.css',
    // extends CSSOptions definition from atomizer
    options: {
        namespace: '#atomic',
        // Supports array of rule objects or path to rules object string
        rules: [{ custom: 'rule' }],
    },
    configs: {
        breakPoints: {
            sm: '@media screen(min-width=750px)',
            md: '@media(min-width=1000px)',
            lg: '@media(min-width=1200px)',
        },
        custom: {
            1: '1px solid #000',
        },
        classNames: [],
    },
};

```

--------------------------------

### Programmatic Atomizer Integration

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nodejs.md

Use the Atomizer class to parse HTML, generate configuration, and create CSS. Ensure the Atomizer package is installed.

```javascript
import Atomizer from 'atomizer';

const defaultConfig = {
    breakPoints: {
        sm: '@media(min-width:750px)',
        md: '@media(min-width:1000px)',
        lg: '@media(min-width:1200px)'
    },
    custom: {
        border: '2px dotted #f00'
    }
};

// Initialize the class
const atomizer = new Atomizer({verbose: true});

// Parse text to find Atomizer CSS classes
const foundClasses = atomizer.findClassNames('<div class="P(10px) M(20%) Bd(border)--sm"></div>');

// Generate Atomizer configuration from an array of Atomic classnames
const finalConfig = atomizer.getConfig(foundClasses, defaultConfig);

// Generate Atomic CSS from configuration
const css = atomizer.getCss(finalConfig);
```

--------------------------------

### Apply grid-area using utility classes

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Apply named grid areas to elements using the `Ga()` utility class. This example demonstrates assigning 'main' and 'aside' areas.

```html
<div class="D(g) Gtc(twoColNamedGrid)">
    <div class="Ga(colMain)">1</div>
    <div class="Ga(colAside)">2</div>
</div>
```

--------------------------------

### Define a custom Atomizer rule

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/custom-classes.md

Create a JavaScript file to define custom rules for Atomizer. This example shows a 'helper' type rule named 'loud' that sets text color and font weight, and accepts a font size parameter.

```javascript
// atomizer.rules.js
module.exports = [
    {
        allowParamToValue: true,
        id: 'loud',
        matcher: 'Loud',
        name: 'Loud',
        styles: {
            'color': '#ff0000',
            'font-size': '$0',
            'font-weight': 'bold',
        },
        type: 'helper'
    }
];
```

--------------------------------

### Add Content with Pseudo-elements

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

This example uses the `content` property with `::before` and `::after` pseudo-elements to add quotes around text. It demonstrates styling specific parts of an element.

```html
<p class="Cnt(oq)::b Cnt(cq)::a">Hello world!</p>
```

```html
<p class="Cnt(oq)::b Cnt(cq)::a Fz(30px)::b Fz(30px)::a Fz(20px)">Hello world!</p>
```

--------------------------------

### Create New SvelteKit Project

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/sveltekit.md

Use this command to create a new SvelteKit project if you don't have one already. Follow the prompts to set up your project.

```shell
npm create svelte@latest my-app
cd my-app
npm install
```

--------------------------------

### Create a New Next.js Project

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nextjs.md

Use the Create Next App CLI to set up a new Next.js project if one does not already exist.

```shell
npx create-next-app my-app
cd my-app
```

--------------------------------

### Set scroll-snap-align to start

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/scroll.md

Use `Ssa(s)` for `scroll-snap-align: start`. This aligns the snapped element to the start of the scroll container. Other options include `center` (`Ssa(c)`) and `end` (`Ssa(e)`).

```html
<div class="Sb(s)">
    <div class="Ssa(s)">1</div>
    <div class="Ssa(c)">2</div>
    <div class="Ssa(e)">3</div>
</div>
```

--------------------------------

### Run Build Process

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/solidjs.md

Execute your project's build and development scripts as defined in `package.json` to compile your SolidJS application with Atomizer.

```shell
npm run build
npm run dev
```

--------------------------------

### Create Empty CSS File

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/sveltekit.md

Create a stub ./src/app.css file. SvelteKit requires this file to exist, even if it's empty or contains only a comment.

```css
/** todo */
```

--------------------------------

### Create a New NuxtJS Project

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nuxtjs.md

Use the Create Nuxt App CLI to scaffold a new NuxtJS project if one does not already exist. Navigate into the project directory afterward.

```shell
npx create-nuxt-app my-app
cd my-app
```

--------------------------------

### Create a new Remix project

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/remix.md

Use the Remix CLI to generate a new project if one does not already exist.

```shell
npx create-remix@latest my-app
cd my-app
```

--------------------------------

### new Atomizer(options?, rules?)

Source: https://context7.com/acss-io/atomizer/llms.txt

Constructor for creating an Atomizer instance. Accepts optional options for configuration and custom rule definitions.

```APIDOC
## `new Atomizer(options?, rules?)` — Constructor

Creates an Atomizer instance. Accepts an optional options object and an optional array of custom rule definitions. When no `rules` are passed, the full built-in ruleset (CSS properties + helper classes) is loaded.

```js
import Atomizer from 'atomizer';

// Minimal instance
const atomizer = new Atomizer();

// Verbose mode (logs warnings about ambiguous custom values)
const atomizer = new Atomizer({ verbose: true });

// Strict mode (exits process if a referenced breakpoint is undefined)
const atomizer = new Atomizer({ strict: true });

// Instance with only custom rules (replaces built-in rules)
const customRules = [
    {
        type: 'pattern',
        name: 'Font size',
        matcher: 'Fz',
        allowParamToValue: true,
        styles: { 'font-size': '$0' },
    },
];
const atomizer = new Atomizer({}, customRules);
```
```

--------------------------------

### Create New Vite Project

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/vite.md

Use this command to scaffold a new project with Vite if you don't have one already.

```shell
npm create vite@latest my-app
cd my-app
npm install
```

--------------------------------

### Float Layout with Clearfix

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Use `Cf` for clearfix to contain floats. `Fl(start)` aligns elements to the start. Ensure proper container for floats.

```html
<div class="Cf">
   <div class="Fl(start)">Box 1</div>
   <div class="Fl(start)">Box 2</div>
</div>
```

```html
<div class="Cf">
   <div class="Bxz(bb) Fl(start) W(50%) P(20px) Bgc(--color-blue-4)">Box 1</div>
   <div class="Bxz(bb) Fl(start) W(50%) P(20px) Bgc(--color-blue-1)">Box 2</div>
</div>
```

--------------------------------

### Configure Atomizer Content

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/esbuild.md

Set up your `./atomizer.config.js` file to specify the content paths Atomizer should scan for classes.

```javascript
module.exports = {
    content: [
        './src/**/*.{html,js}',
    ],
}
```

--------------------------------

### Create Atomizer CSS File

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nextjs.md

Create an `atomizer.css` file and include the `@atomizer` directive to generate utility classes.

```css
/* atomizer.css */
@atomizer;
```

--------------------------------

### Child Combinator Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

This example uses the right angle bracket character `>` to apply a style based on the child combinator. The style is applied to an element if its immediate parent has the specified class.

```html
<div class="foo">
    <div class="foo>D(n)"></div>
</div>
```

--------------------------------

### Adjacent Sibling Combinator Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

This example uses the plus sign `+` to apply a style based on the adjacent sibling combinator. The style is applied to an element if its immediate previous sibling has the specified class.

```html
<div class="foo"></div>
<div class="foo+D(n)"></div>
```

--------------------------------

### Atomizer CSS Variable Definition

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

Example of defining a CSS variable in an external stylesheet for use with Atomizer.

```css
:root {
    --primary-color: #400090
}
```

--------------------------------

### Atomizer CSS Class Definitions

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

Examples of Atomizer CSS classes with defined values for text alignment and margin.

```css
.Ta(c) {
    text-align: center;
}
.M(20px) {
    margin: 20px;
}
```

--------------------------------

### Clone Atomizer Repository

Source: https://github.com/acss-io/atomizer/blob/main/CONTRIBUTING.md

Clone your forked repository locally and navigate into the project directory.

```bash
git clone git@github.com:<your-github-username>/atomizer.git
cd atomizer
```

--------------------------------

### justify-items: end Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/alignment.md

Sets the default justify-items for all child boxes in a grid container to 'end'. This property only works in grid mode.

```html
<div class="D(g) Gtc(threeColEvenGrid) Ji(e)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
```

--------------------------------

### Atomizer Project Configuration (`atomizer.config.js`)

Source: https://context7.com/acss-io/atomizer/llms.txt

Configure Atomizer by defining content paths, media/container query breakpoints, custom variables, explicit class names, and exclusions in this optional project root file.

```javascript
// atomizer.config.js
module.exports = {
    // Glob patterns for files to scan (used by CLI and plugins)
    content: [
        './src/**/*.html',
        './src/**/*.jsx',
        './src/**/*.tsx',
    ],

    // Named media/container query breakpoints
    breakPoints: {
        sm: '@media screen and (min-width: 700px)',
        md: '@media screen and (min-width: 999px)',
        lg: '@media screen and (min-width: 1200px)',
        // Container query (CSS Container Queries)
        mw300: '@container (max-width: 300px)',
    },

    // Global custom variables (usable in any class as named values)
    custom: {
        // Simple scalar — usable as M(gutter), P(gutter), etc.
        gutter: '20px',

        // Breakpoint-aware value (auto-applies media queries without --bp suffix)
        'P(logo)': {
            default: '10px',
            sm: '12px',
            md: '14px',
            lg: '20px',
        },

        // Value substitution via #{} 
        padding: '#{standardPadding} 5px #{standardPadding} 20px',
        standardPadding: '10px',

        // Property-scoped custom value (only for Bd class)
        'Bd(myBorder)': '2px dotted #f00',
    },

    // Explicitly declare class names (merged with parsed results)
    classNames: ['D(b)', 'Ov(h)'],

    // Exclude specific class names from generation
    exclude: ['Fl(end)'],
};

```

--------------------------------

### Configure PostCSS with Atomizer

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/remix.md

Set up the `./postcss.config.cjs` file to include the Atomizer plugin. Ensure `postcss: true` is enabled in your `./remix.config.js`.

```javascript
const atomizer = require('postcss-atomizer');

module.exports = {
    plugins: [
        atomizer({
            config: './atomizer.config.js',
        }),
    ],
};
```

--------------------------------

### Text Align Start LTR - Atomizer

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

Maps to `text-align: left` in a LTR context. Use this for left-aligning text in LTR layouts.

```html
`Ta(start)`
```

--------------------------------

### Configure Atomizer Content

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/sveltekit.md

Create an atomizer.config.cjs file to specify the content paths that Atomizer should parse for SvelteKit files.

```javascript
module.exports = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
    ],
}
```

--------------------------------

### Basic CLI Usage: Scan HTML and Output CSS

Source: https://context7.com/acss-io/atomizer/llms.txt

Scans a single HTML file and writes the generated atomic CSS to 'atomic.css'.

```bash
atomizer -o atomic.css ./site/index.html
```

--------------------------------

### Full Programmatic Pipeline with Atomizer

Source: https://context7.com/acss-io/atomizer/llms.txt

Use this snippet for build scripts or server-side rendering to combine scanning, configuration, and generation. Ensure source files and the output directory are correctly specified.

```javascript
import fs from 'fs';
import Atomizer from 'atomizer';

// 1. Create an Atomizer instance
const atomizer = new Atomizer({ verbose: true });

// 2. Read source files
const html = fs.readFileSync('./src/index.html', 'utf-8');
const jsx  = fs.readFileSync('./src/App.jsx', 'utf-8');

// 3. Parse class names from all sources
const classes = [
    ...atomizer.findClassNames(html),
    ...atomizer.findClassNames(jsx),
];

// 4. Merge with project config
const baseConfig = {
    breakPoints: {
        sm: '@media(min-width:700px)',
        md: '@media(min-width:1000px)',
        lg: '@media(min-width:1200px)',
    },
    custom: {
        primary: '#0070f3',
        gutter: '20px',
        'Fz(hero)': { default: '2rem', sm: '3rem', lg: '4rem' },
    },
};
const config = atomizer.getConfig(classes, baseConfig);

// 5. Generate CSS with options
const css = atomizer.getCss(config, {
    namespace: '#app',
    banner: '/* Generated by Atomizer — do not edit */\n',
    rtl: false,
    bumpMQ: false,
});

// 6. Write output
fs.mkdirSync('./dist', { recursive: true });
fs.writeFileSync('./dist/atomic.css', css);
console.log(`Generated ${css.length} bytes of Atomic CSS`);

```

--------------------------------

### HTML Structure with Atomizer Classes

Source: https://github.com/acss-io/atomizer/blob/main/docs/content.md

Example of an HTML structure containing Atomizer classes. Atomizer parses these classes directly from text documents.

```html
<div class="D(f) Jc(sb)">
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c)">Box 1</div>
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c)">Box 2</div>
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c)">Box 3</div>
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c)">Box 4</div>
</div>
```

--------------------------------

### CSS Redundant Declarations Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/shorthand.md

Illustrates how enforcing order in shorthand notation still results in redundant declarations for individual border properties.

```css
.Bd(1px,solid,#000),
.Bd(1px,solid,#ccc),
.Bd(1px,solid,#555),
.Bd(1px,dotted,#000) {
    border-width: 1px;
}

.Bd(1px,solid,#000),
.Bd(1px,solid,#ccc),
.Bd(1px,solid,#555),
.Bd(2px,solid,#000),
.Bd(3px,solid,#000) {
    border-style: solid;
}

.Bd(1px,solid,#000),
.Bd(2px,solid,#000),
.Bd(3px,solid,#000),
.Bd(1px,dotted,#000) {
    border-color: #000;
}
```

--------------------------------

### Apply grid-row-end utility

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Use the Gre utility class to set the grid-row-end property. This example demonstrates setting the end line for a grid item.

```html
<div class="D(g)">
    <div class="Grs(2)">1</div>
    <div class="Grs(spanTwo)">2</div>
    ...
    <div class="Gre(1)">4</div>
    ...
</div>
```

```html
<div class="D(g) Gtc(threeColEvenGrid) Gar(50px) Bgc(--color-code-bg) Bd Bdc(--color-code-bd) P(10px) Gp(10px) Mt(20px)">
    <div class="Bgc(--color-blue-4) P(10px) Grs(2)">1</div>
    <div class="Bgc(--color-blue-2) P(10px) Grs(spanTwo)">2</div>
    <div class="Bgc(--color-blue-4) P(10px)">3</div>
    <div class="Bgc(--color-blue-4) P(10px) Gre(1)">4</div>
    <div class="Bgc(--color-blue-1) P(10px)">5</div>
    <div class="Bgc(--color-blue-1) P(10px)">6</div>
</div>
```

--------------------------------

### CLI Usage: Advanced Options (Exclude, Namespace, RTL)

Source: https://context7.com/acss-io/atomizer/llms.txt

Scans recursively, excludes specific files, adds a namespace, enables RTL output, and saves to 'dist/atomic.css'.

```bash
atomizer -R ./site/ \
  --exclude="*-ignore.html" \
  -n "#app" \
  --rtl \
  -o dist/atomic.css
```

--------------------------------

### Border Start Width LTR - Atomizer

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

Maps to `border-left-width: 0` in a LTR context. Use this for border width on the left side in LTR layouts.

```html
`Bdstartw(0)`
```

--------------------------------

### Define grid-column span with custom variables

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Define custom variables in atomizer.config.js for spanning grid columns. This example defines `twoCol` to span two columns.

```javascript
// atomizer.config.js
module.exports = {
    custom: {
        twoCol: '1 / span 2'
    }
};
```

--------------------------------

### Configure Atomizer Content Paths

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nextjs.md

Create an `atomizer.config.js` file to specify the paths to your JS and JSX files that Atomizer should parse.

```javascript
module.exports = {
    content: [
        './components/**/*.{js,ts,jsx,tsx}',
        './pages/**/*.{js,ts,jsx,tsx}',

        // Or if using `src` directory:
        './src/**/*.{js,ts,jsx,tsx}'
    ],
}
```

--------------------------------

### Set grid-auto-rows with utility classes

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Use the `Gar()` utility class to set the height of grid rows that are not explicitly sized. This example sets rows to 150px.

```html
<div class="D(g) Gar(150px)">
    <div>1</div>
    <div>2</div>
    ...
</div>
```

--------------------------------

### Atomizer API Usage

Source: https://github.com/acss-io/atomizer/blob/main/packages/atomizer/README.md

Demonstrates how to use the Atomizer API in JavaScript to parse text, generate configurations, and create CSS.

```javascript
import Atomizer from 'atomizer';

const defaultConfig = {
    breakPoints: {
        sm: '@media(min-width:750px)',
        md: '@media(min-width:1000px)',
        lg: '@media(min-width:1200px)'
    },
    custom: {
        border: '2px dotted #f00'
    }
};

const atomizer = new Atomizer({verbose: true});

// Parse text to find Atomic CSS classes
const foundClasses = atomizer.findClassNames('<div class="P(10px) M(20%) Bd(border)--sm"></div>');

// Generate Atomizer configuration from an array of Atomic classnames
const finalConfig = atomizer.getConfig(foundClasses, defaultConfig);

// Generate Atomic CSS from configuration
const css = atomizer.getCss(finalConfig);
```

--------------------------------

### Use Atomizer Classes in SolidJS

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/solidjs.md

Apply Atomizer utility classes directly to your JSX elements to style your components. This example demonstrates basic text styling.

```javascript
export default function App() {
    return (
        <h1 className="Fw(b) Fz(2rem)">Welcome!</h1>
    )
}
```

--------------------------------

### align-self: flex-start

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/alignment.md

Use `align-self: flex-start` to align a specific child box to the start of the cross axis, overriding the container's `align-items` property for that item.

```html
<div class="D(f) Ai(c)">
    <div class="As(fs) D(f) Ai(c)">1</div>
    <div class="D(f) Ai(c)">2</div>
    <div class="D(f) Ai(c)">3</div>
    <div class="D(f) Ai(c)">4</div>
    <div class="D(f) Ai(c)">5</div>
    <div class="D(f) Ai(c)">6</div>
</div>
```

--------------------------------

### Apply grid-column-start utility

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Use the Gcs utility class to set the grid-column-start property. Supports numeric values and custom spans defined in the configuration.

```html
<div class="D(g)">
    <div class="Gcs(2)">1</div>
    <div class="Gcs(spanTwo)">2</div>
    ...
    <div class="Gce(4)">4</div>
    ...
</div>
```

```html
<div class="D(g) Gtc(threeColEvenGrid) Gar(50px) Bgc(--color-code-bg) Bd Bdc(--color-code-bd) P(10px) Gp(10px) Mt(20px)">
    <div class="Bgc(--color-blue-4) P(10px) Gcs(2)">1</div>
    <div class="Bgc(--color-blue-1) P(10px) Gcs(spanTwo)">2</div>
    <div class="Bgc(--color-blue-2) P(10px)">3</div>
    <div class="Bgc(--color-blue-3) P(10px) Gce(4)">4</div>
    <div class="Bgc(--color-blue-4) P(10px)">5</div>
    <div class="Bgc(--color-blue-1) P(10px)">6</div>
</div>
```

--------------------------------

### Configure Atomizer content paths

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/remix.md

Create an `atomizer.config.js` file to specify the paths to your Remix project files that Atomizer should parse.

```javascript
module.exports = {
    content: [
        './app/**/*.{js,ts,jsx,tsx}',
    ],
}
```

--------------------------------

### Import Atomizer CSS

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/solidjs.md

Add the generated `atomizer.css` file to your main entry point, typically `src/index.jsx`, to apply the generated styles.

```javascript
import '../dist/atomizer.css';
// ...
```

--------------------------------

### Apply Hover Pseudo-class to Regular Class

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/syntax.md

This example demonstrates how to apply a style to an element when it is hovered over using a regular class. The style is applied directly to the element with the class.

```html
<div class="foo">
    <div class="D(n):h"></div>
</div>
```

```css
.D(n):h:hover {
  display: none;
}
```

--------------------------------

### Semantic CSS Selectors Example

Source: https://github.com/acss-io/atomizer/blob/main/docs/frequently-asked-questions.md

Illustrates the use of semantic CSS selectors for styling elements like headlines and buttons. This approach can lead to redundancy in larger projects.

```css
.headline,
.cta-button,
.icon-large,
.title,
.intro {
    font-size: 18px;
}
```

--------------------------------

### Atomizer API Usage

Source: https://github.com/acss-io/atomizer/blob/main/packages/atomizer/README.md

Demonstrates how to use the Atomizer JavaScript API to parse HTML, generate configurations, and create CSS.

```APIDOC
## Atomizer API

```javascript
import Atomizer from 'atomizer';

const defaultConfig = {
    breakPoints: {
        sm: '@media(min-width:750px)',
        md: '@media(min-width:1000px)',
        lg: '@media(min-width:1200px)'
    },
    custom: {
        border: '2px dotted #f00'
    }
};

const atomizer = new Atomizer({verbose: true});

// Parse text to find Atomic CSS classes
const foundClasses = atomizer.findClassNames('<div class="P(10px) M(20%) Bd(border)--sm"></div>');

// Generate Atomizer configuration from an array of Atomic classnames
const finalConfig = atomizer.getConfig(foundClasses, defaultConfig);

// Generate Atomic CSS from configuration
const css = atomizer.getCss(finalConfig);
```

### Methods

#### `findClassNames(htmlString)`

*   **Description**: Parses an HTML string to extract all Atomic CSS class names.
*   **Parameters**:
    *   `htmlString` (string) - The HTML content to parse.
*   **Returns**:
    *   An array of strings, where each string is an Atomic CSS class name found in the HTML.

#### `getConfig(classNames, defaultConfig)`

*   **Description**: Generates an Atomizer configuration object from an array of class names, optionally merging with a default configuration.
*   **Parameters**:
    *   `classNames` (array) - An array of Atomic CSS class names.
    *   `defaultConfig` (object) - An optional default configuration object.
*   **Returns**:
    *   An object representing the Atomizer configuration.

#### `getCss(config)`

*   **Description**: Generates the Atomic CSS string from a given configuration object.
*   **Parameters**:
    *   `config` (object) - The Atomizer configuration object.
*   **Returns**:
    *   A string containing the generated Atomic CSS.
```

--------------------------------

### Configure PostCSS with Atomizer Plugin

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/sveltekit.md

Create a postcss.config.cjs file to configure the PostCSS build process and include the atomizer plugin, referencing your Atomizer configuration file.

```javascript
const atomizer = require('postcss-atomizer');

module.exports = {
    plugins: [
        atomizer({
            config: './atomizer.config.cjs',
        }),
    ],
};
```

--------------------------------

### Add Atomizer Plugin to PostCSS Config

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/nextjs.md

Add the Atomizer PostCSS plugin to your `postcss.config.js` file. Ensure you follow Next.js's guide for customizing PostCSS plugins.

```javascript
module.exports = {
    plugins: [
        // mandatory next.js plugins ...
        'postcss-atomizer',
    ],
}
```

--------------------------------

### Apply grid-row and grid-column spans

Source: https://github.com/acss-io/atomizer/blob/main/docs/tutorials/layout.md

Use `Gr()` and `Gc()` utility classes to define the row and column start/end for grid items. This example shows spanning rows and columns.

```html
<div class="D(g)">
    <div class="Gr(twoCol)">1</div>
    <div class="Gc(twoCol) Gr(4)">2</div>
    <div>3</div>
    <div class="Gr(twoCol)">4</div>
    <div class="Gc(twoCol)">4</div>
    <div class="Gc(2)">6</div>
</div>
```

--------------------------------

### Create a block-formatting context

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/helper-classes.md

Use the `BfcHack` class to create a block-formatting context without the side-effects of `overflow: hidden`. This approach is useful for containing floats.

```html
<div class="BfcHack">
  <!-- Content that needs a block-formatting context -->
</div>
```

--------------------------------

### Configure Gruntfile.js

Source: https://github.com/acss-io/atomizer/blob/main/docs/integrations/grunt.md

Set up Grunt tasks for Atomizer and watch for file changes. The watch task re-runs the atomizer task on HTML file modifications.

```javascript
// 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']);

```

--------------------------------

### Generate CSS with Atomizer CLI

Source: https://github.com/acss-io/atomizer/blob/main/docs/installation.md

Run the Atomizer CLI to generate CSS from your HTML files. The `--watch` command listens for changes and updates the CSS file automatically.

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

--------------------------------

### Atomizer Context Classes for Dark Mode

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/dark-mode.md

Shows how to use Atomizer's context class syntax to apply dark mode specific styles conditionally.

```diff
- <div class="Bgc(#eee) C(#000)">Hello World!</div>
+ <div class="Bgc(#eee) C(#000) dark_Bgc(#333) dark_C(#fff)">Hello World!</div>
```

--------------------------------

### CSS Variables for Theming

Source: https://github.com/acss-io/atomizer/blob/main/docs/guides/dark-mode.md

Demonstrates using CSS custom properties to manage colors, with overrides for dark mode via media queries and a context class.

```css
/* define the default colors */
:root {
    --background-color: #eee;
    --text-color: #000;
}

/* using @media override for dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #333;
        --text-color: #fff;
    }
}

/* alternatively, you can add a "dark" class earlier in the HTML tree to overwrite the variables for dark mode */
.dark {
    --background-color: #333;
    --text-color: #fff;
}

/* initial style */
.intro {
    background: var(--background-color);
    color: var(--text-color);
}
```