postcss-subtle

A postCSS plugin to automatically download patterns from subtle patterns and reference them in your css

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

6

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

PostCSS Subtle Build Status

PostCSS plugin to automatically download and unzip images from subtlepatterns.com. I'm a fan of the images on the site and have used them in several of my projects, and wanted to give back by making it easier for others to quicly add some extra interest to their design.

.foo {
    background: subtle('seigaiha');
}

Downloads the file at https://subtlepatterns.com/patterns/seigaiha.zip and extrcts the first image file in the zip to your local asset path, and returns the following reference in your css.

.foo {
  background: url('{server_path}/seigaiha.png');
}

When picking out the name of the zip file, the easiest way I've found is to hover over the download link because the name of the zip file on the site doesn't always match the name of the pattern displayed on the site.

Usage

Plugin options

localPath

Type: string Default: ''

Defines the local path where the downloaded image file is extracted to. This path is relative to the location the postCSS task is executing.

serverPath

Type: string Default: ''

Defines the base path used for image file references in the css. It should refer to the url corresponding to the localPath, or where those files will be moved to by later processing steps.

var subtle = require('postcss-subtle').default;
postcss([ subtle({ localPath: 'assets/images', serverPath: '../images' }) ])

See PostCSS docs for examples for your environment.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100