[![Build Status](https://app.travis-ci.com/Huluvu424242/honey-papercss-style.svg?branch=master)](https://app.travis-ci.com/Huluvu424242/honey-papercss-style)
![Github CI](https://github.com/Huluvu424242/honey-papercss-style/workflows/Github%20CI/badge.svg)
[![npm](https://img.shields.io/npm/v/@huluvu424242/honey-papercss-style.svg)](https://www.npmjs.com/package/@huluvu424242/honey-papercss-style)
[![npm](https://img.shields.io/npm/dy/@huluvu424242/honey-papercss-style.svg)](https://www.npmjs.com/package/@huluvu424242/honey-papercss-style)
[![npm](https://img.shields.io/npm/dm/@huluvu424242/honey-papercss-style.svg)](https://www.npmjs.com/package/@huluvu424242/honey-papercss-style)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@huluvu424242/honey-papercss-style)
[![Donate with paypal](https://img.shields.io/badge/paypal-donate-yellow.svg)](https://paypal.me/huluvu424242)
![Keybase BTC](https://img.shields.io/keybase/btc/huluvu424242)
# honey-papercss-style 
This project contains web components for styling honey webcomponents. 

## installation

npm install --save @huluvu424242/honey-papercss-style

## usage

```html
<script 
    type="module" 
    src='https://unpkg.com/@huluvu424242/honey-papercss-style@0.0.4/dist/honey-papercss-style/honey-papercss-style.esm.js'>
</script>
<script 
    nomodule 
    src='https://unpkg.com/@huluvu424242/honey-papercss-style@0.0.4/dist/cjs/honey-papercss-style.cjs.js'>
</script>
```
To the [demo site](https://huluvu424242.github.io/honey-papercss-style/index.html)

[Vision of API (under construction)](src/components/honey-papercss-style/readme.md)

## demo

<!--
```
<custom-element-demo>
  <template>
    <link rel="import" href="docs/index.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<body id="seite" style="display: block">

<h1>Nutzung der honey-papercss-style Komponenten</h1>

<honey-define-style>
    <honey-papercss-style />
</honey-define-style>

<your-component/>

</body>
```
To the [live demo](https://huluvu424242.github.io/honey-papercss-style/index.html)

## become an supporter

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## releaselog

### vX.X.X unpublished

### v0.0.4 published at 2021-10-02

*  paper class set/remove to body
*  overriding of css properties removed



### v0.0.3 published at 2021-09-11

*  honey-style-it used


### v0.0.2 published at 2021-09-06

* [issue 4](https://github.com/Huluvu424242/honey-papercss-style/issues/4) honey-style component added

### v0.0.1 published at 2021-09-03

* [issue 1](https://github.com/Huluvu424242/honey-papercss-style/issues/1) setup project

## warranty

no warranty

## license

MIT License

## technology used

credits to the power of:

* [PaperCSS](https://www.getpapercss.com/) (ISC License)
* [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements)
* [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)


## browser support

### Custom Elements

* [Can I use with browsers?](https://caniuse.com/#feat=mdn-api_window_customelements)

### CSS Custom Properties

* [Can I use with browsers?](https://caniuse.com/#search=css%20custom%20properties)

