You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
clemtre
a0ecccc291
|
9 months ago | |
|---|---|---|
| LICENSE | 9 months ago | |
| README | 9 months ago | |
| cssVarFilledCookies.css | 9 months ago | |
| cssVarFilledCookies.js | 9 months ago | |
| demo.html | 9 months ago | |
README
cssVarFilledCookies.js
CC4r License
_____
/ \
css variables \/_ \ editable html table
_____________________________________
root { | |
--underline-style: wavy; |--underline-style : wavy |
--title-width: 10ch; |--title-width : 10ch |
--src: url('image.png'); |--src : url('image.png')|
--gradient-start: olive; |--gradient-start : olive |
--gradient-end: brown; |--gradient-end : brown |
} |____________________________________|
__
\ /\
\_____/
cssVarFilledCookies.js will bake cookies with a filling of css
variables, exposing them to the user. The changes made are stored in the
local storage, allowing one to make persistant interface customizations.
The styling happens within cssVarFilledCookies.css, it wraps the
generated tr, td and textareas inside a display:none unless hovered
position fixed table.
demo
martinlemaire.fr/cssVarFilledCookies.js/demo.html
usage
1. Copy cssVarFilledCookies.js and cssVarFilledCookies.css in your
project folder.
2. Inside the html page you would like to modify, import the js and
css files like so:
<link rel="stylesheet" href="cssVarFilledCookies.css">
<script defer src="cssVarFilledCookies.js"></script>
3. Hovering the exclamation mark should display a table of declared css
variables inside a root{} statement.
example
a css file with variables declared in this manner:
root {
--margin: 10px;
--gutter: 5px;
--background: white;
--foreground: olive;
}
will dynamicaly generate the following html table:
<table>
<tr><td>--margin</td> <td><textarea>10px</textarea></td> </tr>
<tr><td>--gutter</td> <td><textarea>5px</textarea></td> </tr>
<tr><td>--background</td><td><textarea>white</textarea></td></tr>
<tr><td>--foreground</td><td><textarea>olive</textarea></td></tr>
</table>
Modifying the value from the textarea will store it in the local
storage, if you reload or close the page, the changes will be kept.
Note : using this technique, only the elements that are children of the
body can be accessed, styling the <html></html> element doesn't seem to
be possible.
contact@martinlemaire.fr