1.1.0 ā€¢ Published 4 years ago

varam v1.1.0

Weekly downloads
-
License
0BSD
Repository
github
Last release
4 years ago

varam

šŸŸ£ online

change CSS var via URL param

mention desired param

place data-varam on any scope to represent CSS var

<samp data-varam="oil ink">
  • only scoped mentions will change
  • scope page via root
<html data-varam="oil ink">
  • combine data with URL params to update matching var
  • combining ?oil=olive&ink=black would style each var
--oil: olive;
--ink: black;

var your style

background: var(--oil);
color: var(--ink);

code sensible default style

font-size: var(--size, 1em);
writing-mode: var(--mode, horizontal-tb);

code hyperlinks with &amp;

?oil=orange&amp;ink=black

javascript

automagic

šŸš„ varam automagically runs when you load varam.js

<script async src="varam.js"></script>
  • URL params are read and only read
  • CSS var are updated where matching
  • async or defer to your desire

updating

  • performant updating
  • we minimize reflow
  • just load the script to go with the flow with real URL
  • updaters return 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

  • default checks location.search not meta
  • staging meta simulates alternate search
  • omit meta unless you're staging
<meta name="varam" content="oil=purple">

technology

javascriptfrontendqueryparamurlvar
@infinitebrahmanuniverse/nolb-var@everything-registry/sub-chunk-3043
1.1.0

4 years ago

1.0.0

4 years ago

0.1.0

6 years ago