Adding responsiveness to Canva’s Design System
From these principles, we provide layout components that leave our engineers to focus on more important things. For example, we have a Rows component that places components vertically (in rows).
As well as making it easier to construct layouts with a high degree of consistency, the components also provide a simple and consistent language between designers and developers.
Diving into a simplified version of how this looked, we applied a default class to set display: grid and width: 100% and another class conditionally setting the row-gap property.
Although this solution worked well to address layouts, we also had to address responsive design. If components are going to be spaced further apart on larger screens, our components should be able to provide that flexibility.
The next step was deciding what a good solution should look like. We had 2 hard requirements: an understandable API and for it to be SSR friendly, which meant using CSS media queries.
