Stop thinking in pixels!

There was a time when pixels were pixels and even relative units such as em and rem were just comfortable abstractions of a base font size, that was usually 16 pixels. We became so familiar with this paradigm, we may have overlooked the potential of viewport units and calc expressions to provide a holy grail of responsive design techniques.

Mike will provide a general overview of unit types and values in CSS, with a specific focus on how viewport units, calc expressions and other computed values work. Armed with an understanding of how computed units are resolved in the browsers, you’re going to learn how to create a “pure function” in CSS that uses vw as a variable. Then we are going to learn how to apply this technique to a number of practical use cases including: min and max font sizes, advanced fluid typography, elastic widths and fluid modular scale headings and more. Each of these techniques can be used today and can be applied with progressive enhancement.