Technical Stuff

• This is all happening on my web site, bixgomez.com -- no slides per se, just examples I put together for this session
• Drupal 8
• Bare bones custom theme based on Stable
• Sass

Viewport Units: vw, vh, vmax, vmin

• Use them wherever you'd use px or em or % to set dimensions on elements:
  • font-size: 1.2vh
  • height: 30vw
  • padding-left: 5vmax
• vw = "viewport width"
  1vw = 1/100 (or 1%) of the width of the viewport, which generally speaking is the browser window
• vh = "viewport height"
  1vh = 1/100of the height of the viewport
• vmax = "viewport maximum"
  1/100 of the viewport height or width -- whichever is larger
• vmin = "viewport minimum"
  1/100 of the viewport height or width -- whichever is smaller

What's so great about them?

• Unlike every other unit of measurement, viewport units change their value dynamically as the viewport changes shape
• Can be used in conjunction with ems
  • Set master font-size of a wrapper element using a viewport unit
  • Set child sizes using ems
  • Easier to set size ratios this way, then just adjust one viewport unit to adjust the overall sizing
• Viewport values can be used everywhere px, ems, rems, or % can be used:
  • margin & padding
  • heights and widths of all elements
  • font size

What's not to love?

• Can't use the browser's native resize function!
• Renders (cmd/+) and (cmd/-) pretty much useless.
• Doesn't work too well on CodePen due to the layout interfering with the actual viewport dimensions
• Can sometimes be frustrating to work with when you have the inspector open, but not really.