Prefer algorithmic layouts
Lens encourages building responsive layouts with less code following the algorithmic layout approach. What does this mean, let's look at the traditional method and how we can improve it.
The problem with media queries
The traditional approach for building responsive layouts is to write imperative/case-specific rules with media queries. This method requires us to specify the layout behavior manually for specific screen sizes which result in a design that covers only specific screen sizes ignoring everything in-between. It also forces us to write more code with multiple adjustments per screen size.
Algorithmic layouts — the browser doing the job for us
We can give some guidelines to the browser and let it arrange the elements depending on the available space. CSS flexbox and grid accept this type of guidelines. For example, we can tell flexbox to wrap its children when there is not enough horizontal space, or we can tell Grid to fit as many columns as possible in a container.
Simple algorithmic layout example
Algorithmic layouts with Lens layout components
This approach can be used with Lens layout components, specifically with Arrange (based on grid) and Split (based on flexbox) components.
See Layout recipes / Algorithmic responsive layouts
Some of the layout components props accept responsive values. These values are mapped to
min-width breakpoints. This method is preferred when more fine-tuning is needed than the algorithmic layout approach can offer. Check the component's Props section to see which props allow responsive values.
columns depending on the screen size.
The responsive prop can be used with custom breakpoints.
Use the Text
sizeMinMax prop for responsive text sizes. The size will grow from the minimum to maximum value while resizing the browser between the minimum and maximum breakpoints.
This tools are useful when we need to modify props that are not responsive.