From 5b198ea57c13539ae48f7f6d8cfd90ba04f41d05 Mon Sep 17 00:00:00 2001 From: Jero Soler Date: Tue, 15 Jun 2021 19:09:36 +0200 Subject: [PATCH] first version --- .github/FUNDING.yml | 3 ++ .npmignore | 2 + LICENSE | 21 ++++++++ README.md | 119 ++++++++++++++++++++++++++++++++++++++++++++ docs/buttons.png | Bin 0 -> 5313 bytes docs/combine.png | Bin 0 -> 15358 bytes index.html | 86 +++++++++++++++++++++----------- package.json | 30 +++++++++++ 8 files changed, 232 insertions(+), 29 deletions(-) create mode 100644 .github/FUNDING.yml create mode 100644 .npmignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 docs/buttons.png create mode 100644 docs/combine.png create mode 100644 package.json 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 0000000000000000000000000000000000000000..7ebc5f1ef459ccbe5fee7d906db7dd2302d2bf68 GIT binary patch literal 5313 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 O+%d8+tTDL%^gjT+|5ObC literal 0 HcmV?d00001 diff --git a/docs/combine.png b/docs/combine.png new file mode 100644 index 0000000000000000000000000000000000000000..6a238b92921ab9f6d41735fbf94c91b57ac894f0 GIT binary patch literal 15358 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 literal 0 HcmV?d00001 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

@@ -127,7 +135,7 @@

Combine

+ + + 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