https://github.com/jwillmer/pattern-component
CSS3 Pattern Component
https://github.com/jwillmer/pattern-component
css3 pattern patterns placeholder pwa stenciljs stenciljs-components web web-component webcomponent
Last synced: 4 months ago
JSON representation
CSS3 Pattern Component
- Host: GitHub
- URL: https://github.com/jwillmer/pattern-component
- Owner: jwillmer
- License: gpl-3.0
- Fork: true (LeaVerou/css3patterns)
- Created: 2020-07-02T14:09:31.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-03T09:19:53.000Z (almost 5 years ago)
- Last Synced: 2025-01-20T23:57:40.546Z (4 months ago)
- Topics: css3, pattern, patterns, placeholder, pwa, stenciljs, stenciljs-components, web, web-component, webcomponent
- Language: CSS
- Homepage: https://jwillmer.github.io/pattern-component/
- Size: 321 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/@jwillmer/pattern-component)
[](https://www.npmjs.com/package/@jwillmer/pattern-component)
# CSS Pattern Web Component
This web component creates a background pattern only by using CSS. It is very usefull to quickly create nice looking placeholders for profile pictures. It is a fork of a [CSS3 pattern collection](https://leaverou.github.io/css3patterns/).
## Demo
[](https://jwillmer.github.io/pattern-component/)
The docs folder contains the compiled source code of this component. You can visit the [demo page](https://jwillmer.github.io/pattern-component/) for more examples.
## Usage
For a comprehensive demo on how to use this component you can investigate the [/src/index.html](/src/index.html).
```html
css-pattern {
--border-radius: 15px;
--width: 15vw;
--height: 15vh;
}
```
## Development
run:
```bash
npm install
npm start
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
## Using this component
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install @jwillmer/pattern-component --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install @jwillmer/pattern-component --save`
- Add an import to the npm packages `import @jwillmer/pattern-component;`
- Then you can use the element anywhere in your template, JSX, html etc