Responsiveness

When you're developing Blueprints or Recipes, it's your responsibility to ensure the components you make are responsive and function on all screen sizes.

Breakpoints

For now, we use the following responsive breakpoints:

:root {
  --xs-min-width: 0px;
  --xs-max-width: 575.98px;
  --sm-min-width: 576px;
  --sm-max-width: 767.98px;
  --md-min-width: 768px;
  --md-max-width: 991.98px;
  --lg-min-width: 992px;
  --lg-max-width: 1199.98px;
  --xl-min-width: 1200px;
  --xl-max-width: 1399.98px;
  --xxl-min-width: 1400px;
}