Responsive Layouts

Responsive layouts are usually built from the outside in. A responsive layout built using media queries only cares about the size of the viewport, and it . It doesn't take the needs of the content into consideration. Container-level queries can allow responsive layouts to be closer to the content:

• https://ethanmarcotte.com/wrote/on-container-queries/
• https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
• 2U has a ResponsiveContainer component that is used to create breakpoints at the container level (rather than at the viewport level)

Modern CSS has a growing list of tools, such as Flexbox, Grid, and calc that might enable building responsive layouts from the inside out:

• https://paulrobertlloyd.com/2017/04/container_queries
• https://ethanmarcotte.com/wrote/a-bit-more-on-container-queries/

Fluid Typography

• https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/
• https://www.smashingmagazine.com/2016/05/fluid-typography/
• https://trentwalton.com/notes/2017/02/07/viewport-padding.html
• 2U has a FontScale component that is used to make the typography on the site scale with the viewport size.