Last active
February 4, 2016 18:58
-
-
Save joaocunha/3ac1b9fdbc5f56a01d6e to your computer and use it in GitHub Desktop.
vUnit.js example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <!-- Add vUnit.js to the head if you want 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> | |
| <div class="vh_height50"><!-- This div height is 50% of the viewport height. --></div> | |
| <p class="vmin_margin-top5">This p has some margin-top<p> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment