# tailor

> CSS Sprites Generator

Latest version **0.0.2** (published 2012-11-15) · 0 weekly downloads

## Install

```sh
npm install tailor
pnpm add tailor
yarn add tailor
bun add tailor
```

Provides the command `tailor`.

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2012-11-15 |
| First published | 2012-11-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Serge Borbit |
| Maintainers | borbit |
| Keywords | sprite, css |

## Links

- npm: https://www.npmjs.com/package/tailor
- npm.io page: https://npm.io/package/tailor

## Dependencies (4)

- [css](https://npm.io/package/css.md) *
- [async](https://npm.io/package/async.md) *
- [canvas](https://npm.io/package/canvas.md) *
- [commander](https://npm.io/package/commander.md) *

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2012-11-15
- 0.0.1 — 2012-11-13

## README

Tailor
------

CSS Sprites Generator.

Installation
------------

Sprites generation is built on top of the [node-canvas](https://github.com/LearnBoost/node-canvas)
which requires the __Cairo__. For system-specific installation view the
[Wiki](https://github.com/LearnBoost/node-canvas/wiki/_pages).

    $ npm install -g tailor

Usage
-----

I have a `styles.css` and I want all background images to be automaticaly sewed into a css sprite.

    .link {
      display: block;
      height: 28px;
      width: 28px;
    }

    .link-facebook {
      background-image: url("icon-facebook.png");
    }

    .link-google {
      background-image: url("icon-google.png");
    }

    .link-twitter {
      background-image: url("icon-twitter.png");
    }

    .link-vk {
      background-image: url("icon-vk.png");
    }

First I have to do is to add additional, vendor-prefixed properties to tell Tailor how the sprite should be sewed:

    ...

    .link-facebook {
      background-image: url("icon-facebook.png");
      -tailor-type: compact;
    }

    .link-google {
      background-image: url("icon-google.png");
      -tailor-type: compact;
    }

    .link-twitter {
      background-image: url("icon-twitter.png");
      -tailor-type: compact;
    }

    .link-vk {
      background-image: url("icon-vk.png");
      -tailor-type: compact;
    }

  * `-tailor-type`

    Sprite type. Can be `horizontal`, `vertical` or `compact`.

  * `-tailor-group`

    To group images into the separate sprite (optional). Default: `all`.


All my images are in the `./images` directory and I want to put sprites and processed css file to the `./result` directory.

  With command line:

    $ tailor -r images -o result styles.css

  Programmatically:

    var tailor = require('tailor');

    var files = ['styles.css'];
    var options = {
      rootDirPath: 'images'
    , outDirPath: 'result'
    };

    tailor(files, options, function(err) {
      console.log('Sewed!');
    });

  As a result there will be a sprite file and processed `styles.css` file in the `./result` directory.
	
    ...
    
    .link-facebook {
      background-image: url("1a29b94c7137b58.png");
      background-position: 0px 0px
    }

    .link-google {
      display: none;
      background-image: url("1a29b94c7137b58.png");
      background-position: -28px 0px
    }

    .link-twitter {
      background-image: url("1a29b94c7137b58.png");
      background-position: 0px -28px
    }

    .link-vk {
      background-image: url("1a29b94c7137b58.png");
      background-position: -28px -28px
    }

License
-------

[MIT](http://en.wikipedia.org/wiki/MIT_License#License_terms). Copyright (c) 2012 Serge Borbit <serge.borbit@gmail.com>

---
_Source: https://npm.io/package/tailor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._