clemtre
/
cssVarFilledCookies.js
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
A small piece of javascript exposing css variables on a webpage, allowing one to make local and persistent edits to them.
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.
11 Commits
1 Branch
0 Tags
55 KiB
 
 
 
Branch: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
clemtre e59c3e5e44
:root{@} 		2 months ago
.README.swp :root 2 months ago
.cssVarFilledCookies.css.swp :root{@} 2 months ago
LICENSE init 2 months ago
README :root 2 months ago
cssVarFilledCookies.css :root{@} 2 months ago
cssVarFilledCookies.js cssVarFilledCookies 2 months ago
demo.html :root 2 months ago
index.html :root 2 months ago
style.css :root 2 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