rxs: Reactive CSS
Super fast dynamic CSS rules.
Tiny and Dependency-free!
Getting Started
npm install rxs --save
Example Demo
Clone this repo, and open up:
- example/index.html (Move your mouse around + resize window)
- example/hero.html (Scroll)
Quick Example
For this example, we want the height of any element with the class of .fun-height
to be exactly 65% of the window's height, in px
. It should also update everytime the browser is resized.
... <!-- Add the reactive-css script -->
In our Javascript, we'll define the Reactive CSS rule. We can set/update the rule by using the .set()
method everytime the window is resized.
// Add a new CSS rule to the Reactive Stylesheetvar funHeightCSS = ; window;
Alternatively, you can write the above in a slightly shorter way by passing the style properties as a second argument for rxs()
:
window;