Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ertrzyiks/pixel-pattern-generator

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/ertrzyiks/pixel-pattern-generator
Owner: ertrzyiks
License: mit
Created: 2014-12-17T22:03:48.000Z (about 10 years ago)
Default Branch: master
Last Pushed: 2015-01-18T21:26:07.000Z (about 10 years ago)
Last Synced: 2024-12-07T19:36:04.319Z (about 1 month ago)
Language: JavaScript
Homepage: http://ertrzyiks.github.io/pixel-pattern-generator
Size: 672 KB
Stars: 4
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

# Pixel pattern

[![Build Status](https://travis-ci.org/ertrzyiks/pixel-pattern-generator.svg?branch=master)](https://travis-ci.org/ertrzyiks/pixel-pattern-generator)

Utility created to ease maintenance of pixel pattern figures

## Requirements/support

Less v1.6.0+

Tested and works in browsers:
- Chrome
- Safari 5+
- Firefox
- Opera
- IE9+

Additionally with Javascript fallback
- IE6+

## Install

### with bower

```bash
bower install pixel-pattern-generator --save-dev
```

### with git

```bash
git clone [email protected]:ertrzyiks/pixel-pattern-generator.git
```
## Usage

Use mixin to set size of pixel and assign color to chosen coordinates

```less
.pixelart-myawesomesquare{
.pixel-pattern-size(50px);

.pixel-pattern(
0 0 red,
0 1 blue,
1 0 green,
1 1 yellow
);
}
```

then put somewhere in page content following html

```html

```

## Fallback

When you need better browser support than box-shadow compatible, you can use javascript fallback.
First, insert fallback script

```html

```

then give your pixel html element id and initialize fallback using PPG.init function.

```html

PPG.init();

```

If will automatically detect if fallback is necessary. In modern browser this function do nothing.

## License

See LICENSE for more info.