https://github.com/2createstudio/gulp-image-to-rule
Generate CSS rules from your images.
https://github.com/2createstudio/gulp-image-to-rule
Last synced: 10 months ago
JSON representation
Generate CSS rules from your images.
- Host: GitHub
- URL: https://github.com/2createstudio/gulp-image-to-rule
- Owner: 2createStudio
- License: mit
- Created: 2015-06-08T09:45:20.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-14T15:38:34.000Z (over 9 years ago)
- Last Synced: 2024-11-10T20:08:19.643Z (over 1 year ago)
- Language: JavaScript
- Size: 18.6 KB
- Stars: 4
- Watchers: 7
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-image-to-rule [](https://travis-ci.org/2createStudio/postcss-sprites) [](http://badge.fury.io/js/gulp-image-to-rule)
[Gulp](https://github.com/gulpjs/gulp) plugin that generate CSS rules from a folder with images.
## Install
```
npm install gulp-image-to-rule
```
## Example
```javascript
var path = require('path');
var gulp = require('gulp');
var i2r = require('gulp-image-to-rule');
gulp.task('lazy-rules', function() {
return gulp.src('./src/*.png')
.pipe(i2r(path.resolve('./dist/sprite.css')))
.pipe(gulp.dest('.'));
});
```
## Output
```css
.circle { background: url(../src/circle.png) no-repeat 0 0; width: 25px; height: 25px; }
.square { background: url(../src/square.png) no-repeat 0 0; width: 25px; height: 25px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.circle { background: url(../src/circle@2x.png) no-repeat 0 0; width: 25px; height: 25px; background-size: 25px 25px; }
.square { background: url(../src/square@2x.png) no-repeat 0 0; width: 25px; height: 25px; background-size: 25px 25px; }
}
```
## Options
#### selectorWithPseudo
Type: `String`
Default: `null`
Example: `.{base}-{pseudo}, a:{pseudo} .{base}, button:{pseudo} .{base}, .{base}, a.{pseudo} .{base}, button.{pseudo} .{base}, .{base}.{pseudo}`
Required: `false`
Can define custom selector, when pseudo selector is detected. Pseudo selectors are separated from the selectors by '_' in the image name (e.g. `git-icon_hover`). Use keywords `{base}` and `{pseudo}`, that will be replaced in the output.
#### templates
Type: `Object`
Default: `null`
Example:
```
{
REGULAR: '<% _.forEach(images, function(image) { %><%= image.selector %> { background: url(<%= image.url %>) no-repeat 0 0; width: <%= image.dimensions.width %>px; height: <%= image.dimensions.height %>px; display: inline-block; vertical-align: middle; font-size: 0; }<%= \'\\n\' %><% }); %>',
RETINA: '@media (-webkit-min-device-pixel-ratio: <%= ratio %>), (min-resolution: <%= dpi %>dpi) {<% _.forEach(images, function(image) { %><%= \'\\n\\t\' + image.selector %> { background: url(<%= image.url %>) no-repeat 0 0; width: <%= image.dimensions.width / image.ratio %>px; height: <%= image.dimensions.height / image.ratio %>px; background-size: <%= image.dimensions.width / image.ratio %>px <%= image.dimensions.height / image.ratio %>px; display: inline-block; vertical-align: middle; font-size: 0; }<% }); %>}'
}
```
Required: `false`
Can define custom templates for regular and retina CSS output using lodash templates.
## Notes
- The plugin has built-in support for retina images.
- The CSS selectors are based on name of file e.g `ico-arrow.png => .ico-arrow`.
- The purpose of this plugin is to be like a preprocessor for the [postcss-sprites](https://github.com/2createStudio/postcss-sprites) plugin.
## Contributing
Pull requests are welcome.
## License
MIT © 2createStudio