![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
grunt-node-sprite-mixings
Advanced tools
Readme
Mixing generator for stylus, from a json that contains the coordinates of the images on the sprite.
This plugin requires Grunt ~0.4.2
and node-sprite ~0.1.2
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-node-sprite-mixings --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-node-sprite-mixings');
In your project's Gruntfile, add a section named node_sprite_mixings
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
node_sprite_mixings: {
files: {
// task specifics
}
},
});
Before run the grunt-node-sprite-mixings task you must make sure that the sprite and json has been generated.
This task has just one option.
jsonRemove: Boolean
-
By default
is false
, should you wish to delete the jsons after generation of the mixings.
urlNamespace: String
-
By default
is disabled
, add a path on the URL of the background image.
Coming together of all json sprites into a single mixing.
grunt.initConfig({
node_sprite_mixings: {
files: {
dest: 'public/stylesheets/mixings/example.styl',
src: ['public/images/*.json']
},
options: {
removeJson: true, // default is false
urlNamespace: '/images/' // default is disabled
}
},
});
Mixings separated for every sprite.
grunt.initConfig({
node_sprite_mixings: {
basicAndExtras: {
files: {
'public/stylesheets/mixings/bar.styl': ['public/images/bar.json'],
'public/stylesheets/mixings/foo.styl': ['public/images/foo.json']
},
options: {
removeJson: true, // default is false
urlNamespace: '/images/' // default is disabled
}
},
},
});
This is the format that is generated by mixing task:
foo(x-offset=0, y-offset=0, repeat=no-repeat)
background url('urlNamespace/example-1.png') repeat (0px + x-offset) (442px + y-offset) transparent
width 20px
height 20px
To use the mixings generated, just call into your file.styl as follows:
@import 'mixings/example'
.example_1
foo()
.example_2
foo(true, 2px, 2px)
.example_3
foo(true, 0, 0, repeat-x)
.example_4
foo(false)
Result of css:
.example_1 {
background:url("urlNamespace/example-1.png") no-repeat 0 211px transparent;
width: 20px;
height: 20px
}
.example_2 {
background:url("urlNamespace/example-1.png") no-repeat 2px 213px transparent;
width: 20px;
height: 20px
}
.example_3 {
background:url("urlNamespace/example-1.png") repeat-x 0 211px transparent;
width: 20px;
height: 20px
}
.example_4 {
background:url("urlNamespace/example-1.png") repeat-x 0 211px transparent
}
The json that was specified in jsonFile, should be in this structure.
To learn how to produce this automatic json lib check out the node-sprite, and see how to utilize.
{
"name": "example",
"shortsum": "1",
"images": [{
"name": "foo",
"width": 20px,
"height": 20px,
"positionX": 0,
"positionY": 0
}, {
"name": "bar",
"width": 30px,
"height": 30px,
"positionX": 0,
"positionY": 442
}]
}
Feel free to post issues or pull request.
You can run the projects tests with the npm test
command.
Task submitted by Saulo S. Santiago
FAQs
Generator mixings for stylus. Based on lib node-sprites
The npm package grunt-node-sprite-mixings receives a total of 12 weekly downloads. As such, grunt-node-sprite-mixings popularity was classified as not popular.
We found that grunt-node-sprite-mixings demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.