class="vwfs7 vhmt4"

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

  1. Load vUnit on the head tag to avoid FOUC.
  2. Add a CSS transition on mobile, so it doesn't jitter as the address bar appears/disappears.
  3. vUnit is pretty fast, but avoid bloating your CSSMap with properties you aren't gonna use.
  4. vUnit is not supposed to replace your grid, just to enhance your design.
  5. Always consider non-JS users.

class="vwfs3 vhmt7 vhmb3"

Made with love by João Cunha

Awesome pictures by João Pacheco

Icons made by Freepik, Icomoon, Franco Averta from Licensed by CC BY 3.0