Naphthalene Possum Management
    Wondering what’s next for npm?Check out our public roadmap! »

    atomizer
    TypeScript icon, indicating that this package has built-in type declarations

    3.9.1 • Public • Published

    Atomizer

    Join the chat at https://gitter.im/acss-io/atomizer

    npm version Build Status Dependency Status devDependency Status Coverage Status

    TL;DR:

    GIF showing the VSCode extension (with autocompletion)

    Overview

    Atomizer is a tool that helps you create Atomic CSS rules (acss.io).

    Atomic CSS is a collection of single purpose styling units for maximum reuse that fits well with components in templated frameworks such as React, Ember or Angular. For more information we recommend that you read "Challenging CSS best practices", watch the Atomic CSS presentation, or check this deck.

    Install

    npm install atomizer -g

    Usage

    CLI

    Usage: atomizer [options] [path]
    
      Options:
    
        -h, --help                          output usage information
        -V, --version                       output the version number
        -R, --recursive                     process all files recursively in the path.
        -c, --config=[file]                 source config file if any.
        -r, --rules=[file]                  custom rules file (argument may be passed multiple times)
        -o, --outfile=[file]                destination config file.
        -n, --namespace=[namespace]         adds the given namespace to all generated Atomic CSS selectors.
        -H, --helpersNamespace=[namespace]  adds the given namespace to all helper selectors.
        -w, --watch=[target]                rebuilds when changes are detected in the file, directory, or glob (argument may be passed multiple times and is parsed for Atomic CSS classes)
    
        --rtl                               swaps `start` and `end` keyword replacements with `right` and `left`.
        --ie                                adds old IE hacks to the output.
        --exclude=[pattern]                 pattern to exclude file to be scanned
        --bump-mq                           increases specificity of media queries a small amount
        --verbose                           show additional log info (warnings).
    

    Example:

    atomizer -o atomic.css ./site/*.html
    atomizer -o atomic.css ./site/*.html --exclude=*-0.html
    atomizer -c config.js -R ./site/ > atomic.css
    atomizer -c config.js -n \#myrootclass > atomic.css
    

    API

    var Atomizer = require('atomizer');
    
    var defaultConfig = {
        "breakPoints": {
            'sm': '@media(min-width:750px)',
            'md': '@media(min-width:1000px)',
            'lg': '@media(min-width:1200px)'
        },
        "custom": {
            "1": "1px solid #000",
            "foo": "2px dotted #f00"
        },
        "classNames": [
            'Bd(1)',
            'Bd(foo)',
            'Bd(foo)--sm',
            'Bd(foo)--md',
            'D(n)!'
        ]
    };
    
    var atomizer = new Atomizer({verbose: true});
    
    // Parse text to find Atomic CSS classes
    var foundClasses = atomizer.findClassNames('<div class="D(n)! P(10px) M(20%) Bd(1) Bd(foo)--sm"></div>');
    
    // Generate Atomizer configuration from an array of Atomic classnames
    var finalConfig = atomizer.getConfig(foundClasses, defaultConfig);
    
    // Generate Atomic CSS from configuration
    var css = atomizer.getCss(finalConfig);

    Plugins

    Third Party Extensions

    For Chrome

    For VSCode

    Developer docs

    We have wiki docs for contributors who want to help with the maintenance and development of this tool.

    License

    This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.

    Third-party open source code used are listed in our package.json file.

    Install

    npm i atomizer

    DownloadsWeekly Downloads

    617

    Version

    3.9.1

    License

    BSD-3-Clause

    Unpacked Size

    223 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar