Module: Responsive Locks
This module provides mixins for doing linear transitions following viewport widths.
It's been inspired by works of
Indrek Paas
and Florens Verschelde,
who in turn were inspired by
Mike Riethmuller's "Precise control over responsive typography" and
Tim Brown's "Flexible typography with CSS locks".
You'll find it in src/modules/_responsive-locks.scss.
What are we trying to achieve?
We want a CSS property to scale from a start value to an end value between certain breakpoints. This can be done with manual calculations, but using these mixins makes it easier.
The common use cases
Mixin responsive-lock will keep a property constant at the start value up to the first breakpoint.
From the first breakpoint it will apply the linear transition, reaching the end value at the second
breakpoint.
The end value is kept constant from the second breakpoint and up.
When scaling fonts it's usually a good idea to set the line-height relative the elements own
font-size.
What about relative sizes?
It is possible to use rem-parameters with the mixins, as long as both the viewport widths and the
min and max values are in the same unit.
However, it's usually recommended to stick with pixels here.
A rem unit can always be converted to 16px for breakpoints anyway.
Advanced usage
If you want differently sloped transitions between different breakpoints you may venture into using the
responsive-linear-transition mixin directly.
It's used by the other mixins and focuses on just the transition part between the two breakpoints,
and doesn't set any properties outside the breakpoints.
What about the vertical rhythm?
As these mixins do linear transitions, they won't follow the discrete steps for heights that the vertical rhythm depends on. But it can be used on elements within fixed height containers, or on floated elements. There's also a mixin for scaling in discrete steps available in the Flow rhythm module.