Having fun (but not too much fun) with vw and vh units

Back in the day, pixels were a themer's best friend when it came to setting dimensions in CSS.  Way back in the day, they were a themer's ONLY friend.  Then came em (and rem) units.  For the past several years, as vw (viewport width) and vh (viewport height) units have enjoyed wider support among modern browsers, they have become increasingly popular among themers.

In this session, I will take participants along on my journey into the wonderful world of these latest scalable units, and how we can use them in conjunction with Sass to yield displays that are more consistent at any viewport size.  I will show how scalable units can help ease the pain of unpredictable results when content editors are let loose in a WYSIWYG environment; through the creative use of scalable units, we can create pages that are closer to their authors' intent.

I will also highlight cases where the use of vh and vw units might yield undesired results (such as unreadably small or unreasonably large text), and I will demonstrate how I have used Sass logic and math to overcome these obstacles.

Speaker(s): 
Session Track: 
Tools & Techniques
Experience level: 
Beginner