class="vwfs2 vhmt4 vhmb4 vw80"vUnit is a vanilla JS microlib that allows you to size elements based on the viewport dimensions, without relying on the buggy vh/vw/vmin/vmax CSS units.
Small viewport fellows: the example might not look that good for you. Every minute I spend improving this example page is a minute I could be improving the lib itself, so I won't go overboard on this :)
Device agnostic: works everywhere, from IE8 to Mobile
Lightweight: only ~1000 bytes after gzip
Super fast: doesn't play with the DOM or parse your existing CSS
No dependencies: written in pure vanilla JS
class="vwfs3 vhmt7 vhmb3"Example: viewport-based gallery
class="vwfs3 vhmt7 vhmb3"How it works
Viewport relative units are awesome, except they're not - they are buggy, unreliable and have inconsistent implementation among browsers. vUnit.js offers a lightweight, robust alternative for them and weighs ~600 bytes after gzip.
vUnit.js calculates the browser viewport dimensions and creates CSS rules ranging from 1% to 100% of its size. These rules are then inserted into a stylesheet which is injected on the fly in the head tag - inspect this page check the last stylesheet to see.
An observer running every 100ms checks if the viewport have been resized and regenerates the CSS rules accordingly. It is a cross-device, event-less solution to keep track of everything that would trigger a resize on the viewport, namely:
class="vwfs3 vhmt7 vhmb3"How to use
class="vwfs3 vhmt7 vhmb3"Pro tips
class="vwfs3 vhmt7 vhmb3"Credits
Made with love by João Cunha
Awesome pictures by João Pacheco