5.BREAKPOINTS.stories.mdx

import { Meta } from '@storybook/addon-docs';

Breakpoints

Breakpoints are used for responsive layout

Screen Sizes

There are 4 screen sizes that make up the breakpoints for the MetaMask extension

• base: 0px
• sm: 576px
• md: 768px
• lg: 1280px

SCSS

There are Sass variables and mixins available for use for both min and max screens sizes

Variables

$screen-sm-max /* 575px */
$screen-md-max /* 767px */
$screen-lg-max /* 1279px */

$screen-sm-min /* 576px */
$screen-md-min /* 768px */
$screen-lg-min /* 1280px */

Mixins

/* Max screen size */
@include screen-sm-max {
  /* equivalent css @media screen and (max-width: 575px) */
}
@include screen-md-max {
  /* equivalent css @media screen and (max-width: 767px) */
}
@include screen-lg-max {
  /* equivalent css @media screen and (max-width: 1279px) */
}

/* Min screen size */
@include screen-sm-min {
  /* equivalent css @media screen and (min-width: 576px) */
}
@include screen-md-min {
  /* equivalent css @media screen and (min-width: 768px) */
}
@include screen-lg-min {
  /* equivalent css @media screen and (min-width: 1280px) */
}

Migrating from the old sass variables to the new mixins looks like this

/* Max width */
/* Instead of the media query and sass variable */
@media screen and (max-width: $break-small) {
  right: 16px;
}

/* Use the sass mixin */
@include screen-sm-max {
  right: 16px;
}

/* Min width */
/* Instead of the media query and sass variable */
@media screen and (min-width: $break-large) {
  left: 16px;
}

/* Use the sass mixin */
@include screen-sm-min {
  left: 16px;
}

Takeaways

• Try to avoid using static media queries in your code.
• Try to use the provided SCSS mixins

❌ Don't do this

Don't use static media queries in your code.

/**
* Don't do this
* Static media queries create inconsistency and could break the UI if we want to update them in future
**/
.account-menu {
  @media screen and (min-width: 769px) {
    right: calc((100vw - 80vw) / 2);
  }

  @media screen and (min-width: 1281px) {
    right: calc((100vw - 65vw) / 2);
  }
}

✅ Do this

Do use the provided Sass mixins

.account-menu {
  @include screen-md-min {
    right: calc((100vw - 80vw) / 2);
  }

  @include screen-lg-min {
    right: calc((100vw - 65vw) / 2);
  }
}