Categories: DevelopmentJavascriptVisual ComposerWordPress

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

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

    

  1. 
<head>

    2. 

  2.     <!-- Add vUnit.js to the head to avoid FOUC -->

    3. 

  3.     <script src="path/to/vunit.js"></script>

    4. 

  4.  
    5. 

  5.     <!-- Instantiate vUnit.js passing a CSSMap with properties you want to play with -->

    6. 

  6.     <script>

    7. 

  7.         new vUnit({

    8. 

  8.             CSSMap: {

    9. 

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

    10. 

  10.                 '.vh_height': {

    11. 

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

    12. 

  12.                     property: 'height',

    13. 

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

    14. 

  14.                     reference: 'vh'

    15. 

  15.                 },

    16. 

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

    17. 

  17.                 '.vw_font-size': {

    18. 

  18.                     property: 'font-size',

    19. 

  19.                     reference: 'vw'

    20. 

  20.                 },

    21. 

  21.                 // vmin and vmax can be used as well.

    22. 

  22.                 '.vmin_margin-top': {

    23. 

  23.                     property: 'margin-top',

    24. 

  24.                     reference: 'vmin'

    25. 

  25.                 }

    26. 

  26.             },

    27. 

  27.             onResize: function() {

    28. 

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

    29. 

  29.             }

    30. 

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

    31. 

  31.     </script>

    32. 

  32. 
</head>

    33. 

  33. 
<body>

    34. 

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

    35. 

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

    36. 

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

  37. </body>
    38.

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

vUnit @ Github

Enjoy coding …

Alex

I am a full-stack developer. I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing. I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest. Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Leave a Comment
Published by
Alex
8 years ago

Recent Posts

Particle Network Animations in Javascript

What are particle animations? Particle network animations in JavaScript typically involve creating visual representations of… Read More

2 days ago

B&B / Hotel Booking Solutions for WordPress | 2024

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More

4 weeks ago

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

2 months ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

4 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

4 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

5 months ago