class="vwfs7 vhmt4"
vUnit.js 

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 :)

class="vw25"

Device agnostic: works everywhere, from IE8 to Mobile

class="vw25"

Lightweight: only ~1000 bytes after gzip

class="vw25"

Super fast: doesn't play with the DOM or parse your existing CSS

class="vw25"

No dependencies: written in pure vanilla JS

class="vwfs3 vhmt7 vhmb3"
Example: viewport-based gallery 

class="vw50 vh50"
class="vw50 vh50"
class="vw50 vh50"
class="vw50 vh50"
class="vw100 vh100"
class="vw33 vh50"
class="vw33 vh50"
class="vw34 vh50"

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"
Credits

Made with love by João Cunha

Awesome pictures by João Pacheco

Icons made by Freepik, Icomoon, Franco Averta from www.flaticon.com. Licensed by CC BY 3.0