Building a design system: Setting breakpoints for responsive design

Intro

To quickly design and develop web pages using a design system, it is recommended to use the same predefined breakpoints.

That way, when we use media queries in the various SCSS files, we will have fixed points where the design will be adapted to the different devices and resolutions.

For example, we’d like to apply the mobile design adjustments (as consistently as possible) when the screen width is less than 480px, and not at other random resolutions.

This consistency in breakpoints will help us quickly and efficiently create neat designs with a better user experience.

Solution

To do this, we can simply add a list of the breakpoints to the variables file (e.g. _variables.scss) inside our design system folder.

For me, the list of the breakpoints would look something like this:

/**
 * Breakpoints
 */

$min-xs: 480px;
$min-sm: 600px;
$min-md: 782px;
$min-lg: 1080px;
$min-xl: 1280px;
$min-xxl: 1440px;

$max-xs: $min-xs - 1;
$max-sm: $min-sm - 1;
$max-md: $min-md - 1;
$max-lg: $min-lg - 1;
$max-xl: $min-xl - 1;
$max-xxl: $min-xxl - 1;

I created variables for these 6 main breakpoints: X-small, small, medium, large, X-large, XX-large.

I set the value for each of them. This value will be used for media queries that check the min width.

I then created the max version for each of these breakpoints. It simply takes the minimum value and subtracts it by 1.

We can now use the relevant variable as part of the media query. For instance:

@media (min-width: $min-md) {
	// Design adjustments for medium screens and above.
}

@media (max-width: $max-md) {
	// Design adjustments for small screens only.
}

Flexibility

This solution is also extremely flexible to changes.

If at some point in the future we want to change one of the breakpoints (say lg to be 992px instead of 1080px), all we need to do is change the value of the $min-lg variable.

After that, the $max-lg variable will automatically adjust itself. When generating the new CSS files from the SCSS files, the new breakpoint will be updated in these files as well.