Properties of Elements Exposed via CSS Variables
Varsity is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:
offsetWidthoffsetHeightoffsetLeftoffsetTopaspect-ratiocharacterschildrenvalueBy default, Varsity will reprocess selectors by watching the following events:
loadresizeinputclickTo run Varsity whenever you want, use the varsity() function in JS.
To have varsity watch an element, you need to give that element a unique identifier, as well as add the data-varsity attribute. The plugin will use either the value of the data-varsity attribute, or else the value of the id (if defined) for an element.
<div id=example data-varsity></div>
<!-- or -->
<div data-varsity=example></div>Once the plugin is aware of an element to watch, and the unique name of that element, it will make the above values available in the following format: --name-value, for example:
--example-offsetWidth--example-offsetHeight--example-offsetLeft--example-offsetTop--example-aspect-ratio--example-characters--example-children--example-value