Really neat solution, that allows you to build a quick viewport based layout, without relying on the still buggy CSS units.

<head>
    <!-- Add vUnit.js to the head to avoid FOUC -->
    <script src="path/to/vunit.js"></script>

    <!-- Instantiate vUnit.js passing a CSSMap with properties you want to play with -->
    <script>
        new vUnit({
            CSSMap: {
                // The selector (VUnit will create rules ranging from .selector1 to .selector100)
                '.vh_height': {
                    // The CSS property (any CSS property that accepts px as units)
                    property: 'height',
                    // What to base the value on (vh, vw, vmin or vmax)
                    reference: 'vh'
                },
                // Wanted to have a font-size based on the viewport width? You got it.
                '.vw_font-size': {
                    property: 'font-size',
                    reference: 'vw'
                },
                // vmin and vmax can be used as well.
                '.vmin_margin-top': {
                    property: 'margin-top',
                    reference: 'vmin'
                }
            },
            onResize: function() {
                console.log('A screen resize just happened, yo.');
            }
        }).init(); // call the public init() method
    </script>
</head>
<body>
    <h1 class="vw_font-size15">This title font-size is 15% of the viewport width.</h1>
    <p class="vh_height50">This p's height is 50% of the viewport height.</p>
    <p class="vmin_margin-top5">This p has some margin-top<p>
</body>

<head>

new vUnit({

CSSMap: {

// The selector (VUnit will create rules ranging from .selector1 to .selector100)

'.vh_height': {

// The CSS property (any CSS property that accepts px as units)

property: 'height',

// What to base the value on (vh, vw, vmin or vmax)

reference: 'vh'

// Wanted to have a font-size based on the viewport width? You got it.

'.vw_font-size': {

property: 'font-size',

reference: 'vw'

// vmin and vmax can be used as well.

'.vmin_margin-top': {

property: 'margin-top',

reference: 'vmin'

}

onResize: function() {

console.log('A screen resize just happened, yo.');

}

}).init(); // call the public init() method

</script>

</head>

<body>

<h1 class="vw_font-size15">This title font-size is 15% of the viewport width.</h1>

<p class="vh_height50">This p's height is 50% of the viewport height.</p>

<p class="vmin_margin-top5">This p has some margin-top<p>

</body>

Also works nicely in combination with Visual Composer for WordPress :)

vUnit @ Github

vUnit – microlib that allows you to size elements based on the viewport dimensions

Enjoy coding …

Alexander

vUnit – microlib that allows you to size elements based on the viewport dimensions

Enjoy coding …

Related Content

Top Productivity Tools 2023

Visual Composer – Fixing icon bleeding to child elements in admin

Lets fix the short comings of current CSS integrations – EQCSS / Element queries

Alexander