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() { } }).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 :)
BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More
THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More
2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More
Short look back at 2023 This has been a busy and interesting year. I am… Read More
Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More
Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More