Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanve/varam
change CSS var via URL param with this 77 line library called varam
https://github.com/ryanve/varam
css cssvar frontend javascript params technique urlsearchparams
Last synced: about 1 month ago
JSON representation
change CSS var via URL param with this 77 line library called varam
- Host: GitHub
- URL: https://github.com/ryanve/varam
- Owner: ryanve
- License: 0bsd
- Created: 2021-07-25T17:08:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-07-29T05:19:16.000Z (over 3 years ago)
- Last Synced: 2024-05-02T00:09:03.470Z (7 months ago)
- Topics: css, cssvar, frontend, javascript, params, technique, urlsearchparams
- Language: JavaScript
- Homepage: https://ryanve.dev/varam
- Size: 22.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# varam
[🟣 **online**](https://ryanve.dev/varam) [**latest**](../../releases/latest)
## change CSS var via URL param
### mention desired param
place `data-varam` on any scope to represent CSS `var`
```html
```
- only scoped mentions will change
- scope page via root
```html
```
- combine data with URL params to update matching `var`
- combining `?oil=olive&ink=black` would style each `var`
```css
--oil: olive;
--ink: black;
```
### var your style
```css
background: var(--oil);
color: var(--ink);
```
### code sensible default style
```css
font-size: var(--size, 1em);
writing-mode: var(--mode, horizontal-tb);
```
### code hyperlinks with `&`
```html
?oil=orange&ink=black
```
## [javascript](varam.js)
### automagic
🚥 `varam` automagically runs when you load [varam.js](varam.js)
```html
```
- URL params are read and only read
- CSS var are updated where matching
- [async or defer to your desire](../../releases)
### updating
- performant updating
- we minimize reflow
- [just load the script](#automagic) to go with the flow with real URL
- [updaters](#updaters) return [boolean](#boolean) whether reflow expected
- update if you change dom (otherwise no need)
### updaters
- `varam.flow()` automagic does `varam(location.search)` with real URL
- `varam.reset()` to reset state like `varam("")` but leave URL alone
- `varam.fresh(...)` is how varam performantly interacts with style
### boolean
- `true` when update was made
- `false` when update needless
### help
`varam.help()` for help in your console
### diagnostic
- `varam.meta` content interpreted
- `varam.state` latest state
- `varam.via` paramethod `"flow"` or `"meta"`
### [staging](../../pull/8)
- default checks `location.search` **not meta**
- staging meta simulates alternate search
- **omit meta** unless you're staging
```html
```
## technology
- [`URLSearchParams`](https://mdn.io/URLSearchParams)
- [`location`](https://mdn.io/window-location)
- [`script`](https://mdn.io/the-script-element)
- [`style`](https://mdn.io/CSSStyleDeclaration)
- [`html`](index.html) [`data-`](https://mdn.io/data-attributes)
- [`css`](www.css) [`var`](https://mdn.io/css-var)