https://github.com/polyneue/hero-patterns-scss

A Sass utility to generate optimized SVG background images from heropatterns.com
https://github.com/polyneue/hero-patterns-scss

css hero-patterns-scss patterns sass sass-functions sass-library scss svg

Last synced: 2 months ago
JSON representation

A Sass utility to generate optimized SVG background images from heropatterns.com

• Host: GitHub
• URL: https://github.com/polyneue/hero-patterns-scss
• Owner: Polyneue
• License: mit
• Created: 2018-03-14T01:18:38.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-15T02:36:33.000Z (over 6 years ago)
• Last Synced: 2024-10-15T16:20:49.072Z (2 months ago)
• Topics: css, hero-patterns-scss, patterns, sass, sass-functions, sass-library, scss, svg
• Language: CSS
• Homepage:
• Size: 659 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Hero Patterns SCSS Cover](https://raw.githubusercontent.com/Polyneue/hero-patterns-scss/master/docs/hero-patterns-scss.gif)

[![Build Status](https://travis-ci.org/Polyneue/hero-patterns-scss.svg?branch=master)](https://travis-ci.org/Polyneue/hero-patterns-scss)

[![Coverage Status](https://coveralls.io/repos/github/Polyneue/hero-patterns-scss/badge.svg?branch=develop)](https://coveralls.io/github/Polyneue/hero-patterns-scss?branch=develop)

## Introduction

Hero Patterns SCSS makes it easy to add SVG background patterns to your stylesheets with one simple Sass function. SVG patterns are from [Hero Patterns](http://www.heropatterns.com/).

## Features

* Exports only the patterns that you use

* Provides parameters to easily customize SVG fill and opacity

* SVG output is optimized using [mini-svg-data-uri](https://github.com/tigt/mini-svg-data-uri)

## Installation

Install package with NPM

```

npm install hero-patterns-scss --save

```

**OR**  

Clone the repository and add the `dist/` directory to your project.

```

git clone [email protected]:Polyneue/hero-patterns-scss.git

```

## Getting Started

After installing the package, import hero-patterns-scss into your project and use the `hero-pattern()` function to generate the svg output.

```scss

@import './node_modules/hero-patterns-scss/dist/entry.scss';

body {

    background-color: #dfdbe5;

    background-image: hero-pattern('jupiter', #9c92ac, 0.4);

    background-size: 30px;

}

```

## Usage

Hero Patterns SCSS has one main function used to generate the SVG output.

#### `hero-pattern($pattern, $fill, $opacity)`

| Parameter  | Type     | Description                                    |

| ---------- | -------- | ---------------------------------------------- |

| `$pattern` | `String` | The pattern name to be generated.              |

| `$fill`    | `String` | Hex, RGB, or HSL values. Default is `#000000`. |

| `$opacity` | `Number` | `0.0` through `1.0`. Default is `1.0`.         |

**Notes:**  

For examples of all patterns, see [Hero Patterns](http://www.heropatterns.com/). You can find a full list of names and matching variables [here](https://github.com/polyneue/hero-patterns-scss/blob/master/dist/partials/patterns-map.scss).

## Copyright and License

Code copyright 2018 Ed Mendoza. Code released under the [MIT license](https://github.com/polyneue/hero-patterns-scss/blob/master/LICENSE).