The Basics

The Basics

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.