Package Exports

grunt-atomizer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grunt-atomizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

grunt-atomizer

Overview

A grunt task for running Atomizer

Install

npm install grunt-atomizer --save-dev

Usage

Options

options.config

The Atomizer config passed directly to the grunt task. See examples below. If options.configFile has not been set, this option is required. A config must have namespace, start and end keys.

options.configFile

The Atomizer config file to generate atomic css. If options.config has not been set, this option is required. A config must have namespace, start and end keys.

options.configOutput

The config file generated and used by the tool. Useful when parsing is used (See files.src below) and you want to save the configuration generated.

options.rtl

Process the rules for right-to-left output.

options.namespace

A CSS selector used to define scope for the Atomic CSS rules. (eg, if options.namespace is set to #atomic, the CSS output will be in the form of #atomic .P-10px, etc.)

files.src

Any files matched by files.src will be parsed and if valid atomic classes are found, config rules will be automatically created for these classes. Some custom classes cannot have their configuration be automatically generated by Atomizer. If these classes are found, you will be shown a warning instructing you to manually add them to the config.

files.dest

The path to the CSS file that will be created.

Examples

// Configuration to be run (and then tested).
atomizer: {
    // Passing a configFile
    configFileOnly: {
        options: {
            configFile: 'test/fixtures/sample-config.js'
        },
        files: [
            {
                dest: 'tmp/configFileOnly.css'
            }
        ]
    },
    // Passing the config to the grunt task directly
    configGruntOnly: {
        options: {
            namespace: '#atomic',
            config: {
                display: {
                    ib: true
                }
            }
        },
        files: [
            {
                dest: 'tmp/configGruntOnly.css'
            }
        ]
    },
    // Using both config and configFile.
    // `options.config` has more precedence than configFile.
    configBoth: {
        options: {
            namespace: '#atomic',
            configFile: 'test/fixtures/sample-config.js',
            config: {
                'border-top': {
                    custom: [
                        {suffix: '1', values: ['10px solid #ccc']}
                    ]
                },
                display: {
                    ib: true
                }
            }
        },
        files: [
            {
                dest: 'tmp/configBoth.css'
            }
        ]
    },
    // Using config, configFile and also parsing HTML files (it can be any type of file)
    // Parsing will warn if you've used a class that cannot be automatically generated and therefore requires you to manually add it to the config.
    configBothWithParsing: {
        options: {
            namespace: '#atomic',
            configFile: 'test/fixtures/sample-config.js',
            config: {
                display: {
                    b: true
                }
            }
        },
        files: [
            {
                src: ['test/fixtures/*.html'],
                dest: 'tmp/configBothWithParsing.css'
            }
        ]
    }
}

License

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

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