diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..4fb30fd --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,3 @@ +# These are supported funding model platforms + +custom: ["https://paypal.me/jerosoler"] diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..058a3cc --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +docs/ +index.html \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5a72788 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Jero Soler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..2d63836 --- /dev/null +++ b/README.md @@ -0,0 +1,119 @@ +[![GitHub license](https://img.shields.io/github/license/jerosoler/css-houdini-pixel-box)](https://github.com/jerosoler/css-houdini-pixel-box/blob/main/LICENSE) + +# PixelBox + +CSS Houdini library. + +[PLAY DEMO](https://jerosoler.github.io/css-houdini-pixel-box/) + +![Demo buttons](https://github.com/jerosoler/css-houdini-pixel-box/raw/main/docs/buttons.png) + +![Demo combine](https://github.com/jerosoler/css-houdini-pixel-box/raw/main/docs/combine.png) + +## CDN + +```html + +``` + +## NPM + +```bash +npm install css-houdini-pixel-box +``` + +## How to use + +Download `pixelbox.js` file. + +### Polyfill + +View support in [caniuse](https://caniuse.com/mdn-api_css_paintworklet) + +```html + +``` + +### Javascript: + +```javascript +if ( + "paintWorklet" in CSS && + "registerProperty" in CSS && + "CSSUnitValue" in window +) { + CSS.registerProperty({ + name: "--pixelbox-border", + syntax: "", + initialValue: "2px", + inherits: false, + }); + + CSS.registerProperty({ + name: "--pixelbox-border-radius", + syntax: "", + initialValue: "0px", + inherits: false, + }); + + CSS.registerProperty({ + name: "--pixelbox-border-color", + syntax: "", + initialValue: "#000000", + inherits: false, + }); + + CSS.registerProperty({ + name: "--pixelbox-background-color", + syntax: "", + initialValue: "#ffffff", + inherits: false, + }); + + CSS.registerProperty({ + name: "--pixelbox-background-shadow-border", + syntax: "", + initialValue: "0px", + inherits: false, + }); + + CSS.registerProperty({ + name: "--pixelbox-background-shadow-color", + syntax: "", + initialValue: "#adafbc", + inherits: false, + }); + + /*CSS.registerProperty({ + name: '--pixelbox-background-shadow-position', + syntax: '', + initialValue: 'bottom-right', + inherits: false + }); + */ +} else { + console.log("Not Supported"); +} +CSS.paintWorklet.addModule("pixelbox.js"); +``` + +### CSS + +```css +div { + display: inline-block; + width: 200px; + height: 200px; + text-align: center; + line-height: 200px; + color: white; + background-image: paint(pixelbox); + --pixelbox-border: 10px; + --pixelbox-border-radius: 5px; + --pixelbox-border-color: #a0a0a0; + --pixelbox-background-color: #000000; + --pixelbox-background-shadow-border: 20px; + --pixelbox-background-shadow-color: #494949; + --pixelbox-background-shadow-position: bottom-right; +} +``` diff --git a/docs/buttons.png b/docs/buttons.png new file mode 100644 index 0000000..7ebc5f1 Binary files /dev/null and b/docs/buttons.png differ diff --git a/docs/combine.png b/docs/combine.png new file mode 100644 index 0000000..6a238b9 Binary files /dev/null and b/docs/combine.png differ diff --git a/index.html b/index.html index 50f076a..9f910f5 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Pixel Box - Css Houdini - Jero Soler + @@ -22,7 +23,14 @@

CSS Houdini

Info

- laslaslasdasd ssadas dasldsadlasdas +
@@ -127,7 +135,7 @@

Combine

-

Developed by Jero Soler

+

Developed by Jero Soler

+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..d4018e9 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "css-houdini-pixel-box", + "version": "0.0.1", + "description": "CSS Houdini PixelBox", + "main": "pixelbox.js", + "directories": { + "doc": "docs" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/jerosoler/css-houdini-pixel-box.git" + }, + "keywords": [ + "CSS", + "Houdini", + "pixelbox", + "8bit", + "retro", + "paintworklet" + ], + "author": "Jero Soler", + "license": "MIT", + "bugs": { + "url": "https://github.com/jerosoler/css-houdini-pixel-box/issues" + }, + "homepage": "https://jerosoler.github.io/css-houdini-pixel-box/" + } \ No newline at end of file