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.breakPoints
Define the media query breakpoint values. Must be an object with the keys sm
(small), md
(medium) and lg
(large) which map to strings representing pixel values (eg, { "sm": "700px", "md": "900px", "lg": "1200px"}
)
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.