reactive-css v0.1.0

Reactive CSS

A super fast dynamic CSS rules. Dependency-free at 1.34 KB minified!

Getting Started

npm install reactive-css --save

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.

<div class="card fun-height">
  ...
</div>

<!-- Add the reactive-css script -->
<script src="../js/reactive-css.js"></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 Stylesheet
var funHeightCSS = rxs('.fun-height');

window.addEventListener('resize', function() {
  // Everytime the window is resized, update the height property for
  // the class `.fun-height` to a computed height
  funHeightCSS.set({
    height: (window.innerHeight * 0.65) + 'px',
  });
});

Example Demo

Clone this repo, and open up the example/index.html file.